theming - progress bar

extensions/theme-abyss/themes/abyss-color-theme.json

@@ -271,6 +271,7 @@
 		"inputValidation.errorBorder": "#AB395B",
 
 		"badge.background": "#0063a5",
+		"progressBar.background": "#0063a5",
 
 		"dropdown.background": "#181f2f",
 		// "dropdown.foreground": "",

extensions/theme-kimbie-dark/themes/kimbie-dark-color-theme.json

@@ -43,7 +43,8 @@
 		// "inputValidation.warningBorder": "#5B7E7A",
 		"inputValidation.errorBackground": "#5f0d0d",
 		"inputValidation.errorBorder": "#9d2f23",
-		"badge.background": "#7f5d38"
+		"badge.background": "#7f5d38",
+		"progressBar.background": "#7f5d38"
 	},
 	"tokenColors": [
 		{

extensions/theme-monokai/themes/monokai-color-theme.json

@@ -28,6 +28,7 @@
 		"tab.border": "#1e1f1c",
 		"tab.inactiveForeground": "#ccccc7", // needs to be bright so it's readable when another editor group is focused
 		"widget.shadow": "#1e1f1c",
+		"progressBar.background": "#75715E",
 		"badge.background": "#75715E",
 		"badge.foreground": "#f8f8f2",
 		"editorLineNumber.foreground": "#90908a",

extensions/theme-quietlight/themes/quietlight-color-theme.json

@@ -496,6 +496,7 @@
 		"inputValidation.warningBorder": "#ffe055",
 		"inputValidation.errorBackground": "#ffeaea",
 		"inputValidation.errorBorder": "#f1897f",
-		"badge.background": "#705697AA"
+		"badge.background": "#705697AA",
+		"progressBar.background": "#705697"
 	}
 }

extensions/theme-red/themes/Red-color-theme.json

@@ -50,7 +50,8 @@
 		"notification.background": "#662222",
 		"pickerGroup.foreground": "#cc9999",
 		"pickerGroup.border": "#ff000033",
-		"badge.background": "#cc3333"
+		"badge.background": "#cc3333",
+		"progressBar.background": "#cc3333"
 	},
 	"name": "Red"
 }

extensions/theme-solarized-dark/themes/solarized-dark-color-theme.json

@@ -315,6 +315,7 @@
 		"inputValidation.errorBorder": "#a92049",
 
 		"badge.background": "#047aa6",
+		"progressBar.background": "#047aa6",
 
 		"dropdown.background": "#00212B",
 		"dropdown.border": "#2AA19899",

extensions/theme-solarized-light/themes/solarized-light-color-theme.json

@@ -314,6 +314,7 @@
 		// "inputValidation.errorBorder": "",
 
 		"badge.background": "#B58900AA",
+		"progressBar.background": "#B58900",
 
 		"dropdown.background": "#EEE8D5",
 		// "dropdown.foreground": "",

extensions/theme-tomorrow-night-blue/themes/tomorrow-night-blue-theme.json

@@ -31,6 +31,7 @@
 		"statusBar.noFolderBackground": "#001126",
 		"statusBar.debuggingBackground": "#001126",
 		"activityBar.background": "#001733",
+		"progressBar.background": "#bbdaffcc",
 		"badge.background": "#bbdaffcc",
 		"badge.foreground": "#001733",
 		"sideBar.background": "#001c40",

src/vs/base/browser/ui/keybindingLabel/keybindingLabel.css

