Added in setting for diff gutter visibility

src/vs/workbench/contrib/scm/browser/dirtydiffDecorator.ts

@@ -1177,6 +1177,10 @@ export class DirtyDiffWorkbenchController extends Disposable implements ext.IWor
 		const onDidChangeDiffWidthConfiguration = Event.filter(configurationService.onDidChangeConfiguration, e => e.affectsConfiguration('scm.diffDecorationsGutterWidth'));
 		onDidChangeDiffWidthConfiguration(this.onDidChangeDiffWidthConfiguration, this);
 		this.onDidChangeDiffWidthConfiguration();
+
+		const onDidChangeDiffVisibilityConfiguration = Event.filter(configurationService.onDidChangeConfiguration, e => e.affectsConfiguration('scm.diffDecorationsGutterVisibility'));
+		onDidChangeDiffVisibilityConfiguration(this.onDidChangeDiffVisibiltiyConfiguration, this);
+		this.onDidChangeDiffVisibiltiyConfiguration();
 	}
 
 	private onDidChangeConfiguration(): void {
@@ -1199,6 +1203,16 @@ export class DirtyDiffWorkbenchController extends Disposable implements ext.IWor
 		this.stylesheet.innerHTML = `.monaco-editor .dirty-diff-modified,.monaco-editor .dirty-diff-added{border-left-width:${width}px;}`;
 	}
 
+	private onDidChangeDiffVisibiltiyConfiguration(): void {
+		let visibility = this.configurationService.getValue<string>('scm.diffDecorationsGutterVisibility');
+
+		this.stylesheet.innerHTML = `
+			.monaco-editor .dirty-diff-modified, .monaco-editor .dirty-diff-added, .monaco-editor .dirty-diff-deleted {
+				opacity: ${visibility === 'always' ? 1 : 0};
+			}
+		`;
+	}
+
 	private enable(): void {
 		if (this.enabled) {
 			this.disable();
@@ -1286,10 +1300,14 @@ registerThemingParticipant((theme: ITheme, collector: ICssStyleCollector) => {
 		collector.addRule(`
 			.monaco-editor .dirty-diff-modified {
 				border-left: 3px solid ${editorGutterModifiedBackgroundColor};
+				transition: opacity 0.5s;
 			}
 			.monaco-editor .dirty-diff-modified:before {
 				background: ${editorGutterModifiedBackgroundColor};
 			}
+			.monaco-editor .margin:hover .dirty-diff-modified {
+				opacity: 1;
+			}
 		`);
 	}
 
@@ -1298,10 +1316,14 @@ registerThemingParticipant((theme: ITheme, collector: ICssStyleCollector) => {
 		collector.addRule(`
 			.monaco-editor .dirty-diff-added {
 				border-left: 3px solid ${editorGutterAddedBackgroundColor};
+				transition: opacity 0.5s;
 			}
 			.monaco-editor .dirty-diff-added:before {
 				background: ${editorGutterAddedBackgroundColor};
 			}
+			.monaco-editor .margin:hover .dirty-diff-added {
+				opacity: 1;
+			}
 		`);
 	}
 
@@ -1310,10 +1332,14 @@ registerThemingParticipant((theme: ITheme, collector: ICssStyleCollector) => {
 		collector.addRule(`
 			.monaco-editor .dirty-diff-deleted:after {
 				border-left: 4px solid ${editorGutteDeletedBackgroundColor};
+				transition: opacity 0.5s;
 			}
 			.monaco-editor .dirty-diff-deleted:before {
 				background: ${editorGutteDeletedBackgroundColor};
 			}
+			.monaco-editor .margin:hover .dirty-diff-added {
+				opacity: 1;
+			}
 		`);
 	}
 });

src/vs/workbench/contrib/scm/browser/scm.contribution.ts

@@ -90,6 +90,16 @@ Registry.as<IConfigurationRegistry>(ConfigurationExtensions.Configuration).regis
 			default: 3,
 			description: localize('diffGutterWidth', "Controls the width(px) of diff decorations in gutter (added & modified).")
 		},
+		'scm.diffDecorationsGutterVisibility': {
+			type: 'string',
+			enum: ['always', 'hover'],
+			enumDescriptions: [
+				localize('scm.diffDecorationsGutterVisibility.always', "Show the diff decorator in the gutter at all times."),
+				localize('scm.diffDecorationsGutterVisibility.hover', "Show the diff decorator in the gutter only on hover.")
+			],
+			description: localize('scm.diffDecorationsGutterVisibility', "Controls the visibilty of the Source Control diff decorator in the gutter."),
+			default: 'always'
+		},
 		'scm.alwaysShowActions': {
 			type: 'boolean',
 			description: localize('alwaysShowActions', "Controls whether inline actions are always visible in the Source Control view."),