Merge pull request #145470 from jhgg/feat/inlay-hints-compact-mode

microsoft · Mar 30, 2022 · b9e538d · b9e538d
2 parents b9ba2a6 + 7258272
commit b9e538d
Show file tree

Hide file tree

Showing 3 changed files with 46 additions and 19 deletions.
diff --git a/src/vs/editor/common/config/editorOptions.ts b/src/vs/editor/common/config/editorOptions.ts
@@ -2514,6 +2514,13 @@ export interface IEditorInlayHintsOptions {
 	 * Defaults to editor font family.
 	 */
 	fontFamily?: string;
+
+	/**
+	 * The display style to render inlay hints with.
+	 * Compact mode disables the borders and padding around the inlay hint.
+	 * Defaults to 'standard'.
+	 */
+	displayStyle: 'standard' | 'compact'
 }
 
 /**
@@ -2524,7 +2531,7 @@ export type EditorInlayHintsOptions = Readonly<Required<IEditorInlayHintsOptions
 class EditorInlayHints extends BaseEditorOption<EditorOption.inlayHints, IEditorInlayHintsOptions, EditorInlayHintsOptions> {
 
 	constructor() {
-		const defaults: EditorInlayHintsOptions = { enabled: true, fontSize: 0, fontFamily: '' };
+		const defaults: EditorInlayHintsOptions = { enabled: true, fontSize: 0, fontFamily: '', displayStyle: 'standard' };
 		super(
 			EditorOption.inlayHints, 'inlayHints', defaults,
 			{
@@ -2543,6 +2550,16 @@ class EditorInlayHints extends BaseEditorOption<EditorOption.inlayHints, IEditor
 					default: defaults.fontFamily,
 					markdownDescription: nls.localize('inlayHints.fontFamily', "Controls font family of inlay hints in the editor. When set to empty, the `#editor.fontFamily#` is used.")
 				},
+				'editor.inlayHints.displayStyle': {
+					type: 'string',
+					enum: ['standard', 'compact'],
+					enumDescriptions: [
+						nls.localize('inlayHints.displayStyle.standard', "Renders inlay hints with the default style."),
+						nls.localize('inlayHints.displayStyle.compact', "Renders inlay hints without any padding, and removes the rounded borders."),
+					],
+					default: defaults.displayStyle,
+					description: nls.localize('inlayHints.displayStyle', "Controls the display style of inlay hints.")
+				}
 			}
 		);
 	}
@@ -2555,7 +2572,8 @@ class EditorInlayHints extends BaseEditorOption<EditorOption.inlayHints, IEditor
 		return {
 			enabled: boolean(input.enabled, this.defaultValue.enabled),
 			fontSize: EditorIntOption.clampedInt(input.fontSize, this.defaultValue.fontSize, 0, 100),
-			fontFamily: EditorStringOption.string(input.fontFamily, this.defaultValue.fontFamily)
+			fontFamily: EditorStringOption.string(input.fontFamily, this.defaultValue.fontFamily),
+			displayStyle: stringSet<'standard' | 'compact'>(input.displayStyle, this.defaultValue.displayStyle, ["standard", "compact"])
 		};
 	}
 }

diff --git a/src/vs/editor/contrib/inlayHints/browser/inlayHintsController.ts b/src/vs/editor/contrib/inlayHints/browser/inlayHintsController.ts
@@ -409,7 +409,7 @@ export class InlayHintsController implements IEditorContribution {
 
 
 		//
-		const { fontSize, fontFamily } = this._getLayoutInfo();
+		const { fontSize, fontFamily, displayStyle } = this._getLayoutInfo();
 		const fontFamilyVar = '--code-editorInlayHintsFontFamily';
 		this._editor.getContainerDomNode().style.setProperty(fontFamilyVar, fontFamily);
 
@@ -434,7 +434,6 @@ export class InlayHintsController implements IEditorContribution {
 				const cssProperties: CssProperties = {
 					fontSize: `${fontSize}px`,
 					fontFamily: `var(${fontFamilyVar}), ${EDITOR_FONT_DEFAULTS.fontFamily}`,
-					verticalAlign: 'middle',
 				};
 
 				if (isNonEmptyArray(item.hint.textEdits)) {
@@ -452,20 +451,24 @@ export class InlayHintsController implements IEditorContribution {
 					}
 				}
 
-				if (isFirst && isLast) {
-					// only element
-					cssProperties.padding = `1px ${Math.max(1, fontSize / 4) | 0}px`;
-					cssProperties.borderRadius = `${(fontSize / 4) | 0}px`;
-				} else if (isFirst) {
-					// first element
-					cssProperties.padding = `1px 0 1px ${Math.max(1, fontSize / 4) | 0}px`;
-					cssProperties.borderRadius = `${(fontSize / 4) | 0}px 0 0 ${(fontSize / 4) | 0}px`;
-				} else if (isLast) {
-					// last element
-					cssProperties.padding = `1px ${Math.max(1, fontSize / 4) | 0}px 1px 0`;
-					cssProperties.borderRadius = `0 ${(fontSize / 4) | 0}px ${(fontSize / 4) | 0}px 0`;
-				} else {
-					cssProperties.padding = `1px 0 1px 0`;
+				if (displayStyle === 'standard') {
+					cssProperties.verticalAlign = 'middle';
+
+					if (isFirst && isLast) {
+						// only element
+						cssProperties.padding = `1px ${Math.max(1, fontSize / 4) | 0}px`;
+						cssProperties.borderRadius = `${(fontSize / 4) | 0}px`;
+					} else if (isFirst) {
+						// first element
+						cssProperties.padding = `1px 0 1px ${Math.max(1, fontSize / 4) | 0}px`;
+						cssProperties.borderRadius = `${(fontSize / 4) | 0}px 0 0 ${(fontSize / 4) | 0}px`;
+					} else if (isLast) {
+						// last element
+						cssProperties.padding = `1px ${Math.max(1, fontSize / 4) | 0}px 1px 0`;
+						cssProperties.borderRadius = `0 ${(fontSize / 4) | 0}px ${(fontSize / 4) | 0}px 0`;
+					} else {
+						cssProperties.padding = `1px 0 1px 0`;
+					}
 				}
 
 				addInjectedText(
@@ -529,7 +532,7 @@ export class InlayHintsController implements IEditorContribution {
 			fontSize = (editorFontSize * .9) | 0;
 		}
 		const fontFamily = options.fontFamily || this._editor.getOption(EditorOption.fontFamily);
-		return { fontSize, fontFamily };
+		return { fontSize, fontFamily, displayStyle: options.displayStyle };
 	}
 
 	private _removeAllDecorations(): void {

diff --git a/src/vs/monaco.d.ts b/src/vs/monaco.d.ts
@@ -3732,6 +3732,12 @@ declare namespace monaco.editor {
 		 * Defaults to editor font family.
 		 */
 		fontFamily?: string;
+		/**
+		 * The display style to render inlay hints with.
+		 * Compact mode disables the borders and padding around the inlay hint.
+		 * Defaults to 'standard'.
+		 */
+		displayStyle: 'standard' | 'compact';
 	}
 
 	/**