Bug: Update some Proton-specific styles for the AppMenu and other menu-like panels
Status: RESOLVED
Priority: P1
Resolution: FIXED
Created: 2021-02-05 23:19:16+00:00
Resolved: 2021-02-23 13:12:11+00:00

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](https://searchfox.org/mozilla-central/rev/400614dec36182ba6d0bec2a18044c47df960a1f/browser/themes/shared/customizableui/panelUI.inc.css#1169-1171). 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](https://searchfox.org/mozilla-central/rev/400614dec36182ba6d0bec2a18044c47df960a1f/browser/themes/shared/customizableui/panelUI.inc.css#1169-1171), 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`](https://developer.mozilla.org/en-US/docs/Web/CSS/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](https://developer.mozilla.org/en-US/docs/Web/CSS/border-image-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.