Progressbar: Use css variables for styling (for #165478)

src/vs/base/browser/ui/progressbar/progressbar.ts

@@ -5,9 +5,7 @@
 
 import { hide, show } from 'vs/base/browser/dom';
 import { RunOnceScheduler } from 'vs/base/common/async';
-import { Color } from 'vs/base/common/color';
 import { Disposable } from 'vs/base/common/lifecycle';
-import { mixin } from 'vs/base/common/objects';
 import { isNumber } from 'vs/base/common/types';
 import 'vs/css!./progressbar';
 
@@ -20,13 +18,12 @@ const CSS_DISCRETE = 'discrete';
 export interface IProgressBarOptions extends IProgressBarStyles {
 }
 
+export type CSSValueString = string;
+
 export interface IProgressBarStyles {
-	progressBarBackground?: Color;
+	progressBarBackground?: CSSValueString;
 }
 
-const defaultOpts = {
-	progressBarBackground: Color.fromHex('#0E70C0')
-};
 
 /**
  * A progress bar with support for infinite or discrete progress.
@@ -43,32 +40,25 @@ export class ProgressBar extends Disposable {
 	 */
 	private static readonly LONG_RUNNING_INFINITE_THRESHOLD = 10000;
 
-	private options: IProgressBarOptions;
 	private workedVal: number;
 	private element!: HTMLElement;
 	private bit!: HTMLElement;
 	private totalWork: number | undefined;
-	private progressBarBackground: Color | undefined;
 	private showDelayedScheduler: RunOnceScheduler;
 	private longRunningScheduler: RunOnceScheduler;
 
 	constructor(container: HTMLElement, options?: IProgressBarOptions) {
 		super();
 
-		this.options = options || Object.create(null);
-		mixin(this.options, defaultOpts, false);
-
 		this.workedVal = 0;
 
-		this.progressBarBackground = this.options.progressBarBackground;
-
 		this.showDelayedScheduler = this._register(new RunOnceScheduler(() => show(this.element), 0));
 		this.longRunningScheduler = this._register(new RunOnceScheduler(() => this.infiniteLongRunning(), ProgressBar.LONG_RUNNING_INFINITE_THRESHOLD));
 
-		this.create(container);
+		this.create(container, options);
 	}
 
-	private create(container: HTMLElement): void {
+	private create(container: HTMLElement, options?: IProgressBarOptions): void {
 		this.element = document.createElement('div');
 		this.element.classList.add('monaco-progress-container');
 		this.element.setAttribute('role', 'progressbar');
@@ -77,9 +67,8 @@ export class ProgressBar extends Disposable {
 
 		this.bit = document.createElement('div');
 		this.bit.classList.add('progress-bit');
+		this.bit.style.backgroundColor = options?.progressBarBackground || '#0E70C0';
 		this.element.appendChild(this.bit);
-
-		this.applyStyles();
 	}
 
 	private off(): void {
@@ -223,18 +212,4 @@ export class ProgressBar extends Disposable {
 		hide(this.element);
 		this.showDelayedScheduler.cancel();
 	}
-
-	style(styles: IProgressBarStyles): void {
-		this.progressBarBackground = styles.progressBarBackground;
-
-		this.applyStyles();
-	}
-
-	protected applyStyles(): void {
-		if (this.bit) {
-			const background = this.progressBarBackground ? this.progressBarBackground.toString() : '';
-
-			this.bit.style.backgroundColor = background;
-		}
-	}
 }

src/vs/base/parts/quickinput/browser/quickInput.ts

@@ -1335,7 +1335,7 @@ export class QuickInputController extends Disposable {
 			}
 		}));
 
-		const progressBar = new ProgressBar(container);
+		const progressBar = new ProgressBar(container, this.styles.progressBar);
 		progressBar.getContainer().classList.add('quick-input-progress');
 
 		const focusTracker = dom.trackFocus(container);
