[theme] style API on peekViewWidget & zoneWidget. Fixes #23087. Fixes #23088

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<boolean>('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 = <LayoutData>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(() => {

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;
 }

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<IDisposable>(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,` +

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<IPeekViewService>('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 = <IPeekViewOptions>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 = <IPeekViewOptions>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

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;
 }

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 {