@@ -9,11 +9,11 @@
 
 .monaco-kbkey {
 	display: inline-block;
-	border: solid 1px #ccc;
-	border-bottom-color: #bbb;
+	border: solid 1px rgba(204, 204, 204, 0.4);
+	border-bottom-color: rgba(187, 187, 187, 0.4);
 	border-radius: 3px;
-	box-shadow: inset 0 -1px 0 #bbb;
-	background-color: #ddd;
+	box-shadow: inset 0 -1px 0 rgba(187, 187, 187, 0.4);
+	background-color: rgba(221, 221, 221, 0.4);
 	vertical-align: middle;
 	color: #555;
 	line-height: 10px;
@@ -25,7 +25,7 @@
 .vs-dark .monaco-kbkey {
 	background-color: rgba(128, 128, 128, 0.17);
 	color: #ccc;
-	border: solid 1px #333;
-	border-bottom-color: #444;
-	box-shadow: inset 0 -1px 0 #444;
+	border: solid 1px rgba(51, 51, 51, 0.6);
+	border-bottom-color: rgba(68, 68, 68, 0.6);
+	box-shadow: inset 0 -1px 0 rgba(68, 68, 68, 0.6);
 }

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

@@ -4,7 +4,7 @@
  *--------------------------------------------------------------------------------------------*/
 .progress-container {
 	width: 100%;
-	height: 5px;	
+	height: 5px;
 }
 
 .progress-container .progress-bit {
@@ -13,7 +13,6 @@
 	position: absolute;
 	left: 0;
 	display: none;
-	background-color: #0E70C0;
 }
 
 .progress-container.active .progress-bit {

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

@@ -11,6 +11,8 @@ import assert = require('vs/base/common/assert');
 import { Builder, $ } from 'vs/base/browser/builder';
 import DOM = require('vs/base/browser/dom');
 import { IDisposable, dispose } from 'vs/base/common/lifecycle';
+import { Color } from "vs/base/common/color";
+import { mixin } from "vs/base/common/objects";
 
 const css_done = 'done';
 const css_active = 'active';
@@ -19,11 +21,22 @@ const css_discrete = 'discrete';
 const css_progress_container = 'progress-container';
 const css_progress_bit = 'progress-bit';
 
+export interface IProgressBarOptions extends IProgressBarStyles {
+}
+
+export interface IProgressBarStyles {
+	progressBarBackground?: Color;
+}
+
+const defaultOpts = {
+	progressBarBackground: Color.fromHex('#0E70C0')
+};
+
 /**
  * A progress bar with support for infinite or discrete progress.
  */
 export class ProgressBar {
-
+	private options: IProgressBarOptions;
 	private toUnbind: IDisposable[];
 	private workedVal: number;
 	private element: Builder;
@@ -31,11 +44,17 @@ export class ProgressBar {
 	private bit: HTMLElement;
 	private totalWork: number;
 	private animationStopToken: ValueCallback;
+	private progressBarBackground: Color;
+
+	constructor(builder: Builder, options?: IProgressBarOptions) {
+		this.options = options || Object.create(null);
+		mixin(this.options, defaultOpts, false);
 
-	constructor(builder: Builder) {
 		this.toUnbind = [];
 		this.workedVal = 0;
 
+		this.progressBarBackground = this.options.progressBarBackground;
+
 		this.create(builder);
 	}
 
@@ -61,6 +80,8 @@ export class ProgressBar {
 
 			this.bit = builder.getHTMLElement();
 		});
+
+		this.applyStyles();
 	}
 
 	private off(): void {
@@ -189,6 +210,20 @@ export class ProgressBar {
 		return $(this.element);
 	}
 
+	public style(styles: IProgressBarStyles): void {
+		this.progressBarBackground = styles.progressBarBackground;
+
+		this.applyStyles();
+	}
+
+	protected applyStyles(): void {
+		if (this.element) {
+			const background = this.progressBarBackground ? this.progressBarBackground.toString() : null;
+
+			this.element.style('background-color', background);
+		}
+	}
+
 	public dispose(): void {
 		this.toUnbind = dispose(this.toUnbind);
 	}

src/vs/base/parts/quickopen/browser/quickOpenWidget.ts

@@ -53,6 +53,7 @@ export interface IQuickOpenStyles extends IInputBoxStyles, ITreeStyles {
 	pickerGroupForeground?: Color;
 	pickerGroupBorder?: Color;
 	widgetShadow?: Color;
+	progressBarBackground?: Color;
 }
 
 export interface IShowOptions {
@@ -86,7 +87,8 @@ const defaultStyles = {
 	foreground: Color.fromHex('#CCCCCC'),
 	pickerGroupForeground: Color.fromHex('#0097FB'),
 	pickerGroupBorder: Color.fromHex('#3F3F46'),
-	widgetShadow: Color.fromHex('#000000')
+	widgetShadow: Color.fromHex('#000000'),
+	progressBarBackground: Color.fromHex('#0E70C0')
 };
 
 const DEFAULT_INPUT_ARIA_LABEL = nls.localize('quickOpenAriaLabel', "Quick picker. Type to narrow down results.");
@@ -159,7 +161,7 @@ export class QuickOpenWidget implements IModelProvider {
 				.on(DOM.EventType.BLUR, (e: Event) => this.loosingFocus(e), null, true);
 
 			// Progress Bar
-			this.progressBar = new ProgressBar(div.clone());
+			this.progressBar = new ProgressBar(div.clone(), { progressBarBackground: this.styles.progressBarBackground });
 			this.progressBar.getContainer().hide();
 
 			// Input Field
@@ -352,6 +354,12 @@ export class QuickOpenWidget implements IModelProvider {
 			this.builder.style('box-shadow', widgetShadow ? `0 5px 8px ${widgetShadow}` : null);
 		}
 
+		if (this.progressBar) {
+			this.progressBar.style({
+				progressBarBackground: this.styles.progressBarBackground
+			});
+		}
+
 		if (this.inputBox) {
 			this.inputBox.style({
 				inputBackground: this.styles.inputBackground,

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

@@ -194,6 +194,8 @@ export const scrollbarSliderBackground = registerColor('scrollbarSlider.backgrou
 export const scrollbarSliderHoverBackground = registerColor('scrollbarSlider.hoverBackground', { dark: Color.fromHex('#646464').transparent(0.7), light: Color.fromHex('#646464').transparent(0.7), hc: transparent(contrastBorder, 0.8) }, nls.localize('scrollbarSliderHoverBackground', "Slider background color when hovering."));
 export const scrollbarSliderActiveBackground = registerColor('scrollbarSlider.activeBackground', { dark: Color.fromHex('#BFBFBF').transparent(0.4), light: Color.fromHex('#000000').transparent(0.6), hc: contrastBorder }, nls.localize('scrollbarSliderActiveBackground', "Slider background color when active."));
 
+export const progressBarBackground = registerColor('progressBar.background', { dark: Color.fromHex('#0E70C0'), light: Color.fromHex('#0E70C0'), hc: contrastBorder }, nls.localize('progressBarBackground', "Background color of the progress bar that can show for long running operations."));
+
 /**
  * Editor background color.
  * Because of bug https://monacotools.visualstudio.com/DefaultCollection/Monaco/_workitems/edit/13254

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, contrastBorder, inputActiveOptionBorder, listFocusBackground, listActiveSelectionBackground, listActiveSelectionForeground, listInactiveSelectionForeground, listInactiveSelectionBackground, listHoverBackground, listDropBackground, pickerGroupBorder, pickerGroupForeground, widgetShadow, inputValidationInfoBorder, inputValidationInfoBackground, inputValidationWarningBorder, inputValidationWarningBackground, inputValidationErrorBorder, inputValidationErrorBackground, activeContrastBorder, buttonForeground, buttonBackground, buttonHoverBackground, ColorFunction, lighten, badgeBackground, badgeForeground } from 'vs/platform/theme/common/colorRegistry';
+import { inputBackground, inputForeground, ColorIdentifier, selectForeground, selectBackground, selectBorder, inputBorder, foreground, editorBackground, contrastBorder, inputActiveOptionBorder, listFocusBackground, listActiveSelectionBackground, listActiveSelectionForeground, listInactiveSelectionForeground, listInactiveSelectionBackground, listHoverBackground, listDropBackground, pickerGroupBorder, pickerGroupForeground, widgetShadow, inputValidationInfoBorder, inputValidationInfoBackground, inputValidationWarningBorder, inputValidationWarningBackground, inputValidationErrorBorder, inputValidationErrorBackground, activeContrastBorder, buttonForeground, buttonBackground, buttonHoverBackground, ColorFunction, lighten, badgeBackground, badgeForeground, progressBarBackground } from 'vs/platform/theme/common/colorRegistry';
 import { IDisposable } from 'vs/base/common/lifecycle';
 import { SIDE_BAR_SECTION_HEADER_BACKGROUND } from 'vs/workbench/common/theme';
 
@@ -123,6 +123,7 @@ export function attachQuickOpenStyler(widget: IThemable, themeService: IThemeSer
 	background?: ColorIdentifier,
 	borderColor?: ColorIdentifier,
 	widgetShadow?: ColorIdentifier,
+	progressBarBackground?: ColorIdentifier,
 	inputBackground?: ColorIdentifier,
 	inputForeground?: ColorIdentifier,
 	inputBorder?: ColorIdentifier,
@@ -152,6 +153,7 @@ export function attachQuickOpenStyler(widget: IThemable, themeService: IThemeSer
 		background: (style && style.background) || editorBackground,
 		borderColor: style && style.borderColor || contrastBorder,
 		widgetShadow: style && style.widgetShadow || widgetShadow,
+		progressBarBackground: style && style.progressBarBackground || progressBarBackground,
 		pickerGroupForeground: style && style.pickerGroupForeground || pickerGroupForeground,
 		pickerGroupBorder: style && style.pickerGroupBorder || pickerGroupBorder,
 		inputBackground: (style && style.inputBackground) || inputBackground,
@@ -228,6 +230,12 @@ export function attachButtonStyler(widget: IThemable, themeService: IThemeServic
 	}, widget);
 }
 
+export function attachProgressBarStyler(widget: IThemable, themeService: IThemeService, style?: { progressBarBackground?: ColorIdentifier }): IDisposable {
+	return doAttachStyler(themeService, {
+		progressBarBackground: (style && style.progressBarBackground) || progressBarBackground
+	}, widget);
+}
+
 export function attachStylerCallback(themeService: IThemeService, colors: { [name: string]: ColorIdentifier }, callback: styleFn): IDisposable {
 	return doAttachStyler(themeService, colors, callback);
 }

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

@@ -36,6 +36,7 @@ import { IProgressService } from 'vs/platform/progress/common/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";
 
 export interface ICompositeTitleLabel {
 
@@ -487,6 +488,7 @@ export abstract class CompositePart<T extends Composite> extends Part {
 			'class': 'content'
 		}, (div: Builder) => {
 			this.progressBar = new ProgressBar(div);
+			this.toUnbind.push(attachProgressBarStyler(this.progressBar, this.themeService));
 			this.progressBar.getContainer().hide();
 		});
 	}

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

@@ -36,6 +36,7 @@ import { getCodeEditor } from 'vs/editor/common/services/codeEditorService';
 import { IThemeService } from 'vs/platform/theme/common/themeService';
 import { editorBackground, contrastBorder, activeContrastBorder } from 'vs/platform/theme/common/colorRegistry';
 import { Themable, TABS_CONTAINER_BACKGROUND, EDITOR_GROUP_HEADER_BACKGROUND, EDITOR_GROUP_BORDER_COLOR, EDITOR_DRAG_AND_DROP_BACKGROUND, EDITOR_GROUP_BACKGROUND } from 'vs/workbench/common/theme';
+import { attachProgressBarStyler } from "vs/platform/theme/common/styler";
 
 export enum Rochade {
 	NONE,
@@ -991,6 +992,7 @@ export class EditorGroupsControl extends Themable implements IEditorGroupsContro
 
 			// Progress Bar
 			const progressBar = new ProgressBar($(container));
+			this.toUnbind.push(attachProgressBarStyler(progressBar, this.themeService));
 			progressBar.getContainer().hide();
 			container.setProperty(EditorGroupsControl.PROGRESS_BAR_CONTROL_KEY, progressBar); // associate with container
 		});