Bug 1423626 - Sanitize accent color to ignore alpha channel. r=jaws
authorTim Nguyen <ntim.bugs@gmail.com>
Mon, 18 Dec 2017 10:50:50 -0600
changeset 448458 dd25e7aba0033b423e09f457ad298787c57a86c9
parent 448457 67c2ae51ba58be51a545e57f49de8d4df2b9c51a
child 448459 017630a4b3712b5763b5bf2a66af1ede585a8ddc
push id8527
push userCallek@gmail.com
push dateThu, 11 Jan 2018 21:05:50 +0000
treeherdermozilla-beta@95342d212a7a [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersjaws
bugs1423626
milestone59.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 1423626 - Sanitize accent color to ignore alpha channel. r=jaws MozReview-Commit-ID: KAV0lpuFDzL
toolkit/components/extensions/test/browser/browser.ini
toolkit/components/extensions/test/browser/browser_ext_themes_alpha_accentcolor.js
toolkit/modules/LightweightThemeConsumer.jsm
--- a/toolkit/components/extensions/test/browser/browser.ini
+++ b/toolkit/components/extensions/test/browser/browser.ini
@@ -1,13 +1,14 @@
 [DEFAULT]
 support-files =
   head.js
 
 [browser_ext_management_themes.js]
+[browser_ext_themes_alpha_accentcolor.js]
 [browser_ext_themes_chromeparity.js]
 [browser_ext_themes_dynamic_getCurrent.js]
 [browser_ext_themes_dynamic_onUpdated.js]
 [browser_ext_themes_dynamic_updates.js]
 [browser_ext_themes_getCurrent_differentExt.js]
 [browser_ext_themes_lwtsupport.js]
 [browser_ext_themes_multiple_backgrounds.js]
 [browser_ext_themes_persistence.js]
new file mode 100644
--- /dev/null
+++ b/toolkit/components/extensions/test/browser/browser_ext_themes_alpha_accentcolor.js
@@ -0,0 +1,30 @@
+"use strict";
+
+add_task(async function test_alpha_accentcolor() {
+  let extension = ExtensionTestUtils.loadExtension({
+    manifest: {
+      "theme": {
+        "images": {
+          "headerURL": "image1.png",
+        },
+        "colors": {
+          "accentcolor": "rgba(230, 128, 0, 0.1)",
+          "textcolor": TEXT_COLOR,
+        },
+      },
+    },
+    files: {
+      "image1.png": BACKGROUND,
+    },
+  });
+
+  await extension.startup();
+
+  let docEl = window.document.documentElement;
+  let style = window.getComputedStyle(docEl);
+
+  Assert.equal(style.backgroundColor, "rgb(230, 128, 0)",
+               "Window background color should be opaque");
+
+  await extension.unload();
+});
--- a/toolkit/modules/LightweightThemeConsumer.jsm
+++ b/toolkit/modules/LightweightThemeConsumer.jsm
@@ -122,23 +122,24 @@ LightweightThemeConsumer.prototype = {
     let root = this._doc.documentElement;
     let active = !!aData.headerURL;
 
     // We need to clear these either way: either because the theme is being removed,
     // or because we are applying a new theme and the data might be bogus CSS,
     // so if we don't reset first, it'll keep the old value.
     root.style.removeProperty("--lwt-text-color");
     root.style.removeProperty("--lwt-accent-color");
-    let textcolor = this._sanitizeCSSColor(aData.textcolor) || "black";
+    let textcolor = aData.textcolor || "black";
     _setProperty(root, active, "--lwt-text-color", textcolor);
     _setProperty(root, active, "--lwt-accent-color", this._sanitizeCSSColor(aData.accentcolor) || "white");
+
     if (active) {
       let dummy = this._doc.createElement("dummy");
       dummy.style.color = textcolor;
-      let [r, g, b] = _parseRGB(this._doc.defaultView.getComputedStyle(dummy).color);
+      let [r, g, b] = _parseRGB(this._win.getComputedStyle(dummy).color);
       let luminance = 0.2125 * r + 0.7154 * g + 0.0721 * b;
       root.setAttribute("lwthemetextcolor", luminance <= 110 ? "dark" : "bright");
       root.setAttribute("lwtheme", "true");
     } else {
       root.removeAttribute("lwthemetextcolor");
       root.removeAttribute("lwtheme");
     }
 
@@ -168,22 +169,23 @@ LightweightThemeConsumer.prototype = {
                                  JSON.stringify(aData));
   },
 
   _sanitizeCSSColor(cssColor) {
     // style.color normalizes color values and rejects invalid ones, so a
     // simple round trip gets us a sanitized color value.
     let span = this._doc.createElementNS("http://www.w3.org/1999/xhtml", "span");
     span.style.color = cssColor;
-    cssColor = span.style.color;
-    if (cssColor == "transparent" ||
-        cssColor == "rgba(0, 0, 0, 0)") {
+    cssColor = this._win.getComputedStyle(span).color;
+    if (cssColor == "rgba(0, 0, 0, 0)" ||
+        !cssColor) {
       return "";
     }
-    return cssColor;
+    // Remove alpha channel from color
+    return `rgb(${_parseRGB(cssColor).join(", ")})`;
   }
 };
 
 function _setImage(aRoot, aActive, aVariableName, aURLs) {
   if (aURLs && !Array.isArray(aURLs)) {
     aURLs = [aURLs];
   }
   _setProperty(aRoot, aActive, aVariableName, aURLs && aURLs.map(v => `url("${v.replace(/"/g, '\\"')}")`).join(","));