diff --git a/src/vs/workbench/parts/scm/electron-browser/dirtydiffDecorator.ts b/src/vs/workbench/parts/scm/electron-browser/dirtydiffDecorator.ts index fccecea26de..bd82579039d 100644 --- a/src/vs/workbench/parts/scm/electron-browser/dirtydiffDecorator.ts +++ b/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('scm.diffGutterWidth'); + let width = this.configurationService.getValue('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 { diff --git a/src/vs/workbench/parts/scm/electron-browser/scm.contribution.ts b/src/vs/workbench/parts/scm/electron-browser/scm.contribution.ts index 9263e101847..ffbfd4d29d3 100644 --- a/src/vs/workbench/parts/scm/electron-browser/scm.contribution.ts +++ b/src/vs/workbench/parts/scm/electron-browser/scm.contribution.ts @@ -80,7 +80,7 @@ Registry.as(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,