Settings: Wrench icon is stalking me

[isidorn]

Refs: #57304

Move the mouse over the settings in the settings editor. Notice there is a wrench icon which is stalking your every move. I find this very distracting. Clicking on the wrench icon just triggers a context menu, so my recommendation is to get rid of the wrench and have those actions as right click context menu actions -> especially since the regular user can live without those advanced actions

An alternative is to at least show it with a slight delay so it is not so frantic. But I would prefer that we remove it alltogether.

fyi @misolori @bpasero

[miguelsolorio]

We did think about using right-click only but that isn't very discoverable and it's odd to right-click on a non-list item. Also, the icon is needed for the actions to be accessible (via keyboard) and help be discoverable.

To address the noise, we could look at lowering the opacity and then changing it back on hover.

[isidorn]

You can always make those actions accessible via keyboard by having custom keybindings for them so I do not buy that argument.
Right click is not discovarble but I do not see that as a problem since these actions are not important.
I understand this is just my preference.

@bpasero what you think?

[bpasero]

My reaction was actually not so bad for the wrench because we use that concept of showing action-icons on hover pretty much everywhere where we hide them in the first place (list, tree, split view header). I thought this was a well enough established pattern that it works for settings too. I would stay away from doing some opacity tricks because that makes the behaviour inconsistent with other places.

One thing we could think about is do something the editor does for the change decorations: when you get close to the blue bar it grows and you can click it for further actions. Would that maybe work?

[miguelsolorio]

Another idea is to do something like we do with code folding and fade in the icon when you're near the blue bar (with a slight delay)?

[roblourens]

If it's not useful, I'll remove it but I'd miss it. In the editor we click the blue bar for actions related to the change itself but I don't think that's a good analogy for this. You can still use the context menu on settings that aren't modified.

[roblourens]

Changing this to only show the wrench when you hover the margin area or select the setting. I think this is nicer...

[isidorn]

It is better than before -> verified
However I would personally still prefer if we show and hide it with a slight delay so it becomes gentler and not so frantic. Notice how the folding decorations are done in the gif @misolori attached

[roblourens]

Do you know what the timing/transition function details of the folding decorations are, @isidorn @misolori ?

[isidorn]

Maybe @aeschli knows

[miguelsolorio]

@roblourens looks like it's just 0.5s https://github.com/Microsoft/vscode/blob/b96ac3e1ddb273f1998ba2e5e0426f0d1efdc232/src/vs/editor/contrib/folding/folding.css#L13