Bug 1668857 - Unify styling for description text for panels using new `--panel-description-color` variable. r=ntim,extension-reviewers,zombie

Differential Revision: https://phabricator.services.mozilla.com/D92658

browser/themes/shared/controlcenter/panel.inc.css

@@ -25,14 +25,12 @@
 }
 
 #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;
@@ -166,8 +164,7 @@
 }
 #identity-popup-security-httpsonlymode-info {
   font-size: 0.85em;
-  /* Temporary, will fix that with bug 1668857 */
-  opacity: 0.65;
+  color: var(--panel-description-color);
 }
 
 .identity-popup-connection-secure.upgraded {
@@ -343,7 +340,7 @@
 
 #identity-popup-permissions-content > description,
 #protections-popup-content > description {
-  color: var(--panel-disabled-color);
+  color: var(--panel-description-color);
 }
 
 /* This element needs the pre-wrap because we add newlines to it in the code. */
@@ -547,7 +544,7 @@ description#identity-popup-content-verifier,
 
 .protections-popup-empty-label {
   margin-inline-start: 0;
-  color: var(--panel-disabled-color);
+  color: var(--panel-description-color);
 }
 
 .protections-popup-trackersView-empty-image {
@@ -563,7 +560,7 @@ description#identity-popup-content-verifier,
 }
 
 .protections-popup-cookiesView-list-header {
-  color: var(--protections-popup-description-color);
+  color: var(--panel-description-color);
   margin: 5px 0;
 }
 
@@ -652,7 +649,7 @@ description#identity-popup-content-verifier,
   margin: 4.85em 7.25em;
   font-size: 1.1em;
   text-align: center;
-  color: var(--protections-popup-description-color);
+  color: var(--panel-description-color);
 }
 
 #protections-popup-content {
@@ -665,7 +662,7 @@ description#identity-popup-content-verifier,
 #protections-popup-not-found-section-header {
   margin: 0;
   padding: var(--vertical-section-padding) var(--horizontal-padding);
-  color: var(--protections-popup-description-color);
+  color: var(--panel-description-color);
 }
 
 #tracking-protection-container > tooltip {
@@ -705,8 +702,8 @@ description#identity-popup-content-verifier,
 }
 
 .protections-popup-category.notFound {
-  color: var(--panel-disabled-color);
-  fill: var(--panel-disabled-color);
+  color: var(--panel-description-color);
+  fill: var(--panel-description-color);
 }
 
 .protections-popup-category.notFound:hover {
@@ -809,7 +806,7 @@ description#identity-popup-content-verifier,
 }
 
 .identity-popup-permission-state-label {
-  color: var(--panel-disabled-color);
+  color: var(--panel-description-color);
 }
 
 #protections-popup[hasException] .protections-popup-category-state-label {
@@ -1034,12 +1031,12 @@ description#identity-popup-content-verifier,
 }
 
 #protections-popup-trackers-blocked-counter-description {
-  color: var(--protections-popup-description-color);
+  color: var(--panel-description-color);
 }
 
 #protections-popup-footer-protection-type-label {
     margin-inline-end: var(--horizontal-padding);
-    color: var(--protections-popup-description-color);
+    color: var(--panel-description-color);
 }
 
 .protections-popup-description {

browser/themes/shared/customizableui/panelUI.inc.css

@@ -811,7 +811,7 @@ toolbarbutton[constrain-size="true"][cui-areatype="menu-panel"] > .toolbarbutton
 }
 
 #fxa-menu-header-description {
-  color: var(--panel-disabled-color);
+  color: var(--panel-description-color);
 }
 
 #fxa-menu-avatar {
@@ -934,7 +934,7 @@ panelmultiview[mainViewId="PanelUI-fxa"] #PanelUI-remotetabs-syncnow {
 }
 
 .PanelUI-remotetabs-notabsforclient-label {
-  color: var(--panel-disabled-color);
+  color: var(--panel-description-color);
   /* This margin is to line this label up with the labels in toolbarbuttons. */
   margin-inline-start: 28px;
 }
