From 1f95fd3571255e8c4a9d1147284a16b4f338fb30 Mon Sep 17 00:00:00 2001
From: derv82 <derv82@gmail.com>
Date: Thu, 7 Dec 2017 02:06:44 -0800
Subject: [PATCH] Search results show "uninstall" after installation.

* Not removed from search results
* Still shows "customize" button.
---
 popup.html               |  1 +
 popup/search-results.css |  6 +++--
 popup/search-results.js  | 50 ++++++++++++++++++++++++----------------
 3 files changed, 35 insertions(+), 22 deletions(-)

diff --git a/popup.html b/popup.html
index c110da56..c1677d5c 100644
--- a/popup.html
+++ b/popup.html
@@ -91,6 +91,7 @@
         <div class="search-result-overlay">
           <div class="actions">
             <button class="search-result-install" i18n-text="installButton"></button>
+            <button class="search-result-uninstall hidden" i18n-text="deleteStyleLabel"></button>
             <button class="search-result-customize hidden"
                     i18n-text="searchResultCustomize"
                     i18n-title="searchResultCustomizeTooltip"></button>
diff --git a/popup/search-results.css b/popup/search-results.css
index 0aac9f3a..9f6edd62 100755
--- a/popup/search-results.css
+++ b/popup/search-results.css
@@ -128,10 +128,12 @@ body.search-results-shown {
   font-weight: 600;
 }
 
-.search-result-install {
+.search-result-install, .search-result-uninstall {
   width: 100%;
 }
-.search-result-install.customize, .search-result-customize {
+.search-result-install.customize,
+.search-result-uninstall.customize,
+.search-result-customize {
   width: 50%;
 }
 
diff --git a/popup/search-results.js b/popup/search-results.js
index a386e77a..568576e9 100755
--- a/popup/search-results.js
+++ b/popup/search-results.js
@@ -283,9 +283,6 @@
           style_settings: [...]
         }
       */
-      if (userstyleSearchResult.installed) {
-        return;
-      }
 
       const entry = template.searchResult.cloneNode(true);
       Object.assign(entry, {
@@ -315,7 +312,7 @@
         title: searchResultName
       });
 
-      $('.search-result-overlay', entry).onclick = install;
+      const searchResultOverlay = $('.search-result-overlay', entry);
 
       const description = $('.search-result-description', entry);
       Object.assign(description, {
@@ -367,12 +364,17 @@
         textContent: userstyleSearchResult.total_install_count.toLocaleString()
       });
 
+      const uninstallButton = $('.search-result-uninstall', entry);
+      uninstallButton.onclick = uninstall;
+
       const installButton = $('.search-result-install', entry);
       installButton.onclick = install;
 
       if (userstyleSearchResult.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.classList.remove('hidden');
@@ -382,7 +384,25 @@
         };
       }
 
-      /** Installs the current userstyleSearchResult into stylus. */
+      if (userstyleSearchResult.installed) {
+        searchResultOverlay.onclick = uninstall;
+        installButton.classList.add('hidden');
+        uninstallButton.classList.remove('hidden');
+      } else {
+        searchResultOverlay.onclick = install;
+      }
+
+      /** Uninstalls the current userstyleSearchResult from Stylus. */
+      function uninstall(event) {
+        event.stopPropagation();
+        deleteStyleSafe({id: userstyleSearchResult.installedStyleId})
+          .then(() => {
+            userstyleSearchResult.installed = false;
+            render();
+          });
+      }
+
+      /** Installs the current userstyleSearchResult into Stylus. */
       function install(event) {
         if (event) {
           event.stopPropagation();
@@ -390,21 +410,11 @@
         const styleId = userstyleSearchResult.id;
         const url = searchAPI.BASE_URL + '/styles/chrome/' + styleId + '.json';
         saveStyleSafe(userstyleSearchResult.json)
-          .then(() => {
-            // Remove search result after installing
-            let matchingIndex = -1;
-            processedResults.forEach((processedResult, index) => {
-              if (processedResult.id === userstyleSearchResult.id) {
-                matchingIndex = index;
-              }
-            });
-            if (matchingIndex >= 0) {
-              processedResults.splice(matchingIndex, 1);
-            }
-            render();
-
-            // Load more results if needed.
-            processNextResult();
+          .then(savedStyle => {
+            // Success: Store installed styleId, mark as installed.
+            userstyleSearchResult.installed = true;
+            userstyleSearchResult.installedStyleId = savedStyle.id;
+            render(); // Hides install button, shows uninstall button.
           })
           .catch(reason => {
             console.log('install:saveStyleSafe(', url, ') => [ERROR]: ', reason);