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
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)
box-shadow: 0px 2px 6px rgba(58, 57, 68, 0.2), border-radius: 8px;
- 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.