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.

[miguelsolorio]

perhaps it should be a "compact" mode for inlay hints which disable those 3 CSS properties

I think that makes a lot more sense, though we'd need to make sure the defaults here are visually different from inline suggestions (likely just using a different foreground color).

[jhgg]

Took a stab at implementing this in #145470 - this is my first vscode contribution so no idea if I did it right haha.

[jrieken]

Thanks for far. We are nearing endgame so the PR won't get much attention until after that. Tho, I am unsure if compact inlay hints are user setting or a property of selected hints themselves. Like, do you want some hints to be compact and others not at the same time?

[safasofuoglu]

I arrived here because I got fairly distracted by the inlay hint backgrounds. Thanks for your consideration.

[Z-E-D]

jhgg

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.

I would like to remove padding, but to keep the background.

The background color of inlay hint could be changed by theme anyway.

[jhgg]

I would like to remove padding, but to keep the background.

The current PR decouples the removal of the background from the setting.

Tho, I am unsure if compact inlay hints are user setting or a property of selected hints themselves. Like, do you want some hints to be compact and others not at the same time?

Personally, no. I'd prefer all hints to be compact. But I can't speak for others!

For context, I think basically all of rust-analyzer's inlay hints are better served in compact mode. The team recently added 2 new forms of inlay hints that would look very clunky with the standard style.

See: https://rust-analyzer.github.io/thisweek/2022/03/21/changelog-121.html#new-features - where for the purpose of screenshots, the team actually tried to style them like the old school inlay hints. But if you look closely, you can see the padding issue this issue tries to correct :D

[jrieken]

Reopening for further tweaks and discussions

[jrieken]

FYI - I have removed the setting again, the compact mode is the default for everyone. For now this is a settings-description/schema-only change but so far feedback is positive and I am ready to make "compact" the only possible mode