@@ -1827,7 +1827,6 @@ export class QuickInputController extends Disposable {
 			this.ui.count.style(this.styles.countBadge);
 			this.ui.ok.style(this.styles.button);
 			this.ui.customButton.style(this.styles.button);
-			this.ui.progressBar.style(this.styles.progressBar);
 			this.ui.list.style(this.styles.list);
 
 			const content: string[] = [];

src/vs/platform/quickinput/browser/quickInput.ts

@@ -16,7 +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 { activeContrastBorder, badgeBackground, badgeForeground, buttonBackground, buttonForeground, buttonHoverBackground, contrastBorder, inputBackground, inputBorder, inputForeground, inputValidationErrorBackground, inputValidationErrorBorder, inputValidationErrorForeground, inputValidationInfoBackground, inputValidationInfoBorder, inputValidationInfoForeground, inputValidationWarningBackground, inputValidationWarningBorder, inputValidationWarningForeground, keybindingLabelBackground, keybindingLabelBorder, keybindingLabelBottomBorder, keybindingLabelForeground, pickerGroupBorder, pickerGroupForeground, progressBarBackground, quickInputBackground, quickInputForeground, quickInputListFocusBackground, quickInputListFocusForeground, quickInputListFocusIconForeground, quickInputTitleBackground, widgetShadow } from 'vs/platform/theme/common/colorRegistry';
+import { getProgressBarStyles } from 'vs/platform/theme/browser/defaultStyles';
+import { activeContrastBorder, badgeBackground, badgeForeground, buttonBackground, buttonForeground, buttonHoverBackground, contrastBorder, inputBackground, inputBorder, inputForeground, inputValidationErrorBackground, inputValidationErrorBorder, inputValidationErrorForeground, inputValidationInfoBackground, inputValidationInfoBorder, inputValidationInfoForeground, inputValidationWarningBackground, inputValidationWarningBorder, inputValidationWarningForeground, keybindingLabelBackground, keybindingLabelBorder, keybindingLabelBottomBorder, keybindingLabelForeground, pickerGroupBorder, pickerGroupForeground, quickInputBackground, quickInputForeground, quickInputListFocusBackground, quickInputListFocusForeground, quickInputListFocusIconForeground, quickInputTitleBackground, widgetShadow } from 'vs/platform/theme/common/colorRegistry';
 import { computeStyles } from 'vs/platform/theme/common/styler';
 import { IThemeService, Themable } from 'vs/platform/theme/common/themeService';
 
@@ -218,9 +219,7 @@ export class QuickInputService extends Themable implements IQuickInputService {
 				buttonHoverBackground,
 				buttonBorder: contrastBorder
 			}),
-			progressBar: computeStyles(this.theme, {
-				progressBarBackground
-			}),
+			progressBar: getProgressBarStyles(), // default uses progressBarBackground
 			keybindingLabel: computeStyles(this.theme, {
 				keybindingLabelBackground,
 				keybindingLabelForeground,

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

@@ -3,7 +3,8 @@
  *  Licensed under the MIT License. See License.txt in the project root for license information.
  *--------------------------------------------------------------------------------------------*/
 import { IKeybindingLabelStyles } from 'vs/base/browser/ui/keybindingLabel/keybindingLabel';
-import { ColorIdentifier, keybindingLabelBackground, keybindingLabelBorder, keybindingLabelBottomBorder, keybindingLabelForeground, asCssValue, widgetShadow } from 'vs/platform/theme/common/colorRegistry';
+import { IProgressBarStyles } from 'vs/base/browser/ui/progressbar/progressbar';
+import { ColorIdentifier, keybindingLabelBackground, keybindingLabelBorder, keybindingLabelBottomBorder, keybindingLabelForeground, asCssValue, widgetShadow, progressBarBackground } from 'vs/platform/theme/common/colorRegistry';
 import { IStyleOverrides } from 'vs/platform/theme/common/styler';
 
 
@@ -24,3 +25,13 @@ export function getKeybindingLabelStyles(style?: IKeybindingLabelStyleOverrides)
 		keybindingLabelShadow: asCssValue(style?.keybindingLabelShadow || widgetShadow)
 	};
 }
