Bug 1450554 - Fix identity box security color on dark themes. r=johannh

MozReview-Commit-ID: 4ulHEEAMonP

--HG--
extra : rebase_source : 22354196277b1c253c9cfd7cc657e4902f257b86

browser/components/nsBrowserGlue.js

@@ -718,6 +718,7 @@ BrowserGlue.prototype = {
       popup: "#4a4a4f",
       popup_text: "rgb(249, 249, 250)",
       popup_border: "#27272b",
+      toolbar_field_text: "rgb(249, 249, 250)",
       author: vendorShortName,
     });
 

browser/themes/shared/compacttheme.inc.css

@@ -83,10 +83,6 @@ toolbar[brighttext] .toolbarbutton-1 {
   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);
 }

browser/themes/shared/identity-block/identity-block.inc.css

@@ -30,6 +30,11 @@
 #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);

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

@@ -36,8 +36,12 @@ add_task(async function test_support_toolbar_field_properties() {
 
   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");
@@ -63,8 +67,60 @@ add_task(async function test_support_toolbar_field_properties() {
     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();
 });

toolkit/modules/LightweightThemeConsumer.jsm

@@ -29,7 +29,7 @@ const toolkitVariableMap = [
         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";
@@ -48,7 +48,21 @@ const toolkitVariableMap = [
     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})`;
+    }
   }],
 ];
 
@@ -243,3 +257,7 @@ function _parseRGBA(aColorString) {
     a: 3 in rgba ? rgba[3] : 1,
   };
 }
+
+function _getLuminance(r, g, b) {
+  return 0.2125 * r + 0.7154 * g + 0.0721 * b;
+}