css variables all the way (microsoft#167180)

fixes microsoft#166729

Author: jrieken

src/vs/editor/contrib/codelens/browser/codelensController.ts

@@ -3,10 +3,9 @@
  *  Licensed under the MIT License. See License.txt in the project root for license information.
  *--------------------------------------------------------------------------------------------*/
 
-import * as dom from 'vs/base/browser/dom';
+
 import { CancelablePromise, createCancelablePromise, disposableTimeout, RunOnceScheduler } from 'vs/base/common/async';
 import { onUnexpectedError, onUnexpectedExternalError } from 'vs/base/common/errors';
-import { hash } from 'vs/base/common/hash';
 import { DisposableStore, toDisposable } from 'vs/base/common/lifecycle';
 import { StableEditorScrollState } from 'vs/editor/browser/stableEditorScroll';
 import { IActiveCodeEditor, ICodeEditor, IViewZoneChangeAccessor, MouseTargetType } from 'vs/editor/browser/editorBrowser';
@@ -32,8 +31,7 @@ export class CodeLensContribution implements IEditorContribution {
 
 	private readonly _disposables = new DisposableStore();
 	private readonly _localToDispose = new DisposableStore();
-	private readonly _styleElement: HTMLStyleElement;
-	private readonly _styleClassName: string;
+
 	private readonly _lenses: CodeLensWidget[] = [];
 
 	private readonly _provideCodeLensDebounce: IFeatureDebounceInformation;
@@ -70,12 +68,6 @@ export class CodeLensContribution implements IEditorContribution {
 		this._disposables.add(_languageFeaturesService.codeLensProvider.onDidChange(this._onModelChange, this));
 		this._onModelChange();
 
-		this._styleClassName = '_' + hash(this._editor.getId()).toString(16);
-		this._styleElement = dom.createStyleSheet(
-			dom.isInShadowDOM(this._editor.getContainerDomNode())
-				? this._editor.getContainerDomNode()
-				: undefined
-		);
 		this._updateLensStyle();
 	}
 
@@ -84,7 +76,6 @@ export class CodeLensContribution implements IEditorContribution {
 		this._disposables.dispose();
 		this._oldCodeLensModels.dispose();
 		this._currentCodeLensModel?.dispose();
-		this._styleElement.remove();
 	}
 
 	private _getLayoutInfo() {
@@ -105,19 +96,16 @@ export class CodeLensContribution implements IEditorContribution {
 		const fontFamily = this._editor.getOption(EditorOption.codeLensFontFamily);
 		const editorFontInfo = this._editor.getOption(EditorOption.fontInfo);
 
-		const fontFamilyVar = `--codelens-font-family${this._styleClassName}`;
-		const fontFeaturesVar = `--codelens-font-features${this._styleClassName}`;
+		const { style } = this._editor.getContainerDomNode();
+
+		style.setProperty('--vscode-editorCodeLens-lineHeight', `${codeLensHeight}px`);
+		style.setProperty('--vscode-editorCodeLens-fontSize', `${fontSize}px`);
+		style.setProperty('--vscode-editorCodeLens-fontFeatureSettings', editorFontInfo.fontFeatureSettings);
 
-		let newStyle = `
-		.monaco-editor .codelens-decoration.${this._styleClassName} { line-height: ${codeLensHeight}px; font-size: ${fontSize}px; padding-right: ${Math.round(fontSize * 0.5)}px; font-feature-settings: var(${fontFeaturesVar}) }
-		.monaco-editor .codelens-decoration.${this._styleClassName} span.codicon { line-height: ${codeLensHeight}px; font-size: ${fontSize}px; }
-		`;
 		if (fontFamily) {
-			newStyle += `.monaco-editor .codelens-decoration.${this._styleClassName} { font-family: var(${fontFamilyVar}), ${EDITOR_FONT_DEFAULTS.fontFamily}}`;
+			style.setProperty('--vscode-editorCodeLens-fontFamily', fontFamily);
+			style.setProperty('--vscode-editorCodeLens-fontFamilyDefault', EDITOR_FONT_DEFAULTS.fontFamily);
 		}
-		this._styleElement.textContent = newStyle;
-		this._editor.getContainerDomNode().style.setProperty(fontFamilyVar, fontFamily ?? 'inherit');
-		this._editor.getContainerDomNode().style.setProperty(fontFeaturesVar, editorFontInfo.fontFeatureSettings);
 
 		//
 		this._editor.changeViewZones(accessor => {
@@ -345,7 +333,7 @@ export class CodeLensContribution implements IEditorContribution {
 						groupsIndex++;
 						codeLensIndex++;
 					} else {
-						this._lenses.splice(codeLensIndex, 0, new CodeLensWidget(groups[groupsIndex], <IActiveCodeEditor>this._editor, this._styleClassName, helper, viewZoneAccessor, layoutInfo.codeLensHeight, () => this._resolveCodeLensesInViewportSoon()));
+						this._lenses.splice(codeLensIndex, 0, new CodeLensWidget(groups[groupsIndex], <IActiveCodeEditor>this._editor, helper, viewZoneAccessor, layoutInfo.codeLensHeight, () => this._resolveCodeLensesInViewportSoon()));
 						codeLensIndex++;
 						groupsIndex++;
 					}
@@ -359,7 +347,7 @@ export class CodeLensContribution implements IEditorContribution {
 
 				// Create extra symbols
 				while (groupsIndex < groups.length) {
-					this._lenses.push(new CodeLensWidget(groups[groupsIndex], <IActiveCodeEditor>this._editor, this._styleClassName, helper, viewZoneAccessor, layoutInfo.codeLensHeight, () => this._resolveCodeLensesInViewportSoon()));
+					this._lenses.push(new CodeLensWidget(groups[groupsIndex], <IActiveCodeEditor>this._editor, helper, viewZoneAccessor, layoutInfo.codeLensHeight, () => this._resolveCodeLensesInViewportSoon()));
 					groupsIndex++;
 				}
 

src/vs/editor/contrib/codelens/browser/codelensWidget.css

@@ -8,7 +8,12 @@
 	display: inline-block;
 	text-overflow: ellipsis;
 	white-space: nowrap;
-	color: var(--vscode-editorCodeLens-foreground)
+	color: var(--vscode-editorCodeLens-foreground);
+	line-height: var(--vscode-editorCodeLens-lineHeight);
+	font-size: var(--vscode-editorCodeLens-fontSize);
+	padding-right: calc(var(--vscode-editorCodeLens-fontSize)*0.5);
+	font-feature-settings: var(--vscode-editorCodeLens-fontFeatureSettings);
+	font-family: var(--vscode-editorCodeLens-fontFamily), var(--vscode-editorCodeLens-fontFamilyDefault);
 }
 
 .monaco-editor .codelens-decoration>span,
@@ -36,6 +41,8 @@
 	vertical-align: middle;
 	color: currentColor !important;
 	color: var(--vscode-editorCodeLens-foreground);
+	line-height: var(--vscode-editorCodeLens-lineHeight);
+	font-size: var(--vscode-editorCodeLens-fontSize);
 }
 
 .monaco-editor .codelens-decoration>a:hover .codicon::before {

src/vs/editor/contrib/codelens/browser/codelensWidget.ts

@@ -72,7 +72,6 @@ class CodeLensContentWidget implements IContentWidget {
 
 	constructor(
 		editor: IActiveCodeEditor,
-		className: string,
 		line: number,
 	) {
 		this._editor = editor;
@@ -81,7 +80,7 @@ class CodeLensContentWidget implements IContentWidget {
 		this.updatePosition(line);
 
 		this._domNode = document.createElement('span');
-		this._domNode.className = `codelens-decoration ${className}`;
+		this._domNode.className = `codelens-decoration`;
 	}
 
 	withCommands(lenses: Array<CodeLens | undefined | null>, animate: boolean): void {
@@ -186,7 +185,6 @@ export class CodeLensHelper {
 export class CodeLensWidget {
 
 	private readonly _editor: IActiveCodeEditor;
-	private readonly _className: string;
 	private readonly _viewZone: CodeLensViewZone;
 	private readonly _viewZoneId: string;
 
@@ -198,14 +196,12 @@ export class CodeLensWidget {
 	constructor(
 		data: CodeLensItem[],
 		editor: IActiveCodeEditor,
-		className: string,
 		helper: CodeLensHelper,
 		viewZoneChangeAccessor: IViewZoneChangeAccessor,
 		heightInPx: number,
 		updateCallback: () => void
 	) {
 		this._editor = editor;
-		this._className = className;
 		this._data = data;
 
 		// create combined range, track all ranges with decorations,
@@ -244,7 +240,7 @@ export class CodeLensWidget {
 
 	private _createContentWidgetIfNecessary(): void {
 		if (!this._contentWidget) {
-			this._contentWidget = new CodeLensContentWidget(this._editor, this._className, this._viewZone.afterLineNumber + 1);
+			this._contentWidget = new CodeLensContentWidget(this._editor, this._viewZone.afterLineNumber + 1);
 			this._editor.addContentWidget(this._contentWidget);
 		} else {
 			this._editor.layoutContentWidget(this._contentWidget);