💄

src/vs/workbench/parts/scm/electron-browser/dirtydiffDecorator.ts

@@ -53,6 +53,7 @@ import { IMarginData } from 'vs/editor/browser/controller/mouseTarget';
 import { ICodeEditorService } from 'vs/editor/browser/services/codeEditorService';
 import { ISplice } from 'vs/base/common/sequence';
 import { IContextMenuService } from 'vs/platform/contextview/browser/contextView';
+import { createStyleSheet } from '../../../../base/browser/dom';
 
 // TODO@Joao
 // Need to subclass MenuItemActionItem in order to respect
@@ -1095,6 +1096,7 @@ export class DirtyDiffWorkbenchController implements ext.IWorkbenchContribution,
 	private models: ITextModel[] = [];
 	private items: { [modelId: string]: DirtyDiffItem; } = Object.create(null);
 	private transientDisposables: IDisposable[] = [];
+	private stylesheet: HTMLStyleElement;
 	private disposables: IDisposable[] = [];
 
 	constructor(
@@ -1103,17 +1105,14 @@ export class DirtyDiffWorkbenchController implements ext.IWorkbenchContribution,
 		@IInstantiationService private instantiationService: IInstantiationService,
 		@IConfigurationService private configurationService: IConfigurationService
 	) {
-		const onDidChangeConfiguration = filterEvent(configurationService.onDidChangeConfiguration, e => e.affectsConfiguration('scm.diffDecorations'));
-		const onDidChangeDiffWidthConfiguration = filterEvent(configurationService.onDidChangeConfiguration, e => e.affectsConfiguration('scm.diffGutterWidth'));
+		this.stylesheet = createStyleSheet();
+		this.disposables.push(toDisposable(() => this.stylesheet.parentElement.removeChild(this.stylesheet)));
 
+		const onDidChangeConfiguration = filterEvent(configurationService.onDidChangeConfiguration, e => e.affectsConfiguration('scm.diffDecorations'));
 		onDidChangeConfiguration(this.onDidChangeConfiguration, this, this.disposables);
 		this.onDidChangeConfiguration();
 
-		const diffWidthStyle = document.createElement('style');
-		diffWidthStyle.className = 'diff-width-style';
-		diffWidthStyle.type = 'text/css';
-		document.head.appendChild(diffWidthStyle);
-
+		const onDidChangeDiffWidthConfiguration = filterEvent(configurationService.onDidChangeConfiguration, e => e.affectsConfiguration('scm.diffDecorationsGutterWidth'));
 		onDidChangeDiffWidthConfiguration(this.onDidChangeDiffWidthConfiguration, this);
 		this.onDidChangeDiffWidthConfiguration();
 	}
@@ -1129,21 +1128,13 @@ export class DirtyDiffWorkbenchController implements ext.IWorkbenchContribution,
 	}
 
 	private onDidChangeDiffWidthConfiguration(): void {
-		let width = this.configurationService.getValue<number>('scm.diffGutterWidth');
+		let width = this.configurationService.getValue<number>('scm.diffDecorationsGutterWidth');
 
 		if (isNaN(width) || width <= 0 || width > 5) {
 			width = 3;
 		}
 
-		const diffWidthStyle = document.head.getElementsByClassName('diff-width-style')[0];
-
-		if (diffWidthStyle) {
-			diffWidthStyle.innerHTML = `
-			.monaco-editor .dirty-diff-modified,
-			.monaco-editor .dirty-diff-added {
-				border-left-width: ${width}px;
-			}`;
-		}
+		this.stylesheet.innerHTML = `.monaco-editor .dirty-diff-modified,.monaco-editor .dirty-diff-added{border-left-width:${width}px;}`;
 	}
 
 	private enable(): void {

src/vs/workbench/parts/scm/electron-browser/scm.contribution.ts

@@ -80,7 +80,7 @@ Registry.as<IConfigurationRegistry>(ConfigurationExtensions.Configuration).regis
 			default: 'all',
 			description: localize('diffDecorations', "Controls diff decorations in the editor.")
 		},
-		'scm.diffGutterWidth': {
+		'scm.diffDecorationsGutterWidth': {
 			type: 'number',
 			enum: [1, 2, 3, 4, 5],
 			default: 3,