"inline" checkbox opens search results within popup.

Unchecked => opens new tab for search page.

Checkbox hidden if inline results are shown (still shows link to "find styles" which opens a new tab by-default).

_locales/en/messages.json

@@ -369,22 +369,22 @@
     "message": "Install",
     "description": "Text for a button that installs a search result"
   },
-  "searchResultInstallTooltip": {
-    "message": "Install this search result",
-    "description": "Tooltip for a button that installs a search result"
-  },
   "searchResultCustomize": {
     "message": "Customize",
     "description": "Text for a button that customizes a search result before installing"
   },
   "searchResultCustomizeTooltip": {
-    "message": "Customize this style on userstyles.org",
+    "message": "Open this style on userstyles.org to customize via 'Advanced Style Settings'",
-    "description": "Tooltip for a button that customizes a search result before installing"
+    "description": "Tooltip for a button that opens style on userstyles.org for customizing"
   },
   "findStylesForSite": {
     "message": "Find more styles for this site",
     "description": "Text for a link that gets a list of styles for the current site"
   },
+  "findStylesForSiteInline": {
+    "message": "Inline",
+    "description": "Text for a checkbox that opens search results 'inline' (within the Stylus popup window)"
+  },
   "helpAlt": {
     "message": "Help",
     "description": "Alternate text for help buttons"

popup.html

@@ -89,7 +89,7 @@
       <a class="searchResult-title" target="_blank"></a>
       <div class="searchResult-description"></div>
       <div class="searchResult-author">
-        By:
+        <label i18n-text="author"></label>
         <a class="searchResult-authorLink" target="_blank"></a>
       </div>
       <div class="searchResult-meta">
@@ -103,8 +103,10 @@
         </div>
       </div>
       <div class="actions">
-        <button class="searchResult-install" i18n-text="searchResultInstall" i18n-title="searchResultInstallTooltip"></button>
+        <button class="searchResult-install" i18n-text="installButton"></button>
-        <button class="searchResult-customize hidden" i18n-text="searchResultCustomize" i18n-title="searchResultCustomizeTooltip"></button>
+        <button class="searchResult-customize hidden"
+                i18n-text="searchResultCustomize"
+                i18n-title="searchResultCustomizeTooltip"></button>
       </div>
     </div>
   </template>
@@ -165,14 +167,13 @@
     <div class="left-gutter"></div>
     <div class="main-controls">
       <div id="find-styles">
-        <a id="find-styles-link" href="#"
+        <a id="find-styles-link" i18n-text="findStylesForSite"></a>
-           i18n-text="findStylesForSite"></a>
+        <span id="find-styles-inline-group">
+          <input id="find-styles-inline" class="checker" type="checkbox" />
+          <label for="find-styles-inline" i18n-text="findStylesForSiteInline"></label>
+        </span>
       </div>
       <div id="searchResults-error" class="hidden"></div>
-      <div id="open-search" class="hidden">
-        <a id="open-search-link" href="https://userstyles.org/styles/browse/"
-           i18n-text="openSearchWebsite"></a>
-      </div>
       <div id="write-style">
         <span id="write-style-for" i18n-text="writeStyleFor"></span>
       </div>

popup/popup.js

@@ -111,14 +111,6 @@ function initPopup(url) {
     return;
   }
 
-  const u = tryCatch(() => new URL(url));
-  $('#open-search-link').onclick = handleEvent.openURLandHide;
-  $('#open-search-link').href +=
-    !u ? '' :
-    u.protocol === 'file:' ? 'file:' :
-    u.protocol === location.protocol ? '?search_terms=Stylus' :
-    u.hostname.replace(/^www\.|(\.com?)?\.\w+$/g, '').split('.').pop();
-
   getActiveTab().then(function ping(tab, retryCountdown = 10) {
     sendMessage({tabId: tab.id, method: 'ping', frameId: 0}, pong => {
       if (pong) {

popup/search-results.css

@@ -8,12 +8,8 @@
   display: block;
 }
 
-#searchResults.hidden,
+.hidden {
-#searchResults-error.hidden,
+  display: none !important;
-#find-styles.hidden,
-#open-search.hidden,
-.searchResult-customize.hidden {
-  display: none;
 }
 
 #searchResults-error {

popup/search-results.js

@@ -2,11 +2,24 @@
 'use strict';
 
 (() => {
-  onDOMready().then(() => {
+  Promise.all([getActiveTab(), onDOMready()])
+    .then(([tab]) => {
+      $('#find-styles-link').href = searchUserstyles().getSearchPageURL(tab.url);
+
+      $('#find-styles-link').onclick = event => {
+        // Only load search results inline if option is selected.
+        if ($('#find-styles-inline').checked) {
+          $('#find-styles-inline-group').classList.add('hidden');
+          $('#find-styles-inline').checked = false;
           const searchResults = searchResultsController();
-    $('#find-styles-link').onclick = searchResults.load;
           $('#searchResultsNav-prev').onclick = searchResults.prev;
           $('#searchResultsNav-next').onclick = searchResults.next;
+          // Intercept event to avoid opening the search page.
+          return searchResults.load(event);
+        } else {
+          handleEvent.openURLandHide.call($('#find-styles-link'), event);
+        }
+      };
     });
 
   /**
@@ -144,8 +157,6 @@
         return true;
       }
 
-      $('#find-styles').classList.add('hidden');
-      $('#open-search').classList.remove('hidden');
       $('#searchResults').classList.remove('hidden');
       $('#searchResults-error').classList.add('hidden');
 
@@ -398,7 +409,7 @@ function searchUserstyles() {
   let currentPage = 1;
   let exhausted = false;
 
-  return {BASE_URL, getCategory, isExhausted, search, fetchStyleJson, fetchStyle};
+  return {BASE_URL, getCategory, getSearchPageURL, isExhausted, search, fetchStyleJson, fetchStyle};
 
   /**
    * @returns {Boolean} If there are no more results to fetch from userstyles.org
@@ -407,39 +418,34 @@ function searchUserstyles() {
     return exhausted;
   }
 
+  function getSearchPageURL(url) {
+    const category = getCategory(url);
+    if (category === 'STYLUS') {
+      return BASE_URL + '/styles/browse/?search_terms=Stylus';
+    } else {
+      return BASE_URL + '/styles/browse/' + category;
+    }
+  }
+
   /**
    * Resolves the Userstyles.org "category" for a given URL.
    * @param {String} url The URL to a webpage.
    * @returns {Promise<String>} The category for a URL, or the hostname if category is not found.
    */
   function getCategory(url) {
-    let hostname = new URL(url).hostname;
+    const u = tryCatch(() => new URL(url));
-    // Strip "TLD" (including .com.TLD, .co.TLD, etc)
+    if (!u) {
-    hostname = hostname.replace(/(\.com|\.co|\.org|\.net|\.gov)?\.[a-z0-9]+$/, '');
+      return ''; // Invalid URL
-    // Strip "subdomains"
+    } else if (u.protocol === 'file:') {
-    hostname = hostname.split(/\./g).pop();
+      return 'file:'; // File page
-    return hostname;
+    } else if (u.protocol === location.protocol) {
-    /*
+      return 'STYLUS'; // Stylus page
-    // Resolve "category" using userstyles.org's /styles/browse/all/ endpoint:
-    return new Promise(resolve => {
-      const request = new XMLHttpRequest();
-      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 searchCategory = responseURL.searchParams.get('category');
-          if (searchCategory !== null) {
-            resolve(searchCategory);
     } else {
-            resolve(hostname);
+      // Website address, strip TLD & subdomain
+      const domainRegex = /^www\.|(\.com?)?\.\w+$/g;
+      return u.hostname.replace(domainRegex, '').split('.').pop();
     }
   }
-      };
-      request.send(null);
-    });
-    */
-  }
 
   /**
    * Fetches the JSON style object from userstyles.org (containing code, sections, updateUrl, etc).