1689010 - [macOS] Update the styling of the acceltext of menu items

Status: RESOLVED FIXED

(Thunderbird :: Theme, enhancement, P5)

Description

[Alessandro Castellani [:aleca]]

Attachment: Screenshot from 2021-01-26 15-30-30.png

Our menu items have the acceltext attribute which is super handy, as it shows the accelerator (keyboard shortcut) assigned to the specific item.

The acceltext currently inherits the style of the menu item, which makes the whole menu pretty cramped and visually jarring when manu items are listed with each item showing the accelerator.

I propose to use a pretty common approach used in other apps and Linux OSs, which is simply decreasing the font size and opacity of the acceltext to create a better visual separation between the 2 elements.

This brings visual benefits as it improves a lot the readability of busy menus, and helps the user to better separate the various elements on the same row.

Comment 1

[Alessandro Castellani [:aleca]]

Attachment: proposal.png

The result with the patch applied.

Comment 2

[Alessandro Castellani [:aleca]]

Attachment: 1689010-acceltext-style.diff

Comment 3

[Richard Marti (:Paenglab)]

Comment on attachment 9199419 [details] [diff] [review]
1689010-acceltext-style.diff

Review of attachment 9199419 [details] [diff] [review]:
-----------------------------------------------------------------

Checked on Windows and Mac. On Mac the main menu isn't affected by this patch as it is drawn by the system. But on context menus and menupopups it works.

::: mail/themes/shared/mail/messenger.css
@@ +1067,5 @@
>  }
> +
> +.menu-accel-container {
> +  opacity: 0.75;
> +  font-size: 0.9rem;

Please use `em` instead of `rem` because on Mac the font would be too small.

Comment 4

[Alessandro Castellani [:aleca]]

Attachment: 1689010-acceltext-style.diff

Thanks for the ui-r+
I also added the styling to make the acceltext full opacity when the menu item is hovered or focused, just like macOS does.

Comment 5

[Magnus Melin [:mkmelin]]

Comment on attachment 9199566 [details] [diff] [review]
1689010-acceltext-style.diff

What other linux applications use this approach? What other on windows? I think we should use what's normal on the respective platforms.
Not sure I like it or not, but it's nicer than I would have guessed ;)

The app-menu items are not covered it seems.

Comment 6

[Alessandro Castellani [:aleca]]

Definitely we need to improve this and make it consistent with the various OSs.
macOS is the easiest since the styling is consistent everywhere. I'll update the patch to follow that.

For Linux, it mostly depends on the Desktop Environment used, but for what I'm seeing on various GTK distros, the TB menu items are completely ignored other than for the font-family, so we can safely introduce our consistent styling.

Richard, any chance of getting some Windows screenshots to see how the OS handles those accelerators in menus?

The app-menu items are not covered it seems.

I saw a mock-up for the new "Proton" style that Firefox is introducing and it seems they will take care of those, so I was waiting for that.
I'm more than happy to apply the style to those items as well. Consistency is king!

Comment 7

[Richard Marti (:Paenglab)]

Attachment: menu-Windows.png

How the menu of other apps looks on Windows.

Comment 8

[Richard Marti (:Paenglab)]

Attachment: with-patch-Windows.png

TB with patch applied.

Comment 9

[Alessandro Castellani [:aleca]]

Mh, it seems that Windows doesn't style those at all, other than adding extra margin start.
Also, it seems that some apps align those accelerators how they want without respecting the default align-right.

I think this is a good opportunity to implement our own thing:

• Follow the macOS styling
• Add Linux and Windows styling to keep it consistent

Our menus will look way better with a few lines of CSS.

Comment 10

[Alessandro Castellani [:aleca]]

Attachment: 1689010-acceltext-style.diff

Added macOS variation and styled also the main App Menu.
I think this looks very good and helps to remove the sense of clutter when many items have visible accelerators.

Comment 11

[Magnus Melin [:mkmelin]]

Comment on attachment 9199665 [details] [diff] [review]
1689010-acceltext-style.diff

Review of attachment 9199665 [details] [diff] [review]:
-----------------------------------------------------------------

Sorry but I don't think we should deviate from normal platform conventions or Firefox. 
(Still kind of undecided on whether I actually like it or not.)

Comment 12

[Alessandro Castellani [:aleca]]

Sure, that makes sense.
I personally like it a lot, but I'm okay with waiting to see what Firefox does with the new Proton design.

If there are no changes from it, I'll revisit this bug later only for macOS, since the entire OS has a unique and consistent style with its menus.

Comment 13

[Alessandro Castellani [:aleca]]

Richard, we should do this only for macOS since that platform has a specific style for accelerators and we should try to be consistent.
Would you be able to take care of it by repurposing my patch?

Comment 14

[Richard Marti (:Paenglab)]

Attachment: Bug 1689010 - Improve the styling of the acceltext for menu items. r=aleca

Comment 15

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/comm-central/rev/4700716487ed
Improve the styling of the acceltext for menu items. r=aleca