Bug 1860385 - Clean up menulist styling. r=desktop-theme-reviewers,dao

* Rather than inheriting the native attribute, use :host([native]).
 * Remove unused background-color from native rules (background doesn't
   show because of native appearance).
 * Remove unnecessary !important.
 * Refactor high contrast backgrounds on Windows to avoid !important.
 * Make high contrast on windows not alter sizing.
 * Remove default namespaces. This sheet applies in a shadow tree, so
   there's no random stuff.

Depends on D191561

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

toolkit/content/widgets/menulist.js

@@ -87,12 +87,10 @@
 
     static get inheritedAttributes() {
       return {
-        "#label-box": "native",
-        image: "src=image,native",
-        "#label": "value=label,crop,accesskey,highlightable,native",
-        "#highlightable-label":
-          "text=label,crop,accesskey,highlightable,native",
-        dropmarker: "disabled,open,native",
+        image: "src=image",
+        "#label": "value=label,crop,accesskey",
+        "#highlightable-label": "text=label,crop,accesskey",
+        dropmarker: "disabled,open",
       };
     }
 

toolkit/themes/linux/global/menulist.css

@@ -4,19 +4,10 @@
 
 @import url("chrome://global/skin/menulist-shared.css");
 
-@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
-
-label {
-  margin: 1px 3px;
-}
-
-:host([native])  {
-  appearance: auto;
-  -moz-default-appearance: menulist;
+:host([native]) {
   margin: 2px 4px;
   color: -moz-DialogText;
   font: menu;
-  text-shadow: none;
 }
 
 :host([native]:not([disabled="true"]):hover) {
@@ -28,20 +19,10 @@ label {
   color: -moz-buttonactivetext;
 }
 
-:host([native][disabled="true"]) {
-  color: GrayText;
+:host([native]) label {
+  margin: 1px 3px;
 }
 
-/* Label box */
-
-#label-box[native] {
-  align-items: center;
-  justify-content: center;
-  color: inherit;
-}
-
-/* Dropmarker */
-
-dropmarker[native] {
+:host([native]) dropmarker {
   display: none;
 }

toolkit/themes/osx/global/menulist.css

@@ -4,44 +4,20 @@
 
 @import url("chrome://global/skin/menulist-shared.css");
 
-@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
-
-label:not([native]) {
-  margin: 0 3px;
-}
-
 :host([native]) {
-  appearance: auto;
-  -moz-default-appearance: menulist;
   margin: 5px 2px 3px;
   min-height: 20px;
   color: -moz-DialogText;
-  text-shadow: none;
-  padding: unset;
 }
 
-:host([native][disabled="true"]) {
-  color: GrayText;
-}
-
-:host([native][disabled="true"]) > dropmarker {
-  padding-inline-start: 7px !important;
-}
-
-/* Label box */
-
-#label-box[native] {
-  align-items: center;
-  justify-content: center;
+:host([native]) #label-box {
   margin-bottom: 1px;
 }
 
-label[native] {
-  margin: 1px 3px !important;
+:host([native]) label {
+  margin: 1px 3px;
 }
 
-/* Dropmarker */
-
-dropmarker[native] {
+:host([native]) dropmarker {
   display: none;
 }

toolkit/themes/shared/menulist-shared.css

@@ -2,7 +2,15 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
-@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
+:host([native]) {
+  appearance: auto;
+  -moz-default-appearance: menulist;
+  text-shadow: none;
+}
+
+:host([native][disabled="true"]) {
+  color: GrayText;
+}
 
 :host(:not([native])) {
   appearance: none;
@@ -40,32 +48,33 @@
 #label-box {
   min-width: 0;
   pointer-events: none;
-}
-
-#label-box:not([native]) {
   align-items: center;
   justify-content: center;
-  font-weight: 600;
+
+  :host(:not([native])) & {
+    font-weight: 600;
+  }
 }
 
 dropmarker {
   pointer-events: none;
+
+  :host(:not([native])) & {
+    display: flex;
+    appearance: none;
+    width: 12px;
+    height: 12px;
+    list-style-image: url(chrome://global/skin/icons/arrow-down.svg);
+    -moz-context-properties: fill;
+    fill: currentColor;
+  }
 }
 
-dropmarker:not([native]) {
-  display: flex;
-  appearance: none;
-  width: 12px;
-  height: unset;
-}
-
-dropmarker:not([native])::part(icon) {
-  list-style-image: url(chrome://global/skin/icons/arrow-down.svg);
-  -moz-context-properties: fill;
-  fill: currentColor;
-}
-
-#highlightable-label:not([highlightable="true"]),
-#label[highlightable="true"] {
+:host(:not([highlightable])) #highlightable-label,
+:host([highlightable]) #label {
   display: none;
 }
+
+label {
+  margin: 0 3px;
+}

toolkit/themes/windows/global/menulist.css

@@ -4,55 +4,27 @@
 
 @import url("chrome://global/skin/menulist-shared.css");
 
-@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
-
-label {
-  margin: 0 3px;
-}
-
 :host([native]) {
-  appearance: auto;
-  -moz-default-appearance: menulist;
   margin: 2px 4px;
   color: FieldText;
-  text-shadow: none;
 }
 
-:host([native][disabled="true"]) {
-  background-color: -moz-Dialog;
-  color: GrayText;
+@media (prefers-contrast) {
+  :host([native]:not([open="true"]):focus) > #label-box {
+    background-color: SelectedItem;
+    color: SelectedItemText;
+  }
 }
 
-/* Label box */
-
-#label-box[native] {
-  align-items: center;
-  justify-content: center;
-}
-
-:host([native]:not([open="true"]):focus) > #label-box {
-  background-color: SelectedItem;
-  color: SelectedItemText;
-}
-
-:host([native]:not([open="true"]):-moz-focusring) > #label-box {
+:host([native]:not([open="true"]):focus-visible) > #label-box {
   outline: var(--default-focusring);
 }
 
-
-@media not (prefers-contrast) {
-  #label-box[native] {
-    background-color: transparent !important;
-    color: inherit !important;
-  }
-
-  image[native],
-  label[native] {
-    margin-block: -1px !important;
-  }
-
-  dropmarker[native] {
-    margin-top: -2px;
-    margin-inline: 3px -3px;
-  }
+:host([native]) :is(image, label) {
+  margin-block: -1px;
+}
+
+:host([native]) dropmarker {
+  margin-top: -2px;
+  margin-inline: 3px -3px;
 }