Spinner while loading results. Description expando.

popup.html

@@ -86,7 +86,14 @@
     <div class="searchResult">
       <img class="searchResult-screenshot" />
       <a class="searchResult-title" target="_blank"></a>
-      <div class="searchResult-description"></div>
+      <div class="searchResult-description-group">
+        <div class="searchResult-description"></div>
+        <div class="searchResult-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="searchResult-author">
         <label i18n-text="author"></label>
         <a class="searchResult-authorLink" target="_blank"></a>
@@ -153,13 +160,13 @@
       </h3>
       <div id="searchResults-list"></div>
       <div id="searchResultsNav">
-        <button id="searchResultsNav-prev" title="Previous page" disabled>Prev</button>
+        <button id="searchResultsNav-prev" title="Previous page" disabled>&#8592;</button>
         <label>
           <span id="searchResultsNav-currentPage" title="Current page">-</span>
           /
           <span id="searchResultsNav-totalPages" title="Total pages of search results">-</span>
         </label>
-        <button id="searchResultsNav-next" title="Next page" disabled>Next</button>
+        <button id="searchResultsNav-next" title="Next page" disabled>&#8594;</button>
       </div>
     </div>
     <div class="left-gutter"></div>
@@ -167,7 +174,7 @@
       <div id="find-styles">
         <a id="find-styles-link" i18n-text="findStylesForSite"></a>
         <span id="find-styles-inline-group">
-          <label id="find-styles-inline-label">
+          <label>
             <input id="find-styles-inline" class="checker" type="checkbox" checked />
             <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"/>

popup/search-results.css

@@ -44,9 +44,26 @@ body.search-results-shown {
 }
 
 .searchResult-description {
+  width: 90%;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
+  display: inline-block;
+}
+
+.searchResult-description.expanded {
+  width: 100%;
+  white-space: normal;
+  overflow: auto;
+  text-overflow: unset;
+  display: block;
+}
+
+.searchResult-description-info {
+  display: inline-block;
+  cursor: pointer;
+  width: 16px;
+  height: 14px;
 }
 
 .searchResult-author {
@@ -116,3 +133,127 @@ body.search-results-shown {
   position: relative;
   padding-left: 16px;
 }
+
+/* spinner: https://github.com/loadingio/css-spinner */
+
+.lds-spinner {
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  pointer-events: none;
+  opacity: 0;
+}
+
+@keyframes lds-spinner {
+  0% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+@-webkit-keyframes lds-spinner {
+  0% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+.lds-spinner {
+  position: absolute;
+  width: 200px;
+  height: 200px;
+  top: 50px;
+  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;
+  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;
+}

popup/search-results.js

@@ -40,8 +40,6 @@
     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=';
-    let loading = false;
-    let tabURL; // The active tab's URL.
     let category; // Category for the active tab's URL.
     let currentDisplayedPage = 1; // Current page number in popup.html
 
@@ -52,9 +50,28 @@
       $('#searchResultsNav-next').onclick = next;
       document.body.classList.add('search-results-shown');
       window.scrollTo(0, 0);
-      load();
     }
 
+    /**
+     * Adds spinner to node.
+     * @param {DOMNode} parentNode The parent node to append/remove the spinner to/from.
+     * @param {Boolean} isLoading If the element is loading or stopped loading.
+     */
+    function setLoading(parentNode, isLoading) {
+      if (isLoading) {
+        if ($('.lds-spinner', parentNode) === null) {
+          parentNode.appendChild(
+            $create(
+              '.lds-spinner',
+              new Array(12).fill($create('div')).map(e => e.cloneNode()))
+          );
+        }
+      } else {
+        $.remove('.lds-spinner', parentNode);
+      }
+    }
+
+
     function render() {
       $('#searchResults-list').textContent = ''; // Clear search results
 
@@ -65,7 +82,7 @@
         createSearchResultNode(resultToDisplay);
       });
 
-      $('#searchResultsNav-prev').disabled = (currentDisplayedPage <= 1 || loading);
+      $('#searchResultsNav-prev').disabled = (currentDisplayedPage <= 1);
       $('#searchResultsNav-currentPage').textContent = currentDisplayedPage;
 
       let totalResultsCount = processedResults.length;
@@ -74,15 +91,8 @@
         totalResultsCount += DISPLAYED_RESULTS_PER_PAGE;
       }
       const totalPageCount = Math.ceil(Math.max(1, totalResultsCount / DISPLAYED_RESULTS_PER_PAGE));
-      $('#searchResultsNav-next').disabled = (currentDisplayedPage >= totalPageCount || loading);
+      $('#searchResultsNav-next').disabled = (currentDisplayedPage >= totalPageCount);
       $('#searchResultsNav-totalPages').textContent = totalPageCount;
