Bug 1462635 - Fix disabled text color in webext theme styled popups. r=ntim

MozReview-Commit-ID: myI1PNipvK

--HG--
extra : rebase_source : 6df227c1bd260dbb296e5b269e6c5c39606db386

browser/components/nsBrowserGlue.js

@@ -743,6 +743,9 @@ BrowserGlue.prototype = {
       iconURL: "resource:///chrome/browser/content/browser/defaultthemes/light.icon.svg",
       textcolor: "black",
       accentcolor: "white",
+      popup: "#fff",
+      popup_text: "#0c0c0d",
+      popup_border: "#ccc",
       author: vendorShortName,
     });
     LightweightThemeManager.addBuiltInTheme({

browser/modules/ThemeVariableMap.jsm

@@ -77,28 +77,7 @@ const ThemeVariableMap = [
     lwtProperty: "popup"
   }],
   ["--autocomplete-popup-color", {
-    lwtProperty: "popup_text",
-    processColor(rgbaChannels, element) {
-      const secondaryVariable = "--autocomplete-popup-secondary-color";
-
-      if (!rgbaChannels) {
-        element.removeAttribute("lwt-popup-brighttext");
-        element.style.removeProperty(secondaryVariable);
-        return null;
-      }
-
-      let {r, g, b, a} = rgbaChannels;
-      let luminance = 0.2125 * r + 0.7154 * g + 0.0721 * b;
-
-      if (luminance <= 110) {
-        element.removeAttribute("lwt-popup-brighttext");
-      } else {
-        element.setAttribute("lwt-popup-brighttext", "true");
-      }
-
-      element.style.setProperty(secondaryVariable, `rgba(${r}, ${g}, ${b}, 0.5)`);
-      return `rgba(${r}, ${g}, ${b}, ${a})`;
-    }
+    lwtProperty: "popup_text"
   }],
   ["--autocomplete-popup-border-color", {
     lwtProperty: "popup_border"

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

@@ -609,7 +609,7 @@ toolbarbutton[constrain-size="true"][cui-areatype="menu-panel"] > .toolbarbutton
   text-align: center;
   text-shadow: none;
   max-width: 15em;
-  color: GrayText;
+  color: var(--panel-disabled-color);
 }
 
 /* The boxes with "instructions" get extra top and bottom padding for space
@@ -651,7 +651,7 @@ toolbarbutton[constrain-size="true"][cui-areatype="menu-panel"] > .toolbarbutton
 }
 
 .PanelUI-remotetabs-notabsforclient-label {
-  color: GrayText;
+  color: var(--panel-disabled-color);
   /* This margin is to line this label up with the labels in toolbarbuttons. */
   margin-left: 28px;
 }
@@ -707,7 +707,7 @@ toolbarbutton[constrain-size="true"][cui-areatype="menu-panel"] > .toolbarbutton
 }
 
 #PanelUI-remotetabs-tabslist > label[itemtype="client"] {
