Bug 1450554 - Fix identity box security color on dark themes. r=johannh
authorTim Nguyen <ntim.bugs@gmail.com>
Thu, 26 Apr 2018 10:48:22 +0100
changeset 415770 7e1f48fed0da8bcdb8e7306510b22dadcb800090
parent 415769 c2f10e92f864353ba95e5f48243f452b3d975bcc
child 415771 2978b36c693bc02d93145bf00b308d097016fff4
push id33909
push usershindli@mozilla.com
push dateThu, 26 Apr 2018 21:38:53 +0000
treeherdermozilla-central@975e9b7613aa [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersjohannh
bugs1450554
milestone61.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 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
@@ -713,16 +713,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;
+}