Bug 1411640 - Consolidate <radio> bindings and styling across platforms. r=bgrins
☠☠ backed out by 4dc4eae45e0a ☠ ☠
authorDão Gottwald <dao@mozilla.com>
Thu, 02 Nov 2017 17:55:33 +0100
changeset 443247 4e49de4bbc6f0647dd82b752e52961106e7d4879
parent 443246 83fe273bfdf2c388359f7dfe66e1dedb09ebf53f
child 443248 f682de302ea19ea7df2c62ccea026badd36b4bdd
push id1618
push userCallek@gmail.com
push dateThu, 11 Jan 2018 17:45:48 +0000
treeherdermozilla-release@882ca853e05a [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersbgrins
bugs1411640
milestone58.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1411640 - Consolidate <radio> bindings and styling across platforms. r=bgrins MozReview-Commit-ID: p4dxfdpTs3
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
@@ -39,18 +39,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;
--- a/toolkit/themes/windows/global/globalBindings.xml
+++ b/toolkit/themes/windows/global/globalBindings.xml
@@ -4,50 +4,16 @@
    - 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>
--- 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..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
GIT binary patch
literal 0
Hc$@<O00001
deleted file mode 100644
index 26aa14026a6d6b4ba0f54196940f341c596a0e76..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
GIT binary patch
literal 0
Hc$@<O00001