@@ -990,7 +990,7 @@ panelmultiview[mainViewId="PanelUI-fxa"] #PanelUI-remotetabs-syncnow {
 }
 
 .PanelUI-remotetabs-clientcontainer > label[itemtype="client"] {
-  color: var(--panel-disabled-color);
+  color: var(--panel-description-color);
 }
 
 /* Collapse the non-active vboxes in the remotetabs deck to use only the
@@ -1305,7 +1305,7 @@ panelmultiview .toolbaritem-combined-buttons > spacer.after-label {
 }
 
 .subview-subheader {
-  color: var(--panel-disabled-color);
+  color: var(--panel-description-color);
 }
 
 panelview .toolbarbutton-1 {
@@ -1618,7 +1618,7 @@ toolbarpaletteitem[place="menu-panel"] > .subviewbutton-nav::after {
 }
 
 #PanelUI-panic-actionlist-main-label {
-  color: var(--panel-disabled-color);
+  color: var(--panel-description-color);
   font-size: 0.9em;
 }
 
@@ -1789,7 +1789,7 @@ toolbarpaletteitem[place="menu-panel"] > .subviewbutton-nav::after {
 }
 
 .subviewbutton.download > .toolbarbutton-text > .status-text {
-  color: var(--panel-disabled-color);
+  color: var(--panel-description-color);
   font-size: .9em;
 }
 
@@ -2294,7 +2294,7 @@ panelview:not([mainview]) #PanelUI-whatsNew-title {
 #PanelUI-profiler-content-description {
   margin: 4px 15px;
   font-size: 12px;
-  opacity: 0.75;
+  color: var(--panel-description-color);
 }
 
 #PanelUI-profiler-content-recording {

toolkit/components/extensions/test/browser/browser_ext_themes_arrowpanels.js

@@ -74,6 +74,12 @@ add_task(async function test_popup_styling(browser, accDoc) {
         "Popup text color should have been themed"
       );
 
+      Assert.equal(
+        arrowContentComputedStyle.getPropertyValue("--panel-description-color"),
+        `rgba(${hexToRGB(POPUP_TEXT_COLOR).join(", ")}, 0.65)`,
+        "Popup text description color should have been themed"
+      );
+
       // Ensure popup border color was set properly
       if (AppConstants.platform == "macosx") {
         Assert.ok(

toolkit/modules/LightweightThemeConsumer.jsm

@@ -71,10 +71,12 @@ const toolkitVariableMap = [
       lwtProperty: "popup_text",
       processColor(rgbaChannels, element) {
         const disabledColorVariable = "--panel-disabled-color";
+        const descriptionColorVariable = "--panel-description-color";
 
         if (!rgbaChannels) {
           element.removeAttribute("lwt-popup-brighttext");
           element.style.removeProperty(disabledColorVariable);
+          element.style.removeProperty(descriptionColorVariable);
           return null;
         }
 
@@ -90,6 +92,10 @@ const toolkitVariableMap = [
           disabledColorVariable,
           `rgba(${r}, ${g}, ${b}, 0.5)`
         );
+        element.style.setProperty(
+          descriptionColorVariable,
+          `rgba(${r}, ${g}, ${b}, 0.65)`
+        );
         return `rgba(${r}, ${g}, ${b}, ${a})`;
       },
     },

toolkit/themes/linux/global/global.css

@@ -24,6 +24,7 @@
   --arrowpanel-border-color: var(--default-arrowpanel-border-color);
   --arrowpanel-padding: 10px;
   --panel-disabled-color: GrayText;
+  --panel-description-color: GrayText;
   /* ::::: Styles ::::: */
   appearance: auto;
   -moz-default-appearance: dialog;

toolkit/themes/osx/global/global.css

@@ -16,6 +16,7 @@
   --arrowpanel-border-color: var(--default-arrowpanel-border-color);
   --arrowpanel-border-radius: 3.5px;
   --panel-disabled-color: GrayText;
+  --panel-description-color: hsl(0,0%,50%);
 
   --focus-ring-box-shadow: 0 0 0 1px -moz-mac-focusring inset, 0 0 0 1px -moz-mac-focusring;
   /* ::::: Styles ::::: */

toolkit/themes/windows/global/global.css

@@ -18,6 +18,7 @@
   --arrowpanel-color: var(--default-arrowpanel-color);
   --arrowpanel-border-color: var(--default-arrowpanel-border-color);
   --panel-disabled-color: GrayText;
+  --panel-description-color: GrayText;
   /* ::::: Styles ::::: */
   background-color: -moz-Dialog;
   color: -moz-DialogText;