Bug 1511138 - Fix LightweightThemeConsumer's use of getComputedStyle. r=jaws,mconley
☠☠ backed out by 5fcc6bd202c4 ☠ ☠
authorEmilio Cobos Álvarez <emilio@crisal.io>
Fri, 30 Nov 2018 12:40:25 +0100
changeset 449656 a99600391704f8752e6f05e312fe8e8cd588715a
parent 449655 4ef293b908879b56b27c1f473127db680c099a60
child 449657 d23c9c3e1566f64b0257d97597daaae3c3ed0897
push id35179
push useraciure@mozilla.com
push dateSun, 09 Dec 2018 21:43:27 +0000
treeherdermozilla-central@53fd96ca5aa4 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersjaws, mconley
bugs1511138
milestone65.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 1511138 - Fix LightweightThemeConsumer's use of getComputedStyle. r=jaws,mconley See D13472 for spec quotes and such. Other browsers don't allow getting computed styles in disconnected subtrees and we agreed to follow suit (it does make sense because when you're not on the flat tree it's not defined what you're supposed to inherit from, specially in presence of Shadow DOM). Also, it allows the style system to rely on the DOM being in a sane state. Differential Revision: https://phabricator.services.mozilla.com/D13551
toolkit/components/extensions/test/browser/browser_ext_themes_autocomplete_popup.js
toolkit/modules/LightweightThemeConsumer.jsm
--- a/toolkit/components/extensions/test/browser/browser_ext_themes_autocomplete_popup.js
+++ b/toolkit/components/extensions/test/browser/browser_ext_themes_autocomplete_popup.js
@@ -236,15 +236,17 @@ add_task(async function test_popup_url()
                "brighttext should not be set!");
   Assert.equal(root.getAttribute("lwt-popup-darktext"),
                "",
                "darktext should not be set!");
 
   // Calculate what GrayText should be. May differ between platforms.
   let span = document.createXULElement("span");
   span.style.color = "GrayText";
+  document.documentElement.appendChild(span);
   let GRAY_TEXT = window.getComputedStyle(span).color;
+  span.remove();
 
   separator = document.getAnonymousElementByAttribute(results[1], "anonid", "separator");
   Assert.equal(window.getComputedStyle(separator).color,
                GRAY_TEXT,
                `Urlbar popup separator color should be set to ${GRAY_TEXT}`);
 });
--- a/toolkit/modules/LightweightThemeConsumer.jsm
+++ b/toolkit/modules/LightweightThemeConsumer.jsm
@@ -320,20 +320,29 @@ function _sanitizeCSSColor(doc, cssColor
   if (!cssColor) {
     return null;
   }
   const HTML_NS = "http://www.w3.org/1999/xhtml";
   // style.color normalizes color values and makes invalid ones black, so a
   // simple round trip gets us a sanitized color value.
   let div = doc.createElementNS(HTML_NS, "div");
   div.style.color = "black";
+  div.style.display = "none";
   let span = doc.createElementNS(HTML_NS, "span");
   span.style.color = cssColor;
+
+  // CSS variables are not allowed and should compute to black.
+  if (span.style.color.indexOf("var(") !== -1) {
+    span.style.color = "";
+  }
+
   div.appendChild(span);
+  doc.documentElement.appendChild(div);
   cssColor = doc.defaultView.getComputedStyle(span).color;
+  div.remove();
   return cssColor;
 }
 
 function _parseRGBA(aColorString) {
   if (!aColorString) {
     return null;
   }
   var rgba = aColorString.replace(/(rgba?\()|(\)$)/g, "").split(",");