Add hover highlight background to editor MenuButtons

[RobProductions]

Describe the project you are working on

UX for the Godot Editor (PR contributions)

Describe the problem or limitation you are having in your project

Currently in the editor, it's hard to tell the difference between a button that the mouse is hovering over and a button that isn't being hovered over. I noticed there is a slight brightness change to the "foreground element", but it's too small of a difference to tell at a glance, which might impact the accessibility of the UI.

To show an example, here it is what it looks like when my mouse is over the "View" button:

As you can see, it's nearly identical to way the "Transform" button's text is rendered.

Describe the feature / enhancement and how it helps to overcome the problem or limitation

A common UI trend I've noticed nowadays is to show some sort of changing background color when hovering over a selectable item; just look at Github's own "Issues" and "Pull Requests" buttons. I'm not one to say Godot's UI has to follow convention, but in this case I think it will help with clarity. Here's what it could look like with examples for 4 different buttons:

This is a simple white box with alpha to 14%. This not only helps the user to know that the item is highlighted properly, but it also shows them exactly what the "hitbox" is for each clickable button. I also believe it fits Godot's established theming because Tabs actually already have this feature (mouse over the "History" tab):

So I think it would be nice to see this applied to text/icon buttons for consistency as well.

Describe how your proposal will work, with code, pseudo-code, mock-ups, and/or diagrams

I'm not that familiar with the source code yet so correct me if I'm wrong, but this would either be something to adjust in the Editor's theme (pretty sure that's a thing) or, if the editor controls don't support background colors on highlight, the UI layout for them may need to be reworked a bit (maybe by placing a button underneath a text and leaving its default color to be transparent?). This might be something to get some direction on from someone more experienced haha.

If this enhancement will not be used often, can it be worked around with a few lines of script?

N/A

Is there a reason why this should be core and not an add-on in the asset library?

It might be possible to override the styling of these buttons with a plugin, but since it effects editor UX and accessibility I think everyone should get this enhancement.

I'm definitely willing to look into this if it sounds helpful for everyone, but some advice on how best to approach it would be appreciated! Also let me know if you have any suggestions for different colors/transparency levels in the mockups I showed above. Thanks :)

[RobProductions]

Forgot to mention that it might help pave the way for #8264 since I saw some clever use of highlighting there as well. Also, it's a similar idea to #7160 but applied to the editor buttons instead of the scene view. I'm sure there will be plenty more editor UI ideas but I'm hoping this kind of thinking helps in the usability department at least :)

[Calinou]

• Related to Implement PopupButton Control as replacement for wrongly used MenuButtons #6115.

See also godotengine/godot#72418, although that PR no longer affects the editor in any way.

godotengine/godot#45607 initially had hover effects for MenuButtons but I had to remove them for some reason I don't remember.

[RobProductions]

Started looking into this and now that I'm learning about the Editor theme it's actually pretty easy to make these sorts of adjustments with just a few lines of code, so here's a preview of that in action:

One question that I have for @Calinou is that while playing around with the colors I found a way to restore the PopupMenu Item hover background color which you originally had in godotengine/godot#45607 . It looks like this:

I kind of like this as it gives a bit more contrast to the text, is similar to the UI I've seen elsewhere, and is maybe more readable than the current bright highlight? Was there a specific reason, like consistency, that this was changed to how it looks now? If so I don't want to mess with it but just thought I might as well ask what the consensus is for that.

[Calinou]

I kind of like this as it gives a bit more contrast to the text, is similar to the UI I've seen elsewhere, and is maybe more readable than the current bright highlight? Was there a specific reason, like consistency, that this was changed to how it looks now?

I made the hover highlight bright for consistency with buttons (which also use a bright highlight). The idea is that hover highlights should be brighter than usual on a dark theme, and darker than usual on a light theme.

[RobProductions]

Gotcha, I'll leave it as is then. One thing that's tripping me up now is the fact that the PopupMenu "activate button" (i.e. the clickable label that causes the panel to appear) doesn't use MenuButton so it's taking a bit longer to track down what is driving the theme for it. But hopefully if I just spend some more time with it I can figure it out :')

EDIT: Maybe this piece of wisdom I found on another thread can lead me down the right trail... will have to play around with this once I look at it again

By default the MenuButton is set to be flat. In this state it ignores the backgrounds of its styleboxes.

[akien-mga]

Implemented by godotengine/godot#86378.