theming - badge colors (fixes #25493)

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

@@ -270,6 +270,8 @@
 		"inputValidation.errorBackground": "#A22D44",
 		"inputValidation.errorBorder": "#AB395B",
 
+		"badge.background": "#0063a5",
+
 		"dropdown.background": "#181f2f",
 		// "dropdown.foreground": "",
 		// "dropdown.border": "",

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

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

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

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

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

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

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

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

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

@@ -314,6 +314,8 @@
 		"inputValidation.errorBackground": "#571b26",
 		"inputValidation.errorBorder": "#a92049",
 
+		"badge.background": "#047aa6",
+
 		"dropdown.background": "#00212B",
 		"dropdown.border": "#2AA19899",
 		// "dropdown.foreground": "",

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

@@ -313,6 +313,8 @@
 		// "inputValidation.errorBackground": "",
 		// "inputValidation.errorBorder": "",
 
+		"badge.background": "#B58900AA",
+
 		"dropdown.background": "#EEE8D5",
 		// "dropdown.foreground": "",
 		"dropdown.border": "#D3AF86",

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

@@ -33,6 +33,8 @@
 		"activityBar.background": "#001733",
 		"activityBarBadge.background": "#bbdaff",
 		"activityBarBadge.foreground": "#001733",
+		"badge.background": "#bbdaffcc",
+		"badge.foreground": "#001733",
 		"sideBar.background": "#001c40",
 		"terminal.ansiBlack": "#111111",
 		"terminal.ansiRed": "#ff9da4",

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

@@ -9,19 +9,5 @@
 	font-size: 85%;
 	font-weight: normal;
 	text-align: center;
-	background: #BEBEBE;
-	color: #FFF;
 	display: inline;
-}
-
-.vs-dark .monaco-count-badge {
-	color: #FFF;
-	background: #4D4D4D;
-}
-
-/* High Contrast Theming */
-.hc-black .monaco-count-badge {
-	background: #000;
-	border: 1px solid #6FC3DF;
-	margin-top: 2px;
 }

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

@@ -8,17 +8,48 @@
 import 'vs/css!./countBadge';
 import { $, append } from 'vs/base/browser/dom';
 import { format } from 'vs/base/common/strings';
