Implement Editor Canvas Padding via editor.padding.maxEditorCanvasWidth. Addresses Issue #334959

Author: RickStrahl

src/vs/editor/browser/gpu/gpuUtils.ts

@@ -5,6 +5,15 @@
 
 import { BugIndicatingError } from '../../../base/common/errors.js';
 import { toDisposable, type IDisposable } from '../../../base/common/lifecycle.js';
+import type { EditorLayoutInfo } from '../../common/config/editorOptions.js';
+
+export function getContentScissorRect(layout: EditorLayoutInfo, devicePixelRatio: number, canvasWidth: number, canvasHeight: number, constrainWidth: boolean): [number, number, number, number] {
+	const left = Math.min(canvasWidth, Math.max(0, Math.ceil(layout.contentLeft * devicePixelRatio)));
+	const right = constrainWidth
+		? Math.min(canvasWidth, Math.floor((layout.contentLeft + layout.contentWidth - layout.verticalScrollbarWidth) * devicePixelRatio))
+		: canvasWidth;
+	return [left, 0, Math.max(0, right - left), canvasHeight];
+}
 
 export const quadVertices = new Float32Array([
 	1, 0,

src/vs/editor/browser/gpu/rectangleRenderer.ts

@@ -13,7 +13,7 @@ import type { ViewScrollChangedEvent } from '../../common/viewEvents.js';
 import type { ViewportData } from '../../common/viewLayout/viewLinesViewportData.js';
 import type { ViewContext } from '../../common/viewModel/viewContext.js';
 import { GPULifecycle } from './gpuDisposable.js';
-import { observeDevicePixelDimensions, quadVertices } from './gpuUtils.js';
+import { getContentScissorRect, observeDevicePixelDimensions, quadVertices } from './gpuUtils.js';
 import { createObjectCollectionBuffer, type IObjectCollectionBuffer, type IObjectCollectionBufferEntry } from './objectCollectionBuffer.js';
 import { RectangleRendererBindingId, rectangleRendererWgsl } from './rectangleRenderer.wgsl.js';
 
@@ -57,7 +57,6 @@ export class RectangleRenderer extends ViewEventHandler {
 
 	constructor(
 		private readonly _context: ViewContext,
-		private readonly _contentLeft: IObservable<number>,
 		private readonly _devicePixelRatio: IObservable<number>,
 		private readonly _canvas: HTMLCanvasElement,
 		private readonly _ctx: GPUCanvasContext,
@@ -285,8 +284,12 @@ export class RectangleRenderer extends ViewEventHandler {
 		pass.setBindGroup(0, this._bindGroup);
 
 		// Only draw the content area
-		const contentLeft = Math.ceil(this._contentLeft.get() * this._devicePixelRatio.get());
-		pass.setScissorRect(contentLeft, 0, this._canvas.width - contentLeft, this._canvas.height);
+		pass.setScissorRect(...getContentScissorRect(
+			this._context.configuration.options.get(EditorOption.layoutInfo),
+			this._devicePixelRatio.get(),
+			this._canvas.width, this._canvas.height,
+			this._context.configuration.options.get(EditorOption.padding).maxEditorCanvasWidth > 0
+		));
 
 		pass.draw(quadVertices.length / 2, this._shapeCollection.entryCount);
 		pass.end();

src/vs/editor/browser/gpu/viewGpuContext.ts

@@ -150,7 +150,7 @@ export class ViewGpuContext extends Disposable {
 		}));
 		this.contentLeft = contentLeft;
 
-		this.rectangleRenderer = this._register(this._instantiationService.createInstance(RectangleRenderer, context, this.contentLeft, this.devicePixelRatio, this.canvas.domNode, this.ctx, ViewGpuContext.device));
+		this.rectangleRenderer = this._register(this._instantiationService.createInstance(RectangleRenderer, context, this.devicePixelRatio, this.canvas.domNode, this.ctx, ViewGpuContext.device));
 	}
 
 	/**

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

@@ -112,13 +112,7 @@ export class EditorScrollbar extends ViewPart {
 
 		this.scrollbarDomNode.setLeft(layoutInfo.contentLeft);
 
-		const minimap = options.get(EditorOption.minimap);
-		const side = minimap.side;
-		if (side === 'right') {
-			this.scrollbarDomNode.setWidth(layoutInfo.contentWidth + layoutInfo.minimap.minimapWidth);
-		} else {
-			this.scrollbarDomNode.setWidth(layoutInfo.contentWidth);
-		}
+		this.scrollbarDomNode.setWidth(layoutInfo.width - layoutInfo.contentLeft);
 		this.scrollbarDomNode.setHeight(layoutInfo.height);
 	}
 

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

@@ -58,6 +58,10 @@
 	white-space: nowrap;
 }
 
+.monaco-editor .lines-content > :not(.contentWidgets) {
+	clip-path: var(--editor-canvas-clip, none);
+}
+
 .monaco-editor .view-line {
 	box-sizing: border-box;
 	position: absolute;

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

@@ -674,6 +674,13 @@ export class ViewLines extends ViewPart implements IViewLines {
 		const adjustedScrollTop = this._context.viewLayout.getCurrentScrollTop() - viewportData.bigNumbersDelta;
 		this._linesContent.setTop(-adjustedScrollTop);
 		this._linesContent.setLeft(-this._context.viewLayout.getCurrentScrollLeft());
+		const options = this._context.configuration.options;
+		const layoutInfo = options.get(EditorOption.layoutInfo);
+		const scrollLeft = this._context.viewLayout.getCurrentScrollLeft();
+		const clip = options.get(EditorOption.padding).maxEditorCanvasWidth > 0
+			? `inset(${adjustedScrollTop}px calc(100% - ${scrollLeft + Math.max(0, layoutInfo.contentWidth - layoutInfo.verticalScrollbarWidth)}px) calc(100% - ${adjustedScrollTop + layoutInfo.height}px) ${scrollLeft}px)`
+			: 'none';
+		this._linesContent.domNode.style.setProperty('--editor-canvas-clip', clip);
 	}
 
 	// --- width

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

@@ -16,7 +16,7 @@ import type { ViewContext } from '../../../common/viewModel/viewContext.js';
 import { TextureAtlasPage } from '../../gpu/atlas/textureAtlasPage.js';
 import { BindingId, type IGpuRenderStrategy } from '../../gpu/gpu.js';
 import { GPULifecycle } from '../../gpu/gpuDisposable.js';
-import { quadVertices } from '../../gpu/gpuUtils.js';
+import { getContentScissorRect, quadVertices } from '../../gpu/gpuUtils.js';
 import { ViewGpuContext } from '../../gpu/viewGpuContext.js';
 import { FloatHorizontalRange, HorizontalPosition, HorizontalRange, IViewLines, LineVisibleRanges, RenderingContext, RestrictedRenderingContext, VisibleRanges } from '../../view/renderingContext.js';
 import { ViewPart } from '../../view/viewPart.js';
@@ -498,8 +498,12 @@ export class ViewLinesGpu extends ViewPart implements IViewLines {
 		pass.setVertexBuffer(0, this._vertexBuffer);
 
 		// Only draw the content area
-		const contentLeft = Math.ceil(this._viewGpuContext.contentLeft.get() * this._viewGpuContext.devicePixelRatio.get());
-		pass.setScissorRect(contentLeft, 0, this.canvas.width - contentLeft, this.canvas.height);
+		pass.setScissorRect(...getContentScissorRect(
+			this._context.configuration.options.get(EditorOption.layoutInfo),
+			this._viewGpuContext.devicePixelRatio.get(),
+			this.canvas.width, this.canvas.height,
+			this._context.configuration.options.get(EditorOption.padding).maxEditorCanvasWidth > 0
+		));
 
 		pass.setBindGroup(0, this._bindGroup);
 

src/vs/editor/browser/widget/codeEditor/codeEditorWidget.ts

@@ -1675,7 +1675,7 @@ export class CodeEditorWidget extends Disposable implements editorBrowser.ICodeE
 		const layoutInfo = options.get(EditorOption.layoutInfo);
 
 		const top = CodeEditorWidget._getVerticalOffsetForPosition(this._modelData, position.lineNumber, position.column) - this.getScrollTop();
-		const left = this._modelData.view.getOffsetForColumn(position.lineNumber, position.column) + layoutInfo.glyphMarginWidth + layoutInfo.lineNumbersWidth + layoutInfo.decorationsWidth - this.getScrollLeft();
+		const left = this._modelData.view.getOffsetForColumn(position.lineNumber, position.column) + layoutInfo.contentLeft - this.getScrollLeft();
 		const height = this.getLineHeightForPosition(position);
 		return {
 			top: top,

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

@@ -2974,7 +2974,11 @@ export class EditorLayoutInfoComputer extends ComputedEditorOption<EditorOption.
 			decorationsLeft += minimapLayout.minimapWidth;
 			contentLeft += minimapLayout.minimapWidth;
 		}
-		const contentWidth = remainingWidth - minimapLayout.minimapWidth;
+		const availableCanvasWidth = remainingWidth - minimapLayout.minimapWidth;
+		const contentWidth = padding.maxEditorCanvasWidth > 0
+			? Math.min(availableCanvasWidth, padding.maxEditorCanvasWidth + verticalScrollbarWidth)
+			: availableCanvasWidth;
+		contentLeft += Math.floor(Math.max(0, availableCanvasWidth - contentWidth) / 2);
 
 		// (leaving 2px for the cursor to have space after the last character)
 		const viewportColumn = Math.max(1, Math.floor((contentWidth - verticalScrollbarWidth - 2) / typicalHalfwidthCharacterWidth));
@@ -3608,6 +3612,11 @@ export interface IEditorPaddingOptions {
 	 * Spacing between bottom edge of editor and last line.
 	 */
 	bottom?: number;
+	/**
+	 * Maximum text viewport width in CSS pixels, excluding gutters, minimap, and scrollbar.
+	 * Extra space is split evenly on either side of the text. Defaults to 0 (no limit).
+	 */
+	maxEditorCanvasWidth?: number;
 }
 
 /**
@@ -3619,7 +3628,7 @@ class EditorPadding extends BaseEditorOption<EditorOption.padding, IEditorPaddin
 
 	constructor() {
 		super(
-			EditorOption.padding, 'padding', { top: 0, bottom: 0 },
+			EditorOption.padding, 'padding', { top: 0, bottom: 0, maxEditorCanvasWidth: 0 },
 			{
 				'editor.padding.top': {
 					type: 'number',
@@ -3634,6 +3643,13 @@ class EditorPadding extends BaseEditorOption<EditorOption.padding, IEditorPaddin
 					minimum: 0,
 					maximum: 1000,
 					description: nls.localize('padding.bottom', "Controls the amount of space between the bottom edge of the editor and the last line.")
+				},
+				'editor.padding.maxEditorCanvasWidth': {
+					type: 'number',
+					default: 0,
+					minimum: 0,
+					maximum: 10000,
+					description: nls.localize('padding.maxEditorCanvasWidth', "Controls the maximum width of the text area in pixels, excluding gutters, minimap, and scrollbar. Extra space is split evenly on either side of the text. Set to 0 to use the full available width.")
 				}
 			}
 		);
@@ -3647,7 +3663,8 @@ class EditorPadding extends BaseEditorOption<EditorOption.padding, IEditorPaddin
 
 		return {
 			top: EditorIntOption.clampedInt(input.top, 0, 0, 1000),
-			bottom: EditorIntOption.clampedInt(input.bottom, 0, 0, 1000)
+			bottom: EditorIntOption.clampedInt(input.bottom, 0, 0, 1000),
+			maxEditorCanvasWidth: EditorIntOption.clampedInt(input.maxEditorCanvasWidth, 0, 0, 10000)
 		};
 	}
 }

src/vs/editor/contrib/stickyScroll/browser/stickyScrollWidget.ts

@@ -100,6 +100,9 @@ export class StickyScrollWidget extends Disposable implements IOverlayWidget {
 			if (e.hasChanged(EditorOption.stickyScroll)) {
 				updateScrollLeftPosition();
 			}
+			if (e.hasChanged(EditorOption.padding)) {
+				this._updateWidgetWidth();
+			}
 		}));
 		this._register(this._editor.onDidScrollChange((e) => {
 			if (e.scrollLeftChanged) {
@@ -189,6 +192,9 @@ export class StickyScrollWidget extends Disposable implements IOverlayWidget {
 		const layoutInfo = this._editor.getLayoutInfo();
 		const lineNumbersWidth = layoutInfo.contentLeft;
 		this._lineNumbersDomNode.style.width = `${lineNumbersWidth}px`;
+		this._linesDomNodeScrollable.style.maxWidth = this._editor.getOption(EditorOption.padding).maxEditorCanvasWidth > 0
+			? `${Math.max(0, layoutInfo.contentWidth - layoutInfo.verticalScrollbarWidth)}px`
+			: '';
 		this._linesDomNodeScrollable.style.setProperty('--vscode-editorStickyScroll-scrollableWidth', `${this._editor.getScrollWidth() - layoutInfo.verticalScrollbarWidth}px`);
 		this._rootDomNode.style.width = `${layoutInfo.width - layoutInfo.verticalScrollbarWidth}px`;
 	}