Bug 1562427 - Back out bug 1540984, since bug 1554405 fixes it in a way that doesn't need -moz-element(). r=kmag

Differential Revision: https://phabricator.services.mozilla.com/D36679

--HG--
extra : moz-landing-system : lando

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

@@ -28,7 +28,8 @@ add_task(async function test_support_theme_frame() {
                "LWT text color attribute should be set");
 
   let style = window.getComputedStyle(docEl);
-  checkThemeHeaderImage(window, `moz-extension://${extension.uuid}/face.png`);
+  Assert.ok(style.backgroundImage.includes("face.png"),
+            `The backgroundImage should use face.png. Actual value is: ${style.backgroundImage}`);
   Assert.equal(style.backgroundColor, "rgb(" + FRAME_COLOR.join(", ") + ")",
                "Expected correct background color");
   Assert.equal(style.color, "rgb(" + TAB_TEXT_COLOR.join(", ") + ")",

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

@@ -25,7 +25,7 @@ function validateTheme(backgroundImage, accentColor, textColor, isLWT) {
                  "LWT text color attribute should be set");
   }
 
-  checkThemeHeaderImage(window, backgroundImage);
+  Assert.ok(style.backgroundImage.includes(backgroundImage), "Expected correct background image");
   if (accentColor.startsWith("#")) {
     accentColor = hexToRGB(accentColor);
   }
@@ -75,7 +75,7 @@ add_task(async function test_dynamic_theme_updates() {
 
   await extension.awaitMessage("theme-updated");
 
-  validateTheme(`moz-extension://${extension.uuid}/image1.png`, ACCENT_COLOR_1, TEXT_COLOR_1, true);
+  validateTheme("image1.png", ACCENT_COLOR_1, TEXT_COLOR_1, true);
 
   // Check with the LWT aliases (to update on Firefox 69, because the
   // LWT aliases are going to be removed).
@@ -91,7 +91,7 @@ add_task(async function test_dynamic_theme_updates() {
 
   await extension.awaitMessage("theme-updated");
 
-  validateTheme(`moz-extension://${extension.uuid}/image2.png`, ACCENT_COLOR_2, TEXT_COLOR_2, true);
+  validateTheme("image2.png", ACCENT_COLOR_2, TEXT_COLOR_2, true);
 
   extension.sendMessage("reset-theme");
 

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

@@ -28,7 +28,7 @@ add_task(async function test_support_LWT_properties() {
   Assert.equal(docEl.getAttribute("lwthemetextcolor"), "bright",
                "LWT text color attribute should be set");
 
-  checkThemeHeaderImage(window, `moz-extension://${extension.uuid}/image1.png`);
+  Assert.ok(style.backgroundImage.includes("image1.png"), "Expected background image");
   Assert.equal(style.backgroundColor, "rgb(" + hexToRGB(ACCENT_COLOR).join(", ") + ")",
                "Expected correct background color");
   Assert.equal(style.color, "rgb(" + hexToRGB(TEXT_COLOR).join(", ") + ")",

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

@@ -34,9 +34,10 @@ add_task(async function test_support_backgrounds_position() {
 
   let toolboxCS = window.getComputedStyle(toolbox);
   let rootCS = window.getComputedStyle(docEl);
+  let rootBgImage = rootCS.backgroundImage.split(",")[0].trim();
   let bgImage = toolboxCS.backgroundImage.split(",")[0].trim();
-
-  checkThemeHeaderImage(window, `moz-extension://${extension.uuid}/face1.png`);
+  Assert.ok(rootBgImage.includes("face1.png"),
+            `The backgroundImage should use face1.png. Actual value is: ${rootBgImage}`);
   Assert.equal(toolboxCS.backgroundImage, Array(3).fill(bgImage).join(", "),
                "The backgroundImage should use face2.png three times.");
   Assert.equal(toolboxCS.backgroundPosition, "0% 0%, 50% 0%, 100% 100%",
@@ -94,8 +95,10 @@ add_task(async function test_support_backgrounds_repeat() {
 
   let rootCS = window.getComputedStyle(docEl);
   let toolboxCS = window.getComputedStyle(toolbox);
-  checkThemeHeaderImage(window, `moz-extension://${extension.uuid}/face0.png`);
-  Assert.equal([1, 2, 3].map(num => `url("moz-extension://${extension.uuid}/face${num}.png")`).join(", "),
+  let bgImage = rootCS.backgroundImage.split(",")[0].trim();
+  Assert.ok(bgImage.includes("face0.png"),
+            `The backgroundImage should use face.png. Actual value is: ${bgImage}`);
+  Assert.equal([1, 2, 3].map(num => bgImage.replace(/face[\d]*/, `face${num}`)).join(", "),
                toolboxCS.backgroundImage, "The backgroundImage should use face.png three times.");
   Assert.equal(rootCS.backgroundPosition, "100% 0%",
                "The backgroundPosition should use the default value for root.");
@@ -143,7 +146,9 @@ add_task(async function test_additional_images_check() {
 
   let rootCS = window.getComputedStyle(docEl);
   let toolboxCS = window.getComputedStyle(toolbox);
-  checkThemeHeaderImage(window, `moz-extension://${extension.uuid}/face.png`);
+  let bgImage = rootCS.backgroundImage.split(",")[0];
+  Assert.ok(bgImage.includes("face.png"),
+            `The backgroundImage should use face.png. Actual value is: ${bgImage}`);
   Assert.equal("none", toolboxCS.backgroundImage,
                "The backgroundImage should not use face.png.");
   Assert.equal(rootCS.backgroundPosition, "100% 0%",

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

@@ -24,20 +24,22 @@ add_task(async function test_multiple_windows() {
   await extension.startup();
 
   let docEl = window.document.documentElement;
+  let style = window.getComputedStyle(docEl);
 
   Assert.ok(docEl.hasAttribute("lwtheme"), "LWT attribute should be set");
   Assert.equal(docEl.getAttribute("lwthemetextcolor"), "bright",
                "LWT text color attribute should be set");
-  checkThemeHeaderImage(window, `moz-extension://${extension.uuid}/image1.png`);
+  Assert.ok(style.backgroundImage.includes("image1.png"), "Expected background image");
 
   // Now we'll open a new window to see if the theme is also applied there.
   let window2 = await BrowserTestUtils.openNewBrowserWindow();
   docEl = window2.document.documentElement;
+  style = window2.getComputedStyle(docEl);
 
   Assert.ok(docEl.hasAttribute("lwtheme"), "LWT attribute should be set");
   Assert.equal(docEl.getAttribute("lwthemetextcolor"), "bright",
                "LWT text color attribute should be set");
-  checkThemeHeaderImage(window, `moz-extension://${extension.uuid}/image1.png`);
+  Assert.ok(style.backgroundImage.includes("image1.png"), "Expected background image");
 
   await BrowserTestUtils.closeWindow(window2);
   await extension.unload();

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

@@ -1,6 +1,6 @@
 /* exported ACCENT_COLOR, BACKGROUND, ENCODED_IMAGE_DATA, FRAME_COLOR, TAB_TEXT_COLOR,
    TEXT_COLOR, TAB_BACKGROUND_TEXT_COLOR, imageBufferFromDataURI, hexToCSS, hexToRGB, testBorderColor,
-   waitForTransition, checkThemeHeaderImage */
+   waitForTransition */
 
 "use strict";
 
@@ -82,20 +82,3 @@ function testBorderColor(element, expected) {
                hexToCSS(expected),
                "Element bottom border color should be set.");
 }
-
-function checkThemeHeaderImage(window, expectedURL) {
-  const {LightweightThemeManager} = ChromeUtils.import("resource://gre/modules/LightweightThemeManager.jsm");
-
-  let root = window.document.documentElement;
-  if (expectedURL === "none") {
-    Assert.equal(window.getComputedStyle(root).backgroundImage,
-                 "none", "Should have no background image");
-  } else {
-    Assert.equal(window.getComputedStyle(root).backgroundImage,
-                 "-moz-element(#lwt-header-image)",
-                 "Should have -moz-element background image");
-
-    Assert.equal(LightweightThemeManager.themeData.theme.headerImage.src,
-                 expectedURL, "Theme image has expected source");
-  }
-}

toolkit/modules/LightweightThemeConsumer.jsm

@@ -207,15 +207,7 @@ LightweightThemeConsumer.prototype = {
     }
 
     this._setExperiment(active, themeData.experiment, theme.experimental);
-
-    if (theme.headerImage) {
-      this._doc.mozSetImageElement("lwt-header-image", theme.headerImage);
-      root.style.setProperty("--lwt-header-image", "-moz-element(#lwt-header-image)");
-    } else {
-      this._doc.mozSetImageElement("lwt-header-image", null);
-      root.style.removeProperty("--lwt-header-image");
-    }
-
+    _setImage(root, active, "--lwt-header-image", theme.headerURL);
     _setImage(root, active, "--lwt-additional-images", theme.additionalBackgrounds);
     _setProperties(root, active, theme);
 

toolkit/mozapps/extensions/LightweightThemeManager.jsm

@@ -6,39 +6,14 @@
 
 var EXPORTED_SYMBOLS = ["LightweightThemeManager"];
 
-const {AppConstants} = ChromeUtils.import("resource://gre/modules/AppConstants.jsm");
-const {XPCOMUtils} = ChromeUtils.import("resource://gre/modules/XPCOMUtils.jsm");
-
-XPCOMUtils.defineLazyGetter(this, "hiddenWindow", () => {
-  const {Services} = ChromeUtils.import("resource://gre/modules/Services.jsm");
-
-  let browser = Services.appShell.createWindowlessBrowser(true);
-  let principal = Services.scriptSecurityManager.getSystemPrincipal();
-  browser.docShell.createAboutBlankContentViewer(principal, principal);
-
-  Services.obs.addObserver(() => { browser.close(); }, "xpcom-will-shutdown");
-
-  return browser.document.ownerGlobal;
-});
-
-if (AppConstants.DEBUG) {
-  void hiddenWindow;
-}
-
+// Holds optional fallback theme data that will be returned when no data for an
+// active theme can be found. This the case for WebExtension Themes, for example.
 var _fallbackThemeData = null;
 
 var LightweightThemeManager = {
   set fallbackThemeData(data) {
     if (data && Object.getOwnPropertyNames(data).length) {
       _fallbackThemeData = Object.assign({}, data);
-
-      for (let key of ["theme", "darkTheme"]) {
-        let data = _fallbackThemeData[key] || null;
-        if (data && typeof data.headerURL === "string") {
-          data.headerImage = new hiddenWindow.Image();
-          data.headerImage.src = data.headerURL;
-        }
-      }
     } else {
       _fallbackThemeData = null;
     }