+import { Color } from "vs/base/common/color";
+import { mixin } from "vs/base/common/objects";
+
+export interface ICountBadgeOptions extends ICountBadgetyles {
+	count?: number;
+	titleFormat?: string;
+}
+
+export interface ICountBadgetyles {
+	badgeBackground?: Color;
+	badgeForeground?: Color;
+	badgeBorder?: Color;
+}
+
+const defaultOpts = {
+	badgeBackground: Color.fromHex('#4D4D4D'),
+	badgeForeground: Color.fromHex('#FFFFFF')
+};
 
 export class CountBadge {
 
 	private element: HTMLElement;
 	private count: number;
 	private titleFormat: string;
 
-	constructor(container: HTMLElement, count?: number, titleFormat?: string) {
+	private badgeBackground: Color;
+	private badgeForeground: Color;
+	private badgeBorder: Color;
+
+	private options: ICountBadgeOptions;
+
+	constructor(container: HTMLElement, options?: ICountBadgeOptions) {
+		this.options = options || Object.create(null);
+		mixin(this.options, defaultOpts, false);
+
+		this.badgeBackground = this.options.badgeBackground;
+		this.badgeForeground = this.options.badgeForeground;
+		this.badgeBorder = this.options.badgeBorder;
+
 		this.element = append(container, $('.monaco-count-badge'));
-		this.titleFormat = titleFormat || '';
-		this.setCount(count || 0);
+		this.titleFormat = this.options.titleFormat || '';
+		this.setCount(this.options.count || 0);
 	}
 
 	setCount(count: number) {
@@ -34,5 +65,30 @@ export class CountBadge {
 	private render() {
 		this.element.textContent = '' + this.count;
 		this.element.title = format(this.titleFormat, this.count);
+
+		this.applyStyles();
+	}
+
+	style(styles: ICountBadgetyles): void {
+		this.badgeBackground = styles.badgeBackground;
+		this.badgeForeground = styles.badgeForeground;
+		this.badgeBorder = styles.badgeBorder;
+
+		this.applyStyles();
+	}
+
+	private applyStyles(): void {
+		if (this.element) {
+			const background = this.badgeBackground ? this.badgeBackground.toString() : null;
+			const foreground = this.badgeForeground ? this.badgeForeground.toString() : null;
+			const border = this.badgeBorder ? this.badgeBorder.toString() : null;
+
+			this.element.style.backgroundColor = background;
+			this.element.style.color = foreground;
+
+			this.element.style.borderWidth = border ? '1px' : null;
+			this.element.style.borderStyle = border ? 'solid' : null;
+			this.element.style.borderColor = border;
+		}
 	}
 }

src/vs/editor/contrib/referenceSearch/browser/referencesWidget.ts

@@ -40,7 +40,7 @@ import { FileReferences, OneReference, ReferencesModel } from './referencesModel
 import { ITextModelResolverService, ITextEditorModel } from 'vs/editor/common/services/resolverService';
 import { registerColor, activeContrastBorder, contrastBorder } from 'vs/platform/theme/common/colorRegistry';
 import { registerThemingParticipant, ITheme, IThemeService } from 'vs/platform/theme/common/themeService';
-import { attachListStyler } from 'vs/platform/theme/common/styler';
+import { attachListStyler, attachBadgeStyler } from 'vs/platform/theme/common/styler';
 import { IModelDecorationsChangedEvent } from 'vs/editor/common/model/textModelEvents';
 import { IEditorOptions } from 'vs/editor/common/config/editorOptions';
 
@@ -344,10 +344,16 @@ class Controller extends DefaultController {
 
 class Renderer extends LegacyRenderer {
 	private _contextService: IWorkspaceContextService;
+	private _themeService: IThemeService;
 
-	constructor( @IWorkspaceContextService contextService: IWorkspaceContextService) {
+	constructor(
+		@IWorkspaceContextService contextService: IWorkspaceContextService,
+		@IThemeService themeService: IThemeService
+	) {
 		super();
+
 		this._contextService = contextService;
+		this._themeService = themeService;
 	}
 
 	public getHeight(tree: tree.ITree, element: any): number {
@@ -356,6 +362,7 @@ class Renderer extends LegacyRenderer {
 
 	protected render(tree: tree.ITree, element: FileReferences | OneReference, container: HTMLElement): tree.IElementCallback {
 
+		const toDispose: IDisposable[] = [];
 		dom.clearNode(container);
 
 		if (element instanceof FileReferences) {
@@ -364,13 +371,15 @@ class Renderer extends LegacyRenderer {
 			/* tslint:disable:no-unused-expression */
 			new LeftRightWidget(fileReferencesContainer, (left: HTMLElement) => {
 
-				new FileLabel(left, element.uri, this._contextService);
+				const label = new FileLabel(left, element.uri, this._contextService);
+				toDispose.push(label);
 				return <IDisposable>null;
 
 			}, (right: HTMLElement) => {
 
 				const len = element.children.length;
-				const badge = new CountBadge(right, len);
+				const badge = new CountBadge(right, { count: len });
+				toDispose.push(attachBadgeStyler(badge, this._themeService));
 
 				if (element.failure) {
 					badge.setTitleFormat(nls.localize('referencesFailre', "Failed to resolve file."));
@@ -402,7 +411,9 @@ class Renderer extends LegacyRenderer {
 					strings.escape(preview.after))).appendTo(container);
 		}
 
-		return null;
+		return () => {
+			dispose(toDispose);
+		};
 	}
 }
 

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

@@ -172,6 +172,10 @@ export const buttonForeground = registerColor('button.foreground', { dark: Color
 export const buttonBackground = registerColor('button.background', { dark: '#0E639C', light: '#007ACC', hc: null }, nls.localize('buttonBackground', "Button background color."));
 export const buttonHoverBackground = registerColor('button.hoverBackground', { dark: lighten(buttonBackground, 0.2), light: darken(buttonBackground, 0.2), hc: null }, nls.localize('buttonHoverBackground', "Button background color when hovering."));
 
+export const badgeBackground = registerColor('badge.background', { dark: '#4D4D4D', light: '#BEBEBE', hc: Color.black }, nls.localize('badgeBackground', "Badge background color. Badges are small information labels, e.g. for search results count."));
+export const badgeForeground = registerColor('badge.foreground', { dark: Color.white, light: Color.white, hc: Color.white }, nls.localize('badgeForeground', "Badge foreground color. Badges are small information labels, e.g. for search results count."));
+export const badgeBorder = registerColor('badge.border', { dark: null, light: null, hc: contrastBorder }, nls.localize('badgeBorder', "Badge border color. Badges are small information labels, e.g. for search results count."));
+
 export const scrollbarShadow = registerColor('scrollbar.shadow', { dark: '#000000', light: '#DDDDDD', hc: null }, nls.localize('scrollbarShadow', "Scrollbar shadow to indicate that the view is scrolled."));
 export const scrollbarSliderBackground = registerColor('scrollbarSlider.background', { dark: Color.fromHex('#797979').transparent(0.4), light: Color.fromHex('#646464').transparent(0.4), hc: transparent(contrastBorder, 0.6) }, nls.localize('scrollbarSliderBackground', "Slider background color."));
 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."));

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 } 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, badgeBorder } from 'vs/platform/theme/common/colorRegistry';
 import { IDisposable } from 'vs/base/common/lifecycle';
 import { SIDE_BAR_SECTION_HEADER_BACKGROUND } from 'vs/workbench/common/theme';
 
@@ -46,6 +46,19 @@ export function attachCheckboxStyler(widget: IThemable, themeService: IThemeServ
 	}, widget);
 }
 
+export function attachBadgeStyler(widget: IThemable, themeService: IThemeService, style?:
+	{
+		badgeBackground?: ColorIdentifier,
+		badgeForeground?: ColorIdentifier,
+		badgeBorder?: ColorIdentifier
+	}): IDisposable {
+	return doAttachStyler(themeService, {
+		badgeBackground: (style && style.badgeBackground) || badgeBackground,
+		badgeForeground: (style && style.badgeForeground) || badgeForeground,
+		badgeBorder: (style && style.badgeBorder) || badgeBorder
+	}, widget);
+}
+
 export function attachInputBoxStyler(widget: IThemable, themeService: IThemeService, style?:
 	{
 		inputBackground?: ColorIdentifier,

src/vs/workbench/parts/files/browser/media/explorerviewlet.css

@@ -182,14 +182,4 @@
 .hc-black .monaco-workbench .explorer-viewlet .open-editor,
 .hc-black .monaco-workbench .explorer-viewlet .editor-group {
 	line-height: 20px;
-}
-
-/* TODO@Theme */
-
-.vs .monaco-workbench .explorer-viewlet .header .monaco-count-badge {
-	background-color: rgba(190, 190, 190, 0.7);
-}
-
-.vs-dark .monaco-workbench .explorer-viewlet .header .monaco-count-badge {
-	background-color: rgba(100, 100, 100, 0.5);
 }

src/vs/workbench/parts/files/browser/views/openEditorsView.ts

@@ -31,8 +31,9 @@ import { ToggleEditorLayoutAction } from 'vs/workbench/browser/actions/toggleEdi
 import { IContextKeyService, IContextKey } from 'vs/platform/contextkey/common/contextkey';
 import { IListService } from 'vs/platform/list/browser/listService';
 import { EditorGroup } from 'vs/workbench/common/editor/editorStacksModel';
-import { attachListStyler } from 'vs/platform/theme/common/styler';
+import { attachListStyler, attachStylerCallback } from 'vs/platform/theme/common/styler';
 import { IThemeService } from 'vs/platform/theme/common/themeService';
+import { badgeBackground, badgeForeground, badgeBorder } from "vs/platform/theme/common/colorRegistry";
 
 const $ = dom.$;
 
@@ -87,6 +88,20 @@ export class OpenEditorsView extends AdaptiveCollapsibleViewletView {
 		titleSpan.textContent = nls.localize({ key: 'openEditors', comment: ['Open is an adjective'] }, "Open Editors");
 
 		this.dirtyCountElement = dom.append(titleDiv, $('.monaco-count-badge'));
+
+		this.toDispose.push((attachStylerCallback(this.themeService, { badgeBackground, badgeForeground, badgeBorder }, colors => {
+			const background = colors.badgeBackground ? colors.badgeBackground.toString() : null;
+			const foreground = colors.badgeForeground ? colors.badgeForeground.toString() : null;
+			const border = colors.badgeBorder ? colors.badgeBorder.toString() : null;
+
+			this.dirtyCountElement.style.backgroundColor = background;
+			this.dirtyCountElement.style.color = foreground;
+
+			this.dirtyCountElement.style.borderWidth = border ? '1px' : null;
+			this.dirtyCountElement.style.borderStyle = border ? 'solid' : null;
+			this.dirtyCountElement.style.borderColor = border;
+		})));
+
 		this.updateDirtyIndicator();
 
 		super.renderHeader(container);

src/vs/workbench/parts/markers/browser/markersTreeViewer.ts

@@ -18,9 +18,13 @@ import { IMarker } from 'vs/platform/markers/common/markers';
 import { MarkersModel, Resource, Marker } from 'vs/workbench/parts/markers/common/markersModel';
 import Messages from 'vs/workbench/parts/markers/common/messages';
 import { IInstantiationService } from 'vs/platform/instantiation/common/instantiation';
+import { attachBadgeStyler } from "vs/platform/theme/common/styler";
+import { IThemeService } from "vs/platform/theme/common/themeService";
+import { IDisposable } from "vs/base/common/lifecycle";
 
 interface IAnyResourceTemplateData {
 	count: CountBadge;
+	styler: IDisposable;
 }
 
 interface IResourceTemplateData extends IAnyResourceTemplateData {
@@ -80,7 +84,8 @@ export class Renderer implements IRenderer {
 	constructor(private actionRunner: IActionRunner,
 		private actionProvider: IActionProvider,
 		@IWorkspaceContextService private contextService: IWorkspaceContextService,
-		@IInstantiationService private instantiationService: IInstantiationService
+		@IInstantiationService private instantiationService: IInstantiationService,
+		@IThemeService private themeService: IThemeService
 	) {
 	}
 
@@ -121,6 +126,7 @@ export class Renderer implements IRenderer {
 
 		const badgeWrapper = dom.append(container, dom.$('.count-badge-wrapper'));
 		data.count = new CountBadge(badgeWrapper);
+		data.styler = attachBadgeStyler(data.count, this.themeService);
 
 		return data;
 	}
@@ -132,6 +138,7 @@ export class Renderer implements IRenderer {
 
 		const badgeWrapper = dom.append(container, dom.$('.count-badge-wrapper'));
 		data.count = new CountBadge(badgeWrapper);
+		data.styler = attachBadgeStyler(data.count, this.themeService);
 
 		return data;
 	}
@@ -193,9 +200,11 @@ export class Renderer implements IRenderer {
 	public disposeTemplate(tree: ITree, templateId: string, templateData: any): void {
 		if (templateId === Renderer.FILE_RESOURCE_TEMPLATE_ID) {
 			(<IFileResourceTemplateData>templateData).fileLabel.dispose();
+			(<IFileResourceTemplateData>templateData).styler.dispose();
 		}
 		if (templateId === Renderer.RESOURCE_TEMPLATE_ID) {
 			(<IResourceTemplateData>templateData).resourceLabel.dispose();
+			(<IResourceTemplateData>templateData).styler.dispose();
 		}
 	}
 }