feat(editor): make line number font size configurable (#244862)

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

@@ -30,6 +30,7 @@ export class LineNumbersOverlay extends DynamicViewOverlay {
 	private _renderFinalNewline!: 'off' | 'on' | 'dimmed';
 	private _lineNumbersLeft!: number;
 	private _lineNumbersWidth!: number;
+	private _lineNumbersFontSize: number | null = null;
 	private _lastCursorModelPosition: Position;
 	private _renderResult: string[] | null;
 	private _activeModelLineNumber: number;
@@ -49,13 +50,15 @@ export class LineNumbersOverlay extends DynamicViewOverlay {
 	private _readConfig(): void {
 		const options = this._context.configuration.options;
 		this._lineHeight = options.get(EditorOption.lineHeight);
+		const configuredLineNumbersFontSize = options.get(EditorOption.lineNumbersFontSize);
 		const lineNumbers = options.get(EditorOption.lineNumbers);
 		this._renderLineNumbers = lineNumbers.renderType;
 		this._renderCustomLineNumbers = lineNumbers.renderFn;
 		this._renderFinalNewline = options.get(EditorOption.renderFinalNewline);
 		const layoutInfo = options.get(EditorOption.layoutInfo);
 		this._lineNumbersLeft = layoutInfo.lineNumbersLeft;
 		this._lineNumbersWidth = layoutInfo.lineNumbersWidth;
+		this._lineNumbersFontSize = configuredLineNumbersFontSize > 0 ? configuredLineNumbersFontSize : null;
 	}
 
 	public override dispose(): void {
@@ -151,6 +154,7 @@ export class LineNumbersOverlay extends DynamicViewOverlay {
 		}
 
 		const lineHeightClassName = (platform.isLinux ? (this._lineHeight % 2 === 0 ? ' lh-even' : ' lh-odd') : '');
+		const fontSizeStyle = this._lineNumbersFontSize ? `font-size:${this._lineNumbersFontSize}px;` : '';
 		const visibleStartLineNumber = ctx.visibleRange.startLineNumber;
 		const visibleEndLineNumber = ctx.visibleRange.endLineNumber;
 
@@ -198,7 +202,7 @@ export class LineNumbersOverlay extends DynamicViewOverlay {
 
 
 			output[lineIndex] = (
-				`<div class="${LineNumbersOverlay.CLASS_NAME}${lineHeightClassName}${extraClassNames}" style="left:${this._lineNumbersLeft}px;width:${this._lineNumbersWidth}px;">${renderLineNumber}</div>`
+				`<div class="${LineNumbersOverlay.CLASS_NAME}${lineHeightClassName}${extraClassNames}" style="left:${this._lineNumbersLeft}px;width:${this._lineNumbersWidth}px;${fontSizeStyle}">${renderLineNumber}</div>`
 			);
 		}
 

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

@@ -145,6 +145,10 @@ export interface IEditorOptions {
 	 * Defaults to 5.
 	 */
 	lineNumbersMinChars?: number;
+	/**
+	 * Controls the font size for line numbers in pixels. Use 0 to inherit the editor font size.
+	 */
+	lineNumbersFontSize?: number;
 	/**
 	 * Enable the rendering of the glyph margin.
 	 * Defaults to true in vscode and to false in monaco-editor.
@@ -2536,6 +2540,7 @@ export interface EditorLayoutInfoComputerEnv {
 	readonly lineNumbersDigitCount: number;
 	readonly typicalHalfwidthCharacterWidth: number;
 	readonly maxDigitWidth: number;
+	readonly lineNumbersMaxDigitWidth: number;
 	readonly pixelRatio: number;
 	readonly glyphMarginDecorationLaneCount: number;
 }
@@ -2632,6 +2637,10 @@ export class EditorLayoutInfoComputer extends ComputedEditorOption<EditorOption.
 	}
 
 	public compute(env: IEnvironmentalOptions, options: IComputedEditorOptions, _: EditorLayoutInfo): EditorLayoutInfo {
+		const configuredLineNumbersFontSize = options.get(EditorOption.lineNumbersFontSize);
+		const lineNumbersFontSize = (configuredLineNumbersFontSize > 0 ? configuredLineNumbersFontSize : env.fontInfo.fontSize);
+		const lineNumbersMaxDigitWidth = env.fontInfo.maxDigitWidth * (lineNumbersFontSize / env.fontInfo.fontSize);
+
 		return EditorLayoutInfoComputer.computeLayout(options, {
 			memory: env.memory,
 			outerWidth: env.outerWidth,
@@ -2642,6 +2651,7 @@ export class EditorLayoutInfoComputer extends ComputedEditorOption<EditorOption.
 			lineNumbersDigitCount: env.lineNumbersDigitCount,
 			typicalHalfwidthCharacterWidth: env.fontInfo.typicalHalfwidthCharacterWidth,
 			maxDigitWidth: env.fontInfo.maxDigitWidth,
+			lineNumbersMaxDigitWidth,
 			pixelRatio: env.pixelRatio,
 			glyphMarginDecorationLaneCount: env.glyphMarginDecorationLaneCount
 		});
@@ -2849,7 +2859,7 @@ export class EditorLayoutInfoComputer extends ComputedEditorOption<EditorOption.
 		const lineHeight = env.lineHeight | 0;
 		const lineNumbersDigitCount = env.lineNumbersDigitCount | 0;
 		const typicalHalfwidthCharacterWidth = env.typicalHalfwidthCharacterWidth;
-		const maxDigitWidth = env.maxDigitWidth;
+		const lineNumbersMaxDigitWidth = env.lineNumbersMaxDigitWidth;
 		const pixelRatio = env.pixelRatio;
 		const viewLineCount = env.viewLineCount;
 
@@ -2884,7 +2894,7 @@ export class EditorLayoutInfoComputer extends ComputedEditorOption<EditorOption.
 		let lineNumbersWidth = 0;
 		if (showLineNumbers) {
 			const digitCount = Math.max(lineNumbersDigitCount, lineNumbersMinChars);
-			lineNumbersWidth = Math.round(digitCount * maxDigitWidth);
+			lineNumbersWidth = Math.round(digitCount * lineNumbersMaxDigitWidth);
 		}
 
 		let glyphMarginWidth = 0;
@@ -5884,6 +5894,7 @@ export const enum EditorOption {
 	inertialScroll,
 	inlayHints,
 	wrapOnEscapedLineFeeds,
+	lineNumbersFontSize,
 	// Leave these at the end (because they have dependencies!)
 	effectiveCursorStyle,
 	editorClassName,
@@ -6327,6 +6338,17 @@ export const EditorOptions = {
 		EditorOption.lineNumbersMinChars, 'lineNumbersMinChars',
 		5, 1, 300
 	)),
+	lineNumbersFontSize: register(new EditorIntOption(
+		EditorOption.lineNumbersFontSize, 'lineNumbersFontSize',
+		0, 0, 1000,
+		{
+			type: 'number',
+			default: 0,
+			minimum: 0,
+			maximum: 1000,
+			markdownDescription: nls.localize('lineNumbersFontSize', "Controls the font size in pixels for line numbers. When set to 0, the editor font size is used.")
+		}
+	)),
 	linkedEditing: register(new EditorBooleanOption(
 		EditorOption.linkedEditing, 'linkedEditing', false,
 		{ description: nls.localize('linkedEditing', "Controls whether the editor has linked editing enabled. Depending on the language, related symbols such as HTML tags, are updated while editing.") }

src/vs/editor/common/standalone/standaloneEnums.ts

@@ -335,18 +335,19 @@ export enum EditorOption {
 	inertialScroll = 158,
 	inlayHints = 159,
 	wrapOnEscapedLineFeeds = 160,
-	effectiveCursorStyle = 161,
-	editorClassName = 162,
-	pixelRatio = 163,
-	tabFocusMode = 164,
-	layoutInfo = 165,
-	wrappingInfo = 166,
-	defaultColorDecorators = 167,
-	colorDecoratorsActivatedOn = 168,
-	inlineCompletionsAccessibilityVerbose = 169,
-	effectiveEditContext = 170,
-	scrollOnMiddleClick = 171,
-	effectiveAllowVariableFonts = 172
+	lineNumbersFontSize = 161,
+	effectiveCursorStyle = 162,
+	editorClassName = 163,
+	pixelRatio = 164,
+	tabFocusMode = 165,
+	layoutInfo = 166,
+	wrappingInfo = 167,
+	defaultColorDecorators = 168,
+	colorDecoratorsActivatedOn = 169,
+	inlineCompletionsAccessibilityVerbose = 170,
+	effectiveEditContext = 171,
+	scrollOnMiddleClick = 172,
+	effectiveAllowVariableFonts = 173
 }
 
 /**

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

@@ -19,6 +19,7 @@ interface IEditorLayoutProviderOpts {
 	readonly lineNumbersMinChars: number;
 	readonly lineNumbersDigitCount: number;
 	maxLineNumber?: number;
+	readonly lineNumbersMaxDigitWidth?: number;
 
 	readonly lineDecorationsWidth: number;
 
@@ -104,6 +105,7 @@ suite('Editor ViewLayout - EditorLayoutProvider', () => {
 			lineNumbersDigitCount: input.lineNumbersDigitCount,
 			typicalHalfwidthCharacterWidth: input.typicalHalfwidthCharacterWidth,
 			maxDigitWidth: input.maxDigitWidth,
+			lineNumbersMaxDigitWidth: input.lineNumbersMaxDigitWidth ?? input.maxDigitWidth,
 			pixelRatio: input.pixelRatio,
 			glyphMarginDecorationLaneCount: 1,
 		});
@@ -248,6 +250,76 @@ suite('Editor ViewLayout - EditorLayoutProvider', () => {
 		});
 	});
 
+	test('EditorLayoutProvider line numbers font size scales width', () => {
+		doTest({
+			outerWidth: 200,
+			outerHeight: 100,
+			showGlyphMargin: false,
+			lineHeight: 10,
+			showLineNumbers: true,
+			lineNumbersMinChars: 2,
+			lineNumbersDigitCount: 3,
+			lineNumbersMaxDigitWidth: 8,
+			lineDecorationsWidth: 10,
+			typicalHalfwidthCharacterWidth: 8,
+			maxDigitWidth: 10,
+			verticalScrollbarWidth: 0,
+			horizontalScrollbarHeight: 0,
+			scrollbarArrowSize: 0,
+			verticalScrollbarHasArrows: false,
+			minimap: false,
+			minimapSide: 'right',
+			minimapRenderCharacters: true,
+			minimapMaxColumn: 150,
+			pixelRatio: 1,
+		}, {
+			width: 200,
+			height: 100,
+
+			glyphMarginLeft: 0,
+			glyphMarginWidth: 0,
+			glyphMarginDecorationLaneCount: 1,
+
+			lineNumbersLeft: 0,
+			lineNumbersWidth: 24,
+
+			decorationsLeft: 24,
+			decorationsWidth: 10,
+
+			contentLeft: 34,
+			contentWidth: 166,
+
+			minimap: {
+				renderMinimap: RenderMinimap.None,
+				minimapLeft: 0,
+				minimapWidth: 0,
+				minimapHeightIsEditorHeight: false,
+				minimapIsSampling: false,
+				minimapScale: 1,
+				minimapLineHeight: 1,
+				minimapCanvasInnerWidth: 0,
+				minimapCanvasInnerHeight: 100,
+				minimapCanvasOuterWidth: 0,
+				minimapCanvasOuterHeight: 100,
+			},
+
+			viewportColumn: 20,
+			isWordWrapMinified: false,
+			isViewportWrapping: false,
+			wrappingColumn: -1,
+
+			verticalScrollbarWidth: 0,
+			horizontalScrollbarHeight: 0,
+
+			overviewRuler: {
+				top: 0,
+				width: 0,
+				height: 100,
+				right: 0
+			}
+		});
+	});
+
 	test('EditorLayoutProvider 2', () => {
 		doTest({
 			outerWidth: 900,

src/vs/monaco.d.ts

@@ -3291,6 +3291,10 @@ declare namespace monaco.editor {
 		 * Defaults to 5.
 		 */
 		lineNumbersMinChars?: number;
+		/**
+		 * Controls the font size for line numbers in pixels. Use 0 to inherit the editor font size.
+		 */
+		lineNumbersFontSize?: number;
 		/**
 		 * Enable the rendering of the glyph margin.
 		 * Defaults to true in vscode and to false in monaco-editor.
@@ -5222,18 +5226,19 @@ declare namespace monaco.editor {
 		inertialScroll = 158,
 		inlayHints = 159,
 		wrapOnEscapedLineFeeds = 160,
-		effectiveCursorStyle = 161,
-		editorClassName = 162,
-		pixelRatio = 163,
-		tabFocusMode = 164,
-		layoutInfo = 165,
-		wrappingInfo = 166,
-		defaultColorDecorators = 167,
-		colorDecoratorsActivatedOn = 168,
-		inlineCompletionsAccessibilityVerbose = 169,
-		effectiveEditContext = 170,
-		scrollOnMiddleClick = 171,
-		effectiveAllowVariableFonts = 172
+		lineNumbersFontSize = 161,
+		effectiveCursorStyle = 162,
+		editorClassName = 163,
+		pixelRatio = 164,
+		tabFocusMode = 165,
+		layoutInfo = 166,
+		wrappingInfo = 167,
+		defaultColorDecorators = 168,
+		colorDecoratorsActivatedOn = 169,
+		inlineCompletionsAccessibilityVerbose = 170,
+		effectiveEditContext = 171,
+		scrollOnMiddleClick = 172,
+		effectiveAllowVariableFonts = 173
 	}
 
 	export const EditorOptions: {
@@ -5320,6 +5325,7 @@ declare namespace monaco.editor {
 		lineHeight: IEditorOption<EditorOption.lineHeight, number>;
 		lineNumbers: IEditorOption<EditorOption.lineNumbers, InternalEditorRenderLineNumbersOptions>;
 		lineNumbersMinChars: IEditorOption<EditorOption.lineNumbersMinChars, number>;
+		lineNumbersFontSize: IEditorOption<EditorOption.lineNumbersFontSize, number>;
 		linkedEditing: IEditorOption<EditorOption.linkedEditing, boolean>;
 		links: IEditorOption<EditorOption.links, boolean>;
 		matchBrackets: IEditorOption<EditorOption.matchBrackets, 'always' | 'never' | 'near'>;