show action hints on preview-less search results

...and use CSS to control visibility of action buttons

popup.html

@@ -104,9 +104,9 @@
         <img class="search-result-screenshot" i18n-title="installButton">
         <div class="search-result-status"></div>
         <div class="search-result-actions">
-          <button class="search-result-install hidden" i18n-text="installButton"></button>
+          <button class="search-result-install" i18n-text="installButton"></button>
-          <button class="search-result-uninstall hidden" i18n-text="deleteStyleLabel"></button>
+          <button class="search-result-uninstall" i18n-text="deleteStyleLabel"></button>
-          <button class="search-result-customize hidden" i18n-text="configureStyle"></button>
+          <button class="search-result-customize" i18n-text="configureStyle"></button>
         </div>
         <dl class="search-result-meta">
           <div data-type="author">

popup/search.css

@@ -102,7 +102,7 @@ body.search-results-shown {
   position: relative;
 }
 
-.search-result[data-installed] .search-result-status {
+.search-result .search-result-status {
   top: 0;
   left: 0;
   right: 0;
@@ -114,9 +114,16 @@ body.search-results-shown {
   transition: background-color .5s;
   pointer-events: none;
 }
-
+.search-result[data-no-image] .search-result-status {
+  line-height: 140px;
+}
+.search-result[data-no-image]:not([data-installed]) .search-result-status {
+  background-color: rgba(128, 128, 128, .1);
+  color: currentColor;
+}
 .search-result-screenshot:hover ~ .search-result-status {
   background-color: hsla(180, 100%, 27%, 1);
+  color: #fff;
 }
 
 .search-result-actions {
@@ -131,16 +138,22 @@ body.search-results-shown {
   opacity: 0;
   transition: opacity .5s;
 }
-
 .search-result:not([data-installed]):hover .search-result-actions {
   opacity: 1;
 }
-
 .search-result-actions button {
   box-shadow: 2px 2px 20px #000;
   white-space: nowrap;
   margin: 3px;
 }
+.search-result[data-no-image] .search-result-actions button {
+  box-shadow: none;
+}
+.search-result-install,
+.search-result-uninstall,
+.search-result:not([data-customizable]) .search-result-customize {
+  display: none;
+}
 
 .search-result-meta {
   background-color: hsla(0, 0%, 93%, 0.75);

popup/search.js

@@ -1,4 +1,4 @@
-/* global $ $$ $create $remove showSpinner */// dom.js
+/* global $ $$ $create $remove showSpinner toggleDataset */// dom.js
 /* global $entry tabURL */// popup.js
 /* global API */// msg.js
 /* global Events */
@@ -292,19 +292,22 @@
       t.breakWord(name.length < 300 ? name : name.slice(0, 300) + '...');
     // screenshot
     const elShot = $('.search-result-screenshot', entry);
+    let shotSrc;
     if (isUsw) {
-      elShot.src = !/^https?:/i.test(shot) ? BLANK_PIXEL :
+      shotSrc = /^https?:/i.test(shot) && shot.replace(/\.jpg$/, imgType);
-        imgType !== '.jpg' ? shot.replace(/\.jpg$/, imgType) :
-          shot;
     } else {
-      const auto = URLS.uso + `auto_style_screenshots/${id}${USO_AUTO_PIC_SUFFIX}`;
+      elShot._src = URLS.uso + `auto_style_screenshots/${id}${USO_AUTO_PIC_SUFFIX}`;
-      Object.assign(elShot, {
+      shotSrc = shot && !shot.endsWith(USO_AUTO_PIC_SUFFIX)
-        src: shot && !shot.endsWith(USO_AUTO_PIC_SUFFIX)
+        ? `${shotArchived ? URLS.usoArchiveRaw[0] : URLS.uso + 'style_'}screenshots/${shot}`
-          ? `${shotArchived ? URLS.usoArchiveRaw[0] : URLS.uso + 'style_'}screenshots/${shot}`
+        : elShot._src;
-          : auto,
+    }
-        _src: auto,
+    if (shotSrc) {
-        onerror: fixScreenshot,
+      elShot._entry = entry;
-      });
+      elShot.src = shotSrc;
+      elShot.onerror = fixScreenshot;
+    } else {
+      elShot.src = BLANK_PIXEL;
+      entry.dataset.noImage = '';
     }
     // author
     Object.assign($('[data-type="author"] a', entry), {
@@ -350,8 +353,10 @@
       this.src = _src;
       delete this._src;
     } else {
-      this.src = BLANK_PIXEL;
       this.onerror = null;
+      this.src = BLANK_PIXEL;
+      this._entry.dataset.noImage = '';
+      renderActionButtons(this._entry);
     }
   }
 
@@ -366,14 +371,10 @@
       result.installedStyleId = installedId;
     }
     const isInstalled = result.installed;
-    if (isInstalled && !('installed' in entry.dataset)) {
+    const status = $('.search-result-status', entry).textContent =
-      entry.dataset.installed = '';
+      isInstalled ? t('clickToUninstall') :
-      $('.search-result-status', entry).textContent = t('clickToUninstall');
+        entry.dataset.noImage != null ? t('installButton') :
-    } else if (!isInstalled && 'installed' in entry.dataset) {
+          '';
-      delete entry.dataset.installed;
-      $('.search-result-status', entry).textContent = '';
-      hide('.search-result-customize', entry);
-    }
     const notMatching = installedId > 0 && !$entry(installedId);
     if (notMatching !== entry.classList.contains('not-matching')) {
       entry.classList.toggle('not-matching');
@@ -385,10 +386,12 @@
     }
     Object.assign($('.search-result-screenshot', entry), {
       onclick: isInstalled ? uninstall : install,
-      title: isInstalled ? '' : t('installButton'),
+      title: status ? '' : t('installButton'),
     });
     $('.search-result-uninstall', entry).onclick = uninstall;
     $('.search-result-install', entry).onclick = install;
+    $('.search-result-customize', entry).onclick = configure;
+    toggleDataset(entry, 'installed', isInstalled);
   }
 
   function renderFullInfo(entry, style) {
@@ -402,12 +405,14 @@
       textContent: description,
       title: description,
     });
-    // config button
+    toggleDataset(entry, 'customizable', vars);
-    if (vars) {
+  }
-      const btn = $('.search-result-customize', entry);
+
-      btn.onclick = () => $('.configure', $entry(style)).click();
+  /** @this HTMLButtonElement */
-      show(btn);
+  function configure() {
-    }
+    const el = $entry(this.closest('.search-result')._result.installedStyleId);
+    const btn = el && $('.configure', el);
+    if (btn) btn.click();
   }
 
   async function install() {