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

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

browser/base/content/test/performance/browser_preferences_usage.js

@@ -123,6 +123,10 @@ add_task(async function startup() {
       min: 0,
       max: 50,
     },
+    "browser.proton.enabled": {
+      min: 0,
+      max: 50, // Bug 1698132
+    },
   };
 
   let startupRecorder = Cc["@mozilla.org/test/startuprecorder;1"].getService()

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

@@ -5,10 +5,25 @@
 @media not (prefers-contrast) {
   @supports -moz-bool-pref("browser.proton.enabled") {
   :root:not(:-moz-lwtheme) {
+    --buttons-primary-button-bgcolor: rgb(0,97,224);
     --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-box-shadow: transparent;
+
+    --focus-outline-color: var(--buttons-primary-button-bgcolor);
+    --focus-outline-offset: 2px;
+
+    --checkbox-border-color: rgb(143,143,157);
+    --checkbox-unchecked-bgcolor: rgb(240,240,244);
+    --checkbox-unchecked-hover-bgcolor: rgb(224,224,230);
+    --checkbox-unchecked-active-bgcolor: rgb(207,207,216);
+    --checkbox-checked-border-color: rgb(0,97,224);
+    --checkbox-checked-bgcolor: rgb(0,97,224);
+    --checkbox-checked-color: rgb(251,251,254);
+    --checkbox-checked-hover-bgcolor: rgb(2,80,187);
+    --checkbox-checked-active-bgcolor: rgb(5,62,148);
   }
   } /** END Proton **/
 

toolkit/content/widgets/checkbox.js

@@ -40,9 +40,9 @@
 
     static get inheritedAttributes() {
       return {
-        ".checkbox-check": "disabled,checked",
-        ".checkbox-label": "text=label,accesskey",
-        ".checkbox-icon": "src",
+        ".checkbox-check": "disabled,checked,native",
+        ".checkbox-label": "text=label,accesskey,native",
+        ".checkbox-icon": "src,native",
       };
     }
 

toolkit/themes/linux/global/checkbox.css

@@ -8,6 +8,55 @@
 
 @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
 
+%include ../../shared/checkbox.inc.css
+
+@supports -moz-bool-pref("browser.proton.enabled") {
+/* ::::: checkbox ::::: */
+
+checkbox[native] {
+  appearance: auto;
+  -moz-default-appearance: checkbox-container;
+  -moz-box-align: center;
+  margin: 2px 4px;
+}
+
+.checkbox-label-box[native] {
+  appearance: auto;
+  -moz-default-appearance: checkbox-label;
+}
+
+.checkbox-icon[native][src] {
+  margin-inline-end: 2px;
+}
+
+.checkbox-label[native] {
+  margin: 0;
+}
+
+/* ..... focused state ..... */
+
+checkbox[native]:-moz-focusring > .checkbox-label-box {
+  /* Native theming should take care of this but it appears to be broken with
+     some Gtk themes. Bug 1312169. */
+  outline: 1px dotted;
+}
+
+/* ..... disabled state ..... */
+
+checkbox[native][disabled="true"] {
+  color: GrayText;
+}
+
+/* ::::: checkmark image ::::: */
+
+.checkbox-check[native] {
+  appearance: auto;
+  -moz-default-appearance: checkbox;
+  margin: 2px;
+}
+} /** END Proton **/
+
+@supports not -moz-bool-pref("browser.proton.enabled") {
 /* ::::: checkbox ::::: */
 
 checkbox {
@@ -51,3 +100,4 @@ checkbox[disabled="true"] {
   -moz-default-appearance: checkbox;
   margin: 2px;
 }
+} /** END not Proton **/

toolkit/themes/linux/global/jar.mn

@@ -7,7 +7,7 @@
 toolkit.jar:
    skin/classic/global/autocomplete.css
    skin/classic/global/button.css
-   skin/classic/global/checkbox.css
+*  skin/classic/global/checkbox.css
    skin/classic/global/commonDialog.css
    skin/classic/global/dropmarker.css
 *  skin/classic/global/findBar.css

toolkit/themes/osx/global/checkbox.css

@@ -4,6 +4,49 @@
 
 @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
 
+%include ../../shared/checkbox.inc.css
+
+@supports -moz-bool-pref("browser.proton.enabled") {
+checkbox:not([native]):-moz-focusring > .checkbox-check {
+  outline: 2px solid var(--focus-outline-color, -moz-mac-focusring);
+}
+
+checkbox[native] {
+  appearance: auto;
+  -moz-default-appearance: checkbox-container;
+  -moz-box-align: center;
+  margin: 4px 2px;
+}
+
+.checkbox-icon[native] {
+  margin-inline-end: 2px;
+}
+
+.checkbox-label[native] {
+  margin: 1px 0;
+}
+
+/* ..... disabled state ..... */
+
+checkbox[native][disabled="true"] {
+  color: GrayText;
+}
+
+/* ::::: checkmark image ::::: */
+
+.checkbox-check[native] {
+  appearance: auto;
+  -moz-default-appearance: checkbox;
+  margin: 1px 1px 0;
+  /* vertical-align tells native theming where to snap to. However, this doesn't
+   * always work reliably because of bug 503833. */
+  vertical-align: top;
+  width: 1.3em;
+  height: 1.3em;
+}
+} /** END Proton **/
+
+@supports not -moz-bool-pref("browser.proton.enabled") {
 checkbox {
   appearance: auto;
   -moz-default-appearance: checkbox-container;
@@ -37,3 +80,4 @@ checkbox[disabled="true"] {
   width: 1.3em;
   height: 1.3em;
 }
+} /** END not Proton **/

toolkit/themes/osx/global/jar.mn

@@ -7,7 +7,7 @@
 toolkit.jar:
   skin/classic/global/autocomplete.css
   skin/classic/global/button.css
-  skin/classic/global/checkbox.css
+* skin/classic/global/checkbox.css
   skin/classic/global/commonDialog.css
   skin/classic/global/dialog.css
   skin/classic/global/dropmarker.css

toolkit/themes/shared/checkbox.inc.css

@@ -0,0 +1,72 @@
+/* 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");
+@namespace html url("http://www.w3.org/1999/xhtml");
+
+@supports -moz-bool-pref("browser.proton.enabled") {
+checkbox {
+  appearance: none;
+  -moz-box-align: center;
+  margin: 4px 2px;
+}
+
+.checkbox-icon {
+  margin-inline-end: 2px;
+}
+
+.checkbox-label {
+  margin: 1px 0;
+}
+
+/* ..... disabled state ..... */
+
+checkbox[disabled="true"] {
+  opacity: 0.4;
+}
+
+/* ::::: checkmark image ::::: */
+
+.checkbox-check {
+  appearance: none;
+  height: 16px;
+  width: 16px;
+  border: 1px solid var(--checkbox-border-color, ThreeDDarkShadow);
+  background-color: var(--checkbox-unchecked-bgcolor, Field);
+  border-radius: 2px;
+  color: FieldText;
+  margin-inline-end: 6px;
+}
+
+checkbox:not([disabled="true"]):hover > .checkbox-check {
+  background-color: var(--checkbox-unchecked-hover-bgcolor, Field);
+}
+
+checkbox:not([disabled="true"]):active > .checkbox-check {
+  background-color: var(--checkbox-unchecked-active-bgcolor, Field);
+}
+
+.checkbox-check[checked] {
+  border-color: var(--checkbox-checked-border-color, transparent);
+  background-color: var(--checkbox-checked-bgcolor, -moz-accent-color);
+  list-style-image: url("chrome://global/skin/icons/check.svg");
+  -moz-context-properties: fill;
+  fill: currentColor;
+  color: var(--checkbox-checked-color, -moz-accent-color-foreground);
+}
+
+checkbox:not([disabled="true"]):hover > .checkbox-check[checked] {
+  background-color: var(--checkbox-checked-hover-bgcolor, color-mix(in srgb, currentColor 10%, -moz-accent-color));
+}
+
+checkbox:not([disabled="true"]):active > .checkbox-check[checked] {
+  background-color: var(--checkbox-checked-active-bgcolor, color-mix(in srgb, currentColor 20%, -moz-accent-color));
+}
+
+checkbox:not([native]):-moz-focusring > .checkbox-check {
+  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));
+}
+} /** END Proton **/

