From 8d4c9a82f77d66f865d2adb11df35cd4607f73da Mon Sep 17 00:00:00 2001 From: Martin Aeschlimann Date: Wed, 21 Dec 2022 19:25:54 +0100 Subject: [PATCH 1/5] list: move away from styler --- .../browser/ui/actionbar/actionViewItems.ts | 6 +- src/vs/base/browser/ui/list/listPaging.ts | 5 +- src/vs/base/browser/ui/list/listWidget.ts | 111 +++++++++-------- src/vs/base/browser/ui/selectBox/selectBox.ts | 68 +++++++---- .../browser/ui/selectBox/selectBoxCustom.ts | 8 +- src/vs/base/browser/ui/table/tableWidget.ts | 9 +- src/vs/base/browser/ui/tree/abstractTree.ts | 2 +- src/vs/base/browser/ui/tree/asyncDataTree.ts | 3 +- .../parts/quickinput/browser/quickInput.ts | 15 +-- .../test/browser/quickinput.test.ts | 10 +- .../contrib/suggest/browser/suggestWidget.ts | 12 +- .../actionWidget/browser/actionList.ts | 2 + .../browser/menuEntryActionViewItem.ts | 6 +- src/vs/platform/list/browser/listService.ts | 101 +++++---------- .../platform/quickinput/browser/quickInput.ts | 14 ++- .../platform/theme/browser/defaultStyles.ts | 76 +++++++++++- src/vs/platform/theme/common/colorRegistry.ts | 5 + src/vs/platform/theme/common/styler.ts | 115 +----------------- .../comments/browser/commentsTreeViewer.ts | 6 +- .../contrib/debug/browser/breakpointWidget.ts | 5 +- .../debug/browser/debugActionViewItems.ts | 11 +- .../contrib/debug/browser/debugViewlet.ts | 2 +- .../extensions/browser/extensionsViewer.ts | 11 +- .../contrib/markers/browser/markersView.ts | 2 +- .../notebook/browser/diff/notebookDiffList.ts | 14 +-- .../notebook/browser/view/notebookCellList.ts | 14 +-- .../preferences/browser/settingsTree.ts | 24 ++-- .../preferences/browser/settingsWidgets.ts | 16 +-- .../contrib/preferences/browser/tocTree.ts | 15 +-- .../remote/browser/explorerViewItems.ts | 7 +- .../terminal/browser/terminalTabsList.ts | 1 - .../contrib/terminal/browser/terminalView.ts | 6 +- 32 files changed, 326 insertions(+), 376 deletions(-) diff --git a/src/vs/base/browser/ui/actionbar/actionViewItems.ts b/src/vs/base/browser/ui/actionbar/actionViewItems.ts index 26288a54bc68f..35d21fcc416c7 100644 --- a/src/vs/base/browser/ui/actionbar/actionViewItems.ts +++ b/src/vs/base/browser/ui/actionbar/actionViewItems.ts @@ -11,7 +11,7 @@ import { IActionViewItem } from 'vs/base/browser/ui/actionbar/actionbar'; import { IContextViewProvider } from 'vs/base/browser/ui/contextview/contextview'; import { IHoverDelegate } from 'vs/base/browser/ui/iconLabel/iconHoverDelegate'; import { ICustomHover, setupCustomHover } from 'vs/base/browser/ui/iconLabel/iconLabelHover'; -import { ISelectBoxOptions, ISelectOptionItem, SelectBox } from 'vs/base/browser/ui/selectBox/selectBox'; +import { ISelectBoxOptions, ISelectBoxStyles, ISelectOptionItem, SelectBox } from 'vs/base/browser/ui/selectBox/selectBox'; import { IToggleStyles } from 'vs/base/browser/ui/toggle/toggle'; import { Action, ActionRunner, IAction, IActionChangeEvent, IActionRunner, Separator } from 'vs/base/common/actions'; import { Disposable } from 'vs/base/common/lifecycle'; @@ -418,10 +418,10 @@ export class ActionViewItem extends BaseActionViewItem { export class SelectActionViewItem extends BaseActionViewItem { protected selectBox: SelectBox; - constructor(ctx: unknown, action: IAction, options: ISelectOptionItem[], selected: number, contextViewProvider: IContextViewProvider, selectBoxOptions?: ISelectBoxOptions) { + constructor(ctx: unknown, action: IAction, options: ISelectOptionItem[], selected: number, contextViewProvider: IContextViewProvider, styles: ISelectBoxStyles, selectBoxOptions?: ISelectBoxOptions) { super(ctx, action); - this.selectBox = new SelectBox(options, selected, contextViewProvider, undefined, selectBoxOptions); + this.selectBox = new SelectBox(options, selected, contextViewProvider, styles, selectBoxOptions); this.selectBox.setFocusable(false); this._register(this.selectBox); diff --git a/src/vs/base/browser/ui/list/listPaging.ts b/src/vs/base/browser/ui/list/listPaging.ts index a5f3a920e3825..8ec5ca602c18c 100644 --- a/src/vs/base/browser/ui/list/listPaging.ts +++ b/src/vs/base/browser/ui/list/listPaging.ts @@ -9,7 +9,6 @@ import { Event } from 'vs/base/common/event'; import { Disposable, IDisposable } from 'vs/base/common/lifecycle'; import { IPagedModel } from 'vs/base/common/paging'; import { ScrollbarVisibility } from 'vs/base/common/scrollable'; -import { IThemable } from 'vs/base/common/styler'; import 'vs/css!./list'; import { IListContextMenuEvent, IListEvent, IListMouseEvent, IListRenderer, IListVirtualDelegate } from './list'; import { IListAccessibilityProvider, IListOptions, IListOptionsUpdate, IListStyles, List, TypeNavigationMode } from './listWidget'; @@ -109,6 +108,8 @@ export interface IPagedListOptions { readonly mouseSupport?: boolean; readonly horizontalScrolling?: boolean; readonly additionalScrollHeight?: number; + + readonly listStyles?: IListStyles; } function fromPagedListOptions(modelProvider: () => IPagedModel, options: IPagedListOptions): IListOptions { @@ -118,7 +119,7 @@ function fromPagedListOptions(modelProvider: () => IPagedModel, options: I }; } -export class PagedList implements IThemable, IDisposable { +export class PagedList implements IDisposable { private list: List; private _model!: IPagedModel; diff --git a/src/vs/base/browser/ui/list/listWidget.ts b/src/vs/base/browser/ui/list/listWidget.ts index fe0532090dd35..eb9208cd495a7 100644 --- a/src/vs/base/browser/ui/list/listWidget.ts +++ b/src/vs/base/browser/ui/list/listWidget.ts @@ -20,11 +20,9 @@ import { matchesPrefix } from 'vs/base/common/filters'; import { KeyCode } from 'vs/base/common/keyCodes'; import { DisposableStore, dispose, IDisposable } from 'vs/base/common/lifecycle'; import { clamp } from 'vs/base/common/numbers'; -import { mixin } from 'vs/base/common/objects'; import * as platform from 'vs/base/common/platform'; import { ScrollbarVisibility, ScrollEvent } from 'vs/base/common/scrollable'; import { ISpliceable } from 'vs/base/common/sequence'; -import { IThemable } from 'vs/base/common/styler'; import { isNumber } from 'vs/base/common/types'; import 'vs/css!./list'; import { IIdentityProvider, IKeyboardNavigationDelegate, IKeyboardNavigationLabelProvider, IListContextMenuEvent, IListDragAndDrop, IListDragOverReaction, IListEvent, IListGestureEvent, IListMouseEvent, IListRenderer, IListTouchEvent, IListVirtualDelegate, ListError } from './list'; @@ -797,11 +795,11 @@ export class DefaultStyleController implements IStyleController { const content: string[] = []; if (styles.listBackground) { - if (styles.listBackground.isOpaque()) { - content.push(`.monaco-list${suffix} .monaco-list-rows { background: ${styles.listBackground}; }`); - } else if (!platform.isMacintosh) { // subpixel AA doesn't exist in macOS - console.warn(`List with id '${this.selectorSuffix}' was styled with a non-opaque background color. This will break sub-pixel antialiasing.`); - } + //if (styles.listBackground.isOpaque()) { + content.push(`.monaco-list${suffix} .monaco-list-rows { background: ${styles.listBackground}; }`); + // } else if (!platform.isMacintosh) { // subpixel AA doesn't exist in macOS + // console.warn(`List with id '${this.selectorSuffix}' was styled with a non-opaque background color. This will break sub-pixel antialiasing.`); + // } } if (styles.listFocusBackground) { @@ -954,6 +952,8 @@ export interface IListOptions extends IListOptionsUpdate { readonly accessibilityProvider?: IListAccessibilityProvider; readonly keyboardNavigationEventFilter?: IKeyboardNavigationEventFilter; + readonly listStyles?: IListStyles; + // list view options readonly useShadows?: boolean; readonly verticalScrollMode?: ScrollbarVisibility; @@ -971,47 +971,59 @@ export interface IListOptions extends IListOptionsUpdate { } export interface IListStyles { - listBackground?: Color; - listFocusBackground?: Color; - listFocusForeground?: Color; - listActiveSelectionBackground?: Color; - listActiveSelectionForeground?: Color; - listActiveSelectionIconForeground?: Color; - listFocusAndSelectionOutline?: Color; - listFocusAndSelectionBackground?: Color; - listFocusAndSelectionForeground?: Color; - listInactiveSelectionBackground?: Color; - listInactiveSelectionIconForeground?: Color; - listInactiveSelectionForeground?: Color; - listInactiveFocusForeground?: Color; - listInactiveFocusBackground?: Color; - listHoverBackground?: Color; - listHoverForeground?: Color; - listDropBackground?: Color; - listFocusOutline?: Color; - listInactiveFocusOutline?: Color; - listSelectionOutline?: Color; - listHoverOutline?: Color; - treeIndentGuidesStroke?: Color; - tableColumnsBorder?: Color; - tableOddRowsBackgroundColor?: Color; + listBackground: string | undefined; + listFocusBackground: string | undefined; + listFocusForeground: string | undefined; + listActiveSelectionBackground: string | undefined; + listActiveSelectionForeground: string | undefined; + listActiveSelectionIconForeground: string | undefined; + listFocusAndSelectionOutline: string | undefined; + listFocusAndSelectionBackground: string | undefined; + listFocusAndSelectionForeground: string | undefined; + listInactiveSelectionBackground: string | undefined; + listInactiveSelectionIconForeground: string | undefined; + listInactiveSelectionForeground: string | undefined; + listInactiveFocusForeground: string | undefined; + listInactiveFocusBackground: string | undefined; + listHoverBackground: string | undefined; + listHoverForeground: string | undefined; + listDropBackground: string | undefined; + listFocusOutline: string | undefined; + listInactiveFocusOutline: string | undefined; + listSelectionOutline: string | undefined; + listHoverOutline: string | undefined; + treeIndentGuidesStroke: string | undefined; + treeInactiveIndentGuidesStroke: string | undefined; + tableColumnsBorder: string | undefined; + tableOddRowsBackgroundColor: string | undefined; } -const defaultStyles: IListStyles = { - listFocusBackground: Color.fromHex('#7FB0D0'), - listActiveSelectionBackground: Color.fromHex('#0E639C'), - listActiveSelectionForeground: Color.fromHex('#FFFFFF'), - listActiveSelectionIconForeground: Color.fromHex('#FFFFFF'), - listFocusAndSelectionOutline: Color.fromHex('#90C2F9'), - listFocusAndSelectionBackground: Color.fromHex('#094771'), - listFocusAndSelectionForeground: Color.fromHex('#FFFFFF'), - listInactiveSelectionBackground: Color.fromHex('#3F3F46'), - listInactiveSelectionIconForeground: Color.fromHex('#FFFFFF'), - listHoverBackground: Color.fromHex('#2A2D2E'), - listDropBackground: Color.fromHex('#383B3D'), - treeIndentGuidesStroke: Color.fromHex('#a9a9a9'), - tableColumnsBorder: Color.fromHex('#cccccc').transparent(0.2), - tableOddRowsBackgroundColor: Color.fromHex('#cccccc').transparent(0.04) +export const unthemedListStyles: IListStyles = { + listFocusBackground: '#7FB0D0', + listActiveSelectionBackground: '#0E639C', + listActiveSelectionForeground: '#FFFFFF', + listActiveSelectionIconForeground: '#FFFFFF', + listFocusAndSelectionOutline: '#90C2F9', + listFocusAndSelectionBackground: '#094771', + listFocusAndSelectionForeground: '#FFFFFF', + listInactiveSelectionBackground: '#3F3F46', + listInactiveSelectionIconForeground: '#FFFFFF', + listHoverBackground: '#2A2D2E', + listDropBackground: '#383B3D', + treeIndentGuidesStroke: '#a9a9a9', + treeInactiveIndentGuidesStroke: Color.fromHex('#a9a9a9').transparent(0.4).toString(), + tableColumnsBorder: Color.fromHex('#cccccc').transparent(0.2).toString(), + tableOddRowsBackgroundColor: Color.fromHex('#cccccc').transparent(0.04).toString(), + listBackground: undefined, + listFocusForeground: undefined, + listInactiveSelectionForeground: undefined, + listInactiveFocusForeground: undefined, + listInactiveFocusBackground: undefined, + listHoverForeground: undefined, + listFocusOutline: undefined, + listInactiveFocusOutline: undefined, + listSelectionOutline: undefined, + listHoverOutline: undefined }; const DefaultOptions: IListOptions = { @@ -1023,7 +1035,8 @@ const DefaultOptions: IListOptions = { onDragStart(): void { }, onDragOver() { return false; }, drop() { } - } + }, + listStyles: unthemedListStyles }; // TODO@Joao: move these utils into a SortedArray class @@ -1240,7 +1253,7 @@ class ListViewDragAndDrop implements IListViewDragAndDrop { * - Dynamic element height support * - Drag-and-drop support */ -export class List implements ISpliceable, IThemable, IDisposable { +export class List implements ISpliceable, IDisposable { private focus = new Trait('focused'); private selection: Trait; @@ -1338,8 +1351,6 @@ export class List implements ISpliceable, IThemable, IDisposable { const role = this._options.accessibilityProvider && this._options.accessibilityProvider.getWidgetRole ? this._options.accessibilityProvider?.getWidgetRole() : 'list'; this.selection = new SelectionTrait(role !== 'listbox'); - mixin(_options, defaultStyles, false); - const baseRenderers: IListRenderer[] = [this.focus.renderer, this.selection.renderer]; this.accessibilityProvider = _options.accessibilityProvider; diff --git a/src/vs/base/browser/ui/selectBox/selectBox.ts b/src/vs/base/browser/ui/selectBox/selectBox.ts index d31b8828697a0..1e2554800bc68 100644 --- a/src/vs/base/browser/ui/selectBox/selectBox.ts +++ b/src/vs/base/browser/ui/selectBox/selectBox.ts @@ -9,12 +9,9 @@ import { IListStyles } from 'vs/base/browser/ui/list/listWidget'; import { SelectBoxList } from 'vs/base/browser/ui/selectBox/selectBoxCustom'; import { SelectBoxNative } from 'vs/base/browser/ui/selectBox/selectBoxNative'; import { Widget } from 'vs/base/browser/ui/widget'; -import { Color } from 'vs/base/common/color'; import { Event } from 'vs/base/common/event'; import { IDisposable } from 'vs/base/common/lifecycle'; -import { deepClone } from 'vs/base/common/objects'; import { isMacintosh } from 'vs/base/common/platform'; -import { IThemable } from 'vs/base/common/styler'; import 'vs/css!./selectBox'; @@ -34,8 +31,6 @@ export interface ISelectBoxDelegate extends IDisposable { // Delegated Widget interface render(container: HTMLElement): void; - style(styles: ISelectBoxStyles): void; - applyStyles(): void; } export interface ISelectBoxOptions { @@ -58,19 +53,48 @@ export interface ISelectOptionItem { } export interface ISelectBoxStyles extends IListStyles { - selectBackground?: Color; - selectListBackground?: Color; - selectForeground?: Color; - decoratorRightForeground?: Color; - selectBorder?: Color; - selectListBorder?: Color; - focusBorder?: Color; + selectBackground: string | undefined; + selectListBackground: string | undefined; + selectForeground: string | undefined; + decoratorRightForeground: string | undefined; + selectBorder: string | undefined; + selectListBorder: string | undefined; + focusBorder: string | undefined; } -export const defaultStyles = { - selectBackground: Color.fromHex('#3C3C3C'), - selectForeground: Color.fromHex('#F0F0F0'), - selectBorder: Color.fromHex('#3C3C3C') +export const unthemedSelectBoxStyles: ISelectBoxStyles = { + selectBackground: '#3C3C3C', + selectForeground: '#F0F0F0', + selectBorder: '#3C3C3C', + decoratorRightForeground: undefined, + selectListBackground: undefined, + selectListBorder: undefined, + focusBorder: undefined, + listBackground: undefined, + listFocusBackground: undefined, + listFocusForeground: undefined, + listActiveSelectionBackground: undefined, + listActiveSelectionForeground: undefined, + listActiveSelectionIconForeground: undefined, + listFocusAndSelectionOutline: undefined, + listFocusAndSelectionBackground: undefined, + listFocusAndSelectionForeground: undefined, + listInactiveSelectionBackground: undefined, + listInactiveSelectionIconForeground: undefined, + listInactiveSelectionForeground: undefined, + listInactiveFocusForeground: undefined, + listInactiveFocusBackground: undefined, + listHoverBackground: undefined, + listHoverForeground: undefined, + listDropBackground: undefined, + listFocusOutline: undefined, + listInactiveFocusOutline: undefined, + listSelectionOutline: undefined, + listHoverOutline: undefined, + treeIndentGuidesStroke: undefined, + treeInactiveIndentGuidesStroke: undefined, + tableColumnsBorder: undefined, + tableOddRowsBackgroundColor: undefined }; export interface ISelectData { @@ -78,10 +102,10 @@ export interface ISelectData { index: number; } -export class SelectBox extends Widget implements ISelectBoxDelegate, IThemable { +export class SelectBox extends Widget implements ISelectBoxDelegate { private selectBoxDelegate: ISelectBoxDelegate; - constructor(options: ISelectOptionItem[], selected: number, contextViewProvider: IContextViewProvider, styles: ISelectBoxStyles = deepClone(defaultStyles), selectBoxOptions?: ISelectBoxOptions) { + constructor(options: ISelectOptionItem[], selected: number, contextViewProvider: IContextViewProvider, styles: ISelectBoxStyles, selectBoxOptions?: ISelectBoxOptions) { super(); // Default to native SelectBox for OSX unless overridden @@ -127,12 +151,4 @@ export class SelectBox extends Widget implements ISelectBoxDelegate, IThemable { render(container: HTMLElement): void { this.selectBoxDelegate.render(container); } - - style(styles: ISelectBoxStyles): void { - this.selectBoxDelegate.style(styles); - } - - applyStyles(): void { - this.selectBoxDelegate.applyStyles(); - } } diff --git a/src/vs/base/browser/ui/selectBox/selectBoxCustom.ts b/src/vs/base/browser/ui/selectBox/selectBoxCustom.ts index 22ae08dfca4bd..3924f4c5cf0a0 100644 --- a/src/vs/base/browser/ui/selectBox/selectBoxCustom.ts +++ b/src/vs/base/browser/ui/selectBox/selectBoxCustom.ts @@ -359,7 +359,7 @@ export class SelectBoxList extends Disposable implements ISelectBoxDelegate, ILi content.push(`.monaco-select-box-dropdown-container > .select-box-dropdown-list-container .monaco-list .monaco-list-row:not(.focused) .option-decorator-right { color: ${this.styles.decoratorRightForeground}; }`); } - if (this.styles.selectBackground && this.styles.selectBorder && !this.styles.selectBorder.equals(this.styles.selectBackground)) { + if (this.styles.selectBackground && this.styles.selectBorder && this.styles.selectBorder !== this.styles.selectBackground) { content.push(`.monaco-select-box-dropdown-container { border: 1px solid ${this.styles.selectBorder} } `); content.push(`.monaco-select-box-dropdown-container > .select-box-details-pane.border-top { border-top: 1px solid ${this.styles.selectBorder} } `); content.push(`.monaco-select-box-dropdown-container > .select-box-details-pane.border-bottom { border-bottom: 1px solid ${this.styles.selectBorder} } `); @@ -398,7 +398,7 @@ export class SelectBoxList extends Disposable implements ISelectBoxDelegate, ILi this.applyStyles(); } - public applyStyles(): void { + private applyStyles(): void { // Style parent select @@ -422,7 +422,6 @@ export class SelectBoxList extends Disposable implements ISelectBoxDelegate, ILi private styleList() { if (this.selectList) { const background = this.styles.selectBackground ? this.styles.selectBackground.toString() : ''; - this.selectList.style({}); const listBackground = this.styles.selectListBackground ? this.styles.selectListBackground.toString() : background; this.selectDropDownListContainer.style.backgroundColor = listBackground; @@ -753,7 +752,8 @@ export class SelectBoxList extends Disposable implements ISelectBoxDelegate, ILi getWidgetAriaLabel: () => localize({ key: 'selectBox', comment: ['Behave like native select dropdown element.'] }, "Select Box"), getRole: () => 'option', getWidgetRole: () => 'listbox' - } + }, + listStyles: this.styles }); if (this.selectBoxOptions.ariaLabel) { this.selectList.ariaLabel = this.selectBoxOptions.ariaLabel; diff --git a/src/vs/base/browser/ui/table/tableWidget.ts b/src/vs/base/browser/ui/table/tableWidget.ts index e2b67887009b4..d1b817392e354 100644 --- a/src/vs/base/browser/ui/table/tableWidget.ts +++ b/src/vs/base/browser/ui/table/tableWidget.ts @@ -5,14 +5,13 @@ import { $, append, clearNode, createStyleSheet, getContentHeight, getContentWidth } from 'vs/base/browser/dom'; import { IListRenderer, IListVirtualDelegate } from 'vs/base/browser/ui/list/list'; -import { IListOptions, IListOptionsUpdate, IListStyles, List } from 'vs/base/browser/ui/list/listWidget'; +import { IListOptions, IListOptionsUpdate, IListStyles, List, unthemedListStyles } from 'vs/base/browser/ui/list/listWidget'; import { ISplitViewDescriptor, IView, Orientation, SplitView } from 'vs/base/browser/ui/splitview/splitview'; import { ITableColumn, ITableContextMenuEvent, ITableEvent, ITableGestureEvent, ITableMouseEvent, ITableRenderer, ITableTouchEvent, ITableVirtualDelegate } from 'vs/base/browser/ui/table/table'; import { Emitter, Event } from 'vs/base/common/event'; import { DisposableStore, IDisposable } from 'vs/base/common/lifecycle'; import { ScrollbarVisibility, ScrollEvent } from 'vs/base/common/scrollable'; import { ISpliceable } from 'vs/base/common/sequence'; -import { IThemable } from 'vs/base/common/styler'; import 'vs/css!./table'; // TODO@joao @@ -136,11 +135,11 @@ class ColumnHeader implements IView { } } -export interface ITableOptions extends IListOptions { } +export interface ITableOptions extends IListOptions { listStyles?: ITableStyles } export interface ITableOptionsUpdate extends IListOptionsUpdate { } export interface ITableStyles extends IListStyles { } -export class Table implements ISpliceable, IThemable, IDisposable { +export class Table implements ISpliceable, IDisposable { private static InstanceCount = 0; readonly domId = `table_id_${++Table.InstanceCount}`; @@ -221,7 +220,7 @@ export class Table implements ISpliceable, IThemable, IDisposable { }, null, this.disposables); this.styleElement = createStyleSheet(this.domNode); - this.style({}); + this.style(_options?.listStyles ?? unthemedListStyles); } updateOptions(options: ITableOptionsUpdate): void { diff --git a/src/vs/base/browser/ui/tree/abstractTree.ts b/src/vs/base/browser/ui/tree/abstractTree.ts index 92c1ad8e9fb67..b9c079ddb2739 100644 --- a/src/vs/base/browser/ui/tree/abstractTree.ts +++ b/src/vs/base/browser/ui/tree/abstractTree.ts @@ -1647,7 +1647,7 @@ export abstract class AbstractTree implements IDisposable const content: string[] = []; if (styles.treeIndentGuidesStroke) { - content.push(`.monaco-list${suffix}:hover .monaco-tl-indent > .indent-guide, .monaco-list${suffix}.always .monaco-tl-indent > .indent-guide { border-color: ${styles.treeIndentGuidesStroke.transparent(0.4)}; }`); + content.push(`.monaco-list${suffix}:hover .monaco-tl-indent > .indent-guide, .monaco-list${suffix}.always .monaco-tl-indent > .indent-guide { border-color: ${styles.treeInactiveIndentGuidesStroke}; }`); content.push(`.monaco-list${suffix} .monaco-tl-indent > .indent-guide.active { border-color: ${styles.treeIndentGuidesStroke}; }`); } diff --git a/src/vs/base/browser/ui/tree/asyncDataTree.ts b/src/vs/base/browser/ui/tree/asyncDataTree.ts index 063e38474c8a4..c2815694739dc 100644 --- a/src/vs/base/browser/ui/tree/asyncDataTree.ts +++ b/src/vs/base/browser/ui/tree/asyncDataTree.ts @@ -19,7 +19,6 @@ import { Emitter, Event } from 'vs/base/common/event'; import { Iterable } from 'vs/base/common/iterator'; import { DisposableStore, dispose, IDisposable } from 'vs/base/common/lifecycle'; import { ScrollEvent } from 'vs/base/common/scrollable'; -import { IThemable } from 'vs/base/common/styler'; import { isIterable } from 'vs/base/common/types'; interface IAsyncDataTreeNode { @@ -300,7 +299,7 @@ function dfs(node: IAsyncDataTreeNode, fn: (node: IAsyncDa node.children.forEach(child => dfs(child, fn)); } -export class AsyncDataTree implements IDisposable, IThemable { +export class AsyncDataTree implements IDisposable { protected readonly tree: ObjectTree, TFilterData>; protected readonly root: IAsyncDataTreeNode; diff --git a/src/vs/base/parts/quickinput/browser/quickInput.ts b/src/vs/base/parts/quickinput/browser/quickInput.ts index 3f2a26679ace3..d7aba932803d3 100644 --- a/src/vs/base/parts/quickinput/browser/quickInput.ts +++ b/src/vs/base/parts/quickinput/browser/quickInput.ts @@ -61,7 +61,8 @@ export interface IQuickInputStyles { button: IButtonStyles; progressBar: IProgressBarStyles; keybindingLabel: IKeybindingLabelStyles; - list: IListStyles & { pickerGroupBorder?: Color; pickerGroupForeground?: Color }; + list: IListStyles; + pickerGroup: { pickerGroupBorder: string | undefined; pickerGroupForeground: string | undefined }; } export interface IQuickInputWidgetStyles { @@ -1842,14 +1843,14 @@ export class QuickInputController extends Disposable { this.ui.list.style(this.styles.list); const content: string[] = []; - if (this.styles.list.pickerGroupBorder) { - content.push(`.quick-input-list .quick-input-list-entry { border-top-color: ${this.styles.list.pickerGroupBorder}; }`); + if (this.styles.pickerGroup.pickerGroupBorder) { + content.push(`.quick-input-list .quick-input-list-entry { border-top-color: ${this.styles.pickerGroup.pickerGroupBorder}; }`); } - if (this.styles.list.pickerGroupForeground) { - content.push(`.quick-input-list .quick-input-list-separator { color: ${this.styles.list.pickerGroupForeground}; }`); + if (this.styles.pickerGroup.pickerGroupForeground) { + content.push(`.quick-input-list .quick-input-list-separator { color: ${this.styles.pickerGroup.pickerGroupForeground}; }`); } - if (this.styles.list.pickerGroupForeground) { - content.push(`.quick-input-list .quick-input-list-separator-as-item { color: ${this.styles.list.pickerGroupForeground}; }`); + if (this.styles.pickerGroup.pickerGroupForeground) { + content.push(`.quick-input-list .quick-input-list-separator-as-item { color: ${this.styles.pickerGroup.pickerGroupForeground}; }`); } if ( diff --git a/src/vs/base/parts/quickinput/test/browser/quickinput.test.ts b/src/vs/base/parts/quickinput/test/browser/quickinput.test.ts index 545eb42c2df4c..044842c3081bb 100644 --- a/src/vs/base/parts/quickinput/test/browser/quickinput.test.ts +++ b/src/vs/base/parts/quickinput/test/browser/quickinput.test.ts @@ -7,7 +7,7 @@ import * as assert from 'assert'; import { unthemedInboxStyles } from 'vs/base/browser/ui/inputbox/inputBox'; import { unthemedButtonStyles } from 'vs/base/browser/ui/button/button'; import { IListRenderer, IListVirtualDelegate } from 'vs/base/browser/ui/list/list'; -import { IListOptions, List } from 'vs/base/browser/ui/list/listWidget'; +import { IListOptions, List, unthemedListStyles } from 'vs/base/browser/ui/list/listWidget'; import { unthemedToggleStyles } from 'vs/base/browser/ui/toggle/toggle'; import { raceTimeout } from 'vs/base/common/async'; import { QuickInputController } from 'vs/base/parts/quickinput/browser/quickInput'; @@ -61,9 +61,13 @@ suite('QuickInput', () => { // https://github.com/microsoft/vscode/issues/147543 inputBox: unthemedInboxStyles, toggle: unthemedToggleStyles, keybindingLabel: {}, - list: {}, + list: unthemedListStyles, progressBar: {}, - widget: {} + widget: {}, + pickerGroup: { + pickerGroupBorder: undefined, + pickerGroupForeground: undefined, + }, } }); diff --git a/src/vs/editor/contrib/suggest/browser/suggestWidget.ts b/src/vs/editor/contrib/suggest/browser/suggestWidget.ts index d8e7465278b39..f775039d12a0b 100644 --- a/src/vs/editor/contrib/suggest/browser/suggestWidget.ts +++ b/src/vs/editor/contrib/suggest/browser/suggestWidget.ts @@ -26,7 +26,6 @@ import { IContextKey, IContextKeyService } from 'vs/platform/contextkey/common/c import { IInstantiationService } from 'vs/platform/instantiation/common/instantiation'; import { IStorageService, StorageScope, StorageTarget } from 'vs/platform/storage/common/storage'; import { activeContrastBorder, editorForeground, editorWidgetBackground, editorWidgetBorder, listFocusHighlightForeground, listHighlightForeground, quickInputListFocusBackground, quickInputListFocusForeground, quickInputListFocusIconForeground, registerColor, transparent } from 'vs/platform/theme/common/colorRegistry'; -import { attachListStyler } from 'vs/platform/theme/common/styler'; import { isHighContrast } from 'vs/platform/theme/common/theme'; import { IColorTheme, IThemeService } from 'vs/platform/theme/common/themeService'; import { CompletionModel } from './completionModel'; @@ -34,6 +33,7 @@ import { ResizableHTMLElement } from 'vs/base/browser/ui/resizable/resizable'; import { CompletionItem, Context as SuggestContext } from './suggest'; import { canExpandCompletionItem, SuggestDetailsOverlay, SuggestDetailsWidget } from './suggestWidgetDetails'; import { getAriaId, ItemRenderer } from './suggestWidgetRenderer'; +import { getListStyles } from 'vs/platform/theme/browser/defaultStyles'; /** * Suggest widget colors @@ -257,17 +257,17 @@ export class SuggestWidget implements IDisposable { return nls.localize('ariaCurrenttSuggestionReadDetails', "{0}, docs: {1}", label, docs); }, - } + }, + listStyles: getListStyles({ + listInactiveFocusBackground: editorSuggestWidgetSelectedBackground, + listInactiveFocusOutline: activeContrastBorder + }) }); this._status = instantiationService.createInstance(SuggestWidgetStatus, this.element.domNode); const applyStatusBarStyle = () => this.element.domNode.classList.toggle('with-status-bar', this.editor.getOption(EditorOption.suggest).showStatusBar); applyStatusBarStyle(); - this._disposables.add(attachListStyler(this._list, _themeService, { - listInactiveFocusBackground: editorSuggestWidgetSelectedBackground, - listInactiveFocusOutline: activeContrastBorder - })); this._disposables.add(_themeService.onDidColorThemeChange(t => this._onThemeChange(t))); this._onThemeChange(_themeService.getColorTheme()); diff --git a/src/vs/platform/actionWidget/browser/actionList.ts b/src/vs/platform/actionWidget/browser/actionList.ts index 514f7d09aac9b..59501fb867a7f 100644 --- a/src/vs/platform/actionWidget/browser/actionList.ts +++ b/src/vs/platform/actionWidget/browser/actionList.ts @@ -16,6 +16,7 @@ import { localize } from 'vs/nls'; import { IActionItem } from 'vs/platform/actionWidget/common/actionWidget'; import { IContextViewService } from 'vs/platform/contextview/browser/contextView'; import { IKeybindingService } from 'vs/platform/keybinding/common/keybinding'; +import { defaultListStyles } from 'vs/platform/theme/browser/defaultStyles'; export const acceptSelectedActionCommand = 'acceptSelectedCodeAction'; export const previewSelectedActionCommand = 'previewSelectedCodeAction'; @@ -186,6 +187,7 @@ export class ActionList extends Disposable { }; this._list = this._register(new List(user, this.domNode, virtualDelegate, [new ActionItemRenderer>(preview, this._keybindingService), new HeaderRenderer()], { keyboardSupport: false, + listStyles: defaultListStyles, accessibilityProvider: { getAriaLabel: element => { if (element.kind === ActionListItemKind.Action) { diff --git a/src/vs/platform/actions/browser/menuEntryActionViewItem.ts b/src/vs/platform/actions/browser/menuEntryActionViewItem.ts index df101e1b3e26a..a2bef9bc1df1a 100644 --- a/src/vs/platform/actions/browser/menuEntryActionViewItem.ts +++ b/src/vs/platform/actions/browser/menuEntryActionViewItem.ts @@ -27,8 +27,9 @@ import { IThemeService, ThemeIcon } from 'vs/platform/theme/common/themeService' 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 { attachSelectBoxStyler, attachStylerCallback } from 'vs/platform/theme/common/styler'; +import { attachStylerCallback } from 'vs/platform/theme/common/styler'; import { 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 { const groups = menu.getActions(options); @@ -473,8 +474,7 @@ class SubmenuEntrySelectActionViewItem extends SelectActionViewItem { super(null, action, action.actions.map(a => ({ text: a.id === Separator.ID ? '\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500' : a.label, isDisabled: !a.enabled, - })), 0, contextViewService, { ariaLabel: action.tooltip, optionsAsChildren: true }); - this._register(attachSelectBoxStyler(this.selectBox, themeService)); + })), 0, contextViewService, defaultSelectBoxStyles, { ariaLabel: action.tooltip, optionsAsChildren: true }); this.select(Math.max(0, action.actions.findIndex(a => a.checked))); } diff --git a/src/vs/platform/list/browser/listService.ts b/src/vs/platform/list/browser/listService.ts index 95467136e67e1..b0980c0587d3d 100644 --- a/src/vs/platform/list/browser/listService.ts +++ b/src/vs/platform/list/browser/listService.ts @@ -7,7 +7,7 @@ import { createStyleSheet } from 'vs/base/browser/dom'; import { IContextViewProvider } from 'vs/base/browser/ui/contextview/contextview'; import { IListMouseEvent, IListRenderer, IListTouchEvent, IListVirtualDelegate } from 'vs/base/browser/ui/list/list'; import { IPagedListOptions, IPagedRenderer, PagedList } from 'vs/base/browser/ui/list/listPaging'; -import { DefaultStyleController, IKeyboardNavigationEventFilter, IListAccessibilityProvider, IListOptions, IListOptionsUpdate, IMultipleSelectionController, isSelectionRangeChangeEvent, isSelectionSingleChangeEvent, List, TypeNavigationMode } from 'vs/base/browser/ui/list/listWidget'; +import { DefaultStyleController, IKeyboardNavigationEventFilter, IListAccessibilityProvider, IListOptions, IListOptionsUpdate, IListStyles, IMultipleSelectionController, isSelectionRangeChangeEvent, isSelectionSingleChangeEvent, List, TypeNavigationMode } from 'vs/base/browser/ui/list/listWidget'; import { ITableColumn, ITableRenderer, ITableVirtualDelegate } from 'vs/base/browser/ui/table/table'; import { ITableOptions, ITableOptionsUpdate, Table } from 'vs/base/browser/ui/table/tableWidget'; import { TreeFindMode, IAbstractTreeOptions, IAbstractTreeOptionsUpdate, RenderIndentGuides } from 'vs/base/browser/ui/tree/abstractTree'; @@ -27,9 +27,7 @@ import { IEditorOptions } from 'vs/platform/editor/common/editor'; import { createDecorator, IInstantiationService, ServicesAccessor } from 'vs/platform/instantiation/common/instantiation'; import { IKeybindingService } from 'vs/platform/keybinding/common/keybinding'; import { Registry } from 'vs/platform/registry/common/platform'; -import { defaultFindWidgetStyles } from 'vs/platform/theme/browser/defaultStyles'; -import { attachListStyler, computeStyles, defaultListStyles, IColorMapping } from 'vs/platform/theme/common/styler'; -import { IThemeService } from 'vs/platform/theme/common/themeService'; +import { IStyleOverride, defaultFindWidgetStyles, defaultListStyles, getListStyles } from 'vs/platform/theme/browser/defaultStyles'; export type ListWidget = List | PagedList | ObjectTree | DataTree | AsyncDataTree | Table; export type WorkbenchListWidget = WorkbenchList | WorkbenchPagedList | WorkbenchObjectTree | WorkbenchCompressibleObjectTree | WorkbenchDataTree | WorkbenchAsyncDataTree | WorkbenchCompressibleAsyncDataTree | WorkbenchTable; @@ -64,7 +62,7 @@ export class ListService implements IListService { return this._lastFocusedWidget; } - constructor(@IThemeService private readonly _themeService: IThemeService) { } + constructor() { } private setLastFocusedList(widget: WorkbenchListWidget | undefined): void { if (widget === this._lastFocusedWidget) { @@ -81,7 +79,7 @@ export class ListService implements IListService { this._hasCreatedStyleController = true; // create a shared default tree style sheet for performance reasons const styleController = new DefaultStyleController(createStyleSheet(), ''); - this.disposables.add(attachListStyler(styleController, this._themeService)); + styleController.style(defaultListStyles); } if (this.lists.some(l => l.widget === widget)) { @@ -211,7 +209,7 @@ function toWorkbenchListOptions( } export interface IWorkbenchListOptionsUpdate extends IListOptionsUpdate { - readonly overrideStyles?: IColorMapping; + readonly overrideStyles?: IStyleOverride; } export interface IWorkbenchListOptions extends IWorkbenchListOptionsUpdate, IResourceNavigatorOptions, IListOptions { @@ -221,13 +219,11 @@ export interface IWorkbenchListOptions extends IWorkbenchListOptionsUpdate, I export class WorkbenchList extends List { readonly contextKeyService: IContextKeyService; - private readonly themeService: IThemeService; private listSupportsMultiSelect: IContextKey; private listHasSelectionOrFocus: IContextKey; private listDoubleSelection: IContextKey; private listMultiSelection: IContextKey; private horizontalScrolling: boolean | undefined; - private _styler: IDisposable | undefined; private _useAltAsMultipleSelectionModifier: boolean; private navigator: ListResourceNavigator; get onDidOpen(): Event> { return this.navigator.onDidOpen; } @@ -240,7 +236,6 @@ export class WorkbenchList extends List { options: IWorkbenchListOptions, @IContextKeyService contextKeyService: IContextKeyService, @IListService listService: IListService, - @IThemeService themeService: IThemeService, @IConfigurationService configurationService: IConfigurationService, @IInstantiationService instantiationService: IInstantiationService ) { @@ -250,16 +245,15 @@ export class WorkbenchList extends List { super(user, container, delegate, renderers, { keyboardSupport: false, - ...computeStyles(themeService.getColorTheme(), defaultListStyles), + listStyles: defaultListStyles, ...workbenchListOptions, - horizontalScrolling + horizontalScrolling, } ); this.disposables.add(workbenchListOptionsDisposable); this.contextKeyService = createScopedContextKeyService(contextKeyService, this); - this.themeService = themeService; this.listSupportsMultiSelect = WorkbenchListSupportsMultiSelectContextKey.bindTo(this.contextKeyService); this.listSupportsMultiSelect.set(options.multipleSelectionSupport !== false); @@ -341,19 +335,13 @@ export class WorkbenchList extends List { } } - private updateStyles(styles: IColorMapping): void { - this._styler?.dispose(); - this._styler = attachListStyler(this, this.themeService, styles); + private updateStyles(styles: IStyleOverride): void { + this.style(getListStyles(styles)); } get useAltAsMultipleSelectionModifier(): boolean { return this._useAltAsMultipleSelectionModifier; } - - override dispose(): void { - this._styler?.dispose(); - super.dispose(); - } } export interface IWorkbenchPagedListOptions extends IWorkbenchListOptionsUpdate, IResourceNavigatorOptions, IPagedListOptions { @@ -363,12 +351,10 @@ export interface IWorkbenchPagedListOptions extends IWorkbenchListOptionsUpda export class WorkbenchPagedList extends PagedList { readonly contextKeyService: IContextKeyService; - private readonly themeService: IThemeService; private readonly disposables: DisposableStore; private listSupportsMultiSelect: IContextKey; private _useAltAsMultipleSelectionModifier: boolean; private horizontalScrolling: boolean | undefined; - private _styler: IDisposable | undefined; private navigator: ListResourceNavigator; get onDidOpen(): Event> { return this.navigator.onDidOpen; } @@ -380,7 +366,6 @@ export class WorkbenchPagedList extends PagedList { options: IWorkbenchPagedListOptions, @IContextKeyService contextKeyService: IContextKeyService, @IListService listService: IListService, - @IThemeService themeService: IThemeService, @IConfigurationService configurationService: IConfigurationService, @IInstantiationService instantiationService: IInstantiationService ) { @@ -389,9 +374,9 @@ export class WorkbenchPagedList extends PagedList { super(user, container, delegate, renderers, { keyboardSupport: false, - ...computeStyles(themeService.getColorTheme(), defaultListStyles), + listStyles: defaultListStyles, ...workbenchListOptions, - horizontalScrolling + horizontalScrolling, } ); @@ -399,7 +384,6 @@ export class WorkbenchPagedList extends PagedList { this.disposables.add(workbenchListOptionsDisposable); this.contextKeyService = createScopedContextKeyService(contextKeyService, this); - this.themeService = themeService; this.horizontalScrolling = options.horizontalScrolling; @@ -418,10 +402,6 @@ export class WorkbenchPagedList extends PagedList { this.updateStyles(options.overrideStyles); } - if (options.overrideStyles) { - this.disposables.add(attachListStyler(this, themeService, options.overrideStyles)); - } - this.disposables.add(configurationService.onDidChangeConfiguration(e => { if (e.affectsConfiguration(multiSelectModifierSettingKey)) { this._useAltAsMultipleSelectionModifier = useAltAsMultipleSelectionModifier(configurationService); @@ -466,9 +446,8 @@ export class WorkbenchPagedList extends PagedList { } } - private updateStyles(styles: IColorMapping): void { - this._styler?.dispose(); - this._styler = attachListStyler(this, this.themeService, styles); + private updateStyles(styles: IStyleOverride): void { + this.style(getListStyles(styles)); } get useAltAsMultipleSelectionModifier(): boolean { @@ -476,14 +455,13 @@ export class WorkbenchPagedList extends PagedList { } override dispose(): void { - this._styler?.dispose(); this.disposables.dispose(); super.dispose(); } } export interface IWorkbenchTableOptionsUpdate extends ITableOptionsUpdate { - readonly overrideStyles?: IColorMapping; + readonly overrideStyles?: IStyleOverride; } export interface IWorkbenchTableOptions extends IWorkbenchTableOptionsUpdate, IResourceNavigatorOptions, ITableOptions { @@ -493,13 +471,11 @@ export interface IWorkbenchTableOptions extends IWorkbenchTableOptionsUpdate, export class WorkbenchTable extends Table { readonly contextKeyService: IContextKeyService; - private readonly themeService: IThemeService; private listSupportsMultiSelect: IContextKey; private listHasSelectionOrFocus: IContextKey; private listDoubleSelection: IContextKey; private listMultiSelection: IContextKey; private horizontalScrolling: boolean | undefined; - private _styler: IDisposable | undefined; private _useAltAsMultipleSelectionModifier: boolean; private navigator: TableResourceNavigator; get onDidOpen(): Event> { return this.navigator.onDidOpen; } @@ -513,7 +489,6 @@ export class WorkbenchTable extends Table { options: IWorkbenchTableOptions, @IContextKeyService contextKeyService: IContextKeyService, @IListService listService: IListService, - @IThemeService themeService: IThemeService, @IConfigurationService configurationService: IConfigurationService, @IInstantiationService instantiationService: IInstantiationService ) { @@ -523,16 +498,15 @@ export class WorkbenchTable extends Table { super(user, container, delegate, columns, renderers, { keyboardSupport: false, - ...computeStyles(themeService.getColorTheme(), defaultListStyles), + listStyles: defaultListStyles, ...workbenchListOptions, - horizontalScrolling + horizontalScrolling, } ); this.disposables.add(workbenchListOptionsDisposable); this.contextKeyService = createScopedContextKeyService(contextKeyService, this); - this.themeService = themeService; this.listSupportsMultiSelect = WorkbenchListSupportsMultiSelectContextKey.bindTo(this.contextKeyService); this.listSupportsMultiSelect.set(options.multipleSelectionSupport !== false); @@ -614,9 +588,8 @@ export class WorkbenchTable extends Table { } } - private updateStyles(styles: IColorMapping): void { - this._styler?.dispose(); - this._styler = attachListStyler(this, this.themeService, styles); + private updateStyles(styles: IStyleOverride): void { + this.style(getListStyles(styles)); } get useAltAsMultipleSelectionModifier(): boolean { @@ -624,7 +597,6 @@ export class WorkbenchTable extends Table { } override dispose(): void { - this._styler?.dispose(); this.disposables.dispose(); super.dispose(); } @@ -840,7 +812,7 @@ function createKeyboardNavigationEventFilter(keybindingService: IKeybindingServi export interface IWorkbenchObjectTreeOptions extends IObjectTreeOptions, IResourceNavigatorOptions { readonly accessibilityProvider: IListAccessibilityProvider; - readonly overrideStyles?: IColorMapping; + readonly overrideStyles?: IStyleOverride; readonly selectionNavigation?: boolean; } @@ -860,13 +832,12 @@ export class WorkbenchObjectTree, TFilterData = void> @IInstantiationService instantiationService: IInstantiationService, @IContextKeyService contextKeyService: IContextKeyService, @IListService listService: IListService, - @IThemeService themeService: IThemeService, @IConfigurationService configurationService: IConfigurationService ) { const { options: treeOptions, getTypeNavigationMode, disposable } = instantiationService.invokeFunction(workbenchTreeDataPreamble, options as any); super(user, container, delegate, renderers, treeOptions); this.disposables.add(disposable); - this.internals = new WorkbenchTreeInternals(this, options, getTypeNavigationMode, options.overrideStyles, contextKeyService, listService, themeService, configurationService); + this.internals = new WorkbenchTreeInternals(this, options, getTypeNavigationMode, options.overrideStyles, contextKeyService, listService, configurationService); this.disposables.add(this.internals); } @@ -877,7 +848,7 @@ export class WorkbenchObjectTree, TFilterData = void> } export interface IWorkbenchCompressibleObjectTreeOptionsUpdate extends ICompressibleObjectTreeOptionsUpdate { - readonly overrideStyles?: IColorMapping; + readonly overrideStyles?: IStyleOverride; } export interface IWorkbenchCompressibleObjectTreeOptions extends IWorkbenchCompressibleObjectTreeOptionsUpdate, ICompressibleObjectTreeOptions, IResourceNavigatorOptions { @@ -901,13 +872,12 @@ export class WorkbenchCompressibleObjectTree, TFilter @IInstantiationService instantiationService: IInstantiationService, @IContextKeyService contextKeyService: IContextKeyService, @IListService listService: IListService, - @IThemeService themeService: IThemeService, @IConfigurationService configurationService: IConfigurationService ) { const { options: treeOptions, getTypeNavigationMode, disposable } = instantiationService.invokeFunction(workbenchTreeDataPreamble, options as any); super(user, container, delegate, renderers, treeOptions); this.disposables.add(disposable); - this.internals = new WorkbenchTreeInternals(this, options, getTypeNavigationMode, options.overrideStyles, contextKeyService, listService, themeService, configurationService); + this.internals = new WorkbenchTreeInternals(this, options, getTypeNavigationMode, options.overrideStyles, contextKeyService, listService, configurationService); this.disposables.add(this.internals); } @@ -923,7 +893,7 @@ export class WorkbenchCompressibleObjectTree, TFilter } export interface IWorkbenchDataTreeOptionsUpdate extends IAbstractTreeOptionsUpdate { - readonly overrideStyles?: IColorMapping; + readonly overrideStyles?: IStyleOverride; } export interface IWorkbenchDataTreeOptions extends IWorkbenchDataTreeOptionsUpdate, IDataTreeOptions, IResourceNavigatorOptions { @@ -948,13 +918,12 @@ export class WorkbenchDataTree extends DataTree extends DataTree; } export interface IWorkbenchAsyncDataTreeOptions extends IWorkbenchAsyncDataTreeOptionsUpdate, IAsyncDataTreeOptions, IResourceNavigatorOptions { @@ -995,13 +964,12 @@ export class WorkbenchAsyncDataTree extends Async @IInstantiationService instantiationService: IInstantiationService, @IContextKeyService contextKeyService: IContextKeyService, @IListService listService: IListService, - @IThemeService themeService: IThemeService, @IConfigurationService configurationService: IConfigurationService ) { const { options: treeOptions, getTypeNavigationMode, disposable } = instantiationService.invokeFunction(workbenchTreeDataPreamble, options as any); super(user, container, delegate, renderers, dataSource, treeOptions); this.disposables.add(disposable); - this.internals = new WorkbenchTreeInternals(this, options, getTypeNavigationMode, options.overrideStyles, contextKeyService, listService, themeService, configurationService); + this.internals = new WorkbenchTreeInternals(this, options, getTypeNavigationMode, options.overrideStyles, contextKeyService, listService, configurationService); this.disposables.add(this.internals); } @@ -1018,7 +986,7 @@ export class WorkbenchAsyncDataTree extends Async export interface IWorkbenchCompressibleAsyncDataTreeOptions extends ICompressibleAsyncDataTreeOptions, IResourceNavigatorOptions { readonly accessibilityProvider: IListAccessibilityProvider; - readonly overrideStyles?: IColorMapping; + readonly overrideStyles?: IStyleOverride; readonly selectionNavigation?: boolean; } @@ -1040,13 +1008,12 @@ export class WorkbenchCompressibleAsyncDataTree e @IInstantiationService instantiationService: IInstantiationService, @IContextKeyService contextKeyService: IContextKeyService, @IListService listService: IListService, - @IThemeService themeService: IThemeService, @IConfigurationService configurationService: IConfigurationService ) { const { options: treeOptions, getTypeNavigationMode, disposable } = instantiationService.invokeFunction(workbenchTreeDataPreamble, options as any); super(user, container, virtualDelegate, compressionDelegate, renderers, dataSource, treeOptions); this.disposables.add(disposable); - this.internals = new WorkbenchTreeInternals(this, options, getTypeNavigationMode, options.overrideStyles, contextKeyService, listService, themeService, configurationService); + this.internals = new WorkbenchTreeInternals(this, options, getTypeNavigationMode, options.overrideStyles, contextKeyService, listService, configurationService); this.disposables.add(this.internals); } @@ -1149,7 +1116,7 @@ class WorkbenchTreeInternals { private treeFindOpen: IContextKey; private _useAltAsMultipleSelectionModifier: boolean; private disposables: IDisposable[] = []; - private styler: IDisposable | undefined; + private navigator: TreeResourceNavigator; get onDidOpen(): Event> { return this.navigator.onDidOpen; } @@ -1158,10 +1125,9 @@ class WorkbenchTreeInternals { private tree: WorkbenchObjectTree | WorkbenchCompressibleObjectTree | WorkbenchDataTree | WorkbenchAsyncDataTree | WorkbenchCompressibleAsyncDataTree, options: IWorkbenchObjectTreeOptions | IWorkbenchCompressibleObjectTreeOptions | IWorkbenchDataTreeOptions | IWorkbenchAsyncDataTreeOptions | IWorkbenchCompressibleAsyncDataTreeOptions, getTypeNavigationMode: () => TypeNavigationMode | undefined, - overrideStyles: IColorMapping | undefined, + overrideStyles: IStyleOverride | undefined, @IContextKeyService contextKeyService: IContextKeyService, @IListService listService: IListService, - @IThemeService private themeService: IThemeService, @IConfigurationService configurationService: IConfigurationService ) { this.contextKeyService = createScopedContextKeyService(contextKeyService, tree); @@ -1291,15 +1257,12 @@ class WorkbenchTreeInternals { } } - updateStyleOverrides(overrideStyles?: IColorMapping): void { - dispose(this.styler); - this.styler = attachListStyler(this.tree, this.themeService, overrideStyles); + updateStyleOverrides(overrideStyles?: IStyleOverride): void { + this.tree.style(overrideStyles ? getListStyles(overrideStyles) : defaultListStyles); } dispose(): void { this.disposables = dispose(this.disposables); - dispose(this.styler); - this.styler = undefined; } } diff --git a/src/vs/platform/quickinput/browser/quickInput.ts b/src/vs/platform/quickinput/browser/quickInput.ts index 83d992a2ddf2d..06bba1f59d720 100644 --- a/src/vs/platform/quickinput/browser/quickInput.ts +++ b/src/vs/platform/quickinput/browser/quickInput.ts @@ -16,8 +16,8 @@ import { IWorkbenchListOptions, WorkbenchList } from 'vs/platform/list/browser/l import { QuickAccessController } from 'vs/platform/quickinput/browser/quickAccess'; import { IQuickAccessController } from 'vs/platform/quickinput/common/quickAccess'; import { IInputBox, IInputOptions, IKeyMods, IPickOptions, IQuickInputButton, IQuickInputService, IQuickNavigateConfiguration, IQuickPick, IQuickPickItem, QuickPickInput } from 'vs/platform/quickinput/common/quickInput'; -import { defaultButtonStyles, defaultCountBadgeStyles, defaultInputBoxStyles, defaultKeybindingLabelStyles, defaultProgressBarStyles, defaultToggleStyles } from 'vs/platform/theme/browser/defaultStyles'; -import { activeContrastBorder, pickerGroupBorder, pickerGroupForeground, quickInputBackground, quickInputForeground, quickInputListFocusBackground, quickInputListFocusForeground, quickInputListFocusIconForeground, quickInputTitleBackground, widgetBorder, widgetShadow } from 'vs/platform/theme/common/colorRegistry'; +import { defaultButtonStyles, defaultCountBadgeStyles, defaultInputBoxStyles, defaultKeybindingLabelStyles, defaultProgressBarStyles, defaultToggleStyles, getListStyles } from 'vs/platform/theme/browser/defaultStyles'; +import { activeContrastBorder, asCssValue, pickerGroupBorder, pickerGroupForeground, quickInputBackground, quickInputForeground, quickInputListFocusBackground, quickInputListFocusForeground, quickInputListFocusIconForeground, quickInputTitleBackground, widgetBorder, widgetShadow } from 'vs/platform/theme/common/colorRegistry'; import { computeStyles } from 'vs/platform/theme/common/styler'; import { IThemeService, Themable } from 'vs/platform/theme/common/themeService'; @@ -200,7 +200,7 @@ export class QuickInputService extends Themable implements IQuickInputService { button: defaultButtonStyles, progressBar: defaultProgressBarStyles, // default uses progressBarBackground keybindingLabel: defaultKeybindingLabelStyles, - list: computeStyles(this.theme, { + list: getListStyles({ listBackground: quickInputBackground, // Look like focused when inactive. listInactiveFocusForeground: quickInputListFocusForeground, @@ -208,9 +208,11 @@ export class QuickInputService extends Themable implements IQuickInputService { listInactiveFocusBackground: quickInputListFocusBackground, listFocusOutline: activeContrastBorder, listInactiveFocusOutline: activeContrastBorder, - pickerGroupBorder, - pickerGroupForeground - }) + }), + pickerGroup: { + pickerGroupBorder: asCssValue(pickerGroupBorder), + pickerGroupForeground: asCssValue(pickerGroupForeground), + } }; } } diff --git a/src/vs/platform/theme/browser/defaultStyles.ts b/src/vs/platform/theme/browser/defaultStyles.ts index 90d1c7f63d1e3..39e057430794d 100644 --- a/src/vs/platform/theme/browser/defaultStyles.ts +++ b/src/vs/platform/theme/browser/defaultStyles.ts @@ -4,7 +4,7 @@ *--------------------------------------------------------------------------------------------*/ import { IButtonStyles } from 'vs/base/browser/ui/button/button'; import { IKeybindingLabelStyles } from 'vs/base/browser/ui/keybindingLabel/keybindingLabel'; -import { ColorIdentifier, keybindingLabelBackground, keybindingLabelBorder, keybindingLabelBottomBorder, keybindingLabelForeground, asCssValue, widgetShadow, buttonForeground, buttonSeparator, buttonBackground, buttonHoverBackground, buttonSecondaryForeground, buttonSecondaryBackground, buttonSecondaryHoverBackground, buttonBorder, progressBarBackground, inputActiveOptionBorder, inputActiveOptionForeground, inputActiveOptionBackground, editorWidgetBackground, editorWidgetForeground, contrastBorder, checkboxBorder, checkboxBackground, checkboxForeground, problemsErrorIconForeground, problemsWarningIconForeground, problemsInfoIconForeground, inputBackground, inputForeground, inputBorder, textLinkForeground, inputValidationInfoBorder, inputValidationInfoBackground, inputValidationInfoForeground, inputValidationWarningBorder, inputValidationWarningBackground, inputValidationWarningForeground, inputValidationErrorBorder, inputValidationErrorBackground, inputValidationErrorForeground, listFilterWidgetBackground, listFilterWidgetNoMatchesOutline, listFilterWidgetOutline, listFilterWidgetShadow, badgeBackground, badgeForeground, breadcrumbsBackground, breadcrumbsForeground, breadcrumbsFocusForeground, breadcrumbsActiveSelectionForeground } from 'vs/platform/theme/common/colorRegistry'; +import { ColorIdentifier, keybindingLabelBackground, keybindingLabelBorder, keybindingLabelBottomBorder, keybindingLabelForeground, asCssValue, widgetShadow, buttonForeground, buttonSeparator, buttonBackground, buttonHoverBackground, buttonSecondaryForeground, buttonSecondaryBackground, buttonSecondaryHoverBackground, buttonBorder, progressBarBackground, inputActiveOptionBorder, inputActiveOptionForeground, inputActiveOptionBackground, editorWidgetBackground, editorWidgetForeground, contrastBorder, checkboxBorder, checkboxBackground, checkboxForeground, problemsErrorIconForeground, problemsWarningIconForeground, problemsInfoIconForeground, inputBackground, inputForeground, inputBorder, textLinkForeground, inputValidationInfoBorder, inputValidationInfoBackground, inputValidationInfoForeground, inputValidationWarningBorder, inputValidationWarningBackground, inputValidationWarningForeground, inputValidationErrorBorder, inputValidationErrorBackground, inputValidationErrorForeground, listFilterWidgetBackground, listFilterWidgetNoMatchesOutline, listFilterWidgetOutline, listFilterWidgetShadow, badgeBackground, badgeForeground, breadcrumbsBackground, breadcrumbsForeground, breadcrumbsFocusForeground, breadcrumbsActiveSelectionForeground, activeContrastBorder, listActiveSelectionBackground, listActiveSelectionForeground, listActiveSelectionIconForeground, listDropBackground, listFocusAndSelectionOutline, listFocusBackground, listFocusForeground, listFocusOutline, listHoverBackground, listHoverForeground, listInactiveFocusBackground, listInactiveFocusOutline, listInactiveSelectionBackground, listInactiveSelectionForeground, listInactiveSelectionIconForeground, tableColumnsBorder, tableOddRowsBackgroundColor, treeIndentGuidesStroke, asCssValueWithDefault, editorWidgetBorder, focusBorder, pickerGroupForeground, quickInputListFocusBackground, quickInputListFocusForeground, quickInputListFocusIconForeground, selectBackground, selectBorder, selectForeground, selectListBackground, treeInactiveIndentGuidesStroke } from 'vs/platform/theme/common/colorRegistry'; import { IProgressBarStyles } from 'vs/base/browser/ui/progressbar/progressbar'; import { ICheckboxStyles, IToggleStyles } from 'vs/base/browser/ui/toggle/toggle'; import { IDialogStyles } from 'vs/base/browser/ui/dialog/dialog'; @@ -12,6 +12,9 @@ import { IInputBoxStyles } from 'vs/base/browser/ui/inputbox/inputBox'; import { IFindWidgetStyles } from 'vs/base/browser/ui/tree/abstractTree'; import { ICountBadgeStyles } from 'vs/base/browser/ui/countBadge/countBadge'; import { IBreadcrumbsWidgetStyles } from 'vs/base/browser/ui/breadcrumbs/breadcrumbsWidget'; +import { IListStyles } from 'vs/base/browser/ui/list/listWidget'; +import { ISelectBoxStyles } from 'vs/base/browser/ui/selectBox/selectBox'; +import { Color } from 'vs/base/common/color'; export type IStyleOverride = { [P in keyof T]?: ColorIdentifier; @@ -135,3 +138,74 @@ export function getBreadcrumbsWidgetStyles(override: IStyleOverride): IListStyles { + return { + listBackground: override.listBackground ? asCssValue(override.listBackground) : undefined, + listInactiveFocusForeground: override.listInactiveFocusForeground ? asCssValue(override.listInactiveFocusForeground) : undefined, + listFocusBackground: asCssValue(override.listFocusBackground ?? listFocusBackground), + listFocusForeground: asCssValue(override.listFocusForeground ?? listFocusForeground), + listFocusOutline: asCssValue(override.listFocusOutline ?? listFocusOutline), + listActiveSelectionBackground: asCssValue(override.listActiveSelectionBackground ?? listActiveSelectionBackground), + listActiveSelectionForeground: asCssValue(override.listActiveSelectionForeground ?? listActiveSelectionForeground), + listActiveSelectionIconForeground: asCssValue(override.listActiveSelectionIconForeground ?? listActiveSelectionIconForeground), + listFocusAndSelectionOutline: asCssValue(override.listFocusAndSelectionOutline ?? listFocusAndSelectionOutline), + listFocusAndSelectionBackground: asCssValue(override.listFocusAndSelectionBackground ?? listActiveSelectionBackground), + listFocusAndSelectionForeground: asCssValue(override.listFocusAndSelectionForeground ?? listActiveSelectionForeground), + listInactiveSelectionBackground: asCssValue(override.listInactiveSelectionBackground ?? listInactiveSelectionBackground), + listInactiveSelectionIconForeground: asCssValue(override.listInactiveSelectionIconForeground ?? listInactiveSelectionIconForeground), + listInactiveSelectionForeground: asCssValue(override.listInactiveSelectionForeground ?? listInactiveSelectionForeground), + listInactiveFocusBackground: asCssValue(override.listInactiveFocusBackground ?? listInactiveFocusBackground), + listInactiveFocusOutline: asCssValue(override.listInactiveFocusOutline ?? listInactiveFocusOutline), + listHoverBackground: asCssValue(override.listHoverBackground ?? listHoverBackground), + listHoverForeground: asCssValue(override.listHoverForeground ?? listHoverForeground), + listDropBackground: asCssValue(override.listDropBackground ?? listDropBackground), + listSelectionOutline: asCssValue(override.listSelectionOutline ?? activeContrastBorder), + listHoverOutline: asCssValue(override.listHoverOutline ?? activeContrastBorder), + treeIndentGuidesStroke: asCssValue(override.treeIndentGuidesStroke ?? treeIndentGuidesStroke), + treeInactiveIndentGuidesStroke: asCssValue(override.treeInactiveIndentGuidesStroke ?? treeInactiveIndentGuidesStroke), + tableColumnsBorder: asCssValue(override.tableColumnsBorder ?? tableColumnsBorder), + tableOddRowsBackgroundColor: asCssValue(override.tableOddRowsBackgroundColor ?? tableOddRowsBackgroundColor), + }; +} + +export const defaultSelectBoxStyles = getSelectBoxStyles({}); + +export function getSelectBoxStyles(override: IStyleOverride): ISelectBoxStyles { + return { + selectBackground: asCssValue(override.selectBackground || selectBackground), + selectListBackground: asCssValue(override.selectListBackground || selectListBackground), + selectForeground: asCssValue(override.selectForeground || selectForeground), + decoratorRightForeground: asCssValue(override.decoratorRightForeground || pickerGroupForeground), + selectBorder: asCssValue(override.selectBorder || selectBorder), + focusBorder: asCssValue(override.focusBorder || focusBorder), + listFocusBackground: asCssValue(override.listFocusBackground || quickInputListFocusBackground), + listInactiveSelectionIconForeground: asCssValue(override.listInactiveSelectionIconForeground || quickInputListFocusIconForeground), + listFocusForeground: asCssValue(override.listFocusForeground || quickInputListFocusForeground), + listFocusOutline: asCssValueWithDefault(override.listFocusOutline ?? activeContrastBorder, Color.transparent.toString()), + listHoverBackground: asCssValue(override.listHoverBackground || listHoverBackground), + listHoverForeground: asCssValue(override.listHoverForeground || listHoverForeground), + listHoverOutline: asCssValue(override.listFocusOutline || activeContrastBorder), + selectListBorder: asCssValue(override.selectListBorder || editorWidgetBorder), + listBackground: undefined, + listActiveSelectionBackground: undefined, + listActiveSelectionForeground: undefined, + listActiveSelectionIconForeground: undefined, + listFocusAndSelectionBackground: undefined, + listDropBackground: undefined, + listInactiveSelectionBackground: undefined, + listInactiveSelectionForeground: undefined, + listInactiveFocusBackground: undefined, + listInactiveFocusOutline: undefined, + listSelectionOutline: undefined, + listFocusAndSelectionForeground: undefined, + listFocusAndSelectionOutline: undefined, + listInactiveFocusForeground: undefined, + tableColumnsBorder: undefined, + tableOddRowsBackgroundColor: undefined, + treeIndentGuidesStroke: undefined, + treeInactiveIndentGuidesStroke: undefined, + }; +} diff --git a/src/vs/platform/theme/common/colorRegistry.ts b/src/vs/platform/theme/common/colorRegistry.ts index e6a1dd85d1590..e2e2b417aa119 100644 --- a/src/vs/platform/theme/common/colorRegistry.ts +++ b/src/vs/platform/theme/common/colorRegistry.ts @@ -39,6 +39,10 @@ export function asCssValue(color: ColorIdentifier): string { return `var(${asCssVariableName(color)})`; } +export function asCssValueWithDefault(color: ColorIdentifier, defaultValue: string): string { + return `var(${asCssVariableName(color)}, ${defaultValue})`; +} + export const enum ColorTransformType { Darken, Lighten, @@ -455,6 +459,7 @@ export const listFilterWidgetShadow = registerColor('listFilterWidget.shadow', { export const listFilterMatchHighlight = registerColor('list.filterMatchBackground', { dark: editorFindMatchHighlight, light: editorFindMatchHighlight, hcDark: null, hcLight: null }, nls.localize('listFilterMatchHighlight', 'Background color of the filtered match.')); export const listFilterMatchHighlightBorder = registerColor('list.filterMatchBorder', { dark: editorFindMatchHighlightBorder, light: editorFindMatchHighlightBorder, hcDark: contrastBorder, hcLight: activeContrastBorder }, nls.localize('listFilterMatchHighlightBorder', 'Border color of the filtered match.')); export const treeIndentGuidesStroke = registerColor('tree.indentGuidesStroke', { dark: '#585858', light: '#a9a9a9', hcDark: '#a9a9a9', hcLight: '#a5a5a5' }, nls.localize('treeIndentGuidesStroke', "Tree stroke color for the indentation guides.")); +export const treeInactiveIndentGuidesStroke = registerColor('tree.inactiveIndentGuidesStroke', { dark: transparent(treeIndentGuidesStroke, 0.4), light: transparent(treeIndentGuidesStroke, 0.4), hcDark: transparent(treeIndentGuidesStroke, 0.4), hcLight: transparent(treeIndentGuidesStroke, 0.4) }, nls.localize('treeInactiveIndentGuidesStroke', "Tree stroke color for the indentation guides that are not active.")); export const tableColumnsBorder = registerColor('tree.tableColumnsBorder', { dark: '#CCCCCC20', light: '#61616120', hcDark: null, hcLight: null }, nls.localize('tableColumnsBorder', "Table border color between columns.")); export const tableOddRowsBackgroundColor = registerColor('tree.tableOddRowsBackground', { dark: transparent(foreground, 0.04), light: transparent(foreground, 0.04), hcDark: null, hcLight: null }, nls.localize('tableOddRowsBackgroundColor', "Background color for odd table rows.")); export const listDeemphasizedForeground = registerColor('list.deemphasizedForeground', { dark: '#8C8C8C', light: '#8E8E90', hcDark: '#A7A8A9', hcLight: '#666666' }, nls.localize('listDeemphasizedForeground', "List/Tree foreground color for items that are deemphasized. ")); diff --git a/src/vs/platform/theme/common/styler.ts b/src/vs/platform/theme/common/styler.ts index 610d4e7c9b895..ac1a188e18b40 100644 --- a/src/vs/platform/theme/common/styler.ts +++ b/src/vs/platform/theme/common/styler.ts @@ -7,19 +7,12 @@ import { Color } from 'vs/base/common/color'; import { IDisposable } from 'vs/base/common/lifecycle'; import { IThemable, styleFn } from 'vs/base/common/styler'; import { - activeContrastBorder, - ColorIdentifier, ColorValue, editorWidgetBorder, focusBorder, inputActiveOptionBackground, inputActiveOptionBorder, inputActiveOptionForeground, - inputBackground, inputBorder, inputForeground, inputValidationErrorBackground, inputValidationErrorBorder, inputValidationErrorForeground, inputValidationInfoBackground, - inputValidationInfoBorder, inputValidationInfoForeground, inputValidationWarningBackground, inputValidationWarningBorder, inputValidationWarningForeground, - listActiveSelectionBackground, listActiveSelectionForeground, listActiveSelectionIconForeground, listDropBackground, - listFocusBackground, listFocusForeground, listFocusOutline, listHoverBackground, listHoverForeground, - listInactiveFocusBackground, listInactiveFocusOutline, listInactiveSelectionBackground, listInactiveSelectionForeground, listInactiveSelectionIconForeground, - menuBackground, menuBorder, menuForeground, menuSelectionBackground, menuSelectionBorder, menuSelectionForeground, menuSeparatorBackground, pickerGroupForeground, - quickInputListFocusBackground, quickInputListFocusForeground, quickInputListFocusIconForeground, resolveColorValue, scrollbarShadow, scrollbarSliderActiveBackground, - scrollbarSliderBackground, scrollbarSliderHoverBackground, selectBackground, selectBorder, selectForeground, selectListBackground, tableColumnsBorder, tableOddRowsBackgroundColor, - treeIndentGuidesStroke, widgetShadow, listFocusAndSelectionOutline + ColorIdentifier, ColorValue, + menuBackground, menuBorder, menuForeground, menuSelectionBackground, menuSelectionBorder, menuSelectionForeground, menuSeparatorBackground, + resolveColorValue, scrollbarShadow, scrollbarSliderActiveBackground, + scrollbarSliderBackground, scrollbarSliderHoverBackground, + widgetShadow } from 'vs/platform/theme/common/colorRegistry'; -import { isHighContrast } from 'vs/platform/theme/common/theme'; import { IColorTheme, IThemeService } from 'vs/platform/theme/common/themeService'; export interface IStyleOverrides { @@ -62,104 +55,6 @@ export function attachStyler(themeService: IThemeServic return themeService.onDidColorThemeChange(applyStyles); } -export interface ISelectBoxStyleOverrides extends IStyleOverrides, IListStyleOverrides { - selectBackground?: ColorIdentifier; - selectListBackground?: ColorIdentifier; - selectForeground?: ColorIdentifier; - decoratorRightForeground?: ColorIdentifier; - selectBorder?: ColorIdentifier; - focusBorder?: ColorIdentifier; -} - -export function attachSelectBoxStyler(widget: IThemable, themeService: IThemeService, style?: ISelectBoxStyleOverrides): IDisposable { - return attachStyler(themeService, { - selectBackground: style?.selectBackground || selectBackground, - selectListBackground: style?.selectListBackground || selectListBackground, - selectForeground: style?.selectForeground || selectForeground, - decoratorRightForeground: style?.pickerGroupForeground || pickerGroupForeground, - selectBorder: style?.selectBorder || selectBorder, - focusBorder: style?.focusBorder || focusBorder, - listFocusBackground: style?.listFocusBackground || quickInputListFocusBackground, - listInactiveSelectionIconForeground: style?.listInactiveSelectionIconForeground || quickInputListFocusIconForeground, - listFocusForeground: style?.listFocusForeground || quickInputListFocusForeground, - listFocusOutline: style?.listFocusOutline || ((theme: IColorTheme) => isHighContrast(theme.type) ? activeContrastBorder : Color.transparent), - listHoverBackground: style?.listHoverBackground || listHoverBackground, - listHoverForeground: style?.listHoverForeground || listHoverForeground, - listHoverOutline: style?.listFocusOutline || activeContrastBorder, - selectListBorder: style?.selectListBorder || editorWidgetBorder - } as ISelectBoxStyleOverrides, widget); -} - -export interface IListStyleOverrides extends IStyleOverrides { - listBackground?: ColorIdentifier; - listFocusBackground?: ColorIdentifier; - listFocusForeground?: ColorIdentifier; - listFocusOutline?: ColorIdentifier; - listActiveSelectionBackground?: ColorIdentifier; - listActiveSelectionForeground?: ColorIdentifier; - listActiveSelectionIconForeground?: ColorIdentifier; - listFocusAndSelectionOutline?: ColorIdentifier; - listFocusAndSelectionBackground?: ColorIdentifier; - listFocusAndSelectionForeground?: ColorIdentifier; - listInactiveSelectionBackground?: ColorIdentifier; - listInactiveSelectionIconForeground?: ColorIdentifier; - listInactiveSelectionForeground?: ColorIdentifier; - listInactiveFocusBackground?: ColorIdentifier; - listInactiveFocusOutline?: ColorIdentifier; - listHoverBackground?: ColorIdentifier; - listHoverForeground?: ColorIdentifier; - listDropBackground?: ColorIdentifier; - listSelectionOutline?: ColorIdentifier; - listHoverOutline?: ColorIdentifier; - treeIndentGuidesStroke?: ColorIdentifier; - tableColumnsBorder?: ColorIdentifier; - tableOddRowsBackgroundColor?: ColorIdentifier; -} - -export function attachListStyler(widget: IThemable, themeService: IThemeService, overrides?: IColorMapping): IDisposable { - return attachStyler(themeService, { ...defaultListStyles, ...(overrides || {}) }, widget); -} - -export const defaultListStyles: IColorMapping = { - listFocusBackground, - listFocusForeground, - listFocusOutline, - listActiveSelectionBackground, - listActiveSelectionForeground, - listActiveSelectionIconForeground, - listFocusAndSelectionOutline, - listFocusAndSelectionBackground: listActiveSelectionBackground, - listFocusAndSelectionForeground: listActiveSelectionForeground, - listInactiveSelectionBackground, - listInactiveSelectionIconForeground, - listInactiveSelectionForeground, - listInactiveFocusBackground, - listInactiveFocusOutline, - listHoverBackground, - listHoverForeground, - listDropBackground, - listSelectionOutline: activeContrastBorder, - listHoverOutline: activeContrastBorder, - treeIndentGuidesStroke, - tableColumnsBorder, - tableOddRowsBackgroundColor, - inputActiveOptionBorder, - inputActiveOptionForeground, - inputActiveOptionBackground, - inputBackground, - inputForeground, - inputBorder, - inputValidationInfoBackground, - inputValidationInfoForeground, - inputValidationInfoBorder, - inputValidationWarningBackground, - inputValidationWarningForeground, - inputValidationWarningBorder, - inputValidationErrorBackground, - inputValidationErrorForeground, - inputValidationErrorBorder, -}; - export function attachStylerCallback(themeService: IThemeService, colors: { [name: string]: ColorIdentifier }, callback: styleFn): IDisposable { return attachStyler(themeService, colors, callback); } diff --git a/src/vs/workbench/contrib/comments/browser/commentsTreeViewer.ts b/src/vs/workbench/contrib/comments/browser/commentsTreeViewer.ts index a6222c2da7291..82b9cebe527d8 100644 --- a/src/vs/workbench/contrib/comments/browser/commentsTreeViewer.ts +++ b/src/vs/workbench/contrib/comments/browser/commentsTreeViewer.ts @@ -17,7 +17,6 @@ import { IContextKeyService } from 'vs/platform/contextkey/common/contextkey'; import { WorkbenchAsyncDataTree, IListService, IWorkbenchAsyncDataTreeOptions } from 'vs/platform/list/browser/listService'; import { IColorTheme, IThemeService, ThemeIcon } from 'vs/platform/theme/common/themeService'; import { IInstantiationService } from 'vs/platform/instantiation/common/instantiation'; -import { IColorMapping } from 'vs/platform/theme/common/styler'; import { TimestampWidget } from 'vs/workbench/contrib/comments/browser/timestamp'; import { Codicon } from 'vs/base/common/codicons'; import { IMarkdownString } from 'vs/base/common/htmlContent'; @@ -28,6 +27,8 @@ import { IMatch } from 'vs/base/common/filters'; import { FilterOptions } from 'vs/workbench/contrib/comments/browser/commentsFilterOptions'; import { basename } from 'vs/base/common/resources'; import { openLinkFromMarkdown } from 'vs/editor/contrib/markdownRenderer/browser/markdownRenderer'; +import { IStyleOverride } from 'vs/platform/theme/browser/defaultStyles'; +import { IListStyles } from 'vs/base/browser/ui/list/listWidget'; export const COMMENTS_VIEW_ID = 'workbench.panel.comments'; export const COMMENTS_VIEW_STORAGE_ID = 'Comments'; @@ -251,7 +252,7 @@ export class CommentNodeRenderer implements IListRenderer } export interface ICommentsListOptions extends IWorkbenchAsyncDataTreeOptions { - overrideStyles?: IColorMapping; + overrideStyles?: IStyleOverride; } const enum FilterDataType { @@ -397,7 +398,6 @@ export class CommentsList extends WorkbenchAsyncDataTree('privateBreakpointWidgetService'); @@ -185,8 +185,7 @@ export class BreakpointWidget extends ZoneWidget implements IPrivateBreakpointWi protected _fillContainer(container: HTMLElement): void { this.setCssClass('breakpoint-widget'); - const selectBox = new SelectBox([{ text: nls.localize('expression', "Expression") }, { text: nls.localize('hitCount', "Hit Count") }, { text: nls.localize('logMessage', "Log Message") }], this.context, this.contextViewService, undefined, { ariaLabel: nls.localize('breakpointType', 'Breakpoint Type') }); - this.toDispose.push(attachSelectBoxStyler(selectBox, this.themeService)); + const selectBox = new SelectBox([{ text: nls.localize('expression', "Expression") }, { text: nls.localize('hitCount', "Hit Count") }, { text: nls.localize('logMessage', "Log Message") }], this.context, this.contextViewService, defaultSelectBoxStyles, { ariaLabel: nls.localize('breakpointType', 'Breakpoint Type') }); this.selectContainer = $('.breakpoint-select-container'); selectBox.render(dom.append(container, this.selectContainer)); selectBox.onDidSelect(e => { diff --git a/src/vs/workbench/contrib/debug/browser/debugActionViewItems.ts b/src/vs/workbench/contrib/debug/browser/debugActionViewItems.ts index 7c47e71afd330..1bcaf73e04ad0 100644 --- a/src/vs/workbench/contrib/debug/browser/debugActionViewItems.ts +++ b/src/vs/workbench/contrib/debug/browser/debugActionViewItems.ts @@ -13,7 +13,7 @@ import { IConfigurationService } from 'vs/platform/configuration/common/configur import { ICommandService } from 'vs/platform/commands/common/commands'; import { IDebugService, IDebugSession, IDebugConfiguration, IConfig, ILaunch, State } from 'vs/workbench/contrib/debug/common/debug'; import { IThemeService, ThemeIcon } from 'vs/platform/theme/common/themeService'; -import { attachSelectBoxStyler, attachStylerCallback } from 'vs/platform/theme/common/styler'; +import { attachStylerCallback } from 'vs/platform/theme/common/styler'; import { selectBorder, selectBackground } from 'vs/platform/theme/common/colorRegistry'; import { IContextViewService } from 'vs/platform/contextview/browser/contextView'; import { IWorkspaceContextService, WorkbenchState } from 'vs/platform/workspace/common/workspace'; @@ -22,6 +22,7 @@ import { ADD_CONFIGURATION_ID } from 'vs/workbench/contrib/debug/browser/debugCo import { BaseActionViewItem, SelectActionViewItem } from 'vs/base/browser/ui/actionbar/actionViewItems'; import { debugStart } from 'vs/workbench/contrib/debug/browser/debugIcons'; import { IKeybindingService } from 'vs/platform/keybinding/common/keybinding'; +import { defaultSelectBoxStyles } from 'vs/platform/theme/browser/defaultStyles'; const $ = dom.$; @@ -50,10 +51,9 @@ export class StartDebugActionViewItem extends BaseActionViewItem { ) { super(context, action); this.toDispose = []; - this.selectBox = new SelectBox([], -1, contextViewService, undefined, { ariaLabel: nls.localize('debugLaunchConfigurations', 'Debug Launch Configurations') }); + this.selectBox = new SelectBox([], -1, contextViewService, defaultSelectBoxStyles, { ariaLabel: nls.localize('debugLaunchConfigurations', 'Debug Launch Configurations') }); this.selectBox.setFocusable(false); this.toDispose.push(this.selectBox); - this.toDispose.push(attachSelectBoxStyler(this.selectBox, themeService)); this.registerListeners(); } @@ -262,13 +262,10 @@ export class FocusSessionActionViewItem extends SelectActionViewItem { action: IAction, session: IDebugSession | undefined, @IDebugService protected readonly debugService: IDebugService, - @IThemeService themeService: IThemeService, @IContextViewService contextViewService: IContextViewService, @IConfigurationService private readonly configurationService: IConfigurationService ) { - super(null, action, [], -1, contextViewService, { ariaLabel: nls.localize('debugSession', 'Debug Session') }); - - this._register(attachSelectBoxStyler(this.selectBox, themeService)); + super(null, action, [], -1, contextViewService, defaultSelectBoxStyles, { ariaLabel: nls.localize('debugSession', 'Debug Session') }); this._register(this.debugService.getViewModel().onDidFocusSession(() => { const session = this.getSelectedSession(); diff --git a/src/vs/workbench/contrib/debug/browser/debugViewlet.ts b/src/vs/workbench/contrib/debug/browser/debugViewlet.ts index ca8b89ac152fa..e6cd171084fff 100644 --- a/src/vs/workbench/contrib/debug/browser/debugViewlet.ts +++ b/src/vs/workbench/contrib/debug/browser/debugViewlet.ts @@ -98,7 +98,7 @@ export class DebugViewPaneContainer extends ViewPaneContainer { return this.startDebugActionViewItem; } if (action.id === FOCUS_SESSION_ID) { - return new FocusSessionActionViewItem(action, undefined, this.debugService, this.themeService, this.contextViewService, this.configurationService); + return new FocusSessionActionViewItem(action, undefined, this.debugService, this.contextViewService, this.configurationService); } if (action.id === STOP_ID || action.id === DISCONNECT_ID) { diff --git a/src/vs/workbench/contrib/extensions/browser/extensionsViewer.ts b/src/vs/workbench/contrib/extensions/browser/extensionsViewer.ts index 8ceb6a8e9eecb..cdb3698740b5e 100644 --- a/src/vs/workbench/contrib/extensions/browser/extensionsViewer.ts +++ b/src/vs/workbench/contrib/extensions/browser/extensionsViewer.ts @@ -13,19 +13,19 @@ import { IInstantiationService } from 'vs/platform/instantiation/common/instanti import { IListService, WorkbenchAsyncDataTree } from 'vs/platform/list/browser/listService'; import { IConfigurationService } from 'vs/platform/configuration/common/configuration'; import { IContextKeyService } from 'vs/platform/contextkey/common/contextkey'; -import { IThemeService, registerThemingParticipant, IColorTheme, ICssStyleCollector } from 'vs/platform/theme/common/themeService'; +import { registerThemingParticipant, IColorTheme, ICssStyleCollector } from 'vs/platform/theme/common/themeService'; import { IAsyncDataSource, ITreeNode } from 'vs/base/browser/ui/tree/tree'; import { IListVirtualDelegate, IListRenderer } from 'vs/base/browser/ui/list/list'; import { CancellationToken } from 'vs/base/common/cancellation'; import { isNonEmptyArray } from 'vs/base/common/arrays'; -import { IColorMapping } from 'vs/platform/theme/common/styler'; import { Delegate, Renderer } from 'vs/workbench/contrib/extensions/browser/extensionsList'; import { listFocusForeground, listFocusBackground, foreground, editorBackground } from 'vs/platform/theme/common/colorRegistry'; import { StandardKeyboardEvent } from 'vs/base/browser/keyboardEvent'; import { StandardMouseEvent } from 'vs/base/browser/mouseEvent'; import { KeyCode } from 'vs/base/common/keyCodes'; -import { IListAccessibilityProvider } from 'vs/base/browser/ui/list/listWidget'; +import { IListAccessibilityProvider, IListStyles } from 'vs/base/browser/ui/list/listWidget'; import { HoverPosition } from 'vs/base/browser/ui/hover/hoverWidget'; +import { IStyleOverride } from 'vs/platform/theme/browser/defaultStyles'; export class ExtensionsGridView extends Disposable { @@ -236,10 +236,9 @@ export class ExtensionsTree extends WorkbenchAsyncDataTree, @IContextKeyService contextKeyService: IContextKeyService, @IListService listService: IListService, - @IThemeService themeService: IThemeService, @IInstantiationService instantiationService: IInstantiationService, @IConfigurationService configurationService: IConfigurationService, @IExtensionsWorkbenchService extensionsWorkdbenchService: IExtensionsWorkbenchService @@ -274,7 +273,7 @@ export class ExtensionsTree extends WorkbenchAsyncDataTree impleme @IThemeService themeService: IThemeService, @IConfigurationService configurationService: IConfigurationService, ) { - super(user, container, delegate, renderers, options, instantiationService, contextKeyService, listService, themeService, configurationService); + super(user, container, delegate, renderers, options, instantiationService, contextKeyService, listService, configurationService); this.visibilityContextKey = MarkersContextKeys.MarkersTreeVisibilityContextKey.bindTo(contextKeyService); } diff --git a/src/vs/workbench/contrib/notebook/browser/diff/notebookDiffList.ts b/src/vs/workbench/contrib/notebook/browser/diff/notebookDiffList.ts index d26d1ce86aadc..51324e3476168 100644 --- a/src/vs/workbench/contrib/notebook/browser/diff/notebookDiffList.ts +++ b/src/vs/workbench/contrib/notebook/browser/diff/notebookDiffList.ts @@ -16,7 +16,6 @@ import { IListService, IWorkbenchListOptions, WorkbenchList } from 'vs/platform/ import { IThemeService } from 'vs/platform/theme/common/themeService'; import { DiffElementViewModelBase, SideBySideDiffElementViewModel, SingleSideDiffElementViewModel } from 'vs/workbench/contrib/notebook/browser/diff/diffElementViewModel'; import { CellDiffSideBySideRenderTemplate, CellDiffSingleSideRenderTemplate, DIFF_CELL_MARGIN, INotebookTextDiffEditor } from 'vs/workbench/contrib/notebook/browser/diff/notebookDiffEditorBrowser'; -import { isMacintosh } from 'vs/base/common/platform'; import { DeletedElement, fixedDiffEditorOptions, fixedEditorOptions, getOptimizedNestedCodeEditorWidgetOptions, InsertElement, ModifiedElement } from 'vs/workbench/contrib/notebook/browser/diff/diffComponents'; import { CodeEditorWidget } from 'vs/editor/browser/widget/codeEditorWidget'; import { DiffEditorWidget } from 'vs/editor/browser/widget/diffEditorWidget'; @@ -313,10 +312,9 @@ export class NotebookTextDiffList extends WorkbenchList, @IListService listService: IListService, - @IThemeService themeService: IThemeService, @IConfigurationService configurationService: IConfigurationService, @IInstantiationService instantiationService: IInstantiationService) { - super(listUser, container, delegate, renderers, options, contextKeyService, listService, themeService, configurationService, instantiationService); + super(listUser, container, delegate, renderers, options, contextKeyService, listService, configurationService, instantiationService); } protected override createMouseController(options: IListOptions): MouseController { @@ -366,11 +364,11 @@ export class NotebookTextDiffList extends WorkbenchList div.monaco-scrollable-element > .monaco-list-rows { background: ${styles.listBackground}; }`); - } else if (!isMacintosh) { // subpixel AA doesn't exist in macOS - console.warn(`List with id '${selectorSuffix}' was styled with a non-opaque background color. This will break sub-pixel antialiasing.`); - } + //if (styles.listBackground.isOpaque()) { + content.push(`.monaco-list${suffix} > div.monaco-scrollable-element > .monaco-list-rows { background: ${styles.listBackground}; }`); + //} else if (!isMacintosh) { // subpixel AA doesn't exist in macOS + // console.warn(`List with id '${selectorSuffix}' was styled with a non-opaque background color. This will break sub-pixel antialiasing.`); + //} } if (styles.listFocusBackground) { diff --git a/src/vs/workbench/contrib/notebook/browser/view/notebookCellList.ts b/src/vs/workbench/contrib/notebook/browser/view/notebookCellList.ts index 1a35770efaeb1..1e32b7fb7a65a 100644 --- a/src/vs/workbench/contrib/notebook/browser/view/notebookCellList.ts +++ b/src/vs/workbench/contrib/notebook/browser/view/notebookCellList.ts @@ -17,7 +17,6 @@ import { PrefixSumComputer } from 'vs/editor/common/model/prefixSumComputer'; import { IConfigurationService } from 'vs/platform/configuration/common/configuration'; import { IContextKeyService } from 'vs/platform/contextkey/common/contextkey'; import { IListService, IWorkbenchListOptions, WorkbenchList } from 'vs/platform/list/browser/listService'; -import { IThemeService } from 'vs/platform/theme/common/themeService'; import { CursorAtBoundary, ICellViewModel, CellEditState, CellFocusMode, ICellOutputViewModel } from 'vs/workbench/contrib/notebook/browser/notebookBrowser'; import { CellViewModel, NotebookViewModel } from 'vs/workbench/contrib/notebook/browser/viewModel/notebookViewModelImpl'; import { diff, NOTEBOOK_EDITOR_CURSOR_BOUNDARY, CellKind, SelectionStateType } from 'vs/workbench/contrib/notebook/common/notebookCommon'; @@ -149,11 +148,10 @@ export class NotebookCellList extends WorkbenchList implements ID contextKeyService: IContextKeyService, options: IWorkbenchListOptions, @IListService listService: IListService, - @IThemeService themeService: IThemeService, @IConfigurationService configurationService: IConfigurationService, @IInstantiationService instantiationService: IInstantiationService ) { - super(listUser, container, delegate, renderers, options, contextKeyService, listService, themeService, configurationService, instantiationService); + super(listUser, container, delegate, renderers, options, contextKeyService, listService, configurationService, instantiationService); NOTEBOOK_CELL_LIST_FOCUSED.bindTo(this.contextKeyService).set(true); this._viewContext = viewContext; this._previousFocusedElements = this.getFocusedElements(); @@ -1303,11 +1301,11 @@ export class NotebookCellList extends WorkbenchList implements ID const content: string[] = []; if (styles.listBackground) { - if (styles.listBackground.isOpaque()) { - content.push(`.monaco-list${suffix} > div.monaco-scrollable-element > .monaco-list-rows { background: ${styles.listBackground}; }`); - } else if (!isMacintosh) { // subpixel AA doesn't exist in macOS - console.warn(`List with id '${selectorSuffix}' was styled with a non-opaque background color. This will break sub-pixel antialiasing.`); - } + //if (styles.listBackground.isOpaque()) { + content.push(`.monaco-list${suffix} > div.monaco-scrollable-element > .monaco-list-rows { background: ${styles.listBackground}; }`); + //} else if (!isMacintosh) { // subpixel AA doesn't exist in macOS + // console.warn(`List with id '${selectorSuffix}' was styled with a non-opaque background color. This will break sub-pixel antialiasing.`); + //} } if (styles.listFocusBackground) { diff --git a/src/vs/workbench/contrib/preferences/browser/settingsTree.ts b/src/vs/workbench/contrib/preferences/browser/settingsTree.ts index 60fdb58348b8a..0c0951453f95e 100644 --- a/src/vs/workbench/contrib/preferences/browser/settingsTree.ts +++ b/src/vs/workbench/contrib/preferences/browser/settingsTree.ts @@ -34,7 +34,6 @@ import { IInstantiationService } from 'vs/platform/instantiation/common/instanti import { IKeybindingService } from 'vs/platform/keybinding/common/keybinding'; import { IOpenerService } from 'vs/platform/opener/common/opener'; import { editorBackground, foreground } from 'vs/platform/theme/common/colorRegistry'; -import { attachSelectBoxStyler, attachStyler } from 'vs/platform/theme/common/styler'; import { IThemeService } from 'vs/platform/theme/common/themeService'; import { getIgnoredSettings } from 'vs/platform/userDataSync/common/settingsMerge'; import { ITOCEntry } from 'vs/workbench/contrib/preferences/browser/settingsLayout'; @@ -62,7 +61,7 @@ import { getIndicatorsLabelAriaLabel, ISettingOverrideClickEvent, SettingsTreeIn import { ILanguageService } from 'vs/editor/common/languages/language'; import { ConfigurationScope } from 'vs/platform/configuration/common/configurationRegistry'; import { IUserDataProfilesService } from 'vs/platform/userDataProfile/common/userDataProfile'; -import { defaultButtonStyles, getInputBoxStyle } from 'vs/platform/theme/browser/defaultStyles'; +import { defaultButtonStyles, getInputBoxStyle, getListStyles, getSelectBoxStyles } from 'vs/platform/theme/browser/defaultStyles'; import { StandardKeyboardEvent } from 'vs/base/browser/keyboardEvent'; const $ = DOM.$; @@ -1607,17 +1606,18 @@ export class SettingEnumRenderer extends AbstractSettingRenderer implements ITre renderTemplate(container: HTMLElement): ISettingEnumItemTemplate { const common = this.renderCommonTemplate(null, container, 'enum'); - const selectBox = new SelectBox([], 0, this._contextViewService, undefined, { - useCustomDrawn: !(isIOS && BrowserFeatures.pointerEvents) - }); - - common.toDispose.add(selectBox); - common.toDispose.add(attachSelectBoxStyler(selectBox, this._themeService, { + const styles = getSelectBoxStyles({ selectBackground: settingsSelectBackground, selectForeground: settingsSelectForeground, selectBorder: settingsSelectBorder, selectListBorder: settingsSelectListBorder - })); + }); + + const selectBox = new SelectBox([], 0, this._contextViewService, styles, { + useCustomDrawn: !(isIOS && BrowserFeatures.pointerEvents) + }); + + common.toDispose.add(selectBox); selectBox.render(common.controlElement); const selectElement = common.controlElement.querySelector('select'); if (selectElement) { @@ -2249,7 +2249,6 @@ export class SettingsTree extends WorkbenchObjectTree { renderers: ITreeRenderer[], @IContextKeyService contextKeyService: IContextKeyService, @IListService listService: IListService, - @IThemeService themeService: IThemeService, @IConfigurationService configurationService: IConfigurationService, @IInstantiationService instantiationService: IInstantiationService, @ILanguageService languageService: ILanguageService, @@ -2276,13 +2275,12 @@ export class SettingsTree extends WorkbenchObjectTree { instantiationService, contextKeyService, listService, - themeService, configurationService, ); this.getHTMLElement().classList.add('settings-editor-tree'); - this.disposables.add(attachStyler(themeService, { + this.style(getListStyles({ listBackground: editorBackground, listActiveSelectionBackground: editorBackground, listActiveSelectionForeground: foreground, @@ -2298,8 +2296,6 @@ export class SettingsTree extends WorkbenchObjectTree { listInactiveSelectionForeground: foreground, listInactiveFocusBackground: editorBackground, listInactiveFocusOutline: editorBackground - }, colors => { - this.style(colors); })); this.disposables.add(configurationService.onDidChangeConfiguration(e => { diff --git a/src/vs/workbench/contrib/preferences/browser/settingsWidgets.ts b/src/vs/workbench/contrib/preferences/browser/settingsWidgets.ts index 0f340f69f254a..1e3bb32643b08 100644 --- a/src/vs/workbench/contrib/preferences/browser/settingsWidgets.ts +++ b/src/vs/workbench/contrib/preferences/browser/settingsWidgets.ts @@ -22,11 +22,10 @@ import { isDefined, isUndefinedOrNull } from 'vs/base/common/types'; import 'vs/css!./media/settingsWidgets'; import { localize } from 'vs/nls'; import { IContextViewService } from 'vs/platform/contextview/browser/contextView'; -import { attachSelectBoxStyler } from 'vs/platform/theme/common/styler'; import { IThemeService, ThemeIcon } from 'vs/platform/theme/common/themeService'; import { settingsDiscardIcon, settingsEditIcon, settingsRemoveIcon } from 'vs/workbench/contrib/preferences/browser/preferencesIcons'; import { settingsSelectBackground, settingsSelectBorder, settingsSelectForeground, settingsSelectListBorder, settingsTextInputBackground, settingsTextInputBorder, settingsTextInputForeground } from 'vs/workbench/contrib/preferences/common/settingsEditorColorRegistry'; -import { defaultButtonStyles, getInputBoxStyle } from 'vs/platform/theme/browser/defaultStyles'; +import { defaultButtonStyles, getInputBoxStyle, getSelectBoxStyles } from 'vs/platform/theme/browser/defaultStyles'; const $ = DOM.$; @@ -226,16 +225,17 @@ export abstract class AbstractListSettingWidget extend const selectBoxOptions = value.options.map(({ value, description }) => ({ text: value, description })); const selected = value.options.findIndex(option => value.data === option.value); - const selectBox = new SelectBox(selectBoxOptions, selected, this.contextViewService, undefined, { - useCustomDrawn: !(isIOS && BrowserFeatures.pointerEvents) - }); - - this.listDisposables.add(attachSelectBoxStyler(selectBox, this.themeService, { + const styles = getSelectBoxStyles({ selectBackground: settingsSelectBackground, selectForeground: settingsSelectForeground, selectBorder: settingsSelectBorder, selectListBorder: settingsSelectListBorder - })); + }); + + + const selectBox = new SelectBox(selectBoxOptions, selected, this.contextViewService, styles, { + useCustomDrawn: !(isIOS && BrowserFeatures.pointerEvents) + }); return selectBox; } diff --git a/src/vs/workbench/contrib/preferences/browser/tocTree.ts b/src/vs/workbench/contrib/preferences/browser/tocTree.ts index 522b5e13b8002..f53c2154f934c 100644 --- a/src/vs/workbench/contrib/preferences/browser/tocTree.ts +++ b/src/vs/workbench/contrib/preferences/browser/tocTree.ts @@ -13,9 +13,8 @@ import { IConfigurationService } from 'vs/platform/configuration/common/configur import { IContextKeyService } from 'vs/platform/contextkey/common/contextkey'; import { IInstantiationService } from 'vs/platform/instantiation/common/instantiation'; import { IListService, IWorkbenchObjectTreeOptions, WorkbenchObjectTree } from 'vs/platform/list/browser/listService'; -import { editorBackground, focusBorder, foreground, transparent } from 'vs/platform/theme/common/colorRegistry'; -import { attachStyler } from 'vs/platform/theme/common/styler'; -import { IThemeService } from 'vs/platform/theme/common/themeService'; +import { getListStyles } from 'vs/platform/theme/browser/defaultStyles'; +import { editorBackground, focusBorder, foreground } from 'vs/platform/theme/common/colorRegistry'; import { SettingsTreeFilter } from 'vs/workbench/contrib/preferences/browser/settingsTree'; import { ISettingsEditorViewState, SearchResultModel, SettingsTreeElement, SettingsTreeGroupElement, SettingsTreeSettingElement } from 'vs/workbench/contrib/preferences/browser/settingsTreeModels'; import { settingsHeaderForeground } from 'vs/workbench/contrib/preferences/common/settingsEditorColorRegistry'; @@ -199,7 +198,6 @@ export class TOCTree extends WorkbenchObjectTree { viewState: ISettingsEditorViewState, @IContextKeyService contextKeyService: IContextKeyService, @IListService listService: IListService, - @IThemeService themeService: IThemeService, @IConfigurationService configurationService: IConfigurationService, @IInstantiationService instantiationService: IInstantiationService, ) { @@ -230,11 +228,10 @@ export class TOCTree extends WorkbenchObjectTree { instantiationService, contextKeyService, listService, - themeService, configurationService, ); - this.disposables.add(attachStyler(themeService, { + this.style(getListStyles({ listBackground: editorBackground, listFocusOutline: focusBorder, listActiveSelectionBackground: editorBackground, @@ -242,15 +239,13 @@ export class TOCTree extends WorkbenchObjectTree { listFocusAndSelectionBackground: editorBackground, listFocusAndSelectionForeground: settingsHeaderForeground, listFocusBackground: editorBackground, - listFocusForeground: transparent(foreground, 0.9), - listHoverForeground: transparent(foreground, 0.9), + listFocusForeground: foreground, // transparent(foreground, 0.9), + listHoverForeground: foreground, // transparent(foreground, 0.9), listHoverBackground: editorBackground, listInactiveSelectionBackground: editorBackground, listInactiveSelectionForeground: settingsHeaderForeground, listInactiveFocusBackground: editorBackground, listInactiveFocusOutline: editorBackground - }, colors => { - this.style(colors); })); } } diff --git a/src/vs/workbench/contrib/remote/browser/explorerViewItems.ts b/src/vs/workbench/contrib/remote/browser/explorerViewItems.ts index aa8ed9355e7e1..3c1d2042d9110 100644 --- a/src/vs/workbench/contrib/remote/browser/explorerViewItems.ts +++ b/src/vs/workbench/contrib/remote/browser/explorerViewItems.ts @@ -5,8 +5,6 @@ import * as nls from 'vs/nls'; import { IAction } from 'vs/base/common/actions'; -import { IThemeService } from 'vs/platform/theme/common/themeService'; -import { attachSelectBoxStyler } from 'vs/platform/theme/common/styler'; import { IContextViewService } from 'vs/platform/contextview/browser/contextView'; import { IRemoteExplorerService, REMOTE_EXPLORER_TYPE_KEY } from 'vs/workbench/services/remote/common/remoteExplorerService'; import { ISelectOptionItem } from 'vs/base/browser/ui/selectBox/selectBox'; @@ -19,6 +17,7 @@ import { SelectActionViewItem } from 'vs/base/browser/ui/actionbar/actionViewIte import { Action2, MenuId } from 'vs/platform/actions/common/actions'; import { ServicesAccessor } from 'vs/platform/instantiation/common/instantiation'; import { VIEWLET_ID } from 'vs/workbench/contrib/remote/browser/remoteExplorer'; +import { defaultSelectBoxStyles } from 'vs/platform/theme/browser/defaultStyles'; interface IRemoteSelectItem extends ISelectOptionItem { authority: string[]; @@ -29,14 +28,12 @@ export class SwitchRemoteViewItem extends SelectActionViewItem { constructor( action: IAction, private readonly optionsItems: IRemoteSelectItem[], - @IThemeService themeService: IThemeService, @IContextViewService contextViewService: IContextViewService, @IRemoteExplorerService private remoteExplorerService: IRemoteExplorerService, @IWorkbenchEnvironmentService private environmentService: IWorkbenchEnvironmentService, @IStorageService private readonly storageService: IStorageService ) { - super(null, action, optionsItems, 0, contextViewService, { ariaLabel: nls.localize('remotes', 'Switch Remote') }); - this._register(attachSelectBoxStyler(this.selectBox, themeService)); + super(null, action, optionsItems, 0, contextViewService, defaultSelectBoxStyles, { ariaLabel: nls.localize('remotes', 'Switch Remote') }); } public setSelectionForConnection(): boolean { diff --git a/src/vs/workbench/contrib/terminal/browser/terminalTabsList.ts b/src/vs/workbench/contrib/terminal/browser/terminalTabsList.ts index 69ca27987c692..a28ddc5c8378f 100644 --- a/src/vs/workbench/contrib/terminal/browser/terminalTabsList.ts +++ b/src/vs/workbench/contrib/terminal/browser/terminalTabsList.ts @@ -100,7 +100,6 @@ export class TerminalTabList extends WorkbenchList { }, contextKeyService, listService, - themeService, _configurationService, instantiationService, ); diff --git a/src/vs/workbench/contrib/terminal/browser/terminalView.ts b/src/vs/workbench/contrib/terminal/browser/terminalView.ts index 4a0f842b3b55f..cb1072c3e6c0f 100644 --- a/src/vs/workbench/contrib/terminal/browser/terminalView.ts +++ b/src/vs/workbench/contrib/terminal/browser/terminalView.ts @@ -23,7 +23,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 { attachSelectBoxStyler, attachStylerCallback } from 'vs/platform/theme/common/styler'; +import { attachStylerCallback } from 'vs/platform/theme/common/styler'; import { 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'; @@ -43,6 +43,7 @@ import { TerminalContextKeys } from 'vs/workbench/contrib/terminal/common/termin import { getShellIntegrationTooltip } from 'vs/workbench/contrib/terminal/browser/terminalTooltip'; import { ServicesAccessor } from 'vs/editor/browser/editorExtensions'; import { TerminalCapability } from 'vs/platform/terminal/common/capabilities/capabilities'; +import { defaultSelectBoxStyles } from 'vs/platform/theme/browser/defaultStyles'; export class TerminalViewPane extends ViewPane { private _fontStyleElement: HTMLElement | undefined; @@ -294,7 +295,7 @@ class SwitchTerminalActionViewItem extends SelectActionViewItem { @IContextViewService contextViewService: IContextViewService, @ITerminalProfileService terminalProfileService: ITerminalProfileService ) { - super(null, action, getTerminalSelectOpenItems(_terminalService, _terminalGroupService), _terminalGroupService.activeGroupIndex, contextViewService, { ariaLabel: nls.localize('terminals', 'Open Terminals.'), optionsAsChildren: true }); + super(null, action, getTerminalSelectOpenItems(_terminalService, _terminalGroupService), _terminalGroupService.activeGroupIndex, contextViewService, defaultSelectBoxStyles, { ariaLabel: nls.localize('terminals', 'Open Terminals.'), optionsAsChildren: true }); this._register(_terminalService.onDidChangeInstances(() => this._updateItems(), this)); this._register(_terminalService.onDidChangeActiveGroup(() => this._updateItems(), this)); this._register(_terminalService.onDidChangeActiveInstance(() => this._updateItems(), this)); @@ -303,7 +304,6 @@ class SwitchTerminalActionViewItem extends SelectActionViewItem { this._register(_terminalService.onDidChangeConnectionState(() => this._updateItems(), this)); this._register(terminalProfileService.onDidChangeAvailableProfiles(() => this._updateItems(), this)); this._register(_terminalService.onDidChangeInstancePrimaryStatus(() => this._updateItems(), this)); - this._register(attachSelectBoxStyler(this.selectBox, this._themeService)); } override render(container: HTMLElement): void { From bbb0160cfdb7cb8300c5937188848bbc6cbcda11 Mon Sep 17 00:00:00 2001 From: Martin Aeschlimann Date: Thu, 22 Dec 2022 08:30:37 +0100 Subject: [PATCH 2/5] invoke style --- src/vs/base/browser/ui/list/listWidget.ts | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/vs/base/browser/ui/list/listWidget.ts b/src/vs/base/browser/ui/list/listWidget.ts index eb9208cd495a7..d29d41aac7e5c 100644 --- a/src/vs/base/browser/ui/list/listWidget.ts +++ b/src/vs/base/browser/ui/list/listWidget.ts @@ -1417,6 +1417,8 @@ export class List implements ISpliceable, IDisposable { if (this._options.multipleSelectionSupport !== false) { this.view.domNode.setAttribute('aria-multiselectable', 'true'); } + + this.style(_options.listStyles || unthemedListStyles); } protected createMouseController(options: IListOptions): MouseController { From 9e297472afa2b4dcc5ccea0a628ba1efa1968533 Mon Sep 17 00:00:00 2001 From: Martin Aeschlimann Date: Thu, 22 Dec 2022 15:50:42 +0100 Subject: [PATCH 3/5] polish selectBox --- src/vs/base/browser/ui/selectBox/selectBox.ts | 42 +++--------- .../browser/ui/selectBox/selectBoxCustom.ts | 64 ++++++++----------- 2 files changed, 34 insertions(+), 72 deletions(-) diff --git a/src/vs/base/browser/ui/selectBox/selectBox.ts b/src/vs/base/browser/ui/selectBox/selectBox.ts index 1e2554800bc68..629a39ea1d23f 100644 --- a/src/vs/base/browser/ui/selectBox/selectBox.ts +++ b/src/vs/base/browser/ui/selectBox/selectBox.ts @@ -5,7 +5,7 @@ import { IContentActionHandler } from 'vs/base/browser/formattedTextRenderer'; import { IContextViewProvider } from 'vs/base/browser/ui/contextview/contextview'; -import { IListStyles } from 'vs/base/browser/ui/list/listWidget'; +import { IListStyles, unthemedListStyles } from 'vs/base/browser/ui/list/listWidget'; import { SelectBoxList } from 'vs/base/browser/ui/selectBox/selectBoxCustom'; import { SelectBoxNative } from 'vs/base/browser/ui/selectBox/selectBoxNative'; import { Widget } from 'vs/base/browser/ui/widget'; @@ -53,16 +53,17 @@ export interface ISelectOptionItem { } export interface ISelectBoxStyles extends IListStyles { - selectBackground: string | undefined; - selectListBackground: string | undefined; - selectForeground: string | undefined; - decoratorRightForeground: string | undefined; - selectBorder: string | undefined; - selectListBorder: string | undefined; - focusBorder: string | undefined; + readonly selectBackground: string | undefined; + readonly selectListBackground: string | undefined; + readonly selectForeground: string | undefined; + readonly decoratorRightForeground: string | undefined; + readonly selectBorder: string | undefined; + readonly selectListBorder: string | undefined; + readonly focusBorder: string | undefined; } export const unthemedSelectBoxStyles: ISelectBoxStyles = { + ...unthemedListStyles, selectBackground: '#3C3C3C', selectForeground: '#F0F0F0', selectBorder: '#3C3C3C', @@ -70,31 +71,6 @@ export const unthemedSelectBoxStyles: ISelectBoxStyles = { selectListBackground: undefined, selectListBorder: undefined, focusBorder: undefined, - listBackground: undefined, - listFocusBackground: undefined, - listFocusForeground: undefined, - listActiveSelectionBackground: undefined, - listActiveSelectionForeground: undefined, - listActiveSelectionIconForeground: undefined, - listFocusAndSelectionOutline: undefined, - listFocusAndSelectionBackground: undefined, - listFocusAndSelectionForeground: undefined, - listInactiveSelectionBackground: undefined, - listInactiveSelectionIconForeground: undefined, - listInactiveSelectionForeground: undefined, - listInactiveFocusForeground: undefined, - listInactiveFocusBackground: undefined, - listHoverBackground: undefined, - listHoverForeground: undefined, - listDropBackground: undefined, - listFocusOutline: undefined, - listInactiveFocusOutline: undefined, - listSelectionOutline: undefined, - listHoverOutline: undefined, - treeIndentGuidesStroke: undefined, - treeInactiveIndentGuidesStroke: undefined, - tableColumnsBorder: undefined, - tableOddRowsBackgroundColor: undefined }; export interface ISelectData { diff --git a/src/vs/base/browser/ui/selectBox/selectBoxCustom.ts b/src/vs/base/browser/ui/selectBox/selectBoxCustom.ts index 3924f4c5cf0a0..1a1625a33ab19 100644 --- a/src/vs/base/browser/ui/selectBox/selectBoxCustom.ts +++ b/src/vs/base/browser/ui/selectBox/selectBoxCustom.ts @@ -87,7 +87,7 @@ export class SelectBoxList extends Disposable implements ISelectBoxDelegate, ILi private options: ISelectOptionItem[] = []; private selected: number; private readonly _onDidSelect: Emitter; - private styles: ISelectBoxStyles; + private readonly styles: ISelectBoxStyles; private listRenderer!: SelectListRenderer; private contextViewProvider!: IContextViewProvider; private selectDropDownContainer!: HTMLElement; @@ -107,6 +107,8 @@ export class SelectBoxList extends Disposable implements ISelectBoxDelegate, ILi super(); this._isVisible = false; + this.styles = styles; + this.selectBoxOptions = selectBoxOptions || Object.create(null); if (typeof this.selectBoxOptions.minBottomMargin !== 'number') { @@ -131,8 +133,6 @@ export class SelectBoxList extends Disposable implements ISelectBoxDelegate, ILi this._onDidSelect = new Emitter(); this._register(this._onDidSelect); - this.styles = styles; - this.registerListeners(); this.constructSelectDropDown(contextViewProvider); @@ -142,6 +142,8 @@ export class SelectBoxList extends Disposable implements ISelectBoxDelegate, ILi this.setOptions(options, selected); } + this.initStyleSheet(); + } // IDelegate - List renderer @@ -336,15 +338,13 @@ export class SelectBoxList extends Disposable implements ISelectBoxDelegate, ILi this.container = container; container.classList.add('select-container'); container.appendChild(this.selectElement); - this.applyStyles(); + this.styleSelectElement(); } - public style(styles: ISelectBoxStyles): void { + private initStyleSheet(): void { const content: string[] = []; - this.styles = styles; - // Style non-native select mode if (this.styles.listFocusBackground) { @@ -394,42 +394,29 @@ export class SelectBoxList extends Disposable implements ISelectBoxDelegate, ILi content.push(`.monaco-select-box-dropdown-container > .select-box-dropdown-list-container .monaco-list .monaco-list-row.option-disabled:hover { background-color: transparent !important; color: inherit !important; outline: none !important; }`); this.styleElement.textContent = content.join('\n'); - - this.applyStyles(); } - private applyStyles(): void { - - // Style parent select - - if (this.selectElement) { - const background = this.styles.selectBackground ? this.styles.selectBackground.toString() : ''; - const foreground = this.styles.selectForeground ? this.styles.selectForeground.toString() : ''; - const border = this.styles.selectBorder ? this.styles.selectBorder.toString() : ''; - - this.selectElement.style.backgroundColor = background; - this.selectElement.style.color = foreground; - this.selectElement.style.borderColor = border; - } - - // Style drop down select list (non-native mode only) + private styleSelectElement(): void { + const background = this.styles.selectBackground ?? ''; + const foreground = this.styles.selectForeground ?? ''; + const border = this.styles.selectBorder ?? ''; - if (this.selectList) { - this.styleList(); - } + this.selectElement.style.backgroundColor = background; + this.selectElement.style.color = foreground; + this.selectElement.style.borderColor = border; } private styleList() { - if (this.selectList) { - const background = this.styles.selectBackground ? this.styles.selectBackground.toString() : ''; - - const listBackground = this.styles.selectListBackground ? this.styles.selectListBackground.toString() : background; - this.selectDropDownListContainer.style.backgroundColor = listBackground; - this.selectionDetailsPane.style.backgroundColor = listBackground; - const optionsBorder = this.styles.focusBorder ? this.styles.focusBorder.toString() : ''; - this.selectDropDownContainer.style.outlineColor = optionsBorder; - this.selectDropDownContainer.style.outlineOffset = '-1px'; - } + const background = this.styles.selectBackground ?? ''; + + const listBackground = this.styles.selectListBackground ? this.styles.selectListBackground : background; + this.selectDropDownListContainer.style.backgroundColor = listBackground; + this.selectionDetailsPane.style.backgroundColor = listBackground; + const optionsBorder = this.styles.focusBorder ? this.styles.focusBorder : ''; + this.selectDropDownContainer.style.outlineColor = optionsBorder; + this.selectDropDownContainer.style.outlineOffset = '-1px'; + + this.selectList.style(this.styles); } private createOption(value: string, index: number, disabled?: boolean): HTMLOptionElement { @@ -752,8 +739,7 @@ export class SelectBoxList extends Disposable implements ISelectBoxDelegate, ILi getWidgetAriaLabel: () => localize({ key: 'selectBox', comment: ['Behave like native select dropdown element.'] }, "Select Box"), getRole: () => 'option', getWidgetRole: () => 'listbox' - }, - listStyles: this.styles + } }); if (this.selectBoxOptions.ariaLabel) { this.selectList.ariaLabel = this.selectBoxOptions.ariaLabel; From 50c48c518f319f71ee3ba4db88b5e033253d5288 Mon Sep 17 00:00:00 2001 From: Martin Aeschlimann Date: Thu, 22 Dec 2022 15:51:02 +0100 Subject: [PATCH 4/5] remove property in options, rely on style() --- src/vs/base/browser/ui/list/listPaging.ts | 2 - src/vs/base/browser/ui/list/listWidget.ts | 7 +--- src/vs/base/browser/ui/table/tableWidget.ts | 4 +- .../contrib/suggest/browser/suggestWidget.ts | 10 ++--- .../actionWidget/browser/actionList.ts | 2 +- src/vs/platform/list/browser/listService.ts | 37 ++++++------------- .../contrib/preferences/browser/tocTree.ts | 6 +-- .../common/settingsEditorColorRegistry.ts | 1 + 8 files changed, 25 insertions(+), 44 deletions(-) diff --git a/src/vs/base/browser/ui/list/listPaging.ts b/src/vs/base/browser/ui/list/listPaging.ts index 8ec5ca602c18c..d8c23698e9cb4 100644 --- a/src/vs/base/browser/ui/list/listPaging.ts +++ b/src/vs/base/browser/ui/list/listPaging.ts @@ -108,8 +108,6 @@ export interface IPagedListOptions { readonly mouseSupport?: boolean; readonly horizontalScrolling?: boolean; readonly additionalScrollHeight?: number; - - readonly listStyles?: IListStyles; } function fromPagedListOptions(modelProvider: () => IPagedModel, options: IPagedListOptions): IListOptions { diff --git a/src/vs/base/browser/ui/list/listWidget.ts b/src/vs/base/browser/ui/list/listWidget.ts index d29d41aac7e5c..843c2d8401e54 100644 --- a/src/vs/base/browser/ui/list/listWidget.ts +++ b/src/vs/base/browser/ui/list/listWidget.ts @@ -952,8 +952,6 @@ export interface IListOptions extends IListOptionsUpdate { readonly accessibilityProvider?: IListAccessibilityProvider; readonly keyboardNavigationEventFilter?: IKeyboardNavigationEventFilter; - readonly listStyles?: IListStyles; - // list view options readonly useShadows?: boolean; readonly verticalScrollMode?: ScrollbarVisibility; @@ -1035,8 +1033,7 @@ const DefaultOptions: IListOptions = { onDragStart(): void { }, onDragOver() { return false; }, drop() { } - }, - listStyles: unthemedListStyles + } }; // TODO@Joao: move these utils into a SortedArray class @@ -1417,8 +1414,6 @@ export class List implements ISpliceable, IDisposable { if (this._options.multipleSelectionSupport !== false) { this.view.domNode.setAttribute('aria-multiselectable', 'true'); } - - this.style(_options.listStyles || unthemedListStyles); } protected createMouseController(options: IListOptions): MouseController { diff --git a/src/vs/base/browser/ui/table/tableWidget.ts b/src/vs/base/browser/ui/table/tableWidget.ts index d1b817392e354..6e20fd6e34a68 100644 --- a/src/vs/base/browser/ui/table/tableWidget.ts +++ b/src/vs/base/browser/ui/table/tableWidget.ts @@ -135,7 +135,7 @@ class ColumnHeader implements IView { } } -export interface ITableOptions extends IListOptions { listStyles?: ITableStyles } +export interface ITableOptions extends IListOptions { } export interface ITableOptionsUpdate extends IListOptionsUpdate { } export interface ITableStyles extends IListStyles { } @@ -220,7 +220,7 @@ export class Table implements ISpliceable, IDisposable { }, null, this.disposables); this.styleElement = createStyleSheet(this.domNode); - this.style(_options?.listStyles ?? unthemedListStyles); + this.style(unthemedListStyles); } updateOptions(options: ITableOptionsUpdate): void { diff --git a/src/vs/editor/contrib/suggest/browser/suggestWidget.ts b/src/vs/editor/contrib/suggest/browser/suggestWidget.ts index f775039d12a0b..50c37b2d0281b 100644 --- a/src/vs/editor/contrib/suggest/browser/suggestWidget.ts +++ b/src/vs/editor/contrib/suggest/browser/suggestWidget.ts @@ -257,12 +257,12 @@ export class SuggestWidget implements IDisposable { return nls.localize('ariaCurrenttSuggestionReadDetails', "{0}, docs: {1}", label, docs); }, - }, - listStyles: getListStyles({ - listInactiveFocusBackground: editorSuggestWidgetSelectedBackground, - listInactiveFocusOutline: activeContrastBorder - }) + } }); + this._list.style(getListStyles({ + listInactiveFocusBackground: editorSuggestWidgetSelectedBackground, + listInactiveFocusOutline: activeContrastBorder + })); this._status = instantiationService.createInstance(SuggestWidgetStatus, this.element.domNode); const applyStatusBarStyle = () => this.element.domNode.classList.toggle('with-status-bar', this.editor.getOption(EditorOption.suggest).showStatusBar); diff --git a/src/vs/platform/actionWidget/browser/actionList.ts b/src/vs/platform/actionWidget/browser/actionList.ts index 59501fb867a7f..609cab736ae42 100644 --- a/src/vs/platform/actionWidget/browser/actionList.ts +++ b/src/vs/platform/actionWidget/browser/actionList.ts @@ -187,7 +187,6 @@ export class ActionList extends Disposable { }; this._list = this._register(new List(user, this.domNode, virtualDelegate, [new ActionItemRenderer>(preview, this._keybindingService), new HeaderRenderer()], { keyboardSupport: false, - listStyles: defaultListStyles, accessibilityProvider: { getAriaLabel: element => { if (element.kind === ActionListItemKind.Action) { @@ -204,6 +203,7 @@ export class ActionList extends Disposable { getWidgetRole: () => 'listbox' }, })); + this._list.style(defaultListStyles); this._register(this._list.onMouseClick(e => this.onListClick(e))); this._register(this._list.onMouseOver(e => this.onListHover(e))); diff --git a/src/vs/platform/list/browser/listService.ts b/src/vs/platform/list/browser/listService.ts index b0980c0587d3d..786ea0678dd57 100644 --- a/src/vs/platform/list/browser/listService.ts +++ b/src/vs/platform/list/browser/listService.ts @@ -9,7 +9,7 @@ import { IListMouseEvent, IListRenderer, IListTouchEvent, IListVirtualDelegate } import { IPagedListOptions, IPagedRenderer, PagedList } from 'vs/base/browser/ui/list/listPaging'; import { DefaultStyleController, IKeyboardNavigationEventFilter, IListAccessibilityProvider, IListOptions, IListOptionsUpdate, IListStyles, IMultipleSelectionController, isSelectionRangeChangeEvent, isSelectionSingleChangeEvent, List, TypeNavigationMode } from 'vs/base/browser/ui/list/listWidget'; import { ITableColumn, ITableRenderer, ITableVirtualDelegate } from 'vs/base/browser/ui/table/table'; -import { ITableOptions, ITableOptionsUpdate, Table } from 'vs/base/browser/ui/table/tableWidget'; +import { ITableOptions, ITableOptionsUpdate, ITableStyles, Table } from 'vs/base/browser/ui/table/tableWidget'; import { TreeFindMode, IAbstractTreeOptions, IAbstractTreeOptionsUpdate, RenderIndentGuides } from 'vs/base/browser/ui/tree/abstractTree'; import { AsyncDataTree, CompressibleAsyncDataTree, IAsyncDataTreeOptions, IAsyncDataTreeOptionsUpdate, ICompressibleAsyncDataTreeOptions, ICompressibleAsyncDataTreeOptionsUpdate, ITreeCompressionDelegate } from 'vs/base/browser/ui/tree/asyncDataTree'; import { DataTree, IDataTreeOptions } from 'vs/base/browser/ui/tree/dataTree'; @@ -245,7 +245,6 @@ export class WorkbenchList extends List { super(user, container, delegate, renderers, { keyboardSupport: false, - listStyles: defaultListStyles, ...workbenchListOptions, horizontalScrolling, } @@ -271,9 +270,7 @@ export class WorkbenchList extends List { this.disposables.add(this.contextKeyService); this.disposables.add((listService as ListService).register(this)); - if (options.overrideStyles) { - this.updateStyles(options.overrideStyles); - } + this.updateStyles(options.overrideStyles); this.disposables.add(this.onDidChangeSelection(() => { const selection = this.getSelection(); @@ -326,17 +323,15 @@ export class WorkbenchList extends List { override updateOptions(options: IWorkbenchListOptionsUpdate): void { super.updateOptions(options); - if (options.overrideStyles) { - this.updateStyles(options.overrideStyles); - } + this.updateStyles(options.overrideStyles); if (options.multipleSelectionSupport !== undefined) { this.listSupportsMultiSelect.set(!!options.multipleSelectionSupport); } } - private updateStyles(styles: IStyleOverride): void { - this.style(getListStyles(styles)); + private updateStyles(styles: IStyleOverride | undefined): void { + this.style(styles ? getListStyles(styles) : defaultListStyles); } get useAltAsMultipleSelectionModifier(): boolean { @@ -374,7 +369,6 @@ export class WorkbenchPagedList extends PagedList { super(user, container, delegate, renderers, { keyboardSupport: false, - listStyles: defaultListStyles, ...workbenchListOptions, horizontalScrolling, } @@ -398,9 +392,7 @@ export class WorkbenchPagedList extends PagedList { this.disposables.add(this.contextKeyService); this.disposables.add((listService as ListService).register(this)); - if (options.overrideStyles) { - this.updateStyles(options.overrideStyles); - } + this.updateStyles(options.overrideStyles); this.disposables.add(configurationService.onDidChangeConfiguration(e => { if (e.affectsConfiguration(multiSelectModifierSettingKey)) { @@ -446,8 +438,8 @@ export class WorkbenchPagedList extends PagedList { } } - private updateStyles(styles: IStyleOverride): void { - this.style(getListStyles(styles)); + private updateStyles(styles: IStyleOverride | undefined): void { + this.style(styles ? getListStyles(styles) : defaultListStyles); } get useAltAsMultipleSelectionModifier(): boolean { @@ -498,7 +490,6 @@ export class WorkbenchTable extends Table { super(user, container, delegate, columns, renderers, { keyboardSupport: false, - listStyles: defaultListStyles, ...workbenchListOptions, horizontalScrolling, } @@ -524,9 +515,7 @@ export class WorkbenchTable extends Table { this.disposables.add(this.contextKeyService); this.disposables.add((listService as ListService).register(this)); - if (options.overrideStyles) { - this.updateStyles(options.overrideStyles); - } + this.updateStyles(options.overrideStyles); this.disposables.add(this.onDidChangeSelection(() => { const selection = this.getSelection(); @@ -579,17 +568,15 @@ export class WorkbenchTable extends Table { override updateOptions(options: IWorkbenchTableOptionsUpdate): void { super.updateOptions(options); - if (options.overrideStyles) { - this.updateStyles(options.overrideStyles); - } + this.updateStyles(options.overrideStyles); if (options.multipleSelectionSupport !== undefined) { this.listSupportsMultiSelect.set(!!options.multipleSelectionSupport); } } - private updateStyles(styles: IStyleOverride): void { - this.style(getListStyles(styles)); + private updateStyles(styles: IStyleOverride | undefined): void { + this.style(styles ? getListStyles(styles) : defaultListStyles); } get useAltAsMultipleSelectionModifier(): boolean { diff --git a/src/vs/workbench/contrib/preferences/browser/tocTree.ts b/src/vs/workbench/contrib/preferences/browser/tocTree.ts index f53c2154f934c..69dbaef5543b0 100644 --- a/src/vs/workbench/contrib/preferences/browser/tocTree.ts +++ b/src/vs/workbench/contrib/preferences/browser/tocTree.ts @@ -17,7 +17,7 @@ import { getListStyles } from 'vs/platform/theme/browser/defaultStyles'; import { editorBackground, focusBorder, foreground } from 'vs/platform/theme/common/colorRegistry'; import { SettingsTreeFilter } from 'vs/workbench/contrib/preferences/browser/settingsTree'; import { ISettingsEditorViewState, SearchResultModel, SettingsTreeElement, SettingsTreeGroupElement, SettingsTreeSettingElement } from 'vs/workbench/contrib/preferences/browser/settingsTreeModels'; -import { settingsHeaderForeground } from 'vs/workbench/contrib/preferences/common/settingsEditorColorRegistry'; +import { settingsHeaderForeground, settingsHeaderHoverForeground } from 'vs/workbench/contrib/preferences/common/settingsEditorColorRegistry'; import { IWorkbenchEnvironmentService } from 'vs/workbench/services/environment/common/environmentService'; const $ = DOM.$; @@ -239,8 +239,8 @@ export class TOCTree extends WorkbenchObjectTree { listFocusAndSelectionBackground: editorBackground, listFocusAndSelectionForeground: settingsHeaderForeground, listFocusBackground: editorBackground, - listFocusForeground: foreground, // transparent(foreground, 0.9), - listHoverForeground: foreground, // transparent(foreground, 0.9), + listFocusForeground: settingsHeaderHoverForeground, + listHoverForeground: settingsHeaderHoverForeground, listHoverBackground: editorBackground, listInactiveSelectionBackground: editorBackground, listInactiveSelectionForeground: settingsHeaderForeground, diff --git a/src/vs/workbench/contrib/preferences/common/settingsEditorColorRegistry.ts b/src/vs/workbench/contrib/preferences/common/settingsEditorColorRegistry.ts index 1ca3cee926455..29841a282480a 100644 --- a/src/vs/workbench/contrib/preferences/common/settingsEditorColorRegistry.ts +++ b/src/vs/workbench/contrib/preferences/common/settingsEditorColorRegistry.ts @@ -10,6 +10,7 @@ import { PANEL_BORDER } from 'vs/workbench/common/theme'; // General setting colors export const settingsHeaderForeground = registerColor('settings.headerForeground', { light: '#444444', dark: '#e7e7e7', hcDark: '#ffffff', hcLight: '#292929' }, localize('headerForeground', "The foreground color for a section header or active title.")); +export const settingsHeaderHoverForeground = registerColor('settings.settingsHeaderHoverForeground', { light: transparent(settingsHeaderForeground, 0.7), dark: transparent(settingsHeaderForeground, 0.7), hcDark: transparent(settingsHeaderForeground, 0.7), hcLight: transparent(settingsHeaderForeground, 0.7) }, localize('settingsHeaderHoverForeground', "The foreground color for a section header or hovered title.")); export const modifiedItemIndicator = registerColor('settings.modifiedItemIndicator', { light: new Color(new RGBA(102, 175, 224)), dark: new Color(new RGBA(12, 125, 157)), From e59178462fe40f00d9c01d9bba8eb06f27be0f2d Mon Sep 17 00:00:00 2001 From: Martin Aeschlimann Date: Wed, 18 Jan 2023 15:20:08 +0100 Subject: [PATCH 5/5] remove old comments --- src/vs/base/browser/ui/list/listWidget.ts | 4 ---- .../contrib/notebook/browser/diff/notebookDiffList.ts | 4 ---- .../contrib/notebook/browser/view/notebookCellList.ts | 4 ---- 3 files changed, 12 deletions(-) diff --git a/src/vs/base/browser/ui/list/listWidget.ts b/src/vs/base/browser/ui/list/listWidget.ts index 6673ae1a45334..4a47bfcdfb5ec 100644 --- a/src/vs/base/browser/ui/list/listWidget.ts +++ b/src/vs/base/browser/ui/list/listWidget.ts @@ -795,11 +795,7 @@ export class DefaultStyleController implements IStyleController { const content: string[] = []; if (styles.listBackground) { - //if (styles.listBackground.isOpaque()) { content.push(`.monaco-list${suffix} .monaco-list-rows { background: ${styles.listBackground}; }`); - // } else if (!platform.isMacintosh) { // subpixel AA doesn't exist in macOS - // console.warn(`List with id '${this.selectorSuffix}' was styled with a non-opaque background color. This will break sub-pixel antialiasing.`); - // } } if (styles.listFocusBackground) { diff --git a/src/vs/workbench/contrib/notebook/browser/diff/notebookDiffList.ts b/src/vs/workbench/contrib/notebook/browser/diff/notebookDiffList.ts index cd6bf611535ab..d07f14414960a 100644 --- a/src/vs/workbench/contrib/notebook/browser/diff/notebookDiffList.ts +++ b/src/vs/workbench/contrib/notebook/browser/diff/notebookDiffList.ts @@ -365,11 +365,7 @@ export class NotebookTextDiffList extends WorkbenchList div.monaco-scrollable-element > .monaco-list-rows { background: ${styles.listBackground}; }`); - //} else if (!isMacintosh) { // subpixel AA doesn't exist in macOS - // console.warn(`List with id '${selectorSuffix}' was styled with a non-opaque background color. This will break sub-pixel antialiasing.`); - //} } if (styles.listFocusBackground) { diff --git a/src/vs/workbench/contrib/notebook/browser/view/notebookCellList.ts b/src/vs/workbench/contrib/notebook/browser/view/notebookCellList.ts index 178487e7309a8..ce4f11ea18e6e 100644 --- a/src/vs/workbench/contrib/notebook/browser/view/notebookCellList.ts +++ b/src/vs/workbench/contrib/notebook/browser/view/notebookCellList.ts @@ -1226,11 +1226,7 @@ export class NotebookCellList extends WorkbenchList implements ID const content: string[] = []; if (styles.listBackground) { - //if (styles.listBackground.isOpaque()) { content.push(`.monaco-list${suffix} > div.monaco-scrollable-element > .monaco-list-rows { background: ${styles.listBackground}; }`); - //} else if (!isMacintosh) { // subpixel AA doesn't exist in macOS - // console.warn(`List with id '${selectorSuffix}' was styled with a non-opaque background color. This will break sub-pixel antialiasing.`); - //} } if (styles.listFocusBackground) {