Bug 1569757 - [Protections Panel] Clean up colors in panel.inc.css. r=ntim
authoraarushivij <aarushivij@gmail.com>
Thu, 26 Mar 2020 20:17:33 +0000
changeset 520638 ea6106235e2547d955267290cc141e866a82ae83
parent 520637 0d91ed309433e89388b9e0eed2d7bf82e3e59887
child 520639 de94a3c40ad2e87d947aff7ef836f7f8ea444492
push id37254
push usernerli@mozilla.com
push dateFri, 27 Mar 2020 04:48:07 +0000
treeherdermozilla-central@2d758b42bd73 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersntim
bugs1569757
milestone76.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 1569757 - [Protections Panel] Clean up colors in panel.inc.css. r=ntim Differential Revision: https://phabricator.services.mozilla.com/D67534
browser/themes/shared/controlcenter/panel.inc.css
--- a/browser/themes/shared/controlcenter/panel.inc.css
+++ b/browser/themes/shared/controlcenter/panel.inc.css
@@ -19,16 +19,30 @@
   /* Set default fill for icons in the identity popup.
      Individual icons can override this. */
   fill: currentColor;
   --horizontal-padding: 1.78em;
   --vertical-section-padding: 0.9em;
   --height-offset: 0px;
 }
 
+#protections-popup {
+  --protections-popup-description-color: #737373;
+  --protections-popup-switch-off-background: #f9f9fa;
+  --protections-popup-switch-off-hover-background: #c9c9ca;
+  --protections-popup-switch-off-active-background: #b1b1b2;
+}
+
+:root[lwt-popup-brighttext] #protections-popup {
+  --protections-popup-description-color: #f9f9fa;
+  --protections-popup-switch-off-background: #5c5c61;
+  --protections-popup-switch-off-hover-background: #6d6d71;
+  --protections-popup-switch-off-active-background: #737379;
+}
+
 #protections-popup[toast] {
   --popup-width: 27.12em;
 }
 
 #protections-popup[infoMessageShowing] {
   --height-offset: 260px;
 }
 
@@ -528,28 +542,24 @@ description#identity-popup-content-verif
 
 #protections-popup-cookiesView .protections-popup-empty-label {
   margin-inline-start: 24px;
   margin-top: 2px;
   margin-bottom: 4px;
 }
 
 .protections-popup-cookiesView-list-header {
-  color: #737373;
+  color: var(--protections-popup-description-color);
   margin: 5px 0;
 }
 
 #protections-popup-cookiesView-list > .protections-popup-cookiesView-list-section:only-of-type > .protections-popup-cookiesView-list-header {
   display: none;
 }
 
-:root[lwt-popup-brighttext] .protections-popup-cookiesView-list-header {
-  color: #f9f9fa;
-}
-
 .protections-popup-list {
   padding: 5px 20px;
   -moz-box-flex: 1;
   overflow: auto;
 }
 
 .protections-popup-list-item {
   margin: 5px 0;
@@ -652,37 +662,30 @@ description#identity-popup-content-verif
 }
 
 /* Content Blocking categories */
 
 #protections-popup-no-trackers-found-description {
   margin: 4.85em 7.25em;
   font-size: 1.1em;
   text-align: center;
-  color: #737373;
+  color: var(--protections-popup-description-color);
 }
 
 #protections-popup-content {
   padding: 0;
   margin: 0 0 var(--vertical-section-padding) 0;
 }
 
 #protections-popup-blocking-section-header,
 #protections-popup-not-blocking-section-header,
 #protections-popup-not-found-section-header {
   margin: 0;
   padding: var(--vertical-section-padding) var(--horizontal-padding);
-  color: #737373;
-}
-
-:root[lwt-popup-brighttext] #protections-popup-no-trackers-found-description,
-:root[lwt-popup-brighttext] #protections-popup-blocking-section-header,
-:root[lwt-popup-brighttext] #protections-popup-not-blocking-section-header,
-:root[lwt-popup-brighttext] #protections-popup-not-found-section-header {
-  color: #f9f9fa;
+  color: var(--protections-popup-description-color);
 }
 
 #tracking-protection-container > tooltip {
   max-width: var(--popup-width);
 }
 /*
  * The category list is split into two sections: "Blocking" and "Not Blocking",
  * with five different category items distributed between them at runtime.
@@ -979,17 +982,17 @@ description#identity-popup-content-verif
   font-weight: 600;
 }
 
 .protections-popup-tp-switch {
   -moz-appearance: none;
   box-sizing: border-box;
   min-width: 26px;
   border-radius: 10px;
-  background-color: #F9F9FA;
+  background-color: var(--protections-popup-switch-off-background);
   border: 1px solid hsla(210,4%,10%,.14);
   margin-top: 4px;
   margin-bottom: 4px;
   margin-inline-start: 1px;
   padding: 2px;
   padding-inline-end: 0;
   transition: padding .2s ease;
 }
@@ -1016,33 +1019,21 @@ description#identity-popup-content-verif
   background-color: #003EAA;
 }
 
 .protections-popup-tp-switch[enabled]:hover:active {
   background-color: #002275;
 }
 
 .protections-popup-tp-switch:not([enabled]):hover {
-  background-color: #C9C9CA;
+  background-color: var(--protections-popup-switch-off-hover-background);
 }
 
 .protections-popup-tp-switch:not([enabled]):hover:active {
-  background-color: #B1B1B2;
-}
-
-:root[lwt-popup-brighttext] .protections-popup-tp-switch:not([enabled]) {
-  background-color: #5C5C61;
-}
-
-:root[lwt-popup-brighttext] .protections-popup-tp-switch:not([enabled]):hover {
-  background-color: #6D6D71;
-}
-
-:root[lwt-popup-brighttext] .protections-popup-tp-switch:not([enabled]):hover:active {
-  background-color: #737379;
+  background-color: var(--protections-popup-switch-off-active-background);
 }
 
 #protections-popup-siteNotWorkingView-body-issue-list {
   padding-inline-start: 1em;
 }
 
 /* Protection popup footer categories */
 
@@ -1081,21 +1072,17 @@ description#identity-popup-content-verif
 }
 
 #protections-popup-trackers-blocked-counter-box[showing] {
   visibility: visible;
   opacity: 1;
 }
 
 #protections-popup-trackers-blocked-counter-description {
-  color: #737373;
-}
-
-:root[lwt-popup-brighttext] #protections-popup-trackers-blocked-counter-description {
-  color: #f9f9fa;
+  color: var(--protections-popup-description-color);
 }
 
 .protections-popup-description {
   border-bottom: 1px solid var(--panel-separator-color);
 }
 
 .protections-popup-description > description {
   margin: 10px 24px;