simplify decoration rules and add trace assertion for when things go south...

jrieken · jrieken · commit dca100feaa8f · 2019-11-08T15:18:50.000+01:00
diff --git a/src/vs/base/browser/dom.ts b/src/vs/base/browser/dom.ts
@@ -795,7 +795,7 @@ function getSharedStyleSheet(): HTMLStyleElement {
 	return _sharedStyleSheet;
 }
 
-function getDynamicStyleSheetRules(style: any) {
+export function getDynamicStyleSheetRules(style: any): CSSStyleRule[] {
 	if (style && style.sheet && style.sheet.rules) {
 		// Chrome, IE
 		return style.sheet.rules;
diff --git a/src/vs/workbench/services/decorations/browser/decorationsService.ts b/src/vs/workbench/services/decorations/browser/decorationsService.ts
@@ -10,7 +10,7 @@ import { TernarySearchTree } from 'vs/base/common/map';
 import { IDisposable, toDisposable, DisposableStore } from 'vs/base/common/lifecycle';
 import { isThenable } from 'vs/base/common/async';
 import { LinkedList } from 'vs/base/common/linkedList';
-import { createStyleSheet, createCSSRule, removeCSSRulesContainingSelector } from 'vs/base/browser/dom';
+import { createStyleSheet, createCSSRule, removeCSSRulesContainingSelector, getDynamicStyleSheetRules } from 'vs/base/browser/dom';
 import { IThemeService, ITheme } from 'vs/platform/theme/common/themeService';
 import { IdGenerator } from 'vs/base/common/idGenerator';
 import { isFalsyOrWhitespace } from 'vs/base/common/strings';
@@ -22,25 +22,25 @@ import { ILogService } from 'vs/platform/log/common/log';
 
 class DecorationRule {
 
-	static keyOf(data: IDecorationData | IDecorationData[]): string {
-		if (Array.isArray(data)) {
-			return data.map(DecorationRule.keyOf).join(',');
-		} else {
-			const { color, letter } = data;
-			return `${color}/${letter}`;
+	static keyOf(data: IDecorationData[]): string {
+		let result = '';
+		for (const d of data) {
+			const { color, letter } = d;
+			result += `${color}/${letter}`;
 		}
+		return result;
 	}
 
 	private static readonly _classNames = new IdGenerator('monaco-decorations-style-');
 
-	readonly data: IDecorationData | IDecorationData[];
+	readonly data: IDecorationData[];
 	readonly itemColorClassName: string;
 	readonly itemBadgeClassName: string;
 	readonly bubbleBadgeClassName: string;
 
 	private _refCounter: number = 0;
 
-	constructor(data: IDecorationData | IDecorationData[]) {
+	constructor(data: IDecorationData[]) {
 		this.data = data;
 		this.itemColorClassName = DecorationRule._classNames.nextId();
 		this.itemBadgeClassName = DecorationRule._classNames.nextId();
@@ -56,30 +56,13 @@ class DecorationRule {
 	}
 
 	appendCSSRules(element: HTMLStyleElement, theme: ITheme): void {
-		if (!Array.isArray(this.data)) {
-			this._appendForOne(this.data, element, theme);
-		} else {
-			this._appendForMany(this.data, element, theme);
-		}
-	}
 
-	private _appendForOne(data: IDecorationData, element: HTMLStyleElement, theme: ITheme): void {
-		const { color, letter } = data;
 		// label
-		createCSSRule(`.${this.itemColorClassName}`, `color: ${getColor(theme, color)};`, element);
-		// letter
-		if (letter) {
-			createCSSRule(`.${this.itemBadgeClassName}::after`, `content: "${letter}"; color: ${getColor(theme, color)};`, element);
-		}
-	}
-
-	private _appendForMany(data: IDecorationData[], element: HTMLStyleElement, theme: ITheme): void {
-		// label
-		const { color } = data[0];
+		const { color } = this.data[0];
 		createCSSRule(`.${this.itemColorClassName}`, `color: ${getColor(theme, color)};`, element);
 
 		// badge
-		const letters = data.filter(d => !isFalsyOrWhitespace(d.letter)).map(d => d.letter);
+		const letters = this.data.filter(d => !isFalsyOrWhitespace(d.letter)).map(d => d.letter);
 		if (letters.length) {
 			createCSSRule(`.${this.itemBadgeClassName}::after`, `content: "${letters.join(', ')}"; color: ${getColor(theme, color)};`, element);
 		}
@@ -134,6 +117,8 @@ class DecorationStyles {
 
 		rule.acquire();
 
+		this._validate();
+
 		let labelClassName = rule.itemColorClassName;
 		let badgeClassName = rule.itemBadgeClassName;
 		let tooltip = data.filter(d => !isFalsyOrWhitespace(d.tooltip)).map(d => d.tooltip).join(' • ');
@@ -153,6 +138,7 @@ class DecorationStyles {
 					this._decorationRules.delete(key);
 					rule.removeCSSRules(this._styleElement);
 					rule = undefined;
+					this._validate();
 				}
 			}
 		};
@@ -164,6 +150,13 @@ class DecorationStyles {
 			rule.appendCSSRules(this._styleElement, this._themeService.getTheme());
 		});
 	}
+
+	private _validate(): void {
+		const ruleCount = getDynamicStyleSheetRules(this._styleElement).length;
+		if (this._decorationRules.size * 3 !== ruleCount) {
+			console.trace('THIS IS BAD - CHECK YOUR DECORATIONS SOMETHING IS OUT OF SYNC');
+		}
+	}
 }
 
 class FileDecorationChangeEvent implements IResourceDecorationChangeEvent {

Original file line number	Diff line number	Diff line change
`@@ -795,7 +795,7 @@ function getSharedStyleSheet(): HTMLStyleElement {`
`795`	`795`	`return _sharedStyleSheet;`
`796`	`796`	`}`
`797`	`797`
`798`		`-function getDynamicStyleSheetRules(style: any) {`
	`798`	`+export function getDynamicStyleSheetRules(style: any): CSSStyleRule[] {`
`799`	`799`	`if (style && style.sheet && style.sheet.rules) {`
`800`	`800`	`// Chrome, IE`
`801`	`801`	`return style.sheet.rules;`