From 4b207f3dd4b18de50a48ea5daec1c25bd1dd8272 Mon Sep 17 00:00:00 2001
From: tophf <tophf@gmx.com>
Date: Sun, 10 Dec 2017 04:03:04 +0300
Subject: [PATCH] basic tweaks/fixes for inline search

---
 global.css               |   4 +
 js/prefs.js              |   1 +
 popup.html               |  54 +++---
 popup/popup.css          |   5 +
 popup/popup.js           |   2 +
 popup/search-results.css | 197 +++++++++----------
 popup/search-results.js  | 405 ++++++++++++++++++---------------------
 7 files changed, 325 insertions(+), 343 deletions(-)

diff --git a/global.css b/global.css
index f2887c7b..bf870f58 100644
--- a/global.css
+++ b/global.css
@@ -1,3 +1,7 @@
+.hidden {
+  display: none !important;
+}
+
 button {
   -webkit-appearance: none;
   -moz-appearance: none;
diff --git a/js/prefs.js b/js/prefs.js
index 5e8314d5..d9f0d3c4 100644
--- a/js/prefs.js
+++ b/js/prefs.js
@@ -19,6 +19,7 @@ var prefs = new function Prefs() {
     'popup.enabledFirst': true,     // display enabled styles before disabled styles
     'popup.stylesFirst': true,      // display enabled styles before disabled styles
     'popup.borders': false,         // add white borders on the sides
+    'popup.findStylesInline': true, // use the inline style search
 
     'manage.onlyEnabled': false,    // display only enabled styles
     'manage.onlyLocal': false,      // display only styles created locally
diff --git a/popup.html b/popup.html
index d994f05b..a1a306be 100644
--- a/popup.html
+++ b/popup.html
@@ -87,7 +87,7 @@
     <div class="search-result">
       <a class="search-result-title"></a>
       <div class="search-result-info">
-        <img class="search-result-screenshot" />
+        <img class="search-result-screenshot">
         <div class="actions">
           <button class="search-result-install" i18n-text="installButton"></button>
           <button class="search-result-uninstall hidden" i18n-text="deleteStyleLabel"></button>
@@ -96,28 +96,23 @@
                   i18n-title="configureStyleOnHomepage"></button>
         </div>
         <div class="search-result-overlay">
-          <div class="search-result-author">
-            <label i18n-text="author"></label>:
-            <a class="search-result-author-link" target="_blank"></a>
-          </div>
-          <div class="search-result-description-group">
-            <div class="search-result-description"></div>
-            <div class="search-result-description-info">
-              <svg class="svg-icon info" viewBox="0 0 14 16">
-                <path fill-rule="evenodd" d="M6.3 5.69a.942.942 0 0 1-.28-.7c0-.28.09-.52.28-.7.19-.18.42-.28.7-.28.28 0 .52.09.7.28.18.19.28.42.28.7 0 .28-.09.52-.28.7a1 1 0 0 1-.7.3c-.28 0-.52-.11-.7-.3zM8 7.99c-.02-.25-.11-.48-.31-.69-.2-.19-.42-.3-.69-.31H6c-.27.02-.48.13-.69.31-.2.2-.3.44-.31.69h1v3c.02.27.11.5.31.69.2.2.42.31.69.31h1c.27 0 .48-.11.69-.31.2-.19.3-.42.31-.69H8V7.98v.01zM7 2.3c-3.14 0-5.7 2.54-5.7 5.68 0 3.14 2.56 5.7 5.7 5.7s5.7-2.55 5.7-5.7c0-3.15-2.56-5.69-5.7-5.69v.01zM7 .98c3.86 0 7 3.14 7 7s-3.14 7-7 7-7-3.12-7-7 3.14-7 7-7z"></path>
-              </svg>
-            </div>
-          </div>
           <div class="search-result-meta">
+            <div class="search-result-author">
+              <span i18n-text="author"></span>
+              <a class="search-result-author-link" target="_blank"></a>
+            </div>
             <div class="search-result-meta-rating">
-              <span i18n-text="searchResultRating"></span>:
+              <span i18n-text="searchResultRating"></span>
               <span class="search-result-rating"></span>
             </div>
             <div class="search-result-meta-install-count">
-              <span i18n-text="searchResultInstallCount"></span>:
+              <span i18n-text="searchResultInstallCount"></span>
               <span class="search-result-install-count"></span>
             </div>
           </div>
+          <div class="search-result-description-group">
+            <div class="search-result-description"></div>
+          </div>
         </div>
       </div>
     </div>
@@ -184,7 +179,7 @@
         <a id="find-styles-link" i18n-text="findStyles" i18n-title="findStylesTooltip"></a>
         <span id="find-styles-inline-group">
           <label i18n-title="findStylesInlineTooltip">
-            <input id="find-styles-inline" class="checker" type="checkbox" checked />
+            <input id="popup.findStylesInline" class="checker" type="checkbox">
             <svg class="svg-icon checked" viewBox="0 0 1000 1000">
               <path fill-rule="evenodd" d="M983.2,184.3L853,69.8c-4-3.5-9.3-5.3-14.5-5c-5.3,0.4-10.3,2.8-13.8,6.8L352.3,609.2L184.4,386.9c-3.2-4.2-8-7-13.2-7.8c-5.3-0.8-10.6,0.6-14.9,3.9L18,487.5c-8.8,6.7-10.6,19.3-3.9,28.1L325,927.2c3.6,4.8,9.3,7.7,15.3,8c0.2,0,0.5,0,0.7,0c5.8,0,11.3-2.5,15.1-6.8L985,212.6C992.3,204.3,991.5,191.6,983.2,184.3z"/>
             </svg>
@@ -207,18 +202,18 @@
               i18n-text="shortcuts"
               i18n-title="shortcutsNote"></button>
     </div>
+  </div>
 
-    <div id="search-results" class="hidden">
-      <div id="search-results-list"></div>
-      <div id="search-results-nav">
-        <button id="search-results-nav-prev" i18n-title="paginationPrevious" disabled>&#8592;</button>
-        <label>
-          <span id="search-results-nav-current-page" i18n-title="paginationCurrent">-</span>
-          /
-          <span id="search-results-nav-total-pages" i18n-title="paginationTotal">-</span>
-        </label>
-        <button id="search-results-nav-next" i18n-title="paginationNext" disabled>&#8594;</button>
-      </div>
+  <div id="search-results" class="hidden">
+    <div id="search-results-list"></div>
+    <div id="search-results-nav">
+      <button id="search-results-nav-prev" i18n-title="paginationPrevious" disabled>&#8592;</button>
+      <label>
+        <span id="search-results-nav-current-page" i18n-title="paginationCurrent">-</span>
+        /
+        <span id="search-results-nav-total-pages" i18n-title="paginationTotal">-</span>
+      </label>
+      <button id="search-results-nav-next" i18n-title="paginationNext" disabled>&#8594;</button>
     </div>
   </div>
 
@@ -238,6 +233,11 @@
     <symbol id="svg-icon-config-uso" viewBox="0 0 14 14">
       <path d="M2,3h4v2H4v6h6V9h2v4H2V3z M8,1h6v6l-2.2-2.2l-4,4L6.2,7.2l4-4L8,1z"/>
     </symbol>
+
+    <symbol id="svg-icon-help" viewBox="0 0 14 16">
+      <title i18n-text="helpAlt"></title>
+      <path fill-rule="evenodd" d="M6.3 5.69a.942.942 0 0 1-.28-.7c0-.28.09-.52.28-.7.19-.18.42-.28.7-.28.28 0 .52.09.7.28.18.19.28.42.28.7 0 .28-.09.52-.28.7a1 1 0 0 1-.7.3c-.28 0-.52-.11-.7-.3zM8 7.99c-.02-.25-.11-.48-.31-.69-.2-.19-.42-.3-.69-.31H6c-.27.02-.48.13-.69.31-.2.2-.3.44-.31.69h1v3c.02.27.11.5.31.69.2.2.42.31.69.31h1c.27 0 .48-.11.69-.31.2-.19.3-.42.31-.69H8V7.98v.01zM7 2.3c-3.14 0-5.7 2.54-5.7 5.68 0 3.14 2.56 5.7 5.7 5.7s5.7-2.55 5.7-5.7c0-3.15-2.56-5.69-5.7-5.69v.01zM7 .98c3.86 0 7 3.14 7 7s-3.14 7-7 7-7-3.12-7-7 3.14-7 7-7z"></path>
+    </symbol>
   </svg>
 
 </body>
diff --git a/popup/popup.css b/popup/popup.css
index ed852eb3..1616d2de 100644
--- a/popup/popup.css
+++ b/popup/popup.css
@@ -104,6 +104,11 @@ body > div:not(#installed):not(#message-box):not(.colorpicker-popup) {
   font-style: italic;
 }
 
+#find-styles-link {
+  cursor: pointer;
+  margin-right: .5em;
+}
+
 .checker {
   display: inline;
 }
diff --git a/popup/popup.js b/popup/popup.js
index 8eacef84..8252aceb 100644
--- a/popup/popup.js
+++ b/popup/popup.js
@@ -53,6 +53,7 @@ function onRuntimeMessage(msg) {
       }
       break;
   }
