diff --git a/src/vs/editor/contrib/referenceSearch/browser/referencesController.ts b/src/vs/editor/contrib/referenceSearch/browser/referencesController.ts index aadd360a29aecc7007decedc499f98efc03f02e1..d941dbaa3656d0ec87cc0e39de0388190fdc5ca6 100644 --- a/src/vs/editor/contrib/referenceSearch/browser/referencesController.ts +++ b/src/vs/editor/contrib/referenceSearch/browser/referencesController.ts @@ -26,6 +26,7 @@ import { ReferencesModel, OneReference } from './referencesModel'; import { ReferenceWidget, LayoutData } from './referencesWidget'; import { Range } from 'vs/editor/common/core/range'; import { ITextModelResolverService } from 'vs/editor/common/services/resolverService'; +import { IThemeService } from "vs/platform/theme/common/themeService"; export const ctxReferenceSearchVisible = new RawContextKey('referenceSearchVisible', false); @@ -62,6 +63,7 @@ export class ReferencesController implements editorCommon.IEditorContribution { @IInstantiationService private _instantiationService: IInstantiationService, @IWorkspaceContextService private _contextService: IWorkspaceContextService, @IStorageService private _storageService: IStorageService, + @IThemeService private _themeService: IThemeService, @IConfigurationService private _configurationService: IConfigurationService, @optional(IPeekViewService) private _peekViewService: IPeekViewService ) { @@ -104,7 +106,7 @@ export class ReferencesController implements editorCommon.IEditorContribution { })); const storageKey = 'peekViewLayout'; const data = JSON.parse(this._storageService.get(storageKey, undefined, '{}')); - this._widget = new ReferenceWidget(this._editor, data, this._textModelResolverService, this._contextService, this._instantiationService); + this._widget = new ReferenceWidget(this._editor, data, this._textModelResolverService, this._contextService, this._themeService, this._instantiationService); this._widget.setTitle(nls.localize('labelLoading', "Loading...")); this._widget.show(range); this._disposables.push(this._widget.onDidClose(() => { diff --git a/src/vs/editor/contrib/referenceSearch/browser/referencesWidget.css b/src/vs/editor/contrib/referenceSearch/browser/referencesWidget.css index 53396457103bd82c2d418047b31c02148cbe6ce8..54a5b82fa70a803085f78cd9749563809739557a 100644 --- a/src/vs/editor/contrib/referenceSearch/browser/referencesWidget.css +++ b/src/vs/editor/contrib/referenceSearch/browser/referencesWidget.css @@ -9,10 +9,6 @@ border-bottom-width: 1px; } -.monaco-editor .reference-zone-widget.zone-widget-arrow.below { - background: transparent; -} - .monaco-editor .zone-widget .zone-widget-container.reference-zone-widget.results-loaded { -webkit-transition: height 100ms ease-in; transition: height 100ms ease-in; @@ -71,14 +67,6 @@ font-size: 0.9em; } -.monaco-editor .reference-zone-widget .ref-tree .reference .lineNumber { - color: #A8A8A8; -} - -.monaco-editor .reference-zone-widget .ref-tree .selected .reference .lineNumber { - color: white; -} - .monaco-editor .reference-zone-widget .monaco-count-badge { margin-right: 12px; } diff --git a/src/vs/editor/contrib/referenceSearch/browser/referencesWidget.ts b/src/vs/editor/contrib/referenceSearch/browser/referencesWidget.ts index c34b601386800a0b5b820a7302f277b5b4f4d4fa..0e42356e4bdc3942ac7d0fb5e3e887dc6bb10030 100644 --- a/src/vs/editor/contrib/referenceSearch/browser/referencesWidget.ts +++ b/src/vs/editor/contrib/referenceSearch/browser/referencesWidget.ts @@ -13,6 +13,7 @@ import { IDisposable, dispose, Disposables, IReference } from 'vs/base/common/li import { Schemas } from 'vs/base/common/network'; import * as strings from 'vs/base/common/strings'; import { TPromise } from 'vs/base/common/winjs.base'; +import { Color } from "vs/base/common/color"; import { $, Builder } from 'vs/base/browser/builder'; import * as dom from 'vs/base/browser/dom'; import { Sash, ISashEvent, IVerticalSashLayoutProvider } from 'vs/base/browser/ui/sash/sash'; @@ -38,8 +39,7 @@ import { PeekViewWidget, IPeekViewService } from 'vs/editor/contrib/zoneWidget/b import { FileReferences, OneReference, ReferencesModel } from './referencesModel'; import { ITextModelResolverService, ITextEditorModel } from 'vs/editor/common/services/resolverService'; import { registerColor, highContrastOutline } from 'vs/platform/theme/common/colorRegistry'; -import { registerThemingParticipant } from 'vs/platform/theme/common/themeService'; - +import { registerThemingParticipant, ITheme, IThemeService } from 'vs/platform/theme/common/themeService'; class DecorationsManager implements IDisposable { @@ -506,14 +506,29 @@ export class ReferenceWidget extends PeekViewWidget { public layoutData: LayoutData, private _textModelResolverService: ITextModelResolverService, private _contextService: IWorkspaceContextService, + private _themeService: IThemeService, private _instantiationService: IInstantiationService ) { super(editor, { showFrame: false, showArrow: true, isResizeable: true }); + this._applyTheme(_themeService.getTheme()); + _themeService.onThemeChange(this._applyTheme.bind(this)); + this._instantiationService = this._instantiationService.createChild(new ServiceCollection([IPeekViewService, this])); this.create(); } + private _applyTheme(theme: ITheme) { + let borderColor = theme.getColor(editorPeekBorders) || Color.transparent; + this.style({ + arrowColor: borderColor, + frameColor: borderColor, + headerBackgroundColor: theme.getColor(editorPeekTitleBackground) || Color.transparent, + primaryHeadingColor: theme.getColor(editorPeekTitle), + secondaryHeadingColor: theme.getColor(editorPeekTitleInfo) + }); + } + public dispose(): void { this.setModel(null); dispose(this._preview, this._previewNotAvailableMessage, this._tree, this._sash, this._previewModelReference); @@ -758,16 +773,21 @@ export class ReferenceWidget extends PeekViewWidget { // theming -export const editorPeekFindMatchHighlight = registerColor('editorPeekFindMatchHighlight', { dark: '#ea5c004d', light: '#ea5c004d', hc: null }, nls.localize('editorPeekFindMatchHighlight', 'References view match highlight color')); -export const editorPeekReferenceHighlight = registerColor('editorPeekReferenceHighlight', { dark: '#ff8f0099', light: '#f5d802de', hc: null }, nls.localize('editorPeekReferenceHighlight', 'References range highlight color')); +export const editorPeekTitleBackground = registerColor('editorPeekTitleBackground', { dark: '#1E1E1E', light: '#FFFFFF', hc: '#0C141F' }, nls.localize('editorPeekTitleBackground', 'Editor peek title area background')); +export const editorPeekTitle = registerColor('editorPeekTitle', { dark: '#FFFFFF', light: '#333333', hc: '#FFFFFF' }, nls.localize('editorPeekTitle', 'Editor peek title color')); +export const editorPeekTitleInfo = registerColor('editorPeekTitleInfo', { dark: '#ccccccb3', light: '#6c6c6cb3', hc: '#FFFFFF99' }, nls.localize('editorPeekTitleInfo', 'Editor peek title info color')); +export const editorPeekBorders = registerColor('editorPeekBorder', { dark: '#007acc', light: '#007acc', hc: '#6FC3DF' }, nls.localize('editorPeekBorder', 'Editor peek view borders')); -export const editorPeekResultsBackground = registerColor('editorPeekResultsBackground', { dark: '#252526', light: '#F3F3F3', hc: '#000000' }, nls.localize('editorPeekResultsBackground', 'References view list background')); -export const editorPeekResultsMatchForeground = registerColor('editorPeekResultsMatchForeground', { dark: '#bbbbbb', light: '#646465', hc: '#ffffff' }, nls.localize('editorPeekResultsMatchForeground', 'References view match entry foreground')); -export const editorPeekResultsFileForeground = registerColor('editorPeekResultsFileForeground', { dark: '#ffffff', light: '#f5d802de', hc: '#ffffff' }, nls.localize('editorPeekResultsFileForeground', 'References view file entry foreground')); +export const editorPeekResultsBackground = registerColor('editorPeekResultsBackground', { dark: '#252526', light: '#F3F3F3', hc: Color.black }, nls.localize('editorPeekResultsBackground', 'References view list background')); +export const editorPeekResultsMatchForeground = registerColor('editorPeekResultsMatchForeground', { dark: '#bbbbbb', light: '#646465', hc: Color.white }, nls.localize('editorPeekResultsMatchForeground', 'References view match entry foreground')); +export const editorPeekResultsFileForeground = registerColor('editorPeekResultsFileForeground', { dark: Color.white, light: '#1E1E1E', hc: Color.white }, nls.localize('editorPeekResultsFileForeground', 'References view file entry foreground')); export const editorPeekResultsSelectedBackground = registerColor('editorPeekResultsSelectedBackground', { dark: '#3399ff33', light: '#3399ff33', hc: null }, nls.localize('editorPeekResultsSelectedBackground', 'References view selected entry background')); -export const editorPeekResultsSelectedForeground = registerColor('editorPeekResultsSelectedForeground', { dark: '#ffffff', light: '#6C6C6C', hc: '#ffffff' }, nls.localize('editorPeekResultsSelectedForeground', 'References view selected entry foreground')); +export const editorPeekResultsSelectedForeground = registerColor('editorPeekResultsSelectedForeground', { dark: Color.white, light: '#6C6C6C', hc: Color.white }, nls.localize('editorPeekResultsSelectedForeground', 'References view selected entry foreground')); export const editorPeekEditorBackground = registerColor('editorPeekEditorBackground', { dark: '#001F33', light: '#F2F8FC', hc: '#0C141F' }, nls.localize('editorPeekEditorBackground', 'References view editor background')); +export const editorPeekFindMatchHighlight = registerColor('editorPeekFindMatchHighlight', { dark: '#ea5c004d', light: '#ea5c004d', hc: null }, nls.localize('editorPeekFindMatchHighlight', 'References view match highlight color')); +export const editorPeekReferenceHighlight = registerColor('editorPeekReferenceHighlight', { dark: '#ff8f0099', light: '#f5d802de', hc: null }, nls.localize('editorPeekReferenceHighlight', 'References range highlight color')); + registerThemingParticipant((theme, collector) => { let findMatchHighlightColor = theme.getColor(editorPeekFindMatchHighlight); @@ -806,7 +826,6 @@ registerThemingParticipant((theme, collector) => { let editorBackground = theme.getColor(editorPeekEditorBackground); if (editorBackground) { collector.addRule( - `.monaco-editor.${theme.selector} .reference-zone-widget,` + `.monaco-editor.${theme.selector} .reference-zone-widget .preview .monaco-editor,` + `.monaco-editor.${theme.selector} .reference-zone-widget .preview .glyph-margin,` + `.monaco-editor.${theme.selector} .reference-zone-widget .preview .monaco-editor-background,` + diff --git a/src/vs/editor/contrib/zoneWidget/browser/peekViewWidget.ts b/src/vs/editor/contrib/zoneWidget/browser/peekViewWidget.ts index 4e6eb948929e931f47d94addf64587e06e11b961..365d27d95a22567ae61710f9d9539cedfa79cf0f 100644 --- a/src/vs/editor/contrib/zoneWidget/browser/peekViewWidget.ts +++ b/src/vs/editor/contrib/zoneWidget/browser/peekViewWidget.ts @@ -9,6 +9,7 @@ import 'vs/css!./peekViewWidget'; import * as nls from 'vs/nls'; import { Action } from 'vs/base/common/actions'; import * as strings from 'vs/base/common/strings'; +import * as objects from 'vs/base/common/objects'; import { $ } from 'vs/base/browser/builder'; import Event, { Emitter } from 'vs/base/common/event'; import * as dom from 'vs/base/browser/dom'; @@ -17,11 +18,10 @@ import { ServicesAccessor, createDecorator } from 'vs/platform/instantiation/com import { ICommonCodeEditor } from 'vs/editor/common/editorCommon'; import { ICodeEditorService } from 'vs/editor/common/services/codeEditorService'; import { ICodeEditor } from 'vs/editor/browser/editorBrowser'; -import { IOptions, ZoneWidget } from './zoneWidget'; +import { IOptions, ZoneWidget, IStyles } from './zoneWidget'; import { EmbeddedCodeEditorWidget } from 'vs/editor/browser/widget/embeddedCodeEditorWidget'; import { ContextKeyExpr, RawContextKey } from 'vs/platform/contextkey/common/contextkey'; -import { registerColor } from 'vs/platform/theme/common/colorRegistry'; -import { registerThemingParticipant } from 'vs/platform/theme/common/themeService'; +import { Color } from "vs/base/common/color"; export var IPeekViewService = createDecorator('peekViewService'); @@ -45,6 +45,21 @@ export function getOuterEditor(accessor: ServicesAccessor, args: any): ICommonCo return editor; } +export interface IPeekViewStyles extends IStyles { + headerBackgroundColor?: Color; + primaryHeadingColor?: Color; + secondaryHeadingColor?: Color; +} + +export interface IPeekViewOptions extends IOptions, IPeekViewStyles { +} + +const defaultOptions: IPeekViewOptions = { + headerBackgroundColor: Color.white, + primaryHeadingColor: Color.fromHex('#333333'), + secondaryHeadingColor: Color.fromHex('#6c6c6cb3') +}; + export abstract class PeekViewWidget extends ZoneWidget implements IPeekViewService { public _serviceBrand: any; @@ -59,8 +74,9 @@ export abstract class PeekViewWidget extends ZoneWidget implements IPeekViewServ protected _actionbarWidget: ActionBar; protected _bodyElement: HTMLDivElement; - constructor(editor: ICodeEditor, options: IOptions = {}) { + constructor(editor: ICodeEditor, options: IPeekViewOptions = {}) { super(editor, options); + objects.mixin(objects.clone(defaultOptions), options); } public dispose(): void { @@ -82,6 +98,37 @@ export abstract class PeekViewWidget extends ZoneWidget implements IPeekViewServ super.show(where, heightInLines); } + public style(styles: IPeekViewStyles) { + let options = this.options; + if (styles.headerBackgroundColor) { + options.headerBackgroundColor = styles.headerBackgroundColor; + } + if (styles.primaryHeadingColor) { + options.primaryHeadingColor = styles.primaryHeadingColor; + } + if (styles.secondaryHeadingColor) { + options.secondaryHeadingColor = styles.secondaryHeadingColor; + } + super.style(styles); + } + + protected _applyStyles() { + super._applyStyles(); + let options = this.options; + if (this._headElement) { + this._headElement.style.backgroundColor = options.headerBackgroundColor.toString(); + } + if (this._primaryHeading) { + this._primaryHeading.style.color = options.primaryHeadingColor.toString(); + } + if (this._secondaryHeading) { + this._secondaryHeading.style.color = options.secondaryHeadingColor.toString(); + } + if (this._bodyElement) { + this._bodyElement.style.borderColor = options.frameColor.toString(); + } + } + protected _fillContainer(container: HTMLElement): void { this.setCssClass('peekview-widget'); @@ -165,31 +212,4 @@ export abstract class PeekViewWidget extends ZoneWidget implements IPeekViewServ protected _doLayoutBody(heightInPixel: number, widthInPixel: number): void { this._bodyElement.style.height = strings.format('{0}px', heightInPixel); } -} - -// theming - -export const editorPeekTitleBackground = registerColor('editorPeekTitleBackground', { dark: '#1E1E1E', light: '#FFFFFF', hc: '#0C141F' }, nls.localize('editorPeekTitleBackground', 'Editor peek title area background')); -export const editorPeekTitle = registerColor('editorPeekTitle', { dark: '#FFFFFF', light: '#333333', hc: '#FFFFFF' }, nls.localize('editorPeekTitle', 'Editor peek title color')); -export const editorPeekTitleInfo = registerColor('editorPeekTitleInfo', { dark: '#ccccccb3', light: '#6c6c6cb3', hc: '#FFFFFF99' }, nls.localize('editorPeekTitleInfo', 'Editor peek title info color')); -export const editorPeekBorders = registerColor('editorPeekBorder', { dark: '#007acc', light: '#007acc', hc: '#6FC3DF' }, nls.localize('editorPeekBorder', 'Editor peek view borders')); - -registerThemingParticipant((theme, collector) => { - let peekBackground = theme.getColor(editorPeekTitleBackground); - if (peekBackground) { - collector.addRule(`.monaco-editor.${theme.selector} .peekview-widget .head { background-color: ${peekBackground}; }`); - } - let title = theme.getColor(editorPeekTitle); - if (title) { - collector.addRule(`.monaco-editor.${theme.selector} .peekview-widget .head .peekview-title .filename { color: ${title}; }`); - } - let titleInfo = theme.getColor(editorPeekTitleInfo); - if (titleInfo) { - collector.addRule(`.monaco-editor.${theme.selector} .peekview-widget .head .peekview-title .dirname:not(:empty) { color: ${titleInfo}; }`); - } - let borders = theme.getColor(editorPeekBorders); - if (borders) { - collector.addRule(`.monaco-editor.${theme.selector} .zone-widget-container.peekview-widget { border-top-color: ${borders}; border-bottom-color: ${borders}; }`); - collector.addRule(`.monaco-editor.${theme.selector} .peekview-widget > .body { border-color: ${borders}; }`); - } -}); \ No newline at end of file +} \ No newline at end of file diff --git a/src/vs/editor/contrib/zoneWidget/browser/zoneWidget.css b/src/vs/editor/contrib/zoneWidget/browser/zoneWidget.css index ccd8a859783fd64d5ced3a1fabe1ad2a8feafaae..38b3e43abd8ac9620429d12e7b3c61174ff4340f 100644 --- a/src/vs/editor/contrib/zoneWidget/browser/zoneWidget.css +++ b/src/vs/editor/contrib/zoneWidget/browser/zoneWidget.css @@ -7,7 +7,7 @@ z-index: 10; } -.monaco-editor .zone-widget-arrow { +.monaco-editor .zone-widget-arrow.below { width: 0; height: 0; border-color: transparent; @@ -15,16 +15,10 @@ position: absolute; } -.monaco-editor .zone-widget-arrow.below { - border-bottom-color: rgb(0, 122, 204); -} - .monaco-editor .zone-widget .zone-widget-container { border-top-style: solid; border-bottom-style: solid; border-top-width: 0; border-bottom-width: 0; - border-top-color: rgb(0, 122, 204); - border-bottom-color: rgb(0, 122, 204); position: relative; } diff --git a/src/vs/editor/contrib/zoneWidget/browser/zoneWidget.ts b/src/vs/editor/contrib/zoneWidget/browser/zoneWidget.ts index 78e6eedeadaf9aaeb88788152f48c561f9ddbf21..1fb9fe02195253f5cd78f6fda32cd6d8cf7f1041 100644 --- a/src/vs/editor/contrib/zoneWidget/browser/zoneWidget.ts +++ b/src/vs/editor/contrib/zoneWidget/browser/zoneWidget.ts @@ -14,6 +14,7 @@ import { Sash, Orientation, IHorizontalSashLayoutProvider, ISashEvent } from 'vs import { EditorLayoutInfo, IPosition, IRange } from 'vs/editor/common/editorCommon'; import { Range } from 'vs/editor/common/core/range'; import { ICodeEditor, IOverlayWidget, IOverlayWidgetPosition, IViewZone, IViewZoneChangeAccessor } from 'vs/editor/browser/editorBrowser'; +import { Color, RGBA } from "vs/base/common/color"; export interface IOptions { showFrame?: boolean; @@ -22,12 +23,23 @@ export interface IOptions { className?: string; isAccessible?: boolean; isResizeable?: boolean; + frameColor?: Color; + arrowColor?: Color; } +export interface IStyles { + frameColor?: Color; + arrowColor?: Color; +} + +const defaultColor = Color.fromRGBA(new RGBA(0, 122, 204)); + const defaultOptions: IOptions = { showArrow: true, showFrame: true, - className: '' + className: '', + frameColor: defaultColor, + arrowColor: defaultColor }; const WIDGET_ID = 'vs.editor.contrib.zoneWidget'; @@ -151,9 +163,31 @@ export abstract class ZoneWidget extends Widget implements IHorizontalSashLayout this.arrow = document.createElement('div'); this.arrow.className = 'zone-widget-arrow below'; } - this._fillContainer(this.container); this._initSash(); + this._applyStyles(); + } + + public style(styles: IStyles) { + if (styles.frameColor) { + this.options.frameColor = styles.frameColor; + } + if (styles.arrowColor) { + this.options.arrowColor = styles.arrowColor; + } + this._applyStyles(); + } + + protected _applyStyles() { + if (this.container) { + let frameColor = this.options.frameColor.toString(); + this.container.style.borderTopColor = frameColor; + this.container.style.borderBottomColor = frameColor; + } + if (this.arrow) { + let arrowColor = this.options.arrowColor.toString(); + this.arrow.style.borderBottomColor = arrowColor; + } } private _getWidth(info: EditorLayoutInfo = this.editor.getLayoutInfo()): number {