1691152 - Update some Proton-specific styles for the AppMenu and other menu-like panels

Status: RESOLVED FIXED

(Firefox :: Menus, defect, P1)

Description

[Mike Conley (:mconley) (:⚙️)]

We added some preliminary styles in bug 1688744 to get a shovel in the ground here, but it's time to get serious about things like focus, hover, active, and disabled colours. We should also start looking closely at the things like padding and spacing in and around menu items.

As usual, we need to be careful here. Hard-coded pixel-values can have a tendency to not behave well when the user has non-default DPI settings, or when they're in a locale where strings tend to be a bit longer (like Germany). We also need to ensure the styles are RTL-compatible.

Test test longer strings, one can use the accented pseudolocale by setting intl.l10n.pseudo to the string accented. Similarly, RTL can be tested by setting intl.l10n.pseudo to string bidi.

To get us started:

• We were really aggressive about suppressing menu icons with this blanket rule. This can probably be simplified by removing the subviewbutton-iconic class from all of the AppMenu items that shouldn't have icons in the new menu. Especially for submenus, we might have to do this in script where the menu items are created dynamically. Once we do that, we can probably remove this original rule, and that should hopefully give us things like the History and Bookmark site favicons back.
• AppMenu and other panel menu items should have the following colour values:
  • Light / Default mode (NOTE: these colours are likely going to be used for our toolbar buttons as well, so the CSS variables that we use should be named and placed such that they can be used for both)
    • Focused: box-shadow: 0px 2px 6px rgba(58, 57, 68, 0.2), border-radius: 8px;
    • Hover: background-color: rgba(224,224,230,1);
    • Active: background-color: rgba(207,207,216,1);
    • Disabled: color: rgba(21,20,26,0.4);
• The separator directly above "New Tab" is special. It should have a linear gradient with a CSS variable name called "proton-zap" or something. The value should be linear-gradient(90deg, #9059FF 0%, #FF4AA2 52.08%, #FFBD4F 100%). Unfortunately, one can't just set a linear-gradient as a border colour and call it a day - but we do have border-image, which can help us here. Something like this: border-image: var(--zap) 1; should work for that particular separator. I think the 1 slice value is fine there since this is a 1px height border.
• The distance between the border edge of each menu item and the edge of the panels should be 8px
• The distance between the edges of the toolbar separators and the edges of the panel should be 8px

There's plenty more to do, but let's start here.

Comment 2

[Mike Conley (:mconley) (:⚙️)]

Attachment: Bug 1691152 - Apply latest Proton stylings to AppMenu. r?ewright!

Depends on D104749

Comment 3

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/e03221c8abfc
Apply latest Proton stylings to AppMenu. r=ewright

Comment 4

[Cristian Brindusan [:cbrindusan]]

https://hg.mozilla.org/mozilla-central/rev/e03221c8abfc