From e6e762505f420bf31e073011ba353f46a1dcfcd3 Mon Sep 17 00:00:00 2001
From: tophf <tophf@gmx.com>
Date: Sun, 3 Dec 2017 07:02:50 +0300
Subject: [PATCH] FF: don't style checkboxes in FF < 57

---
 js/messaging.js |  1 +
 popup/popup.css | 53 +++++++++++++++++++++++++++++++++++--------------
 2 files changed, 39 insertions(+), 15 deletions(-)

diff --git a/js/messaging.js b/js/messaging.js
index fb373fb1..00b84272 100644
--- a/js/messaging.js
+++ b/js/messaging.js
@@ -61,6 +61,7 @@ if (BG && !BG.getStyles && BG !== window) {
 }
 if (!BG || BG !== window) {
   document.documentElement.classList.toggle('firefox', FIREFOX);
+  document.documentElement.classList.toggle('moz-appearance-bug', FIREFOX && FIREFOX < 57);
   document.documentElement.classList.toggle('opera', OPERA);
   // TODO: remove once our manifest's minimum_chrome_version is 50+
   // Chrome 49 doesn't report own extension pages in webNavigation apparently
diff --git a/popup/popup.css b/popup/popup.css
index 66720d9d..f2663e59 100644
--- a/popup/popup.css
+++ b/popup/popup.css
@@ -23,7 +23,28 @@ body > div:not(#installed) {
   display: none;
 }
 
-.svg-icon.checked {
+/* there's a bug in FF 52 ESR so until we find a better workaround we won't style checkboxes in FF */
+html.moz-appearance-bug .svg-icon.checked {
+  display: none;
+}
+
+html.moz-appearance-bug input[type="checkbox"] {
+  position: absolute;
+  left: 8px;
+  top: 0;
+  bottom: 0;
+  margin: auto;
+}
+
+html.moz-appearance-bug #disableAll {
+  left: -1px;
+}
+
+html.moz-appearance-bug #disableAll-label {
+  padding-left: 16px !important;
+}
+
+html:not(.moz-appearance-bug) .svg-icon.checked {
   position: absolute;
   height: 8px;
   width: 8px;
@@ -32,12 +53,12 @@ body > div:not(#installed) {
   margin: 2px 0 0 2px;
 }
 
-input[type="checkbox"]:checked + .svg-icon.checked {
+html:not(.moz-appearance-bug) input[type="checkbox"]:checked + .svg-icon.checked {
   display: inline-flex;
   transition: fill .25s;
 }
 
-input[type="checkbox"] {
+html:not(.moz-appearance-bug) input[type="checkbox"] {
   -moz-appearance: none;
   -webkit-appearance: none;
   border: 1px solid hsl(0, 0%, 46%);
@@ -51,52 +72,54 @@ input[type="checkbox"] {
   transition: background-color .25s, border-color .25s;
 }
 
-input[type="checkbox"]:checked:hover, .style-name:hover input[type="checkbox"]:checked {
+html:not(.moz-appearance-bug) input[type="checkbox"]:checked:hover,
+html:not(.moz-appearance-bug) .style-name:hover input[type="checkbox"]:checked {
   border-color: hsl(0, 0%, 32%);
   background-color: hsl(0, 0%, 82%);
 }
 
-input[type="checkbox"]:hover, .style-name:hover input[type="checkbox"],
-.entry.disabled .style-name:hover input[type="checkbox"] {
+html:not(.moz-appearance-bug) input[type="checkbox"]:hover,
+html:not(.moz-appearance-bug) .style-name:hover input[type="checkbox"],
+html:not(.moz-appearance-bug) .entry.disabled .style-name:hover input[type="checkbox"] {
   border-color: hsl(0, 0%, 32%);
   background-color: hsl(0, 0%, 82%);
 }
 
-#installed.disabled + .actions #disableAll:checked + .svg-icon.checked {
+html:not(.moz-appearance-bug) #installed.disabled + .actions #disableAll:checked + .svg-icon.checked {
   fill: hsl(0, 68%, 42%);
 }
 
-#installed.disabled + .actions #disableAll:checked {
+html:not(.moz-appearance-bug) #installed.disabled + .actions #disableAll:checked {
   border-color: hsl(0, 68%, 50%);
 }
 
-#installed.disabled + .actions #disableAll:checked:hover + .svg-icon.checked {
+html:not(.moz-appearance-bug) #installed.disabled + .actions #disableAll:checked:hover + .svg-icon.checked {
   fill: #fff;
 }
 
-#disableAll:hover {
+html:not(.moz-appearance-bug) #disableAll:hover {
   border-color: hsl(0, 68%, 50%);
   background-color: hsl(20, 70%, 75%);
 }
 
-#disableAll:hover + .svg-icon + label {
+html:not(.moz-appearance-bug) #disableAll:hover + .svg-icon + label {
   color: hsl(0, 68%, 42%);
 }
 
-#installed.disabled + .actions #disableAll:checked:hover {
+html:not(.moz-appearance-bug) #installed.disabled + .actions #disableAll:checked:hover {
   border-color: hsl(0, 50%, 56%);
   background-color: hsl(0, 50%, 56%);
 }
 
-.style-name .checker,
-.style-name .svg-icon.checked {
+html:not(.moz-appearance-bug) .style-name .checker,
+html:not(.moz-appearance-bug) .style-name .svg-icon.checked {
   position: absolute;
   top: 7px;
   left: 9px;
   pointer-events: none;
 }
 
-#disable-all-wrapper .main-controls .svg-icon.checked {
+html:not(.moz-appearance-bug) #disable-all-wrapper .main-controls .svg-icon.checked {
   position: absolute;
   top: 0;
   left: 0;