Bug 1450554 - Fix identity box security color on dark themes. r=johannh draft
authorTim Nguyen <ntim.bugs@gmail.com>
Thu, 26 Apr 2018 10:48:22 +0100
changeset 788334 22354196277b1c253c9cfd7cc657e4902f257b86
parent 788060 9b66db25a4e39f94a90c8161187466b61a7a2d03
push id107961
push userbmo:ntim.bugs@gmail.com
push dateThu, 26 Apr 2018 09:49:05 +0000
reviewersjohannh
bugs1450554
milestone61.0a1
Bug 1450554 - Fix identity box security color on dark themes. r=johannh MozReview-Commit-ID: 4ulHEEAMonP
browser/components/nsBrowserGlue.js
browser/themes/shared/compacttheme.inc.css
browser/themes/shared/identity-block/identity-block.inc.css
toolkit/components/extensions/test/browser/browser_ext_themes_toolbar_fields.js
toolkit/modules/LightweightThemeConsumer.jsm
--- a/browser/components/nsBrowserGlue.js
+++ b/browser/components/nsBrowserGlue.js
@@ -712,16 +712,17 @@ BrowserGlue.prototype = {
       name: gBrowserBundle.GetStringFromName("darkTheme.name"),
       description: gBrowserBundle.GetStringFromName("darkTheme.description"),
       iconURL: "resource:///chrome/browser/content/browser/defaultthemes/dark.icon.svg",
       textcolor: "white",
       accentcolor: "black",
       popup: "#4a4a4f",
       popup_text: "rgb(249, 249, 250)",
       popup_border: "#27272b",
+      toolbar_field_text: "rgb(249, 249, 250)",
       author: vendorShortName,
     });
 
     Normandy.init();
 
     // Initialize the default l10n resource sources for L10nRegistry.
     let locales = Services.locale.getPackagedLocales();
     const appSource = new FileSource("app", locales, "resource://app/localization/{locale}/");
--- a/browser/themes/shared/compacttheme.inc.css
+++ b/browser/themes/shared/compacttheme.inc.css
@@ -78,19 +78,15 @@ toolbar[brighttext] .toolbarbutton-1 {
 }
 
 /* URL bar and search bar*/
 #urlbar:not([focused="true"]),
 .searchbar-textbox:not([focused="true"]) {
   border-color: var(--chrome-nav-bar-controls-border-color);
 }
 
-#urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity > #identity-icon-labels:-moz-lwtheme-brighttext {
-  color: #30e60b;
-}
-
 #urlbar-zoom-button:-moz-lwtheme-brighttext:hover {
   background-color: rgba(255,255,255,.2);
 }
 
 #urlbar-zoom-button:-moz-lwtheme-brighttext:hover:active {
   background-color: rgba(255,255,255,.3);
 }
--- a/browser/themes/shared/identity-block/identity-block.inc.css
+++ b/browser/themes/shared/identity-block/identity-block.inc.css
@@ -25,16 +25,21 @@
 #identity-box[open=true] {
   background-color: hsla(0,0%,70%,.3);
   fill-opacity: .8;
 }
 
 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity > #identity-icon-labels {
   color: #058B00;
 }
+
+:root[lwt-toolbar-field-brighttext] #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity > #identity-icon-labels {
+  color: #30e60b;
+}
+
 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI > #identity-icon-labels {
 %ifdef MOZ_OFFICIAL_BRANDING
   color: rgb(229,115,0);
 %else
   color: inherit;
 %endif
 }
 
--- a/toolkit/components/extensions/test/browser/browser_ext_themes_toolbar_fields.js
+++ b/toolkit/components/extensions/test/browser/browser_ext_themes_toolbar_fields.js
@@ -31,18 +31,22 @@ add_task(async function test_support_too
     },
     files: {
       "image1.png": BACKGROUND,
     },
   });
 
   await extension.startup();
 
+  let root = document.documentElement;
   // Remove the `remotecontrol` attribute since it interferes with the urlbar styling.
