From 8d75042f02d9ba216dfa20fa254d5e8801fc9690 Mon Sep 17 00:00:00 2001
From: derv82 <derv82@gmail.com>
Date: Sun, 3 Dec 2017 15:34:44 -0800
Subject: [PATCH] Address part of PR feedback.

Main diff: Wrapped onDOMready() & SearchResults() function in IIFE closure.

* [X] const SearchResults = ... // should be inside a closure (IIFE @ Top)
* [X] SearchUserstyles should be firstLetterLowercase
* [X] Don't fetch category on load; use regexp to derive category. (left 'HEAD' code commented-out).
* [X] Don't use XMLHttpRequest() anymore (used in 3 places?): Use download() which accepts custom request params.
* [X] Remove unused getters ('getCurrentPage' & others?)
* [X] const BASE_USO_URL = 'https://userstyles.org'; @ top of searchResults closure. Refer elsewhere.
* [X] const searchUrl = new URL... should be a single multiline statement (new URL('...' +\ '...'
* [X] .innerHTML = ... // use .textContent = ... instead
* [X] Don't use `setAttribute` on 'disabled':   $('..-prev').disabled = currentDisplayedPage <= 1 || loading
* [X] Don't use .indexOf() on strings, use .includes()
* [X] Move onDOMReady() code to top of file.
---
 popup.html              |   4 +-
 popup/search-results.js | 901 +++++++++++++++++++---------------------
 2 files changed, 438 insertions(+), 467 deletions(-)

diff --git a/popup.html b/popup.html
index 92c024ec..0464a0e8 100644
--- a/popup.html
+++ b/popup.html
@@ -85,7 +85,7 @@
 
   <template data-id="searchResult">
     <div class="searchResult">
-      <img class="searchResult-screenshot no-screenshot" />
+      <img class="searchResult-screenshot" />
       <a class="searchResult-title" target="_blank"></a>
       <div class="searchResult-description"></div>
       <div class="searchResult-author">
@@ -151,6 +151,7 @@
         <span i18n-text="searchResultsHeader"></span>
         <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>
@@ -160,7 +161,6 @@
         </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.js b/popup/search-results.js
index 87d924f6..98e0fa03 100755
--- a/popup/search-results.js
+++ b/popup/search-results.js
@@ -1,30 +1,404 @@
 /* global handleEvent tryJSONparse getStylesSafe BG */
 'use strict';
 
+(() => {
+  onDOMready().then(() => {
+    const searchResults = searchResultsController();
+    $('#find-styles-link').onclick = searchResults.load;
+    $('#searchResultsNav-prev').onclick = searchResults.prev;
+    $('#searchResultsNav-next').onclick = searchResults.next;
+  });
+
+  /**
+   * Represents the search results within the Stylus popup.
+   * @returns {Object} Includes load(), next(), and prev() methods to alter the search results.
+   */
+  function searchResultsController() {
+    const DISPLAYED_RESULTS_PER_PAGE = 3; // Number of results to display in popup.html
+    const DELAY_AFTER_FETCHING_STYLES = 0; // Millisecs to wait before fetching next batch of search results.
+    const DELAY_BEFORE_SEARCHING_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).
+    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
+
+    return {load, next, prev};
+
+    function render() {
+      $('#searchResults-list').textContent = ''; // Clear search results
+
+      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 (currentDisplayedPage <= 1 || loading) {
+        $('#searchResultsNav-prev').disabled = true;
+      } else {
+        $('#searchResultsNav-prev').disabled = false;
+      }
+      $('#searchResultsNav-currentPage').textContent = currentDisplayedPage;
+
+      let totalResultsCount = processedResults.length;
+      if (unprocessedResults.length > 0) {
+        // Add 1 page if there's results left to process.
+        totalResultsCount += DISPLAYED_RESULTS_PER_PAGE;
+      }
+      const totalPageCount = Math.ceil(Math.max(1, totalResultsCount / DISPLAYED_RESULTS_PER_PAGE));
+      if (currentDisplayedPage >= totalPageCount || loading) {
+        $('#searchResultsNav-next').disabled = true;
+      } else {
+        $('#searchResultsNav-next').disabled = false;
+      }
+      $('#searchResultsNav-totalPages').textContent = totalPageCount;
+
+      const navNode = $('#searchResultsNav');
+      if (loading && !navNode.classList.contains('loading')) {
+        navNode.classList.add('loading');
+      } else {
+        navNode.classList.remove('loading');
+      }
+    }
+
+    /**
+     * @returns {Boolean} If we should process more results.
+     */
+    function shouldLoadMore() {
+      return (processedResults.length < currentDisplayedPage * DISPLAYED_RESULTS_PER_PAGE);
+    }
+
+    function loadMoreIfNeeded() {
+      if (shouldLoadMore()) {
+        loading = true;
+        render();
+        setTimeout(load, DELAY_BEFORE_SEARCHING_STYLES);
+      } else {
+        loading = false;
+        render();
+      }
+    }
+
+    /** Increments currentDisplayedPage and loads results. */
+    function next(event) {
+      if (event) {
+        event.preventDefault();
+      }
+      currentDisplayedPage += 1;
+      render();
+      loadMoreIfNeeded();
+    }
+
+    /** Decrements currentPage and loads results. */
+    function prev(event) {
+      if (event) {
+        event.preventDefault();
+      }
+      currentDisplayedPage = Math.max(1, currentDisplayedPage - 1);
+      render();
+    }
+
+    /**
+     * Display error message to user.
+     * @param {string} message  Message to display to user.
+     */
+    function error(reason) {
+      let message;
+      if (reason === 404) {
+        // TODO: i18n message
+        message = 'No results found';
+      } else {
+        message = 'Error loading search results: ' + reason;
+      }
+      $('#searchResults').classList.add('hidden');
+      $('#searchResults-error').textContent = message;
+      $('#searchResults-error').classList.remove('hidden');
+    }
+
+    /**
+     * Initializes search results container, starts fetching results.
+     * @param {Object} event The click event
+     */
+    function load(event) {
+      if (event) {
+        event.preventDefault();
+      }
+
+      loading = true;
+      render();
+
+      if (unprocessedResults.length > 0) {
+        processNextResult();
+        return true;
+      }
+
+      if (searchAPI.isExhausted()) {
+        loading = false;
+        render();
+        return true;
+      }
+
+      $('#find-styles').classList.add('hidden');
+      $('#open-search').classList.remove('hidden');
+      $('#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);
+      });
+      // Find styles for the current active tab
+      return true;
+    }
+
+    /**
+     * Processes the next search result in `unprocessedResults` and adds to `processedResults`.
+     * Skips installed/non-applicable styles.
+     * Fetches more search results if unprocessedResults is empty.
+     * Recurses until shouldLoadMore() is false.
+     */
+    function processNextResult() {
+      if (!shouldLoadMore()) {
+        loading = false;
+        render();
+        return;
+      }
+
+      if (unprocessedResults.length === 0) {
+        loadMoreIfNeeded();
+        return;
+      }
+
+      // Process the next result in the queue.
+      const nextResult = unprocessedResults.shift();
+      isStyleInstalled(nextResult)
+        .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)
+            ]).then(([userstyleJson, userstyleObject]) => {
+              // Extract applicable sections (i.e. styles that apply to the current site)
+              const applicableSections = BG.getApplicableSections({
+                style: userstyleJson,
+                matchUrl: tabURL,
+                stopOnFirst: true
+              });
+              if (applicableSections.length > 0) {
+                // Style is valid (can apply to this site).
+                nextResult.json = userstyleJson; // Store Style JSON for easy installing later.
+
+                // 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
+            });
+          }
+        });
+    }
+
+    /**
+     * 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);
+      });
+    }
+
+    /**
+     * Constructs and adds the given search result to the popup's Search Results container.
+     * @param {Object} userstyleSearchResult The SearchResult object from userstyles.org
+     */
+    function createSearchResultNode(userstyleSearchResult) {
+      /*
+        userstyleSearchResult format: {
+          id: 100835,
+          name: "Reddit Flat Dark",
+          screenshot_url: "19339_after.png",
+          description: "...",
+          user: {
+            id: 48470,
+            name: "holloh"
+          },
+          style_settings: [...]
+        }
+      */
+      if (userstyleSearchResult.installed) {
+        return;
+      }
+
+      const entry = template.searchResult.cloneNode(true);
+      Object.assign(entry, {
+        id: 'searchResult-' + userstyleSearchResult.id
+      });
+      $('#searchResults-list').appendChild(entry);
+
+      const searchResultName = userstyleSearchResult.name;
+      const title = $('.searchResult-title', entry);
+      Object.assign(title, {
+        textContent: searchResultName,
+        title: searchResultName,
+        href: searchAPI.BASE_URL + userstyleSearchResult.url,
+        onclick: handleEvent.openURLandHide
+      });
+
+      const screenshot = $('.searchResult-screenshot', entry);
+      let screenshotUrl = userstyleSearchResult.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,
+        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 authorLink = $('.searchResult-authorLink', entry);
+      Object.assign(authorLink, {
+        textContent: userstyleSearchResult.user.name,
+        title: userstyleSearchResult.user.name,
+        href: searchAPI.BASE_URL + '/users/' + userstyleSearchResult.user.id,
+        onclick: handleEvent.openURLandHide
+      });
+
+      const rating = $('.searchResult-rating', entry);
+      let ratingClass;
+      let ratingValue = userstyleSearchResult.rating;
+      if (ratingValue === null) {
+        ratingClass = 'none';
+        ratingValue = 'n/a';
+      } else if (ratingValue >= 2.5) {
+        ratingClass = 'good';
+        ratingValue = ratingValue.toFixed(1);
+      } else if (ratingValue >= 1.5) {
+        ratingClass = 'okay';
+        ratingValue = ratingValue.toFixed(1);
+      } else {
+        ratingClass = 'bad';
+        ratingValue = ratingValue.toFixed(1);
+      }
+      Object.assign(rating, {
+        textContent: ratingValue,
+        className: 'searchResult-rating ' + ratingClass
+      });
+
+      const installCount = $('.searchResult-installCount', entry);
+      Object.assign(installCount, {
+        textContent: userstyleSearchResult.total_install_count.toLocaleString()
+      });
+
+      const installButton = $('.searchResult-install', entry);
+      installButton.onclick = install;
+
+      if (userstyleSearchResult.style_settings.length > 0) {
+        // Style has customizations
+        installButton.classList.add('customize');
+        const customizeButton = $('.searchResult-customize', entry);
+        customizeButton.classList.remove('hidden');
+        customizeButton.href = searchAPI.BASE_URL + userstyleSearchResult.url;
+        customizeButton.onclick = handleEvent.openURLandHide;
+      }
+
+      /** 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';
+        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);
+            }
+            processNextResult();
+          })
+          .catch(reason => {
+            console.log('install:saveStyleSafe(', url, ') => [ERROR]: ', reason);
+            alert('Error while downloading ' + url + '\nReason: ' + reason);
+          });
+        return true;
+      }
+    }
+  }
+})();
+
 /**
  * Library for interacting with userstyles.org
  * @returns {Object} Exposed methods representing the search results on userstyles.org
  */
-function SearchUserstyles() {
+function searchUserstyles() {
+  const BASE_URL = 'https://userstyles.org';
   let totalPages;
   let currentPage = 1;
   let exhausted = false;
 
-  return {getCurrentPage, getTotalPages, getCategory, isExhausted, search, fetchStyleJson, fetchStyle};
-
-  /**
-   * @returns {Number} The *Next* page to fetch for styles. Auto-incremented after each search.
-   */
-  function getCurrentPage() {
-    return currentPage;
-  }
-
-  /**
-   * @returns {Number} The total number of search result pages.
-   */
-  function getTotalPages() {
-    return totalPages;
-  }
+  return {BASE_URL, getCategory, isExhausted, search, fetchStyleJson, fetchStyle};
 
   /**
    * @returns {Boolean} If there are no more results to fetch from userstyles.org
@@ -39,17 +413,24 @@ function SearchUserstyles() {
    * @returns {Promise<String>} The category for a URL, or the hostname if category is not found.
    */
   function getCategory(url) {
-    const hostname = new URL(url).hostname;
+    let hostname = new URL(url).hostname;
+    // Strip "TLD" (including .com.TLD, .co.TLD, etc)
+    hostname = hostname.replace(/(\.com|\.co|\.org|\.net|\.gov)?\.[a-z0-9]+$/, '');
+    // Strip "subdomains"
+    hostname = hostname.split(/\./g).pop();
+    return hostname;
+    /*
+    // Resolve "category" using userstyles.org's /styles/browse/all/ endpoint:
     return new Promise(resolve => {
       const request = new XMLHttpRequest();
-      const browseURL = 'https://userstyles.org/styles/browse/all/' + encodeURIComponent(url);
+      const browseURL = BASE_URL + '/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);
+          const searchCategory = responseURL.searchParams.get('category');
+          if (searchCategory !== null) {
+            resolve(searchCategory);
           } else {
             resolve(hostname);
           }
@@ -57,6 +438,7 @@ function SearchUserstyles() {
       };
       request.send(null);
     });
+    */
   }
 
   /**
@@ -67,7 +449,7 @@ function SearchUserstyles() {
    */
   function fetchStyleJson(userstylesId) {
     return new Promise((resolve, reject) => {
-      const jsonUrl = 'https://userstyles.org/styles/chrome/' + userstylesId + '.json';
+      const jsonUrl = BASE_URL + '/styles/chrome/' + userstylesId + '.json';
       download(jsonUrl)
         .then(responseText => {
           resolve(tryJSONparse(responseText));
@@ -83,29 +465,16 @@ function SearchUserstyles() {
    */
   function fetchStyle(userstylesId) {
     return new Promise((resolve, reject) => {
-      const TIMEOUT = 10000;
-      const headers = {
-        'Content-type': 'application/json',
-        'Accept': '*/*'
-      };
-
-      const styleUrl = new URL('https://userstyles.org/api/v1/styles/' + userstylesId);
-      const xhr = new XMLHttpRequest();
-      xhr.timeout = TIMEOUT;
-      xhr.onload = () => {
-        if (xhr.status === 200) {
-          resolve(tryJSONparse(xhr.responseText));
-        } else {
-          console.log('fetch(' + userstylesId + ') [ERROR] ', xhr);
-          reject(xhr.status);
-        }
-      };
-      xhr.onerror = reject;
-      xhr.open('GET', styleUrl, true);
-      for (const key of Object.keys(headers)) {
-        xhr.setRequestHeader(key, headers[key]);
-      }
-      xhr.send();
+      download(BASE_URL + '/api/v1/styles/' + userstylesId, {
+        method: 'GET',
+        headers: {
+          'Content-type': 'application/json',
+          'Accept': '*/*'
+        },
+        body: null
+      }).then(responseText => {
+        resolve(tryJSONparse(responseText));
+      }).catch(reject);
     });
   }
 
@@ -121,427 +490,29 @@ function SearchUserstyles() {
         resolve({'data':[]});
       }
 
-      const TIMEOUT = 10000;
-      const headers = {
-        'Content-type': 'application/json',
-        'Accept': '*/*'
-      };
+      const searchURL = BASE_URL +
+        '/api/v1/styles/subcategory' +
+        '?search=' + encodeURIComponent(category) +
+        '&page=' + currentPage +
+        '&country=NA';
 
-      const searchUrl = new URL('https://userstyles.org/api/v1/styles/subcategory');
-      let queryParams = 'search=' + encodeURIComponent(category);
-      queryParams += '&page=' + currentPage;
-      queryParams += '&country=NA';
-      searchUrl.search = '?' + queryParams;
-      const xhr = new XMLHttpRequest();
-      xhr.timeout = TIMEOUT;
-      xhr.onload = () => {
-        if (xhr.status === 200) {
-          const responseJson = tryJSONparse(xhr.responseText);
-          currentPage = responseJson.current_page + 1;
-          totalPages = responseJson.total_pages;
-          exhausted = (currentPage > totalPages);
-          resolve(responseJson);
-        } else {
-          exhausted = true;
-          reject(xhr.status);
-        }
-      };
-      xhr.onerror = reject;
-      xhr.open('GET', searchUrl, true);
-      for (const key of Object.keys(headers)) {
-        xhr.setRequestHeader(key, headers[key]);
-      }
-      xhr.send();
+      download(searchURL, {
+        method: 'GET',
+        headers: {
+          'Content-type': 'application/json',
+          'Accept': '*/*'
+        },
+        body: null
+      }).then(responseText => {
+        const responseJson = tryJSONparse(responseText);
+        currentPage = responseJson.current_page + 1;
+        totalPages = responseJson.total_pages;
+        exhausted = (currentPage > totalPages);
+        resolve(responseJson);
+      }).catch(reason => {
+        exhausted = true;
+        reject(reason);
+      });
     });
   }
 }
-
-/**
- * Represents the search results within the Stylus popup.
- * @returns {Object} Includes load(), next(), and prev() methods to alter the search results.
- */
-const SearchResults = (() => {
-  const DISPLAYED_RESULTS_PER_PAGE = 3; // Number of results to display in popup.html
-  const DELAY_AFTER_FETCHING_STYLES = 0; // Millisecs to wait before fetching next batch of search results.
-  const DELAY_BEFORE_SEARCHING_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).
-  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
-
-  // Discovery current tab's URL & USO "category" for the URL.
-  getActiveTab().then(tab => {
-    tabURL = tab.url;
-    searchAPI.getCategory(tabURL)
-      .then(resolvedCategory => {
-        category = resolvedCategory;
-        $('#searchResults-terms').textContent = category;
-      });
-  });
-
-  return {load, next, prev};
-
-  function render() {
-    $('#searchResults-list').innerHTML = ''; // Clear search results
-
-    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 (currentDisplayedPage <= 1 || loading) {
-      $('#searchResultsNav-prev').setAttribute('disabled', 'disabled');
-    } else {
-      $('#searchResultsNav-prev').removeAttribute('disabled');
-    }
-    $('#searchResultsNav-currentPage').textContent = currentDisplayedPage;
-
-    let totalResultsCount = processedResults.length;
-    if (unprocessedResults.length > 0) {
-      // Add 1 page if there's results left to process.
-      totalResultsCount += DISPLAYED_RESULTS_PER_PAGE;
-    }
-    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');
-    }
-  }
-
-  /**
-   * @returns {Boolean} If we should process more results.
-   */
-  function shouldLoadMore() {
-    return (processedResults.length < currentDisplayedPage * DISPLAYED_RESULTS_PER_PAGE);
-  }
-
-  function loadMoreIfNeeded() {
-    if (shouldLoadMore()) {
-      loading = true;
-      render();
-      setTimeout(load, DELAY_BEFORE_SEARCHING_STYLES);
-    } else {
-      loading = false;
-      render();
-    }
-  }
-
-  /** Increments currentDisplayedPage and loads results. */
-  function next(event) {
-    if (event) {
-      event.preventDefault();
-    }
-    currentDisplayedPage += 1;
-    render();
-    loadMoreIfNeeded();
-  }
-
-  /** Decrements currentPage and loads results. */
-  function prev(event) {
-    if (event) {
-      event.preventDefault();
-    }
-    currentDisplayedPage = Math.max(1, currentDisplayedPage - 1);
-    render();
-  }
-
-  /**
-   * Display error message to user.
-   * @param {string} message  Message to display to user.
-   */
-  function error(reason) {
-    let message;
-    if (reason === 404) {
-      // TODO: i18n message
-      message = 'No results found';
-    } else {
-      message = 'Error loading search results: ' + reason;
-    }
-    $('#searchResults').classList.add('hidden');
-    $('#searchResults-error').innerHTML = message;
-    $('#searchResults-error').classList.remove('hidden');
-  }
-
-  /**
-   * Initializes search results container, starts fetching results.
-   * @param {Object} event The click event
-   */
-  function load(event) {
-    if (event) {
-      event.preventDefault();
-    }
-
-    loading = true;
-    render();
-
-    if (unprocessedResults.length > 0) {
-      processNextResult();
-      return true;
-    }
-
-    if (searchAPI.isExhausted()) {
-      loading = false;
-      render();
-      return true;
-    }
-
-    $('#find-styles').classList.add('hidden');
-    $('#open-search').classList.remove('hidden');
-    $('#searchResults').classList.remove('hidden');
-    $('#searchResults-error').classList.add('hidden');
-
-    // Find styles for the current active tab
-    searchAPI.search(category)
-      .then(searchResults => {
-        if (searchResults.data.length === 0) {
-          throw 404;
-        }
-        unprocessedResults.push.apply(unprocessedResults, searchResults.data);
-        processNextResult();
-      })
-      .catch(error);
-    return true;
-  }
-
-  /**
-   * Processes the next search result in `unprocessedResults` and adds to `processedResults`.
-   * Skips installed/non-applicable styles.
-   * Fetches more search results if unprocessedResults is empty.
-   * Recurses until shouldLoadMore() is false.
-   */
-  function processNextResult() {
-    if (!shouldLoadMore()) {
-      loading = false;
-      render();
-      return;
-    }
-
-    if (unprocessedResults.length === 0) {
-      loadMoreIfNeeded();
-      return;
-    }
-
-    // Process the next result in the queue.
-    const nextResult = unprocessedResults.shift();
-    isStyleInstalled(nextResult)
-      .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)
-          ]).then(([userstyleJson, userstyleObject]) => {
-            // Extract applicable sections (i.e. styles that apply to the current site)
-            const applicableSections = BG.getApplicableSections({
-              style: userstyleJson,
-              matchUrl: tabURL,
-              stopOnFirst: true
-            });
-            if (applicableSections.length > 0) {
-              // Style is valid (can apply to this site).
-              nextResult.json = userstyleJson; // Store Style JSON for easy installing later.
-
-              // 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
-          });
-        }
-      });
-  }
-
-  /**
-   * 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.indexOf('/' + userstyleSearchResult.id + '.json') >= 0;
-            }
-            return isMatch;
-          });
-          resolve(matchingStyles.length > 0);
-        })
-        .catch(reject);
-    });
-  }
-
-  /**
-   * Constructs and adds the given search result to the popup's Search Results container.
-   * @param {Object} userstyleSearchResult The SearchResult object from userstyles.org
-   */
-  function createSearchResultNode(userstyleSearchResult) {
-    /*
-      userstyleSearchResult format: {
-        id: 100835,
-        name: "Reddit Flat Dark",
-        screenshot_url: "19339_after.png",
-        description: "...",
-        user: {
-          id: 48470,
-          name: "holloh"
-        },
-        style_settings: [...]
-      }
-    */
-    if (userstyleSearchResult.installed) {
-      return;
-    }
-
-    const entry = template.searchResult.cloneNode(true);
-    Object.assign(entry, {
-      id: 'searchResult-' + userstyleSearchResult.id
-    });
-    $('#searchResults-list').appendChild(entry);
-
-    const searchResultName = userstyleSearchResult.name;
-    const title = $('.searchResult-title', entry);
-    Object.assign(title, {
-      textContent: searchResultName + ' (by ' + userstyleSearchResult.user.name + ')',
-      title: searchResultName + ' by: ' + userstyleSearchResult.user.name,
-      href: 'https://userstyles.org' + userstyleSearchResult.url,
-      onclick: handleEvent.openURLandHide
-    });
-
-    const screenshot = $('.searchResult-screenshot', entry);
-    let screenshotUrl = userstyleSearchResult.screenshot_url;
-    if (screenshotUrl === null) {
-      screenshotUrl = BLANK_PIXEL_DATA;
-    } 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,
-      title: '"' + searchResultName + '" by ' + userstyleSearchResult.user.name
-    });
-
-    // TODO: Expand/collapse description
-    const description = $('.searchResult-description', entry);
-    Object.assign(description, {
-      textContent: userstyleSearchResult.description.replace(/<.*?>/g, ''),
-      title: userstyleSearchResult.description.replace(/<.*?>/g, '')
-    });
-
-    const authorLink = $('.searchResult-authorLink', entry);
-    Object.assign(authorLink, {
-      textContent: userstyleSearchResult.user.name,
-      title: userstyleSearchResult.user.name,
-      href: 'https://userstyles.org/users/' + userstyleSearchResult.user.id,
-      onclick: handleEvent.openURLandHide
-    });
-
-    const rating = $('.searchResult-rating', entry);
-    let ratingClass;
-    let ratingValue = userstyleSearchResult.rating;
-    if (ratingValue === null) {
-      ratingClass = 'none';
-      ratingValue = 'n/a';
-    } else if (ratingValue >= 2.5) {
-      ratingClass = 'good';
-      ratingValue = ratingValue.toFixed(1);
-    } else if (ratingValue >= 1.5) {
-      ratingClass = 'okay';
-      ratingValue = ratingValue.toFixed(1);
-    } else {
-      ratingClass = 'bad';
-      ratingValue = ratingValue.toFixed(1);
-    }
-    Object.assign(rating, {
-      textContent: ratingValue,
-      className: 'searchResult-rating ' + ratingClass
-    });
-
-    const installCount = $('.searchResult-installCount', entry);
-    Object.assign(installCount, {
-      textContent: userstyleSearchResult.total_install_count.toLocaleString()
-    });
-
-    const installButton = $('.searchResult-install', entry);
-    installButton.onclick = install;
-
-    if (userstyleSearchResult.style_settings.length > 0) {
-      // Style has customizations
-      installButton.classList.add('customize');
-      const customizeButton = $('.searchResult-customize', entry);
-      customizeButton.classList.remove('hidden');
-      customizeButton.href = 'https://userstyles.org' + userstyleSearchResult.url;
-      customizeButton.onclick = handleEvent.openURLandHide;
-    }
-
-    /** Installs the current userstyleSearchResult into stylus. */
-    function install() {
-      entry.classList.add('loading');
-
-      const styleId = userstyleSearchResult.id;
-      const url = 'https://userstyles.org/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);
-          }
-          processNextResult();
-        })
-        .catch(reason => {
-          console.log('install:saveStyleSafe(', url, ') => [ERROR]: ', reason);
-          alert('Error while downloading ' + url + '\nReason: ' + reason);
-        });
-      return true;
-    }
-  }
-})();
-
-onDOMready().then(() => {
-  $('#find-styles-link').onclick = SearchResults.load;
-  $('#searchResultsNav-prev').onclick = SearchResults.prev;
-  $('#searchResultsNav-next').onclick = SearchResults.next;
-});