Vscode: Add opacity/transparency setting for intellisense suggestions popup

[Rysher]

I could not find any settings relating to it, and no extension adding ability to tweak it, so a built in ability to tweak the pop-up window's opacity will be much appreciated.

if you ask "what is the point?": the pop up sometimes get's in the way of adjacent code which i need to see even when a popup is being displayed, this adjacent code might be above, below or in the same line in which i'm writing so adjusting the pop-up's position or delay will not suffice.

thank you!

[ramya-rao-a]

cc @stevencl

[racedaemon]

A good solution for this would be to press Ctrl when the IntelliSense popup is opened to make it transparent. If i remember correctly Visual Studio also does this. It is a small thing but i had issues with the popup covering code i needed a lot of times and this feature would make coding a little more smooth.

[SonnyBrooks]

Any progress on this? I haven't been able to find anything to help me out with this yet. Having Intellisense being opaque is getting frustrating. Super simple example of what this looks like:

Intellisense makes it tough to reference any code below.

[ramya-rao-a]

@SonnyBrooks No progress on this yet. But PRs are welcome.

If anyone is interested, the place to look at is the suggestWidget

[SonnyBrooks]

For anyone looking into this - You can add code in the onThemeChange function to change the opacity of the suggestWidget. See the function here.

You can change the suggestWidget's opacity by using the following sample code:
this.listElement.style.opacity = '0.25'.

You'll probably need to add a settings variable so users can customize opacity of the suggestWidget to their liking. I haven't had the chance to hunt down how to do that yet.

Thank you @ramya-rao-a for your guidance!

[ramya-rao-a]

@joaomoreno If this feature is indeed driven by settings, would you prefer a single setting to drive the suggest, hover and signature help widget?

I cant imagine someone wanting different opacities for these 3 widgets

[joaomoreno]

@ramya-rao-a I think a common setting would make more sense. :+1:

[SonnyBrooks]

Great insight! I'll dig into the code to see how to make a common setting. Do you have any recommendations on where to start my journey?

[ramya-rao-a]

@SonnyBrooks For the auto-completion, the place to look at is the suggestWidget

Take suggestFontSize for example, follow all the places it is referenced/used to see how to add/use a new configuration setting.

Then, you can use the same setting in ParameterHintsWidget and HoverWidget

[GustavoASC]

I believe we don't need to develop this setting anymore since we can configure suggestion background color with _editorSuggestWidget.background_. The result is something like this:

[Rysher]

@GustavoASC not seeing it anywhere.
running on Arch linux, vsCode version 1.43.0. is it in the GUI settings menu? what is it called there? and if not, what is the data-type and value-range available to choose when adding it mannually to the settings.json file?

[GustavoASC]

@Rysher It's partially available on GUI settings menu and is documented here.

You can configure a string representing the RGB and the _Alpha_ value which indicates the opacity/transparency over the image.

The _Alpha_ is defined by the last two characters on the string.

"workbench.colorCustomizations": {
    "editorSuggestWidget.background": "#21252BAA"
}   

Here is a GIF showing how to change this value:

Hope it helps! :smiley:

[Rysher]

@GustavoASC YES!!!! FIANLLY! thank you so much!

[GustavoASC]

@Rysher @octref Do we still need an additional setting for this? I believe we can close this issue, if you agree.

[Rysher]

@GustavoASC I would only suggest (pun intended ^_^ ) that a GUI menu option be added for this. I don't know how many people are aware of your JSON naming-scheme or even that a web page listing all of this (like the link you provided in your initial comment) even exists...aside from this - as far as I'm concenred you can close this thread :)

[octref]

Suggest widget would need to show either above or below, thus hiding some code.
I don't think opacity is a good solution. I don't see us doing it. If you still want opacity nevertheless use workbench.colorCustomizations.