Bug 1345432 - Clean up XUL checkbox styling, remove fallback styling and fix the focus indicator. r=karlt draft
authorDão Gottwald <dao@mozilla.com>
Mon, 13 Mar 2017 13:12:37 +0100
changeset 497474 8665cf698dfc561a2bdc84de27a75bea00cd44f9
parent 497206 f9362554866b327700c7f9b18050d7b7eb3d2b23
child 548908 5eb90a24b63bdc34022abcb23970e3533fd4cce0
push id48921
push userdgottwald@mozilla.com
push dateMon, 13 Mar 2017 12:13:22 +0000
reviewerskarlt
bugs1345432
milestone55.0a1
Bug 1345432 - Clean up XUL checkbox styling, remove fallback styling and fix the focus indicator. r=karlt MozReview-Commit-ID: CcqLKFVvLwC
mobile/android/chrome/content/bindings/checkbox.xml
mobile/android/themes/core/aboutAddons.css
toolkit/content/widgets/checkbox.xml
toolkit/themes/linux/global/checkbox.css
toolkit/themes/linux/global/global.css
toolkit/themes/linux/global/in-content/common.css
toolkit/themes/shared/in-content/common.inc.css
--- a/mobile/android/chrome/content/bindings/checkbox.xml
+++ b/mobile/android/chrome/content/bindings/checkbox.xml
@@ -67,9 +67,25 @@
           }
           return aValue;
         ]]>
         </body>
       </method>
     </implementation>
   </binding>
 
+  <binding id="checkbox-with-spacing"
+           extends="chrome://global/content/bindings/checkbox.xml#checkbox">
+
+    <content>
+      <xul:hbox class="checkbox-spacer-box">
+        <xul:image class="checkbox-check" xbl:inherits="checked,disabled"/>
+      </xul:hbox>
+      <xul:hbox class="checkbox-label-center-box" flex="1">
+        <xul:hbox class="checkbox-label-box" flex="1">
+          <xul:image class="checkbox-icon" xbl:inherits="src"/>
+          <xul:label class="checkbox-label" xbl:inherits="xbl:text=label,accesskey,crop" flex="1"/>
+        </xul:hbox>
+      </xul:hbox>
+    </content>
+  </binding>
+
 </bindings>
--- a/mobile/android/themes/core/aboutAddons.css
+++ b/mobile/android/themes/core/aboutAddons.css
@@ -153,17 +153,17 @@ setting > vbox {
 
 .preferences-description:empty {
   display: none;
 }
 
 /* Checkbox */
 
 checkbox {
-  -moz-binding: url("chrome://global/content/bindings/checkbox.xml#checkbox-with-spacing") !important;
+  -moz-binding: url("chrome://browser/content/bindings/checkbox.xml#checkbox-with-spacing") !important;
   margin: 0;
 }
 
 checkbox[label=""] > .checkbox-label-box,
 checkbox:not([label]) > .checkbox-label-box {
   display: none;
 }
 
--- a/toolkit/content/widgets/checkbox.xml
+++ b/toolkit/content/widgets/checkbox.xml
@@ -60,25 +60,9 @@
           this.checked = !this.checked;
           // Prevent page from scrolling on the space key.
           event.preventDefault();
         ]]>
       </handler>
     </handlers>
   </binding>
 
-  <binding id="checkbox-with-spacing"
-           extends="chrome://global/content/bindings/checkbox.xml#checkbox">
-
-    <content>
-      <xul:hbox class="checkbox-spacer-box">
-        <xul:image class="checkbox-check" xbl:inherits="checked,disabled"/>
-      </xul:hbox>
-      <xul:hbox class="checkbox-label-center-box" flex="1">
-        <xul:hbox class="checkbox-label-box" flex="1">
-          <xul:image class="checkbox-icon" xbl:inherits="src"/>
-          <xul:label class="checkbox-label" xbl:inherits="xbl:text=label,accesskey,crop" flex="1"/>
-        </xul:hbox>
-      </xul:hbox>
-    </content>
-  </binding>
-
 </bindings>
--- a/toolkit/themes/linux/global/checkbox.css
+++ b/toolkit/themes/linux/global/checkbox.css
@@ -7,93 +7,50 @@
   ======================================================================= */
 
 @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
 
 /* ::::: checkbox ::::: */
 
 checkbox {
   -moz-appearance: checkbox-container;
+  -moz-box-align: center;
   margin: 2px 4px;
-  border-left: 2px transparent;
-  border-right: 2px transparent;
-}
-
-/* With native theming on, the spacer-box paints the check mark and includes
-   the spacing to the right, so that oversized checkbox images can slop over
-   into the space.
-
-   If we need to disable checkbox theming, the spacer box no longer paints
-   the check mark, but its fallback CSS border supplies the padding between
-   the mark and the label.  The xul:image then takes over painting the check
-   mark. */
-
-.checkbox-spacer-box {
-  -moz-appearance: checkbox;
-  -moz-box-align: center;
-  margin: 2px;
-  border-right: 2px solid transparent;
-}
-
-.checkbox-label-center-box {
-  -moz-box-align: center;
 }
 
 .checkbox-label-box {
   -moz-appearance: checkbox-label;
 }
 
 .checkbox-icon[src] {
   margin-inline-end: 2px;
 }
 
 .checkbox-label {
   margin: 0 !important;
 }
 
 /* ..... focused state ..... */
 