+  dispatchEvent(new CustomEvent(msg.method, {detail: msg}));
 }
 
 
@@ -195,6 +196,7 @@ function showStyles(styles) {
   if (!styles.length) {
     installed.textContent = '';
     installed.appendChild(template.noStyles.cloneNode(true));
+    window.dispatchEvent(new Event('showStyles:done'));
     return;
   }
 
diff --git a/popup/search-results.css b/popup/search-results.css
index 6a636f46..2900dfd6 100755
--- a/popup/search-results.css
+++ b/popup/search-results.css
@@ -3,13 +3,8 @@ body.search-results-shown {
   overflow-x: hidden;
 }
 
-#disable-all-wrapper {
-  border-bottom: solid 1px #000;
-  margin-bottom: 5px;
-}
-
-.hidden {
-  display: none !important;
+#search-results {
+  position: relative;
 }
 
 #search-results-error {
@@ -27,19 +22,23 @@ body.search-results-shown {
 
 .search-result, .search-result-empty {
   position: relative;
-  min-height: 170px;
-  padding: 5px;
+  padding: .75rem;
+  min-height: 160px;
 }
 
-.search-result-empty {
-  position: relative;
+.search-result {
+  box-shadow: 1px 1px 10px rgba(0, 0, 0, .5);
+  border-radius: 3px;
+  border: 1px solid transparent;
+  margin-bottom: 1rem;
+}
+
+.search-result:hover {
+  border-color: #888;
 }
 
 .search-result .lds-spinner, .search-result-empty .lds-spinner {
-  opacity: 1;
-  top: 0;
-  width: 150px;
-  height: 150px;
+  transform: scale(.75);
 }
 
 .search-result-screenshot {
@@ -49,114 +48,131 @@ body.search-results-shown {
 }
 
 .search-result-title {
-  padding: 3px;
   font-size: 1.2em;
   font-weight: 600;
+  margin-bottom: .5em;
+  display: block;
+  color: #666;
+}
+
+.search-result:hover .search-result-title {
+  color: initial;
 }
 
 .search-result-info {
   position: relative;
 }
+
 .search-result-info > div {
   opacity: 0;
   position: absolute;
   width: 100%;
-  transition: opacity linear 0.2s;
-  overflow: hidden;
-  text-align: center;
+  transition: opacity .2s;
 }
-.search-result-info:hover > div {
+
+.search-result:hover .search-result-info > div {
   opacity: 1;
 }
 
 .search-result-overlay {
-  height: 55px;
-  top: 85px;
-  background-color: rgba(255, 255, 255, 0.6);
+  bottom: 0;
 }
 
 .search-result-info > .actions {
-  top: 30px;
+  bottom: 70px;
+  text-align: center;
 }
+
 .search-result-info > .actions > button {
   background-color: #fff;
+  box-shadow: 2px 2px 20px #000;
+  white-space: nowrap;
 }
+
 .search-result-info > .actions > button:hover {
   background-color: #ccc;
 }
 
 .search-result-overlay > * {
-  text-align: center;
+  display: flex;
+  padding: .25rem .5rem;
 }
 
-.search-result-overlay > * {
-  margin: 2px 10px 0px 10px;
+.search-result-author {
+  max-width: 50%;
 }
 
 .search-result-author-link {
-  margin-left: 3px;
-}
-
-.search-result-description {
-  width: 90%;
+  color: inherit;
+  font-weight: bold;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
-  display: inline-block;
-}
-
-.search-result-description.expanded {
-  width: 100%;
-  max-height: 100%;
-  white-space: pre-wrap;
-  overflow-x: auto;
-  overflow-y: hidden;
-  text-overflow: unset;
   display: block;
 }
 
-.search-result-description-info {
-  display: inline-block;
-  cursor: pointer;
-  width: 16px;
-  height: 14px;
+.search-result-author-link:hover {
+  color: #fff;
+}
+
+.search-result-description-group {
+  background-color: rgba(255, 255, 255, 0.8);
+  align-items: center;
+  padding-right: .25rem;
+}
+
+.search-result-description {
+  flex: 1;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 .search-result-meta {
-  display: table;
-  width: 100%;
+  background-color: hsla(180, 27%, 37%, 0.85);
+  color: hsl(180, 27%, 80%);
+  justify-content: space-between;
 }
 
-.search-result-meta-rating, .search-result-meta-install-count {
-  display: table-cell;
+.search-result-meta > * > :first-child {
+  display: block;
+  opacity: .75;
+}
+
+.search-result-meta-rating {
   text-align: center;
 }
 
+.search-result-meta-install-count {
+  text-align: right;
+}
+
 .search-result-rating {
   font-weight: 600;
   padding: 1px 2px 1px 2px;
   color: #fff;
 }
+
 .search-result-rating.good {
   background-color: darkgreen;
 }
+
 .search-result-rating.okay {
   background-color: darkorange;
 }
+
 .search-result-rating.bad {
   background-color: darkred;
 }
+
 .search-result-rating.none {
-  background-color: #333;
 }
 
 .search-result-install-count {
   font-weight: 600;
 }
 
-.search-result-install,
-.search-result-customize,
-.search-result-uninstall {
+.search-result-install, .search-result-customize, .search-result-uninstall {
   width: 40%;
   margin: 3px;
 }
@@ -185,7 +201,6 @@ body.search-results-shown {
 }
 
 /* spinner: https://github.com/loadingio/css-spinner */
-
 .lds-spinner {
   -webkit-user-select: none;
   -moz-user-select: none;
@@ -193,117 +208,95 @@ body.search-results-shown {
   user-select: none;
   pointer-events: none;
   opacity: 0;
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  width: 200px; /* don't change! use "transform: scale(.75)" */
+  height: 200px; /* don't change! use "transform: scale(.75)" */
+  margin: auto;
+  animation: fadein 1s;
 }
 
 @keyframes lds-spinner {
   0% {
-    opacity: 1;
+    opacity: .5;
   }
+
   100% {
     opacity: 0;
   }
 }
-@-webkit-keyframes lds-spinner {
-  0% {
-    opacity: 1;
-  }
-  100% {
-    opacity: 0;
-  }
-}
-.lds-spinner {
-  position: absolute;
-  width: 200px;
-  height: 200px;
-  top: 100px;
-  left: 0;
-  right: 0;
-  margin: auto;
-  opacity: .2;
-  transition: opacity .5s;
-}
+
 .lds-spinner div {
   left: 94px;
   top: 23px;
   position: absolute;
-  -webkit-animation: lds-spinner linear 1s infinite;
   animation: lds-spinner linear 1s infinite;
+  animation-direction: reverse;
   background: currentColor;
   width: 12px;
   height: 34px;
   border-radius: 20%;
-  -webkit-transform-origin: 6px 77px;
   transform-origin: 6px 77px;
 }
+
 .lds-spinner div:nth-child(1) {
-  -webkit-transform: rotate(0deg);
   transform: rotate(0deg);
-  -webkit-animation-delay: -0.916666666666667s;
   animation-delay: -0.916666666666667s;
 }
+
 .lds-spinner div:nth-child(2) {
-  -webkit-transform: rotate(30deg);
   transform: rotate(30deg);
-  -webkit-animation-delay: -0.833333333333333s;
   animation-delay: -0.833333333333333s;
 }
+
 .lds-spinner div:nth-child(3) {
-  -webkit-transform: rotate(60deg);
   transform: rotate(60deg);
-  -webkit-animation-delay: -0.75s;
   animation-delay: -0.75s;
 }
+
 .lds-spinner div:nth-child(4) {
-  -webkit-transform: rotate(90deg);
   transform: rotate(90deg);
-  -webkit-animation-delay: -0.666666666666667s;
   animation-delay: -0.666666666666667s;
 }
+
 .lds-spinner div:nth-child(5) {
-  -webkit-transform: rotate(120deg);
   transform: rotate(120deg);
-  -webkit-animation-delay: -0.583333333333333s;
   animation-delay: -0.583333333333333s;
 }
+
 .lds-spinner div:nth-child(6) {
-  -webkit-transform: rotate(150deg);
   transform: rotate(150deg);
-  -webkit-animation-delay: -0.5s;
   animation-delay: -0.5s;
 }
+
 .lds-spinner div:nth-child(7) {
-  -webkit-transform: rotate(180deg);
   transform: rotate(180deg);
-  -webkit-animation-delay: -0.416666666666667s;
   animation-delay: -0.416666666666667s;
 }
+
 .lds-spinner div:nth-child(8) {
-  -webkit-transform: rotate(210deg);
   transform: rotate(210deg);
-  -webkit-animation-delay: -0.333333333333333s;
   animation-delay: -0.333333333333333s;
 }
+
 .lds-spinner div:nth-child(9) {
-  -webkit-transform: rotate(240deg);
   transform: rotate(240deg);
-  -webkit-animation-delay: -0.25s;
   animation-delay: -0.25s;
 }
+
 .lds-spinner div:nth-child(10) {
-  -webkit-transform: rotate(270deg);
   transform: rotate(270deg);
-  -webkit-animation-delay: -0.166666666666667s;
   animation-delay: -0.166666666666667s;
 }
+
 .lds-spinner div:nth-child(11) {
-  -webkit-transform: rotate(300deg);
   transform: rotate(300deg);
-  -webkit-animation-delay: -0.083333333333333s;
   animation-delay: -0.083333333333333s;
 }
+
 .lds-spinner div:nth-child(12) {
-  -webkit-transform: rotate(330deg);
   transform: rotate(330deg);
-  -webkit-animation-delay: 0s;
   animation-delay: 0s;
 }
diff --git a/popup/search-results.js b/popup/search-results.js
index 6837d847..e232b608 100755
--- a/popup/search-results.js
+++ b/popup/search-results.js
@@ -1,31 +1,30 @@
-/* global handleEvent tryJSONparse getStylesSafe BG */
+/* global tabURL handleEvent */
 'use strict';
 
-(() => {
-  Promise.all([getActiveTab(), onDOMready()])
-    .then(([tab]) => {
-      $('#find-styles-link').href = searchUserstyles().getSearchPageURL(tab.url);
+window.addEventListener('showStyles:done', function _() {
+  window.removeEventListener('showStyles:done', _);
 
-      $('#find-styles-link').onclick = event => {
-        // Only load search results inline if option is selected.
-        if ($('#find-styles-inline').checked) {
-          // Hide 'inline' checkbox.
-          $('#find-styles-inline-group').classList.add('hidden');
-          $('#find-styles-inline').checked = false;
+  if (!tabURL) {
+    return;
+  }
 
-          const searchResults = searchResultsController();
-          searchResults.init();
-          searchResults.load();
+  Object.assign($('#find-styles-link'), {
+    href: searchUserstyles().getSearchPageURL(tabURL),
+    onclick(event) {
+      if (!prefs.get('popup.findStylesInline')) {
+        handleEvent.openURLandHide.call(this, event);
+        return;
+      }
 
-          // Avoid propagating click to anchor/href
-          event.preventDefault();
-          return false;
-        } else {
-          // Open anchor href in new tab.
-          handleEvent.openURLandHide.call($('#find-styles-link'), event);
-        }
-      };
-    });
+      $('#find-styles-inline-group').classList.add('hidden');
+
+      const searchResults = searchResultsController();
+      searchResults.init();
+      searchResults.load();
+
+      event.preventDefault();
+    },
+  });
 
   /**
    * Represents the search results within the Stylus popup.
@@ -40,6 +39,10 @@
     const processedResults = []; // Search results that are not installed and apply ot the page (includes 'json' field with full style).
     const BLANK_PIXEL_DATA = 'data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAA' +
                              'C1HAwCAAAAC0lEQVR42mOcXQ8AAbsBHLLDr5MAAAAASUVORK5CYII=';
+    const UPDATE_URL = 'https://update.userstyles.org/%.md5';
+    const ENTRY_ID_PREFIX = 'search-result-';
+
+    let scrollToFirstResult = true;
     let loading = false;
     let category; // Category for the active tab's URL.
     let currentDisplayedPage = 1; // Current page number in popup.html
@@ -50,7 +53,14 @@
       $('#search-results-nav-prev').onclick = prev;
       $('#search-results-nav-next').onclick = next;
       document.body.classList.add('search-results-shown');
-      window.scrollTo(0, 0);
+      addEventListener('styleDeleted', ({detail}) => {
+        const entries = [...$('#search-results-list').children];
+        const entry = entries.find(el => el._result.installedStyleId === detail.id);
+        if (entry) {
+          entry._result.installed = false;
+          renderActionButtons(entry);
+        }
+      });
     }
 
     /**
@@ -64,28 +74,41 @@
         render(); // Refresh elements that depend on `loading` state.
 
         if (isLoading) {
-          // Show spinner
-          $('#search-results').appendChild(
-            $create(
-              '.lds-spinner',
-              new Array(12).fill($create('div')).map(e => e.cloneNode()))
-          );
+          showSpinner('#search-results');
         } else {
-          // Hide spinner
           $.remove('#search-results > .lds-spinner');
         }
       }
     }
 
-    function render() {
-      $('#search-results-list').textContent = ''; // Clear search results
+    function showSpinner(parent) {
+      parent = parent instanceof Node ? parent : $(parent);
+      parent.appendChild($create('.lds-spinner',
+        new Array(12).fill($create('div')).map(e => e.cloneNode())));
+    }
 
-      const startIndex = (currentDisplayedPage - 1) * DISPLAYED_RESULTS_PER_PAGE;
+    function render() {
+      let startIndex = (currentDisplayedPage - 1) * DISPLAYED_RESULTS_PER_PAGE;
       const endIndex = currentDisplayedPage * DISPLAYED_RESULTS_PER_PAGE;
+
+      const list = $('#search-results-list');
+
+      // keep rendered elements with ids in the range of interest
+      for (let i = 0; i < DISPLAYED_RESULTS_PER_PAGE;) {
+        const el = list.children[i];
+        if (!el) {
+          break;
+        }
+        if (el.id === 'search-result-' + (processedResults[startIndex] || {}).id) {
+          startIndex++;
+          i++;
+        } else {
+          el.remove();
+        }
+      }
+
       const displayedResults = processedResults.slice(startIndex, endIndex);
-      displayedResults.forEach(resultToDisplay => {
-        createSearchResultNode(resultToDisplay);
-      });
+      displayedResults.forEach(createSearchResultNode);
 
       $('#search-results-nav-prev').disabled = (currentDisplayedPage <= 1 || loading);
       $('#search-results-nav-current-page').textContent = currentDisplayedPage;
@@ -103,8 +126,15 @@
       const maxResults = currentDisplayedPage < totalPageCount
         ? DISPLAYED_RESULTS_PER_PAGE
         : displayedResults.length + unprocessedResults.length;
-      for (let i = displayedResults.length; i < maxResults; i++) {
-        createLoadingSearchResultNode();
+      for (let i = list.children.length; i < maxResults; i++) {
+        const entry = template.emptySearchResult.cloneNode(true);
+        list.appendChild(entry);
+        showSpinner(entry);
+      }
+
+      if (scrollToFirstResult && list.children[0]) {
+        scrollToFirstResult = false;
+        list.children[0].scrollIntoView({behavior: 'smooth', block: 'start'});
       }
     }
 
@@ -124,15 +154,15 @@
     /** Increments currentDisplayedPage and loads results. */
     function next() {
       currentDisplayedPage += 1;
+      scrollToFirstResult = true;
       render();
-      window.scrollTo(0, 0);
       loadMoreIfNeeded();
     }
 
     /** Decrements currentPage and loads results. */
     function prev() {
       currentDisplayedPage = Math.max(1, currentDisplayedPage - 1);
-      window.scrollTo(0, 0);
+      scrollToFirstResult = true;
       render();
     }
 
@@ -172,20 +202,18 @@
         $('#search-results').classList.remove('hidden');
         $('#search-results-error').classList.add('hidden');
 
-        // Discover current tab's URL & the "category" for the URL, then search.
-        getActiveTab().then(tab => {
-          category = searchAPI.getCategory(tab.url);
-          searchAPI.search(category)
-            .then(searchResults => {
-              setLoading(false);
-              if (searchResults.data.length === 0) {
-                throw 404;
-              }
-              unprocessedResults.push.apply(unprocessedResults, searchResults.data);
-              processNextResult();
-            })
-            .catch(error);
-        });
+        // Discover "category" for the URL, then search.
+        category = searchAPI.getCategory(tabURL);
+        searchAPI.search(category)
+          .then(searchResults => {
+            setLoading(false);
+            if (searchResults.data.length === 0) {
+              throw 404;
+            }
+            unprocessedResults.push.apply(unprocessedResults, searchResults.data);
+            processNextResult();
+          })
+          .catch(error);
       }
     }
 
@@ -208,72 +236,38 @@
 
       // Process the next result in the queue.
       const nextResult = unprocessedResults.shift();
-      isStyleInstalled(nextResult)
-        .then(isInstalled => {
-          if (isInstalled) {
-            // Style already installed, skip it.
-            setTimeout(processNextResult, 0); // Keep processing
-          } else if (nextResult.category !== 'site') {
-            // Style is not for a website, skip it.
-            setTimeout(processNextResult, 0); // Keep processing
-          } else {
-            // Style not installed.
-            searchAPI.fetchStyle(nextResult.id) // for "style_settings" (customizations)
-              .then(userstyleObject => {
-                // Store style settings for detecting customization later.
-                nextResult.style_settings = userstyleObject.style_settings;
-
-                processedResults.push(nextResult);
-                render();
-                setTimeout(processNextResult, DELAY_AFTER_FETCHING_STYLES); // Keep processing
-              })
-              .catch(reason => {
-                console.log('processNextResult(', nextResult.id, ') => [ERROR]: ', reason);
-                setTimeout(processNextResult, DELAY_AFTER_FETCHING_STYLES); // Keep processing
-              });
+      getStylesSafe({md5Url: UPDATE_URL.replace('%', nextResult.id)})
+        .then(([installedStyle]) => {
+          if (installedStyle) {
+            setTimeout(processNextResult);
+            return;
           }
+          if (nextResult.category !== 'site') {
+            setTimeout(processNextResult);
+            return;
+          }
+          // Style not installed.
+          // Get "style_settings" (customizations)
+          searchAPI.fetchStyle(nextResult.id)
+            .then(userstyleObject => {
+              // Store style settings for detecting customization later.
+              nextResult.style_settings = userstyleObject.style_settings;
+              processedResults.push(nextResult);
+              render();
+              setTimeout(processNextResult, DELAY_AFTER_FETCHING_STYLES);
+            })
+            .catch(reason => {
+              console.log('processNextResult(', nextResult.id, ') => [ERROR]: ', reason);
+              setTimeout(processNextResult, DELAY_AFTER_FETCHING_STYLES);
+            });
         });
     }
 
-    /**
-     * Promises if the given searchResult matches an already-installed style.
-     * @param {Object} userstyleSearchResult Search result object from userstyles.org
-     * @returns {Promise<boolean>} Resolves if the style is installed.
-     */
-    function isStyleInstalled(userstyleSearchResult) {
-      return new Promise(function (resolve, reject) {
-        getStylesSafe()
-          .then(installedStyles => {
-            const matchingStyles = installedStyles.filter(installedStyle => {
-              // Compare installed name to search result name.
-              let isMatch = installedStyle.name === userstyleSearchResult.name;
-              // Compare if search result ID (userstyles ID) is mentioned in the installed updateUrl.
-              if (installedStyle.updateUrl) {
-                isMatch &= installedStyle.updateUrl.includes('/' + userstyleSearchResult.id + '.json');
-              }
-              return isMatch;
-            });
-            resolve(matchingStyles.length > 0);
-          })
-          .catch(reject);
-      });
-    }
-
-    function createLoadingSearchResultNode() {
-      const entry = template.emptySearchResult.cloneNode(true);
-      entry.appendChild(
-        $create(
-          '.lds-spinner',
-          new Array(12).fill($create('div')).map(e => e.cloneNode()))
-      );
-      $('#search-results-list').appendChild(entry);
-    }
-
     /**
      * Constructs and adds the given search result to the popup's Search Results container.
-     * @param {Object} userstyleSearchResult The SearchResult object from userstyles.org
+     * @param {Object} result The SearchResult object from userstyles.org
      */
-    function createSearchResultNode(userstyleSearchResult) {
+    function createSearchResultNode(result) {
       /*
         userstyleSearchResult format: {
           id: 100835,
@@ -290,60 +284,46 @@
 
       const entry = template.searchResult.cloneNode(true);
       Object.assign(entry, {
-        id: 'search-result-' + userstyleSearchResult.id,
-        onclick: handleEvent.openURLandHide
+        _result: result,
+        id: ENTRY_ID_PREFIX + result.id,
       });
-      $('#search-results-list').appendChild(entry);
 
-      const searchResultName = userstyleSearchResult.name;
-      const title = $('.search-result-title', entry);
-      Object.assign(title, {
-        textContent: searchResultName,
+      Object.assign($('.search-result-title', entry), {
+        textContent: result.name,
         onclick: handleEvent.openURLandHide,
-        href: searchAPI.BASE_URL + userstyleSearchResult.url
+        href: searchAPI.BASE_URL + result.url
       });
 
       const screenshot = $('.search-result-screenshot', entry);
-      let screenshotUrl = userstyleSearchResult.screenshot_url;
+      let screenshotUrl = result.screenshot_url;
       if (screenshotUrl === null) {
         screenshotUrl = BLANK_PIXEL_DATA;
         screenshot.classList.add('no-screenshot');
       } else if (RegExp(/^[0-9]*_after.(jpe?g|png|gif)$/i).test(screenshotUrl)) {
         screenshotUrl = searchAPI.BASE_URL + '/style_screenshot_thumbnails/' + screenshotUrl;
       }
-      Object.assign(screenshot, {
-        src: screenshotUrl
+      screenshot.src = screenshotUrl;
+
+      const description = result.description
+        .replace(/<.*?>/g, '')
+        .replace(/[\r\n]{3,}/g, '\n\n');
+      Object.assign($('.search-result-description', entry), {
+        textContent: description,
+        title: description,
       });
 
-      const searchResultOverlay = $('.search-result-overlay', entry);
-
-      const description = $('.search-result-description', entry);
-      Object.assign(description, {
-        textContent: userstyleSearchResult.description.replace(/<.*?>/g, '').replace(/(\r\n?)\r\n?/g, '$1')
-      });
-      const descriptionExpand = $('.search-result-description-info', entry);
-      Object.assign(descriptionExpand, {
-        onclick: e => {
-          e.stopPropagation();
-          descriptionExpand.classList.add('hidden');
-          description.classList.add('expanded');
-        }
-      });
-
-      const authorLink = $('.search-result-author-link', entry);
-      Object.assign(authorLink, {
-        textContent: userstyleSearchResult.user.name,
-        title: userstyleSearchResult.user.name,
-        href: searchAPI.BASE_URL + '/users/' + userstyleSearchResult.user.id,
-        onclick: event => {
+      Object.assign($('.search-result-author-link', entry), {
+        textContent: result.user.name,
+        title: result.user.name,
+        href: searchAPI.BASE_URL + '/users/' + result.user.id,
+        onclick(event) {
           event.stopPropagation();
-          handleEvent.openURLandHide.call(authorLink, event);
+          handleEvent.openURLandHide.call(this, event);
         }
       });
 
-      const rating = $('.search-result-rating', entry);
       let ratingClass;
-      let ratingValue = userstyleSearchResult.rating;
+      let ratingValue = result.rating;
       if (ratingValue === null) {
         ratingClass = 'none';
         ratingValue = 'n/a';
@@ -357,99 +337,96 @@
         ratingClass = 'bad';
         ratingValue = ratingValue.toFixed(1);
       }
-      Object.assign(rating, {
+      Object.assign($('.search-result-rating', entry), {
         textContent: ratingValue,
         className: 'search-result-rating ' + ratingClass
       });
 
-      const installCount = $('.search-result-install-count', entry);
-      Object.assign(installCount, {
-        textContent: userstyleSearchResult.total_install_count.toLocaleString()
+      Object.assign($('.search-result-install-count', entry), {
+        textContent: result.total_install_count.toLocaleString()
       });
+      renderActionButtons(entry);
 
+      $('#search-results-list').appendChild(entry);
+      return entry;
+    }
+
+    function renderActionButtons(entry) {
       const uninstallButton = $('.search-result-uninstall', entry);
-      uninstallButton.onclick = uninstall;
+      uninstallButton.onclick = onUninstallClicked;
 
       const installButton = $('.search-result-install', entry);
-      installButton.onclick = install;
+      installButton.onclick = onInstallClicked;
 
-      if (userstyleSearchResult.style_settings.length > 0) {
+      const result = entry._result;
+      if (result.style_settings.length > 0) {
         // Style has customizations
         installButton.classList.add('customize');
         uninstallButton.classList.add('customize');
 
         const customizeButton = $('.search-result-customize', entry);
-        customizeButton.dataset.href = searchAPI.BASE_URL + userstyleSearchResult.url;
+        customizeButton.dataset.href = searchAPI.BASE_URL + result.url;
         customizeButton.classList.remove('hidden');
-        customizeButton.onclick = event => {
+        customizeButton.onclick = function (event) {
           event.stopPropagation();
-          handleEvent.openURLandHide.call(customizeButton, event);
+          handleEvent.openURLandHide.call(this, event);
         };
       }
 
-      if (userstyleSearchResult.installed) {
-        screenshot.onclick = uninstall;
-        searchResultOverlay.onclick = uninstall;
-        installButton.classList.add('hidden');
-        uninstallButton.classList.remove('hidden');
-      } else {
-        screenshot.onclick = install;
-        searchResultOverlay.onclick = install;
-      }
+      installButton.classList.toggle('hidden', Boolean(result.installed));
+      uninstallButton.classList.toggle('hidden', !result.installed);
+    }
 
-      /** Uninstalls the current userstyleSearchResult from Stylus. */
-      function uninstall(event) {
-        event.stopPropagation();
-        deleteStyleSafe({id: userstyleSearchResult.installedStyleId})
-          .then(() => {
-            userstyleSearchResult.installed = false;
-            render();
-          });
-      }
+    function onUninstallClicked(event) {
+      event.stopPropagation();
+      const entry = this.closest('.search-result');
+      const result = entry._result;
+      deleteStyleSafe({id: result.installedStyleId})
+        .then(() => {
+          entry._result.installed = false;
+          renderActionButtons(entry);
+        });
+    }
 
-      /** Installs the current userstyleSearchResult into Stylus. */
-      function install(event) {
-        if (event) {
-          event.stopPropagation();
-        }
+    /** Installs the current userstyleSearchResult into Stylus. */
+    function onInstallClicked(event) {
+      event.stopPropagation();
 
-        // Spinner while installing
-        entry.appendChild(
-          $create(
-            '.lds-spinner',
-            new Array(12).fill($create('div')).map(e => e.cloneNode()))
-        );
-        installButton.disabled = true;
+      const entry = this.closest('.search-result');
+      const result = entry._result;
+      const installButton = $('.search-result-install', entry);
 
-        // Fetch .JSON style
-        searchAPI.fetchStyleJson(userstyleSearchResult)
-          .then(userstyleJson => {
-            // Install style
-            saveStyleSafe(userstyleJson)
-              .then(savedStyle => {
-                // Success: Store installed styleId, mark as installed.
-                userstyleSearchResult.installed = true;
-                userstyleSearchResult.installedStyleId = savedStyle.id;
-                render(); // Hides install button, shows uninstall button.
+      showSpinner(entry);
+      installButton.disabled = true;
 
-                $.remove('.lds-spinner', entry);
-                installButton.disabled = false;
-              });
-          })
-          .catch(reason => {
-            const usoId = userstyleSearchResult.id;
-            console.log('install:saveStyleSafe(usoID:', usoId, ') => [ERROR]: ', reason);
-            alert('Error while downloading usoID:' + usoId + '\nReason: ' + reason);
+      // Fetch .JSON style
+      searchAPI.fetchStyleJson(result)
+        .then(userstyleJson => {
+          // Install style
+          saveStyleSafe(userstyleJson)
+            .then(savedStyle => {
+              // Success: Store installed styleId, mark as installed.
+              result.installed = true;
+              result.installedStyleId = savedStyle.id;
+              renderActionButtons(entry);
 
-            $.remove('.lds-spinner', entry);
-            installButton.disabled = false;
-          });
-        return true;
-      }
+              $.remove('.lds-spinner', entry);
+              installButton.disabled = false;
+            });
+        })
+        .catch(reason => {
+          const usoId = result.id;
+          console.log('install:saveStyleSafe(usoID:', usoId, ') => [ERROR]: ', reason);
+          alert('Error while downloading usoID:' + usoId + '\nReason: ' + reason);
+
+          $.remove('.lds-spinner', entry);
+          installButton.disabled = false;
+        });
+      return true;
+    }
 
-    } // End of createSearchResultNode
   } // End of searchResultsController
-})();
+});
 
 /**
  * Library for interacting with userstyles.org