Skip to content

Commit 5a8c62b

Browse files
aeschliaeschli
authored
Progressbar: Use css variables for styling (microsoft#165503)
Progressbar: Use css variables for styling (for microsoft#165478)
1 parent d0bf29c commit 5a8c62b

File tree

13 files changed

+42
-73
lines changed

13 files changed

+42
-73
lines changed

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

Lines changed: 6 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -5,9 +5,7 @@
55

66
import { hide, show } from 'vs/base/browser/dom';
77
import { RunOnceScheduler } from 'vs/base/common/async';
8-
import { Color } from 'vs/base/common/color';
98
import { Disposable } from 'vs/base/common/lifecycle';
10-
import { mixin } from 'vs/base/common/objects';
119
import { isNumber } from 'vs/base/common/types';
1210
import 'vs/css!./progressbar';
1311

@@ -20,13 +18,12 @@ const CSS_DISCRETE = 'discrete';
2018
export interface IProgressBarOptions extends IProgressBarStyles {
2119
}
2220

21+
export type CSSValueString = string;
22+
2323
export interface IProgressBarStyles {
24-
progressBarBackground?: Color;
24+
progressBarBackground?: CSSValueString;
2525
}
2626

27-
const defaultOpts = {
28-
progressBarBackground: Color.fromHex('#0E70C0')
29-
};
3027

3128
/**
3229
* A progress bar with support for infinite or discrete progress.
@@ -43,32 +40,25 @@ export class ProgressBar extends Disposable {
4340
*/
4441
private static readonly LONG_RUNNING_INFINITE_THRESHOLD = 10000;
4542

46-
private options: IProgressBarOptions;
4743
private workedVal: number;
4844
private element!: HTMLElement;
4945
private bit!: HTMLElement;
5046
private totalWork: number | undefined;
51-
private progressBarBackground: Color | undefined;
5247
private showDelayedScheduler: RunOnceScheduler;
5348
private longRunningScheduler: RunOnceScheduler;
5449

5550
constructor(container: HTMLElement, options?: IProgressBarOptions) {
5651
super();
5752

58-
this.options = options || Object.create(null);
59-
mixin(this.options, defaultOpts, false);
60-
6153
this.workedVal = 0;
6254

63-
this.progressBarBackground = this.options.progressBarBackground;
64-
6555
this.showDelayedScheduler = this._register(new RunOnceScheduler(() => show(this.element), 0));
6656
this.longRunningScheduler = this._register(new RunOnceScheduler(() => this.infiniteLongRunning(), ProgressBar.LONG_RUNNING_INFINITE_THRESHOLD));
6757

68-
this.create(container);
58+
this.create(container, options);
6959
}
7060

71-
private create(container: HTMLElement): void {
61+
private create(container: HTMLElement, options?: IProgressBarOptions): void {
7262
this.element = document.createElement('div');
7363
this.element.classList.add('monaco-progress-container');
7464
this.element.setAttribute('role', 'progressbar');
@@ -77,9 +67,8 @@ export class ProgressBar extends Disposable {
7767

7868
this.bit = document.createElement('div');
7969
this.bit.classList.add('progress-bit');
70+
this.bit.style.backgroundColor = options?.progressBarBackground || '#0E70C0';
8071
this.element.appendChild(this.bit);
81-
82-
this.applyStyles();
8372
}
8473

8574
private off(): void {
@@ -223,18 +212,4 @@ export class ProgressBar extends Disposable {
223212
hide(this.element);
224213
this.showDelayedScheduler.cancel();
225214
}
226-
227-
style(styles: IProgressBarStyles): void {
228-
this.progressBarBackground = styles.progressBarBackground;
229-
230-
this.applyStyles();
231-
}
232-
233-
protected applyStyles(): void {
234-
if (this.bit) {
235-
const background = this.progressBarBackground ? this.progressBarBackground.toString() : '';
236-
237-
this.bit.style.backgroundColor = background;
238-
}
239-
}
240215
}

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

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1335,7 +1335,7 @@ export class QuickInputController extends Disposable {
13351335
}
13361336
}));
13371337

1338-
const progressBar = new ProgressBar(container);
1338+
const progressBar = new ProgressBar(container, this.styles.progressBar);
13391339
progressBar.getContainer().classList.add('quick-input-progress');
13401340

13411341
const focusTracker = dom.trackFocus(container);
@@ -1827,7 +1827,6 @@ export class QuickInputController extends Disposable {
18271827
this.ui.count.style(this.styles.countBadge);
18281828
this.ui.ok.style(this.styles.button);
18291829
this.ui.customButton.style(this.styles.button);
1830-
this.ui.progressBar.style(this.styles.progressBar);
18311830
this.ui.list.style(this.styles.list);
18321831

18331832
const content: string[] = [];

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

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,8 @@ import { IWorkbenchListOptions, WorkbenchList } from 'vs/platform/list/browser/l
1616
import { QuickAccessController } from 'vs/platform/quickinput/browser/quickAccess';
1717
import { IQuickAccessController } from 'vs/platform/quickinput/common/quickAccess';
1818
import { IInputBox, IInputOptions, IKeyMods, IPickOptions, IQuickInputButton, IQuickInputService, IQuickNavigateConfiguration, IQuickPick, IQuickPickItem, QuickPickInput } from 'vs/platform/quickinput/common/quickInput';
19-
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';
19+
import { getProgressBarStyles } from 'vs/platform/theme/browser/defaultStyles';
20+
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';
2021
import { computeStyles } from 'vs/platform/theme/common/styler';
2122
import { IThemeService, Themable } from 'vs/platform/theme/common/themeService';
2223

@@ -218,9 +219,7 @@ export class QuickInputService extends Themable implements IQuickInputService {
218219
buttonHoverBackground,
219220
buttonBorder: contrastBorder
220221
}),
221-
progressBar: computeStyles(this.theme, {
222-
progressBarBackground
223-
}),
222+
progressBar: getProgressBarStyles(), // default uses progressBarBackground
224223
keybindingLabel: computeStyles(this.theme, {
225224
keybindingLabelBackground,
226225
keybindingLabelForeground,

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

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,8 @@
33
* Licensed under the MIT License. See License.txt in the project root for license information.
44
*--------------------------------------------------------------------------------------------*/
55
import { IKeybindingLabelStyles } from 'vs/base/browser/ui/keybindingLabel/keybindingLabel';
6-
import { ColorIdentifier, keybindingLabelBackground, keybindingLabelBorder, keybindingLabelBottomBorder, keybindingLabelForeground, asCssValue, widgetShadow } from 'vs/platform/theme/common/colorRegistry';
6+
import { IProgressBarStyles } from 'vs/base/browser/ui/progressbar/progressbar';
7+
import { ColorIdentifier, keybindingLabelBackground, keybindingLabelBorder, keybindingLabelBottomBorder, keybindingLabelForeground, asCssValue, widgetShadow, progressBarBackground } from 'vs/platform/theme/common/colorRegistry';
78
import { IStyleOverrides } from 'vs/platform/theme/common/styler';
89

910

@@ -24,3 +25,13 @@ export function getKeybindingLabelStyles(style?: IKeybindingLabelStyleOverrides)
2425
keybindingLabelShadow: asCssValue(style?.keybindingLabelShadow || widgetShadow)
2526
};
2627
}
28+
29+
export interface IProgressBarStyleOverrides extends IStyleOverrides {
30+
progressBarBackground?: ColorIdentifier;
31+
}
32+
33+
export function getProgressBarStyles(style?: IProgressBarStyleOverrides): IProgressBarStyles {
34+
return {
35+
progressBarBackground: asCssValue(style?.progressBarBackground || progressBarBackground)
36+
};
37+
}

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

Lines changed: 1 addition & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
import { Color } from 'vs/base/common/color';
77
import { IDisposable } from 'vs/base/common/lifecycle';
88
import { IThemable, styleFn } from 'vs/base/common/styler';
9-
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';
9+
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';
1010
import { isHighContrast } from 'vs/platform/theme/common/theme';
1111
import { IColorTheme, IThemeService } from 'vs/platform/theme/common/themeService';
1212

@@ -261,15 +261,6 @@ export function attachButtonStyler(widget: IThemable, themeService: IThemeServic
261261
buttonBorder: style?.buttonBorder || buttonBorder,
262262
} as IButtonStyleOverrides, widget);
263263
}
264-
export interface IProgressBarStyleOverrides extends IStyleOverrides {
265-
progressBarBackground?: ColorIdentifier;
266-
}
267-
268-
export function attachProgressBarStyler(widget: IThemable, themeService: IThemeService, style?: IProgressBarStyleOverrides): IDisposable {
269-
return attachStyler(themeService, {
270-
progressBarBackground: style?.progressBarBackground || progressBarBackground
271-
} as IProgressBarStyleOverrides, widget);
272-
}
273264

