Bug 1506987 - Include preview for theme in AOM if it is added while open r=aswan

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

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

toolkit/mozapps/extensions/content/extensions.js

@@ -290,26 +290,6 @@ function setSearchLabel(type) {
   }
 }
 
-function setThemeScreenshot(addon, node) {
-  let findElement = () => node.querySelector(".theme-screenshot")
-    || document.getAnonymousElementByAttribute(node, "anonid", "theme-screenshot");
-  let screenshot = findElement();
-  if (!screenshot) {
-    // Force a layout since screenshot might not exist yet on Windows.
-    node.clientTop;
-    screenshot = findElement();
-  }
-  // There's a test that doesn't have this for some reason, but it's doing weird things.
-  if (!screenshot)
-    return;
-  if (addon.type == "theme" && addon.screenshots && addon.screenshots.length > 0) {
-    screenshot.setAttribute("src", addon.screenshots[0].url);
-    screenshot.hidden = false;
-  } else {
-    screenshot.hidden = true;
-  }
-}
-
 /**
  * Obtain the main DOMWindow for the current context.
  */
@@ -2448,7 +2428,6 @@ var gListView = {
         sortElements(elements, ["uiState", "name"], true);
         for (let element of elements) {
           this._listBox.appendChild(element);
-          setThemeScreenshot(element.mAddon, element);
         }
       }
 
@@ -2616,7 +2595,14 @@ var gDetailView = {
 
   _updateView(aAddon, aIsRemote, aScrollToPreferences) {
     setSearchLabel(aAddon.type);
-    setThemeScreenshot(aAddon, this.node);
+
+    // Set the preview image for themes, if available.
+    if (aAddon.type == "theme") {
+      let previewURL = aAddon.screenshots && aAddon.screenshots[0] && aAddon.screenshots[0].url;
+      if (previewURL) {
+        this.node.querySelector(".card-heading-image").src = previewURL;
+      }
+    }
 
     AddonManager.addManagerListener(this);
     this.clearLoading();

toolkit/mozapps/extensions/content/extensions.xml

@@ -591,7 +591,7 @@
         <xul:spacer flex="5000"/> <!-- Necessary to allow the message to wrap -->
       </xul:hbox>
 
-      <xul:image class="card-heading-image" anonid="theme-screenshot" hidden="true"/>
+      <xul:image class="card-heading-image" anonid="theme-screenshot" xbl:inherits="src=previewURL"/>
 
       <xul:hbox class="content-container" align="center">
         <xul:vbox class="icon-container">
@@ -909,6 +909,13 @@
           else
             this._description.hidden = true;
 
+          // Set a previewURL for themes if one exists.
+          let previewURL = this.mAddon.type == "theme" &&
+            this.mAddon.screenshots &&
+            this.mAddon.screenshots[0] &&
+            this.mAddon.screenshots[0].url;
+          this.setAttribute("previewURL", previewURL ? previewURL : "");
+
           let legacyWarning = legacyExtensionsEnabled && !this.mAddon.install &&
             isLegacyExtension(this.mAddon);
           this.setAttribute("legacy", legacyWarning);

toolkit/mozapps/extensions/content/extensions.xul

@@ -482,7 +482,7 @@
                   </vbox>
                   <hbox class="card addon-detail" align="start">
                     <vbox flex="1">
-                      <image class="card-heading-image theme-screenshot" hidden="true"/>
+                      <image class="card-heading-image theme-screenshot"/>
                       <hbox align="start">
                         <vbox id="detail-icon-container" align="end">
                           <image id="detail-icon" class="icon"/>

toolkit/mozapps/extensions/test/browser/browser.ini

@@ -81,6 +81,7 @@ skip-if = verify
 [browser_legacy.js]
 [browser_legacy_pre57.js]
 [browser_list.js]
+[browser_theme_previews.js]
 [browser_manualupdates.js]
 [browser_pluginprefs.js]
 [browser_pluginprefs_is_not_disabled.js]

toolkit/mozapps/extensions/test/browser/browser_theme_previews.js

@@ -0,0 +1,67 @@
+const {AddonTestUtils} = ChromeUtils.import("resource://testing-common/AddonTestUtils.jsm", {});
+
+let gManagerWindow;
+let gCategoryUtilities;
+
+function imageBufferFromDataURI(encodedImageData) {
+  let decodedImageData = atob(encodedImageData);
+  return Uint8Array.from(decodedImageData, byte => byte.charCodeAt(0)).buffer;
+}
+const img = "iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQImWNgYGBgAAAABQABh6FO1AAAAABJRU5ErkJggg==";
+const imageBuffer = imageBufferFromDataURI(img);
+
+const id = "theme@mochi.test";
+
+function getThemeData(_id = id, manifest = {}, files = {}) {
+  return {
+    "manifest.json": {
+      applications: {
+        gecko: {id: _id},
+      },
+      manifest_version: 2,
+      name: "atheme",
+      description: "wow. such theme.",
+      author: "Pixel Pusher",
+      version: "1",
+      theme: {},
+      ...manifest,
+    },
+    "preview.png": imageBuffer,
+    ...files,
+  };
+}
+
+add_task(async function testThemePreviewShown() {
+  gManagerWindow = await open_manager(null);
+  gCategoryUtilities = new CategoryUtilities(gManagerWindow);
+
+  await gCategoryUtilities.openType("theme");
+
+  AddonTestUtils.initMochitest(this);
+
+  await AddonTestUtils.promiseInstallXPI(getThemeData());
+  let addon = await AddonManager.getAddonByID(id);
+
+  ok(addon.screenshots[0].url, "The add-on has a preview URL");
+  let previewURL = addon.screenshots[0].url;
+
+  let doc = gManagerWindow.document;
+  let item = doc.querySelector(`richlistitem[value="${id}"]`);
+
+  await BrowserTestUtils.waitForCondition(
+    () => item.getAttribute("status") == "installed",
+    "Wait for the item to update to installed");
+
+  is(item.getAttribute("previewURL"), previewURL, "The previewURL is set on the item");
+  let image = doc.getAnonymousElementByAttribute(item, "anonid", "theme-screenshot");
+  is(image.src, previewURL, "The previewURL is set on the image src");
+
+  item.click();
+  await wait_for_view_load(gManagerWindow);
+
+  image = doc.querySelector(".theme-screenshot");
+  is(image.src, previewURL, "The previewURL is set on the detail image src");
+
+  await close_manager(gManagerWindow);
+  await addon.uninstall();
+});