diff --git a/src/vs/base/browser/dom.ts b/src/vs/base/browser/dom.ts index b3116538cbc..d30acf1fff9 100644 --- a/src/vs/base/browser/dom.ts +++ b/src/vs/base/browser/dom.ts @@ -1289,7 +1289,7 @@ RemoteAuthorities.setPreferredWebSchema(/^https:/.test(window.location.href) ? ' /** * returns url('...') */ -export function asCSSUrl(uri: URI): string { +export function asCSSUrl(uri: URI | null | undefined): string { if (!uri) { return `url('')`; } diff --git a/src/vs/platform/actions/browser/dropdownWithPrimaryActionViewItem.ts b/src/vs/platform/actions/browser/dropdownWithPrimaryActionViewItem.ts index dd29590f5f0..64030e42b01 100644 --- a/src/vs/platform/actions/browser/dropdownWithPrimaryActionViewItem.ts +++ b/src/vs/platform/actions/browser/dropdownWithPrimaryActionViewItem.ts @@ -17,6 +17,7 @@ import { MenuItemAction } from 'vs/platform/actions/common/actions'; import { IContextKeyService } from 'vs/platform/contextkey/common/contextkey'; import { IKeybindingService } from 'vs/platform/keybinding/common/keybinding'; import { INotificationService } from 'vs/platform/notification/common/notification'; +import { IThemeService } from 'vs/platform/theme/common/themeService'; export interface IDropdownWithPrimaryActionViewItemOptions { getKeyBinding?: (action: IAction) => ResolvedKeybinding | undefined; @@ -41,10 +42,11 @@ export class DropdownWithPrimaryActionViewItem extends BaseActionViewItem { private readonly _options: IDropdownWithPrimaryActionViewItemOptions | undefined, @IKeybindingService _keybindingService: IKeybindingService, @INotificationService _notificationService: INotificationService, - @IContextKeyService _contextKeyService: IContextKeyService + @IContextKeyService _contextKeyService: IContextKeyService, + @IThemeService _themeService: IThemeService ) { super(null, primaryAction); - this._primaryAction = new MenuEntryActionViewItem(primaryAction, undefined, _keybindingService, _notificationService, _contextKeyService); + this._primaryAction = new MenuEntryActionViewItem(primaryAction, undefined, _keybindingService, _notificationService, _contextKeyService, _themeService); this._dropdown = new DropdownMenuActionViewItem(dropdownAction, dropdownMenuActions, this._contextMenuProvider, { menuAsChild: true, classNames: ['codicon', 'codicon-chevron-down'], diff --git a/src/vs/platform/actions/browser/menuEntryActionViewItem.css b/src/vs/platform/actions/browser/menuEntryActionViewItem.css index b5b63dabb46..9c2a949754d 100644 --- a/src/vs/platform/actions/browser/menuEntryActionViewItem.css +++ b/src/vs/platform/actions/browser/menuEntryActionViewItem.css @@ -11,16 +11,6 @@ background-size: 16px; } -.monaco-action-bar .action-item.menu-entry .action-label, -.hc-light .monaco-action-bar .action-item.menu-entry .action-label { - background-image: var(--menu-entry-icon-light); -} - -.vs-dark .monaco-action-bar .action-item.menu-entry .action-label, -.hc-black .monaco-action-bar .action-item.menu-entry .action-label { - background-image: var(--menu-entry-icon-dark); -} - .monaco-dropdown-with-default { display: flex !important; diff --git a/src/vs/platform/actions/browser/menuEntryActionViewItem.ts b/src/vs/platform/actions/browser/menuEntryActionViewItem.ts index 29290a17a10..46dd4cfb386 100644 --- a/src/vs/platform/actions/browser/menuEntryActionViewItem.ts +++ b/src/vs/platform/actions/browser/menuEntryActionViewItem.ts @@ -11,7 +11,7 @@ import { ActionRunner, IAction, IRunEvent, Separator, SubmenuAction } from 'vs/b import { Event } from 'vs/base/common/event'; import { UILabelProvider } from 'vs/base/common/keybindingLabels'; import { KeyCode } from 'vs/base/common/keyCodes'; -import { DisposableStore, IDisposable, MutableDisposable, toDisposable } from 'vs/base/common/lifecycle'; +import { combinedDisposable, DisposableStore, IDisposable, MutableDisposable, toDisposable } from 'vs/base/common/lifecycle'; import { isLinux, isWindows, OS } from 'vs/base/common/platform'; import 'vs/css!./menuEntryActionViewItem'; import { localize } from 'vs/nls'; @@ -23,7 +23,8 @@ import { IInstantiationService } from 'vs/platform/instantiation/common/instanti import { IKeybindingService } from 'vs/platform/keybinding/common/keybinding'; import { INotificationService } from 'vs/platform/notification/common/notification'; import { IStorageService, StorageScope, StorageTarget } from 'vs/platform/storage/common/storage'; -import { ThemeIcon } from 'vs/platform/theme/common/themeService'; +import { IThemeService, ThemeIcon } from 'vs/platform/theme/common/themeService'; +import { isDark } from 'vs/platform/theme/common/theme'; export function createAndFillInContextMenuActions(menu: IMenu, options: IMenuActionOptions | undefined, target: IAction[] | { primary: IAction[]; secondary: IAction[] }, primaryGroup?: string): IDisposable { const groups = menu.getActions(options); @@ -137,7 +138,8 @@ export class MenuEntryActionViewItem extends ActionViewItem { options: IMenuEntryActionViewItemOptions | undefined, @IKeybindingService protected readonly _keybindingService: IKeybindingService, @INotificationService protected _notificationService: INotificationService, - @IContextKeyService protected _contextKeyService: IContextKeyService + @IContextKeyService protected _contextKeyService: IContextKeyService, + @IThemeService protected _themeService: IThemeService ) { super(undefined, _action, { icon: !!(_action.class || _action.item.icon), label: !_action.class && !_action.item.icon, draggable: options?.draggable, keybinding: options?.keybinding }); this._altKey = ModifierKeyEmitter.getInstance(); @@ -235,7 +237,7 @@ export class MenuEntryActionViewItem extends ActionViewItem { if (this._menuItemAction.alt) { this._updateItemClass(this._menuItemAction.alt.item); } - } else if (this._menuItemAction.alt) { + } else { this._updateItemClass(this._menuItemAction.item); } } @@ -265,18 +267,22 @@ export class MenuEntryActionViewItem extends ActionViewItem { } else { // icon path/url - if (icon.light) { - label.style.setProperty('--menu-entry-icon-light', asCSSUrl(icon.light)); - } - if (icon.dark) { - label.style.setProperty('--menu-entry-icon-dark', asCSSUrl(icon.dark)); - } + label.style.backgroundImage = ( + isDark(this._themeService.getColorTheme().type) + ? asCSSUrl(icon.dark) + : asCSSUrl(icon.light) + ); label.classList.add('icon'); - this._itemClassDispose.value = toDisposable(() => { - label.classList.remove('icon'); - label.style.removeProperty('--menu-entry-icon-light'); - label.style.removeProperty('--menu-entry-icon-dark'); - }); + this._itemClassDispose.value = combinedDisposable( + toDisposable(() => { + label.style.backgroundImage = ''; + label.classList.remove('icon'); + }), + this._themeService.onDidColorThemeChange(() => { + // refresh when the theme changes in case we go between dark <-> light + this.updateClass(); + }) + ); } } } diff --git a/src/vs/workbench/contrib/notebook/browser/diff/diffComponents.ts b/src/vs/workbench/contrib/notebook/browser/diff/diffComponents.ts index 89c87eb81e7..c7d1f0d6594 100644 --- a/src/vs/workbench/contrib/notebook/browser/diff/diffComponents.ts +++ b/src/vs/workbench/contrib/notebook/browser/diff/diffComponents.ts @@ -39,6 +39,7 @@ import * as editorCommon from 'vs/editor/common/editorCommon'; import { ITextModelService } from 'vs/editor/common/services/resolverService'; import { IConfigurationService } from 'vs/platform/configuration/common/configuration'; import { IDiffEditorConstructionOptions } from 'vs/editor/browser/editorBrowser'; +import { IThemeService } from 'vs/platform/theme/common/themeService'; const fixedEditorPadding = { top: 12, @@ -122,7 +123,8 @@ class PropertyHeader extends Disposable { @IKeybindingService readonly keybindingService: IKeybindingService, @INotificationService readonly notificationService: INotificationService, @IMenuService readonly menuService: IMenuService, - @IContextKeyService readonly contextKeyService: IContextKeyService + @IContextKeyService readonly contextKeyService: IContextKeyService, + @IThemeService readonly themeService: IThemeService, ) { super(); } @@ -154,7 +156,7 @@ class PropertyHeader extends Disposable { this._toolbar = new ToolBar(cellToolbarContainer, this.contextMenuService, { actionViewItemProvider: action => { if (action instanceof MenuItemAction) { - const item = new CodiconActionViewItem(action, this.keybindingService, this.notificationService, this.contextKeyService); + const item = new CodiconActionViewItem(action, this.keybindingService, this.notificationService, this.contextKeyService, this.themeService); return item; } diff --git a/src/vs/workbench/contrib/notebook/browser/diff/notebookTextDiffList.ts b/src/vs/workbench/contrib/notebook/browser/diff/notebookTextDiffList.ts index fead08ce397..07374920577 100644 --- a/src/vs/workbench/contrib/notebook/browser/diff/notebookTextDiffList.ts +++ b/src/vs/workbench/contrib/notebook/browser/diff/notebookTextDiffList.ts @@ -166,6 +166,7 @@ export class CellDiffSideBySideRenderer implements IListRenderer { if (action instanceof MenuItemAction) { - const item = new CodiconActionViewItem(action, this.keybindingService, this.notificationService, this.contextKeyService); + const item = new CodiconActionViewItem(action, this.keybindingService, this.notificationService, this.contextKeyService, this.themeService); return item; } diff --git a/src/vs/workbench/contrib/notebook/browser/view/cellParts/cellActionView.ts b/src/vs/workbench/contrib/notebook/browser/view/cellParts/cellActionView.ts index 1269506a529..fe682e0e9aa 100644 --- a/src/vs/workbench/contrib/notebook/browser/view/cellParts/cellActionView.ts +++ b/src/vs/workbench/contrib/notebook/browser/view/cellParts/cellActionView.ts @@ -10,6 +10,7 @@ import { MenuItemAction } from 'vs/platform/actions/common/actions'; import { IKeybindingService } from 'vs/platform/keybinding/common/keybinding'; import { INotificationService } from 'vs/platform/notification/common/notification'; import { IContextKeyService } from 'vs/platform/contextkey/common/contextkey'; +import { IThemeService } from 'vs/platform/theme/common/themeService'; export class CodiconActionViewItem extends MenuEntryActionViewItem { constructor( @@ -17,8 +18,9 @@ export class CodiconActionViewItem extends MenuEntryActionViewItem { @IKeybindingService keybindingService: IKeybindingService, @INotificationService notificationService: INotificationService, @IContextKeyService contextKeyService: IContextKeyService, + @IThemeService themeService: IThemeService, ) { - super(_action, undefined, keybindingService, notificationService, contextKeyService); + super(_action, undefined, keybindingService, notificationService, contextKeyService, themeService); } override updateLabel(): void { if (this.options.label && this.label) { @@ -35,8 +37,9 @@ export class ActionViewWithLabel extends MenuEntryActionViewItem { @IKeybindingService keybindingService: IKeybindingService, @INotificationService notificationService: INotificationService, @IContextKeyService contextKeyService: IContextKeyService, + @IThemeService themeService: IThemeService, ) { - super(_action, undefined, keybindingService, notificationService, contextKeyService); + super(_action, undefined, keybindingService, notificationService, contextKeyService, themeService); } override render(container: HTMLElement): void { diff --git a/src/vs/workbench/contrib/terminal/browser/terminalView.ts b/src/vs/workbench/contrib/terminal/browser/terminalView.ts index 5001d7bd376..d450e1d6609 100644 --- a/src/vs/workbench/contrib/terminal/browser/terminalView.ts +++ b/src/vs/workbench/contrib/terminal/browser/terminalView.ts @@ -77,7 +77,8 @@ export class TerminalViewPane extends ViewPane { @IMenuService private readonly _menuService: IMenuService, @ICommandService private readonly _commandService: ICommandService, @ITerminalProfileService private readonly _terminalProfileService: ITerminalProfileService, - @ITerminalProfileResolverService private readonly _terminalProfileResolverService: ITerminalProfileResolverService + @ITerminalProfileResolverService private readonly _terminalProfileResolverService: ITerminalProfileResolverService, + @IThemeService private readonly _themeService: IThemeService ) { super(options, keybindingService, _contextMenuService, configurationService, _contextKeyService, viewDescriptorService, _instantiationService, openerService, themeService, telemetryService); this._register(this._terminalService.onDidRegisterProcessSupport(() => { @@ -230,7 +231,7 @@ export class TerminalViewPane extends ViewPane { } const actions = getTerminalActionBarArgs(TerminalLocation.Panel, this._terminalProfileService.availableProfiles, this._getDefaultProfileName(), this._terminalProfileService.contributedProfiles, this._instantiationService, this._terminalService, this._contextKeyService, this._commandService, this._dropdownMenu); - this._tabButtons = new DropdownWithPrimaryActionViewItem(actions.primaryAction, actions.dropdownAction, actions.dropdownMenuActions, actions.className, this._contextMenuService, {}, this._keybindingService, this._notificationService, this._contextKeyService); + this._tabButtons = new DropdownWithPrimaryActionViewItem(actions.primaryAction, actions.dropdownAction, actions.dropdownMenuActions, actions.className, this._contextMenuService, {}, this._keybindingService, this._notificationService, this._contextKeyService, this._themeService); this._updateTabActionBar(this._terminalProfileService.availableProfiles); return this._tabButtons; } @@ -368,9 +369,9 @@ class SingleTerminalTabActionViewItem extends MenuEntryActionViewItem { @IKeybindingService keybindingService: IKeybindingService, @INotificationService notificationService: INotificationService, @IContextKeyService contextKeyService: IContextKeyService, + @IThemeService themeService: IThemeService, @ITerminalService private readonly _terminalService: ITerminalService, @ITerminalGroupService private readonly _terminalGroupService: ITerminalGroupService, - @IThemeService private readonly _themeService: IThemeService, @IContextMenuService private readonly _contextMenuService: IContextMenuService, @ICommandService private readonly _commandService: ICommandService, @IConfigurationService configurationService: IConfigurationService @@ -391,7 +392,7 @@ class SingleTerminalTabActionViewItem extends MenuEntryActionViewItem { _commandService ), { draggable: true - }, keybindingService, notificationService, contextKeyService); + }, keybindingService, notificationService, contextKeyService, themeService); // Register listeners to update the tab this._register(this._terminalService.onDidChangeInstancePrimaryStatus(e => this.updateLabel(e)));