+
+export interface IProgressBarStyleOverrides extends IStyleOverrides {
+	progressBarBackground?: ColorIdentifier;
+}
+
+export function getProgressBarStyles(style?: IProgressBarStyleOverrides): IProgressBarStyles {
+	return {
+		progressBarBackground: asCssValue(style?.progressBarBackground || progressBarBackground)
+	};
+}

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

@@ -6,7 +6,7 @@
 import { Color } from 'vs/base/common/color';
 import { IDisposable } from 'vs/base/common/lifecycle';
 import { IThemable, styleFn } from 'vs/base/common/styler';
-import { activeContrastBorder, badgeBackground, badgeForeground, 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, 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';
+import { activeContrastBorder, badgeBackground, badgeForeground, 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, 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, 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';
 import { isHighContrast } from 'vs/platform/theme/common/theme';
 import { IColorTheme, IThemeService } from 'vs/platform/theme/common/themeService';
 
@@ -261,15 +261,6 @@ export function attachButtonStyler(widget: IThemable, themeService: IThemeServic
 		buttonBorder: style?.buttonBorder || buttonBorder,
 	} as IButtonStyleOverrides, widget);
 }
-export interface IProgressBarStyleOverrides extends IStyleOverrides {
-	progressBarBackground?: ColorIdentifier;
-}
-
-export function attachProgressBarStyler(widget: IThemable, themeService: IThemeService, style?: IProgressBarStyleOverrides): IDisposable {
-	return attachStyler(themeService, {
-		progressBarBackground: style?.progressBarBackground || progressBarBackground
-	} as IProgressBarStyleOverrides, widget);
-}
 
 export function attachStylerCallback(themeService: IThemeService, colors: { [name: string]: ColorIdentifier }, callback: styleFn): IDisposable {
 	return attachStyler(themeService, colors, callback);

src/vs/workbench/browser/parts/compositePart.ts

@@ -24,14 +24,14 @@ import { IProgressIndicator, IEditorProgressService } from 'vs/platform/progress
 import { ITelemetryService } from 'vs/platform/telemetry/common/telemetry';
 import { IKeybindingService } from 'vs/platform/keybinding/common/keybinding';
 import { IThemeService } from 'vs/platform/theme/common/themeService';
-import { attachProgressBarStyler } from 'vs/platform/theme/common/styler';
 import { INotificationService } from 'vs/platform/notification/common/notification';
 import { Dimension, append, $, hide, show } from 'vs/base/browser/dom';
 import { AnchorAlignment } from 'vs/base/browser/ui/contextview/contextview';
 import { assertIsDefined, withNullAsUndefined } from 'vs/base/common/types';
 import { createActionViewItem } from 'vs/platform/actions/browser/menuEntryActionViewItem';
 import { AbstractProgressScope, ScopedProgressIndicator } from 'vs/workbench/services/progress/browser/progressIndicator';
 import { WorkbenchToolBar } from 'vs/platform/actions/browser/toolbar';
+import { getProgressBarStyles } from 'vs/platform/theme/browser/defaultStyles';
 
 export interface ICompositeTitleLabel {
 
@@ -458,8 +458,7 @@ export abstract class CompositePart<T extends Composite> extends Part {
 	override createContentArea(parent: HTMLElement): HTMLElement {
 		const contentContainer = append(parent, $('.content'));
 
-		this.progressBar = this._register(new ProgressBar(contentContainer));
-		this._register(attachProgressBarStyler(this.progressBar, this.themeService));
+		this.progressBar = this._register(new ProgressBar(contentContainer, getProgressBarStyles()));
 		this.progressBar.hide();
 
 		return contentContainer;

src/vs/workbench/browser/parts/editor/editorGroupView.ts

@@ -15,7 +15,6 @@ import { Dimension, trackFocus, addDisposableListener, EventType, EventHelper, f
 import { ServiceCollection } from 'vs/platform/instantiation/common/serviceCollection';
 import { IContextKeyService } from 'vs/platform/contextkey/common/contextkey';
 import { ProgressBar } from 'vs/base/browser/ui/progressbar/progressbar';
-import { attachProgressBarStyler } from 'vs/platform/theme/common/styler';
 import { IThemeService, registerThemingParticipant, Themable } from 'vs/platform/theme/common/themeService';
 import { editorBackground, contrastBorder } from 'vs/platform/theme/common/colorRegistry';
 import { EDITOR_GROUP_HEADER_TABS_BACKGROUND, EDITOR_GROUP_HEADER_NO_TABS_BACKGROUND, EDITOR_GROUP_EMPTY_BACKGROUND, EDITOR_GROUP_FOCUSED_EMPTY_BORDER, EDITOR_GROUP_HEADER_BORDER } from 'vs/workbench/common/theme';
@@ -53,6 +52,7 @@ import { URI } from 'vs/base/common/uri';
 import { IUriIdentityService } from 'vs/platform/uriIdentity/common/uriIdentity';
 import { isLinux, isNative, isWindows } from 'vs/base/common/platform';
 import { ILogService } from 'vs/platform/log/common/log';
+import { getProgressBarStyles } from 'vs/platform/theme/browser/defaultStyles';
 
 export class EditorGroupView extends Themable implements IEditorGroupView {
 
@@ -182,8 +182,7 @@ export class EditorGroupView extends Themable implements IEditorGroupView {
 			this.element.appendChild(letterpressContainer);
 
 			// Progress bar
-			this.progressBar = this._register(new ProgressBar(this.element));
-			this._register(attachProgressBarStyler(this.progressBar, this.themeService));
+			this.progressBar = this._register(new ProgressBar(this.element, getProgressBarStyles()));
 			this.progressBar.hide();
 
 			// Scoped instantiation service

src/vs/workbench/browser/parts/notifications/notificationsViewer.ts

@@ -9,7 +9,7 @@ import { IOpenerService } from 'vs/platform/opener/common/opener';
 import { URI } from 'vs/base/common/uri';
 import { localize } from 'vs/nls';
 import { ButtonBar, IButtonOptions } from 'vs/base/browser/ui/button/button';
-import { attachButtonStyler, attachProgressBarStyler } from 'vs/platform/theme/common/styler';
+import { attachButtonStyler } from 'vs/platform/theme/common/styler';
 import { IThemeService } from 'vs/platform/theme/common/themeService';
 import { ActionBar } from 'vs/base/browser/ui/actionbar/actionbar';
 import { ActionRunner, IAction, IActionRunner } from 'vs/base/common/actions';
@@ -27,6 +27,7 @@ import { DropdownMenuActionViewItem } from 'vs/base/browser/ui/dropdown/dropdown
 import { DomEmitter } from 'vs/base/browser/event';
 import { Gesture, EventType as GestureEventType } from 'vs/base/browser/touch';
 import { Event } from 'vs/base/common/event';
+import { getProgressBarStyles } from 'vs/platform/theme/browser/defaultStyles';
 
 export class NotificationsListDelegate implements IListVirtualDelegate<INotificationViewItem> {
 
@@ -181,7 +182,6 @@ export class NotificationRenderer implements IListRenderer<INotificationViewItem
 
 	constructor(
 		private actionRunner: IActionRunner,
-		@IThemeService private readonly themeService: IThemeService,
 		@IContextMenuService private readonly contextMenuService: IContextMenuService,
 		@IInstantiationService private readonly instantiationService: IInstantiationService
 	) {
@@ -259,8 +259,7 @@ export class NotificationRenderer implements IListRenderer<INotificationViewItem
 		data.mainRow.appendChild(toolbarContainer);
 
 		// Progress: below the rows to span the entire width of the item
-		data.progress = new ProgressBar(container);
-		data.toDispose.add(attachProgressBarStyler(data.progress, this.themeService));
+		data.progress = new ProgressBar(container, getProgressBarStyles());
 		data.toDispose.add(data.progress);
 
 		// Renderer