Fix #57348 - fix input box suggest widget theming

src/vs/workbench/parts/codeEditor/browser/suggestEnabledInput.ts

@@ -5,30 +5,32 @@
 
 'use strict';
 
-import 'vs/css!./media/suggestEnabledInput';
-import { $, addClass, append, removeClass, Dimension } from 'vs/base/browser/dom';
+import { $, addClass, append, Dimension, removeClass } from 'vs/base/browser/dom';
+import { Widget } from 'vs/base/browser/ui/widget';
+import { Color } from 'vs/base/common/color';
 import { chain, Emitter, Event } from 'vs/base/common/event';
 import { KeyCode } from 'vs/base/common/keyCodes';
-import { IDisposable, dispose } from 'vs/base/common/lifecycle';
+import { dispose, IDisposable } from 'vs/base/common/lifecycle';
 import { isMacintosh } from 'vs/base/common/platform';
 import uri from 'vs/base/common/uri';
+import 'vs/css!./media/suggestEnabledInput';
 import { CodeEditorWidget } from 'vs/editor/browser/widget/codeEditorWidget';
 import { IEditorOptions } from 'vs/editor/common/config/editorOptions';
+import { Position } from 'vs/editor/common/core/position';
+import { Range } from 'vs/editor/common/core/range';
+import { ITextModel } from 'vs/editor/common/model';
 import * as modes from 'vs/editor/common/modes';
 import { IModelService } from 'vs/editor/common/services/modelService';
 import { ContextMenuController } from 'vs/editor/contrib/contextmenu/contextmenu';
 import { SnippetController2 } from 'vs/editor/contrib/snippet/snippetController2';
 import { SuggestController } from 'vs/editor/contrib/suggest/suggestController';
+import { IContextKey } from 'vs/platform/contextkey/common/contextkey';
 import { IInstantiationService } from 'vs/platform/instantiation/common/instantiation';
-import { inputBackground, inputBorder, inputForeground, inputPlaceholderForeground } from 'vs/platform/theme/common/colorRegistry';
+import { ColorIdentifier, inputBackground, inputBorder, inputForeground, inputPlaceholderForeground } from 'vs/platform/theme/common/colorRegistry';
+import { attachStyler, IStyleOverrides, IThemable } from 'vs/platform/theme/common/styler';
 import { IThemeService } from 'vs/platform/theme/common/themeService';
-import { Component } from 'vs/workbench/common/component';
 import { MenuPreventer } from 'vs/workbench/parts/codeEditor/browser/menuPreventer';
 import { getSimpleEditorOptions } from 'vs/workbench/parts/codeEditor/browser/simpleEditorOptions';
