open.source/stylus
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add USw to the inline search and proper installing (#1223)

Browse Source 
* remember sort order in popup, use "updated" by default
* add a USW link in the manager

Co-authored-by: tophf <tophf@gmx.com>
This commit is contained in:
Gusted 2021-04-20 17:40:04 +00:00 committed by GitHub
parent 892b295897
commit f10ebffeff
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
9 changed files with 110 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
_locales/en/messages.json
View File

@ -630,6 +630,10 @@
"message": "Translate",
"description": "Transifex link text on the manage page"
},
"linkUSW": {
"message": "Upload and discover styles on userstyles.world",
"description": "Link text for https://userstyles.world/ on the manage page"
},
"linterCSSLintIncompatible": {
"message": "CSSLint doesn't support $preprocessorname$ preprocessor",
"placeholders": {

3
background/style-manager.js
View File

@ -223,7 +223,8 @@ const styleMan = (() => {
style = mergeWithMapped(style);
const url = !style.url && style.updateUrl && (
URLS.extractUsoArchiveInstallUrl(style.updateUrl) ||
URLS.extractGreasyForkInstallUrl(style.updateUrl)
URLS.extractGreasyForkInstallUrl(style.updateUrl) ||
URLS.extractUSwInstallUrl(style.updateUrl)
);
if (url) style.url = style.installationUrl = url;
style.originalDigest = await calcStyleDigest(style);

1
background/usercss-install-helper.js
View File

@ -36,6 +36,7 @@ bgReady.all.then(() => {
chrome.webRequest.onBeforeSendHeaders.addListener(maybeInstallFromDistro, {
urls: [
URLS.usoArchiveRaw + 'usercss/*.user.css',
URLS.usw + 'api/style/*.user.css',
'*://greasyfork.org/scripts/*/code/*.user.css',
'*://sleazyfork.org/scripts/*/code/*.user.css',
...[].concat(

2
js/prefs.js
View File

@ -37,6 +37,8 @@
'popup.autoResort': false, // auto resort styles after toggling
'popup.borders': false, // add white borders on the sides
'popup.findStylesInline': true, // use the inline style search
/** @type {'n' | 'u' | 't' | 'w' | 'r'} see IndexEntry */
'popup.findSort': 'u', // the inline style search sort order
'manage.onlyEnabled': false, // display only enabled styles
'manage.onlyLocal': false, // display only styles created locally

13
js/toolbox.js
View File

@ -78,6 +78,9 @@ const URLS = {
usoArchive: 'https://33kk.github.io/uso-archive/',
usoArchiveRaw: 'https://raw.githubusercontent.com/33kk/uso-archive/flomaster/data/',
usw: 'https://userstyles.world/',
extractUsoArchiveId: url =>
url &&
url.startsWith(URLS.usoArchiveRaw) &&
@ -91,6 +94,16 @@ const URLS = {
extractGreasyForkInstallUrl: url =>
/^(https:\/\/(?:greasy|sleazy)fork\.org\/scripts\/\d+)[^/]*\/code\/[^/]*\.user\.css$|$/.exec(url)[1],
extractUSwId: url =>
url &&
url.startsWith(URLS.usw) &&
Number(url.match(/\/(\d+)\.user\.css|$/)[1]),
extractUSwInstallUrl: url => {
const id = URLS.extractUSwId(url);
return id ? `${URLS.usw}style/${id}` : '';
},
makeUswCodeUrl: id => `${URLS.usw}api/style/${id}.user.css`,
supported: url => (
url.startsWith('http') ||
url.startsWith('ftp') ||

3
manage.html
View File

@ -333,6 +333,9 @@
<span><a href="https://add0n.com/stylus.html#features" target="_blank" i18n-text="linkGetHelp"></a></span>
<span><a href="https://github.com/openstyles/stylus/wiki" target="_blank" i18n-text="linkStylusWiki"></a></span>
<span><a href="https://www.transifex.com/github-7/Stylus" target="_blank" i18n-text="linkTranslate"></a></span>
<span><a href="https://userstyles.world/" target="_blank" i18n-text-append="linkUSW" id="link-usw">
<img src="https://userstyles.world/favicon.ico">
</a></span>
</div>
</div>
</div>

18
manage/manage.css
View File

@ -440,6 +440,24 @@ a:hover {
margin: 0 .5em;
}
#link-usw {
display: flex;
align-items: center;
margin-top: .5em;
}
#link-usw img {
max-width: 2.5em;
max-height: 2.5em;
margin-right: .75em;
filter: grayscale(1);
transition: filter .5s;
}
#link-usw:hover img {
filter: none;
}
.newUI .entry .svg-icon.checked,
.newUI .entry:hover .svg-icon.checked {
fill: #000;

6
popup/search.css
View File

@ -82,6 +82,12 @@ body.search-results-shown {
overflow-wrap: break-word;
}
.search-result-title img {
width: 20px;
height: 20px;
margin: -6px 4px -6px 0;
}
.search-result-title span {
font-size: 12px;
font-weight: 600;

67
popup/search.js
View File

@ -12,6 +12,11 @@
const RESULT_ID_PREFIX = 'search-result-';
const INDEX_URL = URLS.usoArchiveRaw + 'search-index.json';
const USW_INDEX_URL = URLS.usw + 'api/index/uso-format';
const USW_ICON = $create('img', {
src: `${URLS.usw}favicon.ico`,
title: URLS.usw,
});
const STYLUS_CATEGORY = 'chrome-extension';
const PAGE_LENGTH = 10;
// update USO style install counter if the style isn't uninstalled immediately
@ -43,8 +48,7 @@
let searchGlobals = $('#search-globals').checked;
/** @type string[] */
let query = [];
/** @type 'n' | 'u' | 't' | 'w' | 'r' */
let order = 't';
let order = prefs.get('popup.findSort');
let scrollToFirstResult = true;
let displayedPage = 1;
let totalPages = 1;
@ -98,6 +102,7 @@
$('#search-order').value = order;
$('#search-order').onchange = function () {
order = this.value;
prefs.set('popup.findSort', order);
results.sort(comparator);
render();
};
@ -141,10 +146,9 @@
window.on('styleAdded', async ({detail: {style}}) => {
restoreScrollPosition();
const usoId = calcUsoId(style) ||
calcUsoId(await API.styles.get(style.id));
if (usoId && results.find(r => r.i === usoId)) {
renderActionButtons(usoId, style.id);
const id = calcId(style) || calcId(await API.styles.get(style.id));
if (id && results.find(r => r.i === id)) {
renderActionButtons(id, style.id);
}
});
}
@ -181,15 +185,15 @@
show(dom.container);
show(dom.list);
hide(dom.error);
results = [];
try {
results = [];
for (let retry = 0; !results.length && retry <= 2; retry++) {
results = await search({retry});
}
if (results.length) {
const installedStyles = await API.styles.getAll();
const allUsoIds = new Set(installedStyles.map(calcUsoId));
results = results.filter(r => !allUsoIds.has(r.i));
const allSupportedIds = new Set(installedStyles.map(calcId));
results = results.filter(r => !allSupportedIds.has(r.i));
}
render();
(results.length ? show : hide)(dom.list);
@ -274,29 +278,39 @@
an: author,
sa: shotArchived,
sn: shotName,
isUsw,
} = entry._result = result;
entry.id = RESULT_ID_PREFIX + id;
// title
Object.assign($('.search-result-title', entry), {
onclick: Events.openURLandHide,
href: URLS.usoArchive + `?category=${category}&style=${id}`,
href: isUsw ? `${URLS.usw}style/${id}` :
`${URLS.usoArchive}?category=${category}&style=${id}`,
});
if (isUsw) $('.search-result-title', entry).prepend(USW_ICON.cloneNode(true));
$('.search-result-title span', entry).textContent =
t.breakWord(name.length < 300 ? name : name.slice(0, 300) + '...');
// screenshot
const elShot = $('.search-result-screenshot', entry);
if (isUsw) {
elShot.src = /^https?:/i.test(shotName) ? shotName : BLANK_PIXEL;
} else {
const auto = URLS.uso + `auto_style_screenshots/${id}${USO_AUTO_PIC_SUFFIX}`;
Object.assign($('.search-result-screenshot', entry), {
Object.assign(elShot, {
src: shotName && !shotName.endsWith(USO_AUTO_PIC_SUFFIX)
? `${shotArchived ? URLS.usoArchiveRaw : URLS.uso + 'style_'}screenshots/${shotName}`
: auto,
_src: auto,
onerror: fixScreenshot,
});
}
// author
const eAuthor = encodeURIComponent(author);
Object.assign($('[data-type="author"] a', entry), {
textContent: author,
title: author,
href: URLS.usoArchive + '?author=' + encodeURIComponent(author).replace(/%20/g, '+'),
href: isUsw ? `${URLS.usw}user/${eAuthor}` :
`${URLS.usoArchive}?author=${eAuthor.replace(/%20/g, '+')}`,
onclick: Events.openURLandHide,
});
// rating
@ -398,18 +412,21 @@
async function install() {
const entry = this.closest('.search-result');
const result = /** @type IndexEntry */ entry._result;
const {i: id} = result;
const {i: id, isUsw} = result;
const installButton = $('.search-result-install', entry);
showSpinner(entry);
saveScrollPosition(entry);
installButton.disabled = true;
entry.style.setProperty('pointer-events', 'none', 'important');
if (!isUsw) {
// FIXME: move this to background page and create an API like installUSOStyle
result.pingbackTimer = setTimeout(download, PINGBACK_DELAY,
`${URLS.uso}styles/install/${id}?source=stylish-ch`);
}
const updateUrl = isUsw ? URLS.makeUswCodeUrl(id) : URLS.makeUsoArchiveCodeUrl(id);
const updateUrl = URLS.makeUsoArchiveCodeUrl(id);
try {
const sourceCode = await download(updateUrl);
const style = await API.usercss.install({sourceCode, updateUrl});
@ -469,8 +486,18 @@
async function fetchIndex() {
const timer = setTimeout(showSpinner, BUSY_DELAY, dom.list);
index = (await download(INDEX_URL, {responseType: 'json'}))
.filter(res => res.f === 'uso');
index = [];
await Promise.all([
download(INDEX_URL, {responseType: 'json'}).then(res => {
index = index.concat(res.filter(res => res.f === 'uso'));
}).catch(() => {}),
download(USW_INDEX_URL, {responseType: 'json'}).then(res => {
for (const style of res.data) {
style.isUsw = true;
index.push(style);
}
}).catch(() => {}),
]);
clearTimeout(timer);
$remove(':scope > .lds-spinner', dom.list);
return index;
@ -521,6 +548,14 @@
URLS.extractUsoArchiveId(updateUrl);
}
function calcUswId({updateUrl}) {
return URLS.extractUSwId(updateUrl) || 0;
}
function calcId(style) {
return calcUsoId(style) || calcUswId(style);
}
function calcHaystack(res) {
if (!res._nLC) res._nLC = res.n.toLocaleLowerCase();
if (!res._year) res._year = new Date(res.u * 1000).getFullYear();