From ab4e8b539897e87c955440d20a0e9cf2c95bb729 Mon Sep 17 00:00:00 2001 From: BeniBenj Date: Fri, 5 Apr 2024 09:33:37 +0200 Subject: [PATCH] Add tree sticky scroll colors based on view location fixes #205441 --- .../lib/stylelint/vscode-known-variables.json | 6 +++ src/vs/base/browser/ui/list/listWidget.ts | 8 ++- src/vs/base/browser/ui/tree/abstractTree.ts | 17 ++++-- src/vs/base/browser/ui/tree/media/tree.css | 9 ++-- src/vs/base/common/types.ts | 5 ++ .../platform/theme/browser/defaultStyles.ts | 6 +++ .../workbench/browser/parts/views/treeView.ts | 9 ++-- .../workbench/browser/parts/views/viewPane.ts | 53 ++++++++++++++----- src/vs/workbench/common/theme.ts | 44 ++++++++++++++- .../contrib/chat/browser/chatViewPane.ts | 6 +-- .../contrib/comments/browser/commentsView.ts | 2 +- .../contrib/debug/browser/breakpointsView.ts | 4 +- .../contrib/debug/browser/callStackView.ts | 4 +- .../debug/browser/loadedScriptsView.ts | 4 +- .../workbench/contrib/debug/browser/repl.ts | 7 ++- .../contrib/debug/browser/variablesView.ts | 4 +- .../debug/browser/watchExpressionsView.ts | 4 +- .../files/browser/views/explorerView.ts | 5 +- .../files/browser/views/openEditorsView.ts | 4 +- .../contrib/markers/browser/markersView.ts | 4 +- .../contrib/outline/browser/outlinePane.ts | 4 +- .../contrib/search/browser/searchView.ts | 4 +- .../contrib/timeline/browser/timelinePane.ts | 4 +- 23 files changed, 148 insertions(+), 69 deletions(-) diff --git a/build/lib/stylelint/vscode-known-variables.json b/build/lib/stylelint/vscode-known-variables.json index b9485913e60..497957a39c5 100644 --- a/build/lib/stylelint/vscode-known-variables.json +++ b/build/lib/stylelint/vscode-known-variables.json @@ -491,6 +491,9 @@ "--vscode-panelTitle-activeBorder", "--vscode-panelTitle-activeForeground", "--vscode-panelTitle-inactiveForeground", + "--vscode-panelStickyScroll-background", + "--vscode-panelStickyScroll-border", + "--vscode-panelStickyScroll-shadow", "--vscode-peekView-border", "--vscode-peekViewEditor-background", "--vscode-peekViewEditor-matchHighlightBackground", @@ -567,6 +570,9 @@ "--vscode-sideBarSectionHeader-foreground", "--vscode-sideBarTitle-background", "--vscode-sideBarTitle-foreground", + "--vscode-sideBarStickyScroll-background", + "--vscode-sideBarStickyScroll-border", + "--vscode-sideBarStickyScroll-shadow", "--vscode-sideBySideEditor-horizontalBorder", "--vscode-sideBySideEditor-verticalBorder", "--vscode-simpleFindWidget-sashBorder", diff --git a/src/vs/base/browser/ui/list/listWidget.ts b/src/vs/base/browser/ui/list/listWidget.ts index d467101fdee..576a0bfa640 100644 --- a/src/vs/base/browser/ui/list/listWidget.ts +++ b/src/vs/base/browser/ui/list/listWidget.ts @@ -1094,6 +1094,9 @@ export interface IListStyles { listHoverOutline: string | undefined; treeIndentGuidesStroke: string | undefined; treeInactiveIndentGuidesStroke: string | undefined; + treeStickyScrollBackground: string | undefined; + treeStickyScrollBorder: string | undefined; + treeStickyScrollShadow: string | undefined; tableColumnsBorder: string | undefined; tableOddRowsBackgroundColor: string | undefined; } @@ -1124,7 +1127,10 @@ export const unthemedListStyles: IListStyles = { listFocusOutline: undefined, listInactiveFocusOutline: undefined, listSelectionOutline: undefined, - listHoverOutline: undefined + listHoverOutline: undefined, + treeStickyScrollBackground: undefined, + treeStickyScrollBorder: undefined, + treeStickyScrollShadow: undefined }; const DefaultOptions: IListOptions = { diff --git a/src/vs/base/browser/ui/tree/abstractTree.ts b/src/vs/base/browser/ui/tree/abstractTree.ts index 4cca51c743b..3a0d3f60da7 100644 --- a/src/vs/base/browser/ui/tree/abstractTree.ts +++ b/src/vs/base/browser/ui/tree/abstractTree.ts @@ -2772,9 +2772,20 @@ export abstract class AbstractTree implements IDisposable } // Sticky Scroll Background - if (styles.listBackground) { - content.push(`.monaco-list${suffix} .monaco-scrollable-element .monaco-tree-sticky-container { background-color: ${styles.listBackground}; }`); - content.push(`.monaco-list${suffix} .monaco-scrollable-element .monaco-tree-sticky-container .monaco-tree-sticky-row { background-color: ${styles.listBackground}; }`); + const stickyScrollBackground = styles.treeStickyScrollBackground ?? styles.listBackground; + if (stickyScrollBackground) { + content.push(`.monaco-list${suffix} .monaco-scrollable-element .monaco-tree-sticky-container { background-color: ${stickyScrollBackground}; }`); + content.push(`.monaco-list${suffix} .monaco-scrollable-element .monaco-tree-sticky-container .monaco-tree-sticky-row { background-color: ${stickyScrollBackground}; }`); + } + + // Sticky Scroll Border + if (styles.treeStickyScrollBorder) { + content.push(`.monaco-list${suffix} .monaco-scrollable-element .monaco-tree-sticky-container { border-bottom: 1px solid ${styles.treeStickyScrollBorder}; }`); + } + + // Sticky Scroll Shadow + if (styles.treeStickyScrollShadow) { + content.push(`.monaco-list${suffix} .monaco-scrollable-element .monaco-tree-sticky-container .monaco-tree-sticky-container-shadow { box-shadow: ${styles.treeStickyScrollShadow} 0 6px 6px -6px inset; height: 3px; }`); } // Sticky Scroll Focus diff --git a/src/vs/base/browser/ui/tree/media/tree.css b/src/vs/base/browser/ui/tree/media/tree.css index a7c3befd964..58099a56c27 100644 --- a/src/vs/base/browser/ui/tree/media/tree.css +++ b/src/vs/base/browser/ui/tree/media/tree.css @@ -137,7 +137,7 @@ height: 0; z-index: 13; /* Settings editor uses z-index: 12 */ - /* TODO@benibenj temporary solution, all lists should provide their background */ + /* Backup color in case the tree does not provide the background color */ background-color: var(--vscode-sideBar-background); } @@ -147,7 +147,7 @@ opacity: 1 !important; /* Settings editor uses opacity < 1 */ overflow: hidden; - /* TODO@benibenj temporary solution, all lists should provide their background */ + /* Backup color in case the tree does not provide the background color */ background-color: var(--vscode-sideBar-background); } @@ -161,13 +161,12 @@ display: none; } -.monaco-list .monaco-scrollable-element .monaco-tree-sticky-container .monaco-tree-sticky-container-shadow{ +.monaco-list .monaco-scrollable-element .monaco-tree-sticky-container .monaco-tree-sticky-container-shadow { position: absolute; bottom: -3px; left: 0px; - height: 3px; + height: 0px; /* heigt is 3px and only set when there is a treeStickyScrollShadow color */ width: 100%; - box-shadow: var(--vscode-scrollbar-shadow) 0 6px 6px -6px inset; } .monaco-list .monaco-scrollable-element .monaco-tree-sticky-container[tabindex="0"]:focus{ diff --git a/src/vs/base/common/types.ts b/src/vs/base/common/types.ts index 1b9a1c0baad..1acab57b758 100644 --- a/src/vs/base/common/types.ts +++ b/src/vs/base/common/types.ts @@ -243,3 +243,8 @@ export type DeepRequiredNonNullable = { export type DeepPartial = { [P in keyof T]?: T[P] extends object ? DeepPartial : Partial; }; + +/** + * Represents a type that is a partial version of a given type `T`, except a subset. + */ +export type PartialExcept = Partial> & Pick; diff --git a/src/vs/platform/theme/browser/defaultStyles.ts b/src/vs/platform/theme/browser/defaultStyles.ts index a455c0ec614..7549840266a 100644 --- a/src/vs/platform/theme/browser/defaultStyles.ts +++ b/src/vs/platform/theme/browser/defaultStyles.ts @@ -174,6 +174,9 @@ export const defaultListStyles: IListStyles = { listHoverOutline: asCssVariable(activeContrastBorder), treeIndentGuidesStroke: asCssVariable(treeIndentGuidesStroke), treeInactiveIndentGuidesStroke: asCssVariable(treeInactiveIndentGuidesStroke), + treeStickyScrollBackground: undefined, + treeStickyScrollBorder: undefined, + treeStickyScrollShadow: undefined, tableColumnsBorder: asCssVariable(tableColumnsBorder), tableOddRowsBackgroundColor: asCssVariable(tableOddRowsBackgroundColor), }; @@ -216,6 +219,9 @@ export const defaultSelectBoxStyles: ISelectBoxStyles = { tableOddRowsBackgroundColor: undefined, treeIndentGuidesStroke: undefined, treeInactiveIndentGuidesStroke: undefined, + treeStickyScrollBackground: undefined, + treeStickyScrollBorder: undefined, + treeStickyScrollShadow: undefined }; export function getSelectBoxStyles(override: IStyleOverride): ISelectBoxStyles { diff --git a/src/vs/workbench/browser/parts/views/treeView.ts b/src/vs/workbench/browser/parts/views/treeView.ts index 0fb0ce9c6ef..2dbd4581cf7 100644 --- a/src/vs/workbench/browser/parts/views/treeView.ts +++ b/src/vs/workbench/browser/parts/views/treeView.ts @@ -55,9 +55,8 @@ import { ThemeIcon } from 'vs/base/common/themables'; import { fillEditorsDragData } from 'vs/workbench/browser/dnd'; import { IResourceLabel, ResourceLabels } from 'vs/workbench/browser/labels'; import { API_OPEN_DIFF_EDITOR_COMMAND_ID, API_OPEN_EDITOR_COMMAND_ID } from 'vs/workbench/browser/parts/editor/editorCommands'; -import { IViewPaneOptions, ViewPane } from 'vs/workbench/browser/parts/views/viewPane'; +import { getLocationBasedViewColors, IViewPaneOptions, ViewPane } from 'vs/workbench/browser/parts/views/viewPane'; import { IViewletViewOptions } from 'vs/workbench/browser/parts/views/viewsViewlet'; -import { PANEL_BACKGROUND, SIDE_BAR_BACKGROUND } from 'vs/workbench/common/theme'; import { Extensions, ITreeItem, ITreeItemLabel, ITreeView, ITreeViewDataProvider, ITreeViewDescriptor, ITreeViewDragAndDropController, IViewBadge, IViewDescriptorService, IViewsRegistry, ResolvableTreeItem, TreeCommand, TreeItemCollapsibleState, TreeViewItemHandleArg, TreeViewPaneHandleArg, ViewContainer, ViewContainerLocation } from 'vs/workbench/common/views'; import { IActivityService, NumberBadge } from 'vs/workbench/services/activity/common/activity'; import { IExtensionService } from 'vs/workbench/services/extensions/common/extensions'; @@ -306,7 +305,7 @@ abstract class AbstractTreeView extends Disposable implements ITreeView { })); this._register(this.viewDescriptorService.onDidChangeLocation(({ views, from, to }) => { if (views.some(v => v.id === this.id)) { - this.tree?.updateOptions({ overrideStyles: { listBackground: this.viewLocation === ViewContainerLocation.Panel ? PANEL_BACKGROUND : SIDE_BAR_BACKGROUND } }); + this.tree?.updateOptions({ overrideStyles: getLocationBasedViewColors(this.viewLocation).listOverrideStyles }); } })); this.registerActions(); @@ -691,9 +690,7 @@ abstract class AbstractTreeView extends Disposable implements ITreeView { }, multipleSelectionSupport: this.canSelectMany, dnd: this.treeViewDnd, - overrideStyles: { - listBackground: this.viewLocation === ViewContainerLocation.Panel ? PANEL_BACKGROUND : SIDE_BAR_BACKGROUND - } + overrideStyles: getLocationBasedViewColors(this.viewLocation).listOverrideStyles }) as WorkbenchAsyncDataTree); treeMenus.setContextKeyService(this.tree.contextKeyService); aligner.tree = this.tree; diff --git a/src/vs/workbench/browser/parts/views/viewPane.ts b/src/vs/workbench/browser/parts/views/viewPane.ts index 58ec3cb7e0d..de4558ab75b 100644 --- a/src/vs/workbench/browser/parts/views/viewPane.ts +++ b/src/vs/workbench/browser/parts/views/viewPane.ts @@ -7,7 +7,6 @@ import 'vs/css!./media/paneviewlet'; import * as nls from 'vs/nls'; import { Event, Emitter } from 'vs/base/common/event'; import { asCssVariable, foreground } from 'vs/platform/theme/common/colorRegistry'; -import { PANEL_BACKGROUND, SIDE_BAR_BACKGROUND } from 'vs/workbench/common/theme'; import { after, append, $, trackFocus, EventType, addDisposableListener, createCSSRule, asCSSUrl, Dimension, reset, asCssValueWithDefault } from 'vs/base/browser/dom'; import { DisposableStore, toDisposable } from 'vs/base/common/lifecycle'; import { Action, IAction, IActionRunner } from 'vs/base/common/actions'; @@ -23,7 +22,7 @@ import { IConfigurationService } from 'vs/platform/configuration/common/configur import { Extensions as ViewContainerExtensions, IView, IViewDescriptorService, ViewContainerLocation, IViewsRegistry, IViewContentDescriptor, defaultViewIcon, ViewContainerLocationToString } from 'vs/workbench/common/views'; import { IViewsService } from 'vs/workbench/services/views/common/viewsService'; import { IContextKeyService } from 'vs/platform/contextkey/common/contextkey'; -import { assertIsDefined } from 'vs/base/common/types'; +import { assertIsDefined, PartialExcept } from 'vs/base/common/types'; import { IInstantiationService, ServicesAccessor } from 'vs/platform/instantiation/common/instantiation'; import { MenuId, Action2, IAction2Options, SubmenuItemAction } from 'vs/platform/actions/common/actions'; import { createActionViewItem } from 'vs/platform/actions/browser/menuEntryActionViewItem'; @@ -51,6 +50,8 @@ import { getDefaultHoverDelegate } from 'vs/base/browser/ui/hover/hoverDelegateF import { ILifecycleService } from 'vs/workbench/services/lifecycle/common/lifecycle'; import type { IUpdatableHover } from 'vs/base/browser/ui/hover/hover'; import { IHoverService } from 'vs/platform/hover/browser/hover'; +import { IListStyles } from 'vs/base/browser/ui/list/listWidget'; +import { PANEL_BACKGROUND, PANEL_STICKY_SCROLL_BACKGROUND, PANEL_STICKY_SCROLL_BORDER, PANEL_STICKY_SCROLL_SHADOW, SIDE_BAR_BACKGROUND, SIDE_BAR_STICKY_SCROLL_BACKGROUND, SIDE_BAR_STICKY_SCROLL_BORDER, SIDE_BAR_STICKY_SCROLL_SHADOW } from 'vs/workbench/common/theme'; export enum ViewPaneShowActions { /** Show the actions when the view is hovered. This is the default behavior. */ @@ -629,16 +630,8 @@ export abstract class ViewPane extends Pane implements IView { return this.viewDescriptorService.getViewContainerByViewId(this.id)!.id; } - protected getBackgroundColor(): string { - switch (this.viewDescriptorService.getViewLocationById(this.id)) { - case ViewContainerLocation.Panel: - return PANEL_BACKGROUND; - case ViewContainerLocation.Sidebar: - case ViewContainerLocation.AuxiliaryBar: - return SIDE_BAR_BACKGROUND; - } - - return SIDE_BAR_BACKGROUND; + protected getLocationBasedColors(): IViewPaneLocationColors { + return getLocationBasedViewColors(this.viewDescriptorService.getViewLocationById(this.id)); } focus(): void { @@ -781,6 +774,42 @@ export abstract class FilterViewPane extends ViewPane { } +export interface IViewPaneLocationColors { + background: string; + listOverrideStyles: PartialExcept; +} + +export function getLocationBasedViewColors(location: ViewContainerLocation | null): IViewPaneLocationColors { + let background, stickyScrollBackground, stickyScrollBorder, stickyScrollShadow; + + switch (location) { + case ViewContainerLocation.Panel: + background = PANEL_BACKGROUND; + stickyScrollBackground = PANEL_STICKY_SCROLL_BACKGROUND; + stickyScrollBorder = PANEL_STICKY_SCROLL_BORDER; + stickyScrollShadow = PANEL_STICKY_SCROLL_SHADOW; + break; + + case ViewContainerLocation.Sidebar: + case ViewContainerLocation.AuxiliaryBar: + default: + background = SIDE_BAR_BACKGROUND; + stickyScrollBackground = SIDE_BAR_STICKY_SCROLL_BACKGROUND; + stickyScrollBorder = SIDE_BAR_STICKY_SCROLL_BORDER; + stickyScrollShadow = SIDE_BAR_STICKY_SCROLL_SHADOW; + } + + return { + background, + listOverrideStyles: { + listBackground: background, + treeStickyScrollBackground: stickyScrollBackground, + treeStickyScrollBorder: stickyScrollBorder, + treeStickyScrollShadow: stickyScrollShadow + } + }; +} + export abstract class ViewAction extends Action2 { override readonly desc: Readonly & { viewId: string }; constructor(desc: Readonly & { viewId: string }) { diff --git a/src/vs/workbench/common/theme.ts b/src/vs/workbench/common/theme.ts index 371be7dc87c..9a0f4dda2c5 100644 --- a/src/vs/workbench/common/theme.ts +++ b/src/vs/workbench/common/theme.ts @@ -4,7 +4,7 @@ *--------------------------------------------------------------------------------------------*/ import { localize } from 'vs/nls'; -import { registerColor, editorBackground, contrastBorder, transparent, editorWidgetBackground, textLinkForeground, lighten, darken, focusBorder, activeContrastBorder, editorWidgetForeground, editorErrorForeground, editorWarningForeground, editorInfoForeground, treeIndentGuidesStroke, errorForeground, listActiveSelectionBackground, listActiveSelectionForeground, editorForeground, toolbarHoverBackground, inputBorder, widgetBorder } from 'vs/platform/theme/common/colorRegistry'; +import { registerColor, editorBackground, contrastBorder, transparent, editorWidgetBackground, textLinkForeground, lighten, darken, focusBorder, activeContrastBorder, editorWidgetForeground, editorErrorForeground, editorWarningForeground, editorInfoForeground, treeIndentGuidesStroke, errorForeground, listActiveSelectionBackground, listActiveSelectionForeground, editorForeground, toolbarHoverBackground, inputBorder, widgetBorder, scrollbarShadow } from 'vs/platform/theme/common/colorRegistry'; import { IColorTheme } from 'vs/platform/theme/common/themeService'; import { Color } from 'vs/base/common/color'; import { ColorScheme } from 'vs/platform/theme/common/theme'; @@ -411,6 +411,27 @@ export const PANEL_SECTION_BORDER = registerColor('panelSection.border', { hcLight: PANEL_BORDER }, localize('panelSectionBorder', "Panel section border color used when multiple views are stacked horizontally in the panel. Panels are shown below the editor area and contain views like output and integrated terminal. Panel sections are views nested within the panels.")); +export const PANEL_STICKY_SCROLL_BACKGROUND = registerColor('panelStickyScroll.background', { + dark: PANEL_BACKGROUND, + light: PANEL_BACKGROUND, + hcDark: PANEL_BACKGROUND, + hcLight: PANEL_BACKGROUND +}, localize('panelStickyScrollBackground', "Background color of sticky scroll in the panel.")); + +export const PANEL_STICKY_SCROLL_BORDER = registerColor('panelStickyScroll.border', { + dark: null, + light: null, + hcDark: null, + hcLight: null +}, localize('panelStickyScrollBorder', "Border color of sticky scroll in the panel.")); + +export const PANEL_STICKY_SCROLL_SHADOW = registerColor('panelStickyScroll.shadow', { + dark: scrollbarShadow, + light: scrollbarShadow, + hcDark: scrollbarShadow, + hcLight: scrollbarShadow +}, localize('panelStickyScrollShadow', "Shadow color of sticky scroll in the panel.")); + // < --- Output Editor --> const OUTPUT_VIEW_BACKGROUND = registerColor('outputView.background', { @@ -899,6 +920,27 @@ export const ACTIVITY_BAR_TOP_BORDER = registerColor('sideBarActivityBarTop.bord hcLight: SIDE_BAR_SECTION_HEADER_BORDER }, localize('sideBarActivityBarTopBorder', "Border color between the activity bar at the top/bottom and the views.")); +export const SIDE_BAR_STICKY_SCROLL_BACKGROUND = registerColor('sideBarStickyScroll.background', { + dark: SIDE_BAR_BACKGROUND, + light: SIDE_BAR_BACKGROUND, + hcDark: SIDE_BAR_BACKGROUND, + hcLight: SIDE_BAR_BACKGROUND +}, localize('sideBarStickyScrollBackground', "Background color of sticky scroll in the side bar.")); + +export const SIDE_BAR_STICKY_SCROLL_BORDER = registerColor('sideBarStickyScroll.border', { + dark: null, + light: null, + hcDark: null, + hcLight: null +}, localize('sideBarStickyScrollBorder', "Border color of sticky scroll in the side bar.")); + +export const SIDE_BAR_STICKY_SCROLL_SHADOW = registerColor('sideBarStickyScroll.shadow', { + dark: scrollbarShadow, + light: scrollbarShadow, + hcDark: scrollbarShadow, + hcLight: scrollbarShadow +}, localize('sideBarStickyScrollShadow', "Shadow color of sticky scroll in the side bar.")); + // < --- Title Bar --- > export const TITLE_BAR_ACTIVE_FOREGROUND = registerColor('titleBar.activeForeground', { diff --git a/src/vs/workbench/contrib/chat/browser/chatViewPane.ts b/src/vs/workbench/contrib/chat/browser/chatViewPane.ts index 8c4ef93c187..1e78bfee508 100644 --- a/src/vs/workbench/contrib/chat/browser/chatViewPane.ts +++ b/src/vs/workbench/contrib/chat/browser/chatViewPane.ts @@ -133,7 +133,7 @@ export class ChatViewPane extends ViewPane implements IChatViewPane { super.renderBody(parent); const scopedInstantiationService = this.instantiationService.createChild(new ServiceCollection([IContextKeyService, this.scopedContextKeyService])); - + const locationBasedColors = this.getLocationBasedColors(); this._widget = this._register(scopedInstantiationService.createInstance( ChatWidget, ChatAgentLocation.Panel, @@ -141,8 +141,8 @@ export class ChatViewPane extends ViewPane implements IChatViewPane { { supportsFileReferences: true }, { listForeground: SIDE_BAR_FOREGROUND, - listBackground: this.getBackgroundColor(), - inputEditorBackground: this.getBackgroundColor(), + listBackground: locationBasedColors.background, + inputEditorBackground: locationBasedColors.background, resultEditorBackground: editorBackground })); this._register(this.onDidChangeBodyVisibility(visible => { diff --git a/src/vs/workbench/contrib/comments/browser/commentsView.ts b/src/vs/workbench/contrib/comments/browser/commentsView.ts index 7fd7be8c9e1..d5d52c4c07e 100644 --- a/src/vs/workbench/contrib/comments/browser/commentsView.ts +++ b/src/vs/workbench/contrib/comments/browser/commentsView.ts @@ -306,7 +306,7 @@ export class CommentsPanel extends FilterViewPane implements ICommentsView { private createTree(): void { this.treeLabels = this._register(this.instantiationService.createInstance(ResourceLabels, this)); this.tree = this._register(this.instantiationService.createInstance(CommentsList, this.treeLabels, this.treeContainer, { - overrideStyles: { listBackground: this.getBackgroundColor() }, + overrideStyles: this.getLocationBasedColors().listOverrideStyles, selectionNavigation: true, filter: this.filter, keyboardNavigationLabelProvider: { diff --git a/src/vs/workbench/contrib/debug/browser/breakpointsView.ts b/src/vs/workbench/contrib/debug/browser/breakpointsView.ts index 3954a60aebd..8b989fb46f4 100644 --- a/src/vs/workbench/contrib/debug/browser/breakpointsView.ts +++ b/src/vs/workbench/contrib/debug/browser/breakpointsView.ts @@ -152,9 +152,7 @@ export class BreakpointsView extends ViewPane { multipleSelectionSupport: false, keyboardNavigationLabelProvider: { getKeyboardNavigationLabel: (e: IEnablement) => e }, accessibilityProvider: new BreakpointsAccessibilityProvider(this.debugService, this.labelService), - overrideStyles: { - listBackground: this.getBackgroundColor() - } + overrideStyles: this.getLocationBasedColors().listOverrideStyles }) as WorkbenchList; CONTEXT_BREAKPOINTS_FOCUSED.bindTo(this.list.contextKeyService); diff --git a/src/vs/workbench/contrib/debug/browser/callStackView.ts b/src/vs/workbench/contrib/debug/browser/callStackView.ts index 0742030429d..80bdc5ffbd8 100644 --- a/src/vs/workbench/contrib/debug/browser/callStackView.ts +++ b/src/vs/workbench/contrib/debug/browser/callStackView.ts @@ -280,9 +280,7 @@ export class CallStackView extends ViewPane { } }, expandOnlyOnTwistieClick: true, - overrideStyles: { - listBackground: this.getBackgroundColor() - } + overrideStyles: this.getLocationBasedColors().listOverrideStyles }); this.tree.setInput(this.debugService.getModel()); diff --git a/src/vs/workbench/contrib/debug/browser/loadedScriptsView.ts b/src/vs/workbench/contrib/debug/browser/loadedScriptsView.ts index cfe163dc24e..4a89bd7b40a 100644 --- a/src/vs/workbench/contrib/debug/browser/loadedScriptsView.ts +++ b/src/vs/workbench/contrib/debug/browser/loadedScriptsView.ts @@ -483,9 +483,7 @@ export class LoadedScriptsView extends ViewPane { }, filter: this.filter, accessibilityProvider: new LoadedSciptsAccessibilityProvider(), - overrideStyles: { - listBackground: this.getBackgroundColor() - } + overrideStyles: this.getLocationBasedColors().listOverrideStyles } ); diff --git a/src/vs/workbench/contrib/debug/browser/repl.ts b/src/vs/workbench/contrib/debug/browser/repl.ts index b3b81ec6832..c5cc70ef2c7 100644 --- a/src/vs/workbench/contrib/debug/browser/repl.ts +++ b/src/vs/workbench/contrib/debug/browser/repl.ts @@ -155,7 +155,7 @@ export class Repl extends FilterViewPane implements IHistoryNavigationWidget { this.filter = new ReplFilter(); this.filter.filterQuery = filterText; this.multiSessionRepl = CONTEXT_MULTI_SESSION_REPL.bindTo(contextKeyService); - this.replOptions = this._register(this.instantiationService.createInstance(ReplOptions, this.id, () => this.getBackgroundColor())); + this.replOptions = this._register(this.instantiationService.createInstance(ReplOptions, this.id, () => this.getLocationBasedColors().background)); this._register(this.replOptions.onDidChange(() => this.onDidStyleChange())); codeEditorService.registerDecorationType('repl-decoration', DECORATION_KEY, {}); @@ -615,6 +615,7 @@ export class Repl extends FilterViewPane implements IHistoryNavigationWidget { const wordWrap = this.configurationService.getValue('debug').console.wordWrap; this.treeContainer.classList.toggle('word-wrap', wordWrap); const linkDetector = this.instantiationService.createInstance(LinkDetector); + const tree = this.tree = >this.instantiationService.createInstance( WorkbenchAsyncDataTree, 'DebugRepl', @@ -640,9 +641,7 @@ export class Repl extends FilterViewPane implements IHistoryNavigationWidget { horizontalScrolling: !wordWrap, setRowLineHeight: false, supportDynamicHeights: wordWrap, - overrideStyles: { - listBackground: this.getBackgroundColor() - } + overrideStyles: this.getLocationBasedColors().listOverrideStyles }); this._register(tree.onDidChangeContentHeight(() => { diff --git a/src/vs/workbench/contrib/debug/browser/variablesView.ts b/src/vs/workbench/contrib/debug/browser/variablesView.ts index 5e1ebf06c29..5dc2a66b073 100644 --- a/src/vs/workbench/contrib/debug/browser/variablesView.ts +++ b/src/vs/workbench/contrib/debug/browser/variablesView.ts @@ -134,9 +134,7 @@ export class VariablesView extends ViewPane { accessibilityProvider: new VariablesAccessibilityProvider(), identityProvider: { getId: (element: IExpression | IScope) => element.getId() }, keyboardNavigationLabelProvider: { getKeyboardNavigationLabel: (e: IExpression | IScope) => e.name }, - overrideStyles: { - listBackground: this.getBackgroundColor() - } + overrideStyles: this.getLocationBasedColors().listOverrideStyles }); this._register(VisualizedVariableRenderer.rendererOnVisualizationRange(this.debugService.getViewModel(), this.tree)); diff --git a/src/vs/workbench/contrib/debug/browser/watchExpressionsView.ts b/src/vs/workbench/contrib/debug/browser/watchExpressionsView.ts index bbdc2dc7331..8c6ec806b3a 100644 --- a/src/vs/workbench/contrib/debug/browser/watchExpressionsView.ts +++ b/src/vs/workbench/contrib/debug/browser/watchExpressionsView.ts @@ -109,9 +109,7 @@ export class WatchExpressionsView extends ViewPane { } }, dnd: new WatchExpressionsDragAndDrop(this.debugService), - overrideStyles: { - listBackground: this.getBackgroundColor() - } + overrideStyles: this.getLocationBasedColors().listOverrideStyles }); this.tree.setInput(this.debugService); CONTEXT_WATCH_EXPRESSIONS_FOCUSED.bindTo(this.tree.contextKeyService); diff --git a/src/vs/workbench/contrib/files/browser/views/explorerView.ts b/src/vs/workbench/contrib/files/browser/views/explorerView.ts index 485849eb799..c2cb471a91e 100644 --- a/src/vs/workbench/contrib/files/browser/views/explorerView.ts +++ b/src/vs/workbench/contrib/files/browser/views/explorerView.ts @@ -42,7 +42,6 @@ import { IClipboardService } from 'vs/platform/clipboard/common/clipboardService import { IFileService, FileSystemProviderCapabilities } from 'vs/platform/files/common/files'; import { IDisposable } from 'vs/base/common/lifecycle'; import { Event } from 'vs/base/common/event'; -import { SIDE_BAR_BACKGROUND } from 'vs/workbench/common/theme'; import { IViewDescriptorService } from 'vs/workbench/common/views'; import { IViewsService } from 'vs/workbench/services/views/common/viewsService'; import { IOpenerService } from 'vs/platform/opener/common/opener'; @@ -490,9 +489,7 @@ export class ExplorerView extends ViewPane implements IExplorerView { return false; }, paddingBottom: ExplorerDelegate.ITEM_HEIGHT, - overrideStyles: { - listBackground: SIDE_BAR_BACKGROUND - } + overrideStyles: this.getLocationBasedColors().listOverrideStyles }); this._register(this.tree); this._register(this.themeService.onDidColorThemeChange(() => this.tree.rerender())); diff --git a/src/vs/workbench/contrib/files/browser/views/openEditorsView.ts b/src/vs/workbench/contrib/files/browser/views/openEditorsView.ts index 2215775002d..569a1201c45 100644 --- a/src/vs/workbench/contrib/files/browser/views/openEditorsView.ts +++ b/src/vs/workbench/contrib/files/browser/views/openEditorsView.ts @@ -210,9 +210,7 @@ export class OpenEditorsView extends ViewPane { ], { identityProvider: { getId: (element: OpenEditor | IEditorGroup) => element instanceof OpenEditor ? element.getId() : element.id.toString() }, dnd: this.dnd, - overrideStyles: { - listBackground: this.getBackgroundColor() - }, + overrideStyles: this.getLocationBasedColors().listOverrideStyles, accessibilityProvider: new OpenEditorsAccessibilityProvider() }) as WorkbenchList; this._register(this.list); diff --git a/src/vs/workbench/contrib/markers/browser/markersView.ts b/src/vs/workbench/contrib/markers/browser/markersView.ts index f655fb1b43f..b63f6ee893c 100644 --- a/src/vs/workbench/contrib/markers/browser/markersView.ts +++ b/src/vs/workbench/contrib/markers/browser/markersView.ts @@ -501,9 +501,7 @@ export class MarkersView extends FilterViewPane implements IMarkersView { return null; }), expandOnlyOnTwistieClick: (e: MarkerElement) => e instanceof Marker && e.relatedInformation.length > 0, - overrideStyles: { - listBackground: this.getBackgroundColor() - }, + overrideStyles: this.getLocationBasedColors().listOverrideStyles, selectionNavigation: true, multipleSelectionSupport: true, }, diff --git a/src/vs/workbench/contrib/outline/browser/outlinePane.ts b/src/vs/workbench/contrib/outline/browser/outlinePane.ts index 4ed3ec67ba4..33192e08dc2 100644 --- a/src/vs/workbench/contrib/outline/browser/outlinePane.ts +++ b/src/vs/workbench/contrib/outline/browser/outlinePane.ts @@ -266,7 +266,7 @@ export class OutlinePane extends ViewPane implements IOutlinePane { multipleSelectionSupport: false, hideTwistiesOfChildlessElements: true, defaultFindMode: this._outlineViewState.filterOnType ? TreeFindMode.Filter : TreeFindMode.Highlight, - overrideStyles: { listBackground: this.getBackgroundColor() } + overrideStyles: this.getLocationBasedColors().listOverrideStyles } ); @@ -297,7 +297,7 @@ export class OutlinePane extends ViewPane implements IOutlinePane { // feature: apply panel background to tree this._editorControlDisposables.add(this.viewDescriptorService.onDidChangeLocation(({ views }) => { if (views.some(v => v.id === this.id)) { - tree.updateOptions({ overrideStyles: { listBackground: this.getBackgroundColor() } }); + tree.updateOptions({ overrideStyles: this.getLocationBasedColors().listOverrideStyles }); } })); diff --git a/src/vs/workbench/contrib/search/browser/searchView.ts b/src/vs/workbench/contrib/search/browser/searchView.ts index d91c1c7ccdc..74c80973c42 100644 --- a/src/vs/workbench/contrib/search/browser/searchView.ts +++ b/src/vs/workbench/contrib/search/browser/searchView.ts @@ -957,9 +957,7 @@ export class SearchView extends ViewPane { }), multipleSelectionSupport: true, selectionNavigation: true, - overrideStyles: { - listBackground: this.getBackgroundColor() - }, + overrideStyles: this.getLocationBasedColors().listOverrideStyles, paddingBottom: SearchDelegate.ITEM_HEIGHT })); this._register(this.tree.onContextMenu(e => this.onContextMenu(e))); diff --git a/src/vs/workbench/contrib/timeline/browser/timelinePane.ts b/src/vs/workbench/contrib/timeline/browser/timelinePane.ts index aa6e5d5f833..da641eb458e 100644 --- a/src/vs/workbench/contrib/timeline/browser/timelinePane.ts +++ b/src/vs/workbench/contrib/timeline/browser/timelinePane.ts @@ -937,9 +937,7 @@ export class TimelinePane extends ViewPane { }, keyboardNavigationLabelProvider: new TimelineKeyboardNavigationLabelProvider(), multipleSelectionSupport: false, - overrideStyles: { - listBackground: this.getBackgroundColor() - } + overrideStyles: this.getLocationBasedColors().listOverrideStyles, }); this._register(this.tree.onContextMenu(e => this.onContextMenu(this.commands, e)));