an option for more compact inlay hints

[jhgg]

rust-analyzer recently switched to using LSP inlay hints, which render using vscode's inlay hint renderer. with this involves a change in design, and most notably, an introduction of some slight padding around the inlay hint.

in rust-analyzer, inlay hints where it make sense try to look like the actual inferred type definition in many cases, for example:

let i = String::from("hello");

Might insert the following inlay hint:

let i: String = String::from("hello");
     ^^^^^^^^

In vscode today, however, there is some awkward padding around this:

In an older rust-analyzer build, this used to look like (taken from r-a's github page which still shows the old style.)

An effort can be made to try to reduce the visual impact of the inlay hints by setting editorInlayHint.background and editorInlayHint.foreground - however, this still does not solve the issue of the awkward padding box that is now hidden:

This suffers from odd padding on the left/right side, and the bottom.

It would be really much appreciated if vscode could support a "compact" display style option which would remove the padding, border radius and vertical alignment.

The "compact" version might look like this (still probably a pixel or two off, crafted in mspaint..., but should be enough to show the idea)

I would be happy to implement this feature too if pointed in the right direction!

[jrieken]

Paddings are computes here. Happy to receive a PR but we should first agree and what's supposed to happen. The padding is mostly because inlay have a background colour and rounded corners. Remove all padding with that looks slightly odd... I like the idea of subtle inlay hints! What would be the best way to enable that? I know that extension authors gravitate towards an API that enables this for all users of their language but there is also an argument for making this a user setting. That puts users into control and allows them to have uniform inlay hints across languages.

[jrieken]

/cc @misolori for input/ideas

[miguelsolorio]

I think the problem with removing the background is this will interfere with inline suggestions that almost use the same styling:

I'm down for adding more space from between the inlay hint and text to allow it to breathe more but the older rust-analyzer build example doesn't look good IMO (which can be subjective).

[jhgg]

I think the problem with removing the background is this will interfere with inline suggestions that almost use the same styling:

I think this is fair, however, by changing the font contrast or color, it'd meet my needs in an unambiguous way. I actually do not use the inline suggestions feature at all, and find it very annoying (gave GH copilot a shot, found it way too distracting.)

but the older rust-analyzer build example doesn't look good IMO (which can be subjective).

Definitely subjective. I find r-a's legacy inlay hint style to be "best in class" - it's not too visually distracting, and actually is for the most part for type hints, valid rust syntax, which makes it flow really well when I'm reading code.

---

My proposal is to add this as an option, where one can toggle, that will turn off the background for inlay hints, and remove the padding. This would only remove the outer padding, and not the padding requested in the inlay hint itself (via InlayHint.padding{Left,Right}). This would be specified by the user and not the language server. This will make the inlay hints more subtle and reduce the visual noise on the editor when hints are displayed. This should be a user level setting that you can set, additionally, within language blocks in the user config, so for example, if I just wanted to apply this to rust, I could do { "[rust]": { "editor.inlayHints.displayStyle": "subtle" } } for example.

[TheV360]

I'm using Rust Analyzer in VS Code and I feel inlay hints would greatly benefit from an option to disable padding / an option to make inlay hints more subtle. I opened the editor today to find the inlay hints looking like this by default:

(using the theme Gruvbox Dark Hard)

The font is misaligned from the character grid due to two factors:

• the hints' font size is a percentage smaller than the editor's font size by default (able to be fixed with "editor.inlayHints.fontSize")
• the hints have padding that bumps them off the character grid (not able to be fixed without inspect-element style modifications)

After changing my color customization settings, I got the hints to look somewhat like the old Rust Analyzer hints:

And after removing these three CSS rules... (vertical-align, padding, and border-radius)

...I got it to look how it was before:

My current configuration doesn't use background colors (they're just set to transparent) but if there was the option to remove the padding and set a background color, I'd expect the result to look like TODO Highlight's... highlighted TODO comments:

[jhgg]

Thinking about this more, and in response to the above feedback, perhaps it should be a "compact" mode for inlay hints which disable those 3 CSS properties. Users can decide if they want to change the background color or not.