diff --git a/src/vs/base/browser/ui/list/listWidget.ts b/src/vs/base/browser/ui/list/listWidget.ts index b5ebe1858be..f96d910f6b6 100644 --- a/src/vs/base/browser/ui/list/listWidget.ts +++ b/src/vs/base/browser/ui/list/listWidget.ts @@ -414,6 +414,9 @@ export interface IListStyles { listHoverBackground?: Color; listDropBackground?: Color; listFocusOutline?: Color; + listInactiveFocusOutline?: Color; + listSelectionOutline?: Color; + listHoverOutline?: Color; } const defaultStyles: IListStyles = { @@ -423,7 +426,6 @@ const defaultStyles: IListStyles = { listFocusAndSelectionBackground: Color.fromHex('#094771'), listFocusAndSelectionForeground: Color.fromHex('#FFFFFF'), listInactiveSelectionBackground: Color.fromHex('#3F3F46'), - listInactiveFocusBackground: Color.transparent, listHoverBackground: Color.fromHex('#2A2D2E'), listDropBackground: Color.fromHex('#383B3D') }; @@ -809,27 +811,44 @@ export class List implements ISpliceable, IDisposable { } style(styles: IListStyles): void { - - // Indicate selection/focus via background color - if (!styles.listFocusOutline) { - this.styleElement.innerHTML = ` - .monaco-list.${this.idPrefix}:focus .monaco-list-row.focused { background-color: ${styles.listFocusBackground}; } - .monaco-list.${this.idPrefix}:focus .monaco-list-row.selected { background-color: ${styles.listActiveSelectionBackground}; color: ${styles.listActiveSelectionForeground}; } - .monaco-list.${this.idPrefix}:focus .monaco-list-row.selected.focused { background-color: ${styles.listFocusAndSelectionBackground}; color: ${styles.listFocusAndSelectionForeground}; } - .monaco-list.${this.idPrefix} .monaco-list-row.focused { background-color: ${styles.listInactiveFocusBackground}; } - .monaco-list.${this.idPrefix} .monaco-list-row.selected { background-color: ${styles.listInactiveSelectionBackground}; } - .monaco-list.${this.idPrefix} .monaco-list-row:hover { background-color: ${styles.listHoverBackground}; } - `; + let content = ''; + if (styles.listFocusBackground) { + content += `.monaco-list.${this.idPrefix}:focus .monaco-list-row.focused { background-color: ${styles.listFocusBackground}; }`; } - - // Indicate selection/focus via outline - else { - this.styleElement.innerHTML = ` - .monaco-list.${this.idPrefix} .monaco-list-row.selected { outline: 1px dotted ${styles.listFocusOutline}; color: white; } - .monaco-list.${this.idPrefix}:focus .monaco-list-row.focused { outline: 1px solid ${styles.listFocusOutline}; outline-offset: -1px; background: transparent } - .monaco-list.${this.idPrefix} .monaco-list-row:hover { outline: 1px dashed ${styles.listFocusOutline}; outline-offset: -1px; background: transparent; } - `; + if (styles.listActiveSelectionBackground) { + content += `.monaco-list.${this.idPrefix}:focus .monaco-list-row.selected { background-color: ${styles.listActiveSelectionBackground}; }`; } + if (styles.listActiveSelectionForeground) { + content += `.monaco-list.${this.idPrefix}:focus .monaco-list-row.selected { color: ${styles.listActiveSelectionForeground}; }`; + } + if (styles.listFocusAndSelectionBackground) { + content += `.monaco-list.${this.idPrefix}:focus .monaco-list-row.selected.focused { background-color: ${styles.listFocusAndSelectionBackground}; }`; + } + if (styles.listFocusAndSelectionForeground) { + content += `.monaco-list.${this.idPrefix}:focus .monaco-list-row.selected.focused { color: ${styles.listFocusAndSelectionForeground}; }`; + } + if (styles.listInactiveFocusBackground) { + content += `.monaco-list.${this.idPrefix} .monaco-list-row.focused { background-color: ${styles.listInactiveFocusBackground}; }`; + } + if (styles.listInactiveSelectionBackground) { + content += `.monaco-list.${this.idPrefix} .monaco-list-row.selected { background-color: ${styles.listInactiveSelectionBackground}; }`; + } + if (styles.listHoverBackground) { + content += `.monaco-list.${this.idPrefix} .monaco-list-row:hover { background-color: ${styles.listHoverBackground}; }`; + } + if (styles.listSelectionOutline) { + content += `.monaco-list.${this.idPrefix} .monaco-list-row.selected { outline: 1px dotted ${styles.listSelectionOutline}; }`; + } + if (styles.listFocusOutline) { + content += `.monaco-list.${this.idPrefix}:focus .monaco-list-row.focused { outline: 1px solid ${styles.listFocusOutline}; outline-offset: -1px; }`; + } + if (styles.listInactiveFocusOutline) { + content += `.monaco-list.${this.idPrefix} .monaco-list-row.focused { outline: 1px dotted ${styles.listInactiveFocusOutline}; outline-offset: -1px; }`; + } + if (styles.listHoverOutline) { + content += `.monaco-list.${this.idPrefix} .monaco-list-row:hover { outline: 1px dashed ${styles.listHoverOutline}; outline-offset: -1px; }`; + } + this.styleElement.innerHTML = content; } private toListEvent({ indexes }: ITraitChangeEvent) { diff --git a/src/vs/editor/contrib/suggest/browser/suggestWidget.ts b/src/vs/editor/contrib/suggest/browser/suggestWidget.ts index b9cc8ea2a62..d31a073ffe2 100644 --- a/src/vs/editor/contrib/suggest/browser/suggestWidget.ts +++ b/src/vs/editor/contrib/suggest/browser/suggestWidget.ts @@ -29,7 +29,7 @@ import { alert } from 'vs/base/browser/ui/aria/aria'; import { ITelemetryService } from 'vs/platform/telemetry/common/telemetry'; import { attachListStyler } from "vs/platform/theme/common/styler"; import { IThemeService, ITheme } from "vs/platform/theme/common/themeService"; -import { registerColor, editorWidgetBackground, highContrastBorder, listFocusBackground } from "vs/platform/theme/common/colorRegistry"; +import { registerColor, editorWidgetBackground, highContrastBorder, listFocusBackground, listFocusOutline } from "vs/platform/theme/common/colorRegistry"; const sticky = false; // for development purposes @@ -383,7 +383,7 @@ export class SuggestWidget implements IContentWidget, IDelegate }); this.toDispose = [ - attachListStyler(this.list, themeService, { listInactiveFocusBackground: listFocusBackground }), + attachListStyler(this.list, themeService, { listInactiveFocusBackground: listFocusBackground, listInactiveFocusOutline: listFocusOutline }), themeService.onThemeChange(t => this.onThemeChange(t)), editor.onDidBlurEditorText(() => this.onEditorBlur()), this.list.onSelectionChange(e => this.onListSelection(e)), diff --git a/src/vs/platform/theme/common/colorRegistry.ts b/src/vs/platform/theme/common/colorRegistry.ts index 7a3aa739ffc..282a0d33ad2 100644 --- a/src/vs/platform/theme/common/colorRegistry.ts +++ b/src/vs/platform/theme/common/colorRegistry.ts @@ -144,15 +144,20 @@ export const selectBackground = registerColor('dropdownBackground', { dark: '#3C export const selectForeground = registerColor('dropdownForeground', { dark: '#F0F0F0', light: null, hc: Color.white }, nls.localize('dropdownForeground', "Dropdown foreground.")); export const selectBorder = registerColor('dropdownBorder', { dark: selectBackground, light: '#CECECE', hc: selectBackground }, nls.localize('dropdownBorder', "Dropdown border.")); -export const listFocusBackground = registerColor('listFocusBackground', { dark: '#073655', light: '#DCEBFC', hc: null }, nls.localize('listFocusBackground', "List/Tree focus background when active")); -export const listInactiveFocusBackground = registerColor('listInactiveFocusBackground', { dark: null, light: null, hc: null }, nls.localize('listInactiveFocusBackground', "List/Tree focus background when inactive")); -export const listActiveSelectionBackground = registerColor('listActiveSelectionBackground', { dark: '#0E639C', light: '#4FA7FF', hc: null }, nls.localize('listActiveSelectionBackground', "List/Tree selection background when active")); -export const listActiveSelectionForeground = registerColor('listActiveSelectionForeground', { dark: Color.white, light: Color.white, hc: null }, nls.localize('listActiveSelectionForeground', "List/Tree selection foreground when active")); -export const listFocusAndSelectionBackground = registerColor('listFocusAndSelectionBackground', { dark: '#094771', light: '#3399FF', hc: null }, nls.localize('listFocusAndSelectionBackground', "List/Tree focus and selection background")); -export const listFocusAndSelectionForeground = registerColor('listFocusAndSelectionForeground', { dark: Color.white, light: Color.white, hc: null }, nls.localize('listFocusAndSelectionForeground', "List/Tree focus and selection foreground")); -export const listInactiveSelectionBackground = registerColor('listInactiveSelectionBackground', { dark: '#3F3F46', light: '#CCCEDB', hc: null }, nls.localize('listInactiveSelectionBackground', "List/Tree selection background when inactive")); -export const listHoverBackground = registerColor('listHoverBackground', { dark: '#2A2D2E', light: '#F0F0F0', hc: null }, nls.localize('listHoverBackground', "List/Tree hover background")); -export const listDropBackground = registerColor('listDropBackground', { dark: '#383B3D', light: '#DDECFF', hc: null }, nls.localize('listDropBackground', "List/Tree drag and drop background")); +export const listFocusBackground = registerColor('listFocusBackground', { dark: '#073655', light: '#DCEBFC', hc: null }, nls.localize('listFocusBackground', "List/Tree focus background when active.")); +export const listInactiveFocusBackground = registerColor('listInactiveFocusBackground', { dark: null, light: null, hc: null }, nls.localize('listInactiveFocusBackground', "List/Tree focus background when inactive.")); +export const listActiveSelectionBackground = registerColor('listActiveSelectionBackground', { dark: '#0E639C', light: '#4FA7FF', hc: null }, nls.localize('listActiveSelectionBackground', "List/Tree selection background when active.")); +export const listActiveSelectionForeground = registerColor('listActiveSelectionForeground', { dark: Color.white, light: Color.white, hc: Color.white }, nls.localize('listActiveSelectionForeground', "List/Tree selection foreground when active.")); +export const listFocusAndSelectionBackground = registerColor('listFocusAndSelectionBackground', { dark: '#094771', light: '#3399FF', hc: null }, nls.localize('listFocusAndSelectionBackground', "List/Tree focus and selection background.")); +export const listFocusAndSelectionForeground = registerColor('listFocusAndSelectionForeground', { dark: Color.white, light: Color.white, hc: Color.white }, nls.localize('listFocusAndSelectionForeground', "List/Tree focus and selection foreground.")); +export const listInactiveSelectionBackground = registerColor('listInactiveSelectionBackground', { dark: '#3F3F46', light: '#CCCEDB', hc: null }, nls.localize('listInactiveSelectionBackground', "List/Tree selection background when inactive.")); +export const listHoverBackground = registerColor('listHoverBackground', { dark: '#2A2D2E', light: '#F0F0F0', hc: null }, nls.localize('listHoverBackground', "List/Tree hover background.")); +export const listDropBackground = registerColor('listDropBackground', { dark: '#383B3D', light: '#DDECFF', hc: null }, nls.localize('listDropBackground', "List/Tree drag and drop background.")); + +export const listFocusOutline = registerColor('listFocusOutline', { dark: null, light: null, hc: highContrastOutline }, nls.localize('listFocusOutline', "List/Tree focus outline color when active.")); +export const listInactiveFocusOutline = registerColor('listInactiveFocusOutline', { dark: null, light: null, hc: null }, nls.localize('listInactiveFocusOutline', "List/Tree focus outline color when inactive.")); +export const listSelectionOutline = registerColor('listSelectionOutline', { dark: null, light: null, hc: highContrastOutline }, nls.localize('listSelectionOutline', "List/Tree selection outline color.")); +export const listHoverOutline = registerColor('listHoverOutline', { dark: null, light: null, hc: highContrastOutline }, nls.localize('listHoverOutline', "List/Tree hover outline color.")); /** * Editor background color. diff --git a/src/vs/platform/theme/common/styler.ts b/src/vs/platform/theme/common/styler.ts index 90ae2b09594..5061d7d845e 100644 --- a/src/vs/platform/theme/common/styler.ts +++ b/src/vs/platform/theme/common/styler.ts @@ -6,7 +6,7 @@ 'use strict'; import { ITheme, IThemeService } from 'vs/platform/theme/common/themeService'; -import { inputBackground, inputForeground, ColorIdentifier, selectForeground, selectBackground, selectBorder, inputBorder, foreground, editorBackground, highContrastBorder, inputActiveOptionBorder, listFocusBackground, listActiveSelectionBackground, listActiveSelectionForeground, listFocusAndSelectionBackground, listFocusAndSelectionForeground, listInactiveFocusBackground, listInactiveSelectionBackground, listHoverBackground, listDropBackground, highContrastOutline } from 'vs/platform/theme/common/colorRegistry'; +import { inputBackground, inputForeground, ColorIdentifier, selectForeground, selectBackground, selectBorder, inputBorder, foreground, editorBackground, highContrastBorder, inputActiveOptionBorder, listFocusBackground, listActiveSelectionBackground, listActiveSelectionForeground, listFocusAndSelectionBackground, listFocusAndSelectionForeground, listInactiveFocusBackground, listInactiveSelectionBackground, listHoverBackground, listDropBackground, listHoverOutline, listSelectionOutline, listFocusOutline, listInactiveFocusOutline } from 'vs/platform/theme/common/colorRegistry'; import { IDisposable } from "vs/base/common/lifecycle"; export interface IThemable { @@ -74,7 +74,9 @@ export function attachQuickOpenStyler(widget: IThemable, themeService: IThemeSer listInactiveSelectionBackground?: ColorIdentifier, listHoverBackground?: ColorIdentifier, listDropBackground?: ColorIdentifier, - listFocusOutline?: ColorIdentifier + listFocusOutline?: ColorIdentifier, + listSelectionOutline?: ColorIdentifier, + listHoverOutline?: ColorIdentifier }): IDisposable { return attachStyler(themeService, widget, { foreground: (style && style.foreground) || foreground, @@ -91,7 +93,9 @@ export function attachQuickOpenStyler(widget: IThemable, themeService: IThemeSer listInactiveSelectionBackground: (style && style.listInactiveSelectionBackground) || listInactiveSelectionBackground, listHoverBackground: (style && style.listHoverBackground) || listHoverBackground, listDropBackground: (style && style.listDropBackground) || listDropBackground, - listFocusOutline: (style && style.listFocusOutline) || highContrastOutline + listFocusOutline: (style && style.listFocusOutline) || listFocusOutline, + listSelectionOutline: (style && style.listSelectionOutline) || listSelectionOutline, + listHoverOutline: (style && style.listHoverOutline) || listHoverOutline }); } @@ -105,7 +109,10 @@ export function attachListStyler(widget: IThemable, themeService: IThemeService, listInactiveSelectionBackground?: ColorIdentifier, listHoverBackground?: ColorIdentifier, listDropBackground?: ColorIdentifier, - listFocusOutline?: ColorIdentifier + listFocusOutline?: ColorIdentifier, + listInactiveFocusOutline?: ColorIdentifier, + listSelectionOutline?: ColorIdentifier, + listHoverOutline?: ColorIdentifier, }): IDisposable { return attachStyler(themeService, widget, { listFocusBackground: (style && style.listFocusBackground) || listFocusBackground, @@ -117,6 +124,9 @@ export function attachListStyler(widget: IThemable, themeService: IThemeService, listInactiveSelectionBackground: (style && style.listInactiveSelectionBackground) || listInactiveSelectionBackground, listHoverBackground: (style && style.listHoverBackground) || listHoverBackground, listDropBackground: (style && style.listDropBackground) || listDropBackground, - listFocusOutline: (style && style.listFocusOutline) || highContrastOutline + listFocusOutline: (style && style.listFocusOutline) || listFocusOutline, + listInactiveFocusOutline: (style && style.listInactiveFocusOutline) || listInactiveFocusOutline, + listSelectionOutline: (style && style.listSelectionOutline) || listSelectionOutline, + listHoverOutline: (style && style.listHoverOutline) || listHoverOutline, }); } \ No newline at end of file