Bug 1696931 - Use even padding in menuitems on OSX. r=mstange

Otherwise with some fonts the menus look off. This doesn't change visual
appearance with the default font, afaict (but I don't have such a good eye so
please double-check).

Maybe we should do this only for the content select dropdown, but then again my
untrained eye doesn't see an issue for other menuitems either so...

Differential Revision: https://phabricator.services.mozilla.com/D107630

toolkit/content/tests/chrome/test_menulist_position.xhtml

@@ -43,11 +43,12 @@ function popupShown()
   if (menulist.selectedItem && navigator.platform.includes("Mac")) {
     let menulistlabel = menulist.shadowRoot.getElementById("label");
     let mitemlabel = menulist.selectedItem.querySelector(".menu-iconic-text");
+    let paddingTop = parseFloat(getComputedStyle(menulist.selectedItem).paddingTop);
 
     ok(isWithinHalfPixel(menulistlabel.getBoundingClientRect().left,
                          mitemlabel.getBoundingClientRect().left),
        "Labels horizontally aligned for index " + index);
-    ok(isWithinHalfPixel(menulistlabel.getBoundingClientRect().top,
+    ok(isWithinHalfPixel(menulistlabel.getBoundingClientRect().top + paddingTop,
                          mitemlabel.getBoundingClientRect().top),
        "Labels vertically aligned for index " + index);
 

toolkit/themes/osx/global/menu.css

@@ -13,7 +13,7 @@ menucaption {
   -moz-box-align: center;
   list-style-image: none;
   -moz-image-region: auto;
-  padding: 0 21px 2px;
+  padding: 2px 21px;
 }
 
 menu[disabled="true"], menuitem[disabled="true"],