-  document.documentElement.removeAttribute("remotecontrol");
+  root.removeAttribute("remotecontrol");
+  registerCleanupFunction(() => {
+    root.setAttribute("remotecontrol", "true");
+  });
 
   let toolbox = document.querySelector("#navigator-toolbox");
   let searchbar = document.querySelector("#searchbar");
   let fields = [
     toolbox.querySelector("#urlbar"),
     document.getAnonymousElementByAttribute(searchbar, "anonid", "searchbar-textbox"),
   ].filter(field => {
     let bounds = field.getBoundingClientRect();
@@ -58,13 +62,65 @@ add_task(async function test_support_too
                  hexToCSS(TOOLBAR_FIELD_BACKGROUND),
                  "Field background should be set.");
     Assert.equal(window.getComputedStyle(field).color,
                  hexToCSS(TOOLBAR_FIELD_COLOR),
                  "Field color should be set.");
     testBorderColor(field, TOOLBAR_FIELD_BORDER);
   }
 
-  // Restore the `remotecontrol` attribute at the end of the test.
-  document.documentElement.setAttribute("remotecontrol", "true");
+  await extension.unload();
+});
+
+add_task(async function test_support_toolbar_field_brighttext() {
+  let root = document.documentElement;
+  // Remove the `remotecontrol` attribute since it interferes with the urlbar styling.
+  root.removeAttribute("remotecontrol");
+  registerCleanupFunction(() => {
+    root.setAttribute("remotecontrol", "true");
+  });
+  let toolbox = document.querySelector("#navigator-toolbox");
+  let urlbar = toolbox.querySelector("#urlbar");
+
+  let extension = ExtensionTestUtils.loadExtension({
+    manifest: {
+      "theme": {
+        "colors": {
+          "accentcolor": ACCENT_COLOR,
+          "textcolor": TEXT_COLOR,
+          "toolbar_field": "#fff",
+          "toolbar_field_text": "#000",
+        },
+      },
+    },
+  });
+
+  await extension.startup();
+
+  Assert.equal(window.getComputedStyle(urlbar).color,
+               hexToCSS("#000000"), "Color has been set");
+  Assert.ok(!root.hasAttribute("lwt-toolbar-field-brighttext"),
+            "Brighttext attribute should not be set");
+
+  await extension.unload();
+
+  extension = ExtensionTestUtils.loadExtension({
+    manifest: {
+      "theme": {
+        "colors": {
+          "accentcolor": ACCENT_COLOR,
+          "textcolor": TEXT_COLOR,
+          "toolbar_field": "#000",
+          "toolbar_field_text": "#fff",
+        },
+      },
+    },
+  });
+
+  await extension.startup();
+
+  Assert.equal(window.getComputedStyle(urlbar).color,
+               hexToCSS("#ffffff"), "Color has been set");
+  Assert.ok(root.hasAttribute("lwt-toolbar-field-brighttext"),
+            "Brighttext attribute should be set");
 
   await extension.unload();
 });
--- a/toolkit/modules/LightweightThemeConsumer.jsm
+++ b/toolkit/modules/LightweightThemeConsumer.jsm
@@ -24,17 +24,17 @@ const toolkitVariableMap = [
     lwtProperty: "textcolor",
     processColor(rgbaChannels, element) {
       if (!rgbaChannels) {
         element.removeAttribute("lwthemetextcolor");
         element.removeAttribute("lwtheme");
         return null;
       }
       const {r, g, b, a} = rgbaChannels;
-      const luminance = 0.2125 * r + 0.7154 * g + 0.0721 * b;
+      const luminance = _getLuminance(r, g, b);
       element.setAttribute("lwthemetextcolor", luminance <= 110 ? "dark" : "bright");
       element.setAttribute("lwtheme", "true");
       return `rgba(${r}, ${g}, ${b}, ${a})` || "black";
     }
   }],
   ["--arrowpanel-background", {
     lwtProperty: "popup"
   }],
@@ -43,17 +43,31 @@ const toolkitVariableMap = [
   }],
   ["--arrowpanel-border-color", {
     lwtProperty: "popup_border"
   }],
   ["--lwt-toolbar-field-background-color", {
     lwtProperty: "toolbar_field"
   }],
   ["--lwt-toolbar-field-color", {
-    lwtProperty: "toolbar_field_text"
+    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) {
+        element.removeAttribute("lwt-toolbar-field-brighttext");
+      } else {
+        element.setAttribute("lwt-toolbar-field-brighttext", "true");
+      }
+      return `rgba(${r}, ${g}, ${b}, ${a})`;
+    }
   }],
 ];
 
 // Get the theme variables from the app resource directory.
 // This allows per-app variables.
 ChromeUtils.import("resource:///modules/ThemeVariableMap.jsm");
 
 ChromeUtils.defineModuleGetter(this, "LightweightThemeImageOptimizer",
@@ -238,8 +252,12 @@ function _parseRGBA(aColorString) {
   rgba = rgba.map(x => parseFloat(x));
   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;
+}