Some styling on search results. New EOL

popup.html

@@ -82,27 +82,12 @@
 
   <template data-id="searchResult">
     <div class="searchResult">
-      <img class="searchResult-screenshot"
+      <img class="searchResult-screenshot" />
-          src="https://userstyles.org/style_screenshot_thumbnails/118959_after.png"
+      <a class="searchResult-title" target="_blank"></a>
-          title="Style screenshot" />
+      <div class="searchResult-description"></div>
-      <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>
       <div class="searchResult-author">
         By:
-        <a class="searchResult-authorLink"
+        <a class="searchResult-authorLink" target="_blank"></a>
-          href="https://userstyles.org/users/280080"
-          target="_blank"
-          title="Nass O">
-          Nass O
-        </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>

popup/remoteStyles.css

@@ -1,40 +1,63 @@
-#remote-styles {
+#disable-all-wrapper {
-  width: 200px;
+  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;
-  background-color: rgba(150,150,150,0.3);
 }
 
-#remote-styles-list {
+.searchResult {
-  padding-inline-start: 0;
-  margin-block-start: 0;
-  margin-block-end: 0;
   padding: 5px;
 }
-.remote-style img {
+.searchResult:hover {
-  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 {
+.searchResult img {
+  width: 50px;
+  height: 40px;
+}
+
+.searchResult-title {
   font-weight: bold;
 }
 
-li.remote-style > .description {
+.searchResult-description {
   overflow: hidden;
   font-style: italic;
 }
 
-li.remote-style > * {
+.searchResult > * {
-  width: 180px;
+  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));
+}

popup/remoteStyles.js

@@ -1,6 +1,7 @@
 'use strict';
 
 let currentPage = 1;
+let hostname;
 
 /**
  * Fetches and parses search results (in JSON) from userstyles.org
@@ -15,7 +16,7 @@ function fetchSearchResults(queryParams) {
       'Accept': '*/*'
     };
     const url = 'https://userstyles.org/api/v1/styles/search?' + queryParams;
-    console.log("fetchSearchResults url:", url);
+    console.log('fetchSearchResults url:', url);
     const xhr = new XMLHttpRequest();
     xhr.timeout = TIMEOUT;
     xhr.onload = () => (xhr.status === 200 || url.protocol === 'file:'
@@ -44,25 +45,26 @@ function createSearchResultElement(searchResult) {
       }
     }
   */
-  console.log("createSearchResultElement searchResult:", searchResult);
+  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);
+  console.log('createSearchResultElement entry:', entry);
 
   const title = $('.searchResult-title', entry);
   Object.assign(title, {
     textContent: searchResult.name,
     title: searchResult.name,
-    href: searchResult.url
+    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.png$/i).test(ss_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, {
@@ -70,17 +72,19 @@ function createSearchResultElement(searchResult) {
     title: 'Screenshot of ' + searchResult.name
   });
 
+  // TODO: Expand/collapse description
   const description = $('.searchResult-description', entry);
   Object.assign(description, {
-    innerHTML: searchResult.description,
+    textContent: searchResult.description.replace(/<.*?>/g, ""),
-    title: searchResult.description,
+    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
+    href: 'https://userstyles.org/users/' + searchResult.user.id,
+    onclick: handleEvent.openURLandHide
   });
 
   $('#searchResults').appendChild(entry);
@@ -88,22 +92,22 @@ function createSearchResultElement(searchResult) {
 
 function updateSearchResultsNav(currentPage, totalPages) {
     // Update 'next' button
-    if (currentPage >= searchResults.total_pages) {
+    if (currentPage >= totalPages) {
-      currentPage = searchResults.total_pages;
+      currentPage = totalPages;
-      $('#searchResultsNav-next').classList.add("disabled");
+      $('#searchResultsNav-next').setAttribute('disabled', 'disabled');
     } else {
-      $('#searchResultsNav-next').classList.remove("disabled");
+      $('#searchResultsNav-next').removeAttribute('disabled');
     }
 
     // Update 'prev' button
     if (currentPage <= 1) {
       currentPage = 1;
-      $('#searchResultsNav-prev').classList.add("disabled");
+      $('#searchResultsNav-prev').setAttribute('disabled', 'disabled');
     } else {
-      $('#searchResultsNav-prev').classList.remove("disabled");
+      $('#searchResultsNav-prev').removeAttribute('disabled');
     }
     $('#searchResultsNav-currentPage').textContent = currentPage;
-    $('#searchResultsNav-totalPages').textContent = searchResults.total_pages;
+    $('#searchResultsNav-totalPages').textContent = totalPages;
 }
 
 function insertRemoteStyles(searchResults) {
@@ -116,32 +120,24 @@ function insertRemoteStyles(searchResults) {
       total_entries: 85
     }
   */
-  console.log("insertRemoteStyles(searchResults):", searchResults);
   currentPage = searchResults.current_page;
   updateSearchResultsNav(searchResults.current_page, searchResults.total_pages);
-  searchResults.data.forEach((searchResult) => {
+  searchResults.data.forEach(createSearchResultElement);
-    console.log("searchResult:", searchResult);
-    createSearchResultElement(searchResult);
-  });
 }
 
 function loadRemoteStyles(event) {
   event.preventDefault();
   getActiveTab().then(tab => {
-    console.log("tab.url:", tab.url);
+    hostname = new URL(tab.url).hostname;
-
-    const url = new URL(tab.url);
-    console.log("url:", url);
-
-    const hostname = url.hostname;
-    console.log("hostname:", hostname);
-
     const queryParams = [
-      "search=" + encodeURIComponent(hostname),
+      'search=' + encodeURIComponent(hostname),
-      "page=" + currentPage,
+      'page=' + currentPage,
-      "per_page=3"
+      'per_page=3'
-    ].join("&");
+    ].join('&');
 
+    $('#searchresults-terms').textContent = hostname;
+    $('#remote-styles').classList.remove("hidden");
+    $('#load-remote-styles').classList.add("hidden");
     fetchSearchResults(queryParams)
       .then(insertRemoteStyles)
       .catch(reason => {