Bug 1518807 - Icons and images are visible on high contrast mode. r=jaws a=pascalc
authorErica Wright <ewright@mozilla.com>
Thu, 21 Mar 2019 17:51:52 +0000
changeset 525810 f97ab548d6f1f30cca81c743364ba560d50b8222
parent 525809 4ebcdc4fd000d0fe0c4f9efd5b629c0bc4167b4e
child 525811 111a68271a2dfc91a27d30a1496024728ebaa5ce
push id2032
push userffxbld-merge
push dateMon, 13 May 2019 09:36:57 +0000
treeherdermozilla-release@455c1065dcbe [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersjaws, pascalc
bugs1518807
milestone67.0
Bug 1518807 - Icons and images are visible on high contrast mode. r=jaws a=pascalc High contrast mode does not render background images, set as list-style image instead. Fix fill colors for other icons. Differential Revision: https://phabricator.services.mozilla.com/D23943
browser/themes/shared/incontentprefs/privacy.css
--- a/browser/themes/shared/incontentprefs/privacy.css
+++ b/browser/themes/shared/incontentprefs/privacy.css
@@ -13,16 +13,21 @@
 }
 
 .content-blocking-checkbox .checkbox-icon {
   margin-inline-end: 8px;
   margin-inline-start: 4px;
   width: 16px;
 }
 
+.content-blocking-category .checkbox-label-box {
+  -moz-context-properties: fill;
+  fill: currentColor;
+}
+
 #contentBlockingTrackingProtectionCheckbox > .checkbox-label-box {
   list-style-image: url("chrome://browser/skin/controlcenter/trackers.svg");
 }
 
 #contentBlockingTrackingProtectionCheckbox[checked] > .checkbox-label-box {
   list-style-image: url("chrome://browser/skin/controlcenter/trackers-disabled.svg");
 }
 
@@ -92,23 +97,21 @@
   margin-top: 10px;
 }
 
 #contentBlockingCategories {
   margin-top: 16px;
 }
 
 #trackingProtectionShield {
-  background-image: url("chrome://browser/skin/controlcenter/tracking-protection.svg");
+  list-style-image: url("chrome://browser/skin/controlcenter/tracking-protection.svg");
   -moz-context-properties: fill;
   fill: #737373;
   width: 64px;
   height: 64px;
-  background-repeat: no-repeat;
-  background-size: contain;
   margin-inline-end: 10px;
 }
 
 .content-blocking-category {
   border-radius: 4px;
   margin: 3px 0;
   padding: 9px;
   border: 1px solid #D7D7DB;