Bug 1967208 - Fix native menulist styling on Linux and Windows. r=desktop-theme-reviewers,sfoster

Make padding match buttons. Show the dropmarker properly too.

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

UltraBlame original commit: c6a876ea5024c2b4be4e43e22b0bc0abdee9ddad

Author: marco-c

toolkit/themes/linux/global/menulist.css

@@ -3,26 +3,3 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 @import url("chrome://global/skin/menulist-shared.css");
-
-:host([native]) {
-  margin: 2px 4px;
-  color: -moz-DialogText;
-  font: menu;
-}
-
-:host([native]:not([disabled="true"]):hover) {
-  color: -moz-buttonhovertext;
-}
-
-:host([native]:not([disabled="true"]):hover:active),
-:host([native]:not([disabled="true"])[open="true"]) {
-  color: -moz-buttonactivetext;
-}
-
-:host([native]) label {
-  margin: 1px 3px;
-}
-
-:host([native]) dropmarker {
-  display: none;
-}

toolkit/themes/osx/global/menulist.css

@@ -4,20 +4,3 @@
 
 @import url("chrome://global/skin/menulist-shared.css");
 
-:host([native]) {
-  margin: 5px 2px 3px;
-  min-height: 20px;
-  color: -moz-DialogText;
-}
-
-:host([native]) #label-box {
-  margin-bottom: 1px;
-}
-
-:host([native]) label {
-  margin: 1px 3px;
-}
-
-:host([native]) dropmarker {
-  display: none;
-}

toolkit/themes/shared/menulist-shared.css

@@ -6,6 +6,45 @@
   appearance: auto;
   -moz-default-appearance: menulist;
   text-shadow: none;
+  @media (-moz-platform: linux) {
+    font: menu;
+  }
+  @media (-moz-platform: linux) or (-moz-platform: windows) {
+    margin: 2px 4px;
+    color: ButtonText;
+    padding: 2px 3px;
+    border: 1px solid ThreeDLightShadow;
+
+    dropmarker {
+      align-self: stretch;
+    }
+  }
+  @media (-moz-platform: macos) {
+    margin: 5px 2px 3px;
+    min-height: 20px;
+    color: -moz-DialogText;
+
+    #label-box {
+      margin-bottom: 1px;
+    }
+
+    label {
+      margin: 1px 3px;
+    }
+
+    dropmarker {
+      display: none;
+    }
+  }
+}
+
+@media (-moz-platform: linux) or (-moz-platform: windows) {
+  :host([native]:where(:hover)) {
+    color: -moz-buttonhovertext;
+  }
+  :host([native]:where(:hover:active, [open="true"])) {
+    color: -moz-buttonactivetext;
+  }
 }
 
 :host([native][disabled="true"]) {

toolkit/themes/windows/global/menulist.css

@@ -4,26 +4,3 @@
 
 @import url("chrome://global/skin/menulist-shared.css");
 
-:host([native]) {
-  margin: 2px 4px;
-  color: FieldText;
-}
-
-@media (prefers-contrast) {
-  :host([native]:not([open="true"]):focus) > #label-box {
-    background-color: SelectedItem;
-    color: SelectedItemText;
-  }
-}
-
-:host([native]:not([open="true"]):focus-visible) > #label-box {
-  outline: var(--default-focusring);
-}
-
-:host([native]) :is(image, label) {
-  margin-block: -1px;
-}
-
-:host([native]) dropmarker {
-  margin-inline: 3px -3px;
-}