Bug 1462635 - Fix disabled text color in webext theme styled popups. r=ntim
authorDão Gottwald <dao@mozilla.com>
Sat, 26 May 2018 18:45:06 +0200
changeset 420017 9b7db28b360d85d57cfdd3da2154b2dfa8bd938e
parent 420016 17435403f576ac63da2403dc23e12681683a2b18
child 420024 4e9446f9e8f0a75c7ffe063f1dfb311cc90d56cf
child 420025 4ca92bdfeca8dcbb32aa62512d5b0903d38fe651
push id34057
push useraciure@mozilla.com
push dateSat, 26 May 2018 22:16:18 +0000
treeherdermozilla-central@9b7db28b360d [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersntim
bugs1462635
milestone62.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 1462635 - Fix disabled text color in webext theme styled popups. r=ntim MozReview-Commit-ID: myI1PNipvK
browser/components/nsBrowserGlue.js
browser/modules/ThemeVariableMap.jsm
browser/themes/shared/customizableui/panelUI.inc.css
browser/themes/shared/searchbar.inc.css
browser/themes/shared/urlbar-autocomplete.inc.css
toolkit/components/extensions/test/browser/browser_ext_themes_autocomplete_popup.js
toolkit/modules/LightweightThemeConsumer.jsm
toolkit/themes/linux/global/global.css
toolkit/themes/osx/global/global.css
toolkit/themes/windows/global/global.css
--- a/browser/components/nsBrowserGlue.js
+++ b/browser/components/nsBrowserGlue.js
@@ -738,16 +738,19 @@ BrowserGlue.prototype = {
 
     LightweightThemeManager.addBuiltInTheme({
       id: "firefox-compact-light@mozilla.org",
       name: gBrowserBundle.GetStringFromName("lightTheme.name"),
       description: gBrowserBundle.GetStringFromName("lightTheme.description"),
       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({
       id: "firefox-compact-dark@mozilla.org",
       name: gBrowserBundle.GetStringFromName("darkTheme.name"),
       description: gBrowserBundle.GetStringFromName("darkTheme.description"),
       iconURL: "resource:///chrome/browser/content/browser/defaultthemes/dark.icon.svg",
       textcolor: "white",
--- a/browser/modules/ThemeVariableMap.jsm
+++ b/browser/modules/ThemeVariableMap.jsm
@@ -72,38 +72,17 @@ const ThemeVariableMap = [
   }],
   ["--lwt-selected-tab-background-color", {
     lwtProperty: "tab_selected"
   }],
   ["--autocomplete-popup-background", {
     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"
   }],
   ["--autocomplete-popup-highlight-background", {
     lwtProperty: "popup_highlight"
   }],
   ["--autocomplete-popup-highlight-color", {
--- a/browser/themes/shared/customizableui/panelUI.inc.css
+++ b/browser/themes/shared/customizableui/panelUI.inc.css
@@ -604,17 +604,17 @@ toolbarbutton[constrain-size="true"][cui
 .PanelUI-remotetabs-instruction-label {
   /* If you change the margin here, the min-height of the synced tabs panel
     (e.g. #PanelUI-remotetabs[mainview] #PanelUI-remotetabs-setupsync, etc) may
     need adjusting (see bug 1248506) */
   margin: 0;
   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
    around the illustration and buttons */
 .PanelUI-remotetabs-instruction-box {
   /* If you change the padding here, the min-height of the synced tabs panel
     (e.g. #PanelUI-remotetabs[mainview] #PanelUI-remotetabs-setupsync, etc) may
     need adjusting (see bug 1248506) */
@@ -646,17 +646,17 @@ toolbarbutton[constrain-size="true"][cui
   background-color: #002275;
 }
 
 .remotetabs-promo-link {
   margin: 0;
 }
 
 .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;
 }
 
 #PanelUI-remotetabs[mainview] .PanelUI-remotetabs-notabsforclient-label {
   margin-left: 32px;
 }
 
@@ -702,17 +702,17 @@ toolbarbutton[constrain-size="true"][cui
                    53px + /* margin of .fxaSyncIllustration */
                    30px + /* margin of .PanelUI-remotetabs-button */
                    16px + /* padding of .PanelUI-remotetabs-button */
                    30px + /* padding of .PanelUI-remotetabs-instruction-box */
                    11em);
 }
 
 #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
    height the active box needs */
 #PanelUI-remotetabs-deck:not([selectedIndex="1"]) > #PanelUI-remotetabs-tabsdisabledpane,
 #PanelUI-remotetabs-deck:not([selectedIndex="2"]) > #PanelUI-remotetabs-fetching,
 #PanelUI-remotetabs-deck:not([selectedIndex="3"]) > #PanelUI-remotetabs-nodevicespane {
   visibility: collapse;
@@ -858,17 +858,17 @@ panelview .toolbarbutton-1,
 .PanelUI-subView .subviewbutton:not(.panel-subview-footer) > .menu-text,
 .PanelUI-subView .subviewbutton:not(.panel-subview-footer) > .menu-iconic-text {
   font: menu;
 }
 
 .subviewbutton[shortcut]::after {
   content: attr(shortcut);
   float: right;
-  opacity: 0.5;
+  color: var(--panel-disabled-color);
 }
 
 .PanelUI-subView .subviewbutton-nav::after {
   -moz-context-properties: fill, fill-opacity;
   content: url(chrome://browser/skin/back-12.svg);
   fill: currentColor;
   fill-opacity: 0.6;
   float: right;
@@ -989,17 +989,17 @@ panelmultiview .toolbaritem-combined-but
 }
 
 .toolbaritem-combined-buttons > .subviewbutton:not(.subviewbutton-iconic) > .toolbarbutton-text {
   font-size: 1em;
   padding-inline-start: 0;
 }
 
 .subview-subheader {
-  color: GrayText;
+  color: var(--panel-disabled-color);
 }
 
 .subview-subheader,
 .panel-subview-footer {
   font: menu;
 }
 
 panelview .toolbarbutton-1 {
@@ -1132,17 +1132,17 @@ menuitem.panel-subview-footer@menuStateA
   margin-inline-start: 6px;
   margin-inline-end: 7px;
 }
 
 .subviewbutton > .menu-accel-container {
   -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"],
 #PanelUI-historyItems > toolbarbutton {
   list-style-image: url("chrome://mozapps/skin/places/defaultFavicon.svg");
   -moz-context-properties: fill;
   fill: currentColor;
 }
@@ -1374,17 +1374,17 @@ toolbarpaletteitem[place="menu-panel"] >
   border: 4px solid #177ee6;
 }
 
 #PanelUI-panic-explanations {
   padding: 10px 10px 0;
 }
 
 #PanelUI-panic-actionlist-main-label {
-  color: GrayText;
+  color: var(--panel-disabled-color);
   font-size: 0.9em;
 }
 
 .PanelUI-panic-actionlist {
   padding-inline-start: 20px;
   padding-top: 2px;
   padding-bottom: 2px;
   background-size: 16px 16px;
@@ -1543,17 +1543,17 @@ toolbarpaletteitem[place="menu-panel"] >
 }
 
 .subviewbutton.download > .toolbarbutton-icon {
   width: 32px;
   height: 32px;
 }
 
 .subviewbutton.download > .toolbarbutton-text > .status-text {
-  color: GrayText;
+  color: var(--panel-disabled-color);
   font-size: .9em;
 }
 
 .subviewbutton.download > .action-button {
   -moz-appearance: none; /* To avoid native Windows hover styling */
   -moz-context-properties: fill, fill-opacity;
   fill: currentColor;
   fill-opacity: 1;
--- a/browser/themes/shared/searchbar.inc.css
+++ b/browser/themes/shared/searchbar.inc.css
@@ -44,17 +44,17 @@
 }
 
 .search-panel-header {
   font-weight: normal;
   background-color: var(--arrowpanel-dimmed);
   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 {
   margin-top: 2px !important;
   margin-bottom: 1px !important;
 }
 
 .search-panel-current-input > label {
@@ -79,17 +79,17 @@
   min-width: 48px;
   height: 32px;
   margin: 0;
   padding: 0;
   background: linear-gradient(transparent 15%, var(--panel-separator-color) 15%, var(--panel-separator-color) 85%, transparent 85%);
   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) {
   background-position-x: left;
 }
 
 .searchbar-engine-one-off-item:not(.last-row) {
   box-sizing: content-box;
--- a/browser/themes/shared/urlbar-autocomplete.inc.css
+++ b/browser/themes/shared/urlbar-autocomplete.inc.css
@@ -5,23 +5,19 @@
 %endif
 
 :root {
   --autocomplete-popup-background: -moz-field;
   --autocomplete-popup-color: -moz-fieldtext;
   --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%);
 }
 
 :root[lwt-popup-brighttext] {
   --urlbar-popup-url-color: #0a84ff;
   --urlbar-popup-action-color: #30e60b;
 }
@@ -59,17 +55,17 @@
 
 :root[uidensity=touch] #PopupAutoCompleteRichResult .autocomplete-richlistitem {
   min-height: 40px;
 }
 
 /* Awesomebar popup items */
 
 .ac-separator:not([selected=true]) {
-  color: var(--autocomplete-popup-secondary-color);
+  color: var(--panel-disabled-color);
 }
 
 .ac-url:not([selected=true]) {
   color: var(--urlbar-popup-url-color);
 }
 
 .ac-action:not([selected=true]) {
   color: var(--urlbar-popup-action-color);
--- a/toolkit/components/extensions/test/browser/browser_ext_themes_autocomplete_popup.js
+++ b/toolkit/components/extensions/test/browser/browser_ext_themes_autocomplete_popup.js
@@ -159,19 +159,26 @@ add_task(async function test_popup_url()
   Assert.equal(window.getComputedStyle(actionText).color,
                `rgb(${hexToRGB(POPUP_ACTION_COLOR_DARK).join(", ")})`,
                `Urlbar popup action color should be set to ${POPUP_ACTION_COLOR_DARK}`);
 
   let root = document.documentElement;
   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: {
       "theme": {
         "images": {
           "headerURL": "image1.png",
         },
         "colors": {
@@ -211,24 +218,30 @@ add_task(async function test_popup_url()
   let separator = document.getAnonymousElementByAttribute(results[1], "anonid", "separator");
   Assert.equal(window.getComputedStyle(separator).color,
                `rgba(${hexToRGB(POPUP_TEXT_COLOR_BRIGHT).join(", ")}, 0.5)`,
                `Urlbar popup separator color should be set to ${POPUP_TEXT_COLOR_BRIGHT} with alpha`);
 
   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();
 
   // Check to see if popup-brighttext and secondary color are not set after
   // unload of theme
   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");
   span.style.color = "GrayText";
   let GRAY_TEXT = window.getComputedStyle(span).color;
 
   separator = document.getAnonymousElementByAttribute(results[1], "anonid", "separator");
   Assert.equal(window.getComputedStyle(separator).color,
--- a/toolkit/modules/LightweightThemeConsumer.jsm
+++ b/toolkit/modules/LightweightThemeConsumer.jsm
@@ -23,43 +23,64 @@ const toolkitVariableMap = [
   ["--lwt-text-color", {
     lwtProperty: "textcolor",
     processColor(rgbaChannels, element) {
       if (!rgbaChannels) {
         rgbaChannels = {r: 0, g: 0, b: 0};
       }
       // 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})`;
     }
   }],
   ["--arrowpanel-background", {
     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"
   }],
   ["--lwt-toolbar-field-background-color", {
     lwtProperty: "toolbar_field"
   }],
   ["--lwt-toolbar-field-color", {
     lwtProperty: "toolbar_field_text",
     processColor(rgbaChannels, element) {
       if (!rgbaChannels) {
         element.removeAttribute("lwt-toolbar-field-brighttext");
         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");
       }
       return `rgba(${r}, ${g}, ${b}, ${a})`;
     }
   }],
 ];
@@ -258,11 +279,11 @@ function _parseRGBA(aColorString) {
   return {
     r: rgba[0],
     g: rgba[1],
     b: rgba[2],
     a: 3 in rgba ? rgba[3] : 1,
   };
 }
 
-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;
 }
--- a/toolkit/themes/linux/global/global.css
+++ b/toolkit/themes/linux/global/global.css
@@ -28,16 +28,17 @@ progressmeter[mode="undetermined"] {
 }
 
 /* ::::: Variables ::::: */
 :root {
   --arrowpanel-padding: 10px;
   --arrowpanel-background: -moz-field;
   --arrowpanel-color: -moz-fieldText;
   --arrowpanel-border-color: ThreeDShadow;
+  --panel-disabled-color: GrayText;
 }
 
 /* ::::: root elements ::::: */
 
 window,
 page,
 dialog,
 wizard {
--- a/toolkit/themes/osx/global/global.css
+++ b/toolkit/themes/osx/global/global.css
@@ -16,16 +16,18 @@ menulist > menupopup {
 
 /* ::::: Variables ::::: */
 :root {
   --arrowpanel-padding: 16px;
   --arrowpanel-background: hsla(0,0%,99%,.975);
   --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@;
 }
 
 /* ::::: root elements ::::: */
 
 window,
 page,
 dialog,
--- a/toolkit/themes/windows/global/global.css
+++ b/toolkit/themes/windows/global/global.css
@@ -18,16 +18,17 @@ menulist > menupopup {
 }
 
 /* ::::: Variables ::::: */
 :root {
   --arrowpanel-padding: 10px;
   --arrowpanel-background: -moz-field;
   --arrowpanel-color: -moz-FieldText;
   --arrowpanel-border-color: ThreeDShadow;
+  --panel-disabled-color: GrayText;
 }
 
 @media (-moz-windows-default-theme) {
   :root {
     --arrowpanel-border-color: hsla(210,4%,10%,.2);
   }
 }