-
![]()
+
@@ -130,7 +130,6 @@
Search Results for -
-
+
diff --git a/popup/search-results.css b/popup/search-results.css
index 7984dd20..5823682b 100755
--- a/popup/search-results.css
+++ b/popup/search-results.css
@@ -42,6 +42,10 @@
max-width: 180px;
max-height: 180px;
}
+.searchResult-screenshot.no-screenshot {
+ width: 180px;
+ height: 40px;
+}
.searchResult-title {
display: block;
@@ -58,10 +62,18 @@
white-space: nowrap;
}
+.searchResult-install {
+ width: 100%;
+}
+
#searchResultsNav {
flex-direction: row;
text-align: center;
word-break: keep-all;
+ opacity: 1.0;
+}
+#searchResultsNav.loading {
+ opacity: 0.5;
}
#searchResultsNav label {
@@ -74,10 +86,6 @@
text-align: center;
}
-.searchResult-install {
- width: 100%;
-}
-
#searchResultsNav-prev[disabled],
#searchResultsNav-next[disabled] {
cursor: not-allowed;
diff --git a/popup/search-results.js b/popup/search-results.js
index c37d3ac3..2d14c8b9 100755
--- a/popup/search-results.js
+++ b/popup/search-results.js
@@ -1,18 +1,15 @@
/* global handleEvent tryJSONparse getStylesSafe BG */
'use strict';
-// TODO on Install: Promise.all([fetchJSON, fetchHTML]) -> popup if customization is present, install otheriwse.
-
/**
* Library for interacting with userstyles.org
* @returns {Object} Exposed methods representing the search results on userstyles.org
*/
function SearchUserstyles() {
- const RESULTS_PER_PAGE = 20;
let totalPages, totalResults;
let currentPage = 1;
- return {getCurrentPage, getTotalPages, getTotalResults, search, fetchStyleJson};
+ return {getCurrentPage, getTotalPages, getTotalResults, getCategory, search, fetchStyleJson};
function getCurrentPage() {
return currentPage;
@@ -26,6 +23,27 @@ function SearchUserstyles() {
return totalResults;
}
+ function getCategory(url) {
+ const hostname = new URL(url).hostname;
+ return new Promise(resolve => {
+ const request = new XMLHttpRequest();
+ const browseURL = 'https://userstyles.org/styles/browse/all/' + encodeURIComponent(url);
+ request.open('HEAD', browseURL, true);
+ request.onreadystatechange = () => {
+ if (request.readyState === XMLHttpRequest.DONE) {
+ const responseURL = new URL(request.responseURL);
+ const category = responseURL.searchParams.get('category');
+ if (category !== null) {
+ resolve(category);
+ } else {
+ resolve(hostname);
+ }
+ }
+ };
+ request.send(null);
+ });
+ }
+
/**
* Fetches the JSON style object from userstyles.org (containing code, sections, updateUrl, etc).
* This is fetched from the /styles/chrome/ID.json endpoint.
@@ -34,7 +52,7 @@ function SearchUserstyles() {
*/
function fetchStyleJson(userstylesId) {
return new Promise((resolve, reject) => {
- let jsonUrl = 'https://userstyles.org/styles/chrome/' + userstylesId + '.json';
+ const jsonUrl = 'https://userstyles.org/styles/chrome/' + userstylesId + '.json';
download(jsonUrl)
.then(responseText => {
resolve(tryJSONparse(responseText));
@@ -46,21 +64,25 @@ function SearchUserstyles() {
/**
* Fetches (and JSON-parses) search results from a userstyles.org search API.
* Automatically sets currentPage, totalPages, and totalResults.
- * @param {string} searchText Text to search for.
+ * @param {string} category The usrestyles.org "category" (subcategory) OR a any search string.
* @return {Object} Response object from userstyles.org
*/
- function search(searchText) {
+ function search(category) {
return new Promise((resolve, reject) => {
+ if (totalPages !== undefined && currentPage > totalPages) {
+ resolve({'data':[]});
+ }
+
const TIMEOUT = 10000;
const headers = {
'Content-type': 'application/json',
'Accept': '*/*'
};
- const searchUrl = new URL('https://userstyles.org/api/v1/styles/search');
- let queryParams = 'search=' + encodeURIComponent(searchText);
+ const searchUrl = new URL('https://userstyles.org/api/v1/styles/subcategory');
+ let queryParams = 'search=' + encodeURIComponent(category);
queryParams += '&page=' + currentPage;
- queryParams += '&per_page=' + RESULTS_PER_PAGE;
+ queryParams += '&country=NA';
searchUrl.search = '?' + queryParams;
const xhr = new XMLHttpRequest();
xhr.timeout = TIMEOUT;
@@ -90,52 +112,84 @@ function SearchUserstyles() {
* @returns {Object} Includes load(), next(), and prev() methods to alter the search results.
*/
const SearchResults = (() => {
- const RESULTS_PER_PAGE = 3; // Number of results to display in popup.html
- const DELAY_BETWEEN_RESULTS_MS = 500;
+ const DISPLAYED_RESULTS_PER_PAGE = 3; // Number of results to display in popup.html
+ const DELAY_BETWEEN_RESULTS_MS = 500; // Millisecs to wait before fetching next batch of search results.
+ const DELAY_BETWEEN_FETCHING_STYLES = 0; // Millisecs to wait before fetching .JSON for next search result.
const searchAPI = SearchUserstyles();
const unprocessedResults = []; // Search results not yet processed.
const processedResults = []; // Search results that are not installed and apply ot the page (includes 'json' field with full style).
+ let loading = false;
let tabURL; // The active tab's URL.
- let currentPage = 1; // Current page number in popup.html
+ let currentDisplayedPage = 1; // Current page number in popup.html
let nonApplicableResults = 0; // Number of results that don't apply to the searched site (thx userstyles.org!)
let alreadyInstalledResults = 0; // Number of results that are already installed.
return {load, next, prev};
function render() {
- // Clear search results
- $('#searchResults-list').innerHTML = '';
+ $('#searchResults-list').innerHTML = ''; // Clear search results
- // Show search results for current page
- const startIndex = (currentPage - 1) * RESULTS_PER_PAGE;
- const endIndex = currentPage * RESULTS_PER_PAGE;
- const resultSubset = processedResults.slice(startIndex, endIndex);
- console.log('Render processedResults[' + startIndex + ':' + endIndex + '] = ', resultSubset);
- resultSubset.forEach(index => {
- createSearchResult(index);
+ const startIndex = (currentDisplayedPage - 1) * DISPLAYED_RESULTS_PER_PAGE;
+ const endIndex = currentDisplayedPage * DISPLAYED_RESULTS_PER_PAGE;
+ const displayedResults = processedResults.slice(startIndex, endIndex);
+ displayedResults.forEach(resultToDisplay => {
+ createSearchResultNode(resultToDisplay);
});
- if (resultSubset.length < RESULTS_PER_PAGE) {
- // TODO: Show "Results are still loading" message.
+
+ if (currentDisplayedPage <= 1 || loading) {
+ $('#searchResultsNav-prev').setAttribute('disabled', 'disabled');
} else {
- // TODO: Hide "results are still loading" message.
+ $('#searchResultsNav-prev').removeAttribute('disabled');
}
+ $('#searchResultsNav-currentPage').textContent = currentDisplayedPage;
+
+ // Hack: Add 1 page if there's results left to process.
+ const totalResultsCount = processedResults.length + (unprocessedResults.length ? DISPLAYED_RESULTS_PER_PAGE : 0);
+ const totalPageCount = Math.ceil(Math.max(1, totalResultsCount / DISPLAYED_RESULTS_PER_PAGE));
+ if (currentDisplayedPage >= totalPageCount || loading) {
+ $('#searchResultsNav-next').setAttribute('disabled', 'disabled');
+ } else {
+ $('#searchResultsNav-next').removeAttribute('disabled');
+ }
+ $('#searchResultsNav-totalPages').textContent = totalPageCount;
+
+ const navNode = $('#searchResultsNav');
+ if (loading && !navNode.classList.contains('loading')) {
+ navNode.classList.add('loading');
+ } else {
+ navNode.classList.remove('loading');
+ }
+ }
+
+ function shouldLoadMore() {
+ const result = (processedResults.length < currentDisplayedPage * DISPLAYED_RESULTS_PER_PAGE)
+ console.log('shouldLoadMore:',
+ result ? 'YES' : 'NO',
+ ' processedResults.length(' + processedResults.length + ')',
+ '< currentDisplayedPage(' + currentDisplayedPage + ')',
+ '* DISPLAYED_RESULTS_PER_PAGE(' + DISPLAYED_RESULTS_PER_PAGE + ')');
+ return result;
}
function loadMoreIfNeeded() {
- if (processedResults.length < (currentPage + 1) * RESULTS_PER_PAGE) {
- console.log('loadMoreIfNeeded: YES. currentPage:' + currentPage, 'processedResults.length:' + processedResults.length);
+ if (shouldLoadMore()) {
+ console.log('loadMoreIfNeeded: YES.');
+ loading = true;
+ render();
setTimeout(load, 1000);
} else {
- console.log('loadMoreIfNeeded: NO. currentPage:' + currentPage, 'processedResults.length:' + processedResults.length);
+ console.log('loadMoreIfNeeded: NO.');
+ loading = false;
+ render();
}
}
- /** Increments currentPage and loads results. */
+ /** Increments currentDisplayedPage and loads results. */
function next(event) {
if (event) {
event.preventDefault();
}
- currentPage += 1;
+ currentDisplayedPage += 1;
render();
loadMoreIfNeeded();
}
@@ -145,7 +199,7 @@ const SearchResults = (() => {
if (event) {
event.preventDefault();
}
- currentPage = Math.max(1, currentPage - 1);
+ currentDisplayedPage = Math.max(1, currentDisplayedPage - 1);
render();
}
@@ -175,6 +229,15 @@ const SearchResults = (() => {
if (event) {
event.preventDefault();
}
+
+ loading = true;
+ render();
+
+ if (unprocessedResults.length > 0) {
+ processNextResult();
+ return true;
+ }
+
$('#load-search-results').classList.add('hidden');
$('#searchResults').classList.remove('hidden');
$('#searchResults-error').classList.add('hidden');
@@ -182,26 +245,38 @@ const SearchResults = (() => {
// Find styles for the current active tab
getActiveTab().then(tab => {
tabURL = tab.url;
- const hostname = new URL(tabURL).hostname.replace(/^(?:.*\.)?([^.]*\.(co\.)?[^.]*)$/i, '$1');
- $('#searchResults-terms').textContent = hostname;
+ searchAPI.getCategory(tabURL)
+ .then(category => {
+ console.log('userstyles.org "category" for URL ' + tabURL + ' is ' + category);
+ $('#searchResults-terms').textContent = category;
- console.log('load#searchAPI.search(' + hostname + ')');
- searchAPI.search(hostname)
- .then(searchResults => {
- if (searchResults.data.length === 0) {
- throw 404;
- }
- unprocessedResults.push.apply(unprocessedResults, searchResults.data);
- processNextResult();
- })
- .catch(error);
+ searchAPI.search(category)
+ .then(searchResults => {
+ console.log('load#searchAPI.search(', category, ') => ',
+ searchResults.data.length, 'results');
+ if (searchResults.data.length === 0) {
+ throw 404;
+ }
+ unprocessedResults.push.apply(unprocessedResults, searchResults.data);
+ processNextResult();
+ })
+ .catch(error);
+ });
});
return true;
}
function processNextResult() {
+ if (!shouldLoadMore()) {
+ console.log('[' + unprocessedResults.length + '] search results remain to be processed: STOPPED');
+ loading = false;
+ render();
+ return;
+ } else {
+ console.log('[' + unprocessedResults.length + '] search results remain to be processed: PROCESSING');
+ }
+
if (unprocessedResults.length === 0) {
- console.log('processNextResult:unprocessedResults === 0');
loadMoreIfNeeded();
return;
}
@@ -212,16 +287,17 @@ const SearchResults = (() => {
if (matchingStyles.length > 0) {
// Style already installed, skip it.
// TODO: Include the style anyway with option to "Uninstall" (?)
- console.log('style "' + nextResult.name + '" already installed');
+ console.log('[' + unprocessedResults.length + '] style "' + nextResult.name + '" already installed: CONTINUING');
alreadyInstalledResults += 1;
- setTimeout(processNextResult, 0); // Keep processing
+ setTimeout(processNextResult, DELAY_BETWEEN_FETCHING_STYLES); // Keep processing
} else if (nextResult.category !== 'site') {
// Style is not for a website, skip it.
- console.log('style "' + nextResult.name + '" category is for "' + nextResult.category + '", not "site"');
+ console.log('[' + unprocessedResults.length + '] style "' + nextResult.name + '" category is for "' + nextResult.category + '", not "site": CONTINUING');
nonApplicableResults += 1;
setTimeout(processNextResult, 0); // Keep processing
} else {
// Style not installed, fetch full style to see if it applies to this site.
+ console.log('[' + unprocessedResults.length + '] fetching "' + nextResult.name + '": CONTINUING');
searchAPI.fetchStyleJson(nextResult.id)
.then(userstyleJson => {
// Extract applicable sections (i.e. styles that apply to the current site)
@@ -239,42 +315,20 @@ const SearchResults = (() => {
processedResults.push(nextResult);
render();
}
- console.log('processNextResult:sleep(' + DELAY_BETWEEN_RESULTS_MS + ')');
+ console.log('[' + unprocessedResults.length + '] Processed "' + nextResult.name + '"',
+ 'processedResults=' + processedResults.length,
+ 'skipped-installed=' + alreadyInstalledResults,
+ 'skipped-irrelevant=' + nonApplicableResults,
+ 'CONTINUING @ sleep=' + DELAY_BETWEEN_RESULTS_MS);
setTimeout(processNextResult, DELAY_BETWEEN_RESULTS_MS); // Keep processing
})
.catch(reason => {
- console.log('Error while loading style ID ' + nextResult.id + ': ' + reason);
- alert('Error while loading style ID ' + nextResult.id + ': ' + reason);
- console.log('processNextResult:sleep(' + DELAY_BETWEEN_RESULTS_MS + ')');
+ console.log('[' + unprocessedResults.length + '] Error while loading style ID ' + nextResult.id + ': ' + reason);
setTimeout(processNextResult, DELAY_BETWEEN_RESULTS_MS); // Keep processing
});
}
- console.log('processNextResult:alreadyInstalled:' + alreadyInstalledResults,
- 'nonApplicable:' + nonApplicableResults);
}
- /** Updates prev/next buttons and currentPage/totalPage labels. */
- 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');
- }
-
- // Update current/total counts
- $('#searchResultsNav-currentPage').textContent = currentPage;
- $('#searchResultsNav-totalPages').textContent = totalPages;
- }
/**
* Promises a list of installed styles that match the provided search result.
* @param {Object} userstyleSearchResult Search result object from userstyles.org
@@ -302,7 +356,7 @@ const SearchResults = (() => {
* Constructs and adds the given search result to the popup's Search Results container.
* @param {Object} userstyleSearchResult The SearchResult object from userstyles.org
*/
- function createSearchResult(userstyleSearchResult) {
+ function createSearchResultNode(userstyleSearchResult) {
/*
userstyleSearchResult format: {
id: 100835,
@@ -315,6 +369,7 @@ const SearchResults = (() => {
}
}
*/
+ console.log('createSearchResultNode(', userstyleSearchResult, ')');
const entry = template.searchResult.cloneNode(true);
Object.assign(entry, {
@@ -333,8 +388,13 @@ const SearchResults = (() => {
const screenshot = $('.searchResult-screenshot', entry);
let screenshotUrl = userstyleSearchResult.screenshot_url;
- if (RegExp(/^[0-9]*_after.(jpe?g|png|gif)$/i).test(screenshotUrl)) {
+ if (screenshotUrl === null) {
+ screenshotUrl = 'data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mOcXQ8AAbsBHLLDr5MAAAAASUVORK5CYII=';
+ } else if (RegExp(/^[0-9]*_after.(jpe?g|png|gif)$/i).test(screenshotUrl)) {
screenshotUrl = 'https://userstyles.org/style_screenshot_thumbnails/' + screenshotUrl;
+ screenshot.classList.remove('no-screenshot');
+ } else {
+ screenshot.classList.remove('no-screenshot');
}
Object.assign(screenshot, {
src: screenshotUrl,
@@ -365,7 +425,8 @@ const SearchResults = (() => {
/** Installs the current userstyleSearchResult into stylus. */
function install() {
entry.classList.add('loading');
- // TODO: Detect if style has customizations, point to style page if so.
+
+ // TODO on Install: Promise.all([fetchJSON, fetchHTML]) -> popup if customization is present, install otheriwse.
const styleId = userstyleSearchResult.id;
const url = 'https://userstyles.org/styles/chrome/' + styleId + '.json';
download(url)
@@ -377,8 +438,8 @@ const SearchResults = (() => {
});
})
.catch(reason => {
- console.log('Error while installing from ' + url + ': ' + reason);
- alert('Error while installing from ' + url + ': ' + reason);
+ console.log('install:download(', url, ') => [ERROR]: ', reason);
+ alert('Error while downloading ' + url + '\nReason: ' + reason);
});
return true;
}