-checkbox:focus > .checkbox-label-center-box > .checkbox-label-box {
-  border: 1px dotted ThreeDDarkShadow;
+checkbox:-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[disabled="true"] > .checkbox-spacer-box > .checkbox-check {
-  background-color: -moz-Dialog;
-}
-
 checkbox[disabled="true"] {
   color: GrayText;
 }
 
 /* ::::: checkmark image ::::: */
 
 .checkbox-check {
-  border: 2px solid;
-  -moz-border-top-colors: ThreeDShadow ThreeDDarkShadow;
-  -moz-border-right-colors: ThreeDHighlight ThreeDLightShadow;
-  -moz-border-bottom-colors: ThreeDHighlight ThreeDLightShadow;
-  -moz-border-left-colors: ThreeDShadow ThreeDDarkShadow;
-  min-width: 13px;
-  min-height: 13px;
-  background: -moz-Field no-repeat 50% 50%;
+  -moz-appearance: checkbox;
+  margin: 2px;
 }
 
 checkbox:not([disabled="true"]):hover {
   color: -moz-buttonhovertext;
   text-shadow: none;
 }
 
-checkbox:hover:active > .checkbox-spacer-box > .checkbox-check {
-  background-color: -moz-Dialog;
-}
-
-/* ..... checked state ..... */
-
-checkbox[checked="true"] > .checkbox-spacer-box > .checkbox-check {
-  background-image: url("chrome://global/skin/checkbox/cbox-check.gif");
-}
-
-checkbox[checked="true"][disabled="true"] > .checkbox-spacer-box > .checkbox-check {
-  background-image: url("chrome://global/skin/checkbox/cbox-check-dis.gif") !important
-}
-
--- a/toolkit/themes/linux/global/global.css
+++ b/toolkit/themes/linux/global/global.css
@@ -8,20 +8,16 @@
 
 /* all localizable skin settings shall live here */
 @import url("chrome://global/locale/intl.css");
 
 @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
 
 /* ::::: XBL bindings ::::: */
 
-checkbox {
-  -moz-binding: url("chrome://global/content/bindings/checkbox.xml#checkbox-with-spacing");
-}
-
 radio {
   -moz-binding: url("chrome://global/skin/globalBindings.xml#radio-with-spacing");
 }
 
 menulist > menupopup {
   -moz-binding: url("chrome://global/content/bindings/popup.xml#popup-scrollbars");
 }
 
--- a/toolkit/themes/linux/global/in-content/common.css
+++ b/toolkit/themes/linux/global/in-content/common.css
@@ -46,21 +46,16 @@ xul|menulist {
 }
 
 xul|menulist:not([editable="true"]) > xul|*.menulist-dropmarker {
   display: -moz-box;
   margin-top: 6px;
   margin-bottom: 6px;
 }
 
-xul|checkbox {
-  -moz-binding: url("chrome://global/content/bindings/checkbox.xml#checkbox");
-  -moz-box-align: center;
-}
-
 xul|*.checkbox-check {
   background-image: none !important;
 }
 
 xul|*.checkbox-check[checked] {
   list-style-image: url("chrome://global/skin/in-content/check.svg#check-native");
   background-color: -moz-dialog;
 }
@@ -96,18 +91,17 @@ xul|*.numberbox-input-box {
 }
 
 xul|*.text-link:-moz-focusring {
   border: 1px dotted -moz-DialogText;
 }
 
 xul|menulist:-moz-focusring > xul|*.menulist-label-box,
 xul|radio[focused="true"] > xul|*.radio-label-box,
-html|input[type="checkbox"]:-moz-focusring + html|label:before,
-xul|checkbox:-moz-focusring > xul|*.checkbox-label-box {
+html|input[type="checkbox"]:-moz-focusring + html|label:before {
   outline: 1px dotted;
 }
 
 xul|spinbuttons {
   -moz-appearance: none;
 }
 
 xul|treechildren::-moz-tree-row(multicol, odd) {
--- a/toolkit/themes/shared/in-content/common.inc.css
+++ b/toolkit/themes/shared/in-content/common.inc.css
@@ -519,18 +519,19 @@ xul|checkbox {
   margin-inline-start: 0;
 }
 
 xul|*.checkbox-check,
 html|input[type="checkbox"] {
   -moz-appearance: none;
   width: 23px;
   height: 23px;
+  border: 1px solid var(--in-content-box-border-color);
   border-radius: 2px;
-  border: 1px solid var(--in-content-box-border-color);
+  margin: 0;
   margin-inline-end: 10px;
   background-color: #f1f1f1;
   /* !important needed to override toolkit checked !important rule */
   background-image: linear-gradient(#fff, rgba(255,255,255,0.8)) !important;
   background-position: center center;
   background-repeat: no-repeat;
   box-shadow: 0 1px 1px 0 #fff, inset 0 2px 0 0 rgba(0,0,0,0.03);
 }