Bug 1411640 - Consolidate <radio> bindings and styling across platforms. r?bgrins draft
authorDão Gottwald <dao@mozilla.com>
Fri, 03 Nov 2017 18:05:16 +0100
changeset 692864 5926983caff347ff349fdbbe519048839c2c9a9d
parent 692863 4bedc86b4c296ff18df2ab7941982b4ddc85a91c
child 738874 4aa1cd7ac228778a18381d78029262e4ba86b296
push id87626
push userdgottwald@mozilla.com
push dateFri, 03 Nov 2017 17:05:45 +0000
reviewersbgrins
bugs1411640
milestone58.0a1
Bug 1411640 - Consolidate <radio> bindings and styling across platforms. r?bgrins MozReview-Commit-ID: 4Z6cdsiLMio
browser/themes/shared/customizableui/panelUI.inc.css
toolkit/themes/linux/global/global.css
toolkit/themes/linux/global/in-content/common.css
toolkit/themes/linux/global/radio.css
toolkit/themes/osx/global/radio.css
toolkit/themes/shared/in-content/common.inc.css
toolkit/themes/shared/non-mac.jar.inc.mn
toolkit/themes/windows/global/checkbox.css
toolkit/themes/windows/global/global.css
toolkit/themes/windows/global/globalBindings.xml
toolkit/themes/windows/global/in-content/common.css
toolkit/themes/windows/global/radio.css
toolkit/themes/windows/global/radio/radio-check-dis.gif
toolkit/themes/windows/global/radio/radio-check.gif
--- a/browser/themes/shared/customizableui/panelUI.inc.css
+++ b/browser/themes/shared/customizableui/panelUI.inc.css
@@ -1417,17 +1417,16 @@ menuitem[checked="true"].subviewbutton >
 }
 
 #PanelUI-panic-timeframe-icon-small:-moz-locale-dir(rtl),
 #PanelUI-panic-timeframe-icon:-moz-locale-dir(rtl) {
   transform: scaleX(-1);
 }
 
 .subviewradio {
-  -moz-binding: url(chrome://global/content/bindings/radio.xml#radio);
   -moz-appearance: none;
   -moz-box-align: center;
   padding: 1px;
   margin: 0 0 2px;
   background-color: transparent;
   border-radius: 2px;
   border: 1px solid transparent;
 }
--- 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 ::::: */
 
-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");
 }
 
 progressmeter[mode="undetermined"] {
   -moz-binding: url("chrome://global/content/bindings/progressmeter.xml#progressmeter-undetermined");
 }
 
--- a/toolkit/themes/linux/global/in-content/common.css
+++ b/toolkit/themes/linux/global/in-content/common.css
@@ -39,35 +39,27 @@ xul|menulist {
 }
 
 xul|menulist:not([editable="true"]) > xul|*.menulist-dropmarker {
   display: -moz-box;
   margin-top: 6px;
   margin-bottom: 6px;
 }
 
-xul|*.checkbox-check {
+xul|*.checkbox-check,
+xul|*.radio-check {
   background-image: none;
 }
 
 xul|*.checkbox-check[checked] {
   fill: -moz-dialogText;
   stroke: none;
   background-color: -moz-dialog;
 }
 
-xul|radio {
-  -moz-binding: url("chrome://global/content/bindings/radio.xml#radio");
-  -moz-box-align: center;
-}
-
-xul|*.radio-check {
-  background-image: none;
-}
-
 xul|*.radio-check[selected] {
   background-color: -moz-dialog;
   fill: -moz-dialogText;
 }
 
 xul|*.radio-label-box {
   -moz-appearance: none;
 }
@@ -80,17 +72,16 @@ xul|checkbox:not([disabled="true"]):hove
 }
 
 xul|*.numberbox-input-box {
   -moz-appearance: none;
   border-width: 0;
 }
 
 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 {
   outline: 1px dotted;
 }
 
 xul|spinbuttons {
   -moz-appearance: none;
 }
 
