infobox style (#23518)

* listbox

* select box

* fix tests

* one more test

* infobox style

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

@@ -10,6 +10,7 @@ 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 { IInfoBoxStyles } from 'sql/workbench/browser/ui/infoBox/infoBox';
 import { IButtonStyles } from 'vs/base/browser/ui/button/button';
 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';
@@ -77,3 +78,10 @@ export const defaultSelectBoxStyles: ISelectBoxStyles = {
 	inputValidationErrorBackground: cr.asCssVariable(cr.inputValidationErrorBackground),
 	...vsDefaultSelectBoxStyles
 }
+
+export const defaultInfoBoxStyles: IInfoBoxStyles = {
+	informationBackground: cr.asCssVariable(sqlcr.infoBoxInformationBackground),
+	warningBackground: cr.asCssVariable(sqlcr.infoBoxWarningBackground),
+	errorBackground: cr.asCssVariable(sqlcr.infoBoxErrorBackground),
+	successBackground: cr.asCssVariable(sqlcr.infoBoxSuccessBackground)
+};

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

@@ -57,31 +57,6 @@ export function attachTableStyler(widget: IThemable, themeService: IThemeService
 	return attachStyler(themeService, { ...defaultTableStyles, ...(style || {}) }, widget);
 }
 
-export interface IInfoBoxStyleOverrides {
-	informationBackground: cr.ColorIdentifier,
-	warningBackground: cr.ColorIdentifier,
-	errorBackground: cr.ColorIdentifier,
-	successBackground: cr.ColorIdentifier
-}
-
-export const defaultInfoBoxStyles: IInfoBoxStyleOverrides = {
-	informationBackground: sqlcr.infoBoxInformationBackground,
-	warningBackground: sqlcr.infoBoxWarningBackground,
-	errorBackground: sqlcr.infoBoxErrorBackground,
-	successBackground: sqlcr.infoBoxSuccessBackground
-};
-
-export function attachInfoBoxStyler(widget: IThemable, themeService: IThemeService, style?: IInfoBoxStyleOverrides): IDisposable {
-	return attachStyler(themeService, { ...defaultInfoBoxStyles, ...style }, widget);
-}
-
-export interface IInfoButtonStyleOverrides {
-	buttonBackground: cr.ColorIdentifier,
-	buttonForeground: cr.ColorIdentifier,
-	buttonBorder: cr.ColorIdentifier,
-	buttonHoverBackground: cr.ColorIdentifier
-}
-
 export function attachDesignerStyler(widget: any, themeService: IThemeService): IDisposable {
 	function applyStyles(): void {
 		const colorTheme = themeService.getColorTheme();

src/sql/workbench/browser/modelComponents/infoBox.component.ts

@@ -11,10 +11,9 @@ import * as azdata from 'azdata';
 import { ComponentEventType, IComponent, IComponentDescriptor, IModelStore } from 'sql/platform/dashboard/browser/interfaces';
 import { ILogService } from 'vs/platform/log/common/log';
 import { ComponentBase } from 'sql/workbench/browser/modelComponents/componentBase';
-import { IWorkbenchThemeService } from 'vs/workbench/services/themes/common/workbenchThemeService';
-import { attachInfoBoxStyler } from 'sql/platform/theme/common/styler';
 import { IInstantiationService } from 'vs/platform/instantiation/common/instantiation';
 import { InfoBox, InfoBoxStyle } from 'sql/workbench/browser/ui/infoBox/infoBox';
+import { defaultInfoBoxStyles } from 'sql/platform/theme/browser/defaultStyles';
 
 @Component({
 	selector: 'modelview-infobox',
@@ -32,7 +31,6 @@ export default class InfoBoxComponent extends ComponentBase<azdata.InfoBoxCompon
 	constructor(
 		@Inject(forwardRef(() => ChangeDetectorRef)) changeRef: ChangeDetectorRef,
 		@Inject(forwardRef(() => ElementRef)) el: ElementRef,
-		@Inject(IWorkbenchThemeService) private _themeService: IWorkbenchThemeService,
 		@Inject(IInstantiationService) private _instantiationService: IInstantiationService,
 		@Inject(ILogService) logService: ILogService) {
 		super(changeRef, el, logService);
@@ -41,8 +39,7 @@ export default class InfoBoxComponent extends ComponentBase<azdata.InfoBoxCompon
 	ngAfterViewInit(): void {
 		this.baseInit();
 		if (this._container) {
-			this._infoBox = this._instantiationService.createInstance(InfoBox, this._container.nativeElement, undefined);
+			this._infoBox = this._instantiationService.createInstance(InfoBox, this._container.nativeElement, defaultInfoBoxStyles, undefined);
-			this._register(attachInfoBoxStyler(this._infoBox, this._themeService));
 			this._infoBox.onDidClick(e => {
 				this.fireEvent({
 					eventType: ComponentEventType.onDidClick,

src/sql/workbench/browser/ui/infoBox/infoBox.ts

@@ -7,7 +7,6 @@ import 'vs/css!./media/infoBox';
 import * as azdata from 'azdata';
 import { Disposable, DisposableStore } from 'vs/base/common/lifecycle';
 import { alert, status } from 'vs/base/browser/ui/aria/aria';
-import { Color } from 'vs/base/common/color';
 import * as DOM from 'vs/base/browser/dom';
 import { Event, Emitter } from 'vs/base/common/event';
 import { Codicon } from 'vs/base/common/codicons';
@@ -18,10 +17,10 @@ import { ILogService } from 'vs/platform/log/common/log';
 import { ThemeIcon } from 'vs/base/common/themables';
 
 export interface IInfoBoxStyles {
-	informationBackground?: Color;
+	informationBackground: string | undefined;
-	warningBackground?: Color;
+	warningBackground: string | undefined;
-	errorBackground?: Color;
+	errorBackground: string | undefined;
-	successBackground?: Color;
+	successBackground: string | undefined;
 }
 
 export type InfoBoxStyle = 'information' | 'warning' | 'error' | 'success';
@@ -43,7 +42,6 @@ export class InfoBox extends Disposable {
 	private _text = '';
 	private _links: azdata.LinkArea[] = [];
 	private _infoBoxStyle: InfoBoxStyle = 'information';
-	private _styles: IInfoBoxStyles;
 	private _announceText: boolean = false;
 	private _isClickable: boolean = false;
 	private _clickableButtonAriaLabel: string;
@@ -58,6 +56,7 @@ export class InfoBox extends Disposable {
 
 	constructor(
 		container: HTMLElement,
+		private readonly _styles: IInfoBoxStyles,
 		options: InfoBoxOptions | undefined,
 		@IOpenerService private _openerService: IOpenerService,
 		@ILogService private _logService: ILogService
@@ -86,11 +85,6 @@ export class InfoBox extends Disposable {
 		this.updateClickableState();
 	}
 
-	public style(styles: IInfoBoxStyles): void {
-		this._styles = styles;
-		this.updateStyle();
-	}
-
 	public get announceText(): boolean {
 		return this._announceText;
 	}
@@ -265,24 +259,22 @@ export class InfoBox extends Disposable {
 	}
 
 	private updateStyle(): void {
-		if (this._styles) {
+		let backgroundColor: string | undefined;
-			let backgroundColor: Color;
+		switch (this.infoBoxStyle) {
-			switch (this.infoBoxStyle) {
+			case 'error':
-				case 'error':
+				backgroundColor = this._styles.errorBackground;
-					backgroundColor = this._styles.errorBackground;
+				break;
-					break;
+			case 'warning':
-				case 'warning':
+				backgroundColor = this._styles.warningBackground;
-					backgroundColor = this._styles.warningBackground;
+				break;
-					break;
+			case 'success':
-				case 'success':
+				backgroundColor = this._styles.successBackground;
-					backgroundColor = this._styles.successBackground;
+				break;
-					break;
+			default:
-				default:
+				backgroundColor = this._styles.informationBackground;
-					backgroundColor = this._styles.informationBackground;
+				break;
-					break;
-			}
-			this._infoBoxElement.style.backgroundColor = backgroundColor.toString();
 		}
+		this._infoBoxElement.style.backgroundColor = backgroundColor;
 	}
 
 	private updateClickableState(): void {

src/sql/workbench/contrib/executionPlan/browser/executionPlanFileView.ts

@@ -15,6 +15,7 @@ import { contrastBorder, editorWidgetBackground, foreground, listHoverBackground
 import { IColorTheme, ICssStyleCollector, registerThemingParticipant } from 'vs/platform/theme/common/themeService';
 import { QueryResultsView } from 'sql/workbench/contrib/query/browser/queryResultsView';
 import { Disposable } from 'vs/base/common/lifecycle';
+import { defaultInfoBoxStyles } from 'sql/platform/theme/browser/defaultStyles';
 
 export class ExecutionPlanFileView extends Disposable {
 	private _parent: HTMLElement;
@@ -94,7 +95,7 @@ export class ExecutionPlanFileView extends Disposable {
 
 			this._loadingSpinner.loadingCompletedMessage = localize('executionPlanFileLoadingComplete', "Execution plans are generated");
 		} catch (e) {
-			this._loadingErrorInfoBox = this._register(this.instantiationService.createInstance(InfoBox, this._container, {
+			this._loadingErrorInfoBox = this._register(this.instantiationService.createInstance(InfoBox, this._container, defaultInfoBoxStyles, {
 				text: e.toString(),
 				style: 'error',
 				isClickable: false