diff --git a/_locales/en/messages.json b/_locales/en/messages.json
index bd87fe83..dd700b65 100644
--- a/_locales/en/messages.json
+++ b/_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",
- "description": "Tooltip for a button that customizes a search result before installing"
+ "message": "Open this style on userstyles.org to customize via 'Advanced Style Settings'",
+ "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"
diff --git a/popup.html b/popup.html
index 0464a0e8..15681288 100644
--- a/popup.html
+++ b/popup.html
@@ -89,7 +89,7 @@
-
diff --git a/popup/popup.js b/popup/popup.js
index 71c69af8..8fdeaac6 100644
--- a/popup/popup.js
+++ b/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) {
diff --git a/popup/search-results.css b/popup/search-results.css
index dbc724cb..4facbcc6 100755
--- a/popup/search-results.css
+++ b/popup/search-results.css
@@ -8,12 +8,8 @@
display: block;
}
-#searchResults.hidden,
-#searchResults-error.hidden,
-#find-styles.hidden,
-#open-search.hidden,
-.searchResult-customize.hidden {
- display: none;
+.hidden {
+ display: none !important;
}
#searchResults-error {
diff --git a/popup/search-results.js b/popup/search-results.js
index 98e0fa03..846a966a 100755
--- a/popup/search-results.js
+++ b/popup/search-results.js
@@ -2,12 +2,25 @@
'use strict';
(() => {
- onDOMready().then(() => {
- const searchResults = searchResultsController();
- $('#find-styles-link').onclick = searchResults.load;
- $('#searchResultsNav-prev').onclick = searchResults.prev;
- $('#searchResultsNav-next').onclick = searchResults.next;
- });
+ 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();
+ $('#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);
+ }
+ };
+ });
/**
* Represents the search results within the Stylus popup.
@@ -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,38 +418,33 @@ 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
} The category for a URL, or the hostname if category is not found.
*/
function getCategory(url) {
- 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 = 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);
- }
- }
- };
- request.send(null);
- });
- */
+ const u = tryCatch(() => new URL(url));
+ if (!u) {
+ return ''; // Invalid URL
+ } else if (u.protocol === 'file:') {
+ return 'file:'; // File page
+ } else if (u.protocol === location.protocol) {
+ return 'STYLUS'; // Stylus page
+ } else {
+ // Website address, strip TLD & subdomain
+ const domainRegex = /^www\.|(\.com?)?\.\w+$/g;
+ return u.hostname.replace(domainRegex, '').split('.').pop();
+ }
}
/**