From 23733bd9fe229703b5a38e5e5faf2ad50a359f02 Mon Sep 17 00:00:00 2001
From: tophf <tophf@gmx.com>
Date: Mon, 11 Dec 2017 22:26:33 +0300
Subject: [PATCH] show 'Style installed' in search result after inline install

---
 popup.html               |  3 ++-
 popup/search-results.css | 14 +++++++++++++-
 popup/search-results.js  | 20 +++++++++++++++++---
 3 files changed, 32 insertions(+), 5 deletions(-)

diff --git a/popup.html b/popup.html
index d90375fd..b22cab7c 100644
--- a/popup.html
+++ b/popup.html
@@ -88,6 +88,7 @@
     <div class="search-result">
       <a class="search-result-title"><span></span></a>
       <div class="search-result-info">
+        <div class="search-result-status"></div>
         <img class="search-result-screenshot" i18n-title="installButton">
         <div class="search-result-actions">
           <button class="search-result-install hidden" i18n-text="installButton"></button>
@@ -215,9 +216,9 @@
     </div>
   </div>
 
+  <div id="search-results-error" class="hidden"></div>
   <div id="search-results" class="hidden">
     <div class="search-results-nav" data-type="top"></div>
-    <div id="search-results-error" class="hidden"></div>
     <div id="search-results-list"></div>
     <div class="search-results-nav" data-type="bottom"></div>
   </div>
diff --git a/popup/search-results.css b/popup/search-results.css
index 0e1f4403..f77ed449 100755
--- a/popup/search-results.css
+++ b/popup/search-results.css
@@ -26,7 +26,7 @@ body.search-results-shown {
   font-weight: bold;
   padding: 5px;
   text-align: center;
-  margin: -.5rem 0 1rem;
+  margin: -.5rem 0 9px;
 }
 
 #search-results-list {
@@ -96,6 +96,17 @@ body.search-results-shown {
   position: relative;
 }
 
+.search-result[data-installed] .search-result-status {
+  top: 0;
+  left: 0;
+  right: 0;
+  line-height: 18px;
+  text-align: center;
+  position: absolute;
+  background-color: rgba(0, 128, 0, 0.76);
+  color: #fff;
+}
+
 .search-result:hover .search-result-actions {
   opacity: 1;
 }
@@ -127,6 +138,7 @@ body.search-results-shown {
   width: 100%;
   line-height: 16px;
   margin: 0;
+  padding-bottom: 3px;
 }
 
 .search-result:hover .search-result-meta {
diff --git a/popup/search-results.js b/popup/search-results.js
index ed6353a7..4b0b0212 100755
--- a/popup/search-results.js
+++ b/popup/search-results.js
@@ -182,6 +182,11 @@ window.addEventListener('showStyles:done', function _() {
         t('searchResultNoneFound') :
         t('genericErrorOccurred') + '\n' + reason;
     dom.error.classList.remove('hidden');
+    dom.container.classList.toggle('hidden', !processedResults.length);
+    document.body.classList.toggle('search-results-shown', processedResults.length > 0);
+    if (dom.error.getBoundingClientRect().bottom > window.innerHeight) {
+      dom.error.scrollIntoView();
+    }
   }
 
   /**
@@ -449,9 +454,19 @@ window.addEventListener('showStyles:done', function _() {
   }
 
   function renderActionButtons(entry) {
+    const result = entry._result;
+
+    if (result.installed && !('installed' in entry.dataset)) {
+      entry.dataset.installed = '';
+      $('.search-result-status', entry).textContent = t('installButtonInstalled');
+    } else if (!result.installed && 'installed' in entry.dataset) {
+      delete entry.dataset.installed;
+      $('.search-result-status', entry).textContent = '';
+    }
+
     const screenshot = $('.search-result-screenshot', entry);
-    screenshot.onclick = entry._result.installed ? onUninstallClicked : onInstallClicked;
-    screenshot.title = entry._result.installed ? t('deleteStyleLabel') : t('installButton');
+    screenshot.onclick = result.installed ? onUninstallClicked : onInstallClicked;
+    screenshot.title = result.installed ? t('deleteStyleLabel') : t('installButton');
 
     const uninstallButton = $('.search-result-uninstall', entry);
     uninstallButton.onclick = onUninstallClicked;
@@ -459,7 +474,6 @@ window.addEventListener('showStyles:done', function _() {
     const installButton = $('.search-result-install', entry);
     installButton.onclick = onInstallClicked;
 
-    const result = entry._result;
     if ((result.style_settings || []).length > 0) {
       // Style has customizations
       installButton.classList.add('customize');