Bug 1697863 - Add preliminary Proton styles for browser UI menulists. r=harry,desktop-theme-reviewers

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

browser/themes/shared/browser-custom-colors.inc.css

@@ -12,7 +12,7 @@
     --buttons-secondary-bgcolor: rgb(240,240,244);
     --buttons-secondary-hover-bgcolor: rgb(224,224,230);
     --buttons-secondary-active-bgcolor: rgb(207,207,216);
-    --buttons-secondary-color: rgb(91,91,102);
+    --buttons-secondary-color: rgb(21,20,26);
     --buttons-box-shadow: transparent;
 
     --focus-outline-color: var(--buttons-primary-button-bgcolor);

toolkit/content/widgets/menulist.js

@@ -69,10 +69,12 @@
 
     static get inheritedAttributes() {
       return {
-        image: "src=image",
-        "#label": "value=label,crop,accesskey,highlightable",
-        "#highlightable-label": "text=label,crop,accesskey,highlightable",
-        dropmarker: "disabled,open",
+        "#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",
       };
     }
 

toolkit/themes/linux/global/jar.mn

@@ -13,7 +13,7 @@ toolkit.jar:
 *  skin/classic/global/findBar.css
 *  skin/classic/global/global.css
 *  skin/classic/global/menu.css
-   skin/classic/global/menulist.css
+*  skin/classic/global/menulist.css
    skin/classic/global/netError.css
    skin/classic/global/popup.css
 *  skin/classic/global/popupnotification.css

toolkit/themes/linux/global/menulist.css

@@ -4,6 +4,53 @@
 
 @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
 
+%include ../../shared/menulist.inc.css
+
+@supports -moz-bool-pref("browser.proton.enabled") {
+label {
+  margin: 1px 3px !important;
+}
+
+:host([native])  {
+  appearance: auto;
+  -moz-default-appearance: menulist;
+  margin: 2px 4px;
+  color: -moz-DialogText;
+  font: menu;
+  text-shadow: none;
+}
+
+: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-gtk-buttonactivetext;
+}
+
+:host([native][disabled="true"]) {
+  color: GrayText;
+}
+
+/* Label box */
+
+#label-box[native] {
+  appearance: auto;
+  -moz-default-appearance: menulist-text;
+  -moz-box-align: center;
+  -moz-box-pack: center;
+  color: inherit;
+}
+
+/* Dropmarker */
+
+dropmarker[native] {
+  display: none;
+}
+} /** END Proton **/
+
+@supports not -moz-bool-pref("browser.proton.enabled") {
 :host {
   appearance: auto;
   -moz-default-appearance: menulist;
@@ -52,3 +99,4 @@ label {
 dropmarker {
   display: none;
 }
+} /** END not Proton **/

toolkit/themes/osx/global/jar.mn

@@ -14,7 +14,7 @@ toolkit.jar:
 * skin/classic/global/findBar.css
 * skin/classic/global/global.css
 * skin/classic/global/menu.css
-  skin/classic/global/menulist.css
+* skin/classic/global/menulist.css
   skin/classic/global/netError.css
   skin/classic/global/popup.css
 * skin/classic/global/popupnotification.css

toolkit/themes/osx/global/menulist.css

@@ -4,6 +4,54 @@
 
 @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
 
+%include ../../shared/menulist.inc.css
+
+@supports -moz-bool-pref("browser.proton.enabled") {
+label:not([native]) {
+  margin: 2px 3px !important;
+}
+
+: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] {
+  appearance: auto;
+  -moz-default-appearance: menulist-text;
+  -moz-box-align: center;
+  -moz-box-pack: center;
+  margin-bottom: 1px;
+}
+
+label[native] {
+  margin: 1px 3px !important;
+}
+
+/* Dropmarker */
+
+dropmarker[native] {
+  display: none;
+}
+
+} /** END Proton **/
+
+@supports not -moz-bool-pref("browser.proton.enabled") {
 :host {
   appearance: auto;
   -moz-default-appearance: menulist;
@@ -47,3 +95,4 @@ label {
 dropmarker {
   display: none;
 }
+} /** END not Proton **/

toolkit/themes/shared/menulist.inc.css

@@ -0,0 +1,62 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * 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");
+
+@supports -moz-bool-pref("browser.proton.enabled") {
+:host(:not([native])) {
+  appearance: none;
+  background-color: var(--buttons-secondary-bgcolor, ButtonFace);
+  color: var(--buttons-secondary-color, ButtonText);
+  border-radius: 4px;
+  padding: 4px 8px 4px 12px;
+  margin: 5px 2px 3px;
+}
+
+:host(:not([native])[size="medium"]) {
+  padding: 6px 10px 6px 16px;
+}
+
+:host(:not([native])[size="large"]) {
+  padding: 8px 12px 8px 16px;
+}
+
+:host(:not([native]):hover) {
+  background-color: var(--buttons-secondary-hover-bgcolor, color-mix(in srgb, currentColor 10%, ButtonFace));
+}
+
+:host(:not([native]):hover:active) {
+  background-color: var(--buttons-secondary-active-bgcolor, color-mix(in srgb, currentColor 20%, ButtonFace));
+}
+
+:host(:not([native]):-moz-focusring) {
+  outline: 2px solid var(--focus-outline-color, -moz-accent-color);
+  outline-offset: var(--focus-outline-offset, -1px);
+  box-shadow: 0 0 0 4px var(--buttons-box-shadow, rgba(10, 132, 255, 0.3));
+}
+
+#label-box:not([native]) {
+  -moz-box-align: center;
+  -moz-box-pack: center;
+  font-weight: 600;
+}
+
+dropmarker:not([native]) {
+  display: -moz-box;
+  appearance: none;
+  width: 12px;
+  height: 12px;
+}
+
+dropmarker:not([native])::part(icon) {
+  list-style-image: url(chrome://global/skin/icons/arrow-dropdown-16.svg);
+  -moz-context-properties: fill;
+  fill: currentColor;
+}
+
+#highlightable-label:not([highlightable="true"]),
+#label[highlightable="true"] {
+  display: none;
+}
+} /** END Proton **/

toolkit/themes/windows/global/jar.mn

@@ -10,7 +10,7 @@ toolkit.jar:
 * skin/classic/global/checkbox.css
   skin/classic/global/dropmarker.css
 * skin/classic/global/menu.css
-  skin/classic/global/menulist.css
+* skin/classic/global/menulist.css
   skin/classic/global/radio.css
   skin/classic/global/tabbox.css
   skin/classic/global/search-textbox.css

toolkit/themes/windows/global/menulist.css

@@ -4,6 +4,62 @@
 
 @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
 
+%include ../../shared/menulist.inc.css
+
+@supports -moz-bool-pref("browser.proton.enabled") {
+label {
+  margin: 0 3px !important;
+}
+
+: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;
+}
+
+/* Label box */
+
+#label-box[native] {
+  -moz-box-align: center;
+  -moz-box-pack: center;
+}
+
+:host([native]:not([open="true"]):focus) > #label-box {
+  background-color: Highlight;
+  color: HighlightText;
+}
+
+:host([native]:not([open="true"]):-moz-focusring) > #label-box {
+  outline: 1px dotted;
+}
+
+
+@media (-moz-windows-default-theme) {
+  #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;
+  }
+}
+} /** END Proton **/
+
+@supports not -moz-bool-pref("browser.proton.enabled") {
 :host {
   appearance: auto;
   -moz-default-appearance: menulist;
@@ -60,3 +116,4 @@ label {
     margin-inline: 3px -3px;
   }
 }
+} /** END not Proton **/