Better action hover feedback

[joaomoreno]

This PR fixes #120226

Unsurprisingly, thanks to the magic power of CSS, this was wayyyy more work than expected, since people override CSS all the time, especially for something as popular as the action bar. Calling our owners of areas where I touched a lot of CSS (workbench actions, search, extensions) to do a good smoke test around the actions. Thanks! 🙏

This PR also makes sure the hover feedback stays visible even while the dropdown menu of the ... toolbar action is open.

[miguelsolorio]

🥳 This is awesome, so stoked to finally see this come through! I'm seeing some funny things in a couple of areas though not sure how much of that falls on to you for fixing them but here they are:

Extension icons

They appear to render oddly (maybe because of the bg masking that happens on those icons?), these are GitLens icons:

SCM

Inline actions are shifted down just a tad bit and lose some of the rounded corners

Notebook actions

Run button has shifted below

And add cell toolbar, might be nice to have an option to disable the hover or style it differently for theses:

Settings

Gear items is cut off from TOC on the left

Problems

Expand/collapse icon is shifted a bit

Lightbulb icon has a little cut off

Extensions

Install actions are now rounded

Search

Replace all actions is larger

[roblourens]

Thanks for doing that testing @misolori! @joaomoreno let me know if you want me to help fix the buttons in my areas, some of my usages are a little atypical.

[joaomoreno]

Fantastic findings @misolori, I've pushed fixes for pretty much everything! Also tweaked some other small details. Ready for a second smoke test round! 💪

And add cell toolbar, might be nice to have an option to disable the hover or style it differently for theses:

I removed the border radius but left the background hover decoration, thought it looked good, let me know if you feel otherwise.

Gear items is cut off from TOC on the left

Oh that's interesting. I couldn't find a nice way to fix this. The gear icon simply moves 22px to the left and ends up in the TOC region... @roblourens can you jump in and make a good fix here? I've tried reducing the gear hover decoration padding to minimum, but I can't make it fit nicely, especially if the settings rows have background hover color, eg Dark+.

[miguelsolorio]

💪 This is great progress! As-is I'd merge this on, there's a few minor polish items we can tackle later:

Open editors close button hover is not quite 🔲

Problems filter: wondering if items inside of inputs should have a reduced padding to fit nicely?

Quick actions light bulb in problems panel is off a bit

[roblourens]

I can fix it, we just can't have the two parts as close to each other as they are right now. The settings button feedback looks a lot larger than other buttons though, should we trim it down to look more like toolbar buttons, or does it need to be larger since it stands on it's own?

I also noticed that the feedback is missing from the other buttons in search - ... and the buttons inside input boxes

[joaomoreno]

💪 This is great progress! As-is I'd merge this on, there's a few minor polish items we can tackle later:

Just tackled! ✔️

I also noticed that the feedback is missing from the other buttons in search - ... and the buttons inside input boxes

Yeah those aren't action bars, so they don't get it. Keeping that separate.

[sandy081]

Thanks @misolori for also smoke testing extensions view.