aux window - fix CSS cloning (microsoft#196788)

bpasero · web-flow · commit 47a0ab66a031 · 2023-10-27T08:10:39.000+02:00
* aux window - fix CSS cloning

* 💄
diff --git a/src/vs/base/browser/dom.ts b/src/vs/base/browser/dom.ts
@@ -798,12 +798,11 @@ export function createStyleSheet(container: HTMLElement = document.head, beforeA
 				continue; // main window is already tracked
 			}
 
-			const clone = cloneGlobalStyleSheet(style, targetWindow);
-			clonedGlobalStylesheets.add(clone);
+			const disposable = cloneGlobalStyleSheet(style, targetWindow);
 
 			event.Event.once(onDidUnregisterWindow)(unregisteredWindow => {
 				if (unregisteredWindow === targetWindow) {
-					clonedGlobalStylesheets.delete(clone);
+					disposable.dispose();
 				}
 			});
 		}
@@ -819,25 +818,34 @@ export function isGlobalStylesheet(node: Node): boolean {
 export function cloneGlobalStylesheets(targetWindow: Window & typeof globalThis): IDisposable {
 	const disposables = new DisposableStore();
 
-	for (const [globalStylesheet, clonedGlobalStylesheets] of globalStylesheets) {
-		const clone = cloneGlobalStyleSheet(globalStylesheet, targetWindow);
-
-		clonedGlobalStylesheets.add(clone);
-		disposables.add(toDisposable(() => clonedGlobalStylesheets.delete(clone)));
+	for (const [globalStylesheet] of globalStylesheets) {
+		disposables.add(cloneGlobalStyleSheet(globalStylesheet, targetWindow));
 	}
 
 	return disposables;
 }
 
-function cloneGlobalStyleSheet(globalStylesheet: HTMLStyleElement, targetWindow: Window & typeof globalThis): HTMLStyleElement {
+function cloneGlobalStyleSheet(globalStylesheet: HTMLStyleElement, targetWindow: Window & typeof globalThis): IDisposable {
 	const clone = globalStylesheet.cloneNode(true) as HTMLStyleElement;
 	targetWindow.document.head.appendChild(clone);
 
 	for (const rule of getDynamicStyleSheetRules(globalStylesheet)) {
 		clone.sheet?.insertRule(rule.cssText, clone.sheet?.cssRules.length);
 	}
 
-	return clone;
+	const observer = new MutationObserver(() => {
+		clone.textContent = globalStylesheet.textContent;
+	});
+	observer.observe(globalStylesheet, { childList: true });
+
+	globalStylesheets.get(globalStylesheet)?.add(clone);
+
+	return toDisposable(() => {
+		observer.disconnect();
+		targetWindow.document.head.removeChild(clone);
+
+		globalStylesheets.get(globalStylesheet)?.delete(clone);
+	});
 }
 
 export function createMetaElement(container: HTMLElement = document.head): HTMLMetaElement {
diff --git a/src/vs/workbench/contrib/accessibility/browser/unfocusedViewDimmingContribution.ts b/src/vs/workbench/contrib/accessibility/browser/unfocusedViewDimmingContribution.ts
@@ -3,6 +3,7 @@
  *  Licensed under the MIT License. See License.txt in the project root for license information.
  *--------------------------------------------------------------------------------------------*/
 
+import { createStyleSheet } from 'vs/base/browser/dom';
 import { Event } from 'vs/base/common/event';
 import { Disposable, toDisposable } from 'vs/base/common/lifecycle';
 import { clamp } from 'vs/base/common/numbers';
@@ -73,9 +74,8 @@ export class UnfocusedViewDimmingContribution extends Disposable implements IWor
 
 	private _getStyleElement(): HTMLStyleElement {
 		if (!this._styleElement) {
-			this._styleElement = document.createElement('style');
+			this._styleElement = createStyleSheet();
 			this._styleElement.className = 'accessibilityUnfocusedViewOpacity';
-			document.head.appendChild(this._styleElement);
 		}
 		return this._styleElement;
 	}
diff --git a/src/vs/workbench/contrib/tasks/browser/taskQuickPick.ts b/src/vs/workbench/contrib/tasks/browser/taskQuickPick.ts
@@ -19,7 +19,7 @@ import { IThemeService } from 'vs/platform/theme/common/themeService';
 import { ThemeIcon } from 'vs/base/common/themables';
 import { registerIcon } from 'vs/platform/theme/common/iconRegistry';
 import { IDialogService } from 'vs/platform/dialogs/common/dialogs';
-import { getColorClass, getColorStyleElement } from 'vs/workbench/contrib/terminal/browser/terminalIcon';
+import { getColorClass, createColorStyleElement } from 'vs/workbench/contrib/terminal/browser/terminalIcon';
 import { TaskQuickPickEntryType } from 'vs/workbench/contrib/tasks/browser/abstractTaskService';
 import { showWithPinnedItems } from 'vs/platform/quickinput/browser/quickPickPin';
 import { IStorageService } from 'vs/platform/storage/common/storage';
@@ -93,9 +93,8 @@ export class TaskQuickPick extends Disposable {
 	public static applyColorStyles(task: Task | ConfiguringTask, entry: TaskQuickPickEntryType | ITaskTwoLevelQuickPickEntry, themeService: IThemeService): void {
 		if (task.configurationProperties.icon?.color) {
 			const colorTheme = themeService.getColorTheme();
-			const styleElement = getColorStyleElement(colorTheme);
+			createColorStyleElement(colorTheme);
 			entry.iconClasses = [getColorClass(task.configurationProperties.icon.color)];
-			document.body.appendChild(styleElement);
 		}
 	}
 
diff --git a/src/vs/workbench/contrib/terminal/browser/terminalIcon.ts b/src/vs/workbench/contrib/terminal/browser/terminalIcon.ts
@@ -14,6 +14,8 @@ import { ThemeIcon } from 'vs/base/common/themables';
 import { ITerminalInstance } from 'vs/workbench/contrib/terminal/browser/terminal';
 import { ITerminalProfileResolverService } from 'vs/workbench/contrib/terminal/common/terminal';
 import { ansiColorMap } from 'vs/workbench/contrib/terminal/common/terminalColorRegistry';
+import { createStyleSheet } from 'vs/base/browser/dom';
+import { IDisposable, toDisposable } from 'vs/base/common/lifecycle';
 
 
 export function getColorClass(colorKey: string): string;
@@ -47,9 +49,9 @@ export function getStandardColors(colorTheme: IColorTheme): string[] {
 	return standardColors;
 }
 
-export function getColorStyleElement(colorTheme: IColorTheme): HTMLElement {
+export function createColorStyleElement(colorTheme: IColorTheme): IDisposable {
 	const standardColors = getStandardColors(colorTheme);
-	const styleElement = document.createElement('style');
+	const styleElement = createStyleSheet();
 	let css = '';
 	for (const colorKey of standardColors) {
 		const colorClass = getColorClass(colorKey);
@@ -62,7 +64,7 @@ export function getColorStyleElement(colorTheme: IColorTheme): HTMLElement {
 		}
 	}
 	styleElement.textContent = css;
-	return styleElement;
+	return toDisposable(() => styleElement.remove());
 }
 
 export function getColorStyleContent(colorTheme: IColorTheme, editor?: boolean): string {
diff --git a/src/vs/workbench/contrib/terminal/browser/terminalInstance.ts b/src/vs/workbench/contrib/terminal/browser/terminalInstance.ts
@@ -63,7 +63,7 @@ import { TerminalLaunchHelpAction } from 'vs/workbench/contrib/terminal/browser/
 import { TerminalConfigHelper } from 'vs/workbench/contrib/terminal/browser/terminalConfigHelper';
 import { TerminalEditorInput } from 'vs/workbench/contrib/terminal/browser/terminalEditorInput';
 import { TerminalExtensionsRegistry } from 'vs/workbench/contrib/terminal/browser/terminalExtensions';
-import { getColorClass, getColorStyleElement, getStandardColors } from 'vs/workbench/contrib/terminal/browser/terminalIcon';
+import { getColorClass, createColorStyleElement, getStandardColors } from 'vs/workbench/contrib/terminal/browser/terminalIcon';
 import { TerminalProcessManager } from 'vs/workbench/contrib/terminal/browser/terminalProcessManager';
 import { showRunRecentQuickPick } from 'vs/workbench/contrib/terminal/browser/terminalRunRecentQuickPick';
 import { ITerminalStatusList, TerminalStatus, TerminalStatusList } from 'vs/workbench/contrib/terminal/browser/terminalStatusList';
@@ -2200,7 +2200,7 @@ export class TerminalInstance extends Disposable implements ITerminalInstance {
 		}
 		const colorTheme = this._themeService.getColorTheme();
 		const standardColors: string[] = getStandardColors(colorTheme);
-		const styleElement = getColorStyleElement(colorTheme);
+		const colorStyleDisposable = createColorStyleElement(colorTheme);
 		const items: QuickPickItem[] = [];
 		for (const colorKey of standardColors) {
 			const colorClass = getColorClass(colorKey);
@@ -2211,7 +2211,6 @@ export class TerminalInstance extends Disposable implements ITerminalInstance {
 		items.push({ type: 'separator' });
 		const showAllColorsItem = { label: 'Reset to default' };
 		items.push(showAllColorsItem);
-		document.body.appendChild(styleElement);
 
 		const quickPick = this._quickInputService.createQuickPick();
 		quickPick.items = items;
@@ -2231,7 +2230,7 @@ export class TerminalInstance extends Disposable implements ITerminalInstance {
 		}
 
 		quickPick.hide();
-		document.body.removeChild(styleElement);
+		colorStyleDisposable.dispose();
 	}
 
 	selectPreviousSuggestion(): void {
diff --git a/src/vs/workbench/contrib/terminal/browser/terminalProfileQuickpick.ts b/src/vs/workbench/contrib/terminal/browser/terminalProfileQuickpick.ts
@@ -7,7 +7,7 @@ import { Codicon } from 'vs/base/common/codicons';
 import { ConfigurationTarget, IConfigurationService } from 'vs/platform/configuration/common/configuration';
 import { IQuickInputService, IKeyMods, IPickOptions, IQuickPickSeparator, IQuickInputButton, IQuickPickItem } from 'vs/platform/quickinput/common/quickInput';
 import { IExtensionTerminalProfile, ITerminalProfile, ITerminalProfileObject, TerminalSettingPrefix } from 'vs/platform/terminal/common/terminal';
-import { getUriClasses, getColorClass, getColorStyleElement } from 'vs/workbench/contrib/terminal/browser/terminalIcon';
+import { getUriClasses, getColorClass, createColorStyleElement } from 'vs/workbench/contrib/terminal/browser/terminalIcon';
 import { configureTerminalProfileIcon } from 'vs/workbench/contrib/terminal/browser/terminalIcons';
 import * as nls from 'vs/nls';
 import { IThemeService } from 'vs/platform/theme/common/themeService';
@@ -196,11 +196,10 @@ export class TerminalProfileQuickpick {
 			quickPickItems.push({ type: 'separator', label: nls.localize('terminalProfiles.detected', "detected") });
 			quickPickItems.push(...this._sortProfileQuickPickItems(autoDetectedProfiles.map(e => this._createProfileQuickPickItem(e)), defaultProfileName!));
 		}
-		const styleElement = getColorStyleElement(this._themeService.getColorTheme());
-		document.body.appendChild(styleElement);
+		const colorStyleDisposable = createColorStyleElement(this._themeService.getColorTheme());
 
 		const result = await this._quickInputService.pick(quickPickItems, options);
-		document.body.removeChild(styleElement);
+		colorStyleDisposable.dispose();
 		if (!result) {
 			return undefined;
 		}
diff --git a/src/vs/workbench/contrib/terminal/browser/terminalService.ts b/src/vs/workbench/contrib/terminal/browser/terminalService.ts
@@ -1195,8 +1195,7 @@ class TerminalEditorStyle extends Themable {
 	) {
 		super(_themeService);
 		this._registerListeners();
-		this._styleElement = document.createElement('style');
-		container.appendChild(this._styleElement);
+		this._styleElement = dom.createStyleSheet(container);
 		this._register(toDisposable(() => container.removeChild(this._styleElement)));
 		this.updateStyles();
 	}
diff --git a/src/vs/workbench/contrib/terminal/browser/terminalView.ts b/src/vs/workbench/contrib/terminal/browser/terminalView.ts
@@ -49,7 +49,6 @@ import { IHoverService } from 'vs/workbench/services/hover/browser/hover';
 import { IAccessibilityService } from 'vs/platform/accessibility/common/accessibility';
 
 export class TerminalViewPane extends ViewPane {
-	private _fontStyleElement: HTMLElement | undefined;
 	private _parentDomElement: HTMLElement | undefined;
 	private _terminalTabbedView?: TerminalTabbedView;
 	get terminalTabbedView(): TerminalTabbedView | undefined { return this._terminalTabbedView; }
@@ -178,15 +177,13 @@ export class TerminalViewPane extends ViewPane {
 		}
 		this._parentDomElement = container;
 		this._parentDomElement.classList.add('integrated-terminal');
-		this._fontStyleElement = document.createElement('style');
+		dom.createStyleSheet(this._parentDomElement);
 		this._instantiationService.createInstance(TerminalThemeIconStyle, this._parentDomElement);
 
 		if (!this.shouldShowWelcome()) {
 			this._createTabsView();
 		}
 
-		this._parentDomElement.appendChild(this._fontStyleElement);
-
 		this._register(this.configurationService.onDidChangeConfiguration(e => {
 			if (e.affectsConfiguration(TerminalSettingId.FontFamily) || e.affectsConfiguration('editor.fontFamily')) {
 				const configHelper = this._terminalService.configHelper;
@@ -558,8 +555,7 @@ class TerminalThemeIconStyle extends Themable {
 	) {
 		super(_themeService);
 		this._registerListeners();
-		this._styleElement = document.createElement('style');
-		container.appendChild(this._styleElement);
+		this._styleElement = dom.createStyleSheet(container);
 		this._register(toDisposable(() => container.removeChild(this._styleElement)));
 		this.updateStyles();
 	}
diff --git a/src/vs/workbench/services/auxiliaryWindow/browser/auxiliaryWindowService.ts b/src/vs/workbench/services/auxiliaryWindow/browser/auxiliaryWindowService.ts
@@ -5,7 +5,7 @@
 
 import { localize } from 'vs/nls';
 import { Emitter, Event } from 'vs/base/common/event';
-import { Dimension, EventHelper, EventType, addDisposableListener, cloneGlobalStylesheets, copyAttributes, getActiveWindow, getClientArea, isGlobalStylesheet, position, registerWindow, size, trackAttributes } from 'vs/base/browser/dom';
+import { Dimension, EventHelper, EventType, addDisposableListener, cloneGlobalStylesheets, copyAttributes, createMetaElement, getActiveWindow, getClientArea, isGlobalStylesheet, position, registerWindow, size, trackAttributes } from 'vs/base/browser/dom';
 import { Disposable, DisposableStore, IDisposable, toDisposable } from 'vs/base/common/lifecycle';
 import { InstantiationType, registerSingleton } from 'vs/platform/instantiation/common/extensions';
 import { createDecorator } from 'vs/platform/instantiation/common/instantiation';
@@ -135,12 +135,12 @@ export class BrowserAuxiliaryWindowService extends Disposable implements IAuxili
 	}
 
 	private applyMeta(auxiliaryWindow: AuxiliaryWindow): void {
-		const metaCharset = auxiliaryWindow.document.head.appendChild(document.createElement('meta'));
+		const metaCharset = createMetaElement(auxiliaryWindow.document.head);
 		metaCharset.setAttribute('charset', 'utf-8');
 
 		const originalCSPMetaTag = document.querySelector('meta[http-equiv="Content-Security-Policy"]');
 		if (originalCSPMetaTag) {
-			const csp = auxiliaryWindow.document.head.appendChild(document.createElement('meta'));
+			const csp = createMetaElement(auxiliaryWindow.document.head);
 			copyAttributes(originalCSPMetaTag, csp);
 
 			const content = csp.getAttribute('content');
diff --git a/src/vs/workbench/services/themes/browser/workbenchThemeService.ts b/src/vs/workbench/services/themes/browser/workbenchThemeService.ts
@@ -873,11 +873,9 @@ class ThemeFileWatcher {
 function _applyRules(styleSheetContent: string, rulesClassName: string) {
 	const themeStyles = document.head.getElementsByClassName(rulesClassName);
 	if (themeStyles.length === 0) {
-		const elStyle = document.createElement('style');
-		elStyle.type = 'text/css';
+		const elStyle = createStyleSheet();
 		elStyle.className = rulesClassName;
 		elStyle.textContent = styleSheetContent;
-		document.head.appendChild(elStyle);
 	} else {
 		(<HTMLStyleElement>themeStyles[0]).textContent = styleSheetContent;
 	}

Original file line number	Diff line number	Diff line change
`@@ -14,6 +14,8 @@ import { ThemeIcon } from 'vs/base/common/themables';`
`14`	`14`	`import { ITerminalInstance } from 'vs/workbench/contrib/terminal/browser/terminal';`
`15`	`15`	`import { ITerminalProfileResolverService } from 'vs/workbench/contrib/terminal/common/terminal';`
`16`	`16`	`import { ansiColorMap } from 'vs/workbench/contrib/terminal/common/terminalColorRegistry';`
	`17`	`+import { createStyleSheet } from 'vs/base/browser/dom';`
	`18`	`+import { IDisposable, toDisposable } from 'vs/base/common/lifecycle';`
`17`	`19`
`18`	`20`
`19`	`21`	`export function getColorClass(colorKey: string): string;`
`@@ -47,9 +49,9 @@ export function getStandardColors(colorTheme: IColorTheme): string[] {`
`47`	`49`	`return standardColors;`
`48`	`50`	`}`
`49`	`51`
`50`		`-export function getColorStyleElement(colorTheme: IColorTheme): HTMLElement {`
	`52`	`+export function createColorStyleElement(colorTheme: IColorTheme): IDisposable {`
`51`	`53`	`const standardColors = getStandardColors(colorTheme);`
`52`		`- const styleElement = document.createElement('style');`
	`54`	`+ const styleElement = createStyleSheet();`
`53`	`55`	`let css = '';`
`54`	`56`	`for (const colorKey of standardColors) {`
`55`	`57`	`const colorClass = getColorClass(colorKey);`
`@@ -62,7 +64,7 @@ export function getColorStyleElement(colorTheme: IColorTheme): HTMLElement {`
`62`	`64`	`}`
`63`	`65`	`}`
`64`	`66`	`styleElement.textContent = css;`
`65`		`- return styleElement;`
	`67`	`+ return toDisposable(() => styleElement.remove());`
`66`	`68`	`}`
`67`	`69`
`68`	`70`	`export function getColorStyleContent(colorTheme: IColorTheme, editor?: boolean): string {`