Bug 1411640 - Consolidate <radio> bindings and styling across platforms. r?bgrins
MozReview-Commit-ID: 4Z6cdsiLMio
--- 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