-import { Position } from 'vs/editor/common/core/position';
-import { Range } from 'vs/editor/common/core/range';
-import { ITextModel } from 'vs/editor/common/model';
-import { IContextKey } from 'vs/platform/contextkey/common/contextkey';
 
 interface SuggestResultsProvider {
 	/**
@@ -68,7 +70,29 @@ interface SuggestEnabledInputOptions {
 	focusContextKey?: IContextKey<boolean>;
 }
 
-export class SuggestEnabledInput extends Component {
+export interface ISuggestEnabledInputStyleOverrides extends IStyleOverrides {
+	inputBackground?: ColorIdentifier;
+	inputForeground?: ColorIdentifier;
+	inputBorder?: ColorIdentifier;
+	inputPlaceholderForeground?: ColorIdentifier;
+}
+
+type ISuggestEnabledInputStyles = {
+	[P in keyof ISuggestEnabledInputStyleOverrides]: Color;
+};
+
+
+export function attachSuggestEnabledInputBoxStyler(widget: IThemable, themeService: IThemeService, style?: ISuggestEnabledInputStyleOverrides): IDisposable {
+	return attachStyler(themeService, {
+		inputBackground: (style && style.inputBackground) || inputBackground,
+		inputForeground: (style && style.inputForeground) || inputForeground,
+		inputBorder: (style && style.inputBorder) || inputBorder,
+		inputPlaceholderForeground: (style && style.inputPlaceholderForeground) || inputPlaceholderForeground,
+	} as ISuggestEnabledInputStyleOverrides, widget);
+}
+
+
+export class SuggestEnabledInput extends Widget implements IThemable {
 
 	private _onShouldFocusResults = new Emitter<void>();
 	readonly onShouldFocusResults: Event<void> = this._onShouldFocusResults.event;
@@ -91,11 +115,10 @@ export class SuggestEnabledInput extends Component {
 		ariaLabel: string,
 		resourceHandle: string,
 		options: SuggestEnabledInputOptions,
-		@IThemeService themeService: IThemeService,
 		@IInstantiationService instantiationService: IInstantiationService,
 		@IModelService modelService: IModelService,
 	) {
-		super(id, themeService);
+		super();
 
 		this.stylingContainer = append(parent, $('.suggest-input-container'));
 		this.placeholderText = append(this.stylingContainer, $('.suggest-input-placeholder', null, options.placeholderText || ''));
@@ -178,21 +201,20 @@ export class SuggestEnabledInput extends Component {
 	}
 
 
-	public updateStyles(): void {
-		super.updateStyles();
-
-		this.stylingContainer.style.backgroundColor = this.getColor(inputBackground);
-		this.stylingContainer.style.color = this.getColor(inputForeground);
-		this.placeholderText.style.color = this.getColor(inputPlaceholderForeground);
+	public style(colors: ISuggestEnabledInputStyles): void {
+		this.stylingContainer.style.backgroundColor = colors.inputBackground && colors.inputBackground.toString();
+		this.stylingContainer.style.color = colors.inputForeground && colors.inputForeground.toString();
+		this.placeholderText.style.color = colors.inputPlaceholderForeground && colors.inputPlaceholderForeground.toString();
 
-		const inputBorderColor = this.getColor(inputBorder);
 		this.stylingContainer.style.borderWidth = '1px';
 		this.stylingContainer.style.borderStyle = 'solid';
-		this.stylingContainer.style.borderColor = inputBorderColor || 'transparent';
+		this.stylingContainer.style.borderColor = colors.inputBorder ?
+			colors.inputBorder.toString() :
+			'transparent';
 
-		let cursor = this.stylingContainer.getElementsByClassName('cursor')[0] as HTMLDivElement;
+		const cursor = this.stylingContainer.getElementsByClassName('cursor')[0] as HTMLDivElement;
 		if (cursor) {
-			cursor.style.backgroundColor = this.getColor(inputForeground);
+			cursor.style.backgroundColor = colors.inputForeground && colors.inputForeground.toString();
 		}
 	}
 

src/vs/workbench/parts/extensions/electron-browser/extensionsViewlet.ts

@@ -55,7 +55,7 @@ import { ExtensionsWorkbenchService } from 'vs/workbench/parts/extensions/node/e
 import { SyncDescriptor } from 'vs/platform/instantiation/common/descriptors';
 import { SingleServerExtensionManagementServerService } from 'vs/workbench/services/extensions/node/extensionManagementServerService';
 import { Query } from 'vs/workbench/parts/extensions/common/extensionQuery';
-import { SuggestEnabledInput } from 'vs/workbench/parts/codeEditor/browser/suggestEnabledInput';
+import { SuggestEnabledInput, attachSuggestEnabledInputBoxStyler } from 'vs/workbench/parts/codeEditor/browser/suggestEnabledInput';
 
 interface SearchInputEvent extends Event {
 	target: HTMLInputElement;
@@ -323,6 +323,8 @@ export class ExtensionsViewlet extends ViewContainerViewlet implements IExtensio
 			provideResults: (query) => Query.suggestions(query)
 		}, placeholder, 'extensions:searchinput', { placeholderText: placeholder });
 
+		this.disposables.push(attachSuggestEnabledInputBoxStyler(this.searchBox, this.themeService));
+
 		this.disposables.push(this.searchBox);
 
 		const _searchChange = new Emitter<string>();
@@ -338,11 +340,6 @@ export class ExtensionsViewlet extends ViewContainerViewlet implements IExtensio
 		return super.create(this.extensionsBox);
 	}
 
-	public updateStyles(): void {
-		super.updateStyles();
-		this.searchBox.updateStyles();
-	}
-
 	setVisible(visible: boolean): TPromise<void> {
 		const isVisibilityChanged = this.isVisible() !== visible;
 		return super.setVisible(visible).then(() => {

src/vs/workbench/parts/preferences/browser/settingsEditor2.ts

@@ -34,7 +34,7 @@ import { IThemeService } from 'vs/platform/theme/common/themeService';
 import { BaseEditor } from 'vs/workbench/browser/parts/editor/baseEditor';
 import { EditorOptions, IEditor } from 'vs/workbench/common/editor';
 import { ResourceEditorModel } from 'vs/workbench/common/editor/resourceEditorModel';
-import { SuggestEnabledInput } from 'vs/workbench/parts/codeEditor/browser/suggestEnabledInput';
+import { SuggestEnabledInput, attachSuggestEnabledInputBoxStyler } from 'vs/workbench/parts/codeEditor/browser/suggestEnabledInput';
 import { PreferencesEditor } from 'vs/workbench/parts/preferences/browser/preferencesEditor';
 import { SettingsTarget, SettingsTargetsWidget } from 'vs/workbench/parts/preferences/browser/preferencesWidgets';
 import { commonlyUsedData, tocData } from 'vs/workbench/parts/preferences/browser/settingsLayout';
@@ -46,6 +46,7 @@ import { IEditorGroup } from 'vs/workbench/services/group/common/editorGroupsSer
 import { IPreferencesService, ISearchResult, ISettingsEditorModel } from 'vs/workbench/services/preferences/common/preferences';
 import { SettingsEditor2Input } from 'vs/workbench/services/preferences/common/preferencesEditorInput';
 import { DefaultSettingsEditorModel } from 'vs/workbench/services/preferences/common/preferencesModels';
+import { settingsTextInputBorder } from 'vs/workbench/parts/preferences/browser/settingsWidgets';
 
 const $ = DOM.$;
 
@@ -242,6 +243,10 @@ export class SettingsEditor2 extends BaseEditor {
 				// TODO: Aria-live
 			}));
 
+		this._register(attachSuggestEnabledInputBoxStyler(this.searchWidget, this.themeService, {
+			inputBorder: settingsTextInputBorder
+		}));
+
 		this.countElement = DOM.append(searchContainer, DOM.$('.settings-count-widget'));
 		this._register(attachStylerCallback(this.themeService, { badgeBackground, contrastBorder, badgeForeground }, colors => {
 			const background = colors.badgeBackground ? colors.badgeBackground.toString() : null;
@@ -1021,11 +1026,6 @@ export class SettingsEditor2 extends BaseEditor {
 		this.settingsTreeRenderer.updateWidth(dimension.width);
 	}
 
-	public updateStyles(): void {
-		super.updateStyles();
-		this.searchWidget.updateStyles();
-	}
-
 	setVisible(visible: boolean, group?: IEditorGroup): TPromise<void> {
 		if (visible) {
 			this.searchWidget.focus();