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 @@
- By: +
@@ -103,8 +103,10 @@
- - + +
@@ -165,14 +167,13 @@
- + + + + +
-
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(); + } } /**