Bug 1371951 - Make browser-style checkboxes and radio buttons handle style themselves. r=mixedpuppy, bwinton
authorExE Boss <3889017+ExE-Boss@users.noreply.github.com>
Sat, 17 Feb 2018 17:00:00 +0100
changeset 431008 e57c44d5ec978b70bbfb0d44152b5625a5b8997a
parent 431007 d5fd44722c761ceb08a6eceea7392d3a97db169a
child 431009 0386ff1e9956566b5ca1b5674af24ac40f4298ed
push id34419
push userbtara@mozilla.com
push dateSat, 11 Aug 2018 03:43:33 +0000
treeherdermozilla-central@7ed5ed3d4814 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersmixedpuppy, bwinton
bugs1371951, 418833
milestone63.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 1371951 - Make browser-style checkboxes and radio buttons handle style themselves. r=mixedpuppy, bwinton This removes the requirement for browser-style checkboxes and radio buttons to be followed by a label since the reason why this was originally done no longer applies because bug 418833 made it possible for checkboxes and radio buttons to handle styling themselves rather than requiring a label::before element.
browser/components/extensions/extension.css
browser/components/extensions/test/browser/browser_ext_optionsPage_browser_style.js
--- a/browser/components/extensions/extension.css
+++ b/browser/components/extensions/extension.css
@@ -129,148 +129,129 @@ button.browser-style.default.pressed {
   background-color: #005bab;
   border-color: #004480;
 }
 
 button.browser-style.default.focused {
   border-color: #fff;
 }
 
