Bug 1495713 - Include theme previews in add-ons manager r=dao
authorMark Striemer <mstriemer@mozilla.com>
Wed, 17 Oct 2018 08:58:06 +0000
changeset 497477 7bddefa538666290f285c7f7ca8904b64dee352d
parent 497476 51dbe7eb45c61137883155104110ee3d6588338f
child 497478 b6780702981d863bfd913ca404d5b5209b952066
push id9996
push userarchaeopteryx@coole-files.de
push dateThu, 18 Oct 2018 18:37:15 +0000
treeherdermozilla-beta@8efe26839243 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersdao
bugs1495713
milestone64.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 1495713 - Include theme previews in add-ons manager r=dao Differential Revision: https://phabricator.services.mozilla.com/D8106
toolkit/mozapps/extensions/content/extensions.js
toolkit/mozapps/extensions/content/extensions.xml
toolkit/mozapps/extensions/content/extensions.xul
toolkit/themes/shared/extensions/extensions.inc.css
toolkit/themes/shared/in-content/common.inc.css
--- a/toolkit/mozapps/extensions/content/extensions.js
+++ b/toolkit/mozapps/extensions/content/extensions.js
@@ -285,16 +285,30 @@ function setSearchLabel(type) {
       .textContent = gStrings.ext.GetStringFromName(`searchLabel.${type}`);
     searchLabel.hidden = false;
   } else {
     searchLabel.textContent = "";
     searchLabel.hidden = true;
   }
 }
 
+function setThemeScreenshot(addon, node) {
+  let screenshot = node.querySelector(".theme-screenshot")
+    || document.getAnonymousElementByAttribute(node, "anonid", "theme-screenshot");
+  // 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.
  */
 function getMainWindow() {
   return window.docShell.rootTreeItem.domWindow;
 }
 
 function getBrowserElement() {
@@ -2419,18 +2433,20 @@ var gListView = {
         elements.push(createItem(addonItem));
 
       for (let installItem of aInstallsList)
         elements.push(createItem(installItem, true));
 
       this.showEmptyNotice(elements.length == 0);
       if (elements.length > 0) {
         sortElements(elements, ["uiState", "name"], true);
-        for (let element of elements)
+        for (let element of elements) {
           this._listBox.appendChild(element);
+          setThemeScreenshot(element.mAddon, element);
+        }
       }
 
       this.filterDisabledUnsigned(showOnlyDisabledUnsigned);
       let legacyNotice = document.getElementById("legacy-extensions-notice");
       if (showLegacyInfo) {
         let el = document.getElementById("legacy-extensions-description");
         if (el.childNodes[0].nodeName == "#text") {
           el.removeChild(el.childNodes[0]);
@@ -2587,16 +2603,17 @@ var gDetailView = {
   },
 
   onUpdateModeChanged() {
     this.onPropertyChanged(["applyBackgroundUpdates"]);
   },
 
   _updateView(aAddon, aIsRemote, aScrollToPreferences) {
     setSearchLabel(aAddon.type);
+    setThemeScreenshot(aAddon, this.node);
 
     AddonManager.addManagerListener(this);
     this.clearLoading();
 
     this._addon = aAddon;
     gEventManager.registerAddonListener(this, aAddon.id);
     gEventManager.registerInstallListener(this);
 
--- a/toolkit/mozapps/extensions/content/extensions.xml
+++ b/toolkit/mozapps/extensions/content/extensions.xml
@@ -600,16 +600,18 @@
         <xul:label anonid="pending" flex="1"/>
         <xul:button anonid="undo-btn" class="button-link"
                     label="&addon.undoAction.label;"
                     tooltipText="&addon.undoAction.tooltip;"
                     oncommand="document.getBindingParent(this).undo();"/>
         <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:hbox class="content-container" align="center">
         <xul:vbox class="icon-container">
           <xul:image anonid="icon" class="icon"/>
         </xul:vbox>
         <xul:vbox class="content-inner-container" flex="1">
           <xul:hbox class="basicinfo-container">
               <xul:hbox class="name-container">
                 <xul:label anonid="name" class="name" crop="end" flex="1"
--- a/toolkit/mozapps/extensions/content/extensions.xul
+++ b/toolkit/mozapps/extensions/content/extensions.xul
@@ -504,16 +504,17 @@
                               label="&addon.undoAction.label;"
                               tooltipText="&addon.undoAction.tooltip;"
                               command="cmd_cancelOperation"/>
                       <spacer flex="5000"/> <!-- Necessary to allow the message to wrap -->
                     </hbox>
                   </vbox>
                   <hbox class="card addon-detail" align="start">
                     <vbox flex="1">
+                      <image class="card-heading-image theme-screenshot" hidden="true"/>
                       <hbox align="start">
                         <vbox id="detail-icon-container" align="end">
                           <image id="detail-icon" class="icon"/>
                         </vbox>
                         <vbox id="detail-summary">
                           <hbox id="detail-name-container" class="name-container"
                                 align="start">
                             <label id="detail-name" flex="1"/>
--- a/toolkit/themes/shared/extensions/extensions.inc.css
+++ b/toolkit/themes/shared/extensions/extensions.inc.css
@@ -696,16 +696,20 @@ richlistbox.list > richlistitem.addon {
    * from the padding to stay balanced. */
   padding-inline-end: 12px;
 }
 
 .addon-detail.card:hover {
   box-shadow: none;
 }
 
+.addon.card > .card-heading-image {
+  margin-inline-end: -12px;
+}
+
 #detail-desc, #detail-fulldesc {
   margin-inline-start: 0;
   /* This is necessary to fix layout issues with multi-line descriptions, see
      bug 592712*/
   outline: solid transparent;
   white-space: pre-wrap;
   min-width: 10em;
 }
--- a/toolkit/themes/shared/in-content/common.inc.css
+++ b/toolkit/themes/shared/in-content/common.inc.css
@@ -871,16 +871,22 @@ xul|treechildren::-moz-tree-image(select
   padding: 16px;
   transition: box-shadow 150ms;
 }
 
 .card:hover {
   box-shadow: var(--card-shadow-hover);
 }
 
+.card-heading-image {
+  border-top-left-radius: 4px;
+  border-top-right-radius: 4px;
+  margin: -16px -16px 16px;
+}
+
 .sidebar-footer-button {
   padding: 1px; /* Adding padding around help label in order to make entire keyboard focusing outline visible */
 }
 
 .sidebar-footer-button > .text-link {
   -moz-box-flex: 1;
   margin-inline-start: 34px;
   margin-inline-end: 0;