Add minimap.background color and honour it and its opacity

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

@@ -25,8 +25,8 @@ import { RenderingContext, RestrictedRenderingContext } from 'vs/editor/common/v
 import { ViewContext } from 'vs/editor/common/view/viewContext';
 import * as viewEvents from 'vs/editor/common/view/viewEvents';
 import { ViewLineData } from 'vs/editor/common/viewModel/viewModel';
-import { minimapOpacity, minimapSelection, scrollbarShadow, scrollbarSliderActiveBackground, scrollbarSliderBackground, scrollbarSliderHoverBackground } from 'vs/platform/theme/common/colorRegistry';
-import { registerThemingParticipant } from 'vs/platform/theme/common/themeService';
+import { minimapSelection, scrollbarShadow, scrollbarSliderActiveBackground, scrollbarSliderBackground, scrollbarSliderHoverBackground, minimapBackground } from 'vs/platform/theme/common/colorRegistry';
+import { registerThemingParticipant, ITheme } from 'vs/platform/theme/common/themeService';
 import { ModelDecorationMinimapOptions } from 'vs/editor/common/model/textModel';
 import { Selection } from 'vs/editor/common/core/selection';
 import { Color } from 'vs/base/common/color';
@@ -107,7 +107,9 @@ class MinimapOptions {
 	 */
 	public readonly canvasOuterHeight: number;
 
-	constructor(configuration: IConfiguration) {
+	public readonly backgroundColor: RGBA8;
+
+	constructor(configuration: IConfiguration, theme: ITheme, tokensColorTracker: MinimapTokensColorTracker) {
 		const options = configuration.options;
 		const pixelRatio = options.get(EditorOption.pixelRatio);
 		const layoutInfo = options.get(EditorOption.layoutInfo);
@@ -131,6 +133,16 @@ class MinimapOptions {
 
 		this.canvasOuterWidth = this.canvasInnerWidth / pixelRatio;
 		this.canvasOuterHeight = this.canvasInnerHeight / pixelRatio;
+
+		this.backgroundColor = MinimapOptions._getMinimapBackground(theme, tokensColorTracker);
+	}
+
+	private static _getMinimapBackground(theme: ITheme, tokensColorTracker: MinimapTokensColorTracker): RGBA8 {
+		const themeColor = theme.getColor(minimapBackground);
+		if (themeColor) {
+			return new RGBA8(themeColor.rgba.r, themeColor.rgba.g, themeColor.rgba.b, themeColor.rgba.a);
+		}
+		return tokensColorTracker.getColor(ColorId.DefaultBackground);
 	}
 
 	public equals(other: MinimapOptions): boolean {
@@ -148,6 +160,7 @@ class MinimapOptions {
 			&& this.canvasInnerHeight === other.canvasInnerHeight
 			&& this.canvasOuterWidth === other.canvasOuterWidth
 			&& this.canvasOuterHeight === other.canvasOuterHeight
+			&& this.backgroundColor.equals(other.backgroundColor)
 		);
 	}
 }
@@ -447,13 +460,13 @@ class MinimapBuffers {
 
 export class Minimap extends ViewPart {
 
+	private readonly _tokensColorTracker: MinimapTokensColorTracker;
 	private readonly _domNode: FastDomNode<HTMLElement>;
 	private readonly _shadow: FastDomNode<HTMLElement>;
 	private readonly _canvas: FastDomNode<HTMLCanvasElement>;
 	private readonly _decorationsCanvas: FastDomNode<HTMLCanvasElement>;
 	private readonly _slider: FastDomNode<HTMLElement>;
 	private readonly _sliderHorizontal: FastDomNode<HTMLElement>;
-	private readonly _tokensColorTracker: MinimapTokensColorTracker;
 	private readonly _mouseDownListener: IDisposable;
 	private readonly _sliderMouseMoveMonitor: GlobalMouseMoveMonitor<IStandardMouseMoveEventData>;
 	private readonly _sliderMouseDownListener: IDisposable;
@@ -473,7 +486,8 @@ export class Minimap extends ViewPart {
 	constructor(context: ViewContext) {
 		super(context);
 
-		this._options = new MinimapOptions(this._context.configuration);
+		this._tokensColorTracker = MinimapTokensColorTracker.getInstance();
+		this._options = new MinimapOptions(this._context.configuration, this._context.theme, this._tokensColorTracker);
 		this._lastRenderData = null;
 		this._buffers = null;
 		this._selectionColor = this._context.theme.getColor(minimapSelection);
@@ -512,8 +526,6 @@ export class Minimap extends ViewPart {
 		this._sliderHorizontal.setClassName('minimap-slider-horizontal');
 		this._slider.appendChild(this._sliderHorizontal);
 
-		this._tokensColorTracker = MinimapTokensColorTracker.getInstance();
-
 		this._applyLayout();
 
 		this._mouseDownListener = dom.addStandardDisposableListener(this._domNode.domNode, 'mousedown', (e) => {
@@ -664,7 +676,7 @@ export class Minimap extends ViewPart {
 					this._canvas.domNode.getContext('2d')!,
 					this._options.canvasInnerWidth,
 					this._options.canvasInnerHeight,
-					this._tokensColorTracker.getColor(ColorId.DefaultBackground)
+					this._options.backgroundColor
 				);
 			}
 		}
@@ -672,7 +684,7 @@ export class Minimap extends ViewPart {
 	}
 
 	private _onOptionsMaybeChanged(): boolean {
-		const opts = new MinimapOptions(this._context.configuration);
+		const opts = new MinimapOptions(this._context.configuration, this._context.theme, this._tokensColorTracker);
 		if (this._options.equals(opts)) {
 			return false;
 		}
@@ -745,6 +757,7 @@ export class Minimap extends ViewPart {
 		this._context.model.invalidateMinimapColorCache();
 		this._selectionColor = this._context.theme.getColor(minimapSelection);
 		this._renderDecorations = true;
+		this._onOptionsMaybeChanged();
 		return true;
 	}
 
@@ -942,7 +955,7 @@ export class Minimap extends ViewPart {
 		// Fetch rendering info from view model for rest of lines that need rendering.
 		const lineInfo = this._context.model.getMinimapLinesRenderingData(startLineNumber, endLineNumber, needed);
 		const tabSize = lineInfo.tabSize;
-		const background = this._tokensColorTracker.getColor(ColorId.DefaultBackground);
+		const background = this._options.backgroundColor;
 		const useLighterFont = this._tokensColorTracker.backgroundIsLight();
 
 		// Render the rest of lines
@@ -1141,9 +1154,9 @@ export class Minimap extends ViewPart {
 }
 
 registerThemingParticipant((theme, collector) => {
-	const minimapOpacityValue = theme.getColor(minimapOpacity);
-	if (minimapOpacityValue) {
-		collector.addRule(`.monaco-editor .minimap { opacity: ${minimapOpacityValue.rgba.a}; will-change: opacity; }`);
+	const minimapBackgroundValue = theme.getColor(minimapBackground);
+	if (minimapBackgroundValue) {
+		collector.addRule(`.monaco-editor .minimap > canvas { opacity: ${minimapBackgroundValue.rgba.a}; will-change: opacity; }`);
 	}
 	const sliderBackground = theme.getColor(scrollbarSliderBackground);
 	if (sliderBackground) {

src/vs/editor/common/core/rgba.ts

@@ -36,6 +36,15 @@ export class RGBA8 {
 		this.a = RGBA8._clamp(a);
 	}
 
+	public equals(other: RGBA8): boolean {
+		return (
+			this.r === other.r
+			&& this.g === other.g
+			&& this.b === other.b
+			&& this.a === other.a
+		);
+	}
+
 	private static _clamp(c: number): number {
 		if (c < 0) {
 			return 0;

src/vs/platform/theme/common/colorRegistry.ts

@@ -238,8 +238,6 @@ export const buttonHoverBackground = registerColor('button.hoverBackground', { d
 export const badgeBackground = registerColor('badge.background', { dark: '#4D4D4D', light: '#C4C4C4', hc: Color.black }, nls.localize('badgeBackground', "Badge background color. Badges are small information labels, e.g. for search results count."));
 export const badgeForeground = registerColor('badge.foreground', { dark: Color.white, light: '#333', hc: Color.white }, nls.localize('badgeForeground', "Badge foreground color. Badges are small information labels, e.g. for search results count."));
 
-export const minimapOpacity = registerColor('minimapOpacity', { dark: null, light: null, hc: null }, nls.localize('minimapOpacity', "Opacity of minimap in hex. Color data is ignored."));
-
 export const scrollbarShadow = registerColor('scrollbar.shadow', { dark: '#000000', light: '#DDDDDD', hc: null }, nls.localize('scrollbarShadow', "Scrollbar shadow to indicate that the view is scrolled."));
 export const scrollbarSliderBackground = registerColor('scrollbarSlider.background', { dark: Color.fromHex('#797979').transparent(0.4), light: Color.fromHex('#646464').transparent(0.4), hc: transparent(contrastBorder, 0.6) }, nls.localize('scrollbarSliderBackground', "Scrollbar slider background color."));
 export const scrollbarSliderHoverBackground = registerColor('scrollbarSlider.hoverBackground', { dark: Color.fromHex('#646464').transparent(0.7), light: Color.fromHex('#646464').transparent(0.7), hc: transparent(contrastBorder, 0.8) }, nls.localize('scrollbarSliderHoverBackground', "Scrollbar slider background color when hovering."));
@@ -426,6 +424,7 @@ export const minimapFindMatch = registerColor('minimap.findMatchHighlight', { li
 export const minimapSelection = registerColor('minimap.selectionHighlight', { light: '#ADD6FF', dark: '#264F78', hc: '#ffffff' }, nls.localize('minimapSelectionHighlight', 'Minimap marker color for the editor selection.'), true);
 export const minimapError = registerColor('minimap.errorHighlight', { dark: new Color(new RGBA(255, 18, 18, 0.7)), light: new Color(new RGBA(255, 18, 18, 0.7)), hc: new Color(new RGBA(255, 50, 50, 1)) }, nls.localize('minimapError', 'Minimap marker color for errors.'));
 export const minimapWarning = registerColor('minimap.warningHighlight', { dark: editorWarningForeground, light: editorWarningForeground, hc: editorWarningBorder }, nls.localize('overviewRuleWarning', 'Minimap marker color for warnings.'));
+export const minimapBackground = registerColor('minimap.background', { dark: null, light: null, hc: null }, nls.localize('minimapBackground', "Minimap background color."));
 
 export const problemsErrorIconForeground = registerColor('problemsErrorIcon.foreground', { dark: editorErrorForeground, light: editorErrorForeground, hc: editorErrorForeground }, nls.localize('problemsErrorIconForeground', "The color used for the problems error icon."));
 export const problemsWarningIconForeground = registerColor('problemsWarningIcon.foreground', { dark: editorWarningForeground, light: editorWarningForeground, hc: editorWarningForeground }, nls.localize('problemsWarningIconForeground', "The color used for the problems warning icon."));