Merge pull request #153093 from ulugbekna/autohide-minimap

add auto-hide option for minimap (default = false) which

src/vs/editor/browser/viewParts/minimap/minimap.css

@@ -30,3 +30,12 @@
 	left: -1px;
 	width: 1px;
 }
+
+/* 0.5s fade in/out for the minimap */
+.minimap.autohide {
+	opacity: 0.0;
+	transition: opacity 0.5s;
+}
+.minimap.autohide:hover {
+	opacity: 1.0;
+}

src/vs/editor/browser/viewParts/minimap/minimap.ts

@@ -56,6 +56,8 @@ class MinimapOptions {
 
 	public readonly showSlider: 'always' | 'mouseover';
 
+	public readonly autohide: boolean;
+
 	public readonly pixelRatio: number;
 
 	public readonly typicalHalfwidthCharacterWidth: number;
@@ -120,6 +122,7 @@ class MinimapOptions {
 		this.minimapHeightIsEditorHeight = minimapLayout.minimapHeightIsEditorHeight;
 		this.scrollBeyondLastLine = options.get(EditorOption.scrollBeyondLastLine);
 		this.showSlider = minimapOpts.showSlider;
+		this.autohide = minimapOpts.autohide;
 		this.pixelRatio = pixelRatio;
 		this.typicalHalfwidthCharacterWidth = fontInfo.typicalHalfwidthCharacterWidth;
 		this.lineHeight = options.get(EditorOption.lineHeight);
@@ -166,6 +169,7 @@ class MinimapOptions {
 			&& this.minimapHeightIsEditorHeight === other.minimapHeightIsEditorHeight
 			&& this.scrollBeyondLastLine === other.scrollBeyondLastLine
 			&& this.showSlider === other.showSlider
+			&& this.autohide === other.autohide
 			&& this.pixelRatio === other.pixelRatio
 			&& this.typicalHalfwidthCharacterWidth === other.typicalHalfwidthCharacterWidth
 			&& this.lineHeight === other.lineHeight
@@ -1255,10 +1259,17 @@ class InnerMinimap extends Disposable {
 	}
 
 	private _getMinimapDomNodeClassName(): string {
+		const class_ = ['minimap'];
 		if (this._model.options.showSlider === 'always') {
-			return 'minimap slider-always';
+			class_.push('slider-always');
+		} else {
+			class_.push('slider-mouseover');
 		}
-		return 'minimap slider-mouseover';
+		if (this._model.options.autohide) {
+			class_.push('autohide');
+		}
+
+		return class_.join(' ');
 	}
 
 	public getDomNode(): FastDomNode<HTMLElement> {

src/vs/editor/browser/viewParts/scrollDecoration/scrollDecoration.ts

@@ -61,7 +61,7 @@ export class ScrollDecorationViewPart extends ViewPart {
 		if (layoutInfo.minimap.renderMinimap === 0 || (layoutInfo.minimap.minimapWidth > 0 && layoutInfo.minimap.minimapLeft === 0)) {
 			this._width = layoutInfo.width;
 		} else {
-			this._width = layoutInfo.width - layoutInfo.minimap.minimapWidth - layoutInfo.verticalScrollbarWidth;
+			this._width = layoutInfo.width - layoutInfo.verticalScrollbarWidth;
 		}
 	}
 

src/vs/editor/common/config/editorOptions.ts

@@ -2625,6 +2625,10 @@ export interface IEditorMinimapOptions {
 	 * Defaults to true.
 	 */
 	enabled?: boolean;
+	/**
+	 * Control the rendering of minimap.
+	 */
+	autohide?: boolean;
 	/**
 	 * Control the side of the minimap in editor.
 	 * Defaults to 'right'.
@@ -2669,6 +2673,7 @@ class EditorMinimap extends BaseEditorOption<EditorOption.minimap, IEditorMinima
 			size: 'proportional',
 			side: 'right',
 			showSlider: 'mouseover',
+			autohide: false,
 			renderCharacters: true,
 			maxColumn: 120,
 			scale: 1,
@@ -2681,6 +2686,11 @@ class EditorMinimap extends BaseEditorOption<EditorOption.minimap, IEditorMinima
 					default: defaults.enabled,
 					description: nls.localize('minimap.enabled', "Controls whether the minimap is shown.")
 				},
+				'editor.minimap.autohide': {
+					type: 'boolean',
+					default: defaults.autohide,
+					description: nls.localize('minimap.autohide', "Controls whether the minimap is hidden automatically.")
+				},
 				'editor.minimap.size': {
 					type: 'string',
 					enum: ['proportional', 'fill', 'fit'],
@@ -2733,6 +2743,7 @@ class EditorMinimap extends BaseEditorOption<EditorOption.minimap, IEditorMinima
 		const input = _input as IEditorMinimapOptions;
 		return {
 			enabled: boolean(input.enabled, this.defaultValue.enabled),
+			autohide: boolean(input.autohide, this.defaultValue.autohide),
 			size: stringSet<'proportional' | 'fill' | 'fit'>(input.size, this.defaultValue.size, ['proportional', 'fill', 'fit']),
 			side: stringSet<'right' | 'left'>(input.side, this.defaultValue.side, ['right', 'left']),
 			showSlider: stringSet<'always' | 'mouseover'>(input.showSlider, this.defaultValue.showSlider, ['always', 'mouseover']),

src/vs/editor/test/browser/config/editorLayoutProvider.test.ts

@@ -47,6 +47,7 @@ suite('Editor ViewLayout - EditorLayoutProvider', () => {
 		options._write(EditorOption.folding, false);
 		const minimapOptions: EditorMinimapOptions = {
 			enabled: input.minimap,
+			autohide: false,
 			size: input.minimapSize || 'proportional',
 			side: input.minimapSide,
 			renderCharacters: input.minimapRenderCharacters,

src/vs/monaco.d.ts

@@ -3819,6 +3819,10 @@ declare namespace monaco.editor {
 		 * Defaults to true.
 		 */
 		enabled?: boolean;
+		/**
+		 * Control the rendering of minimap.
+		 */
+		autohide?: boolean;
 		/**
 		 * Control the side of the minimap in editor.
 		 * Defaults to 'right'.