Bug 1861671 - Improve macOS non-native menu styling. r=desktop-theme-…

…reviewers,dao

This matches more modern macOS versions. Mostly visible in the <select>
popup by default, but you can see it more obviously with
widget.macos.non_native_menus.enabled=false.

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

toolkit/themes/osx/global/menu.css

@@ -55,10 +55,9 @@ menubar > menu[_moz-menuactive="true"] {
 }
 
 menubar > menu[_moz-menuactive="true"][open="true"] {
-  appearance: auto;
-  -moz-default-appearance: menuitem;
-  -moz-font-smoothing-background-color: -moz-mac-active-menuitem;
   color: -moz-menuhovertext;
+  background-color: -moz-menuhover;
+  -moz-font-smoothing-background-color: -moz-mac-active-menuitem;
 }
 
 /* Internal content  */
@@ -79,10 +78,6 @@ menupopup > menucaption {
   max-width: 42em;
 }
 
-menuitem[customoptionstyling="true"] {
-  appearance: none;
-}
-
 /* menu/menuitems in menulist popups */
 
 menulist > menupopup {
@@ -98,20 +93,15 @@ menulist > menupopup > menu {
 
 /* checked menuitems */
 
-:not(menulist) > menupopup > menuitem:is([checked="true"], [selected="true"]) {
-  appearance: auto;
-  -moz-default-appearance: checkmenuitem;
-}
-
-menulist > menupopup > menuitem {
+menupopup > menuitem {
   padding-inline: 0;
 }
 
 /* We only show the ::before pseudo-element, but we'd like the spacing to be
  * symmetric, so we render an invisible checkmark on both sides in order to
  * reserve the right amount of space. */
-menulist > menupopup > menuitem::after,
-menulist > menupopup > menuitem::before {
+menupopup > menuitem::after,
+menupopup > menuitem::before {
   content: '\2713'; /* a checkmark */
   display: inline-block;
   vertical-align: middle;
@@ -120,6 +110,6 @@ menulist > menupopup > menuitem::before {
   padding-inline: 4px;
 }
 
-menulist > menupopup > menuitem:is([checked="true"], [selected="true"])::before {
+menupopup > menuitem:is([checked="true"], [selected="true"])::before {
   visibility: inherit;
 }

toolkit/themes/shared/menu-shared.css

@@ -94,17 +94,14 @@ menucaption {
   flex-shrink: 0;
   list-style-image: none;
   max-width: 42em;
+  -moz-font-smoothing-background-color: -moz-mac-menuitem;
 
   @media (-moz-platform: linux) {
     padding: 4px 6px;
   }
 
   @media (-moz-platform: macos) {
-    appearance: auto;
-    -moz-default-appearance: menuitem;
-    -moz-font-smoothing-background-color: -moz-mac-menuitem;
     padding: 2px 21px;
-    border-radius: 0;
   }
 }
 

toolkit/themes/shared/popup.css

@@ -15,9 +15,9 @@ panel {
   min-width: 1px;
   --panel-background: Menu;
   --panel-color: MenuText;
-  --panel-padding-block: 0;
+  --panel-padding-block: 4px;
   --panel-padding: var(--panel-padding-block) 0;
-  --panel-border-radius: 0;
+  --panel-border-radius: 4px;
   --panel-border-color: ThreeDShadow;
   --panel-width: initial;
 
@@ -36,11 +36,6 @@ panel {
     }
   }
 
-  @media (-moz-platform: windows) {
-    --panel-border-radius: 4px;
-    --panel-padding-block: 4px;
-  }
-
   @media (-moz-platform: linux) or (-moz-platform: windows) {
     /* To account for the box-shadow below */
     --panel-shadow-margin: 4px;
@@ -107,14 +102,8 @@ panel {
 }
 
 menupopup {
-  @media (-moz-platform: linux) or (-moz-platform: windows) {
-    /* Also apply the padding in the inline axis for menus */
-    --panel-padding: var(--panel-padding-block);
-  }
-
-  @media (-moz-platform: macos) {
-    --panel-padding-block: 4px;
-  }
+  /* Also apply the padding in the inline axis for menus */
+  --panel-padding: var(--panel-padding-block);
 
   @media (-moz-platform: windows) {
     > menu,