--- a/toolkit/themes/linux/global/radio.css
+++ b/toolkit/themes/linux/global/radio.css
@@ -7,104 +7,46 @@
   ======================================================================= */
 
 @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
 
 /* ::::: radio ::::: */
 
 radio {
   -moz-appearance: radio-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 radio mark and includes
-   the spacing to the right, so that oversized radio images can slop over
-   into the space.
-
-   If we need to disable radio button theming, the spacer box no longer paints
-   the radio mark, but its fallback CSS border supplies the padding between
-   the mark and the label.  The xul:image then takes over painting the radio
-   mark. */
-
-.radio-spacer-box {
-  -moz-appearance: radio;
-  -moz-box-align: center;
-  margin: 2px;
-  border-right: 2px solid transparent;
+radio:hover {
+  color: -moz-buttonhovertext;
 }
 
-.radio-label-center-box {
-  -moz-box-align: center;
+.radio-check {
+  -moz-appearance: radio;
+  margin: 2px;
 }
 
 .radio-label-box {
   -moz-appearance: radio-label;
 }
 
 .radio-icon[src] {
   margin-inline-end: 2px;
 }
 
 .radio-label {
   margin: 0 !important;
 }
 
 /* ..... focused state ..... */
 
-radio[focused="true"] > .radio-label-center-box > .radio-label-box {
-  border: 1px dotted ThreeDDarkShadow;
+radio[focused="true"] > .radio-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 ..... */
 
-radio[disabled="true"] > .radio-spacer-box > .radio-check-box1 {
-  background-color: -moz-Dialog;
-}
-
 radio[disabled="true"] {
   color: GrayText;
 }
-
-/* ::::: checkmark image ::::: */
-
-.radio-check-box1 {
-  border-top: 1px solid ThreeDShadow;
-  border-right: 1px solid ThreeDHighlight;
-  border-bottom: 1px solid ThreeDHighlight;
-  border-left: 1px solid ThreeDShadow;
-  border-radius: 50%;
-  min-width: 12px;
-  min-height: 12px;
-  background-color: -moz-Field;
-}
-
-.radio-check-box2 {
-  border-top: 1px solid ThreeDDarkShadow;
-  border-right: 1px solid ThreeDLightShadow;
-  border-bottom: 1px solid ThreeDLightShadow;
-  border-left: 1px solid ThreeDDarkShadow;
-  border-radius: 50%;
-  padding: 2px;
-  width: 4px;
-  height: 4px;
-  list-style-image: none;
-}
-
-radio:not([disabled="true"]):hover {
-  color: -moz-buttonhovertext;
-  text-shadow: none;
-}
-
-radio:hover:active > .radio-spacer-box > .radio-check-box1 {
-  background-color: -moz-Dialog;
-}
-
-/* ..... selected state ..... */
-
-radio[selected="true"] > .radio-spacer-box > .radio-check-box1 > .radio-check-box2 {
-  list-style-image: url("chrome://global/skin/radio/radio-check.gif");
-}
-
-radio[selected="true"][disabled="true"] > .radio-spacer-box > .radio-check-box1 > .radio-check-box2 {
-  list-style-image: url("chrome://global/skin/radio/radio-check-dis.gif") !important
-}
--- a/toolkit/themes/osx/global/radio.css
+++ b/toolkit/themes/osx/global/radio.css
@@ -27,17 +27,17 @@ radio {
 .radio-label {
   margin: 1px 0 !important;
 }
 
 radio[disabled="true"] {
   color: GrayText !important;
 }
 
-.radio-check, .radio-check-box1 {
+.radio-check {
   -moz-appearance: radio;
   margin: 0 1px 1px;
   /* vertical-align tells native theming where to snap to. However, this doesn't
    * always work reliably because of bug 503833. */
   vertical-align: bottom;
   width: 1.3em;
   height: 1.3em;
 }
--- a/toolkit/themes/shared/in-content/common.inc.css
+++ b/toolkit/themes/shared/in-content/common.inc.css
@@ -614,16 +614,17 @@ xul|radio {
 }
 
 xul|*.radio-check {
   -moz-appearance: none;
   width: 20px;
   height: 20px;
   border: 1px solid var(--in-content-box-border-color);
   border-radius: 50%;
+  margin: 0;
   margin-inline-end: 10px;
   background-color: #f1f1f1;
   background-image: linear-gradient(#fff, rgba(255,255,255,0.80));
   box-shadow: 0 1px 1px 0 #fff, inset 0 2px 0 0 rgba(0,0,0,0.03);
 }
 
 xul|radio:not([disabled="true"]):hover > xul|*.radio-check {
   border-color: var(--in-content-border-focus);
--- a/toolkit/themes/shared/non-mac.jar.inc.mn
+++ b/toolkit/themes/shared/non-mac.jar.inc.mn
@@ -10,17 +10,16 @@
 
 #include jar.inc.mn
 
   skin/classic/global/customizeToolbar.css                 (../../windows/global/customizeToolbar.css)
   skin/classic/global/datetimepicker.css                   (../../windows/global/datetimepicker.css)
   skin/classic/global/dialog.css                           (../../windows/global/dialog.css)
   skin/classic/global/expander.css                         (../../windows/global/expander.css)
   skin/classic/global/filefield.css                        (../../windows/global/filefield.css)
-  skin/classic/global/globalBindings.xml                   (../../windows/global/globalBindings.xml)
   skin/classic/global/progressmeter.css                    (../../windows/global/progressmeter.css)
   skin/classic/global/resizer.css                          (../../windows/global/resizer.css)
   skin/classic/global/richlistbox.css                      (../../windows/global/richlistbox.css)
   skin/classic/global/scrollbars.css                       (../../windows/global/xulscrollbars.css)
   skin/classic/global/spinbuttons.css                      (../../windows/global/spinbuttons.css)
   skin/classic/global/tabprompts.css                       (../../windows/global/tabprompts.css)
   skin/classic/global/wizard.css                           (../../windows/global/wizard.css)
 
@@ -39,18 +38,16 @@
   skin/classic/global/icons/error-16.png                   (../../windows/global/icons/error-16.png)
   skin/classic/global/icons/question-16.png                (../../windows/global/icons/question-16.png)
   skin/classic/global/icons/question-64.png                (../../windows/global/icons/question-64.png)
   skin/classic/global/icons/resizer-rtl.png                (../../windows/global/icons/resizer-rtl.png)
   skin/classic/global/icons/search-textbox.svg             (../../windows/global/icons/search-textbox.svg)
   skin/classic/global/icons/tabprompts-bgtexture.png       (../../windows/global/icons/tabprompts-bgtexture.png)
   skin/classic/global/icons/warning-16.png                 (../../windows/global/icons/warning-16.png)
   skin/classic/global/icons/warning-64.png                 (../../windows/global/icons/warning-64.png)
-  skin/classic/global/radio/radio-check.gif                (../../windows/global/radio/radio-check.gif)
-  skin/classic/global/radio/radio-check-dis.gif            (../../windows/global/radio/radio-check-dis.gif)
   skin/classic/global/splitter/grip-bottom.gif             (../../windows/global/splitter/grip-bottom.gif)
   skin/classic/global/splitter/grip-top.gif                (../../windows/global/splitter/grip-top.gif)
   skin/classic/global/splitter/grip-left.gif               (../../windows/global/splitter/grip-left.gif)
   skin/classic/global/splitter/grip-right.gif              (../../windows/global/splitter/grip-right.gif)
   skin/classic/global/tree/columnpicker.gif                (../../windows/global/tree/columnpicker.gif)
   skin/classic/global/tree/sort-asc.png                    (../../windows/global/tree/sort-asc.png)
   skin/classic/global/tree/sort-dsc.png                    (../../windows/global/tree/sort-dsc.png)
   skin/classic/global/tree/sort-asc-classic.png            (../../windows/global/tree/sort-asc-classic.png)
--- a/toolkit/themes/windows/global/checkbox.css
+++ b/toolkit/themes/windows/global/checkbox.css
@@ -15,17 +15,17 @@ checkbox {
   -moz-box-align: center;
   margin: 2px 4px;
   padding-top: 1px;
   padding-bottom: 1px;
   padding-inline-start: 4px;
   padding-inline-end: 2px;
 }
 
-.checkbox-icon {
+.checkbox-icon[src] {
   margin-inline-end: 2px;
 }
 
 .checkbox-label {
   margin: 0 !important;
 }
 
 /* ..... focused state ..... */
--- a/toolkit/themes/windows/global/global.css
+++ b/toolkit/themes/windows/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 ::::: */
 
-radio {
-  -moz-binding: url("chrome://global/skin/globalBindings.xml#radio");
-}
-
 menulist > menupopup {
   -moz-binding: url("chrome://global/content/bindings/popup.xml#popup-scrollbars");
 }
 
 /* ::::: Variables ::::: */
 :root {
   --arrowpanel-padding: 10px;
   --arrowpanel-background: -moz-field;
deleted file mode 100644
--- a/toolkit/themes/windows/global/globalBindings.xml
+++ /dev/null
@@ -1,55 +0,0 @@
-<?xml version="1.0"?>
-<!-- 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/. -->
-
-
-<bindings id="globalBindings"
-   xmlns="http://www.mozilla.org/xbl"
-   xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
-   xmlns:xbl="http://www.mozilla.org/xbl">
-
-  <binding id="radio"
-           extends="chrome://global/content/bindings/radio.xml#radio">
-    <content>
-      <xul:hbox class="radio-check-box1" xbl:inherits="selected,checked,disabled">
-        <xul:hbox class="radio-check-box2" flex="1">
-          <xul:image class="radio-check" xbl:inherits="selected,checked,disabled"/>
-        </xul:hbox>
-      </xul:hbox>
-      <xul:hbox class="radio-label-box" align="center" flex="1">
-        <xul:image class="radio-icon" xbl:inherits="src"/>
-        <xul:label class="radio-label" xbl:inherits="xbl:text=label,accesskey,crop" flex="1"/>
-      </xul:hbox>
-    </content>
-  </binding>
-
-  <binding id="radio-with-spacing"
-           extends="chrome://global/skin/globalBindings.xml#radio">
-    <content>
-      <xul:hbox class="radio-spacer-box">
-        <xul:hbox class="radio-check-box1" xbl:inherits="selected,checked,disabled">
-          <xul:hbox class="radio-check-box2" flex="1">
-            <xul:image class="radio-check" xbl:inherits="selected,checked,disabled"/>
-          </xul:hbox>
-        </xul:hbox>
-      </xul:hbox>
-      <xul:hbox class="radio-label-center-box" flex="1">
-        <xul:hbox class="radio-label-box" flex="1">
-          <xul:image class="radio-icon" xbl:inherits="src"/>
-          <xul:label class="radio-label" xbl:inherits="xbl:text=label,accesskey,crop" flex="1"/>
-        </xul:hbox>
-      </xul:hbox>
-    </content>
-  </binding>
-
-  <binding id="toolbarpaletteitem-spacer"
-           extends="chrome://global/content/bindings/toolbar.xml#toolbarpaletteitem">
-    <content>
-      <xul:spacer class="spacer-left"/>
-      <children/>
-      <xul:spacer class="spacer-right"/>
-    </content>
-  </binding>
-
-</bindings>
--- a/toolkit/themes/windows/global/in-content/common.css
+++ b/toolkit/themes/windows/global/in-content/common.css
@@ -8,61 +8,45 @@ xul|caption {
   background-color: transparent;
 }
 
 xul|menulist:not([editable="true"]) > xul|*.menulist-dropmarker {
   margin-top: 1px;
   margin-bottom: 1px;
 }
 
-xul|checkbox {
+xul|checkbox,
+xul|radio {
   padding-inline-start: 0;
 }
 
 @media (-moz-windows-default-theme: 0) {
-  xul|*.checkbox-check {
+  xul|*.checkbox-check,
+  xul|*.radio-check {
     background-image: none;
   }
 
   xul|*.checkbox-check[checked] {
     fill: -moz-dialogText;
     stroke: none;
     background-color: -moz-dialog;
   }
-}
-
-xul|radio {
-  -moz-binding: url("chrome://global/content/bindings/radio.xml#radio");
-  padding-inline-start: 0;
-}
-
-@media (-moz-windows-default-theme: 0) {
-  xul|*.radio-check {
-    background-image: none;
-  }
 
   xul|*.radio-check[selected] {
     background-color: -moz-dialog;
     fill: -moz-dialogText;
   }
 }
 
-xul|*.radio-icon,
-xul|*.checkbox-icon {
-  margin-inline-end: 0;
-}
-
 /* Never draw a border for the focusring, use outline instead */
-xul|*.menulist-label-box,
-xul|*.radio-label-box {
+xul|*.menulist-label-box {
   border-style: none;
 }
 
 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 {
   outline: 1px dotted;
 }
 
 /* Use a 2px border so that selected row highlight is still visible behind
     an existing high-contrast border that uses the background color */
 @media (-moz-windows-default-theme: 0) {
   xul|treechildren::-moz-tree-row(selected),
--- a/toolkit/themes/windows/global/radio.css
+++ b/toolkit/themes/windows/global/radio.css
@@ -15,88 +15,45 @@ radio {
   -moz-box-align: center;
   margin: 2px 4px;
   padding-top: 1px;
   padding-bottom: 1px;
   padding-inline-start: 4px;
   padding-inline-end: 2px;
 }
 
+.radio-check {
+  -moz-appearance: radio;
+  margin: 1px 0;
+}
+
 .radio-label-box {
   margin-inline-start: 2px;
-  border: 1px solid transparent;
-  padding-top: 0px;
   padding-bottom: 1px;
   padding-inline-start: 1px;
-  padding-inline-end: 0px;
 }
 
-.radio-icon {
+.radio-icon[src] {
   margin-inline-end: 2px;
 }
 
 .radio-label {
   margin: 0 !important;
 }
 
 /* ..... focused state ..... */
 
 radio[focused="true"] > .radio-label-box {
-  border: 1px dotted ThreeDDarkShadow;
+  outline: 1px dotted;
 }
 
 /* ..... disabled state ..... */
 
-radio[disabled="true"] > .radio-check-box1 {
-  background-color: -moz-Dialog;
-}
-
 radio[disabled="true"] {
   color: GrayText;
 }
 
 @media (-moz-windows-classic) {
   radio[disabled="true"] {
     color: ThreeDShadow;
     text-shadow: 1px 1px ThreeDHighlight;
   }
 }
-
-/* ::::: checkmark image ::::: */
-
-.radio-check-box1 {
-  -moz-appearance: radio;
-  margin: 1px 0px;
-  border-top: 1px solid ThreeDShadow;
-  border-right: 1px solid ThreeDHighlight;
-  border-bottom: 1px solid ThreeDHighlight;
-  border-left: 1px solid ThreeDShadow;
-  border-radius: 50%;
-  width: 12px;
-  height: 12px;
-  background-color: -moz-Field;
-}
-
-.radio-check-box2 {
-  border-top: 1px solid ThreeDDarkShadow;
-  border-right: 1px solid ThreeDLightShadow;
-  border-bottom: 1px solid ThreeDLightShadow;
-  border-left: 1px solid ThreeDDarkShadow;
-  border-radius: 50%;
-  padding: 2px;
-  width: 4px;
-  height: 4px;
-  list-style-image: none;
-}
-
-radio:hover:active > .radio-check-box1 {
-  background-color: -moz-Dialog;
-}
-
-/* ..... selected state ..... */
-
-radio[selected="true"] > .radio-check-box1 > .radio-check-box2 {
-  list-style-image: url("chrome://global/skin/radio/radio-check.gif");
-}
-
-radio[selected="true"][disabled="true"] > .radio-check-box1 > .radio-check-box2 {
-  list-style-image: url("chrome://global/skin/radio/radio-check-dis.gif") !important
-}
deleted file mode 100644
index 5e9a1cb01431f2c37ce8a759fc34b2e284c1c7ff..0000000000000000000000000000000000000000
GIT binary patch
literal 0
Hc$@<O00001
deleted file mode 100644
index 26aa14026a6d6b4ba0f54196940f341c596a0e76..0000000000000000000000000000000000000000
GIT binary patch
literal 0
Hc$@<O00001