Bug 1549282 - Remove checkbox-label appearance style for in-content pages to avoid interfering with selection highlight color in dark mode on Linux r=dao
authorKestrel <ke5trel@protonmail.com>
Thu, 09 May 2019 18:29:07 +0000
changeset 532101 f7f94d7b7d82c247c9c9b9a34d2f0045a07e85dd
parent 532100 455d6f8a9d95bb4cd471e52c63fe03f64fa29d4e
child 532102 81a322420af9c208dd466ad17e4c1a55e17fa042
push id11265
push userffxbld-merge
push dateMon, 13 May 2019 10:53:39 +0000
treeherdermozilla-beta@77e0fe8dbdd3 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersdao
bugs1549282
milestone68.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 1549282 - Remove checkbox-label appearance style for in-content pages to avoid interfering with selection highlight color in dark mode on Linux r=dao `-moz-appearance: checkbox-label` causes in-content light text to behave like dark text for selection purposes, the primary color is used for the background highlight instead of the alternate. Setting `-moz-appearance: none` for checkbox labels avoids the problem. Differential Revision: https://phabricator.services.mozilla.com/D29988
toolkit/themes/linux/global/in-content/common.css
--- a/toolkit/themes/linux/global/in-content/common.css
+++ b/toolkit/themes/linux/global/in-content/common.css
@@ -5,18 +5,22 @@
 %include ../../../shared/in-content/common.inc.css
 
 xul|tab[visuallyselected] {
   /* Override styles for tab[selected] from
      toolkit/themes/linux/global/tabbox.css */
   margin-bottom: 0;
 }
 
+/* Overriding appearance also avoids incorrect selection background color with
+   light text. */
 xul|button > xul|*.button-box,
-xul|menulist > xul|*.menulist-label-box {
+xul|menulist > xul|*.menulist-label-box,
+xul|*.radio-label-box,
+xul|*.checkbox-label-box {
   -moz-appearance: none;
 }
 
 xul|button[type="menu"] > xul|*.button-box > xul|*.button-menu-dropmarker {
   -moz-appearance: none !important;
 }
 
 xul|*.help-button > xul|*.button-box > xul|*.button-icon {
@@ -34,20 +38,16 @@ xul|*.menulist-dropmarker {
 }
 
 xul|checkbox[checked] > xul|*.checkbox-check,
 xul|*.radio-check[selected] {
   background-color: -moz-field;
   fill: -moz-fieldText;
 }
 
-xul|*.radio-label-box {
-  -moz-appearance: none;
-}
-
 xul|menulist:-moz-focusring > xul|*.menulist-label-box {
   outline: none;
 }
 
 html|input[type="checkbox"]:-moz-focusring + html|label:before {
   outline: 1px dotted;
 }