From f35271f6de052e8a710d1f59c4d34697a307caec Mon Sep 17 00:00:00 2001
From: derv82 <derv82@gmail.com>
Date: Sat, 18 Nov 2017 04:32:16 -0800
Subject: [PATCH] Some styling on search results. New EOL

---
 popup.html             |  46 +++---
 popup/remoteStyles.css | 103 ++++++++------
 popup/remoteStyles.js  | 316 ++++++++++++++++++++---------------------
 3 files changed, 236 insertions(+), 229 deletions(-)

diff --git a/popup.html b/popup.html
index 4573ab94..756c127c 100644
--- a/popup.html
+++ b/popup.html
@@ -82,27 +82,12 @@
 
   <template data-id="searchResult">
     <div class="searchResult">
-      <img class="searchResult-screenshot"
-          src="https://userstyles.org/style_screenshot_thumbnails/118959_after.png"
-          title="Style screenshot" />
-      <a class="searchResult-title"
-        href="https://userstyles.org/styles/118959/darksearch-for-google"
-        target="_blank"
-        title="DarkSearch for Google">
-        DarkSearch for Google
-      </a>
-      <div class="searchResult-description"
-          title="The best Dark theme for Google.">
-        The best Dark theme for Google.
-      </div>
+      <img class="searchResult-screenshot" />
+      <a class="searchResult-title" target="_blank"></a>
+      <div class="searchResult-description"></div>
       <div class="searchResult-author">
         By:
-        <a class="searchResult-authorLink"
-          href="https://userstyles.org/users/280080"
-          target="_blank"
-          title="Nass O">
-          Nass O
-        </a>
+        <a class="searchResult-authorLink" target="_blank"></a>
       </div>
       <div class="actions">
         <button class="remote-style-install" i18n-text="remoteStyleInstall" i18n-title="remoteStyleInstallTooltip"></button>
@@ -143,22 +128,25 @@
         <label id="disableAll-label" for="disableAll" i18n-text="disableAllStyles"></label>
       </div>
     </div>
+    <div id="remote-styles" class="hidden">
+      <h3>Search Results for <span id="searchResults-terms">-</span></h3>
+      <div id="searchResults"></div>
+      <div id="searchResultsNav">
+        <button id="searchResultsNav-prev" title="Previous page" disabled>&lt;</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>&gt;</button>
+      </div>
+    </div>
     <div class="left-gutter"></div>
     <div class="main-controls">
       <div id="load-remote-styles">
         <a id="load-remote-styles-link" href="#"
            i18n-text="loadStylesForSite"></a>
       </div>
-      <div id="remote-styles">
-        <div id="searchResults"></div>
-        <div id="searchResultsNav">
-          <button id="searchResultsNav-prev">&lt;</button>
-          <span id="searchResultsNav-currentPage">1</span>
-          /
-          <span id="searchResultsNav-totalPages">200</span>
-          <button id="searchResultsNav-next">&gt;</button>
-        </div>
-      </div>
       <div id="find-styles">
         <a id="find-styles-link" href="https://userstyles.org/styles/browse/"
            i18n-text="findStylesForSite"></a>
