Bug 1411640 - Consolidate <radio> bindings and styling across platforms. r=bgrins
authorDão Gottwald <dao@mozilla.com>
Fri, 03 Nov 2017 18:05:16 +0100
changeset 443375 e1215f43a62a7dc4ef525efd017e263a1ee70712
parent 443374 973e547ce20c556c234201413716badcd41cb0b8
child 443376 fa3745bff6ac5363c8a391062d929aed3ae31fc9
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: 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..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
GIT binary patch
literal 0
Hc$@<O00001
deleted file mode 100644
index 26aa14026a6d6b4ba0f54196940f341c596a0e76..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
GIT binary patch
literal 0
Hc$@<O00001