From 5d42320dd5aaf5f1d296d2cb2dc3ab84fb240ae7 Mon Sep 17 00:00:00 2001 From: Martin Aeschlimann Date: Wed, 18 Jan 2023 21:32:14 +0100 Subject: [PATCH] replace attachStylerCallback --- .../browser/menuEntryActionViewItem.ts | 8 ++--- src/vs/platform/theme/common/styler.ts | 5 --- src/vs/workbench/browser/codeeditor.ts | 27 +++------------ .../browser/parts/views/viewFilter.ts | 21 +++--------- .../contrib/debug/browser/callStackView.ts | 34 ++++++------------- .../debug/browser/debugActionViewItems.ts | 15 +++----- .../contrib/debug/browser/debugHover.ts | 25 +++----------- .../contrib/feedback/browser/feedback.ts | 32 ++++++++--------- .../files/browser/views/openEditorsView.ts | 18 +++------- .../preferences/browser/keybindingWidgets.ts | 29 +++------------- .../preferences/browser/keybindingsEditor.ts | 19 ++++------- .../preferences/browser/preferencesWidgets.ts | 20 +++-------- .../preferences/browser/settingsEditor2.ts | 26 ++++---------- .../contrib/terminal/browser/terminalView.ts | 8 ++--- .../workspace/browser/workspaceTrustEditor.ts | 13 +++---- 15 files changed, 79 insertions(+), 221 deletions(-) diff --git a/src/vs/platform/actions/browser/menuEntryActionViewItem.ts b/src/vs/platform/actions/browser/menuEntryActionViewItem.ts index d546620a82ae4..db4be1c7a9c3b 100644 --- a/src/vs/platform/actions/browser/menuEntryActionViewItem.ts +++ b/src/vs/platform/actions/browser/menuEntryActionViewItem.ts @@ -28,8 +28,7 @@ import { ThemeIcon } from 'vs/base/common/themables'; import { isDark } from 'vs/platform/theme/common/theme'; import { IHoverDelegate } from 'vs/base/browser/ui/iconLabel/iconHoverDelegate'; import { assertType } from 'vs/base/common/types'; -import { attachStylerCallback } from 'vs/platform/theme/common/styler'; -import { selectBorder } from 'vs/platform/theme/common/colorRegistry'; +import { asCssValue, selectBorder } from 'vs/platform/theme/common/colorRegistry'; import { defaultSelectBoxStyles } from 'vs/platform/theme/browser/defaultStyles'; export function createAndFillInContextMenuActions(menu: IMenu, options: IMenuActionOptions | undefined, target: IAction[] | { primary: IAction[]; secondary: IAction[] }, primaryGroup?: string): void { @@ -469,7 +468,6 @@ class SubmenuEntrySelectActionViewItem extends SelectActionViewItem { constructor( action: SubmenuItemAction, - @IThemeService private readonly themeService: IThemeService, @IContextViewService contextViewService: IContextViewService ) { super(null, action, action.actions.map(a => ({ @@ -481,9 +479,7 @@ class SubmenuEntrySelectActionViewItem extends SelectActionViewItem { override render(container: HTMLElement): void { super.render(container); - this._register(attachStylerCallback(this.themeService, { selectBorder }, colors => { - container.style.borderColor = colors.selectBorder ? `${colors.selectBorder}` : ''; - })); + container.style.borderColor = asCssValue(selectBorder); } protected override runAction(option: string, index: number): void { diff --git a/src/vs/platform/theme/common/styler.ts b/src/vs/platform/theme/common/styler.ts index 834d5e45f2cd2..51d274297d423 100644 --- a/src/vs/platform/theme/common/styler.ts +++ b/src/vs/platform/theme/common/styler.ts @@ -49,8 +49,3 @@ export function attachStyler(themeService: IThemeServic return themeService.onDidColorThemeChange(applyStyles); } - -export function attachStylerCallback(themeService: IThemeService, colors: { [name: string]: ColorIdentifier }, callback: styleFn): IDisposable { - return attachStyler(themeService, colors, callback); -} - diff --git a/src/vs/workbench/browser/codeeditor.ts b/src/vs/workbench/browser/codeeditor.ts index 3a77af1f99529..90cc7faa46b0a 100644 --- a/src/vs/workbench/browser/codeeditor.ts +++ b/src/vs/workbench/browser/codeeditor.ts @@ -7,10 +7,8 @@ import { Widget } from 'vs/base/browser/ui/widget'; import { IOverlayWidget, ICodeEditor, IOverlayWidgetPosition, OverlayWidgetPositionPreference, isCodeEditor, isCompositeEditor } from 'vs/editor/browser/editorBrowser'; import { Emitter } from 'vs/base/common/event'; import { IKeybindingService } from 'vs/platform/keybinding/common/keybinding'; -import { IThemeService } from 'vs/platform/theme/common/themeService'; import { $, append, clearNode } from 'vs/base/browser/dom'; -import { attachStylerCallback } from 'vs/platform/theme/common/styler'; -import { buttonBackground, buttonForeground, editorBackground, editorForeground, contrastBorder } from 'vs/platform/theme/common/colorRegistry'; +import { buttonBackground, buttonForeground, editorBackground, editorForeground, contrastBorder, asCssValueWithDefault, asCssValue } from 'vs/platform/theme/common/colorRegistry'; import { IInstantiationService } from 'vs/platform/instantiation/common/instantiation'; import { Disposable, DisposableStore } from 'vs/base/common/lifecycle'; import { IEditorContribution } from 'vs/editor/common/editorCommon'; @@ -147,8 +145,7 @@ export class FloatingClickWidget extends Widget implements IOverlayWidget { private editor: ICodeEditor, private label: string, keyBindingAction: string | null, - @IKeybindingService keybindingService: IKeybindingService, - @IThemeService private readonly themeService: IThemeService + @IKeybindingService keybindingService: IKeybindingService ) { super(); @@ -181,23 +178,9 @@ export class FloatingClickWidget extends Widget implements IOverlayWidget { render() { clearNode(this._domNode); - - this._register(attachStylerCallback(this.themeService, { buttonBackground, buttonForeground, editorBackground, editorForeground, contrastBorder }, colors => { - const backgroundColor = colors.buttonBackground ? colors.buttonBackground : colors.editorBackground; - if (backgroundColor) { - this._domNode.style.backgroundColor = backgroundColor.toString(); - } - - const foregroundColor = colors.buttonForeground ? colors.buttonForeground : colors.editorForeground; - if (foregroundColor) { - this._domNode.style.color = foregroundColor.toString(); - } - - const borderColor = colors.contrastBorder ? colors.contrastBorder.toString() : ''; - this._domNode.style.borderWidth = borderColor ? '1px' : ''; - this._domNode.style.borderStyle = borderColor ? 'solid' : ''; - this._domNode.style.borderColor = borderColor; - })); + this._domNode.style.backgroundColor = asCssValueWithDefault(buttonBackground, asCssValue(editorBackground)); + this._domNode.style.color = asCssValueWithDefault(buttonForeground, asCssValue(editorForeground)); + this._domNode.style.border = `1px solid ${asCssValue(contrastBorder)}`; append(this._domNode, $('')).textContent = this.label; diff --git a/src/vs/workbench/browser/parts/views/viewFilter.ts b/src/vs/workbench/browser/parts/views/viewFilter.ts index 7b9825aa8f04b..fc3a1e2b43654 100644 --- a/src/vs/workbench/browser/parts/views/viewFilter.ts +++ b/src/vs/workbench/browser/parts/views/viewFilter.ts @@ -10,10 +10,9 @@ import { HistoryInputBox } from 'vs/base/browser/ui/inputbox/inputBox'; import { KeyCode } from 'vs/base/common/keyCodes'; import { StandardKeyboardEvent } from 'vs/base/browser/keyboardEvent'; import { IContextViewService } from 'vs/platform/contextview/browser/contextView'; -import { IThemeService, registerThemingParticipant, ICssStyleCollector, IColorTheme } from 'vs/platform/theme/common/themeService'; -import { attachStylerCallback } from 'vs/platform/theme/common/styler'; +import { registerThemingParticipant, ICssStyleCollector, IColorTheme } from 'vs/platform/theme/common/themeService'; import { toDisposable } from 'vs/base/common/lifecycle'; -import { badgeBackground, badgeForeground, contrastBorder, inputActiveOptionBorder, inputActiveOptionBackground, inputActiveOptionForeground } from 'vs/platform/theme/common/colorRegistry'; +import { badgeBackground, badgeForeground, contrastBorder, inputActiveOptionBorder, inputActiveOptionBackground, inputActiveOptionForeground, asCssValue } from 'vs/platform/theme/common/colorRegistry'; import { localize } from 'vs/nls'; import { IInstantiationService } from 'vs/platform/instantiation/common/instantiation'; import { ContextScopedHistoryInputBox } from 'vs/platform/history/browser/contextScopedHistoryWidget'; @@ -87,7 +86,6 @@ export class FilterWidget extends Widget { private readonly options: IFilterWidgetOptions, @IInstantiationService private readonly instantiationService: IInstantiationService, @IContextViewService private readonly contextViewService: IContextViewService, - @IThemeService private readonly themeService: IThemeService, @IContextKeyService contextKeyService: IContextKeyService, @IKeybindingService private readonly keybindingService: IKeybindingService ) { @@ -179,18 +177,9 @@ export class FilterWidget extends Widget { private createBadge(container: HTMLElement): HTMLElement { const filterBadge = DOM.append(container, DOM.$('.viewpane-filter-badge.hidden')); - this._register(attachStylerCallback(this.themeService, { badgeBackground, badgeForeground, contrastBorder }, colors => { - const background = colors.badgeBackground ? colors.badgeBackground.toString() : ''; - const foreground = colors.badgeForeground ? colors.badgeForeground.toString() : ''; - const border = colors.contrastBorder ? colors.contrastBorder.toString() : ''; - - filterBadge.style.backgroundColor = background; - - filterBadge.style.borderWidth = border ? '1px' : ''; - filterBadge.style.borderStyle = border ? 'solid' : ''; - filterBadge.style.borderColor = border; - filterBadge.style.color = foreground; - })); + filterBadge.style.backgroundColor = asCssValue(badgeBackground); + filterBadge.style.color = asCssValue(badgeForeground); + filterBadge.style.border = `1px solid ${asCssValue(contrastBorder)}`; return filterBadge; } diff --git a/src/vs/workbench/contrib/debug/browser/callStackView.ts b/src/vs/workbench/contrib/debug/browser/callStackView.ts index 391541edb68d3..6bf670fd952fd 100644 --- a/src/vs/workbench/contrib/debug/browser/callStackView.ts +++ b/src/vs/workbench/contrib/debug/browser/callStackView.ts @@ -35,8 +35,7 @@ import { WorkbenchCompressibleAsyncDataTree } from 'vs/platform/list/browser/lis import { INotificationService } from 'vs/platform/notification/common/notification'; import { IOpenerService } from 'vs/platform/opener/common/opener'; import { ITelemetryService } from 'vs/platform/telemetry/common/telemetry'; -import { textLinkForeground } from 'vs/platform/theme/common/colorRegistry'; -import { attachStylerCallback } from 'vs/platform/theme/common/styler'; +import { asCssValue, textLinkForeground } from 'vs/platform/theme/common/colorRegistry'; import { IThemeService } from 'vs/platform/theme/common/themeService'; import { ThemeIcon } from 'vs/base/common/themables'; import { ViewAction, ViewPane } from 'vs/workbench/browser/parts/views/viewPane'; @@ -231,8 +230,8 @@ export class CallStackView extends ViewPane { this.instantiationService.createInstance(ThreadsRenderer), this.instantiationService.createInstance(StackFramesRenderer), new ErrorsRenderer(), - new LoadMoreRenderer(this.themeService), - new ShowMoreRenderer(this.themeService) + new LoadMoreRenderer(), + new ShowMoreRenderer() ], this.dataSource, { accessibilityProvider: new CallStackAccessibilityProvider(), compressionEnabled: true, @@ -497,7 +496,6 @@ interface IErrorTemplateData { interface ILabelTemplateData { label: HTMLElement; - toDispose: IDisposable; } interface IStackFrameTemplateData { @@ -814,7 +812,7 @@ class LoadMoreRenderer implements ICompressibleTreeRenderer { - if (colors.textLinkForeground) { - label.style.color = colors.textLinkForeground.toString(); - } - }); - - return { label, toDispose }; + label.style.color = asCssValue(textLinkForeground); + return { label }; } renderElement(element: ITreeNode, index: number, data: ILabelTemplateData): void { @@ -840,14 +833,14 @@ class LoadMoreRenderer implements ICompressibleTreeRenderer { static readonly ID = 'showMore'; - constructor(private readonly themeService: IThemeService) { } + constructor() { } get templateId(): string { @@ -856,13 +849,8 @@ class ShowMoreRenderer implements ICompressibleTreeRenderer { - if (colors.textLinkForeground) { - label.style.color = colors.textLinkForeground.toString(); - } - }); - - return { label, toDispose }; + label.style.color = asCssValue(textLinkForeground); + return { label }; } renderElement(element: ITreeNode, index: number, data: ILabelTemplateData): void { @@ -879,7 +867,7 @@ class ShowMoreRenderer implements ICompressibleTreeRenderer { - this.container.style.border = colors.selectBorder ? `1px solid ${colors.selectBorder}` : ''; - selectBoxContainer.style.borderLeft = colors.selectBorder ? `1px solid ${colors.selectBorder}` : ''; - const selectBackgroundColor = colors.selectBackground ? `${colors.selectBackground}` : ''; - this.container.style.backgroundColor = selectBackgroundColor; - })); + this.container.style.border = `1px solid ${asCssValue(selectBorder)}`; + selectBoxContainer.style.borderLeft = `1px solid ${asCssValue(selectBorder)}`; + this.container.style.backgroundColor = asCssValue(selectBackground); + this.debugService.getConfigurationManager().getDynamicProviders().then(providers => { this.providers = providers; if (this.providers.length > 0) { diff --git a/src/vs/workbench/contrib/debug/browser/debugHover.ts b/src/vs/workbench/contrib/debug/browser/debugHover.ts index 16938152e570d..1501d4d4cfd3f 100644 --- a/src/vs/workbench/contrib/debug/browser/debugHover.ts +++ b/src/vs/workbench/contrib/debug/browser/debugHover.ts @@ -27,9 +27,7 @@ import * as nls from 'vs/nls'; import { IInstantiationService } from 'vs/platform/instantiation/common/instantiation'; import { WorkbenchAsyncDataTree } from 'vs/platform/list/browser/listService'; import { ILogService } from 'vs/platform/log/common/log'; -import { editorHoverBackground, editorHoverBorder, editorHoverForeground } from 'vs/platform/theme/common/colorRegistry'; -import { attachStylerCallback } from 'vs/platform/theme/common/styler'; -import { IThemeService } from 'vs/platform/theme/common/themeService'; +import { asCssValue, editorHoverBackground, editorHoverBorder, editorHoverForeground } from 'vs/platform/theme/common/colorRegistry'; import { renderExpressionValue } from 'vs/workbench/contrib/debug/browser/baseDebugView'; import { LinkDetector } from 'vs/workbench/contrib/debug/browser/linkDetector'; import { VariablesRenderer } from 'vs/workbench/contrib/debug/browser/variablesView'; @@ -92,7 +90,6 @@ export class DebugHoverWidget implements IContentWidget { private editor: ICodeEditor, @IDebugService private readonly debugService: IDebugService, @IInstantiationService private readonly instantiationService: IInstantiationService, - @IThemeService private readonly themeService: IThemeService ) { this.toDispose = []; @@ -132,24 +129,10 @@ export class DebugHoverWidget implements IContentWidget { this.toDispose.push(this.scrollbar); this.editor.applyFontInfo(this.domNode); + this.domNode.style.backgroundColor = asCssValue(editorHoverBackground); + this.domNode.style.border = `1px solid ${asCssValue(editorHoverBorder)}`; + this.domNode.style.color = asCssValue(editorHoverForeground); - this.toDispose.push(attachStylerCallback(this.themeService, { editorHoverBackground, editorHoverBorder, editorHoverForeground }, colors => { - if (colors.editorHoverBackground) { - this.domNode.style.backgroundColor = colors.editorHoverBackground.toString(); - } else { - this.domNode.style.backgroundColor = ''; - } - if (colors.editorHoverBorder) { - this.domNode.style.border = `1px solid ${colors.editorHoverBorder}`; - } else { - this.domNode.style.border = ''; - } - if (colors.editorHoverForeground) { - this.domNode.style.color = colors.editorHoverForeground.toString(); - } else { - this.domNode.style.color = ''; - } - })); this.toDispose.push(this.tree.onDidChangeContentHeight(() => this.layoutTreeAndContainer(false))); this.registerListeners(); diff --git a/src/vs/workbench/contrib/feedback/browser/feedback.ts b/src/vs/workbench/contrib/feedback/browser/feedback.ts index 6d08fef961004..546dc0a305e99 100644 --- a/src/vs/workbench/contrib/feedback/browser/feedback.ts +++ b/src/vs/workbench/contrib/feedback/browser/feedback.ts @@ -10,8 +10,7 @@ import { IContextViewService } from 'vs/platform/contextview/browser/contextView import { ICommandService } from 'vs/platform/commands/common/commands'; import { IIntegrityService } from 'vs/workbench/services/integrity/common/integrity'; import { IThemeService } from 'vs/platform/theme/common/themeService'; -import { attachStylerCallback } from 'vs/platform/theme/common/styler'; -import { editorWidgetBackground, editorWidgetForeground, widgetShadow, inputBorder, inputForeground, inputBackground, editorBackground, contrastBorder } from 'vs/platform/theme/common/colorRegistry'; +import { editorWidgetBackground, editorWidgetForeground, widgetShadow, inputBorder, inputForeground, inputBackground, editorBackground, asCssValue, asCssValueWithDefault, widgetBorder, contrastBorder } from 'vs/platform/theme/common/colorRegistry'; import { append, $, addDisposableListener, EventType, EventHelper, prepend } from 'vs/base/browser/dom'; import { IAnchor } from 'vs/base/browser/ui/contextview/contextview'; import { Button } from 'vs/base/browser/ui/button/button'; @@ -291,22 +290,21 @@ export class FeedbackWidget extends Disposable { this.sendButton.onDidClick(() => this.onSubmit()); - disposables.add(attachStylerCallback(this.themeService, { widgetShadow, editorWidgetBackground, editorWidgetForeground, inputBackground, inputForeground, inputBorder, editorBackground, contrastBorder }, colors => { - if (this.feedbackForm) { - this.feedbackForm.style.backgroundColor = colors.editorWidgetBackground ? colors.editorWidgetBackground.toString() : ''; - this.feedbackForm.style.color = colors.editorWidgetForeground ? colors.editorWidgetForeground.toString() : ''; - this.feedbackForm.style.boxShadow = colors.widgetShadow ? `0 0 8px 2px ${colors.widgetShadow}` : ''; - this.feedbackForm.style.border = colors.widgetBorder ? `1px solid ${colors.widgetBorder}` : ''; - } - if (this.feedbackDescriptionInput) { - this.feedbackDescriptionInput.style.backgroundColor = colors.inputBackground ? colors.inputBackground.toString() : ''; - this.feedbackDescriptionInput.style.color = colors.inputForeground ? colors.inputForeground.toString() : ''; - this.feedbackDescriptionInput.style.border = `1px solid ${colors.inputBorder || 'transparent'}`; - } + if (this.feedbackForm) { + this.feedbackForm.style.backgroundColor = asCssValue(editorWidgetBackground); + this.feedbackForm.style.color = asCssValue(editorWidgetForeground); + this.feedbackForm.style.boxShadow = `0 0 8px 2px ${asCssValue(widgetShadow)}`; + this.feedbackForm.style.border = `1px solid ${asCssValue(widgetBorder)}`; + } + if (this.feedbackDescriptionInput) { + this.feedbackDescriptionInput.style.backgroundColor = asCssValue(inputBackground); + this.feedbackDescriptionInput.style.color = asCssValue(inputForeground); + this.feedbackDescriptionInput.style.border = `1px solid ${asCssValueWithDefault(inputBorder, 'transparent')}`; + } + + contactUsContainer.style.backgroundColor = asCssValue(editorBackground); + contactUsContainer.style.border = `1px solid ${asCssValueWithDefault(contrastBorder, 'transparent')}`; - contactUsContainer.style.backgroundColor = colors.editorBackground ? colors.editorBackground.toString() : ''; - contactUsContainer.style.border = `1px solid ${colors.contrastBorder || 'transparent'}`; - })); return { dispose: () => { diff --git a/src/vs/workbench/contrib/files/browser/views/openEditorsView.ts b/src/vs/workbench/contrib/files/browser/views/openEditorsView.ts index 07b3354a4e786..21d2612872204 100644 --- a/src/vs/workbench/contrib/files/browser/views/openEditorsView.ts +++ b/src/vs/workbench/contrib/files/browser/views/openEditorsView.ts @@ -19,9 +19,8 @@ import { SaveAllInGroupAction, CloseGroupAction } from 'vs/workbench/contrib/fil import { OpenEditorsFocusedContext, ExplorerFocusedContext, IFilesConfiguration, OpenEditor } from 'vs/workbench/contrib/files/common/files'; import { CloseAllEditorsAction, CloseEditorAction, UnpinEditorAction } from 'vs/workbench/browser/parts/editor/editorActions'; import { IContextKeyService, IContextKey, ContextKeyExpr } from 'vs/platform/contextkey/common/contextkey'; -import { attachStylerCallback } from 'vs/platform/theme/common/styler'; import { IThemeService } from 'vs/platform/theme/common/themeService'; -import { badgeBackground, badgeForeground, contrastBorder } from 'vs/platform/theme/common/colorRegistry'; +import { asCssValue, badgeBackground, badgeForeground, contrastBorder } from 'vs/platform/theme/common/colorRegistry'; import { WorkbenchList } from 'vs/platform/list/browser/listService'; import { IListVirtualDelegate, IListRenderer, IListContextMenuEvent, IListDragAndDrop, IListDragOverReaction } from 'vs/base/browser/ui/list/list'; import { ResourceLabels, IResourceLabel } from 'vs/workbench/browser/labels'; @@ -199,18 +198,9 @@ export class OpenEditorsView extends ViewPane { const count = dom.append(container, $('.count')); this.dirtyCountElement = dom.append(count, $('.dirty-count.monaco-count-badge.long')); - this._register((attachStylerCallback(this.themeService, { badgeBackground, badgeForeground, contrastBorder }, colors => { - const background = colors.badgeBackground ? colors.badgeBackground.toString() : ''; - const foreground = colors.badgeForeground ? colors.badgeForeground.toString() : ''; - const border = colors.contrastBorder ? colors.contrastBorder.toString() : ''; - - this.dirtyCountElement.style.backgroundColor = background; - this.dirtyCountElement.style.color = foreground; - - this.dirtyCountElement.style.borderWidth = border ? '1px' : ''; - this.dirtyCountElement.style.borderStyle = border ? 'solid' : ''; - this.dirtyCountElement.style.borderColor = border; - }))); + this.dirtyCountElement.style.backgroundColor = asCssValue(badgeBackground); + this.dirtyCountElement.style.color = asCssValue(badgeForeground); + this.dirtyCountElement.style.border = `1px solid ${asCssValue(contrastBorder)}`; this.updateDirtyIndicator(); } diff --git a/src/vs/workbench/contrib/preferences/browser/keybindingWidgets.ts b/src/vs/workbench/contrib/preferences/browser/keybindingWidgets.ts index 1247043a43290..46ef3f5e4564f 100644 --- a/src/vs/workbench/contrib/preferences/browser/keybindingWidgets.ts +++ b/src/vs/workbench/contrib/preferences/browser/keybindingWidgets.ts @@ -20,9 +20,7 @@ import { IKeybindingService } from 'vs/platform/keybinding/common/keybinding'; import { IContextViewService } from 'vs/platform/contextview/browser/contextView'; import { IInstantiationService } from 'vs/platform/instantiation/common/instantiation'; import { ICodeEditor, IOverlayWidget, IOverlayWidgetPosition } from 'vs/editor/browser/editorBrowser'; -import { attachStylerCallback } from 'vs/platform/theme/common/styler'; -import { IThemeService } from 'vs/platform/theme/common/themeService'; -import { editorWidgetBackground, editorWidgetForeground, widgetShadow } from 'vs/platform/theme/common/colorRegistry'; +import { asCssValue, editorWidgetBackground, editorWidgetForeground, widgetShadow } from 'vs/platform/theme/common/colorRegistry'; import { ScrollType } from 'vs/editor/common/editorCommon'; import { SearchWidget, SearchOptions } from 'vs/workbench/contrib/preferences/browser/preferencesWidgets'; import { withNullAsUndefined } from 'vs/base/common/types'; @@ -58,11 +56,10 @@ export class KeybindingsSearchWidget extends SearchWidget { constructor(parent: HTMLElement, options: KeybindingsSearchOptions, @IContextViewService contextViewService: IContextViewService, @IInstantiationService instantiationService: IInstantiationService, - @IThemeService themeService: IThemeService, @IContextKeyService contextKeyService: IContextKeyService, @IKeybindingService keybindingService: IKeybindingService, ) { - super(parent, options, contextViewService, instantiationService, themeService, contextKeyService, keybindingService); + super(parent, options, contextViewService, instantiationService, contextKeyService, keybindingService); this._register(toDisposable(() => this.stopRecordingKeys())); this._firstChord = null; this._secondChord = null; @@ -171,7 +168,6 @@ export class DefineKeybindingWidget extends Widget { constructor( parent: HTMLElement | null, @IInstantiationService private readonly instantiationService: IInstantiationService, - @IThemeService private readonly themeService: IThemeService ) { super(); @@ -184,24 +180,9 @@ export class DefineKeybindingWidget extends Widget { const message = nls.localize('defineKeybinding.initial', "Press desired key combination and then press ENTER."); dom.append(this._domNode.domNode, dom.$('.message', undefined, message)); - this._register(attachStylerCallback(this.themeService, { editorWidgetBackground, editorWidgetForeground, widgetShadow }, colors => { - if (colors.editorWidgetBackground) { - this._domNode.domNode.style.backgroundColor = colors.editorWidgetBackground.toString(); - } else { - this._domNode.domNode.style.backgroundColor = ''; - } - if (colors.editorWidgetForeground) { - this._domNode.domNode.style.color = colors.editorWidgetForeground.toString(); - } else { - this._domNode.domNode.style.color = ''; - } - - if (colors.widgetShadow) { - this._domNode.domNode.style.boxShadow = `0 2px 8px ${colors.widgetShadow}`; - } else { - this._domNode.domNode.style.boxShadow = ''; - } - })); + this._domNode.domNode.style.backgroundColor = asCssValue(editorWidgetBackground); + this._domNode.domNode.style.color = asCssValue(editorWidgetForeground); + this._domNode.domNode.style.boxShadow = `0 2px 8px ${asCssValue(widgetShadow)}`; this._keybindingInputWidget = this._register(this.instantiationService.createInstance(KeybindingsSearchWidget, this._domNode.domNode, { ariaLabel: message, history: [], inputBoxStyles: defaultInputBoxStyles })); this._keybindingInputWidget.startRecordingKeys(); diff --git a/src/vs/workbench/contrib/preferences/browser/keybindingsEditor.ts b/src/vs/workbench/contrib/preferences/browser/keybindingsEditor.ts index f38150fc278a9..ed2a889af1fce 100644 --- a/src/vs/workbench/contrib/preferences/browser/keybindingsEditor.ts +++ b/src/vs/workbench/contrib/preferences/browser/keybindingsEditor.ts @@ -30,13 +30,12 @@ import { IThemeService, registerThemingParticipant, IColorTheme, ICssStyleCollec import { ThemeIcon } from 'vs/base/common/themables'; import { IContextKeyService, IContextKey, RawContextKey } from 'vs/platform/contextkey/common/contextkey'; import { KeyCode } from 'vs/base/common/keyCodes'; -import { badgeBackground, contrastBorder, badgeForeground, listActiveSelectionForeground, listInactiveSelectionForeground, listHoverForeground, listFocusForeground, editorBackground, foreground, listActiveSelectionBackground, listInactiveSelectionBackground, listFocusBackground, listHoverBackground, registerColor, tableOddRowsBackgroundColor } from 'vs/platform/theme/common/colorRegistry'; +import { badgeBackground, contrastBorder, badgeForeground, listActiveSelectionForeground, listInactiveSelectionForeground, listHoverForeground, listFocusForeground, editorBackground, foreground, listActiveSelectionBackground, listInactiveSelectionBackground, listFocusBackground, listHoverBackground, registerColor, tableOddRowsBackgroundColor, asCssValue } from 'vs/platform/theme/common/colorRegistry'; import { IEditorService } from 'vs/workbench/services/editor/common/editorService'; import { EditorExtensionsRegistry } from 'vs/editor/browser/editorExtensions'; import { WorkbenchTable } from 'vs/platform/list/browser/listService'; import { INotificationService } from 'vs/platform/notification/common/notification'; import { CancellationToken } from 'vs/base/common/cancellation'; -import { attachStylerCallback } from 'vs/platform/theme/common/styler'; import { IStorageService, StorageScope, StorageTarget } from 'vs/platform/storage/common/storage'; import { Emitter, Event } from 'vs/base/common/event'; import { MenuRegistry, MenuId, isIMenuItem } from 'vs/platform/actions/common/actions'; @@ -398,17 +397,11 @@ export class KeybindingsEditor extends EditorPane implements IKeybindingsEditorP private createRecordingBadge(container: HTMLElement): HTMLElement { const recordingBadge = DOM.append(container, DOM.$('.recording-badge.monaco-count-badge.long.disabled')); recordingBadge.textContent = localize('recording', "Recording Keys"); - this._register(attachStylerCallback(this.themeService, { badgeBackground, contrastBorder, badgeForeground }, colors => { - const background = colors.badgeBackground ? colors.badgeBackground.toString() : ''; - const border = colors.contrastBorder ? colors.contrastBorder.toString() : ''; - const color = colors.badgeForeground ? colors.badgeForeground.toString() : ''; - - recordingBadge.style.backgroundColor = background; - recordingBadge.style.borderWidth = border ? '1px' : ''; - recordingBadge.style.borderStyle = border ? 'solid' : ''; - recordingBadge.style.borderColor = border; - recordingBadge.style.color = color ? color.toString() : ''; - })); + + recordingBadge.style.backgroundColor = asCssValue(badgeBackground); + recordingBadge.style.color = asCssValue(badgeForeground); + recordingBadge.style.border = `1px solid ${asCssValue(contrastBorder)}`; + return recordingBadge; } diff --git a/src/vs/workbench/contrib/preferences/browser/preferencesWidgets.ts b/src/vs/workbench/contrib/preferences/browser/preferencesWidgets.ts index 3a2a8dc203047..9c225b41b118a 100644 --- a/src/vs/workbench/contrib/preferences/browser/preferencesWidgets.ts +++ b/src/vs/workbench/contrib/preferences/browser/preferencesWidgets.ts @@ -28,9 +28,7 @@ import { IContextMenuService, IContextViewService } from 'vs/platform/contextvie import { IInstantiationService } from 'vs/platform/instantiation/common/instantiation'; import { IKeybindingService } from 'vs/platform/keybinding/common/keybinding'; import { ILabelService } from 'vs/platform/label/common/label'; -import { badgeBackground, badgeForeground, contrastBorder } from 'vs/platform/theme/common/colorRegistry'; -import { attachStylerCallback } from 'vs/platform/theme/common/styler'; -import { IThemeService } from 'vs/platform/theme/common/themeService'; +import { asCssValue, badgeBackground, badgeForeground, contrastBorder } from 'vs/platform/theme/common/colorRegistry'; import { ThemeIcon } from 'vs/base/common/themables'; import { isWorkspaceFolder, IWorkspaceContextService, IWorkspaceFolder, WorkbenchState } from 'vs/platform/workspace/common/workspace'; import { settingsEditIcon, settingsScopeDropDownIcon } from 'vs/workbench/contrib/preferences/browser/preferencesIcons'; @@ -399,7 +397,6 @@ export class SearchWidget extends Widget { constructor(parent: HTMLElement, protected options: SearchOptions, @IContextViewService private readonly contextViewService: IContextViewService, @IInstantiationService protected instantiationService: IInstantiationService, - @IThemeService private readonly themeService: IThemeService, @IContextKeyService private readonly contextKeyService: IContextKeyService, @IKeybindingService protected readonly keybindingService: IKeybindingService ) { @@ -414,19 +411,10 @@ export class SearchWidget extends Widget { if (this.options.showResultCount) { this.countElement = DOM.append(this.controlsDiv, DOM.$('.settings-count-widget')); - this._register(attachStylerCallback(this.themeService, { badgeBackground, contrastBorder }, colors => { - const background = colors.badgeBackground ? colors.badgeBackground.toString() : ''; - const border = colors.contrastBorder ? colors.contrastBorder.toString() : ''; - this.countElement.style.backgroundColor = background; - - this.countElement.style.borderWidth = border ? '1px' : ''; - this.countElement.style.borderStyle = border ? 'solid' : ''; - this.countElement.style.borderColor = border; - - const color = this.themeService.getColorTheme().getColor(badgeForeground); - this.countElement.style.color = color ? color.toString() : ''; - })); + this.countElement.style.backgroundColor = asCssValue(badgeBackground); + this.countElement.style.color = asCssValue(badgeForeground); + this.countElement.style.border = `1px solid ${asCssValue(contrastBorder)}`; } this.inputBox.inputElement.setAttribute('aria-live', this.options.ariaLive || 'off'); diff --git a/src/vs/workbench/contrib/preferences/browser/settingsEditor2.ts b/src/vs/workbench/contrib/preferences/browser/settingsEditor2.ts index 3b0883ea7960e..b4afb92dd00e7 100644 --- a/src/vs/workbench/contrib/preferences/browser/settingsEditor2.ts +++ b/src/vs/workbench/contrib/preferences/browser/settingsEditor2.ts @@ -31,8 +31,7 @@ import { IInstantiationService } from 'vs/platform/instantiation/common/instanti import { ILogService } from 'vs/platform/log/common/log'; import { IStorageService, StorageScope, StorageTarget } from 'vs/platform/storage/common/storage'; import { ITelemetryService } from 'vs/platform/telemetry/common/telemetry'; -import { badgeBackground, badgeForeground, contrastBorder, editorForeground } from 'vs/platform/theme/common/colorRegistry'; -import { attachStylerCallback } from 'vs/platform/theme/common/styler'; +import { asCssValue, badgeBackground, badgeForeground, contrastBorder, editorForeground } from 'vs/platform/theme/common/colorRegistry'; import { IThemeService } from 'vs/platform/theme/common/themeService'; import { ThemeIcon } from 'vs/base/common/themables'; import { IUserDataSyncEnablementService, IUserDataSyncService, SyncStatus } from 'vs/platform/userDataSync/common/userDataSync'; @@ -584,18 +583,10 @@ export class SettingsEditor2 extends EditorPane { })); this.countElement = DOM.append(searchContainer, DOM.$('.settings-count-widget.monaco-count-badge.long')); - this._register(attachStylerCallback(this.themeService, { badgeBackground, contrastBorder, badgeForeground }, colors => { - const background = colors.badgeBackground ? colors.badgeBackground.toString() : ''; - const border = colors.contrastBorder ? colors.contrastBorder.toString() : ''; - const foreground = colors.badgeForeground ? colors.badgeForeground.toString() : ''; - this.countElement.style.backgroundColor = background; - this.countElement.style.color = foreground; - - this.countElement.style.borderWidth = border ? '1px' : ''; - this.countElement.style.borderStyle = border ? 'solid' : ''; - this.countElement.style.borderColor = border; - })); + this.countElement.style.backgroundColor = asCssValue(badgeBackground); + this.countElement.style.color = asCssValue(badgeForeground); + this.countElement.style.border = `1px solid ${asCssValue(contrastBorder)}`; this._register(this.searchWidget.onInputDidChange(() => { const searchVal = this.searchWidget.getValue(); @@ -604,10 +595,7 @@ export class SettingsEditor2 extends EditorPane { })); const headerControlsContainer = DOM.append(this.headerContainer, $('.settings-header-controls')); - this._register(attachStylerCallback(this.themeService, { settingsHeaderBorder }, colors => { - const border = colors.settingsHeaderBorder ? colors.settingsHeaderBorder.toString() : ''; - headerControlsContainer.style.borderColor = border; - })); + headerControlsContainer.style.borderColor = asCssValue(settingsHeaderBorder); const targetWidgetContainer = DOM.append(headerControlsContainer, $('.settings-target-container')); this.settingsTargetsWidget = this._register(this.instantiationService.createInstance(SettingsTargetsWidget, targetWidgetContainer, { enableRemoteSettings: true })); @@ -765,9 +753,7 @@ export class SettingsEditor2 extends EditorPane { DOM.append(this.noResultsMessage, this.clearFilterLinkContainer); - this._register(attachStylerCallback(this.themeService, { editorForeground }, colors => { - this.noResultsMessage.style.color = colors.editorForeground ? colors.editorForeground.toString() : ''; - })); + this.noResultsMessage.style.color = asCssValue(editorForeground); this.tocTreeContainer = $('.settings-toc-container'); this.settingsTreeContainer = $('.settings-tree-container'); diff --git a/src/vs/workbench/contrib/terminal/browser/terminalView.ts b/src/vs/workbench/contrib/terminal/browser/terminalView.ts index fedcbed6cffa0..b42a837dc0849 100644 --- a/src/vs/workbench/contrib/terminal/browser/terminalView.ts +++ b/src/vs/workbench/contrib/terminal/browser/terminalView.ts @@ -24,8 +24,7 @@ import { IMenu, IMenuService, MenuId, MenuItemAction } from 'vs/platform/actions import { ITerminalProfileResolverService, ITerminalProfileService, TerminalCommandId } from 'vs/workbench/contrib/terminal/common/terminal'; import { TerminalSettingId, ITerminalProfile, TerminalLocation } from 'vs/platform/terminal/common/terminal'; import { ActionViewItem, SelectActionViewItem } from 'vs/base/browser/ui/actionbar/actionViewItems'; -import { attachStylerCallback } from 'vs/platform/theme/common/styler'; -import { selectBorder } from 'vs/platform/theme/common/colorRegistry'; +import { asCssValue, selectBorder } from 'vs/platform/theme/common/colorRegistry'; import { ISelectOptionItem } from 'vs/base/browser/ui/selectBox/selectBox'; import { IActionViewItem } from 'vs/base/browser/ui/actionbar/actionbar'; import { TerminalTabbedView } from 'vs/workbench/contrib/terminal/browser/terminalTabbedView'; @@ -293,7 +292,6 @@ class SwitchTerminalActionViewItem extends SelectActionViewItem { action: IAction, @ITerminalService private readonly _terminalService: ITerminalService, @ITerminalGroupService private readonly _terminalGroupService: ITerminalGroupService, - @IThemeService private readonly _themeService: IThemeService, @IContextViewService contextViewService: IContextViewService, @ITerminalProfileService terminalProfileService: ITerminalProfileService ) { @@ -311,9 +309,7 @@ class SwitchTerminalActionViewItem extends SelectActionViewItem { override render(container: HTMLElement): void { super.render(container); container.classList.add('switch-terminal'); - this._register(attachStylerCallback(this._themeService, { selectBorder }, colors => { - container.style.borderColor = colors.selectBorder ? `${colors.selectBorder}` : ''; - })); + container.style.borderColor = asCssValue(selectBorder); } private _updateItems(): void { diff --git a/src/vs/workbench/contrib/workspace/browser/workspaceTrustEditor.ts b/src/vs/workbench/contrib/workspace/browser/workspaceTrustEditor.ts index 99f083df8ae18..99ac8e3d41dd0 100644 --- a/src/vs/workbench/contrib/workspace/browser/workspaceTrustEditor.ts +++ b/src/vs/workbench/contrib/workspace/browser/workspaceTrustEditor.ts @@ -33,9 +33,8 @@ import { Registry } from 'vs/platform/registry/common/platform'; import { isVirtualResource, isVirtualWorkspace } from 'vs/platform/workspace/common/virtualWorkspace'; import { IStorageService } from 'vs/platform/storage/common/storage'; import { ITelemetryService } from 'vs/platform/telemetry/common/telemetry'; -import { buttonBackground, buttonSecondaryBackground, editorErrorForeground } from 'vs/platform/theme/common/colorRegistry'; +import { asCssValue, buttonBackground, buttonSecondaryBackground, editorErrorForeground } from 'vs/platform/theme/common/colorRegistry'; import { ISingleFolderWorkspaceIdentifier, IWorkspaceContextService, toWorkspaceIdentifier, WorkbenchState } from 'vs/platform/workspace/common/workspace'; -import { attachStylerCallback } from 'vs/platform/theme/common/styler'; import { IThemeService } from 'vs/platform/theme/common/themeService'; import { ThemeIcon } from 'vs/base/common/themables'; import { IWorkspaceTrustManagementService } from 'vs/platform/workspace/common/workspaceTrust'; @@ -705,12 +704,10 @@ export class WorkspaceTrustEditor extends EditorPane { this.createAffectedFeaturesElement(scrollableContent); this.createConfigurationElement(scrollableContent); - this._register(attachStylerCallback(this.themeService, { debugIconStartForeground, editorErrorForeground, buttonBackground, buttonSecondaryBackground }, colors => { - this.rootElement.style.setProperty('--workspace-trust-selected-color', colors.buttonBackground?.toString() || ''); - this.rootElement.style.setProperty('--workspace-trust-unselected-color', colors.buttonSecondaryBackground?.toString() || ''); - this.rootElement.style.setProperty('--workspace-trust-check-color', colors.debugIconStartForeground?.toString() || ''); - this.rootElement.style.setProperty('--workspace-trust-x-color', colors.editorErrorForeground?.toString() || ''); - })); + this.rootElement.style.setProperty('--workspace-trust-selected-color', asCssValue(buttonBackground)); + this.rootElement.style.setProperty('--workspace-trust-unselected-color', asCssValue(buttonSecondaryBackground)); + this.rootElement.style.setProperty('--workspace-trust-check-color', asCssValue(debugIconStartForeground)); + this.rootElement.style.setProperty('--workspace-trust-x-color', asCssValue(editorErrorForeground)); // Navigate page with keyboard this._register(addDisposableListener(this.rootElement, EventType.KEY_DOWN, e => {