toolkit/themes/windows/global/checkbox.css

@@ -8,6 +8,62 @@
 
 @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
 
+%include ../../shared/checkbox.inc.css
+
+@supports -moz-bool-pref("browser.proton.enabled") {
+/* ::::: checkbox ::::: */
+
+checkbox[native] {
+  appearance: auto;
+  -moz-default-appearance: checkbox-container;
+  -moz-box-align: center;
+  margin: 2px 4px;
+  padding-top: 1px;
+  padding-bottom: 1px;
+  padding-inline-start: 4px;
+  padding-inline-end: 2px;
+}
+
+.checkbox-icon[native][src] {
+  margin-inline-end: 2px;
+}
+
+.checkbox-label[native] {
+  margin: 0;
+}
+
+/* ..... focused state ..... */
+
+checkbox[native]:-moz-focusring > .checkbox-label-box {
+  outline: 1px dotted;
+}
+
+/* ..... disabled state ..... */
+
+checkbox[native][disabled="true"] {
+  color: GrayText;
+}
+
+@media (-moz-windows-classic) {
+  checkbox[native][disabled="true"] {
+    color: ThreeDShadow;
+    text-shadow: 1px 1px ThreeDHighlight;
+  }
+}
+
+/* ::::: checkmark image ::::: */
+
+.checkbox-check[native] {
+  appearance: auto;
+  -moz-default-appearance: checkbox;
+  -moz-box-align: center;
+  min-width: 13px;
+  min-height: 13px;
+  margin-inline-end: 3px;
+}
+} /** END Proton **/
+
+@supports not -moz-bool-pref("browser.proton.enabled") {
 /* ::::: checkbox ::::: */
 
 checkbox {
@@ -58,3 +114,4 @@ checkbox[disabled="true"] {
   min-height: 13px;
   margin-inline-end: 3px;
 }
+} /** END not Proton **/

toolkit/themes/windows/global/jar.mn

@@ -7,7 +7,7 @@
 toolkit.jar:
   skin/classic/global/autocomplete.css
   skin/classic/global/button.css
-  skin/classic/global/checkbox.css
+* skin/classic/global/checkbox.css
   skin/classic/global/dropmarker.css
 * skin/classic/global/menu.css
   skin/classic/global/menulist.css