Highlight whole line for minimap decorations, #76122

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

@@ -767,6 +767,7 @@ export class Minimap extends ViewPart {
 
 		// Cache line offset data so that it is only read once per line
 		let lineIndexToXOffset = lineOffsetMap.get(lineNumber);
+		const isFirstDecorationForLine = !lineIndexToXOffset;
 		if (!lineIndexToXOffset) {
 			const lineData = this._context.model.getLineContent(lineNumber);
 			lineIndexToXOffset = [0];
@@ -796,12 +797,22 @@ export class Minimap extends ViewPart {
 			this.renderDecoration(canvasContext, <ModelDecorationMinimapOptions>decoration.options.minimap, x, y, width, height);
 		}
 
+		if (isFirstDecorationForLine) {
+			this.renderLineHighlight(canvasContext, <ModelDecorationMinimapOptions>decoration.options.minimap, y, height);
+		}
+
+	}
+
+	private renderLineHighlight(canvasContext: CanvasRenderingContext2D, minimapOptions: ModelDecorationMinimapOptions, y: number, height: number): void {
+		const decorationColor = minimapOptions.getColor(this._context.theme);
+		canvasContext.fillStyle = decorationColor && decorationColor.transparent(0.5).toString() || '';
+		canvasContext.fillRect(0, y, canvasContext.canvas.width, height);
 	}
 
 	private renderDecoration(canvasContext: CanvasRenderingContext2D, minimapOptions: ModelDecorationMinimapOptions, x: number, y: number, width: number, height: number) {
 		const decorationColor = minimapOptions.getColor(this._context.theme);
 
-		canvasContext.fillStyle = decorationColor;
+		canvasContext.fillStyle = decorationColor && decorationColor.toString() || '';
 		canvasContext.fillRect(x, y, width, height);
 	}
 

src/vs/editor/common/model/textModel.ts

@@ -33,6 +33,7 @@ import { ITheme, ThemeColor } from 'vs/platform/theme/common/themeService';
 import { withUndefinedAsNull } from 'vs/base/common/types';
 import { VSBufferReadableStream, VSBuffer } from 'vs/base/common/buffer';
 import { TokensStore, MultilineTokens } from 'vs/editor/common/model/tokensStore';
+import { Color } from 'vs/base/common/color';
 
 function createTextBufferBuilder() {
 	return new PieceTreeTextBufferBuilder();
@@ -2635,12 +2636,22 @@ function cleanClassName(className: string): string {
 class DecorationOptions implements model.IDecorationOptions {
 	readonly color: string | ThemeColor;
 	readonly darkColor: string | ThemeColor;
-	private _resolvedColor: string | null;
 
 	constructor(options: model.IDecorationOptions) {
 		this.color = options.color || strings.empty;
 		this.darkColor = options.darkColor || strings.empty;
+
+	}
+}
+
+export class ModelDecorationOverviewRulerOptions extends DecorationOptions {
+	readonly position: model.OverviewRulerLane;
+	private _resolvedColor: string | null;
+
+	constructor(options: model.IModelDecorationOverviewRulerOptions) {
+		super(options);
 		this._resolvedColor = null;
+		this.position = (typeof options.position === 'number' ? options.position : model.OverviewRulerLane.Center);
 	}
 
 	public getColor(theme: ITheme): string {
@@ -2670,22 +2681,34 @@ class DecorationOptions implements model.IDecorationOptions {
 	}
 }
 
-export class ModelDecorationOverviewRulerOptions extends DecorationOptions {
-	readonly position: model.OverviewRulerLane;
-
-	constructor(options: model.IModelDecorationOverviewRulerOptions) {
-		super(options);
-		this.position = (typeof options.position === 'number' ? options.position : model.OverviewRulerLane.Center);
-	}
-}
-
 export class ModelDecorationMinimapOptions extends DecorationOptions {
 	readonly position: model.MinimapPosition;
+	private _resolvedColor: Color | undefined;
+
 
 	constructor(options: model.IModelDecorationMinimapOptions) {
 		super(options);
 		this.position = options.position;
 	}
+
+	public getColor(theme: ITheme): Color | undefined {
+		if (!this._resolvedColor) {
+			if (theme.type !== 'light' && this.darkColor) {
+				this._resolvedColor = this._resolveColor(this.darkColor, theme);
+			} else {
+				this._resolvedColor = this._resolveColor(this.color, theme);
+			}
+		}
+
+		return this._resolvedColor;
+	}
+
+	private _resolveColor(color: string | ThemeColor, theme: ITheme): Color | undefined {
+		if (typeof color === 'string') {
+			return Color.fromHex(color);
+		}
+		return theme.getColor(color.id);
+	}
 }
 
 export class ModelDecorationOptions implements model.IModelDecorationOptions {

src/vs/editor/contrib/find/findDecorations.ts

@@ -9,7 +9,7 @@ import { Position } from 'vs/editor/common/core/position';
 import { Range } from 'vs/editor/common/core/range';
 import { FindMatch, IModelDecorationsChangeAccessor, IModelDeltaDecoration, OverviewRulerLane, TrackedRangeStickiness, MinimapPosition } from 'vs/editor/common/model';
 import { ModelDecorationOptions } from 'vs/editor/common/model/textModel';
-import { overviewRulerFindMatchForeground } from 'vs/platform/theme/common/colorRegistry';
+import { overviewRulerFindMatchForeground, minimapFindMatch } from 'vs/platform/theme/common/colorRegistry';
 import { themeColorFromId } from 'vs/platform/theme/common/themeService';
 
 export class FindDecorations implements IDisposable {
@@ -271,7 +271,7 @@ export class FindDecorations implements IDisposable {
 			position: OverviewRulerLane.Center
 		},
 		minimap: {
-			color: themeColorFromId(overviewRulerFindMatchForeground),
+			color: themeColorFromId(minimapFindMatch),
 			position: MinimapPosition.Inline
 		}
 	});
@@ -285,7 +285,7 @@ export class FindDecorations implements IDisposable {
 			position: OverviewRulerLane.Center
 		},
 		minimap: {
-			color: themeColorFromId(overviewRulerFindMatchForeground),
+			color: themeColorFromId(minimapFindMatch),
 			position: MinimapPosition.Inline
 		}
 	});

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

@@ -391,6 +391,8 @@ export const overviewRulerFindMatchForeground = registerColor('editorOverviewRul
 
 export const overviewRulerSelectionHighlightForeground = registerColor('editorOverviewRuler.selectionHighlightForeground', { dark: '#A0A0A0CC', light: '#A0A0A0CC', hc: '#A0A0A0CC' }, nls.localize('overviewRulerSelectionHighlightForeground', 'Overview ruler marker color for selection highlights. The color must not be opaque so as not to hide underlying decorations.'), true);
 
+export const minimapFindMatch = registerColor('minimap.findMatchHighlight', { light: '#d18616', dark: '#d18616', hc: '#AB5A00' }, nls.localize('minimapFindMatchHighlight', 'Minimap marker color for find matches.'), true);
+
 
 // ----- color functions