-/* Radio Buttons */
-.browser-style > input[type="radio"] {
-  display: none;
-}
-
-.browser-style > input[type="radio"] + label {
+.browser-style > label {
   -moz-user-select: none;
 }
 
-.browser-style > input[type="radio"] + label::before {
+.browser-style.disabled > label {
+  color: #999;
+  opacity: .5;
+}
+
+/* Radio Buttons */
+.browser-style > input[type="radio"] {
+  -moz-appearance: none;
   background-color: #fff;
   background-position: center;
   border: 1px solid #b1b1b1;
   border-radius: 50%;
   content: "";
   display: inline-block;
   height: 16px;
   margin-right: 6px;
   vertical-align: text-top;
   width: 16px;
 }
 
-.browser-style > input[type="radio"]:hover + label::before,
-.browser-style.hover > input[type="radio"]:not(active) + label::before {
+.browser-style > input[type="radio"]:hover,
+.browser-style.hover > input[type="radio"]:not(:active) {
   background-color: #fbfbfb;
   border-color: #b1b1b1;
 }
 
-.browser-style > input[type="radio"]:hover:active + label::before,
-.browser-style.pressed > input[type="radio"]:not(active) + label::before {
+.browser-style > input[type="radio"]:hover:active,
+.browser-style.pressed > input[type="radio"]:not(:active) {
   background-color: #ebebeb;
   border-color: #858585;
 }
 
-.browser-style > input[type="radio"]:checked + label::before {
+.browser-style > input[type="radio"]:checked {
   background-color: #0996f8;
   background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDE2IDE2Ij4KICA8Y2lyY2xlIGN4PSI4IiBjeT0iOCIgcj0iNCIgZmlsbD0iI2ZmZiIgLz4KPC9zdmc+Cg==);
   border-color: #0670cc;
 }
 
-.browser-style > input[type="radio"]:checked:hover + label::before,
-.browser-style.hover > input[type="radio"]:checked:not(active) + label::before {
+.browser-style > input[type="radio"]:checked:hover,
+.browser-style.hover > input[type="radio"]:checked:not(:active) {
   background-color: #0670cc;
   border-color: #005bab;
 }
 
-.browser-style > input[type="radio"]:checked:hover:active + label::before,
-.browser-style.pressed > input[type="radio"]:checked:not(active) + label::before {
+.browser-style > input[type="radio"]:checked:hover:active,
+.browser-style.pressed > input[type="radio"]:checked:not(:active) {
   background-color: #005bab;
   border-color: #004480;
 }
 
-.browser-style.disabled > input[type="radio"] + label,
-.browser-style.disabled > input[type="radio"]:hover + label,
-.browser-style.disabled > input[type="radio"]:hover:active + label {
-  color: #999;
-  opacity: .5;
-}
-
-.browser-style.focused > input[type="radio"] + label::before {
+.browser-style.focused > input[type="radio"] {
   border-color: #0996f8;
   box-shadow: 0 0 0 2px rgba(97, 181, 255, 0.75);
 }
 
-.browser-style.focused > input[type="radio"]:checked + label::before {
+.browser-style.focused > input[type="radio"]:checked {
   border-color: #fff;
 }
 
 /* Checkboxes */
 .browser-style > input[type="checkbox"] {
-  display: none;
-}
-
-.browser-style > input[type="checkbox"] + label {
-  -moz-user-select: none;
-}
-
-.browser-style > input[type="checkbox"] + label::before {
+  -moz-appearance: none;
   background-color: #fff;
   background-position: center;
   border: 1px solid #b1b1b1;
   content: "";
   display: inline-block;
   height: 16px;
   margin-right: 6px;
   vertical-align: text-top;
   width: 16px;
 }
 
-.browser-style > input[type="checkbox"]:hover + label::before,
-.browser-style.hover > input[type="checkbox"]:not(active) + label::before {
+.browser-style > input[type="checkbox"]:hover,
+.browser-style.hover > input[type="checkbox"]:not(:active) {
   background-color: #fbfbfb;
   border-color: #b1b1b1;
 }
 
-.browser-style > input[type="checkbox"]:hover:active + label::before,
-.browser-style.pressed > input[type="checkbox"]:not(active) + label::before {
+.browser-style > input[type="checkbox"]:hover:active,
+.browser-style.pressed > input[type="checkbox"]:not(:active) {
   background-color: #ebebeb;
   border-color: #858585;
 }
 
-.browser-style > input[type="checkbox"]:checked + label::before {
+.browser-style > input[type="checkbox"]:checked {
   background-color: #0996f8;
   background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDE2IDE2Ij4KICA8cGF0aCBkPSJNNy43LDEyLjkgQzcuNCwxMy4zIDYuOCwxMy40IDYuNCwxMyBMMy4yLDkuOCBDMi44LDkuNCAyLjgsOC42IDMuMiw4LjIgQzMuNiw3LjggNC40LDcuOCA0LjgsOC4yIEw2LjksMTAuMyBMMTEuMSw0LjQgQzExLjUsMy45IDEyLjIsMy44IDEyLjcsNC4xIEMxMy4yLDQuNSAxMy4zLDUuMiAxMyw1LjcgTDcuNywxMi45IEw3LjcsMTIuOSBaIiBmaWxsPSIjZmZmIiAvPgo8L3N2Zz4K);
   border-color: #0670cc;
 }
 
-.browser-style > input[type="checkbox"]:checked:hover + label::before,
-.browser-style.hover > input[type="checkbox"]:checked:not(active) + label::before {
+.browser-style > input[type="checkbox"]:checked:hover,
+.browser-style.hover > input[type="checkbox"]:checked:not(:active) {
   background-color: #0670cc;
   border-color: #005bab;
 }
 
-.browser-style > input[type="checkbox"]:checked:hover:active + label::before,
-.browser-style.pressed > input[type="checkbox"]:checked:not(active) + label::before {
+.browser-style > input[type="checkbox"]:checked:hover:active,
+.browser-style.pressed > input[type="checkbox"]:checked:not(:active) {
   background-color: #005bab;
   border-color: #004480;
 }
 
-.browser-style.disabled > input[type="checkbox"] + label,
-.browser-style.disabled > input[type="checkbox"]:hover + label,
-.browser-style.disabled > input[type="checkbox"]:hover:active + label {
-  color: #999;
-  opacity: .5;
-}
-
-.browser-style.focused > input[type="checkbox"] + label::before {
+.browser-style.focused > input[type="checkbox"] {
   border-color: #0996f8;
   box-shadow: 0 0 0 2px rgba(97, 181, 255, 0.75);
 }
 
-.browser-style.focused > input[type="checkbox"]:checked + label::before {
+.browser-style.focused > input[type="checkbox"]:checked {
   border-color: #fff;
 }
 
 /* Expander Button */
 button.browser-style.expander {
   background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDE2IDE2Ij4KICA8cGF0aCBkPSJNOCwxMkwzLDcsNCw2bDQsNCw0LTQsMSwxWiIgZmlsbD0iIzZBNkE2QSIgLz4KPC9zdmc+Cg==);
   background-position: center;
   background-repeat: no-repeat;
@@ -540,22 +521,22 @@ textarea.browser-style:focus:hover {
 .panel-section-tabs-button:hover {
   background-color: rgba(0, 0, 0, 0.06);
 }
 
 .panel-section-tabs-button:hover:active {
   background-color: rgba(0, 0, 0, 0.1);
 }
 
-.panel-section-tabs-button.select.browser-styleed {
+.panel-section-tabs-button.selected {
   box-shadow: 0 -1px 0 #0670cc inset, 0 -4px 0 #0996f8 inset;
   color: #0996f8;
 }
 
-.panel-section-tabs-button.select.browser-styleed:hover {
+.panel-section-tabs-button.selected:hover {
   color: #0670cc;
 }
 
 .panel-section-tabs-separator {
   background-color: rgba(0, 0, 0, 0.1);
   width: 1px;
   z-index: 99;
 }
--- a/browser/components/extensions/test/browser/browser_ext_optionsPage_browser_style.js
+++ b/browser/components/extensions/test/browser/browser_ext_optionsPage_browser_style.js
@@ -18,43 +18,44 @@ async function testOptionsBrowserStyle(o
         let buttonBackgroundColor = buttonStyle.backgroundColor;
         if (browserStyle && expected.hasBrowserStyleClass) {
           browser.test.assertEq("rgb(9, 150, 248)", buttonBackgroundColor, assertMessage);
         } else {
           browser.test.assertTrue(buttonBackgroundColor !== "rgb(9, 150, 248)", assertMessage);
         }
       }
 
-      function verifyCheckboxOrRadio(type, element, expected) {
+      function verifyCheckboxOrRadio(element, expected) {
         let style = window.getComputedStyle(element);
+        let styledBackground = element.checked ? "rgb(9, 150, 248)" : "rgb(255, 255, 255)";
         if (browserStyle && expected.hasBrowserStyleClass) {
-          browser.test.assertEq("none", style.display, `Expected ${type} item to be hidden`);
+          browser.test.assertEq(styledBackground, style.backgroundColor, assertMessage);
         } else {
-          browser.test.assertTrue(style.display != "none", `Expected ${type} item to be visible`);
+          browser.test.assertTrue(style.backgroundColor != styledBackground, assertMessage);
         }
       }
 
       let normalButton = document.getElementById("normalButton");
       let browserStyleButton = document.getElementById("browserStyleButton");
       verifyButton(normalButton, {hasBrowserStyleClass: false});
       verifyButton(browserStyleButton, {hasBrowserStyleClass: true});
 
       let normalCheckbox1 = document.getElementById("normalCheckbox1");
       let normalCheckbox2 = document.getElementById("normalCheckbox2");
       let browserStyleCheckbox = document.getElementById("browserStyleCheckbox");
-      verifyCheckboxOrRadio("checkbox", normalCheckbox1, {hasBrowserStyleClass: false});
-      verifyCheckboxOrRadio("checkbox", normalCheckbox2, {hasBrowserStyleClass: false});
-      verifyCheckboxOrRadio("checkbox", browserStyleCheckbox, {hasBrowserStyleClass: true});
+      verifyCheckboxOrRadio(normalCheckbox1, {hasBrowserStyleClass: false});
+      verifyCheckboxOrRadio(normalCheckbox2, {hasBrowserStyleClass: false});
+      verifyCheckboxOrRadio(browserStyleCheckbox, {hasBrowserStyleClass: true});
 
       let normalRadio1 = document.getElementById("normalRadio1");
       let normalRadio2 = document.getElementById("normalRadio2");
       let browserStyleRadio = document.getElementById("browserStyleRadio");
-      verifyCheckboxOrRadio("radio", normalRadio1, {hasBrowserStyleClass: false});
-      verifyCheckboxOrRadio("radio", normalRadio2, {hasBrowserStyleClass: false});
-      verifyCheckboxOrRadio("radio", browserStyleRadio, {hasBrowserStyleClass: true});
+      verifyCheckboxOrRadio(normalRadio1, {hasBrowserStyleClass: false});
+      verifyCheckboxOrRadio(normalRadio2, {hasBrowserStyleClass: false});
+      verifyCheckboxOrRadio(browserStyleRadio, {hasBrowserStyleClass: true});
 
       browser.test.notifyPass("options-ui-browser_style");
     });
     browser.test.sendMessage("options-ui-ready");
   }
 
   let extension = ExtensionTestUtils.loadExtension({
     useAddonManager: "temporary",