-
-      const navNode = $('#searchResultsNav');
-      if (loading && !navNode.classList.contains('loading')) {
-        navNode.classList.add('loading');
-      } else {
-        navNode.classList.remove('loading');
-      }
     }
 
     /**
@@ -94,12 +104,9 @@
 
     function loadMoreIfNeeded() {
       if (shouldLoadMore()) {
-        loading = true;
-        render();
         setTimeout(load, DELAY_BEFORE_SEARCHING_STYLES);
       } else {
-        loading = false;
+        setLoading($('#searchResults'), false);
-        render();
       }
     }
 
@@ -139,38 +146,33 @@
      * Initializes search results container, starts fetching results.
      */
     function load() {
-      loading = true;
-      render();
-
       if (unprocessedResults.length > 0) {
+        // Keep processing search results if there are any.
         processNextResult();
-        return true;
+      } else if (searchAPI.isExhausted()) {
+        // Stop if no more search results.
+        setLoading($('#searchResults'), false);
+      } else {
+        setLoading($('#searchResults'), true);
+        // Search for more results.
+        $('#searchResults').classList.remove('hidden');
+        $('#searchResults-error').classList.add('hidden');
+
+        // Discover current tab's URL & the "category" for the URL, then search.
+        getActiveTab().then(tab => {
+          category = searchAPI.getCategory(tab.url);
+          $('#searchResults-terms').textContent = category;
+          searchAPI.search(category)
+            .then(searchResults => {
+              if (searchResults.data.length === 0) {
+                throw 404;
+              }
+              unprocessedResults.push.apply(unprocessedResults, searchResults.data);
+              processNextResult();
+            })
+            .catch(error);
+        });
       }
-
-      if (searchAPI.isExhausted()) {
-        loading = false;
-        render();
-        return true;
-      }
-
-      $('#searchResults').classList.remove('hidden');
-      $('#searchResults-error').classList.add('hidden');
-
-      // Discover current tab's URL & the "category" for the URL, then search.
-      getActiveTab().then(tab => {
-        tabURL = tab.url;
-        category = searchAPI.getCategory(tabURL);
-        $('#searchResults-terms').textContent = category;
-        searchAPI.search(category)
-          .then(searchResults => {
-            if (searchResults.data.length === 0) {
-              throw 404;
-            }
-            unprocessedResults.push.apply(unprocessedResults, searchResults.data);
-            processNextResult();
-          })
-          .catch(error);
-      });
     }
 
     /**
@@ -181,12 +183,12 @@
      */
     function processNextResult() {
       if (!shouldLoadMore()) {
-        loading = false;
+        setLoading($('#searchResults'), false);
-        render();
         return;
       }
 
       if (unprocessedResults.length === 0) {
+        // No more results to process
         loadMoreIfNeeded();
         return;
       }
@@ -197,23 +199,21 @@
         .then(isInstalled => {
           if (isInstalled) {
             // Style already installed, skip it.
-            // TODO: Include the style anyway with option to "Uninstall" (?)
             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.
-            // 1: Fetch full style (.JSON) to see if it applies to this site.
-            // 2: Fetch full style info to see if it has customizations.
             Promise.all([
               searchAPI.fetchStyleJson(nextResult.id), // for "sections" (applicable URLs)
-              searchAPI.fetchStyle(nextResult.id)      // for "style_settings" (customizations)
+              searchAPI.fetchStyle(nextResult.id),     // for "style_settings" (customizations)
-            ]).then(([userstyleJson, userstyleObject]) => {
+              getActiveTab()                           // for comparing tab.url to sections.
+            ]).then(([userstyleJson, userstyleObject, tab]) => {
               // Extract applicable sections (i.e. styles that apply to the current site)
               const applicableSections = BG.getApplicableSections({
                 style: userstyleJson,
-                matchUrl: tabURL,
+                matchUrl: tab.url,
                 stopOnFirst: true
               });
               if (applicableSections.length > 0) {
@@ -310,11 +310,17 @@
         title: searchResultName
       });
 
-      // TODO: Expand/collapse description
       const description = $('.searchResult-description', entry);
       Object.assign(description, {
         textContent: userstyleSearchResult.description.replace(/<.*?>/g, ''),
-        title: userstyleSearchResult.description.replace(/<.*?>/g, '')
+      });
+      const descriptionExpand = $('.searchResult-description-info', entry);
+      Object.assign(descriptionExpand, {
+        onclick: e => {
+          descriptionExpand.classList.add('hidden');
+          description.classList.add('expanded');
+          description.innerHTML = userstyleSearchResult.description.replace(/<br\/?>\s*<br\/?>/, '<br/>');
+        }
       });
 
       const authorLink = $('.searchResult-authorLink', entry);
@@ -365,12 +371,13 @@
 
       /** Installs the current userstyleSearchResult into stylus. */
       function install() {
-        entry.classList.add('loading');
-
         const styleId = userstyleSearchResult.id;
         const url = searchAPI.BASE_URL + '/styles/chrome/' + styleId + '.json';
+        setLoading(entry, true);
         saveStyleSafe(userstyleSearchResult.json)
           .then(() => {
+            setLoading(entry, false);
+
             // Remove search result after installing
             let matchingIndex = -1;
             processedResults.forEach((processedResult, index) => {
@@ -381,9 +388,13 @@
             if (matchingIndex >= 0) {
               processedResults.splice(matchingIndex, 1);
             }
+            render();
+
+            // Load more results if needed.
             processNextResult();
           })
           .catch(reason => {
+            setLoading(entry, false);
             console.log('install:saveStyleSafe(', url, ') => [ERROR]: ', reason);
             alert('Error while downloading ' + url + '\nReason: ' + reason);
           });