diff --git a/popup/remoteStyles.css b/popup/remoteStyles.css
index f5f92fe3..c94be8aa 100755
--- a/popup/remoteStyles.css
+++ b/popup/remoteStyles.css
@@ -1,40 +1,63 @@
-#remote-styles {
-  width: 200px;
-  overflow: hidden;
-  background-color: rgba(150,150,150,0.3);
-}
-
-#remote-styles-list {
-  padding-inline-start: 0;
-  margin-block-start: 0;
-  margin-block-end: 0;
-  padding: 5px;
-}
-.remote-style img {
-  display: block;
-  width: 180px;
-  height: 99px;
-}
-
-li.remote-style {
-  list-style: none;
-  padding: 5px;
-}
-li.remote-style:hover {
-  background-color: rgba(50, 150, 255, 0.5);
-}
-
-li.remote-style > .title {
-  font-weight: bold;
-}
-
-li.remote-style > .description {
-  overflow: hidden;
-  font-style: italic;
-}
-
-li.remote-style > * {
-  width: 180px;
-  overflow-x: ellipsis;
-  white-space: nowrap;
-}
+#disable-all-wrapper {
+  border-bottom: solid 1px #000;
+  margin-bottom: 5px;
+}
+
+#remote-styles.hidden,
+#load-remote-styles.hidden {
+  display: none;
+}
+
+#remote-styles, #searchResults {
+  max-width: 200px;
+  overflow: hidden;
+}
+
+.searchResult {
+  padding: 5px;
+}
+.searchResult:hover {
+  background-color: rgba(50, 150, 255, 0.5);
+}
+
+.searchResult img {
+  width: 50px;
+  height: 40px;
+}
+
+.searchResult-title {
+  font-weight: bold;
+}
+
+.searchResult-description {
+  overflow: hidden;
+  font-style: italic;
+}
+
+.searchResult > * {
+  max-width: 108px;
+  overflow-x: ellipsis;
+  white-space: nowrap;
+}
+
+#searchResultsNav {
+  display: flex;
+  flex-direction: row;
+  text-align: center;
+}
+
+#searchResultsNav label {
+  width: 20px;
+  display: inline-block;
+}
+
+#searchResultsNav button {
+  text-align: center;
+  width: 10px;
+}
+
+#searchResultsNav-prev[disabled],
+#searchResultsNav-next[disabled] {
+  cursor: not-allowed;
+  background-image: linear-gradient(rgba(90, 90, 90, 0.5), rgba(90, 90, 90, 0.5));
+}
diff --git a/popup/remoteStyles.js b/popup/remoteStyles.js
index 32271696..cc9b4eb3 100755
--- a/popup/remoteStyles.js
+++ b/popup/remoteStyles.js
@@ -1,160 +1,156 @@
-'use strict';
-
-let currentPage = 1;
-
-/**
- * Fetches and parses search results (in JSON) from userstyles.org
- * @return {Object} Search results from userstyles.org
- * @param {string} queryParams Query parameters to send in search request.
- */
-function fetchSearchResults(queryParams) {
-  return new Promise(function(resolve, reject) {
-    const TIMEOUT = 10000;
-    const headers = {
-      'Content-type': 'application/json',
-      'Accept': '*/*'
-    };
-    const url = 'https://userstyles.org/api/v1/styles/search?' + queryParams;
-    console.log("fetchSearchResults url:", url);
-    const xhr = new XMLHttpRequest();
-    xhr.timeout = TIMEOUT;
-    xhr.onload = () => (xhr.status === 200 || url.protocol === 'file:'
-      ? resolve(JSON.parse(xhr.responseText))
-      : reject(xhr.status));
-    xhr.onerror = reject;
-    xhr.open('GET', url, true);
-    for (const key of Object.keys(headers)) {
-      xhr.setRequestHeader(key, headers[key]);
-    }
-    xhr.send();
-  });
-}
-
-function createSearchResultElement(searchResult) {
-  /*
-    searchResult format:
-    {
-      id: 100835,
-      name: "Reddit Flat Dark",
-      screenshot_url: "19339_after.png",
-      description: "...",
-      user: {
-        id: 48470,
-        name: "holloh"
-      }
-    }
-  */
-  console.log("createSearchResultElement searchResult:", searchResult);
-
-  const entry = template.searchResult.cloneNode(true);
-  Object.assign(entry, {
-    id: ENTRY_ID_PREFIX_RAW + searchResult.id,
-    styleId: searchResult.id
-  });
-  console.log("createSearchResultElement entry:", entry);
-
-  const title = $('.searchResult-title', entry);
-  Object.assign(title, {
-    textContent: searchResult.name,
-    title: searchResult.name,
-    href: searchResult.url
-  });
-
-  const screenshot = $('.searchResult-screenshot', entry);
-  let ss_url = searchResult.screenshot_url;
-  if (RegExp(/^[0-9]*_after.png$/i).test(ss_url)) {
-    ss_url = 'https://userstyles.org/style_screenshot_thumbnails/' + ss_url;
-  }
-  Object.assign(screenshot, {
-    src: ss_url,
-    title: 'Screenshot of ' + searchResult.name
-  });
-
-  const description = $('.searchResult-description', entry);
-  Object.assign(description, {
-    innerHTML: searchResult.description,
-    title: searchResult.description,
-  });
-
-  const authorLink = $('.searchResult-authorLink', entry);
-  Object.assign(authorLink, {
-    textContent: searchResult.user.name,
-    title: searchResult.user.name,
-    href: 'https://userstyles.org/users/' + searchResult.user.id
-  });
-
-  $('#searchResults').appendChild(entry);
-}
-
-function updateSearchResultsNav(currentPage, totalPages) {
-    // Update 'next' button
-    if (currentPage >= searchResults.total_pages) {
-      currentPage = searchResults.total_pages;
-      $('#searchResultsNav-next').classList.add("disabled");
-    } else {
-      $('#searchResultsNav-next').classList.remove("disabled");
-    }
-
-    // Update 'prev' button
-    if (currentPage <= 1) {
-      currentPage = 1;
-      $('#searchResultsNav-prev').classList.add("disabled");
-    } else {
-      $('#searchResultsNav-prev').classList.remove("disabled");
-    }
-    $('#searchResultsNav-currentPage').textContent = currentPage;
-    $('#searchResultsNav-totalPages').textContent = searchResults.total_pages;
-}
-
-function insertRemoteStyles(searchResults) {
-  /*
-    searchResults: {
-      data: [...],
-      current_page: 1,
-      per_page: 15;
-      total_pages: 6,
-      total_entries: 85
-    }
-  */
-  console.log("insertRemoteStyles(searchResults):", searchResults);
-  currentPage = searchResults.current_page;
-  updateSearchResultsNav(searchResults.current_page, searchResults.total_pages);
-  searchResults.data.forEach((searchResult) => {
-    console.log("searchResult:", searchResult);
-    createSearchResultElement(searchResult);
-  });
-}
-
-function loadRemoteStyles(event) {
-  event.preventDefault();
-  getActiveTab().then(tab => {
-    console.log("tab.url:", tab.url);
-
-    const url = new URL(tab.url);
-    console.log("url:", url);
-
-    const hostname = url.hostname;
-    console.log("hostname:", hostname);
-
-    const queryParams = [
-      "search=" + encodeURIComponent(hostname),
-      "page=" + currentPage,
-      "per_page=3"
-    ].join("&");
-
-    fetchSearchResults(queryParams)
-      .then(insertRemoteStyles)
-      .catch(reason => {
-        throw reason;
-      });
-  });
-  return false;
-}
-
-function initRemoteStyles() {
-  $('#load-remote-styles-link').onclick = loadRemoteStyles;
-}
-
-onDOMready().then(() => {
-  initRemoteStyles();
-});
+'use strict';
+
+let currentPage = 1;
+let hostname;
+
+/**
+ * Fetches and parses search results (in JSON) from userstyles.org
+ * @return {Object} Search results from userstyles.org
+ * @param {string} queryParams Query parameters to send in search request.
+ */
+function fetchSearchResults(queryParams) {
+  return new Promise(function(resolve, reject) {
+    const TIMEOUT = 10000;
+    const headers = {
+      'Content-type': 'application/json',
+      'Accept': '*/*'
+    };
+    const url = 'https://userstyles.org/api/v1/styles/search?' + queryParams;
+    console.log('fetchSearchResults url:', url);
+    const xhr = new XMLHttpRequest();
+    xhr.timeout = TIMEOUT;
+    xhr.onload = () => (xhr.status === 200 || url.protocol === 'file:'
+      ? resolve(JSON.parse(xhr.responseText))
+      : reject(xhr.status));
+    xhr.onerror = reject;
+    xhr.open('GET', url, true);
+    for (const key of Object.keys(headers)) {
+      xhr.setRequestHeader(key, headers[key]);
+    }
+    xhr.send();
+  });
+}
+
+function createSearchResultElement(searchResult) {
+  /*
+    searchResult format:
+    {
+      id: 100835,
+      name: "Reddit Flat Dark",
+      screenshot_url: "19339_after.png",
+      description: "...",
+      user: {
+        id: 48470,
+        name: "holloh"
+      }
+    }
+  */
+  console.log('createSearchResultElement searchResult:', searchResult);
+
+  const entry = template.searchResult.cloneNode(true);
+  Object.assign(entry, {
+    id: ENTRY_ID_PREFIX_RAW + searchResult.id,
+    styleId: searchResult.id
+  });
+  console.log('createSearchResultElement entry:', entry);
+
+  const title = $('.searchResult-title', entry);
+  Object.assign(title, {
+    textContent: searchResult.name,
+    title: searchResult.name,
+    href: 'https://userstyles.org' + searchResult.url,
+    onclick: handleEvent.openURLandHide
+  });
+
+  const screenshot = $('.searchResult-screenshot', entry);
+  let ss_url = searchResult.screenshot_url;
+  if (RegExp(/^[0-9]*_after.(jpe?g|png|gif)$/i).test(ss_url)) {
+    ss_url = 'https://userstyles.org/style_screenshot_thumbnails/' + ss_url;
+  }
+  Object.assign(screenshot, {
+    src: ss_url,
+    title: 'Screenshot of ' + searchResult.name
+  });
+
+  // TODO: Expand/collapse description
+  const description = $('.searchResult-description', entry);
+  Object.assign(description, {
+    textContent: searchResult.description.replace(/<.*?>/g, ""),
+    title: searchResult.description.replace(/<.*?>/g, ""),
+  });
+
+  const authorLink = $('.searchResult-authorLink', entry);
+  Object.assign(authorLink, {
+    textContent: searchResult.user.name,
+    title: searchResult.user.name,
+    href: 'https://userstyles.org/users/' + searchResult.user.id,
+    onclick: handleEvent.openURLandHide
+  });
+
+  $('#searchResults').appendChild(entry);
+}
+
+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');
+    }
+    $('#searchResultsNav-currentPage').textContent = currentPage;
+    $('#searchResultsNav-totalPages').textContent = totalPages;
+}
+
+function insertRemoteStyles(searchResults) {
+  /*
+    searchResults: {
+      data: [...],
+      current_page: 1,
+      per_page: 15;
+      total_pages: 6,
+      total_entries: 85
+    }
+  */
+  currentPage = searchResults.current_page;
+  updateSearchResultsNav(searchResults.current_page, searchResults.total_pages);
+  searchResults.data.forEach(createSearchResultElement);
+}
+
+function loadRemoteStyles(event) {
+  event.preventDefault();
+  getActiveTab().then(tab => {
+    hostname = new URL(tab.url).hostname;
+    const queryParams = [
+      'search=' + encodeURIComponent(hostname),
+      'page=' + currentPage,
+      'per_page=3'
+    ].join('&');
+
+    $('#searchresults-terms').textContent = hostname;
+    $('#remote-styles').classList.remove("hidden");
+    $('#load-remote-styles').classList.add("hidden");
+    fetchSearchResults(queryParams)
+      .then(insertRemoteStyles)
+      .catch(reason => {
+        throw reason;
+      });
+  });
+  return false;
+}
+
+function initRemoteStyles() {
+  $('#load-remote-styles-link').onclick = loadRemoteStyles;
+}
+
+onDOMready().then(() => {
+  initRemoteStyles();
+});