From 1daa12b59f7219ff63606d25147438bc2c961a56 Mon Sep 17 00:00:00 2001
From: derv82 <derv82@gmail.com>
Date: Sat, 2 Dec 2017 03:29:12 -0800
Subject: [PATCH] Search userstyles by-category. Fetch only when needed.

* Discovers category via userstyles request.
* Disables navigation while loading results.
* Navigation above search results
* Handles styles without screenshots (blank img).
---
 popup.html               |   4 +-
 popup/search-results.css |  16 ++-
 popup/search-results.js  | 221 +++++++++++++++++++++++++--------------
 3 files changed, 155 insertions(+), 86 deletions(-)

diff --git a/popup.html b/popup.html
index 1ee6a9f0..1190ab76 100644
--- a/popup.html
+++ b/popup.html
@@ -82,7 +82,7 @@
 
   <template data-id="searchResult">
     <div class="searchResult">
-      <img class="searchResult-screenshot" />
+      <img class="searchResult-screenshot no-screenshot" />
       <a class="searchResult-title" target="_blank"></a>
       <div class="searchResult-description"></div>
       <div class="searchResult-author">
@@ -130,7 +130,6 @@
     </div>
     <div id="searchResults" class="hidden">
       <h3>Search Results for <span id="searchResults-terms">-</span></h3>
-      <div id="searchResults-list"></div>
       <div id="searchResultsNav">
         <button id="searchResultsNav-prev" title="Previous page" disabled>Prev</button>
         <label>
@@ -140,6 +139,7 @@
         </label>
         <button id="searchResultsNav-next" title="Next page" disabled>Next</button>
       </div>
+      <div id="searchResults-list"></div>
     </div>
     <div class="left-gutter"></div>
     <div class="main-controls">
diff --git a/popup/search-results.css b/popup/search-results.css
index 7984dd20..5823682b 100755
--- a/popup/search-results.css
+++ b/popup/search-results.css
@@ -42,6 +42,10 @@
   max-width: 180px;
   max-height: 180px;
 }
+.searchResult-screenshot.no-screenshot {
+  width: 180px;
+  height: 40px;
+}
 
 .searchResult-title {
   display: block;
@@ -58,10 +62,18 @@
   white-space: nowrap;
 }
 
+.searchResult-install {
+  width: 100%;
+}
+
 #searchResultsNav {
   flex-direction: row;
   text-align: center;
   word-break: keep-all;
+  opacity: 1.0;
+}
+#searchResultsNav.loading {
+  opacity: 0.5;
 }
 
 #searchResultsNav label {
@@ -74,10 +86,6 @@
   text-align: center;
 }
 
-.searchResult-install {
-  width: 100%;
-}
-
 #searchResultsNav-prev[disabled],
 #searchResultsNav-next[disabled] {
   cursor: not-allowed;
diff --git a/popup/search-results.js b/popup/search-results.js
index c37d3ac3..2d14c8b9 100755
--- a/popup/search-results.js
+++ b/popup/search-results.js
@@ -1,18 +1,15 @@
 /* global handleEvent tryJSONparse getStylesSafe BG */
 'use strict';
 
