deco - also use className for badge

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

@@ -13,19 +13,23 @@ import uri from 'vs/base/common/uri';
 import paths = require('vs/base/common/paths');
 import { IWorkspaceFolderProvider, getPathLabel, IUserHomeProvider } from 'vs/base/common/labels';
 import { IDisposable, combinedDisposable } from 'vs/base/common/lifecycle';
-import { Color } from 'vs/base/common/color';
 
 export interface IIconLabelCreationOptions {
 	supportHighlights?: boolean;
 }
 
+export interface ILabelBadgeOptions {
+	letter: string;
+	title: string;
+	className: string;
+}
+
 export interface IIconLabelOptions {
 	title?: string;
 	extraClasses?: string[];
 	italic?: boolean;
 	matches?: IMatch[];
-	color?: Color;
-	badge?: { letter: string, title: string };
+	badge?: ILabelBadgeOptions;
 }
 
 class FastLabelNode {
@@ -156,8 +160,7 @@ export class IconLabel {
 			const { letter, title } = options.badge;
 			this.badgeNode.innerHTML = letter;
 			this.badgeNode.title = title;
-			this.badgeNode.style.backgroundColor = options.color.toString();
-			this.badgeNode.style.color = Color.white.toString();
+			dom.addClass(this.badgeNode, options.badge.className);
 			dom.show(this.badgeNode);
 
 		} else if (this.badgeNode) {

src/vs/workbench/browser/labels.ts

@@ -189,8 +189,11 @@ export class ResourceLabel extends IconLabel {
 			);
 			if (deco) {
 				iconLabelOptions.extraClasses.push(deco.labelClasses);
-				iconLabelOptions.color = this.options.fileDecorations.useColors ? this.themeService.getTheme().getColor(deco.color) : undefined;
-				iconLabelOptions.badge = this.options.fileDecorations.useBadges ? deco.letter && { letter: deco.letter, title: deco.tooltip } : undefined;
+				iconLabelOptions.badge = deco.letter ? {
+					letter: deco.letter,
+					title: deco.tooltip,
+					className: deco.badgeClassName,
+				} : undefined;
 			}
 		}
 

src/vs/workbench/services/decorations/browser/decorations.ts

@@ -22,6 +22,7 @@ export interface IResourceDecoration {
 	readonly leafOnly?: boolean;
 
 	labelClasses?: string;
+	badgeClassName?: string;
 }
 
 export interface IDecorationsProvider {

src/vs/workbench/services/decorations/browser/decorationsService.ts

@@ -15,7 +15,7 @@ import { LinkedList } from 'vs/base/common/linkedList';
 import { createStyleSheet, createCSSRule } from 'vs/base/browser/dom';
 import { IThemeService } from 'vs/platform/theme/common/themeService';
 import { IdGenerator } from 'vs/base/common/idGenerator';
-import { listActiveSelectionForeground } from 'vs/platform/theme/common/colorRegistry';
+import { listActiveSelectionForeground, ColorIdentifier } from 'vs/platform/theme/common/colorRegistry';
 
 class FileDecorationChangeEvent implements IResourceDecorationChangeEvent {
 
@@ -129,7 +129,7 @@ class DecorationColors {
 	private readonly _styleElement = createStyleSheet();
 	private readonly _themeListener: IDisposable;
 	private readonly _classNames = new IdGenerator('monaco-decoration-styles-');
-	private readonly _classNames2ColorIds = new Map<string, string>();
+	private readonly _classNames2ColorIds = new Map<string, [string, string]>();
 
 	constructor(
 		@IThemeService private _themeService: IThemeService,
@@ -146,25 +146,42 @@ class DecorationColors {
 		if (!decoration || !decoration.color) {
 			return;
 		}
-		let className = this._classNames2ColorIds.get(decoration.color);
-		if (!className) {
-			className = this._classNames.nextId();
-			this._classNames2ColorIds.set(decoration.color, className);
 
-			createCSSRule(`.${className}`, `color: ${this._themeService.getTheme().getColor(decoration.color)}`, this._styleElement);
-			createCSSRule(`.selected .${className}`, `color: ${this._themeService.getTheme().getColor(listActiveSelectionForeground)}`, this._styleElement);
+		const tuple = this._classNames2ColorIds.get(decoration.color);
+		if (tuple) {
+			// from cache
+			decoration.labelClasses = tuple[0];
+			decoration.badgeClassName = tuple[1];
+			return;
 		}
 
-		decoration.labelClasses = className;
+		let labelClassName = this._classNames.nextId();
+		let badgeClassName = this._classNames.nextId();
+
+		this._classNames2ColorIds.set(decoration.color, [labelClassName, badgeClassName]);
+		decoration.labelClasses = labelClassName;
+		decoration.badgeClassName = badgeClassName;
+
+		this._createCssRules(labelClassName, badgeClassName, decoration.color);
 	}
 
 	private _onThemeChange(): void {
 		this._styleElement.innerHTML = '';
-		this._classNames2ColorIds.forEach((className, color) => {
-			createCSSRule(`.${className}`, `color: ${this._themeService.getTheme().getColor(color)}`, this._styleElement);
-			createCSSRule(`.selected .${className}`, `color: ${this._themeService.getTheme().getColor(listActiveSelectionForeground)}`, this._styleElement);
+		this._classNames2ColorIds.forEach((tuple, color) => {
+			const [labelClassName, badgeClassName] = tuple;
+			this._createCssRules(labelClassName, badgeClassName, color);
 		});
 	}
+
+	private _createCssRules(labelClassName: string, badgeClassName: string, color: ColorIdentifier): void {
+		const theme = this._themeService.getTheme();
+		// label
+		createCSSRule(`.${labelClassName}`, `color: ${theme.getColor(color)}`, this._styleElement);
+		createCSSRule(`.selected .${labelClassName}`, `color: ${theme.getColor(listActiveSelectionForeground)}`, this._styleElement);
+
+		// badge
+		createCSSRule(`.${badgeClassName}`, `background-color: ${theme.getColor(color)}; color: ${theme.getColor(listActiveSelectionForeground)};`, this._styleElement);
+	}
 }
 
 export class FileDecorationsService implements IResourceDecorationsService {