-  color: GrayText;
+  color: var(--panel-disabled-color);
 }
 
 /* Collapse the non-active vboxes in the remotetabs deck to use only the
@@ -863,7 +863,7 @@ panelview .toolbarbutton-1,
 .subviewbutton[shortcut]::after {
   content: attr(shortcut);
   float: right;
-  opacity: 0.5;
+  color: var(--panel-disabled-color);
 }
 
 .PanelUI-subView .subviewbutton-nav::after {
@@ -994,7 +994,7 @@ panelmultiview .toolbaritem-combined-buttons > spacer.after-label {
 }
 
 .subview-subheader {
-  color: GrayText;
+  color: var(--panel-disabled-color);
 }
 
 .subview-subheader,
@@ -1137,7 +1137,7 @@ menuitem.panel-subview-footer@menuStateActive@,
   -moz-box-pack: end;
   margin-inline-start: 10px;
   margin-inline-end: auto;
-  color: GrayText;
+  color: var(--panel-disabled-color);
 }
 
 #PanelUI-remotetabs-tabslist > toolbarbutton[itemtype="tab"],
@@ -1379,7 +1379,7 @@ toolbarpaletteitem[place="menu-panel"] > .subviewbutton-nav::after {
 }
 
 #PanelUI-panic-actionlist-main-label {
-  color: GrayText;
+  color: var(--panel-disabled-color);
   font-size: 0.9em;
 }
 
@@ -1548,7 +1548,7 @@ toolbarpaletteitem[place="menu-panel"] > .subviewbutton-nav::after {
 }
 
 .subviewbutton.download > .toolbarbutton-text > .status-text {
-  color: GrayText;
+  color: var(--panel-disabled-color);
   font-size: .9em;
 }
 

browser/themes/shared/searchbar.inc.css

@@ -49,7 +49,7 @@
   border-top: 1px solid var(--panel-separator-color);
   margin: 0;
   padding: 3px 6px;
-  color: var(--autocomplete-popup-secondary-color);
+  color: var(--panel-disabled-color);
 }
 
 .search-panel-header > label {
@@ -84,7 +84,7 @@
   background-size: 1px auto;
   background-repeat: no-repeat;
   background-position: right center;
-  color: var(--autocomplete-popup-secondary-color);
+  color: var(--panel-disabled-color);
 }
 
 .searchbar-engine-one-off-item:-moz-locale-dir(rtl) {

browser/themes/shared/urlbar-autocomplete.inc.css

@@ -10,13 +10,9 @@
   --autocomplete-popup-border-color: ThreeDShadow;
   --autocomplete-popup-highlight-background: Highlight;
   --autocomplete-popup-highlight-color: HighlightText;
-  --autocomplete-popup-secondary-color: GrayText;
 }
 
-:root:-moz-lwtheme {
-  --autocomplete-popup-background: #fff;
-  --autocomplete-popup-color: #0c0c0d;
-  --autocomplete-popup-secondary-color: #737373;
+:root[lwt-popup-darktext] {
   --urlbar-popup-url-color: hsl(210, 77%, 47%);
   --urlbar-popup-action-color: hsl(178, 100%, 28%);
 }
@@ -64,7 +60,7 @@
 /* Awesomebar popup items */
 
 .ac-separator:not([selected=true]) {
-  color: var(--autocomplete-popup-secondary-color);
+  color: var(--panel-disabled-color);
 }
 
 .ac-url:not([selected=true]) {

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

@@ -164,9 +164,16 @@ add_task(async function test_popup_url() {
   Assert.equal(root.getAttribute("lwt-popup-brighttext"),
                "",
                "brighttext should not be set!");
+  Assert.equal(root.getAttribute("lwt-popup-darktext"),
+               "true",
+               "darktext should be set!");
 
   await extension.unload();
 
+  Assert.equal(root.hasAttribute("lwt-popup-darktext"),
+               false,
+               "lwt-popup-darktext attribute should be removed");
+
   // Load a manifest with popup_text being bright. Test for bright text properties.
   extension = ExtensionTestUtils.loadExtension({
     manifest: {
@@ -216,6 +223,9 @@ add_task(async function test_popup_url() {
   Assert.equal(root.getAttribute("lwt-popup-brighttext"),
                "true",
                "brighttext should be set to true!");
+  Assert.equal(root.getAttribute("lwt-popup-darktext"),
+               "",
+               "darktext should not be set!");
 
   await extension.unload();
 
@@ -224,6 +234,9 @@ add_task(async function test_popup_url() {
   Assert.equal(root.getAttribute("lwt-popup-brighttext"),
                "",
                "brighttext should not be set!");
+  Assert.equal(root.getAttribute("lwt-popup-dakrtext"),
+               "",
+               "darktext should not be set!");
 
   // Calculate what GrayText should be. May differ between platforms.
   let span = document.createElement("span");

toolkit/modules/LightweightThemeConsumer.jsm

@@ -28,8 +28,7 @@ const toolkitVariableMap = [
       }
       // Remove the alpha channel
       const {r, g, b} = rgbaChannels;
-      const luminance = _getLuminance(r, g, b);
-      element.setAttribute("lwthemetextcolor", luminance <= 110 ? "dark" : "bright");
+      element.setAttribute("lwthemetextcolor", _isTextColorDark(r, g, b) ? "dark" : "bright");
       return `rgba(${r}, ${g}, ${b})`;
     }
   }],
@@ -37,7 +36,30 @@ const toolkitVariableMap = [
     lwtProperty: "popup"
   }],
   ["--arrowpanel-color", {
-    lwtProperty: "popup_text"
+    lwtProperty: "popup_text",
+    processColor(rgbaChannels, element) {
+      const disabledColorVariable = "--panel-disabled-color";
+
+      if (!rgbaChannels) {
+        element.removeAttribute("lwt-popup-brighttext");
+        element.removeAttribute("lwt-popup-darktext");
+        element.style.removeProperty(disabledColorVariable);
+        return null;
+      }
+
+      let {r, g, b, a} = rgbaChannels;
+
+      if (_isTextColorDark(r, g, b)) {
+        element.removeAttribute("lwt-popup-brighttext");
+        element.setAttribute("lwt-popup-darktext", "true");
+      } else {
+        element.removeAttribute("lwt-popup-darktext");
+        element.setAttribute("lwt-popup-brighttext", "true");
+      }
+
+      element.style.setProperty(disabledColorVariable, `rgba(${r}, ${g}, ${b}, 0.5)`);
+      return `rgba(${r}, ${g}, ${b}, ${a})`;
+    }
   }],
   ["--arrowpanel-border-color", {
     lwtProperty: "popup_border"
@@ -53,8 +75,7 @@ const toolkitVariableMap = [
         return null;
       }
       const {r, g, b, a} = rgbaChannels;
-      const luminance = _getLuminance(r, g, b);
-      if (luminance <= 110) {
+      if (_isTextColorDark(r, g, b)) {
         element.removeAttribute("lwt-toolbar-field-brighttext");
       } else {
         element.setAttribute("lwt-toolbar-field-brighttext", "true");
@@ -263,6 +284,6 @@ function _parseRGBA(aColorString) {
   };
 }
 
-function _getLuminance(r, g, b) {
-  return 0.2125 * r + 0.7154 * g + 0.0721 * b;
+function _isTextColorDark(r, g, b) {
+  return (0.2125 * r + 0.7154 * g + 0.0721 * b) <= 110;
 }

toolkit/themes/linux/global/global.css

@@ -33,6 +33,7 @@ progressmeter[mode="undetermined"] {
   --arrowpanel-background: -moz-field;
   --arrowpanel-color: -moz-fieldText;
   --arrowpanel-border-color: ThreeDShadow;
+  --panel-disabled-color: GrayText;
 }
 
 /* ::::: root elements ::::: */

toolkit/themes/osx/global/global.css

@@ -21,6 +21,8 @@ menulist > menupopup {
   --arrowpanel-color: hsl(0,0%,10%);
   --arrowpanel-border-color: hsla(210,4%,10%,.05);
   --arrowpanel-border-radius: 3.5px;
+  --panel-disabled-color: GrayText;
+
   --focus-ring-box-shadow: @focusRingShadow@;
 }
 

toolkit/themes/windows/global/global.css

@@ -23,6 +23,7 @@ menulist > menupopup {
   --arrowpanel-background: -moz-field;
   --arrowpanel-color: -moz-FieldText;
   --arrowpanel-border-color: ThreeDShadow;
+  --panel-disabled-color: GrayText;
 }
 
 @media (-moz-windows-default-theme) {