274265
export function attachStylerCallback(themeService: IThemeService, colors: { [name: string]: ColorIdentifier }, callback: styleFn): IDisposable {
275266
return attachStyler(themeService, colors, callback);

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

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -24,14 +24,14 @@ import { IProgressIndicator, IEditorProgressService } from 'vs/platform/progress
2424
import { ITelemetryService } from 'vs/platform/telemetry/common/telemetry';
2525
import { IKeybindingService } from 'vs/platform/keybinding/common/keybinding';
2626
import { IThemeService } from 'vs/platform/theme/common/themeService';
27-
import { attachProgressBarStyler } from 'vs/platform/theme/common/styler';
2827
import { INotificationService } from 'vs/platform/notification/common/notification';
2928
import { Dimension, append, $, hide, show } from 'vs/base/browser/dom';
3029
import { AnchorAlignment } from 'vs/base/browser/ui/contextview/contextview';
3130
import { assertIsDefined, withNullAsUndefined } from 'vs/base/common/types';
3231
import { createActionViewItem } from 'vs/platform/actions/browser/menuEntryActionViewItem';
3332
import { AbstractProgressScope, ScopedProgressIndicator } from 'vs/workbench/services/progress/browser/progressIndicator';
3433
import { WorkbenchToolBar } from 'vs/platform/actions/browser/toolbar';
34+
import { getProgressBarStyles } from 'vs/platform/theme/browser/defaultStyles';
3535

3636
export interface ICompositeTitleLabel {
3737

@@ -458,8 +458,7 @@ export abstract class CompositePart<T extends Composite> extends Part {
458458
override createContentArea(parent: HTMLElement): HTMLElement {
459459
const contentContainer = append(parent, $('.content'));
460460

461-
this.progressBar = this._register(new ProgressBar(contentContainer));
462-
this._register(attachProgressBarStyler(this.progressBar, this.themeService));
461+
this.progressBar = this._register(new ProgressBar(contentContainer, getProgressBarStyles()));
463462
this.progressBar.hide();
464463

465464
return contentContainer;

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

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,6 @@ import { Dimension, trackFocus, addDisposableListener, EventType, EventHelper, f
1515
import { ServiceCollection } from 'vs/platform/instantiation/common/serviceCollection';
1616
import { IContextKeyService } from 'vs/platform/contextkey/common/contextkey';
1717
import { ProgressBar } from 'vs/base/browser/ui/progressbar/progressbar';
18-
import { attachProgressBarStyler } from 'vs/platform/theme/common/styler';
1918
import { IThemeService, registerThemingParticipant, Themable } from 'vs/platform/theme/common/themeService';
2019
import { editorBackground, contrastBorder } from 'vs/platform/theme/common/colorRegistry';
2120
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';
5352
import { IUriIdentityService } from 'vs/platform/uriIdentity/common/uriIdentity';
5453
import { isLinux, isNative, isWindows } from 'vs/base/common/platform';
5554
import { ILogService } from 'vs/platform/log/common/log';
55+
import { getProgressBarStyles } from 'vs/platform/theme/browser/defaultStyles';
5656

5757
export class EditorGroupView extends Themable implements IEditorGroupView {
5858

@@ -182,8 +182,7 @@ export class EditorGroupView extends Themable implements IEditorGroupView {
182182
this.element.appendChild(letterpressContainer);
183183

184184
// Progress bar
185-
this.progressBar = this._register(new ProgressBar(this.element));
186-
this._register(attachProgressBarStyler(this.progressBar, this.themeService));
185+
this.progressBar = this._register(new ProgressBar(this.element, getProgressBarStyles()));
187186
this.progressBar.hide();
188187

189188
// Scoped instantiation service

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

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ import { IOpenerService } from 'vs/platform/opener/common/opener';
99
import { URI } from 'vs/base/common/uri';
1010
import { localize } from 'vs/nls';
1111
import { ButtonBar, IButtonOptions } from 'vs/base/browser/ui/button/button';
12-
import { attachButtonStyler, attachProgressBarStyler } from 'vs/platform/theme/common/styler';
12+
import { attachButtonStyler } from 'vs/platform/theme/common/styler';
1313
import { IThemeService } from 'vs/platform/theme/common/themeService';
1414
import { ActionBar } from 'vs/base/browser/ui/actionbar/actionbar';
1515
import { ActionRunner, IAction, IActionRunner } from 'vs/base/common/actions';
@@ -27,6 +27,7 @@ import { DropdownMenuActionViewItem } from 'vs/base/browser/ui/dropdown/dropdown
2727
import { DomEmitter } from 'vs/base/browser/event';
2828
import { Gesture, EventType as GestureEventType } from 'vs/base/browser/touch';
2929
import { Event } from 'vs/base/common/event';
30+
import { getProgressBarStyles } from 'vs/platform/theme/browser/defaultStyles';
3031

3132
export class NotificationsListDelegate implements IListVirtualDelegate<INotificationViewItem> {
3233

@@ -181,7 +182,6 @@ export class NotificationRenderer implements IListRenderer<INotificationViewItem
181182

182183
constructor(
183184
private actionRunner: IActionRunner,
184-
@IThemeService private readonly themeService: IThemeService,
185185
@IContextMenuService private readonly contextMenuService: IContextMenuService,
186186
@IInstantiationService private readonly instantiationService: IInstantiationService
187187
) {
@@ -259,8 +259,7 @@ export class NotificationRenderer implements IListRenderer<INotificationViewItem
259259
data.mainRow.appendChild(toolbarContainer);
260260

261261
// Progress: below the rows to span the entire width of the item
262-
data.progress = new ProgressBar(container);
263-
data.toDispose.add(attachProgressBarStyler(data.progress, this.themeService));
262+
data.progress = new ProgressBar(container, getProgressBarStyles());
264263
data.toDispose.add(data.progress);
265264

266265
// Renderer

0 commit comments

Comments
 (0)