listbox and select box (#23504)

* listbox

* select box

* fix tests

* one more test

src/sql/platform/browser/selectBox/selectBox.component.ts

@@ -13,8 +13,7 @@ import { AngularDisposable } from 'sql/base/browser/lifecycle';
 
 import { IContextViewService } from 'vs/platform/contextview/browser/contextView';
 import { ISelectData } from 'vs/base/browser/ui/selectBox/selectBox';
-import { attachSelectBoxStyler } from 'sql/platform/theme/common/vsstyler';
-import { IThemeService } from 'vs/platform/theme/common/themeService';
+import { defaultSelectBoxStyles } from 'sql/platform/theme/browser/defaultStyles';
 
 @Component({
 	selector: 'select-box',
@@ -34,14 +33,13 @@ export class SelectBox extends AngularDisposable implements OnInit, OnChanges {
 
 	constructor(
 		@Inject(forwardRef(() => ElementRef)) private _el: ElementRef,
-		@Inject(IThemeService) private themeService: IThemeService,
 		@Inject(IContextViewService) private contextViewService: IContextViewService
 	) {
 		super();
 	}
 
 	ngOnInit(): void {
-		this._selectbox = new sqlSelectBox(this.options, this.selectedOption, this.contextViewService, undefined, { ariaLabel: this.ariaLabel });
+		this._selectbox = new sqlSelectBox(this.options, this.selectedOption, defaultSelectBoxStyles, this.contextViewService, undefined, { ariaLabel: this.ariaLabel });
 		this._selectbox.render(this._el.nativeElement);
 		this._selectbox.onDidSelect(e => {
 			if (this.onlyEmitOnChange) {
@@ -53,7 +51,6 @@ export class SelectBox extends AngularDisposable implements OnInit, OnChanges {
 				this.onDidSelect.emit(e);
 			}
 		});
-		this._register(attachSelectBoxStyler(this._selectbox, this.themeService));
 	}
 
 	ngOnChanges(changes: SimpleChanges): void {

src/sql/platform/theme/browser/defaultStyles.ts

@@ -5,16 +5,18 @@
 import { ICheckboxStyles } from 'sql/base/browser/ui/checkbox/checkbox';
 import { IDropdownStyles } from 'sql/base/browser/ui/dropdownList/dropdownList';
 import { IEditableDropdownStyles } from 'sql/base/browser/ui/editableDropdown/browser/dropdown';
+import { IListBoxStyles } from 'sql/base/browser/ui/listBox/listBox';
+import { ISelectBoxStyles } from 'sql/base/browser/ui/selectBox/selectBox';
 import { ITableFilterStyles } from 'sql/base/browser/ui/table/plugins/headerFilter.plugin';
 import *  as sqlcr from 'sql/platform/theme/common/colorRegistry';
 import { disabledCheckboxForeground } from 'sql/platform/theme/common/colors';
 import { IButtonStyles } from 'vs/base/browser/ui/button/button';
-import { IStyleOverride, defaultButtonStyles, defaultCountBadgeStyles, defaultInputBoxStyles, defaultListStyles, overrideStyles } from 'vs/platform/theme/browser/defaultStyles';
-import { asCssVariable, editorBackground, inputBorder, inputForeground } from 'vs/platform/theme/common/colorRegistry';
+import { IStyleOverride, defaultButtonStyles, defaultCountBadgeStyles, defaultInputBoxStyles, defaultListStyles, defaultSelectBoxStyles as vsDefaultSelectBoxStyles, overrideStyles } from 'vs/platform/theme/browser/defaultStyles';
+import * as cr from 'vs/platform/theme/common/colorRegistry';
 
 
 export const defaultCheckboxStyles: ICheckboxStyles = {
-	disabledCheckboxForeground: asCssVariable(disabledCheckboxForeground)
+	disabledCheckboxForeground: cr.asCssVariable(disabledCheckboxForeground)
 };
 
 export function getCheckboxStyles(override: IStyleOverride<ICheckboxStyles>): ICheckboxStyles {
@@ -22,10 +24,10 @@ export function getCheckboxStyles(override: IStyleOverride<ICheckboxStyles>): IC
 }
 
 export const defaultInfoButtonStyles: IButtonStyles = {
-	buttonBackground: asCssVariable(sqlcr.infoButtonBackground),
-	buttonForeground: asCssVariable(sqlcr.infoButtonForeground),
-	buttonBorder: asCssVariable(sqlcr.infoButtonBorder),
-	buttonHoverBackground: asCssVariable(sqlcr.infoButtonHoverBackground),
+	buttonBackground: cr.asCssVariable(sqlcr.infoButtonBackground),
+	buttonForeground: cr.asCssVariable(sqlcr.infoButtonForeground),
+	buttonBorder: cr.asCssVariable(sqlcr.infoButtonBorder),
+	buttonHoverBackground: cr.asCssVariable(sqlcr.infoButtonHoverBackground),
 	buttonSeparator: undefined,
 	buttonSecondaryBackground: undefined,
 	buttonSecondaryForeground: undefined,
@@ -37,8 +39,8 @@ export const defaultInfoButtonStyles: IButtonStyles = {
 }
 
 export const defaultEditableDropdownStyles: IEditableDropdownStyles = {
-	contextBackground: asCssVariable(editorBackground),
-	contextBorder: asCssVariable(inputBorder),
+	contextBackground: cr.asCssVariable(cr.editorBackground),
+	contextBorder: cr.asCssVariable(cr.inputBorder),
 	...defaultInputBoxStyles,
 	...defaultListStyles
 }
@@ -51,7 +53,27 @@ export const defaultTableFilterStyles: ITableFilterStyles = {
 }
 
 export const defaultDropdownStyles: IDropdownStyles = {
-	foregroundColor: asCssVariable(inputForeground),
-	borderColor: asCssVariable(inputBorder),
-	backgroundColor: asCssVariable(editorBackground)
+	foregroundColor: cr.asCssVariable(cr.inputForeground),
+	borderColor: cr.asCssVariable(cr.inputBorder),
+	backgroundColor: cr.asCssVariable(cr.editorBackground)
+}
+
+export const defaultListBoxStyles: IListBoxStyles = {
+	inputValidationInfoBorder: cr.asCssVariable(cr.inputValidationInfoBorder),
+	inputValidationInfoBackground: cr.asCssVariable(cr.inputValidationInfoBackground),
+	inputValidationWarningBorder: cr.asCssVariable(cr.inputValidationWarningBorder),
+	inputValidationWarningBackground: cr.asCssVariable(cr.inputValidationWarningBackground),
+	inputValidationErrorBorder: cr.asCssVariable(cr.inputValidationErrorBorder),
+	inputValidationErrorBackground: cr.asCssVariable(cr.inputValidationErrorBackground),
+	...vsDefaultSelectBoxStyles
+}
+
+export const defaultSelectBoxStyles: ISelectBoxStyles = {
+	inputValidationInfoBorder: cr.asCssVariable(cr.inputValidationInfoBorder),
+	inputValidationInfoBackground: cr.asCssVariable(cr.inputValidationInfoBackground),
+	inputValidationWarningBorder: cr.asCssVariable(cr.inputValidationWarningBorder),
+	inputValidationWarningBackground: cr.asCssVariable(cr.inputValidationWarningBackground),
+	inputValidationErrorBorder: cr.asCssVariable(cr.inputValidationErrorBorder),
+	inputValidationErrorBackground: cr.asCssVariable(cr.inputValidationErrorBackground),
+	...vsDefaultSelectBoxStyles
 }

src/sql/platform/theme/common/styler.ts

@@ -11,78 +11,6 @@ import * as sqlcr from 'sql/platform/theme/common/colorRegistry';
 import { IThemable, attachStyler, computeStyles, IStyleOverrides } from 'sql/platform/theme/common/vsstyler';
 import { IDisposable } from 'vs/base/common/lifecycle';
 
-export interface ISelectBoxStyleOverrides extends IStyleOverrides {
-	selectBackground?: cr.ColorIdentifier,
-	selectListBackground?: cr.ColorIdentifier,
-	selectForeground?: cr.ColorIdentifier,
-	selectBorder?: cr.ColorIdentifier,
-	disabledSelectBackground?: cr.ColorIdentifier,
-	disabledSelectForeground?: cr.ColorIdentifier,
-	inputValidationInfoBorder?: cr.ColorIdentifier,
-	inputValidationInfoBackground?: cr.ColorIdentifier,
-	inputValidationWarningBorder?: cr.ColorIdentifier,
-	inputValidationWarningBackground?: cr.ColorIdentifier,
-	inputValidationErrorBorder?: cr.ColorIdentifier,
-	inputValidationErrorBackground?: cr.ColorIdentifier,
-	focusBorder?: cr.ColorIdentifier,
-	listFocusBackground?: cr.ColorIdentifier,
-	listFocusForeground?: cr.ColorIdentifier,
-	listFocusOutline?: cr.ColorIdentifier,
-	listHoverBackground?: cr.ColorIdentifier,
-	listHoverForeground?: cr.ColorIdentifier
-}
-
-export const defaultSelectBoxStyles: ISelectBoxStyleOverrides = {
-	selectBackground: cr.selectBackground,
-	selectListBackground: cr.selectListBackground,
-	selectForeground: cr.selectForeground,
-	selectBorder: cr.selectBorder,
-	disabledSelectBackground: colors.disabledInputBackground,
-	disabledSelectForeground: colors.disabledInputForeground,
-	inputValidationInfoBorder: cr.inputValidationInfoBorder,
-	inputValidationInfoBackground: cr.inputValidationInfoBackground,
-	inputValidationWarningBorder: cr.inputValidationWarningBorder,
-	inputValidationWarningBackground: cr.inputValidationWarningBackground,
-	inputValidationErrorBorder: cr.inputValidationErrorBorder,
-	inputValidationErrorBackground: cr.inputValidationErrorBackground,
-	focusBorder: cr.focusBorder,
-	listFocusBackground: cr.listFocusBackground,
-	listFocusForeground: cr.listFocusForeground,
-	listFocusOutline: cr.activeContrastBorder,
-	listHoverBackground: cr.listHoverBackground,
-	listHoverForeground: cr.listHoverForeground,
-	listHoverOutline: cr.activeContrastBorder
-};
-
-export function attachSelectBoxStyler(widget: IThemable, themeService: IThemeService, style?: ISelectBoxStyleOverrides): IDisposable {
-	return attachStyler(themeService, { ...defaultSelectBoxStyles, ...(style || {}) }, widget);
-}
-
-export function attachListBoxStyler(widget: IThemable, themeService: IThemeService, style?:
-	{
-		selectBackground?: cr.ColorIdentifier,
-		selectForeground?: cr.ColorIdentifier,
-		selectBorder?: cr.ColorIdentifier,
-		inputValidationInfoBorder?: cr.ColorIdentifier,
-		inputValidationInfoBackground?: cr.ColorIdentifier,
-		inputValidationWarningBorder?: cr.ColorIdentifier,
-		inputValidationWarningBackground?: cr.ColorIdentifier,
-		inputValidationErrorBorder?: cr.ColorIdentifier,
-		inputValidationErrorBackground?: cr.ColorIdentifier
-	}): IDisposable {
-	return attachStyler(themeService, {
-		selectBackground: (style && style.selectBackground) || cr.selectBackground,
-		selectForeground: (style && style.selectForeground) || cr.selectForeground,
-		selectBorder: (style && style.selectBorder) || cr.selectBorder,
-		inputValidationInfoBorder: (style && style.inputValidationInfoBorder) || cr.inputValidationInfoBorder,
-		inputValidationInfoBackground: (style && style.inputValidationInfoBackground) || cr.inputValidationInfoBackground,
-		inputValidationWarningBorder: (style && style.inputValidationWarningBorder) || cr.inputValidationWarningBorder,
-		inputValidationWarningBackground: (style && style.inputValidationWarningBackground) || cr.inputValidationWarningBackground,
-		inputValidationErrorBorder: (style && style.inputValidationErrorBorder) || cr.inputValidationErrorBorder,
-		inputValidationErrorBackground: (style && style.inputValidationErrorBackground) || cr.inputValidationErrorBackground
-	}, widget);
-}
-
 export interface ITableStyleOverrides extends IStyleOverrides {
 	listFocusBackground?: cr.ColorIdentifier,
 	listFocusForeground?: cr.ColorIdentifier,
@@ -157,10 +85,8 @@ export interface IInfoButtonStyleOverrides {
 export function attachDesignerStyler(widget: any, themeService: IThemeService): IDisposable {
 	function applyStyles(): void {
 		const colorTheme = themeService.getColorTheme();
-		const selectBoxStyles = computeStyles(colorTheme, defaultSelectBoxStyles);
 		const tableStyles = computeStyles(colorTheme, defaultTableStyles);
 		widget.style({
-			selectBoxStyles: selectBoxStyles,
 			tableStyles: tableStyles,
 			paneSeparator: cr.resolveColorValue(sqlcr.DesignerPaneSeparator, colorTheme),
 			groupHeaderBackground: cr.resolveColorValue(sqlcr.GroupHeaderBackground, colorTheme)

src/sql/platform/theme/common/vsstyler.ts

@@ -5,8 +5,7 @@
 
 import { Color } from 'vs/base/common/color';
 import { IDisposable } from 'vs/base/common/lifecycle';
-import { activeContrastBorder, breadcrumbsActiveSelectionForeground, breadcrumbsBackground, breadcrumbsFocusForeground, breadcrumbsForeground, buttonBackground, buttonBorder, buttonForeground, buttonHoverBackground, buttonSecondaryBackground, buttonSecondaryForeground, buttonSecondaryHoverBackground, ColorIdentifier, ColorTransform, ColorValue, contrastBorder, editorWidgetBackground, editorWidgetBorder, editorWidgetForeground, focusBorder, inputActiveOptionBackground, inputActiveOptionBorder, inputActiveOptionForeground, inputBackground, inputBorder, inputForeground, inputValidationErrorBackground, inputValidationErrorBorder, inputValidationErrorForeground, inputValidationInfoBackground, inputValidationInfoBorder, inputValidationInfoForeground, inputValidationWarningBackground, inputValidationWarningBorder, inputValidationWarningForeground, keybindingLabelBackground, keybindingLabelBorder, keybindingLabelBottomBorder, keybindingLabelForeground, listActiveSelectionBackground, listActiveSelectionForeground, listActiveSelectionIconForeground, listDropBackground, listFilterWidgetBackground, listFilterWidgetNoMatchesOutline, listFilterWidgetOutline, listFocusBackground, listFocusForeground, listFocusOutline, listHoverBackground, listHoverForeground, listInactiveFocusBackground, listInactiveFocusOutline, listInactiveSelectionBackground, listInactiveSelectionForeground, listInactiveSelectionIconForeground, menuBackground, menuBorder, menuForeground, menuSelectionBackground, menuSelectionBorder, menuSelectionForeground, menuSeparatorBackground, pickerGroupForeground, problemsErrorIconForeground, problemsInfoIconForeground, problemsWarningIconForeground, progressBarBackground, quickInputListFocusBackground, quickInputListFocusForeground, quickInputListFocusIconForeground, resolveColorValue, scrollbarShadow, scrollbarSliderActiveBackground, scrollbarSliderBackground, scrollbarSliderHoverBackground, selectBackground, selectBorder, selectForeground, selectListBackground, checkboxBackground, checkboxBorder, checkboxForeground, tableColumnsBorder, tableOddRowsBackgroundColor, textLinkForeground, treeIndentGuidesStroke, widgetShadow, listFocusAndSelectionOutline, listFilterWidgetShadow, buttonSeparator } from 'vs/platform/theme/common/colorRegistry'; // {{SQL CARBON EDIT}} Added buttonSecondaryBorder, buttonDisabledBorder, buttonDisabledBackground, buttonDisabledForeground to import list
-import { isHighContrast } from 'vs/platform/theme/common/theme';
+import { activeContrastBorder, breadcrumbsActiveSelectionForeground, breadcrumbsBackground, breadcrumbsFocusForeground, breadcrumbsForeground, buttonBackground, buttonBorder, buttonForeground, buttonHoverBackground, buttonSecondaryBackground, buttonSecondaryForeground, buttonSecondaryHoverBackground, ColorIdentifier, ColorTransform, ColorValue, contrastBorder, editorWidgetBackground, editorWidgetForeground, inputActiveOptionBackground, inputActiveOptionBorder, inputActiveOptionForeground, inputBackground, inputBorder, inputForeground, inputValidationErrorBackground, inputValidationErrorBorder, inputValidationErrorForeground, inputValidationInfoBackground, inputValidationInfoBorder, inputValidationInfoForeground, inputValidationWarningBackground, inputValidationWarningBorder, inputValidationWarningForeground, keybindingLabelBackground, keybindingLabelBorder, keybindingLabelBottomBorder, keybindingLabelForeground, listActiveSelectionBackground, listActiveSelectionForeground, listActiveSelectionIconForeground, listDropBackground, listFilterWidgetBackground, listFilterWidgetNoMatchesOutline, listFilterWidgetOutline, listFocusBackground, listFocusForeground, listFocusOutline, listHoverBackground, listHoverForeground, listInactiveFocusBackground, listInactiveFocusOutline, listInactiveSelectionBackground, listInactiveSelectionForeground, listInactiveSelectionIconForeground, menuBackground, menuBorder, menuForeground, menuSelectionBackground, menuSelectionBorder, menuSelectionForeground, menuSeparatorBackground, problemsErrorIconForeground, problemsInfoIconForeground, problemsWarningIconForeground, progressBarBackground, resolveColorValue, scrollbarShadow, scrollbarSliderActiveBackground, scrollbarSliderBackground, scrollbarSliderHoverBackground, checkboxBackground, checkboxBorder, checkboxForeground, tableColumnsBorder, tableOddRowsBackgroundColor, textLinkForeground, treeIndentGuidesStroke, widgetShadow, listFocusAndSelectionOutline, listFilterWidgetShadow, buttonSeparator } from 'vs/platform/theme/common/colorRegistry'; // {{SQL CARBON EDIT}} Added buttonSecondaryBorder, buttonDisabledBorder, buttonDisabledBackground, buttonDisabledForeground to import list
 import { IColorTheme, IThemeService } from 'vs/platform/theme/common/themeService';
 
 //export type styleFn = (colors: { [name: string]: Color | undefined }) => void;
@@ -60,34 +59,6 @@ export function attachStyler<T extends IColorMapping>(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;