-// TODO on Install: Promise.all([fetchJSON, fetchHTML]) -> popup if customization is present, install otheriwse.
-
 /**
  * Library for interacting with userstyles.org
  * @returns {Object} Exposed methods representing the search results on userstyles.org
  */
 function SearchUserstyles() {
-  const RESULTS_PER_PAGE = 20;
   let totalPages, totalResults;
   let currentPage = 1;
 
-  return {getCurrentPage, getTotalPages, getTotalResults, search, fetchStyleJson};
+  return {getCurrentPage, getTotalPages, getTotalResults, getCategory, search, fetchStyleJson};
 
   function getCurrentPage() {
     return currentPage;
@@ -26,6 +23,27 @@ function SearchUserstyles() {
     return totalResults;
   }
 
+  function getCategory(url) {
+    const hostname = new URL(url).hostname;
+    return new Promise(resolve => {
+      const request = new XMLHttpRequest();
+      const browseURL = 'https://userstyles.org/styles/browse/all/' + encodeURIComponent(url);
+      request.open('HEAD', browseURL, true);
+      request.onreadystatechange = () => {
+        if (request.readyState === XMLHttpRequest.DONE) {
+          const responseURL = new URL(request.responseURL);
+          const category = responseURL.searchParams.get('category');
+          if (category !== null) {
+            resolve(category);
+          } else {
+            resolve(hostname);
+          }
+        }
+      };
+      request.send(null);
+    });
+  }
+
   /**
    * Fetches the JSON style object from userstyles.org (containing code, sections, updateUrl, etc).
    * This is fetched from the /styles/chrome/ID.json endpoint.
@@ -34,7 +52,7 @@ function SearchUserstyles() {
    */
   function fetchStyleJson(userstylesId) {
     return new Promise((resolve, reject) => {
-      let jsonUrl = 'https://userstyles.org/styles/chrome/' + userstylesId + '.json';
+      const jsonUrl = 'https://userstyles.org/styles/chrome/' + userstylesId + '.json';
       download(jsonUrl)
         .then(responseText => {
           resolve(tryJSONparse(responseText));
@@ -46,21 +64,25 @@ function SearchUserstyles() {
   /**
    * Fetches (and JSON-parses) search results from a userstyles.org search API.
    * Automatically sets currentPage, totalPages, and totalResults.
-   * @param {string} searchText Text to search for.
+   * @param {string} category The usrestyles.org "category" (subcategory) OR a any search string.
    * @return {Object} Response object from userstyles.org
    */
-  function search(searchText) {
+  function search(category) {
     return new Promise((resolve, reject) => {
+      if (totalPages !== undefined && currentPage > totalPages) {
+        resolve({'data':[]});
+      }
+
       const TIMEOUT = 10000;
       const headers = {
         'Content-type': 'application/json',
         'Accept': '*/*'
       };
 
-      const searchUrl = new URL('https://userstyles.org/api/v1/styles/search');
-      let queryParams = 'search=' + encodeURIComponent(searchText);
+      const searchUrl = new URL('https://userstyles.org/api/v1/styles/subcategory');
+      let queryParams = 'search=' + encodeURIComponent(category);
       queryParams += '&page=' + currentPage;
-      queryParams += '&per_page=' + RESULTS_PER_PAGE;
+      queryParams += '&country=NA';
       searchUrl.search = '?' + queryParams;
       const xhr = new XMLHttpRequest();
       xhr.timeout = TIMEOUT;
@@ -90,52 +112,84 @@ function SearchUserstyles() {
  * @returns {Object} Includes load(), next(), and prev() methods to alter the search results.
  */
 const SearchResults = (() => {
-  const RESULTS_PER_PAGE = 3; // Number of results to display in popup.html
-  const DELAY_BETWEEN_RESULTS_MS = 500;
+  const DISPLAYED_RESULTS_PER_PAGE = 3; // Number of results to display in popup.html
+  const DELAY_BETWEEN_RESULTS_MS = 500; // Millisecs to wait before fetching next batch of search results.
+  const DELAY_BETWEEN_FETCHING_STYLES = 0; // Millisecs to wait before fetching .JSON for next search result.
   const searchAPI = SearchUserstyles();
   const unprocessedResults = []; // Search results not yet processed.
   const processedResults = []; // Search results that are not installed and apply ot the page (includes 'json' field with full style).
+  let loading = false;
   let tabURL; // The active tab's URL.
-  let currentPage = 1; // Current page number in popup.html
+  let currentDisplayedPage = 1; // Current page number in popup.html
   let nonApplicableResults = 0; // Number of results that don't apply to the searched site (thx userstyles.org!)
   let alreadyInstalledResults = 0; // Number of results that are already installed.
 
   return {load, next, prev};
 
   function render() {
-    // Clear search results
-    $('#searchResults-list').innerHTML = '';
+    $('#searchResults-list').innerHTML = ''; // Clear search results
 
-    // Show search results for current page
-    const startIndex = (currentPage - 1) * RESULTS_PER_PAGE;
-    const endIndex = currentPage * RESULTS_PER_PAGE;
-    const resultSubset = processedResults.slice(startIndex, endIndex);
-    console.log('Render processedResults[' + startIndex + ':' + endIndex + '] = ', resultSubset);
-    resultSubset.forEach(index => {
-      createSearchResult(index);
+    const startIndex = (currentDisplayedPage - 1) * DISPLAYED_RESULTS_PER_PAGE;
+    const endIndex = currentDisplayedPage * DISPLAYED_RESULTS_PER_PAGE;
+    const displayedResults = processedResults.slice(startIndex, endIndex);
+    displayedResults.forEach(resultToDisplay => {
+      createSearchResultNode(resultToDisplay);
     });
-    if (resultSubset.length < RESULTS_PER_PAGE) {
-      // TODO: Show "Results are still loading" message.
+
+    if (currentDisplayedPage <= 1 || loading) {
+      $('#searchResultsNav-prev').setAttribute('disabled', 'disabled');
     } else {
-      // TODO: Hide "results are still loading" message.
+      $('#searchResultsNav-prev').removeAttribute('disabled');
     }
+    $('#searchResultsNav-currentPage').textContent = currentDisplayedPage;
+
+    // Hack: Add 1 page if there's results left to process.
+    const totalResultsCount = processedResults.length + (unprocessedResults.length ? DISPLAYED_RESULTS_PER_PAGE : 0);
+    const totalPageCount = Math.ceil(Math.max(1, totalResultsCount / DISPLAYED_RESULTS_PER_PAGE));
+    if (currentDisplayedPage >= totalPageCount || loading) {
+      $('#searchResultsNav-next').setAttribute('disabled', 'disabled');
+    } else {
+      $('#searchResultsNav-next').removeAttribute('disabled');
+    }
+    $('#searchResultsNav-totalPages').textContent = totalPageCount;
+
+    const navNode = $('#searchResultsNav');
+    if (loading && !navNode.classList.contains('loading')) {
+      navNode.classList.add('loading');
+    } else {
+      navNode.classList.remove('loading');
+    }
+  }
+
+  function shouldLoadMore() {
+    const result = (processedResults.length < currentDisplayedPage * DISPLAYED_RESULTS_PER_PAGE)
+    console.log('shouldLoadMore:',
+                result ? 'YES' : 'NO',
+                ' processedResults.length(' + processedResults.length + ')',
+                '< currentDisplayedPage(' + currentDisplayedPage + ')',
+                '* DISPLAYED_RESULTS_PER_PAGE(' + DISPLAYED_RESULTS_PER_PAGE + ')');
+    return result;
   }
 
   function loadMoreIfNeeded() {
-    if (processedResults.length < (currentPage + 1) * RESULTS_PER_PAGE) {
-      console.log('loadMoreIfNeeded: YES. currentPage:' + currentPage, 'processedResults.length:' + processedResults.length);
+    if (shouldLoadMore()) {
+      console.log('loadMoreIfNeeded: YES.');
+      loading = true;
+      render();
       setTimeout(load, 1000);
     } else {
-      console.log('loadMoreIfNeeded: NO. currentPage:' + currentPage, 'processedResults.length:' + processedResults.length);
+      console.log('loadMoreIfNeeded: NO.');
+      loading = false;
+      render();
     }
   }
 
-  /** Increments currentPage and loads results. */
+  /** Increments currentDisplayedPage and loads results. */
   function next(event) {
     if (event) {
       event.preventDefault();
     }
-    currentPage += 1;
+    currentDisplayedPage += 1;
     render();
     loadMoreIfNeeded();
   }
@@ -145,7 +199,7 @@ const SearchResults = (() => {
     if (event) {
       event.preventDefault();
     }
-    currentPage = Math.max(1, currentPage - 1);
+    currentDisplayedPage = Math.max(1, currentDisplayedPage - 1);
     render();
   }
 
@@ -175,6 +229,15 @@ const SearchResults = (() => {
     if (event) {
       event.preventDefault();
     }
+
+    loading = true;
+    render();
+
+    if (unprocessedResults.length > 0) {
+      processNextResult();
+      return true;
+    }
+
     $('#load-search-results').classList.add('hidden');
     $('#searchResults').classList.remove('hidden');
     $('#searchResults-error').classList.add('hidden');
@@ -182,26 +245,38 @@ const SearchResults = (() => {
     // Find styles for the current active tab
     getActiveTab().then(tab => {
       tabURL = tab.url;
-      const hostname = new URL(tabURL).hostname.replace(/^(?:.*\.)?([^.]*\.(co\.)?[^.]*)$/i, '$1');
-      $('#searchResults-terms').textContent = hostname;
+      searchAPI.getCategory(tabURL)
+        .then(category => {
+          console.log('userstyles.org "category" for URL ' + tabURL + ' is ' + category);
+          $('#searchResults-terms').textContent = category;
 
-      console.log('load#searchAPI.search(' + hostname + ')');
-      searchAPI.search(hostname)
-        .then(searchResults => {
-          if (searchResults.data.length === 0) {
-            throw 404;
-          }
-          unprocessedResults.push.apply(unprocessedResults, searchResults.data);
-          processNextResult();
-        })
-        .catch(error);
+          searchAPI.search(category)
+            .then(searchResults => {
+              console.log('load#searchAPI.search(', category, ') => ',
+                          searchResults.data.length, 'results');
+              if (searchResults.data.length === 0) {
+                throw 404;
+              }
+              unprocessedResults.push.apply(unprocessedResults, searchResults.data);
+              processNextResult();
+            })
+            .catch(error);
+        });
     });
     return true;
   }
 
   function processNextResult() {
+    if (!shouldLoadMore()) {
+      console.log('[' + unprocessedResults.length + '] search results remain to be processed: STOPPED');
+      loading = false;
+      render();
+      return;
+    } else {
+      console.log('[' + unprocessedResults.length + '] search results remain to be processed: PROCESSING');
+    }
+
     if (unprocessedResults.length === 0) {
-      console.log('processNextResult:unprocessedResults === 0');
       loadMoreIfNeeded();
       return;
     }
@@ -212,16 +287,17 @@ const SearchResults = (() => {
     if (matchingStyles.length > 0) {
       // Style already installed, skip it.
       // TODO: Include the style anyway with option to "Uninstall" (?)
-      console.log('style "' + nextResult.name + '" already installed');
+      console.log('[' + unprocessedResults.length + '] style "' + nextResult.name + '" already installed: CONTINUING');
       alreadyInstalledResults += 1;
-      setTimeout(processNextResult, 0); // Keep processing
+      setTimeout(processNextResult, DELAY_BETWEEN_FETCHING_STYLES); // Keep processing
     } else if (nextResult.category !== 'site') {
       // Style is not for a website, skip it.
-      console.log('style "' + nextResult.name + '" category is for "' + nextResult.category + '", not "site"');
+      console.log('[' + unprocessedResults.length + '] style "' + nextResult.name + '" category is for "' + nextResult.category + '", not "site": CONTINUING');
       nonApplicableResults += 1;
       setTimeout(processNextResult, 0); // Keep processing
     } else {
       // Style not installed, fetch full style to see if it applies to this site.
+      console.log('[' + unprocessedResults.length + '] fetching "' + nextResult.name + '": CONTINUING');
       searchAPI.fetchStyleJson(nextResult.id)
         .then(userstyleJson => {
           // Extract applicable sections (i.e. styles that apply to the current site)
@@ -239,42 +315,20 @@ const SearchResults = (() => {
             processedResults.push(nextResult);
             render();
           }
-          console.log('processNextResult:sleep(' + DELAY_BETWEEN_RESULTS_MS + ')');
+          console.log('[' + unprocessedResults.length + '] Processed "' + nextResult.name + '"',
+                      'processedResults=' + processedResults.length,
+                      'skipped-installed=' + alreadyInstalledResults,
+                      'skipped-irrelevant=' + nonApplicableResults,
+                      'CONTINUING @ sleep=' + DELAY_BETWEEN_RESULTS_MS);
           setTimeout(processNextResult, DELAY_BETWEEN_RESULTS_MS); // Keep processing
         })
         .catch(reason => {
-          console.log('Error while loading style ID ' + nextResult.id + ': ' + reason);
-          alert('Error while loading style ID ' + nextResult.id + ': ' + reason);
-          console.log('processNextResult:sleep(' + DELAY_BETWEEN_RESULTS_MS + ')');
+          console.log('[' + unprocessedResults.length + '] Error while loading style ID ' + nextResult.id + ': ' + reason);
           setTimeout(processNextResult, DELAY_BETWEEN_RESULTS_MS); // Keep processing
         });
     }
-    console.log('processNextResult:alreadyInstalled:' + alreadyInstalledResults,
-      'nonApplicable:' + nonApplicableResults);
   }
 
-  /** Updates prev/next buttons and currentPage/totalPage labels. */
-  function updateSearchResultsNav(currentPage, totalPages) {
-    // Update 'next' button
-    if (currentPage >= totalPages) {
-      currentPage = totalPages;
-      $('#searchResultsNav-next').setAttribute('disabled', 'disabled');
-    } else {
-      $('#searchResultsNav-next').removeAttribute('disabled');
-    }
-
-    // Update 'prev' button
-    if (currentPage <= 1) {
-      currentPage = 1;
-      $('#searchResultsNav-prev').setAttribute('disabled', 'disabled');
-    } else {
-      $('#searchResultsNav-prev').removeAttribute('disabled');
-    }
-
-    // Update current/total counts
-    $('#searchResultsNav-currentPage').textContent = currentPage;
-    $('#searchResultsNav-totalPages').textContent = totalPages;
-  }
   /**
    * Promises a list of installed styles that match the provided search result.
    * @param {Object} userstyleSearchResult Search result object from userstyles.org
@@ -302,7 +356,7 @@ const SearchResults = (() => {
    * Constructs and adds the given search result to the popup's Search Results container.
    * @param {Object} userstyleSearchResult The SearchResult object from userstyles.org
    */
-  function createSearchResult(userstyleSearchResult) {
+  function createSearchResultNode(userstyleSearchResult) {
     /*
       userstyleSearchResult format: {
         id: 100835,
@@ -315,6 +369,7 @@ const SearchResults = (() => {
         }
       }
     */
+    console.log('createSearchResultNode(', userstyleSearchResult, ')');
 
     const entry = template.searchResult.cloneNode(true);
     Object.assign(entry, {
@@ -333,8 +388,13 @@ const SearchResults = (() => {
 
     const screenshot = $('.searchResult-screenshot', entry);
     let screenshotUrl = userstyleSearchResult.screenshot_url;
-    if (RegExp(/^[0-9]*_after.(jpe?g|png|gif)$/i).test(screenshotUrl)) {
+    if (screenshotUrl === null) {
+      screenshotUrl = 'data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mOcXQ8AAbsBHLLDr5MAAAAASUVORK5CYII=';
+    } else if (RegExp(/^[0-9]*_after.(jpe?g|png|gif)$/i).test(screenshotUrl)) {
       screenshotUrl = 'https://userstyles.org/style_screenshot_thumbnails/' + screenshotUrl;
+      screenshot.classList.remove('no-screenshot');
+    } else {
+      screenshot.classList.remove('no-screenshot');
     }
     Object.assign(screenshot, {
       src: screenshotUrl,
@@ -365,7 +425,8 @@ const SearchResults = (() => {
     /** Installs the current userstyleSearchResult into stylus. */
     function install() {
       entry.classList.add('loading');
-      // TODO: Detect if style has customizations, point to style page if so.
+
+      // TODO on Install: Promise.all([fetchJSON, fetchHTML]) -> popup if customization is present, install otheriwse.
       const styleId = userstyleSearchResult.id;
       const url = 'https://userstyles.org/styles/chrome/' + styleId + '.json';
       download(url)
@@ -377,8 +438,8 @@ const SearchResults = (() => {
             });
         })
         .catch(reason => {
-          console.log('Error while installing from ' + url + ': ' + reason);
-          alert('Error while installing from ' + url + ': ' + reason);
+          console.log('install:download(', url, ') => [ERROR]: ', reason);
+          alert('Error while downloading ' + url + '\nReason: ' + reason);
         });
       return true;
     }