Implements block decorations feature.

src/vs/editor/browser/view.ts

@@ -49,6 +49,7 @@ import { IViewModel } from 'vs/editor/common/viewModel';
 import { getThemeTypeSelector, IColorTheme } from 'vs/platform/theme/common/themeService';
 import { EditorOption } from 'vs/editor/common/config/editorOptions';
 import { PointerHandlerLastRenderData } from 'vs/editor/browser/controller/mouseTarget';
+import { BlockDecorations } from 'vs/editor/browser/viewParts/blockDecorations/blockDecorations';
 
 
 export interface IContentWidgetData {
@@ -180,6 +181,9 @@ export class View extends ViewEventHandler {
 		const rulers = new Rulers(this._context);
 		this._viewParts.push(rulers);
 
+		const blockOutline = new BlockDecorations(this._context);
+		this._viewParts.push(blockOutline);
+
 		const minimap = new Minimap(this._context);
 		this._viewParts.push(minimap);
 
@@ -192,6 +196,7 @@ export class View extends ViewEventHandler {
 
 		this._linesContent.appendChild(contentViewOverlays.getDomNode());
 		this._linesContent.appendChild(rulers.domNode);
+		this._linesContent.appendChild(blockOutline.domNode);
 		this._linesContent.appendChild(this._viewZones.domNode);
 		this._linesContent.appendChild(this._viewLines.getDomNode());
 		this._linesContent.appendChild(this._contentWidgets.domNode);

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

@@ -0,0 +1,14 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the MIT License. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+.monaco-editor .blockDecorations-container {
+	position: absolute;
+	top: 0;
+}
+
+.monaco-editor .blockDecorations-block {
+	position: absolute;
+	box-sizing: border-box;
+}

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

@@ -0,0 +1,103 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the MIT License. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+import { createFastDomNode, FastDomNode } from 'vs/base/browser/fastDomNode';
+import 'vs/css!./blockDecorations';
+import { RenderingContext, RestrictedRenderingContext } from 'vs/editor/browser/view/renderingContext';
+import { ViewPart } from 'vs/editor/browser/view/viewPart';
+import { EditorOption } from 'vs/editor/common/config/editorOptions';
+import * as viewEvents from 'vs/editor/common/viewEvents';
+import { ViewContext } from 'vs/editor/common/viewModel/viewContext';
+
+export class BlockDecorations extends ViewPart {
+
+	public domNode: FastDomNode<HTMLElement>;
+
+	private readonly blocks: FastDomNode<HTMLElement>[] = [];
+
+	private contentWidth: number = -1;
+
+	constructor(context: ViewContext) {
+		super(context);
+
+		this.domNode = createFastDomNode<HTMLElement>(document.createElement('div'));
+		this.domNode.setAttribute('role', 'presentation');
+		this.domNode.setAttribute('aria-hidden', 'true');
+		this.domNode.setClassName('blockDecorations-container');
+
+		this.update();
+	}
+
+	private update(): boolean {
+		let didChange = false;
+		const options = this._context.configuration.options;
+		const layoutInfo = options.get(EditorOption.layoutInfo);
+		const newContentWidth = layoutInfo.contentWidth - layoutInfo.verticalScrollbarWidth;
+
+		if (this.contentWidth !== newContentWidth) {
+			this.contentWidth = newContentWidth;
+			didChange = true;
+		}
+
+		return didChange;
+	}
+
+	public override dispose(): void {
+		super.dispose();
+	}
+
+	// --- begin event handlers
+
+	public override onConfigurationChanged(e: viewEvents.ViewConfigurationChangedEvent): boolean {
+		return this.update();
+	}
+	public override onScrollChanged(e: viewEvents.ViewScrollChangedEvent): boolean {
+		return e.scrollTopChanged || e.scrollLeftChanged;
+	}
+	public override onDecorationsChanged(e: viewEvents.ViewDecorationsChangedEvent): boolean {
+		return true;
+	}
+
+	public override onZonesChanged(e: viewEvents.ViewZonesChangedEvent): boolean {
+		return true;
+	}
+
+	// --- end event handlers
+	public prepareRender(ctx: RenderingContext): void {
+		// Nothing to read
+	}
+
+	public render(ctx: RestrictedRenderingContext): void {
+		let count = 0;
+		const decorations = ctx.getDecorationsInViewport();
+		for (const decoration of decorations) {
+			if (!decoration.options.blockClassName) {
+				continue;
+			}
+
+			let block = this.blocks[count];
+			if (!block) {
+				block = this.blocks[count] = createFastDomNode(document.createElement('div'));
+				this.domNode.appendChild(block);
+			}
+			const top = ctx.getVerticalOffsetForLineNumber(decoration.range.startLineNumber);
+			// See https://github.com/microsoft/vscode/pull/152740#discussion_r902661546
+			const bottom = ctx.getVerticalOffsetForLineNumber(decoration.range.endLineNumber + 1);
+
+			block.setClassName('blockDecorations-block ' + decoration.options.blockClassName);
+			block.setLeft(ctx.scrollLeft);
+			block.setWidth(this.contentWidth);
+			block.setTop(top);
+			block.setHeight(bottom - top);
+
+			count++;
+		}
+
+		for (let i = count; i < this.blocks.length; i++) {
+			this.blocks[i].domNode.remove();
+		}
+		this.blocks.length = count;
+	}
+}

src/vs/editor/common/model.ts

@@ -91,6 +91,7 @@ export interface IModelDecorationOptions {
 	 * CSS class name describing the decoration.
 	 */
 	className?: string | null;
+	blockClassName?: string | null;
 	/**
 	 * Message to be rendered when hovering over the glyph margin decoration.
 	 */

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

@@ -2227,6 +2227,7 @@ export class ModelDecorationOptions implements model.IModelDecorationOptions {
 	}
 
 	readonly description: string;
+	readonly blockClassName: string | null;
 	readonly stickiness: model.TrackedRangeStickiness;
 	readonly zIndex: number;
 	readonly className: string | null;
@@ -2253,6 +2254,7 @@ export class ModelDecorationOptions implements model.IModelDecorationOptions {
 
 	private constructor(options: model.IModelDecorationOptions) {
 		this.description = options.description;
+		this.blockClassName = options.blockClassName ? cleanClassName(options.blockClassName) : null;
 		this.stickiness = options.stickiness || model.TrackedRangeStickiness.AlwaysGrowsWhenTypingAtEdges;
 		this.zIndex = options.zIndex || 0;
 		this.className = options.className ? cleanClassName(options.className) : null;

src/vs/monaco.d.ts

@@ -1483,6 +1483,7 @@ declare namespace monaco.editor {
 		 * CSS class name describing the decoration.
 		 */
 		className?: string | null;
+		blockClassName?: string | null;
 		/**
 		 * Message to be rendered when hovering over the glyph margin decoration.
 		 */