Bug 1511138 - Fix LightweightThemeConsumer's use of getComputedStyle. r=jaws,mconley
authorEmilio Cobos Álvarez <emilio@crisal.io>
Fri, 30 Nov 2018 12:40:25 +0100
changeset 508901 fa5967565fc6870f56333b20551c28db35072bb6
parent 508900 1879534289a4034a18002756d80cbf99f73d18da
child 508902 a3a2ea1539b86313f33e89b62a85dd4354f2e2fc
push id1905
push userffxbld-merge
push dateMon, 21 Jan 2019 12:33:13 +0000
treeherdermozilla-release@c2fca1944d8c [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(",");