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

API.* groups + async'ify

Browse Source 
* API.styles.*
* API.usercss.*
* API.sync.*
* API.worker.*
* API.updater.*
* simplify db: resolve with result
* remove API.download
* simplify download()
* remove noCode param as it wastes more time/memory on copying
* styleManager: switch style<->data names to reflect their actual contents
* inline method bodies to avoid indirection and enable better autocomplete/hint/jump support in IDE
This commit is contained in:
tophf 2020-11-18 21:19:32 +03:00
parent 06823bd5b4
commit 86623a9aab
41 changed files with 1367 additions and 1574 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
background/background-worker.js
View File

@ -4,6 +4,7 @@
importScripts('/js/worker-util.js'); importScripts('/js/worker-util.js');
const {loadScript} = workerUtil; const {loadScript} = workerUtil;
/** @namespace ApiWorker */
workerUtil.createAPI({ workerUtil.createAPI({
parseMozFormat(arg) { parseMozFormat(arg) {
loadScript('/vendor-overwrites/csslint/parserlib.js', '/js/moz-parser.js'); loadScript('/vendor-overwrites/csslint/parserlib.js', '/js/moz-parser.js');

411
background/background.js
View File

@ -1,49 +1,30 @@
/* global download prefs openURL FIREFOX CHROME /* global
URLS ignoreChromeError chromeLocal semverCompare activateTab
styleManager msg navigatorUtil workerUtil contentScripts sync API
findExistingTab activateTab isTabReplaceable getActiveTab chromeLocal
findExistingTab
FIREFOX
getActiveTab
isTabReplaceable
msg
openURL
prefs
semverCompare
URLS
workerUtil
*/ */
'use strict'; 'use strict';
// eslint-disable-next-line no-var //#region API
var backgroundWorker = workerUtil.createWorker({
Object.assign(API, {
/** @type {ApiWorker} */
worker: workerUtil.createWorker({
url: '/background/background-worker.js', url: '/background/background-worker.js',
}); }),
// eslint-disable-next-line no-var
var browserCommands, contextMenus;
// *************************************************************************
// browser commands
browserCommands = {
openManage,
openOptions: () => openManage({options: true}),
styleDisableAll(info) {
prefs.set('disableAll', info ? info.checked : !prefs.get('disableAll'));
},
reload: () => chrome.runtime.reload(),
};
window.API_METHODS = Object.assign(window.API_METHODS || {}, {
deleteStyle: styleManager.deleteStyle,
editSave: styleManager.editSave,
findStyle: styleManager.findStyle,
getAllStyles: styleManager.getAllStyles, // used by importer
getSectionsByUrl: styleManager.getSectionsByUrl,
getStyle: styleManager.get,
getStylesByUrl: styleManager.getStylesByUrl,
importStyle: styleManager.importStyle,
importManyStyles: styleManager.importMany,
installStyle: styleManager.installStyle,
styleExists: styleManager.styleExists,
toggleStyle: styleManager.toggleStyle,
addInclusion: styleManager.addInclusion,
removeInclusion: styleManager.removeInclusion,
addExclusion: styleManager.addExclusion,
removeExclusion: styleManager.removeExclusion,
/** @returns {string} */
getTabUrlPrefix() { getTabUrlPrefix() {
const {url} = this.sender.tab; const {url} = this.sender.tab;
if (url.startsWith(URLS.ownOrigin)) { if (url.startsWith(URLS.ownOrigin)) {
@ -52,252 +33,22 @@ window.API_METHODS = Object.assign(window.API_METHODS || {}, {
return url.match(/^([\w-]+:\/+[^/#]+)/)[1]; return url.match(/^([\w-]+:\/+[^/#]+)/)[1];
}, },
download(msg) { /** @returns {Prefs} */
delete msg.method;
return download(msg.url, msg);
},
parseCss({code}) {
return backgroundWorker.parseMozFormat({code});
},
getPrefs: () => prefs.values, getPrefs: () => prefs.values,
setPref: (key, value) => prefs.set(key, value), setPref(key, value) {
prefs.set(key, value);
openEditor,
/* Same as openURL, the only extra prop in `opts` is `message` - it'll be sent when the tab is ready,
which is needed in the popup, otherwise another extension could force the tab to open in foreground
thus auto-closing the popup (in Chrome at least) and preventing the sendMessage code from running */
async openURL(opts) {
const tab = await openURL(opts);
if (opts.message) {
await onTabReady(tab);
await msg.sendTab(tab.id, opts.message);
}
return tab;
function onTabReady(tab) {
return new Promise((resolve, reject) =>
setTimeout(function ping(numTries = 10, delay = 100) {
msg.sendTab(tab.id, {method: 'ping'})
.catch(() => false)
.then(pong => pong
? resolve(tab)
: numTries && setTimeout(ping, delay, numTries - 1, delay * 1.5) ||
reject('timeout'));
}));
}
}, },
optionsCustomizeHotkeys() { /**
return browserCommands.openOptions() * Opens the editor or activates an existing tab
.then(() => new Promise(resolve => setTimeout(resolve, 500))) * @param {{
.then(() => msg.broadcastExtension({method: 'optionsCustomizeHotkeys'})); id?: number
}, domain?: string
'url-prefix'?: string
syncStart: sync.start, }} params
syncStop: sync.stop, * @returns {Promise<chrome.tabs.Tab>}
syncNow: sync.syncNow,
getSyncStatus: sync.getStatus,
syncLogin: sync.login,
openManage,
});
// *************************************************************************
// register all listeners
msg.on(onRuntimeMessage);
// tell apply.js to refresh styles for non-committed navigation
navigatorUtil.onUrlChange(({tabId, frameId}, type) => {
if (type !== 'committed') {
msg.sendTab(tabId, {method: 'urlChanged'}, {frameId})
.catch(msg.ignoreError);
}
});
if (FIREFOX) {
// FF misses some about:blank iframes so we inject our content script explicitly
navigatorUtil.onDOMContentLoaded(webNavIframeHelperFF, {
url: [
{urlEquals: 'about:blank'},
],
});
}
if (chrome.contextMenus) {
chrome.contextMenus.onClicked.addListener((info, tab) =>
contextMenus[info.menuItemId].click(info, tab));
}
if (chrome.commands) {
// Not available in Firefox - https://bugzilla.mozilla.org/show_bug.cgi?id=1240350
chrome.commands.onCommand.addListener(command => browserCommands[command]());
}
// *************************************************************************
chrome.runtime.onInstalled.addListener(({reason, previousVersion}) => {
if (reason !== 'update') return;
if (semverCompare(previousVersion, '1.5.13') <= 0) {
// Removing unused stuff
// TODO: delete this entire block by the middle of 2021
try {
localStorage.clear();
} catch (e) {}
setTimeout(async () => {
const del = Object.keys(await chromeLocal.get())
.filter(key => key.startsWith('usoSearchCache'));
if (del.length) chromeLocal.remove(del);
}, 15e3);
}
});
// *************************************************************************
// context menus
contextMenus = {
'show-badge': {
title: 'menuShowBadge',
click: info => prefs.set(info.menuItemId, info.checked),
},
'disableAll': {
title: 'disableAllStyles',
click: browserCommands.styleDisableAll,
},
'open-manager': {
title: 'openStylesManager',
click: browserCommands.openManage,
},
'open-options': {
title: 'openOptions',
click: browserCommands.openOptions,
},
'reload': {
presentIf: async () => (await browser.management.getSelf()).installType === 'development',
title: 'reload',
click: browserCommands.reload,
},
'editor.contextDelete': {
presentIf: () => !FIREFOX && prefs.get('editor.contextDelete'),
title: 'editDeleteText',
type: 'normal',
contexts: ['editable'],
documentUrlPatterns: [URLS.ownOrigin + 'edit*'],
click: (info, tab) => {
msg.sendTab(tab.id, {method: 'editDeleteText'}, undefined, 'extension')
.catch(msg.ignoreError);
},
},
};
async function createContextMenus(ids) {
for (const id of ids) {
let item = contextMenus[id];
if (item.presentIf && !await item.presentIf()) {
continue;
}
item = Object.assign({id}, item);
delete item.presentIf;
item.title = chrome.i18n.getMessage(item.title);
if (!item.type && typeof prefs.defaults[id] === 'boolean') {
item.type = 'checkbox';
item.checked = prefs.get(id);
}
if (!item.contexts) {
item.contexts = ['browser_action'];
}
delete item.click;
chrome.contextMenus.create(item, ignoreChromeError);
}
}
if (chrome.contextMenus) {
// "Delete" item in context menu for browsers that don't have it
if (CHROME &&
// looking at the end of UA string
/(Vivaldi|Safari)\/[\d.]+$/.test(navigator.userAgent) &&
// skip forks with Flash as those are likely to have the menu e.g. CentBrowser
!Array.from(navigator.plugins).some(p => p.name === 'Shockwave Flash')) {
prefs.defaults['editor.contextDelete'] = true;
}
// circumvent the bug with disabling check marks in Chrome 62-64
const toggleCheckmark = CHROME >= 62 && CHROME <= 64 ?
(id => chrome.contextMenus.remove(id, () => createContextMenus([id]) + ignoreChromeError())) :
((id, checked) => chrome.contextMenus.update(id, {checked}, ignoreChromeError));
const togglePresence = (id, checked) => {
if (checked) {
createContextMenus([id]);
} else {
chrome.contextMenus.remove(id, ignoreChromeError);
}
};
const keys = Object.keys(contextMenus);
prefs.subscribe(keys.filter(id => typeof prefs.defaults[id] === 'boolean'), toggleCheckmark);
prefs.subscribe(keys.filter(id => contextMenus[id].presentIf && id in prefs.defaults), togglePresence);
createContextMenus(keys);
}
// reinject content scripts when the extension is reloaded/updated. Firefox
// would handle this automatically.
if (!FIREFOX) {
setTimeout(contentScripts.injectToAllTabs, 0);
}
// register hotkeys
if (FIREFOX && browser.commands && browser.commands.update) {
const hotkeyPrefs = Object.keys(prefs.defaults).filter(k => k.startsWith('hotkey.'));
prefs.subscribe(hotkeyPrefs, (name, value) => {
try {
name = name.split('.')[1];
if (value.trim()) {
browser.commands.update({name, shortcut: value});
} else {
browser.commands.reset(name);
}
} catch (e) {}
});
}
msg.broadcast({method: 'backgroundReady'});
function webNavIframeHelperFF({tabId, frameId}) {
if (!frameId) return;
msg.sendTab(tabId, {method: 'ping'}, {frameId})
.catch(() => false)
.then(pong => {
if (pong) return;
// insert apply.js to iframe
const files = chrome.runtime.getManifest().content_scripts[0].js;
for (const file of files) {
chrome.tabs.executeScript(tabId, {
frameId,
file,
matchAboutBlank: true,
}, ignoreChromeError);
}
});
}
function onRuntimeMessage(msg, sender) {
if (msg.method !== 'invokeAPI') {
return;
}
const fn = window.API_METHODS[msg.name];
if (!fn) {
throw new Error(`unknown API: ${msg.name}`);
}
const res = fn.apply({msg, sender}, msg.args);
return res === undefined ? null : res;
}
function openEditor(params) {
/* Open the editor. Activate if it is already opened
params: {
id?: Number,
domain?: String,
'url-prefix'?: String
}
*/ */
openEditor(params) {
const u = new URL(chrome.runtime.getURL('edit.html')); const u = new URL(chrome.runtime.getURL('edit.html'));
u.search = new URLSearchParams(params); u.search = new URLSearchParams(params);
return openURL({ return openURL({
@ -307,9 +58,10 @@ function openEditor(params) {
prefs.get('openEditInWindow.popup') && {type: 'popup'}, prefs.get('openEditInWindow.popup') && {type: 'popup'},
prefs.get('windowPosition')), prefs.get('windowPosition')),
}); });
} },
async function openManage({options = false, search, searchMode} = {}) { /** @returns {Promise<chrome.tabs.Tab>} */
async openManage({options = false, search, searchMode} = {}) {
let url = chrome.runtime.getURL('manage.html'); let url = chrome.runtime.getURL('manage.html');
if (search) { if (search) {
url += `?search=${encodeURIComponent(search)}&searchMode=${searchMode}`; url += `?search=${encodeURIComponent(search)}&searchMode=${searchMode}`;
@ -334,4 +86,93 @@ async function openManage({options = false, search, searchMode} = {}) {
return isTabReplaceable(tab, url) return isTabReplaceable(tab, url)
? activateTab(tab, {url}) ? activateTab(tab, {url})
: browser.tabs.create({url}); : browser.tabs.create({url});
},
/**
* Same as openURL, the only extra prop in `opts` is `message` - it'll be sent
* when the tab is ready, which is needed in the popup, otherwise another
* extension could force the tab to open in foreground thus auto-closing the
* popup (in Chrome at least) and preventing the sendMessage code from running
* @returns {Promise<chrome.tabs.Tab>}
*/
async openURL(opts) {
const tab = await openURL(opts);
if (opts.message) {
await onTabReady(tab);
await msg.sendTab(tab.id, opts.message);
}
return tab;
function onTabReady(tab) {
return new Promise((resolve, reject) =>
setTimeout(function ping(numTries = 10, delay = 100) {
msg.sendTab(tab.id, {method: 'ping'})
.catch(() => false)
.then(pong => pong
? resolve(tab)
: numTries && setTimeout(ping, delay, numTries - 1, delay * 1.5) ||
reject('timeout'));
}));
}
},
});
//#endregion
//#region browserCommands
const browserCommands = {
openManage: () => API.openManage(),
openOptions: () => API.openManage({options: true}),
styleDisableAll(info) {
prefs.set('disableAll', info ? info.checked : !prefs.get('disableAll'));
},
reload: () => chrome.runtime.reload(),
};
if (chrome.commands) {
chrome.commands.onCommand.addListener(command => browserCommands[command]());
} }
if (FIREFOX && browser.commands && browser.commands.update) {
// register hotkeys in FF
const hotkeyPrefs = Object.keys(prefs.defaults).filter(k => k.startsWith('hotkey.'));
prefs.subscribe(hotkeyPrefs, (name, value) => {
try {
name = name.split('.')[1];
if (value.trim()) {
browser.commands.update({name, shortcut: value});
} else {
browser.commands.reset(name);
}
} catch (e) {}
});
}
//#endregion
//#region Init
msg.on((msg, sender) => {
if (msg.method === 'invokeAPI') {
const fn = msg.path.reduce((res, name) => res && res[name], API);
if (!fn) throw new Error(`Unknown API.${msg.path.join('.')}`);
const res = fn.apply({msg, sender}, msg.args);
return res === undefined ? null : res;
}
});
chrome.runtime.onInstalled.addListener(({reason, previousVersion}) => {
if (reason !== 'update') return;
if (semverCompare(previousVersion, '1.5.13') <= 0) {
// Removing unused stuff
// TODO: delete this entire block by the middle of 2021
try {
localStorage.clear();
} catch (e) {}
setTimeout(async () => {
const del = Object.keys(await chromeLocal.get())
.filter(key => key.startsWith('usoSearchCache'));
if (del.length) chromeLocal.remove(del);
}, 15e3);
}
});
msg.broadcast({method: 'backgroundReady'});
//#endregion

32
background/content-scripts.js
View File

@ -1,8 +1,18 @@
/* global msg ignoreChromeError URLS */ /* global
/* exported contentScripts */ FIREFOX
ignoreChromeError
msg
URLS
*/
'use strict'; 'use strict';
const contentScripts = (() => { /*
Reinject content scripts when the extension is reloaded/updated.
Firefox handles this automatically.
*/
// eslint-disable-next-line no-unused-expressions
!FIREFOX && (() => {
const NTP = 'chrome://newtab/'; const NTP = 'chrome://newtab/';
const ALL_URLS = '<all_urls>'; const ALL_URLS = '<all_urls>';
const SCRIPTS = chrome.runtime.getManifest().content_scripts; const SCRIPTS = chrome.runtime.getManifest().content_scripts;
@ -18,21 +28,7 @@ const contentScripts = (() => {
const busyTabs = new Set(); const busyTabs = new Set();
let busyTabsTimer; let busyTabsTimer;
// expose version on greasyfork/sleazyfork 1) info page and 2) code page setTimeout(injectToAllTabs);
const urlMatches = '/scripts/\\d+[^/]*(/code)?([?#].*)?$';
chrome.webNavigation.onCommitted.addListener(({tabId}) => {
chrome.tabs.executeScript(tabId, {
file: '/content/install-hook-greasyfork.js',
runAt: 'document_start',
});
}, {
url: [
{hostEquals: 'greasyfork.org', urlMatches},
{hostEquals: 'sleazyfork.org', urlMatches},
],
});
return {injectToTab, injectToAllTabs};
function injectToTab({url, tabId, frameId = null}) { function injectToTab({url, tabId, frameId = null}) {
for (const script of SCRIPTS) { for (const script of SCRIPTS) {

107
background/context-menus.js Normal file
View File

@ -0,0 +1,107 @@
/* global
browserCommands
CHROME
FIREFOX
ignoreChromeError
msg
prefs
URLS
*/
'use strict';
// eslint-disable-next-line no-unused-expressions
chrome.contextMenus && (() => {
const contextMenus = {
'show-badge': {
title: 'menuShowBadge',
click: info => prefs.set(info.menuItemId, info.checked),
},
'disableAll': {
title: 'disableAllStyles',
click: browserCommands.styleDisableAll,
},
'open-manager': {
title: 'openStylesManager',
click: browserCommands.openManage,
},
'open-options': {
title: 'openOptions',
click: browserCommands.openOptions,
},
'reload': {
presentIf: async () => (await browser.management.getSelf()).installType === 'development',
title: 'reload',
click: browserCommands.reload,
},
'editor.contextDelete': {
presentIf: () => !FIREFOX && prefs.get('editor.contextDelete'),
title: 'editDeleteText',
type: 'normal',
contexts: ['editable'],
documentUrlPatterns: [URLS.ownOrigin + 'edit*'],
click: (info, tab) => {
msg.sendTab(tab.id, {method: 'editDeleteText'}, undefined, 'extension')
.catch(msg.ignoreError);
},
},
};
// "Delete" item in context menu for browsers that don't have it
if (CHROME &&
// looking at the end of UA string
/(Vivaldi|Safari)\/[\d.]+$/.test(navigator.userAgent) &&
// skip forks with Flash as those are likely to have the menu e.g. CentBrowser
!Array.from(navigator.plugins).some(p => p.name === 'Shockwave Flash')) {
prefs.defaults['editor.contextDelete'] = true;
}
const keys = Object.keys(contextMenus);
prefs.subscribe(keys.filter(id => typeof prefs.defaults[id] === 'boolean'),
CHROME >= 62 && CHROME <= 64 ? toggleCheckmarkBugged : toggleCheckmark);
prefs.subscribe(keys.filter(id => contextMenus[id].presentIf && id in prefs.defaults),
togglePresence);
createContextMenus(keys);
chrome.contextMenus.onClicked.addListener((info, tab) =>
contextMenus[info.menuItemId].click(info, tab));
async function createContextMenus(ids) {
for (const id of ids) {
let item = contextMenus[id];
if (item.presentIf && !await item.presentIf()) {
continue;
}
item = Object.assign({id}, item);
delete item.presentIf;
item.title = chrome.i18n.getMessage(item.title);
if (!item.type && typeof prefs.defaults[id] === 'boolean') {
item.type = 'checkbox';
item.checked = prefs.get(id);
}
if (!item.contexts) {
item.contexts = ['browser_action'];
}
delete item.click;
chrome.contextMenus.create(item, ignoreChromeError);
}
}
function toggleCheckmark(id, checked) {
chrome.contextMenus.update(id, {checked}, ignoreChromeError);
}
/** Circumvents the bug with disabling check marks in Chrome 62-64 */
async function toggleCheckmarkBugged(id) {
await browser.contextMenus.remove(id).catch(ignoreChromeError);
createContextMenus([id]);
}
function togglePresence(id, checked) {
if (checked) {
createContextMenus([id]);
} else {
chrome.contextMenus.remove(id, ignoreChromeError);
}
}
})();

17
background/db-chrome-storage.js
View File

@ -35,20 +35,9 @@ function createChromeStorageDB() {
}), }),
}; };
return {exec}; return {
exec: (method, ...args) => METHODS[method](...args),
function exec(method, ...args) { };
if (METHODS[method]) {
return METHODS[method](...args)
.then(result => {
if (method === 'putMany' && result.map) {
return result.map(r => ({target: {result: r}}));
}
return {target: {result}};
});
}
return Promise.reject(new Error(`unknown DB method ${method}`));
}
function prepareInc() { function prepareInc() {
if (INC) return Promise.resolve(); if (INC) return Promise.resolve();

17
background/db.js
View File

@ -33,18 +33,17 @@ const db = (() => {
case false: break; case false: break;
default: await testDB(); default: await testDB();
} }
return useIndexedDB(); chromeLocal.setValue(FALLBACK, false);
return dbExecIndexedDB;
} }
async function testDB() { async function testDB() {
let e = await dbExecIndexedDB('getAllKeys', IDBKeyRange.lowerBound(1), 1); let e = await dbExecIndexedDB('getAllKeys', IDBKeyRange.lowerBound(1), 1);
// throws if result is null e = e[0]; // throws if result is null
e = e.target.result[0];
const id = `${performance.now()}.${Math.random()}.${Date.now()}`; const id = `${performance.now()}.${Math.random()}.${Date.now()}`;
await dbExecIndexedDB('put', {id}); await dbExecIndexedDB('put', {id});
e = await dbExecIndexedDB('get', id); e = await dbExecIndexedDB('get', id);
// throws if result or id is null await dbExecIndexedDB('delete', e.id); // throws if `e` or id is null
await dbExecIndexedDB('delete', e.target.result.id);
} }
function useChromeStorage(err) { function useChromeStorage(err) {
@ -56,11 +55,6 @@ const db = (() => {
return createChromeStorageDB().exec; return createChromeStorageDB().exec;
} }
function useIndexedDB() {
chromeLocal.setValue(FALLBACK, false);
return dbExecIndexedDB;
}
async function dbExecIndexedDB(method, ...args) { async function dbExecIndexedDB(method, ...args) {
const mode = method.startsWith('get') ? 'readonly' : 'readwrite'; const mode = method.startsWith('get') ? 'readonly' : 'readwrite';
const store = (await open()).transaction([STORE], mode).objectStore(STORE); const store = (await open()).transaction([STORE], mode).objectStore(STORE);
@ -70,8 +64,9 @@ const db = (() => {
function storeRequest(store, method, ...args) { function storeRequest(store, method, ...args) {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
/** @type {IDBRequest} */
const request = store[method](...args); const request = store[method](...args);
request.onsuccess = resolve; request.onsuccess = () => resolve(request.result);
request.onerror = reject; request.onerror = reject;
}); });
} }

6
background/icon-manager.js
View File

@ -1,4 +1,4 @@
/* global prefs debounce iconUtil FIREFOX CHROME VIVALDI tabManager navigatorUtil API_METHODS */ /* global prefs debounce iconUtil FIREFOX CHROME VIVALDI tabManager navigatorUtil API */
/* exported iconManager */ /* exported iconManager */
'use strict'; 'use strict';
@ -27,7 +27,7 @@ const iconManager = (() => {
refreshAllIcons(); refreshAllIcons();
}); });
Object.assign(API_METHODS, { Object.assign(API, {
/** @param {(number|string)[]} styleIds /** @param {(number|string)[]} styleIds
* @param {boolean} [lazyBadge=false] preventing flicker during page load */ * @param {boolean} [lazyBadge=false] preventing flicker during page load */
updateIconBadge(styleIds, {lazyBadge} = {}) { updateIconBadge(styleIds, {lazyBadge} = {}) {
@ -53,7 +53,7 @@ const iconManager = (() => {
function onPortDisconnected({sender}) { function onPortDisconnected({sender}) {
if (tabManager.get(sender.tab.id, 'styleIds')) { if (tabManager.get(sender.tab.id, 'styleIds')) {
API_METHODS.updateIconBadge.call({sender}, [], {lazyBadge: true}); API.updateIconBadge.call({sender}, [], {lazyBadge: true});
} }
} }

144
background/navigator-util.js
View File

@ -1,75 +1,103 @@
/* global CHROME URLS */ /* global
/* exported navigatorUtil */ CHROME
FIREFOX
ignoreChromeError
msg
URLS
*/
'use strict'; 'use strict';
const navigatorUtil = (() => { (() => {
const handler = { /** @type {Set<function(data: Object, type: string)>} */
urlChange: null, const listeners = new Set();
}; /** @type {NavigatorUtil} */
return extendNative({onUrlChange}); const navigatorUtil = window.navigatorUtil = new Proxy({
onUrlChange(fn) {
listeners.add(fn);
},
}, {
get(target, prop) {
return target[prop] ||
(target = chrome.webNavigation[prop]).addListener.bind(target);
},
});
function onUrlChange(fn) { navigatorUtil.onCommitted(onNavigation.bind('committed'));
initUrlChange(); navigatorUtil.onHistoryStateUpdated(onFakeNavigation.bind('history'));
handler.urlChange.push(fn); navigatorUtil.onReferenceFragmentUpdated(onFakeNavigation.bind('hash'));
navigatorUtil.onCommitted(runGreasyforkContentScript, {
// expose style version on greasyfork/sleazyfork 1) info page and 2) code page
url: ['greasyfork', 'sleazyfork'].map(host => ({
hostEquals: host + '.org',
urlMatches: '/scripts/\\d+[^/]*(/code)?([?#].*)?$',
})),
});
if (FIREFOX) {
navigatorUtil.onDOMContentLoaded(runMainContentScripts, {
url: [{
urlEquals: 'about:blank',
}],
});
} }
function initUrlChange() { /** @this {string} type */
if (handler.urlChange) { async function onNavigation(data) {
return; if (CHROME &&
} URLS.chromeProtectsNTP &&
handler.urlChange = []; data.url.startsWith('https://www.google.') &&
data.url.includes('/_/chrome/newtab?')) {
chrome.webNavigation.onCommitted.addListener(data => // Modern Chrome switched to WebUI NTP so this is obsolete, but there may be exceptions
fixNTPUrl(data) // TODO: investigate, and maybe use a separate listener for CHROME <= ver
.then(() => executeCallbacks(handler.urlChange, data, 'committed')) const tab = await browser.tabs.get(data.tabId);
.catch(console.error)
);
chrome.webNavigation.onHistoryStateUpdated.addListener(data =>
fixNTPUrl(data)
.then(() => executeCallbacks(handler.urlChange, data, 'historyStateUpdated'))
.catch(console.error)
);
chrome.webNavigation.onReferenceFragmentUpdated.addListener(data =>
fixNTPUrl(data)
.then(() => executeCallbacks(handler.urlChange, data, 'referenceFragmentUpdated'))
.catch(console.error)
);
}
function fixNTPUrl(data) {
if (
!CHROME ||
!URLS.chromeProtectsNTP ||
!data.url.startsWith('https://www.google.') ||
!data.url.includes('/_/chrome/newtab?')
) {
return Promise.resolve();
}
return browser.tabs.get(data.tabId)
.then(tab => {
const url = tab.pendingUrl || tab.url; const url = tab.pendingUrl || tab.url;
if (url === 'chrome://newtab/') { if (url === 'chrome://newtab/') {
data.url = url; data.url = url;
} }
}); }
listeners.forEach(fn => fn(data, this));
} }
function executeCallbacks(callbacks, data, type) { /** @this {string} type */
for (const cb of callbacks) { function onFakeNavigation(data) {
cb(data, type); onNavigation.call(this, data);
msg.sendTab(data.tabId, {method: 'urlChanged'}, {frameId: data.frameId})
.catch(msg.ignoreError);
}
/** FF misses some about:blank iframes so we inject our content script explicitly */
async function runMainContentScripts({tabId, frameId}) {
if (frameId &&
!await msg.sendTab(tabId, {method: 'ping'}, {frameId}).catch(ignoreChromeError)) {
for (const file of chrome.runtime.getManifest().content_scripts[0].js) {
chrome.tabs.executeScript(tabId, {
frameId,
file,
matchAboutBlank: true,
}, ignoreChromeError);
}
} }
} }
function extendNative(target) { function runGreasyforkContentScript({tabId}) {
return new Proxy(target, { chrome.tabs.executeScript(tabId, {
get: (target, prop) => { file: '/content/install-hook-greasyfork.js',
if (target[prop]) { runAt: 'document_start',
return target[prop];
}
return chrome.webNavigation[prop].addListener.bind(chrome.webNavigation[prop]);
},
}); });
} }
})(); })();
/**
* @typedef NavigatorUtil
* @property {NavigatorUtilEvent} onBeforeNavigate
* @property {NavigatorUtilEvent} onCommitted
* @property {NavigatorUtilEvent} onCompleted
* @property {NavigatorUtilEvent} onCreatedNavigationTarget
* @property {NavigatorUtilEvent} onDOMContentLoaded
* @property {NavigatorUtilEvent} onErrorOccurred
* @property {NavigatorUtilEvent} onHistoryStateUpdated
* @property {NavigatorUtilEvent} onReferenceFragmentUpdated
* @property {NavigatorUtilEvent} onTabReplaced
*/
/**
* @typedef {function(cb: function, filters: WebNavigationEventFilter?)} NavigatorUtilEvent
*/

5
background/openusercss-api.js
View File

@ -1,3 +1,4 @@
/* global API */
'use strict'; 'use strict';
(() => { (() => {
@ -40,7 +41,7 @@
.then(res => res.json()); .then(res => res.json());
}; };
window.API_METHODS = Object.assign(window.API_METHODS || {}, { API.openusercss = {
/** /**
* This function can be used to retrieve a theme object from the * This function can be used to retrieve a theme object from the
* GraphQL API, set above * GraphQL API, set above
@ -98,5 +99,5 @@
} }
} }
`), `),
}); };
})(); })();

9
background/search-db.js
View File

@ -1,8 +1,7 @@
/* global /* global
API_METHODS API
debounce debounce
stringAsRegExp stringAsRegExp
styleManager
tryRegExp tryRegExp
usercss usercss
*/ */
@ -50,16 +49,16 @@
* @param {number[]} [params.ids] - if not specified, all styles are searched * @param {number[]} [params.ids] - if not specified, all styles are searched
* @returns {number[]} - array of matched styles ids * @returns {number[]} - array of matched styles ids
*/ */
API_METHODS.searchDB = async ({query, mode = 'all', ids}) => { API.searchDB = async ({query, mode = 'all', ids}) => {
let res = []; let res = [];
if (mode === 'url' && query) { if (mode === 'url' && query) {
res = (await styleManager.getStylesByUrl(query)).map(r => r.data.id); res = (await API.styles.getByUrl(query)).map(r => r.style.id);
} else if (mode in MODES) { } else if (mode in MODES) {
const modeHandler = MODES[mode]; const modeHandler = MODES[mode];
const m = /^\/(.+?)\/([gimsuy]*)$/.exec(query); const m = /^\/(.+?)\/([gimsuy]*)$/.exec(query);
const rx = m && tryRegExp(m[1], m[2]); const rx = m && tryRegExp(m[1], m[2]);
const test = rx ? rx.test.bind(rx) : makeTester(query); const test = rx ? rx.test.bind(rx) : makeTester(query);
res = (await styleManager.getAllStyles()) res = (await API.styles.getAll())
.filter(style => .filter(style =>
(!ids || ids.includes(style.id)) && (!ids || ids.includes(style.id)) &&
(!query || modeHandler(style, test))) (!query || modeHandler(style, test)))

809
background/style-manager.js
View File

@ -1,7 +1,16 @@
/* eslint no-eq-null: 0, eqeqeq: [2, "smart"] */ /* global
/* global createCache db calcStyleDigest db tryRegExp styleCodeEmpty styleSectionGlobal API
getStyleWithNoCode msg prefs sync URLS */ calcStyleDigest
/* exported styleManager */ createCache
db
msg
prefs
stringAsRegExp
styleCodeEmpty
styleSectionGlobal
tryRegExp
URLS
*/
'use strict'; 'use strict';
/* /*
@ -13,41 +22,34 @@ The live preview feature relies on `runtime.connect` and `port.onDisconnect`
to cleanup the temporary code. See /edit/live-preview.js. to cleanup the temporary code. See /edit/live-preview.js.
*/ */
/** @type {styleManager} */ /* exported styleManager */
const styleManager = (() => { const styleManager = API.styles = (() => {
const preparing = prepare();
/* styleId => { //#region Declarations
data: styleData, const ready = init();
preview: styleData, /**
appliesTo: Set<url> * @typedef StyleMapData
} */ * @property {StyleObj} style
const styles = new Map(); * @property {?StyleObj} [preview]
* @property {Set<string>} appliesTo - urls
*/
/** @type {Map<number,StyleMapData>} */
const dataMap = new Map();
const uuidIndex = new Map(); const uuidIndex = new Map();
/** @typedef {Object<styleId,{id: number, code: string[]}>} StyleSectionsToApply */
/* url => { /** @type {Map<string,{maybeMatch: Set<styleId>, sections: StyleSectionsToApply}>} */
maybeMatch: Set<styleId>,
sections: Object<styleId => {
id: styleId,
code: Array<String>
}>
} */
const cachedStyleForUrl = createCache({ const cachedStyleForUrl = createCache({
onDeleted: (url, cache) => { onDeleted: (url, cache) => {
for (const section of Object.values(cache.sections)) { for (const section of Object.values(cache.sections)) {
const style = styles.get(section.id); const data = id2data(section.id);
if (style) { if (data) data.appliesTo.delete(url);
style.appliesTo.delete(url);
}
} }
}, },
}); });
const BAD_MATCHER = {test: () => false}; const BAD_MATCHER = {test: () => false};
const compileRe = createCompiler(text => `^(${text})$`); const compileRe = createCompiler(text => `^(${text})$`);
const compileSloppyRe = createCompiler(text => `^${text}$`); const compileSloppyRe = createCompiler(text => `^${text}$`);
const compileExclusion = createCompiler(buildExclusion); const compileExclusion = createCompiler(buildExclusion);
const DUMMY_URL = { const DUMMY_URL = {
hash: '', hash: '',
host: '', host: '',
@ -62,287 +64,256 @@ const styleManager = (() => {
searchParams: new URLSearchParams(), searchParams: new URLSearchParams(),
username: '', username: '',
}; };
const MISSING_PROPS = {
name: style => `ID: ${style.id}`,
_id: () => uuidv4(),
_rev: () => Date.now(),
};
const DELETE_IF_NULL = ['id', 'customName']; const DELETE_IF_NULL = ['id', 'customName'];
//#endregion
handleLivePreviewConnections(); chrome.runtime.onConnect.addListener(handleLivePreview);
//#region Public surface
// Sorted alphabetically
return {
return Object.assign(/** @namespace styleManager */{
compareRevision, compareRevision,
}, ensurePrepared(/** @namespace styleManager */{
get, /** @returns {Promise<number>} style id */
getByUUID, async delete(id, reason) {
getSectionsByUrl, await ready;
putByUUID, const data = id2data(id);
installStyle, await db.exec('delete', id);
deleteStyle, if (reason !== 'sync') {
deleteByUUID, API.sync.delete(data.style._id, Date.now());
editSave, }
findStyle, for (const url of data.appliesTo) {
importStyle, const cache = cachedStyleForUrl.get(url);
importMany, if (cache) delete cache.sections[id];
toggleStyle, }
getAllStyles, // used by import-export dataMap.delete(id);
getStylesByUrl, // used by popup uuidIndex.delete(data.style._id);
styleExists, await msg.broadcast({
addExclusion, method: 'styleDeleted',
removeExclusion, style: {id},
addInclusion, });
removeInclusion, return id;
},
/** @returns {Promise<number>} style id */
async deleteByUUID(_id, rev) {
await ready;
const id = uuidIndex.get(_id);
const oldDoc = id && id2style(id);
if (oldDoc && compareRevision(oldDoc._rev, rev) <= 0) {
// FIXME: does it make sense to set reason to 'sync' in deleteByUUID?
return API.styles.delete(id, 'sync');
}
},
/** @returns {Promise<StyleObj>} */
async editSave(style) {
await ready;
style = mergeWithMapped(style);
style.updateDate = Date.now();
return handleSave(await saveStyle(style), 'editSave');
},
/** @returns {Promise<?StyleObj>} */
async find(filter) {
await ready;
const filterEntries = Object.entries(filter);
for (const {style} of dataMap.values()) {
if (filterEntries.every(([key, val]) => style[key] === val)) {
return style;
}
}
return null;
},
/** @returns {Promise<StyleObj[]>} */
async getAll() {
await ready;
return Array.from(dataMap.values(), data2style);
},
/** @returns {Promise<StyleObj>} */
async getByUUID(uuid) {
await ready;
return id2style(uuidIndex.get(uuid));
},
/** @returns {Promise<StyleSectionsToApply>} */
async getSectionsByUrl(url, id, isInitialApply) {
await ready;
let cache = cachedStyleForUrl.get(url);
if (!cache) {
cache = {
sections: {},
maybeMatch: new Set(),
};
buildCache(cache, url, dataMap.values());
cachedStyleForUrl.set(url, cache);
} else if (cache.maybeMatch.size) {
buildCache(cache, url, Array.from(cache.maybeMatch, id2data).filter(Boolean));
}
const res = id
? cache.sections[id] ? {[id]: cache.sections[id]} : {}
: cache.sections;
// Avoiding flicker of needlessly applied styles by providing both styles & pref in one API call
return isInitialApply && prefs.get('disableAll')
? Object.assign({disableAll: true}, res)
: res;
},
/** @returns {Promise<StyleObj>} */
async get(id) {
await ready;
return id2style(id);
},
/** @returns {Promise<StylesByUrlResult[]>} */
async getByUrl(url, id = null) {
await ready;
// FIXME: do we want to cache this? Who would like to open popup rapidly
// or search the DB with the same URL?
const result = [];
const styles = id
? [id2style(id)].filter(Boolean)
: Array.from(dataMap.values(), data2style);
const query = createMatchQuery(url);
for (const style of styles) {
let excluded = false;
let sloppy = false;
let sectionMatched = false;
const match = urlMatchStyle(query, style);
// TODO: enable this when the function starts returning false
// if (match === false) {
// continue;
// }
if (match === 'excluded') {
excluded = true;
}
for (const section of style.sections) {
if (styleSectionGlobal(section) && styleCodeEmpty(section.code)) {
continue;
}
const match = urlMatchSection(query, section);
if (match) {
if (match === 'sloppy') {
sloppy = true;
}
sectionMatched = true;
break;
}
}
if (sectionMatched) {
result.push(/** @namespace StylesByUrlResult */{style, excluded, sloppy});
}
}
return result;
},
/** @returns {Promise<StyleObj[]>} */
async importMany(items) {
await ready;
items.forEach(beforeSave);
const events = await db.exec('putMany', items);
return Promise.all(items.map((item, i) => {
afterSave(item, events[i]);
return handleSave(item, 'import');
})); }));
},
function handleLivePreviewConnections() { /** @returns {Promise<StyleObj>} */
chrome.runtime.onConnect.addListener(port => { async import(data) {
if (port.name !== 'livePreview') { await ready;
return; return handleSave(await saveStyle(data), 'import');
} },
let id;
port.onMessage.addListener(data => {
if (!id) {
id = data.id;
}
const style = styles.get(id);
style.preview = data;
broadcastStyleUpdated(style.preview, 'editPreview');
});
port.onDisconnect.addListener(() => {
port = null;
if (id) {
const style = styles.get(id);
if (!style) {
// maybe deleted
return;
}
style.preview = null;
broadcastStyleUpdated(style.data, 'editPreviewEnd');
}
});
});
}
function escapeRegExp(text) { /** @returns {Promise<StyleObj>} */
// https://github.com/lodash/lodash/blob/0843bd46ef805dd03c0c8d804630804f3ba0ca3c/lodash.js#L152 async install(style, reason = null) {
return text.replace(/[\\^$.*+?()[\]{}|]/g, '\\$&'); await ready;
} reason = reason || dataMap.has(style.id) ? 'update' : 'install';
style = mergeWithMapped(style);
const url = !style.url && style.updateUrl && (
URLS.extractUsoArchiveInstallUrl(style.updateUrl) ||
URLS.extractGreasyForkInstallUrl(style.updateUrl)
);
if (url) style.url = style.installationUrl = url;
style.originalDigest = await calcStyleDigest(style);
// FIXME: update updateDate? what about usercss config?
return handleSave(await saveStyle(style), reason);
},
function get(id, noCode = false) { /** @returns {Promise<?StyleObj>} */
const data = styles.get(id).data; async putByUUID(doc) {
return noCode ? getStyleWithNoCode(data) : data; await ready;
}
function getByUUID(uuid) {
const id = uuidIndex.get(uuid);
if (id) {
return get(id);
}
}
function getAllStyles() {
return [...styles.values()].map(s => s.data);
}
function compareRevision(rev1, rev2) {
return rev1 - rev2;
}
function putByUUID(doc) {
const id = uuidIndex.get(doc._id); const id = uuidIndex.get(doc._id);
if (id) { if (id) {
doc.id = id; doc.id = id;
} else { } else {
delete doc.id; delete doc.id;
} }
const oldDoc = id && styles.has(id) && styles.get(id).data; const oldDoc = id && id2style(id);
let diff = -1; let diff = -1;
if (oldDoc) { if (oldDoc) {
diff = compareRevision(oldDoc._rev, doc._rev); diff = compareRevision(oldDoc._rev, doc._rev);
if (diff > 0) { if (diff > 0) {
sync.put(oldDoc._id, oldDoc._rev); API.sync.put(oldDoc._id, oldDoc._rev);
return; return;
} }
} }
if (diff < 0) { if (diff < 0) {
return db.exec('put', doc) doc.id = await db.exec('put', doc);
.then(event => {
doc.id = event.target.result;
uuidIndex.set(doc._id, doc.id); uuidIndex.set(doc._id, doc.id);
return handleSave(doc, 'sync'); return handleSave(doc, 'sync');
});
} }
},
/** @returns {Promise<number>} style id */
async toggle(id, enabled) {
await ready;
const style = Object.assign({}, id2style(id), {enabled});
handleSave(await saveStyle(style), 'toggle', false);
return id;
},
// using bind() to skip step-into when debugging
/** @returns {Promise<StyleObj>} */
addExclusion: addIncludeExclude.bind(null, 'exclusions'),
/** @returns {Promise<StyleObj>} */
addInclusion: addIncludeExclude.bind(null, 'inclusions'),
/** @returns {Promise<?StyleObj>} */
removeExclusion: removeIncludeExclude.bind(null, 'exclusions'),
/** @returns {Promise<?StyleObj>} */
removeInclusion: removeIncludeExclude.bind(null, 'inclusions'),
};
//#endregion
//#region Implementation
/** @returns {StyleMapData} */
function id2data(id) {
return dataMap.get(id);
} }
function toggleStyle(id, enabled) { /** @returns {?StyleObj} */
const style = styles.get(id); function id2style(id) {
const data = Object.assign({}, style.data, {enabled}); return (dataMap.get(id) || {}).style;
return saveStyle(data)
.then(newData => handleSave(newData, 'toggle', false))
.then(() => id);
} }
// used by install-hook-userstyles.js /** @returns {?StyleObj} */
function findStyle(filter, noCode = false) { function data2style(data) {
for (const style of styles.values()) { return data && data.style;
if (filterMatch(filter, style.data)) {
return noCode ? getStyleWithNoCode(style.data) : style.data;
}
}
return null;
}
function styleExists(filter) {
return [...styles.values()].some(s => filterMatch(filter, s.data));
}
function filterMatch(filter, target) {
for (const key of Object.keys(filter)) {
if (filter[key] !== target[key]) {
return false;
}
}
return true;
}
function importStyle(data) {
// FIXME: is it a good idea to save the data directly?
return saveStyle(data)
.then(newData => handleSave(newData, 'import'));
}
function importMany(items) {
items.forEach(beforeSave);
return db.exec('putMany', items)
.then(events => {
for (let i = 0; i < items.length; i++) {
afterSave(items[i], events[i].target.result);
}
return Promise.all(items.map(i => handleSave(i, 'import')));
});
}
function installStyle(data, reason = null) {
const style = styles.get(data.id);
if (!style) {
data = Object.assign(createNewStyle(), data);
} else {
data = Object.assign({}, style.data, data);
}
if (!reason) {
reason = style ? 'update' : 'install';
}
let url = !data.url && data.updateUrl;
if (url) {
const usoId = URLS.extractUsoArchiveId(url);
url = usoId && `${URLS.usoArchive}?style=${usoId}` ||
URLS.extractGreasyForkId(url) && url.match(/^.*?\/\d+/)[0];
if (url) data.url = data.installationUrl = url;
}
// FIXME: update updateDate? what about usercss config?
return calcStyleDigest(data)
.then(digest => {
data.originalDigest = digest;
return saveStyle(data);
})
.then(newData => handleSave(newData, reason));
}
function editSave(data) {
const style = styles.get(data.id);
if (style) {
data = Object.assign({}, style.data, data);
} else {
data = Object.assign(createNewStyle(), data);
}
data.updateDate = Date.now();
return saveStyle(data)
.then(newData => handleSave(newData, 'editSave'));
}
function addIncludeExclude(id, rule, type) {
const data = Object.assign({}, styles.get(id).data);
if (!data[type]) {
data[type] = [];
}
if (data[type].includes(rule)) {
throw new Error('The rule already exists');
}
data[type] = data[type].concat([rule]);
return saveStyle(data)
.then(newData => handleSave(newData, 'styleSettings'));
}
function removeIncludeExclude(id, rule, type) {
const data = Object.assign({}, styles.get(id).data);
if (!data[type]) {
return;
}
if (!data[type].includes(rule)) {
return;
}
data[type] = data[type].filter(r => r !== rule);
return saveStyle(data)
.then(newData => handleSave(newData, 'styleSettings'));
}
function addExclusion(id, rule) {
return addIncludeExclude(id, rule, 'exclusions');
}
function removeExclusion(id, rule) {
return removeIncludeExclude(id, rule, 'exclusions');
}
function addInclusion(id, rule) {
return addIncludeExclude(id, rule, 'inclusions');
}
function removeInclusion(id, rule) {
return removeIncludeExclude(id, rule, 'inclusions');
}
function deleteStyle(id, reason) {
const style = styles.get(id);
const rev = Date.now();
return db.exec('delete', id)
.then(() => {
if (reason !== 'sync') {
sync.delete(style.data._id, rev);
}
for (const url of style.appliesTo) {
const cache = cachedStyleForUrl.get(url);
if (cache) {
delete cache.sections[id];
}
}
styles.delete(id);
uuidIndex.delete(style.data._id);
return msg.broadcast({
method: 'styleDeleted',
style: {id},
});
})
.then(() => id);
}
function deleteByUUID(_id, rev) {
const id = uuidIndex.get(_id);
const oldDoc = id && styles.has(id) && styles.get(id).data;
if (oldDoc && compareRevision(oldDoc._rev, rev) <= 0) {
// FIXME: does it make sense to set reason to 'sync' in deleteByUUID?
return deleteStyle(id, 'sync');
}
}
function ensurePrepared(methods) {
const prepared = {};
for (const [name, fn] of Object.entries(methods)) {
prepared[name] = (...args) =>
preparing.then(() => fn(...args));
}
return prepared;
} }
/** @returns {StyleObj} */
function createNewStyle() { function createNewStyle() {
return { return /** @namespace StyleObj */{
enabled: true, enabled: true,
updateUrl: null, updateUrl: null,
md5Url: null, md5Url: null,
@ -352,43 +323,105 @@ const styleManager = (() => {
}; };
} }
function broadcastStyleUpdated(data, reason, method = 'styleUpdated', codeIsUpdated = true) { /** @returns {void} */
const style = styles.get(data.id); function storeInMap(style) {
dataMap.set(style.id, {
style,
appliesTo: new Set(),
});
}
/** @returns {StyleObj} */
function mergeWithMapped(style) {
return Object.assign({},
id2style(style.id) || createNewStyle(),
style);
}
function handleLivePreview(port) {
if (port.name !== 'livePreview') {
return;
}
let id;
port.onMessage.addListener(style => {
if (!id) id = style.id;
const data = id2data(id);
data.preview = style;
broadcastStyleUpdated(style, 'editPreview');
});
port.onDisconnect.addListener(() => {
port = null;
if (id) {
const data = id2data(id);
if (data) {
data.preview = null;
broadcastStyleUpdated(data.style, 'editPreviewEnd');
}
}
});
}
function compareRevision(rev1, rev2) {
return rev1 - rev2;
}
async function addIncludeExclude(type, id, rule) {
await ready;
const style = Object.assign({}, id2style(id));
const list = style[type] || (style[type] = []);
if (list.includes(rule)) {
throw new Error('The rule already exists');
}
style[type] = list.concat([rule]);
return handleSave(await saveStyle(style), 'styleSettings');
}
async function removeIncludeExclude(type, id, rule) {
await ready;
const style = Object.assign({}, id2style(id));
const list = style[type];
if (!list || !list.includes(rule)) {
return;
}
style[type] = list.filter(r => r !== rule);
return handleSave(await saveStyle(style), 'styleSettings');
}
function broadcastStyleUpdated(style, reason, method = 'styleUpdated', codeIsUpdated = true) {
const {id} = style;
const data = id2data(id);
const excluded = new Set(); const excluded = new Set();
const updated = new Set(); const updated = new Set();
for (const [url, cache] of cachedStyleForUrl.entries()) { for (const [url, cache] of cachedStyleForUrl.entries()) {
if (!style.appliesTo.has(url)) { if (!data.appliesTo.has(url)) {
cache.maybeMatch.add(data.id); cache.maybeMatch.add(id);
continue; continue;
} }
const code = getAppliedCode(createMatchQuery(url), data); const code = getAppliedCode(createMatchQuery(url), style);
if (!code) { if (code) {
excluded.add(url);
delete cache.sections[data.id];
} else {
updated.add(url); updated.add(url);
cache.sections[data.id] = { cache.sections[id] = {id, code};
id: data.id, } else {
code, excluded.add(url);
}; delete cache.sections[id];
} }
} }
style.appliesTo = updated; data.appliesTo = updated;
return msg.broadcast({ return msg.broadcast({
method, method,
style: {
id: data.id,
md5Url: data.md5Url,
enabled: data.enabled,
},
reason, reason,
codeIsUpdated, codeIsUpdated,
style: {
id,
md5Url: style.md5Url,
enabled: style.enabled,
},
}); });
} }
function beforeSave(style) { function beforeSave(style) {
if (!style.name) { if (!style.name) {
throw new Error('style name is empty'); throw new Error('Style name is empty');
} }
for (const key of DELETE_IF_NULL) { for (const key of DELETE_IF_NULL) {
if (style[key] == null) { if (style[key] == null) {
@ -407,114 +440,29 @@ const styleManager = (() => {
style.id = newId; style.id = newId;
} }
uuidIndex.set(style._id, style.id); uuidIndex.set(style._id, style.id);
sync.put(style._id, style._rev); API.sync.put(style._id, style._rev);
} }
function saveStyle(style) { async function saveStyle(style) {
beforeSave(style); beforeSave(style);
return db.exec('put', style) const newId = await db.exec('put', style);
.then(event => { afterSave(style, newId);
afterSave(style, event.target.result);
return style; return style;
});
} }
function handleSave(data, reason, codeIsUpdated) { function handleSave(style, reason, codeIsUpdated) {
const style = styles.get(data.id); const data = id2data(style.id);
let method; const method = data ? 'styleUpdated' : 'styleAdded';
if (!style) { if (!data) {
styles.set(data.id, { storeInMap(style);
appliesTo: new Set(),
data,
});
method = 'styleAdded';
} else { } else {
style.data = data; data.style = style;
method = 'styleUpdated';
} }
broadcastStyleUpdated(data, reason, method, codeIsUpdated); broadcastStyleUpdated(style, reason, method, codeIsUpdated);
return data; return style;
} }
// get styles matching a URL, including sloppy regexps and excluded items. // get styles matching a URL, including sloppy regexps and excluded items.
function getStylesByUrl(url, id = null) {
// FIXME: do we want to cache this? Who would like to open popup rapidly
// or search the DB with the same URL?
const result = [];
const datas = !id ? [...styles.values()].map(s => s.data) :
styles.has(id) ? [styles.get(id).data] : [];
const query = createMatchQuery(url);
for (const data of datas) {
let excluded = false;
let sloppy = false;
let sectionMatched = false;
const match = urlMatchStyle(query, data);
// TODO: enable this when the function starts returning false
// if (match === false) {
// continue;
// }
if (match === 'excluded') {
excluded = true;
}
for (const section of data.sections) {
if (styleSectionGlobal(section) && styleCodeEmpty(section.code)) {
continue;
}
const match = urlMatchSection(query, section);
if (match) {
if (match === 'sloppy') {
sloppy = true;
}
sectionMatched = true;
break;
}
}
if (sectionMatched) {
result.push({data, excluded, sloppy});
}
}
return result;
}
function getSectionsByUrl(url, id, isInitialApply) {
let cache = cachedStyleForUrl.get(url);
if (!cache) {
cache = {
sections: {},
maybeMatch: new Set(),
};
buildCache(styles.values());
cachedStyleForUrl.set(url, cache);
} else if (cache.maybeMatch.size) {
buildCache(
[...cache.maybeMatch]
.filter(i => styles.has(i))
.map(i => styles.get(i))
);
}
const res = id
? cache.sections[id] ? {[id]: cache.sections[id]} : {}
: cache.sections;
// Avoiding flicker of needlessly applied styles by providing both styles & pref in one API call
return isInitialApply && prefs.get('disableAll')
? Object.assign({disableAll: true}, res)
: res;
function buildCache(styleList) {
const query = createMatchQuery(url);
for (const {appliesTo, data, preview} of styleList) {
const code = getAppliedCode(query, preview || data);
if (code) {
cache.sections[data.id] = {
id: data.id,
code,
};
appliesTo.add(url);
}
}
}
}
function getAppliedCode(query, data) { function getAppliedCode(query, data) {
if (urlMatchStyle(query, data) !== true) { if (urlMatchStyle(query, data) !== true) {
return; return;
@ -528,60 +476,45 @@ const styleManager = (() => {
return code.length && code; return code.length && code;
} }
function prepare() { async function init() {
const ADD_MISSING_PROPS = { const styles = await db.exec('getAll') || [];
name: style => `ID: ${style.id}`, const updated = styles.filter(style =>
_id: () => uuidv4(), addMissingProps(style) +
_rev: () => Date.now(), addCustomName(style));
};
return db.exec('getAll')
.then(event => event.target.result || [])
.then(styleList => {
// setup missing _id, _rev
const updated = [];
for (const style of styleList) {
if (addMissingProperties(style)) {
updated.push(style);
}
}
if (updated.length) { if (updated.length) {
return db.exec('putMany', updated) await db.exec('putMany', updated);
.then(() => styleList);
} }
return styleList; for (const style of styles) {
})
.then(styleList => {
for (const style of styleList) {
fixUsoMd5Issue(style); fixUsoMd5Issue(style);
styles.set(style.id, { storeInMap(style);
appliesTo: new Set(),
data: style,
});
uuidIndex.set(style._id, style.id); uuidIndex.set(style._id, style.id);
} }
}); }
function addMissingProperties(style) { function addMissingProps(style) {
let touched = false; let res = 0;
for (const key in ADD_MISSING_PROPS) { for (const key in MISSING_PROPS) {
if (!style[key]) { if (!style[key]) {
style[key] = ADD_MISSING_PROPS[key](style); style[key] = MISSING_PROPS[key](style);
touched = true; res = 1;
} }
} }
// upgrade the old way of customizing local names return res;
}
/** Upgrades the old way of customizing local names */
function addCustomName(style) {
let res = 0;
const {originalName} = style; const {originalName} = style;
if (originalName) { if (originalName) {
touched = true; res = 1;
if (originalName !== style.name) { if (originalName !== style.name) {
style.customName = style.name; style.customName = style.name;
style.name = originalName; style.name = originalName;
} }
delete style.originalName; delete style.originalName;
} }
return touched; return res;
}
} }
function urlMatchStyle(query, style) { function urlMatchStyle(query, style) {
@ -652,7 +585,8 @@ const styleManager = (() => {
} }
function compileGlob(text) { function compileGlob(text) {
return escapeRegExp(text).replace(/\\\\\\\*|\\\*/g, m => m.length > 2 ? m : '.*'); return stringAsRegExp(text, '', true)
.replace(/\\\\\\\*|\\\*/g, m => m.length > 2 ? m : '.*');
} }
function buildExclusion(text) { function buildExclusion(text) {
@ -706,6 +640,18 @@ const styleManager = (() => {
}; };
} }
function buildCache(cache, url, styleList) {
const query = createMatchQuery(url);
for (const {style, appliesTo, preview} of styleList) {
const code = getAppliedCode(query, preview || style);
if (code) {
const id = style.id;
cache.sections[id] = {id, code};
appliesTo.add(url);
}
}
}
function createURL(url) { function createURL(url) {
try { try {
return new URL(url); return new URL(url);
@ -726,4 +672,5 @@ const styleManager = (() => {
function hex4dashed(num, i) { function hex4dashed(num, i) {
return (num + 0x10000).toString(16).slice(-4) + (i >= 1 && i <= 4 ? '-' : ''); return (num + 0x10000).toString(16).slice(-4) + (i >= 1 && i <= 4 ? '-' : '');
} }
//#endregion
})(); })();

8
background/style-via-api.js
View File

@ -1,7 +1,7 @@
/* global API_METHODS styleManager CHROME prefs */ /* global API CHROME prefs */
'use strict'; 'use strict';
API_METHODS.styleViaAPI = !CHROME && (() => { API.styleViaAPI = !CHROME && (() => {
const ACTIONS = { const ACTIONS = {
styleApply, styleApply,
styleDeleted, styleDeleted,
@ -37,7 +37,7 @@ API_METHODS.styleViaAPI = !CHROME && (() => {
throw new Error('we do not count styles for frames'); throw new Error('we do not count styles for frames');
} }
const {frameStyles} = getCachedData(tab.id, frameId); const {frameStyles} = getCachedData(tab.id, frameId);
API_METHODS.updateIconBadge.call({sender}, Object.keys(frameStyles)); API.updateIconBadge.call({sender}, Object.keys(frameStyles));
} }
function styleApply({id = null, ignoreUrlCheck = false}, {tab, frameId, url}) { function styleApply({id = null, ignoreUrlCheck = false}, {tab, frameId, url}) {
@ -48,7 +48,7 @@ API_METHODS.styleViaAPI = !CHROME && (() => {
if (id === null && !ignoreUrlCheck && frameStyles.url === url) { if (id === null && !ignoreUrlCheck && frameStyles.url === url) {
return NOP; return NOP;
} }
return styleManager.getSectionsByUrl(url, id).then(sections => { return API.styles.getSectionsByUrl(url, id).then(sections => {
const tasks = []; const tasks = [];
for (const section of Object.values(sections)) { for (const section of Object.values(sections)) {
const styleId = section.id; const styleId = section.id;

14
background/style-via-webrequest.js
View File

@ -1,4 +1,8 @@
/* global API CHROME prefs */ /* global
API
CHROME
prefs
*/
'use strict'; 'use strict';
// eslint-disable-next-line no-unused-expressions // eslint-disable-next-line no-unused-expressions
@ -67,14 +71,14 @@ CHROME && (async () => {
} }
/** @param {chrome.webRequest.WebRequestBodyDetails} req */ /** @param {chrome.webRequest.WebRequestBodyDetails} req */
function prepareStyles(req) { async function prepareStyles(req) {
API.getSectionsByUrl(req.url).then(sections => { const sections = await API.styles.getSectionsByUrl(req.url);
if (Object.keys(sections).length) { if (Object.keys(sections).length) {
stylesToPass[req.requestId] = !enabled.xhr ? true : stylesToPass[req.requestId] = !enabled.xhr ? true :
URL.createObjectURL(new Blob([JSON.stringify(sections)])).slice(blobUrlPrefix.length); URL.createObjectURL(new Blob([JSON.stringify(sections)]))
.slice(blobUrlPrefix.length);
setTimeout(cleanUp, 600e3, req.requestId); setTimeout(cleanUp, 600e3, req.requestId);
} }
});
} }
/** @param {chrome.webRequest.WebResponseHeadersDetails} req */ /** @param {chrome.webRequest.WebResponseHeadersDetails} req */

297
background/sync.js
View File

@ -1,13 +1,23 @@
/* global dbToCloud styleManager chromeLocal prefs tokenManager msg */ /* global
API
chromeLocal
dbToCloud
msg
prefs
styleManager
tokenManager
*/
/* exported sync */ /* exported sync */
'use strict'; 'use strict';
const sync = (() => { const sync = API.sync = (() => {
const SYNC_DELAY = 1; // minutes const SYNC_DELAY = 1; // minutes
const SYNC_INTERVAL = 30; // minutes const SYNC_INTERVAL = 30; // minutes
/** @typedef API.sync.Status */
const status = { const status = {
/** @type {'connected'|'connecting'|'disconnected'|'disconnecting'} */
state: 'disconnected', state: 'disconnected',
syncing: false, syncing: false,
progress: null, progress: null,
@ -18,21 +28,30 @@ const sync = (() => {
let currentDrive; let currentDrive;
const ctrl = dbToCloud.dbToCloud({ const ctrl = dbToCloud.dbToCloud({
onGet(id) { onGet(id) {
return styleManager.getByUUID(id); return API.styles.getByUUID(id);
}, },
onPut(doc) { onPut(doc) {
return styleManager.putByUUID(doc); return API.styles.putByUUID(doc);
}, },
onDelete(id, rev) { onDelete(id, rev) {
return styleManager.deleteByUUID(id, rev); return API.styles.deleteByUUID(id, rev);
}, },
onFirstSync() { async onFirstSync() {
return styleManager.getAllStyles() for (const i of await API.styles.getAll()) {
.then(styles => { ctrl.put(i._id, i._rev);
styles.forEach(i => ctrl.put(i._id, i._rev)); }
}); },
onProgress(e) {
if (e.phase === 'start') {
status.syncing = true;
} else if (e.phase === 'end') {
status.syncing = false;
status.progress = null;
} else {
status.progress = e;
}
emitStatusChange();
}, },
onProgress,
compareRevision(a, b) { compareRevision(a, b) {
return styleManager.compareRevision(a, b); return styleManager.compareRevision(a, b);
}, },
@ -46,55 +65,126 @@ const sync = (() => {
}, },
}); });
const initializing = prefs.initializing.then(() => { const ready = prefs.initializing.then(() => {
prefs.subscribe(['sync.enabled'], onPrefChange); prefs.subscribe('sync.enabled',
onPrefChange(null, prefs.get('sync.enabled')); (_, val) => val === 'none'
? sync.stop()
: sync.start(val, true),
{now: true});
}); });
chrome.alarms.onAlarm.addListener(info => { chrome.alarms.onAlarm.addListener(info => {
if (info.name === 'syncNow') { if (info.name === 'syncNow') {
syncNow().catch(console.error); sync.syncNow();
} }
}); });
return Object.assign({ // Sorted alphabetically
getStatus: () => status, return {
}, ensurePrepared({
start, async delete(...args) {
stop, await ready;
put: (...args) => {
if (!currentDrive) return;
schedule();
return ctrl.put(...args);
},
delete: (...args) => {
if (!currentDrive) return; if (!currentDrive) return;
schedule(); schedule();
return ctrl.delete(...args); return ctrl.delete(...args);
}, },
syncNow,
login,
}));
function ensurePrepared(obj) { /**
return Object.entries(obj).reduce((o, [key, fn]) => { * @returns {Promise<API.sync.Status>}
o[key] = (...args) => */
initializing.then(() => fn(...args)); async getStatus() {
return o; return status;
}, {}); },
async login(name = prefs.get('sync.enabled')) {
await ready;
try {
await tokenManager.getToken(name, true);
} catch (err) {
if (/Authorization page could not be loaded/i.test(err.message)) {
// FIXME: Chrome always fails at the first login so we try again
await tokenManager.getToken(name);
} }
throw err;
}
status.login = true;
emitStatusChange();
},
function onProgress(e) { async put(...args) {
if (e.phase === 'start') { await ready;
status.syncing = true; if (!currentDrive) return;
} else if (e.phase === 'end') { schedule();
status.syncing = false; return ctrl.put(...args);
status.progress = null; },
} else {
status.progress = e; async start(name, fromPref = false) {
await ready;
if (currentDrive) {
return;
}
currentDrive = getDrive(name);
ctrl.use(currentDrive);
status.state = 'connecting';
status.currentDriveName = currentDrive.name;
status.login = true;
emitStatusChange();
try {
if (!fromPref) {
await sync.login(name).catch(handle401Error);
}
await sync.syncNow();
status.errorMessage = null;
} catch (err) {
status.errorMessage = err.message;
// FIXME: should we move this logic to options.js?
if (!fromPref) {
console.error(err);
return sync.stop();
}
}
prefs.set('sync.enabled', name);
status.state = 'connected';
schedule(SYNC_INTERVAL);
emitStatusChange();
},
async stop() {
await ready;
if (!currentDrive) {
return;
}
chrome.alarms.clear('syncNow');
status.state = 'disconnecting';
emitStatusChange();
try {
await ctrl.stop();
await tokenManager.revokeToken(currentDrive.name);
await chromeLocal.remove(`sync/state/${currentDrive.name}`);
} catch (e) {
}
currentDrive = null;
prefs.set('sync.enabled', 'none');
status.state = 'disconnected';
status.currentDriveName = null;
status.login = false;
emitStatusChange();
},
async syncNow() {
await ready;
if (!currentDrive) {
return Promise.reject(new Error('cannot sync when disconnected'));
}
try {
await (ctrl.isInit() ? ctrl.syncNow() : ctrl.start()).catch(handle401Error);
status.errorMessage = null;
} catch (err) {
status.errorMessage = err.message;
} }
emitStatusChange(); emitStatusChange();
} },
};
function schedule(delay = SYNC_DELAY) { function schedule(delay = SYNC_DELAY) {
chrome.alarms.create('syncNow', { chrome.alarms.create('syncNow', {
@ -103,106 +193,25 @@ const sync = (() => {
}); });
} }
function onPrefChange(key, value) { async function handle401Error(err) {
if (value === 'none') { let emit;
stop().catch(console.error);
} else {
start(value, true).catch(console.error);
}
}
function withFinally(p, cleanup) {
return p.then(
result => {
cleanup(undefined, result);
return result;
},
err => {
cleanup(err);
throw err;
}
);
}
function syncNow() {
if (!currentDrive) {
return Promise.reject(new Error('cannot sync when disconnected'));
}
return withFinally(
(ctrl.isInit() ? ctrl.syncNow() : ctrl.start())
.catch(handle401Error),
err => {
status.errorMessage = err ? err.message : null;
emitStatusChange();
}
);
}
function handle401Error(err) {
if (err.code === 401) { if (err.code === 401) {
return tokenManager.revokeToken(currentDrive.name) await tokenManager.revokeToken(currentDrive.name).catch(console.error);
.catch(console.error) emit = true;
.then(() => { } else if (/User interaction required|Requires user interaction/i.test(err.message)) {
status.login = false; emit = true;
emitStatusChange();
throw err;
});
} }
if (/User interaction required|Requires user interaction/i.test(err.message)) { if (emit) {
status.login = false; status.login = false;
emitStatusChange(); emitStatusChange();
} }
throw err; return Promise.reject(err);
} }
function emitStatusChange() { function emitStatusChange() {
msg.broadcastExtension({method: 'syncStatusUpdate', status}); msg.broadcastExtension({method: 'syncStatusUpdate', status});
} }
function login(name = prefs.get('sync.enabled')) {
return tokenManager.getToken(name, true)
.catch(err => {
if (/Authorization page could not be loaded/i.test(err.message)) {
// FIXME: Chrome always fails at the first login so we try again
return tokenManager.getToken(name);
}
throw err;
})
.then(() => {
status.login = true;
emitStatusChange();
});
}
function start(name, fromPref = false) {
if (currentDrive) {
return Promise.resolve();
}
currentDrive = getDrive(name);
ctrl.use(currentDrive);
status.state = 'connecting';
status.currentDriveName = currentDrive.name;
status.login = true;
emitStatusChange();
return withFinally(
(fromPref ? Promise.resolve() : login(name))
.catch(handle401Error)
.then(() => syncNow()),
err => {
status.errorMessage = err ? err.message : null;
// FIXME: should we move this logic to options.js?
if (err && !fromPref) {
console.error(err);
return stop();
}
prefs.set('sync.enabled', name);
schedule(SYNC_INTERVAL);
status.state = 'connected';
emitStatusChange();
}
);
}
function getDrive(name) { function getDrive(name) {
if (name === 'dropbox' || name === 'google' || name === 'onedrive') { if (name === 'dropbox' || name === 'google' || name === 'onedrive') {
return dbToCloud.drive[name]({ return dbToCloud.drive[name]({
@ -211,26 +220,4 @@ const sync = (() => {
} }
throw new Error(`unknown cloud name: ${name}`); throw new Error(`unknown cloud name: ${name}`);
} }
function stop() {
if (!currentDrive) {
return Promise.resolve();
}
chrome.alarms.clear('syncNow');
status.state = 'disconnecting';
emitStatusChange();
return withFinally(
ctrl.stop()
.then(() => tokenManager.revokeToken(currentDrive.name))
.then(() => chromeLocal.remove(`sync/state/${currentDrive.name}`)),
() => {
currentDrive = null;
prefs.set('sync.enabled', 'none');
status.state = 'disconnected';
status.currentDriveName = null;
status.login = false;
emitStatusChange();
}
);
}
})(); })();

228
background/update.js
View File

@ -1,27 +1,23 @@
/* global /* global
API_METHODS API
calcStyleDigest calcStyleDigest
chromeLocal chromeLocal
debounce debounce
download download
getStyleWithNoCode
ignoreChromeError ignoreChromeError
prefs prefs
semverCompare semverCompare
styleJSONseemsValid styleJSONseemsValid
styleManager
styleSectionsEqual styleSectionsEqual
tryJSONparse
usercss usercss
*/ */
'use strict'; 'use strict';
(() => { (() => {
const STATES = /** @namespace UpdaterStates */{
const STATES = {
UPDATED: 'updated', UPDATED: 'updated',
SKIPPED: 'skipped', SKIPPED: 'skipped',
UNREACHABLE: 'server unreachable',
// details for SKIPPED status // details for SKIPPED status
EDITED: 'locally edited', EDITED: 'locally edited',
MAYBE_EDITED: 'may be locally edited', MAYBE_EDITED: 'may be locally edited',
@ -32,20 +28,22 @@
ERROR_JSON: 'error: JSON is invalid', ERROR_JSON: 'error: JSON is invalid',
ERROR_VERSION: 'error: version is older than installed style', ERROR_VERSION: 'error: version is older than installed style',
}; };
const ALARM_NAME = 'scheduledUpdate'; const ALARM_NAME = 'scheduledUpdate';
const MIN_INTERVAL_MS = 60e3; const MIN_INTERVAL_MS = 60e3;
const RETRY_ERRORS = [
503, // service unavailable
429, // too many requests
];
let lastUpdateTime; let lastUpdateTime;
let checkingAll = false; let checkingAll = false;
let logQueue = []; let logQueue = [];
let logLastWriteTime = 0; let logLastWriteTime = 0;
const retrying = new Set(); API.updater = {
checkAllStyles,
API_METHODS.updateCheckAll = checkAllStyles; checkStyle,
API_METHODS.updateCheck = checkStyle; getStates: () => STATES,
API_METHODS.getUpdaterStates = () => STATES; };
chromeLocal.getValue('lastUpdateTime').then(val => { chromeLocal.getValue('lastUpdateTime').then(val => {
lastUpdateTime = val || Date.now(); lastUpdateTime = val || Date.now();
@ -53,45 +51,46 @@
chrome.alarms.onAlarm.addListener(onAlarm); chrome.alarms.onAlarm.addListener(onAlarm);
}); });
return {checkAllStyles, checkStyle, STATES}; async function checkAllStyles({
function checkAllStyles({
save = true, save = true,
ignoreDigest, ignoreDigest,
observe, observe,
} = {}) { } = {}) {
resetInterval(); resetInterval();
checkingAll = true; checkingAll = true;
retrying.clear();
const port = observe && chrome.runtime.connect({name: 'updater'}); const port = observe && chrome.runtime.connect({name: 'updater'});
return styleManager.getAllStyles().then(styles => { const styles = (await API.styles.getAll())
styles = styles.filter(style => style.updateUrl); .filter(style => style.updateUrl);
if (port) port.postMessage({count: styles.length}); if (port) port.postMessage({count: styles.length});
log(''); log('');
log(`${save ? 'Scheduled' : 'Manual'} update check for ${styles.length} styles`); log(`${save ? 'Scheduled' : 'Manual'} update check for ${styles.length} styles`);
return Promise.all( await Promise.all(
styles.map(style => styles.map(style =>
checkStyle({style, port, save, ignoreDigest}))); checkStyle({style, port, save, ignoreDigest})));
}).then(() => {
if (port) port.postMessage({done: true}); if (port) port.postMessage({done: true});
if (port) port.disconnect(); if (port) port.disconnect();
log(''); log('');
checkingAll = false; checkingAll = false;
retrying.clear();
});
} }
function checkStyle({ /**
id, * @param {{
style, id?: number
port, style?: StyleObj
save = true, port?: chrome.runtime.Port
ignoreDigest, save?: boolean = true
}) { ignoreDigest?: boolean
/* }} opts
* @returns {{
style: StyleObj
updated?: boolean
error?: any
STATES: UpdaterStates
}}
Original style digests are calculated in these cases: Original style digests are calculated in these cases:
* style is installed or updated from server * style is installed or updated from server
* style is checked for an update and its code is equal to the server code * non-usercss style is checked for an update and styleSectionsEqual considers it unchanged
Update check proceeds in these cases: Update check proceeds in these cases:
* style has the original digest and it's equal to the current digest * style has the original digest and it's equal to the current digest
@ -102,142 +101,109 @@
'ignoreDigest' option is set on the second manual individual update check on the manage page. 'ignoreDigest' option is set on the second manual individual update check on the manage page.
*/ */
return fetchStyle() async function checkStyle(opts) {
.then(() => { const {
if (!ignoreDigest) { id,
return calcStyleDigest(style) style = await API.styles.get(id),
.then(checkIfEdited); ignoreDigest,
port,
save,
} = opts;
const ucd = style.usercssData;
let res, state;
try {
await checkIfEdited();
res = {
style: await (ucd ? updateUsercss : updateUSO)().then(maybeSave),
updated: true,
};
state = STATES.UPDATED;
} catch (err) {
const error = err === 0 && STATES.UNREACHABLE ||
err && err.message ||
err;
res = {error, style, STATES};
state = `${STATES.SKIPPED} (${error})`;
} }
}) log(`${state} #${style.id} ${style.customName || style.name}`);
.then(() => { if (port) port.postMessage(res);
if (style.usercssData) { return res;
return maybeUpdateUsercss();
}
return maybeUpdateUSO();
})
.then(maybeSave)
.then(reportSuccess)
.catch(reportFailure);
function fetchStyle() { async function checkIfEdited() {
if (style) { if (!ignoreDigest &&
return Promise.resolve(); style.originalDigest &&
} style.originalDigest !== await calcStyleDigest(style)) {
return styleManager.get(id)
.then(style_ => {
style = style_;
});
}
function reportSuccess(saved) {
log(STATES.UPDATED + ` #${style.id} ${style.customName || style.name}`);
const info = {updated: true, style: saved};
if (port) port.postMessage(info);
return info;
}
function reportFailure(error) {
if ((
error === 503 || // Service Unavailable
error === 429 // Too Many Requests
) && !retrying.has(id)) {
retrying.add(id);
return new Promise(resolve => {
setTimeout(() => {
resolve(checkStyle({id, style, port, save, ignoreDigest}));
}, 1000);
});
}
error = error === 0 ? 'server unreachable' : error;
// UserCSS metadata error returns an object; e.g. "Invalid @var color..."
if (typeof error === 'object' && error.message) {
error = error.message;
}
log(STATES.SKIPPED + ` (${error}) #${style.id} ${style.customName || style.name}`);
const info = {error, STATES, style: getStyleWithNoCode(style)};
if (port) port.postMessage(info);
return info;
}
function checkIfEdited(digest) {
if (style.originalDigest && style.originalDigest !== digest) {
return Promise.reject(STATES.EDITED); return Promise.reject(STATES.EDITED);
} }
} }
function maybeUpdateUSO() { async function updateUSO() {
return download(style.md5Url).then(md5 => { const md5 = await tryDownload(style.md5Url);
if (!md5 || md5.length !== 32) { if (!md5 || md5.length !== 32) {
return Promise.reject(STATES.ERROR_MD5); return Promise.reject(STATES.ERROR_MD5);
} }
if (md5 === style.originalMd5 && style.originalDigest && !ignoreDigest) { if (md5 === style.originalMd5 && style.originalDigest && !ignoreDigest) {
return Promise.reject(STATES.SAME_MD5); return Promise.reject(STATES.SAME_MD5);
} }
// USO can't handle POST requests for style json const json = await tryDownload(style.updateUrl, {responseType: 'json'});
return download(style.updateUrl, {body: null}) if (!styleJSONseemsValid(json)) {
.then(text => { return Promise.reject(STATES.ERROR_JSON);
const style = tryJSONparse(text);
if (style) {
// USO may not provide a correctly updated originalMd5 (#555)
style.originalMd5 = md5;
} }
return style; // USO may not provide a correctly updated originalMd5 (#555)
}); json.originalMd5 = md5;
}); return json;
} }
function maybeUpdateUsercss() { async function updateUsercss() {
// TODO: when sourceCode is > 100kB use http range request(s) for version check // TODO: when sourceCode is > 100kB use http range request(s) for version check
return download(style.updateUrl).then(text => const text = await tryDownload(style.updateUrl);
usercss.buildMeta(text).then(json => { const json = await usercss.buildMeta(text);
const {usercssData: {version}} = style; const delta = semverCompare(json.usercssData.version, ucd.version);
const {usercssData: {version: newVersion}} = json; if (!delta && !ignoreDigest) {
switch (Math.sign(semverCompare(version, newVersion))) {
case 0:
// re-install is invalid in a soft upgrade // re-install is invalid in a soft upgrade
if (!ignoreDigest) {
const sameCode = text === style.sourceCode; const sameCode = text === style.sourceCode;
return Promise.reject(sameCode ? STATES.SAME_CODE : STATES.SAME_VERSION); return Promise.reject(sameCode ? STATES.SAME_CODE : STATES.SAME_VERSION);
} }
break; if (delta < 0) {
case 1:
// downgrade is always invalid // downgrade is always invalid
return Promise.reject(STATES.ERROR_VERSION); return Promise.reject(STATES.ERROR_VERSION);
} }
return usercss.buildCode(json); return usercss.buildCode(json);
})
);
}
function maybeSave(json = {}) {
// usercss is already validated while building
if (!json.usercssData && !styleJSONseemsValid(json)) {
return Promise.reject(STATES.ERROR_JSON);
} }
async function maybeSave(json) {
json.id = style.id; json.id = style.id;
json.updateDate = Date.now(); json.updateDate = Date.now();
// keep current state // keep current state
delete json.customName;
delete json.enabled; delete json.enabled;
const newStyle = Object.assign({}, style, json); const newStyle = Object.assign({}, style, json);
if (!style.usercssData && styleSectionsEqual(json, style)) {
// update digest even if save === false as there might be just a space added etc. // update digest even if save === false as there might be just a space added etc.
return styleManager.installStyle(newStyle) if (!ucd && styleSectionsEqual(json, style)) {
.then(saved => { style.originalDigest = (await API.styles.install(newStyle)).originalDigest;
style.originalDigest = saved.originalDigest;
return Promise.reject(STATES.SAME_CODE); return Promise.reject(STATES.SAME_CODE);
});
} }
if (!style.originalDigest && !ignoreDigest) { if (!style.originalDigest && !ignoreDigest) {
return Promise.reject(STATES.MAYBE_EDITED); return Promise.reject(STATES.MAYBE_EDITED);
} }
return !save ? newStyle :
(ucd ? API.usercss : API.styles).install(newStyle);
}
return save ? async function tryDownload(url, params) {
API_METHODS[json.usercssData ? 'installUsercss' : 'installStyle'](newStyle) : let {retryDelay = 1000} = opts;
newStyle; while (true) {
try {
return await download(url, params);
} catch (code) {
if (!RETRY_ERRORS.includes(code) ||
retryDelay > MIN_INTERVAL_MS) {
return Promise.reject(code);
}
}
retryDelay *= 1.25;
await new Promise(resolve => setTimeout(resolve, retryDelay));
}
} }
} }

81
background/usercss-api-helper.js Normal file
View File

@ -0,0 +1,81 @@
/* global
API
deepCopy
usercss
*/
'use strict';
API.usercss = {
async build({
styleId,
sourceCode,
vars,
checkDup,
metaOnly,
assignVars,
}) {
let style = await usercss.buildMeta(sourceCode);
const dup = (checkDup || assignVars) &&
await API.usercss.find(styleId ? {id: styleId} : style);
if (!metaOnly) {
if (vars || assignVars) {
await usercss.assignVars(style, vars ? {usercssData: {vars}} : dup);
}
style = await usercss.buildCode(style);
}
return {style, dup};
},
async buildMeta(style) {
if (style.usercssData) {
return style;
}
// allow sourceCode to be normalized
const {sourceCode} = style;
delete style.sourceCode;
return Object.assign(await usercss.buildMeta(sourceCode), style);
},
async configVars(id, vars) {
let style = deepCopy(await API.styles.get(id));
style.usercssData.vars = vars;
style = await usercss.buildCode(style);
style = await API.styles.install(style, 'config');
return style.usercssData.vars;
},
async editSave(style) {
return API.styles.editSave(await API.usercss.parse(style));
},
async find(styleOrData) {
if (styleOrData.id) {
return API.styles.get(styleOrData.id);
}
const {name, namespace} = styleOrData.usercssData || styleOrData;
for (const dup of await API.styles.getAll()) {
const data = dup.usercssData;
if (data &&
data.name === name &&
data.namespace === namespace) {
return dup;
}
}
},
async install(style) {
return API.styles.install(await API.usercss.parse(style));
},
async parse(style) {
style = await API.usercss.buildMeta(style);
// preserve style.vars during update
const dup = await API.usercss.find(style);
if (dup) {
style.id = dup.id;
await usercss.assignVars(style, dup);
}
return usercss.buildCode(style);
},
};

132
background/usercss-helper.js
View File

@ -1,132 +0,0 @@
/* global API_METHODS usercss styleManager deepCopy */
/* exported usercssHelper */
'use strict';
const usercssHelper = (() => {
API_METHODS.installUsercss = installUsercss;
API_METHODS.editSaveUsercss = editSaveUsercss;
API_METHODS.configUsercssVars = configUsercssVars;
API_METHODS.buildUsercss = build;
API_METHODS.buildUsercssMeta = buildMeta;
API_METHODS.findUsercss = find;
function buildMeta(style) {
if (style.usercssData) {
return Promise.resolve(style);
}
// allow sourceCode to be normalized
const {sourceCode} = style;
delete style.sourceCode;
return usercss.buildMeta(sourceCode)
.then(newStyle => Object.assign(newStyle, style));
}
function assignVars(style) {
return find(style)
.then(dup => {
if (dup) {
style.id = dup.id;
// preserve style.vars during update
return usercss.assignVars(style, dup)
.then(() => style);
}
return style;
});
}
/**
* Parse the source, find the duplication, and build sections with variables
* @param _
* @param {String} _.sourceCode
* @param {Boolean=} _.checkDup
* @param {Boolean=} _.metaOnly
* @param {Object} _.vars
* @param {Boolean=} _.assignVars
* @returns {Promise<{style, dup:Boolean?}>}
*/
function build({
styleId,
sourceCode,
checkDup,
metaOnly,
vars,
assignVars = false,
}) {
return usercss.buildMeta(sourceCode)
.then(style => {
const findDup = checkDup || assignVars ?
find(styleId ? {id: styleId} : style) : Promise.resolve();
return Promise.all([
metaOnly ? style : doBuild(style, findDup),
findDup,
]);
})
.then(([style, dup]) => ({style, dup}));
function doBuild(style, findDup) {
if (vars || assignVars) {
const getOld = vars ? Promise.resolve({usercssData: {vars}}) : findDup;
return getOld
.then(oldStyle => usercss.assignVars(style, oldStyle))
.then(() => usercss.buildCode(style));
}
return usercss.buildCode(style);
}
}
// Build the style within aditional properties then inherit variable values
// from the old style.
function parse(style) {
return buildMeta(style)
.then(buildMeta)
.then(assignVars)
.then(usercss.buildCode);
}
// FIXME: simplify this to `installUsercss(sourceCode)`?
function installUsercss(style) {
return parse(style)
.then(styleManager.installStyle);
}
// FIXME: simplify this to `editSaveUsercss({sourceCode, exclusions})`?
function editSaveUsercss(style) {
return parse(style)
.then(styleManager.editSave);
}
function configUsercssVars(id, vars) {
return styleManager.get(id)
.then(style => {
const newStyle = deepCopy(style);
newStyle.usercssData.vars = vars;
return usercss.buildCode(newStyle);
})
.then(style => styleManager.installStyle(style, 'config'))
.then(style => style.usercssData.vars);
}
/**
* @param {Style|{name:string, namespace:string}} styleOrData
* @returns {Style}
*/
function find(styleOrData) {
if (styleOrData.id) {
return styleManager.get(styleOrData.id);
}
const {name, namespace} = styleOrData.usercssData || styleOrData;
return styleManager.getAllStyles().then(styleList => {
for (const dup of styleList) {
const data = dup.usercssData;
if (!data) continue;
if (data.name === name &&
data.namespace === namespace) {
return dup;
}
}
});
}
})();

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

@ -1,5 +1,5 @@
/* global /* global
API_METHODS API
download download
openURL openURL
tabManager tabManager
@ -25,7 +25,7 @@
isContentTypeText((await fetch(url, {method: 'HEAD'})).headers.get('content-type')) isContentTypeText((await fetch(url, {method: 'HEAD'})).headers.get('content-type'))
) && download(url); ) && download(url);
API_METHODS.getUsercssInstallCode = url => { API.usercss.getInstallCode = url => {
// when the installer tab is reloaded after the cache is expired, this will throw intentionally // when the installer tab is reloaded after the cache is expired, this will throw intentionally
const {code, timer} = installCodeCache[url]; const {code, timer} = installCodeCache[url];
clearInstallCode(url); clearInstallCode(url);

8
content/apply.js
View File

@ -60,7 +60,7 @@ self.INJECTED !== 1 && (() => {
await API.styleViaAPI({method: 'styleApply'}); await API.styleViaAPI({method: 'styleApply'});
} else { } else {
const styles = chrome.app && !chrome.tabs && getStylesViaXhr() || const styles = chrome.app && !chrome.tabs && getStylesViaXhr() ||
await API.getSectionsByUrl(getMatchUrl(), null, true); await API.styles.getSectionsByUrl(getMatchUrl(), null, true);
if (styles.disableAll) { if (styles.disableAll) {
delete styles.disableAll; delete styles.disableAll;
styleInjector.toggle(false); styleInjector.toggle(false);
@ -117,7 +117,7 @@ self.INJECTED !== 1 && (() => {
case 'styleUpdated': case 'styleUpdated':
if (request.style.enabled) { if (request.style.enabled) {
API.getSectionsByUrl(getMatchUrl(), request.style.id) API.styles.getSectionsByUrl(getMatchUrl(), request.style.id)
.then(sections => { .then(sections => {
if (!sections[request.style.id]) { if (!sections[request.style.id]) {
styleInjector.remove(request.style.id); styleInjector.remove(request.style.id);
@ -132,13 +132,13 @@ self.INJECTED !== 1 && (() => {
case 'styleAdded': case 'styleAdded':
if (request.style.enabled) { if (request.style.enabled) {
API.getSectionsByUrl(getMatchUrl(), request.style.id) API.styles.getSectionsByUrl(getMatchUrl(), request.style.id)
.then(styleInjector.apply); .then(styleInjector.apply);
} }
break; break;
case 'urlChanged': case 'urlChanged':
API.getSectionsByUrl(getMatchUrl()) API.styles.getSectionsByUrl(getMatchUrl())
.then(styleInjector.replace); .then(styleInjector.replace);
break; break;

2
content/install-hook-greasyfork.js
View File

@ -13,7 +13,7 @@ if (window.INJECTED_GREASYFORK !== 1) {
e.data.name && e.data.name &&
e.data.type === 'style-version-query') { e.data.type === 'style-version-query') {
removeEventListener('message', onMessage); removeEventListener('message', onMessage);
const style = await API.findUsercss(e.data) || {}; const style = await API.usercss.find(e.data) || {};
const {version} = style.usercssData || {}; const {version} = style.usercssData || {};
postMessage({type: 'style-version', version}, '*'); postMessage({type: 'style-version', version}, '*');
} }

4
content/install-hook-openusercss.js
View File

@ -34,7 +34,7 @@
&& event.data.type === 'ouc-is-installed' && event.data.type === 'ouc-is-installed'
&& allowedOrigins.includes(event.origin) && allowedOrigins.includes(event.origin)
) { ) {
API.findUsercss({ API.usercss.find({
name: event.data.name, name: event.data.name,
namespace: event.data.namespace, namespace: event.data.namespace,
}).then(style => { }).then(style => {
@ -129,7 +129,7 @@
&& event.data.type === 'ouc-install-usercss' && event.data.type === 'ouc-install-usercss'
&& allowedOrigins.includes(event.origin) && allowedOrigins.includes(event.origin)
) { ) {
API.installUsercss({ API.usercss.install({
name: event.data.title, name: event.data.title,
sourceCode: event.data.code, sourceCode: event.data.code,
}).then(style => { }).then(style => {

24
content/install-hook-usercss.js
View File

@ -1,19 +1,21 @@
'use strict'; 'use strict';
// preventing reregistration if reinjected by tabs.executeScript for whatever reason, just in case // preventing reregistration if reinjected by tabs.executeScript for whatever reason, just in case
if (typeof self.oldCode !== 'string') { if (typeof window.oldCode !== 'string') {
self.oldCode = (document.querySelector('body > pre') || document.body).textContent; window.oldCode = (document.querySelector('body > pre') || document.body).textContent;
chrome.runtime.onConnect.addListener(port => { chrome.runtime.onConnect.addListener(port => {
if (port.name !== 'downloadSelf') return; if (port.name !== 'downloadSelf') return;
port.onMessage.addListener(({id, force}) => { port.onMessage.addListener(async ({id, force}) => {
fetch(location.href, {mode: 'same-origin'}) const msg = {id};
.then(r => r.text()) try {
.then(code => ({id, code: force || code !== self.oldCode ? code : null})) const code = await (await fetch(location.href, {mode: 'same-origin'})).text();
.catch(error => ({id, error: error.message || `${error}`})) if (code !== window.oldCode || force) {
.then(msg => { msg.code = window.oldCode = code;
}
} catch (error) {
msg.error = error.message || `${error}`;
}
port.postMessage(msg); port.postMessage(msg);
if (msg.code != null) self.oldCode = msg.code;
});
}); });
// FF keeps content scripts connected on navigation https://github.com/openstyles/stylus/issues/864 // FF keeps content scripts connected on navigation https://github.com/openstyles/stylus/issues/864
addEventListener('pagehide', () => port.disconnect(), {once: true}); addEventListener('pagehide', () => port.disconnect(), {once: true});
@ -21,4 +23,4 @@ if (typeof self.oldCode !== 'string') {
} }
// passing the result to tabs.executeScript // passing the result to tabs.executeScript
self.oldCode; // eslint-disable-line no-unused-expressions window.oldCode; // eslint-disable-line no-unused-expressions

33
content/install-hook-userstyles.js
View File

@ -24,7 +24,7 @@
let currentMd5; let currentMd5;
const md5Url = getMeta('stylish-md5-url') || `https://update.userstyles.org/${styleId}.md5`; const md5Url = getMeta('stylish-md5-url') || `https://update.userstyles.org/${styleId}.md5`;
Promise.all([ Promise.all([
API.findStyle({md5Url}), API.styles.find({md5Url}),
getResource(md5Url), getResource(md5Url),
onDOMready(), onDOMready(),
]).then(checkUpdatability); ]).then(checkUpdatability);
@ -154,9 +154,9 @@
function doInstall() { function doInstall() {
let oldStyle; let oldStyle;
return API.findStyle({ return API.styles.find({
md5Url: getMeta('stylish-md5-url') || location.href, md5Url: getMeta('stylish-md5-url') || location.href,
}, true) })
.then(_oldStyle => { .then(_oldStyle => {
oldStyle = _oldStyle; oldStyle = _oldStyle;
return oldStyle ? return oldStyle ?
@ -187,7 +187,7 @@
return; return;
} }
// Update originalMd5 since USO changed it (2018-11-11) to NOT match the current md5 // Update originalMd5 since USO changed it (2018-11-11) to NOT match the current md5
return API.installStyle(Object.assign(json, addProps, {originalMd5: currentMd5})) return API.styles.install(Object.assign(json, addProps, {originalMd5: currentMd5}))
.then(style => { .then(style => {
if (!isNew && style.updateUrl.includes('?')) { if (!isNew && style.updateUrl.includes('?')) {
enableUpdateButton(true); enableUpdateButton(true);
@ -218,20 +218,15 @@
return e ? e.getAttribute('href') : null; return e ? e.getAttribute('href') : null;
} }
function getResource(url, options) { async function getResource(url, type = 'text') {
if (url.startsWith('#')) { try {
return Promise.resolve(document.getElementById(url.slice(1)).textContent); return url.startsWith('#')
? document.getElementById(url.slice(1)).textContent
: await (await fetch(url))[type];
} catch (error) {
alert('Error\n' + error.message);
return Promise.reject(error);
} }
return API.download(Object.assign({
url,
timeout: 60e3,
// USO can't handle POST requests for style json
body: null,
}, options))
.catch(error => {
alert('Error' + (error ? '\n' + error : ''));
throw error;
});
} }
// USO providing md5Url as "https://update.update.userstyles.org/#####.md5" // USO providing md5Url as "https://update.update.userstyles.org/#####.md5"
@ -244,7 +239,7 @@
} }
function getStyleJson() { function getStyleJson() {
return getResource(getStyleURL(), {responseType: 'json'}) return getResource(getStyleURL(), 'json')
.then(style => { .then(style => {
if (!style || !Array.isArray(style.sections) || style.sections.length) { if (!style || !Array.isArray(style.sections) || style.sections.length) {
return style; return style;
@ -254,7 +249,7 @@
return style; return style;
} }
return getResource(getMeta('stylish-update-url')) return getResource(getMeta('stylish-update-url'))
.then(code => API.parseCss({code})) .then(code => API.worker.parseMozFormat({code}))
.then(result => { .then(result => {
style.sections = result.sections; style.sections = result.sections;
return style; return style;

22
edit/edit.js
View File

@ -110,7 +110,7 @@ lazyInit();
async function initStyle() { async function initStyle() {
const params = new URLSearchParams(location.search); const params = new URLSearchParams(location.search);
const id = Number(params.get('id')); const id = Number(params.get('id'));
style = id ? await API.getStyle(id) : initEmptyStyle(params); style = id ? await API.styles.get(id) : initEmptyStyle(params);
// switching the mode here to show the correct page ASAP, usually before DOMContentLoaded // switching the mode here to show the correct page ASAP, usually before DOMContentLoaded
editor.isUsercss = Boolean(style.usercssData || !style.id && prefs.get('newStyleAsUsercss')); editor.isUsercss = Boolean(style.usercssData || !style.id && prefs.get('newStyleAsUsercss'));
document.documentElement.classList.toggle('usercss', editor.isUsercss); document.documentElement.classList.toggle('usercss', editor.isUsercss);
@ -426,26 +426,18 @@ function lazyInit() {
} }
function onRuntimeMessage(request) { function onRuntimeMessage(request) {
const {style} = request;
switch (request.method) { switch (request.method) {
case 'styleUpdated': case 'styleUpdated':
if ( if (editor.style.id === style.id &&
editor.style.id === request.style.id && !['editPreview', 'editPreviewEnd', 'editSave', 'config'].includes(request.reason)) {
!['editPreview', 'editPreviewEnd', 'editSave', 'config'] Promise.resolve(request.codeIsUpdated === false ? style : API.styles.get(style.id))
.includes(request.reason) .then(newStyle => editor.replaceStyle(newStyle, request.codeIsUpdated));
) {
Promise.resolve(
request.codeIsUpdated === false ?
request.style : API.getStyle(request.style.id)
)
.then(newStyle => {
editor.replaceStyle(newStyle, request.codeIsUpdated);
});
} }
break; break;
case 'styleDeleted': case 'styleDeleted':
if (editor.style.id === request.style.id) { if (editor.style.id === style.id) {
closeCurrentTab(); closeCurrentTab();
break;
} }
break; break;
case 'editDeleteText': case 'editDeleteText':

6
edit/sections-editor.js
View File

@ -117,7 +117,7 @@ function SectionsEditor() {
if (!validate(newStyle)) { if (!validate(newStyle)) {
return; return;
} }
newStyle = await API.editSave(newStyle); newStyle = await API.styles.editSave(newStyle);
destroyRemovedSections(); destroyRemovedSections();
sessionStore.justEditedStyleId = newStyle.id; sessionStore.justEditedStyleId = newStyle.id;
editor.replaceStyle(newStyle, false); editor.replaceStyle(newStyle, false);
@ -384,7 +384,7 @@ function SectionsEditor() {
t('importPreprocessor'), 'pre-line', t('importPreprocessor'), 'pre-line',
t('importPreprocessorTitle')) t('importPreprocessorTitle'))
) { ) {
const {sections, errors} = await API.parseCss({code}); const {sections, errors} = await API.worker.parseMozFormat({code});
// shouldn't happen but just in case // shouldn't happen but just in case
if (!sections.length || errors.length) { if (!sections.length || errors.length) {
throw errors; throw errors;
@ -403,7 +403,7 @@ function SectionsEditor() {
async function getPreprocessor(code) { async function getPreprocessor(code) {
try { try {
return (await API.buildUsercssMeta({sourceCode: code})).usercssData.preprocessor; return (await API.usercss.buildMeta({sourceCode: code})).usercssData.preprocessor;
} catch (e) {} } catch (e) {}
} }

6
edit/source-editor.js
View File

@ -97,7 +97,7 @@ function SourceEditor() {
} }
function preprocess(style) { function preprocess(style) {
return API.buildUsercss({ return API.usercss.build({
styleId: style.id, styleId: style.id,
sourceCode: style.sourceCode, sourceCode: style.sourceCode,
assignVars: true, assignVars: true,
@ -231,7 +231,7 @@ function SourceEditor() {
if (!dirty.isDirty()) return; if (!dirty.isDirty()) return;
const code = cm.getValue(); const code = cm.getValue();
return ensureUniqueStyle(code) return ensureUniqueStyle(code)
.then(() => API.editSaveUsercss({ .then(() => API.usercss.editSave({
id: style.id, id: style.id,
enabled: style.enabled, enabled: style.enabled,
sourceCode: code, sourceCode: code,
@ -265,7 +265,7 @@ function SourceEditor() {
function ensureUniqueStyle(code) { function ensureUniqueStyle(code) {
return style.id ? Promise.resolve() : return style.id ? Promise.resolve() :
API.buildUsercss({ API.usercss.build({
sourceCode: code, sourceCode: code,
checkDup: true, checkDup: true,
metaOnly: true, metaOnly: true,

17
install-usercss/install-usercss.js
View File

@ -176,7 +176,7 @@
function initSourceCode(sourceCode) { function initSourceCode(sourceCode) {
cm.setValue(sourceCode); cm.setValue(sourceCode);
cm.refresh(); cm.refresh();
API.buildUsercss({sourceCode, checkDup: true}) API.usercss.build({sourceCode, checkDup: true})
.then(init) .then(init)
.catch(err => { .catch(err => {
$('#header').classList.add('meta-init-error'); $('#header').classList.add('meta-init-error');
@ -248,7 +248,7 @@
data.version, data.version,
])) ]))
).then(ok => ok && ).then(ok => ok &&
API.installUsercss(style) API.usercss.install(style)
.then(install) .then(install)
.catch(err => messageBox.alert(t('styleInstallFailed', err), 'pre')) .catch(err => messageBox.alert(t('styleInstallFailed', err), 'pre'))
); );
@ -317,7 +317,7 @@
let sequence = null; let sequence = null;
if (tabId < 0) { if (tabId < 0) {
getData = DirectDownloader(); getData = DirectDownloader();
sequence = API.getUsercssInstallCode(initialUrl) sequence = API.usercss.getInstallCode(initialUrl)
.then(code => code || getData()) .then(code => code || getData())
.catch(getData); .catch(getData);
} else { } else {
@ -372,19 +372,20 @@
cm.setValue(code); cm.setValue(code);
cm.setCursor(cursor); cm.setCursor(cursor);
cm.scrollTo(scrollInfo.left, scrollInfo.top); cm.scrollTo(scrollInfo.left, scrollInfo.top);
return API.installUsercss({id, sourceCode: code}) return API.usercss.install({id, sourceCode: code})
.then(updateMeta) .then(updateMeta)
.catch(showError); .catch(showError);
}); });
} }
function DirectDownloader() { function DirectDownloader() {
let oldCode = null; let oldCode = null;
const passChangedCode = code => { return async () => {
const isSame = code === oldCode; const code = await download(initialUrl);
if (oldCode !== code) {
oldCode = code; oldCode = code;
return isSame ? null : code; return code;
}
}; };
return () => download(initialUrl).then(passChangedCode);
} }
function PortDownloader() { function PortDownloader() {
const resolvers = new Map(); const resolvers = new Map();

87
js/messaging.js
View File

@ -84,10 +84,13 @@ const URLS = {
url && url &&
url.startsWith(URLS.usoArchiveRaw) && url.startsWith(URLS.usoArchiveRaw) &&
parseInt(url.match(/\/(\d+)\.user\.css|$/)[1]), parseInt(url.match(/\/(\d+)\.user\.css|$/)[1]),
extractUsoArchiveInstallUrl: url => {
const id = URLS.extractUsoArchiveId(url);
return id ? `${URLS.usoArchive}?style=${id}` : '';
},
extractGreasyForkId: url => extractGreasyForkInstallUrl: url =>
/^https:\/\/(?:greasy|sleazy)fork\.org\/scripts\/(\d+)[^/]*\/code\/[^/]*\.user\.css$/.test(url) && /^(https:\/\/(?:greasy|sleazy)fork\.org\/scripts\/\d+)[^/]*\/code\/[^/]*\.user\.css$|$/.exec(url)[1],
RegExp.$1,
supported: url => ( supported: url => (
url.startsWith('http') || url.startsWith('http') ||
@ -98,9 +101,7 @@ const URLS = {
), ),
}; };
if (chrome.extension.getBackgroundPage && chrome.extension.getBackgroundPage() === window) { if (!chrome.extension.getBackgroundPage || chrome.extension.getBackgroundPage() !== window) {
window.API_METHODS = {};
} else {
const cls = FIREFOX ? 'firefox' : OPERA ? 'opera' : VIVALDI ? 'vivaldi' : ''; const cls = FIREFOX ? 'firefox' : OPERA ? 'opera' : VIVALDI ? 'vivaldi' : '';
if (cls) document.documentElement.classList.add(cls); if (cls) document.documentElement.classList.add(cls);
} }
@ -226,8 +227,9 @@ function activateTab(tab, {url, index, openerTabId} = {}) {
} }
function stringAsRegExp(s, flags) { function stringAsRegExp(s, flags, asString) {
return new RegExp(s.replace(/[{}()[\]\\.+*?^$|]/g, '\\$&'), flags); s = s.replace(/[{}()[\]\\.+*?^$|]/g, '\\$&');
return asString ? s : new RegExp(s, flags);
} }
@ -371,70 +373,49 @@ function download(url, {
requiredStatusCode = 200, requiredStatusCode = 200,
timeout = 60e3, // connection timeout, USO is that bad timeout = 60e3, // connection timeout, USO is that bad
loadTimeout = 2 * 60e3, // data transfer timeout (counted from the first remote response) loadTimeout = 2 * 60e3, // data transfer timeout (counted from the first remote response)
headers = { headers,
'Content-type': 'application/x-www-form-urlencoded',
},
} = {}) { } = {}) {
const queryPos = url.indexOf('?'); /* USO can't handle POST requests for style json and XHR/fetch can't handle super long URL
if (queryPos > 0 && body === undefined) { * so we need to collapse all long variables and expand them in the response */
const queryPos = url.startsWith(URLS.uso) ? url.indexOf('?') : -1;
if (queryPos >= 0) {
if (body === undefined) {
method = 'POST'; method = 'POST';
body = url.slice(queryPos); body = url.slice(queryPos);
url = url.slice(0, queryPos); url = url.slice(0, queryPos);
} }
// * USO can't handle POST requests for style json if (headers === undefined) {
// * XHR/fetch can't handle long URL headers = {
// So we need to collapse all long variables and expand them in the response 'Content-type': 'application/x-www-form-urlencoded',
};
}
}
const usoVars = []; const usoVars = [];
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
let xhr; const xhr = new XMLHttpRequest();
const u = new URL(collapseUsoVars(url)); const u = new URL(collapseUsoVars(url));
const onTimeout = () => { const onTimeout = () => {
if (xhr) xhr.abort(); xhr.abort();
reject(new Error('Timeout fetching ' + u.href)); reject(new Error('Timeout fetching ' + u.href));
}; };
let timer = setTimeout(onTimeout, timeout); let timer = setTimeout(onTimeout, timeout);
const switchTimer = () => {
clearTimeout(timer);
timer = loadTimeout && setTimeout(onTimeout, loadTimeout);
};
if (u.protocol === 'file:' && FIREFOX) { // TODO: maybe remove this since FF68+ can't do it anymore
// https://stackoverflow.com/questions/42108782/firefox-webextensions-get-local-files-content-by-path
// FIXME: add FetchController when it is available.
fetch(u.href, {mode: 'same-origin'})
.then(r => {
switchTimer();
return r.status === 200 ? r.text() : Promise.reject(r.status);
})
.catch(reject)
.then(text => {
clearTimeout(timer);
resolve(text);
});
return;
}
xhr = new XMLHttpRequest();
xhr.onreadystatechange = () => { xhr.onreadystatechange = () => {
if (xhr.readyState >= XMLHttpRequest.HEADERS_RECEIVED) { if (xhr.readyState >= XMLHttpRequest.HEADERS_RECEIVED) {
xhr.onreadystatechange = null; xhr.onreadystatechange = null;
switchTimer();
}
};
xhr.onloadend = event => {
clearTimeout(timer); clearTimeout(timer);
if (event.type !== 'error' && ( timer = loadTimeout && setTimeout(onTimeout, loadTimeout);
xhr.status === requiredStatusCode || !requiredStatusCode ||
u.protocol === 'file:')) {
resolve(expandUsoVars(xhr.response));
} else {
reject(xhr.status);
} }
}; };
xhr.onerror = xhr.onloadend; xhr.onload = () =>
xhr.status === requiredStatusCode || !requiredStatusCode || u.protocol === 'file:'
? resolve(expandUsoVars(xhr.response))
: reject(xhr.status);
xhr.onerror = () => reject(xhr.status);
xhr.onloadend = () => clearTimeout(timer);
xhr.responseType = responseType; xhr.responseType = responseType;
xhr.open(method, u.href, true); xhr.open(method, u.href);
for (const key in headers) { for (const [name, value] of Object.entries(headers || {})) {
xhr.setRequestHeader(key, headers[key]); xhr.setRequestHeader(name, value);
} }
xhr.send(body); xhr.send(body);
}); });

19
js/msg.js
View File

@ -130,14 +130,17 @@ window.INJECTED !== 1 && (() => {
}, },
}; };
window.API = new Proxy({}, { const apiHandler = !isBg && {
get(target, name) { get({PATH}, name) {
// using a named function for convenience when debugging const fn = () => {};
return async function invokeAPI(...args) { fn.PATH = [...PATH, name];
return new Proxy(fn, apiHandler);
},
async apply({PATH: path}, thisObj, args) {
if (!bg && chrome.tabs) { if (!bg && chrome.tabs) {
bg = await browser.runtime.getBackgroundPage().catch(() => {}); bg = await browser.runtime.getBackgroundPage().catch(() => {});
} }
const message = {method: 'invokeAPI', name, args}; const message = {method: 'invokeAPI', path, args};
// content scripts and probably private tabs // content scripts and probably private tabs
if (!bg) { if (!bg) {
return msg.send(message); return msg.send(message);
@ -146,11 +149,11 @@ window.INJECTED !== 1 && (() => {
// is closed, so we have to clone the object into background. // is closed, so we have to clone the object into background.
const res = bg.msg._execute(TARGETS.extension, bg.deepCopy(message), { const res = bg.msg._execute(TARGETS.extension, bg.deepCopy(message), {
frameId: 0, // false in case of our Options frame but we really want to fetch styles early frameId: 0, // false in case of our Options frame but we really want to fetch styles early
tab: NEEDS_TAB_IN_SENDER.includes(name) && await getOwnTab(), tab: NEEDS_TAB_IN_SENDER.includes(path.join('.')) && await getOwnTab(),
url: location.href, url: location.href,
}); });
return deepCopy(await res); return deepCopy(await res);
};
}, },
}); };
window.API = isBg ? {} : new Proxy({PATH: []}, apiHandler);
})(); })();

2
js/prefs.js
View File

@ -6,7 +6,7 @@
window.INJECTED !== 1 && (() => { window.INJECTED !== 1 && (() => {
const STORAGE_KEY = 'settings'; const STORAGE_KEY = 'settings';
const clone = msg.isBg ? deepCopy : (val => JSON.parse(JSON.stringify(val))); const clone = msg.isBg ? deepCopy : (val => JSON.parse(JSON.stringify(val)));
const defaults = { const defaults = /** @namespace Prefs */{
'openEditInWindow': false, // new editor opens in a own browser window 'openEditInWindow': false, // new editor opens in a own browser window
'openEditInWindow.popup': false, // new editor opens in a simplified browser window without omnibox 'openEditInWindow.popup': false, // new editor opens in a simplified browser window without omnibox
'windowPosition': {}, // detached window position 'windowPosition': {}, // detached window position

8
js/usercss.js
View File

@ -1,4 +1,4 @@
/* global backgroundWorker */ /* global API */
/* exported usercss */ /* exported usercss */
'use strict'; 'use strict';
@ -33,7 +33,7 @@ const usercss = (() => {
throw new Error('can not find metadata'); throw new Error('can not find metadata');
} }
return backgroundWorker.parseUsercssMeta(match[0], match.index) return API.worker.parseUsercssMeta(match[0], match.index)
.catch(err => { .catch(err => {
if (err.code) { if (err.code) {
const args = ERR_ARGS_IS_LIST.has(err.code) ? drawList(err.args) : err.args; const args = ERR_ARGS_IS_LIST.has(err.code) ? drawList(err.args) : err.args;
@ -68,7 +68,7 @@ const usercss = (() => {
*/ */
function buildCode(style, allowErrors) { function buildCode(style, allowErrors) {
const match = style.sourceCode.match(RX_META); const match = style.sourceCode.match(RX_META);
return backgroundWorker.compileUsercss( return API.worker.compileUsercss(
style.usercssData.preprocessor, style.usercssData.preprocessor,
style.sourceCode.slice(0, match.index) + style.sourceCode.slice(match.index + match[0].length), style.sourceCode.slice(0, match.index) + style.sourceCode.slice(match.index + match[0].length),
style.usercssData.vars style.usercssData.vars
@ -95,7 +95,7 @@ const usercss = (() => {
vars[key].value = oldVars[key].value; vars[key].value = oldVars[key].value;
} }
} }
return backgroundWorker.nullifyInvalidVars(vars) return API.worker.nullifyInvalidVars(vars)
.then(vars => { .then(vars => {
style.usercssData.vars = vars; style.usercssData.vars = vars;
}); });

4
manage/config-dialog.js
View File

@ -128,7 +128,7 @@ function configDialog(style) {
return; return;
} }
if (!bgStyle) { if (!bgStyle) {
API.getStyle(style.id, true) API.styles.get(style.id)
.catch(() => ({})) .catch(() => ({}))
.then(bgStyle => save({anyChangeIsDirty}, bgStyle)); .then(bgStyle => save({anyChangeIsDirty}, bgStyle));
return; return;
@ -182,7 +182,7 @@ function configDialog(style) {
return; return;
} }
saving = true; saving = true;
return API.configUsercssVars(style.id, style.usercssData.vars) return API.usercss.configVars(style.id, style.usercssData.vars)
.then(newVars => { .then(newVars => {
varsInitial = getInitialValues(newVars); varsInitial = getInitialValues(newVars);
vars.forEach(va => onchange({target: va.input, justSaved: true})); vars.forEach(va => onchange({target: va.input, justSaved: true}));

10
manage/import-export.js
View File

@ -109,7 +109,7 @@ function importFromFile({fileTypeFilter, file} = {}) {
async function importFromString(jsonString) { async function importFromString(jsonString) {
const json = tryJSONparse(jsonString); const json = tryJSONparse(jsonString);
const oldStyles = Array.isArray(json) && json.length ? await API.getAllStyles() : []; const oldStyles = Array.isArray(json) && json.length ? await API.styles.getAll() : [];
const oldStylesById = new Map(oldStyles.map(style => [style.id, style])); const oldStylesById = new Map(oldStyles.map(style => [style.id, style]));
const oldStylesByName = new Map(oldStyles.map(style => [style.name.trim(), style])); const oldStylesByName = new Map(oldStyles.map(style => [style.name.trim(), style]));
const items = []; const items = [];
@ -126,7 +126,7 @@ async function importFromString(jsonString) {
await Promise.all(json.map(analyze)); await Promise.all(json.map(analyze));
bulkChangeQueue.length = 0; bulkChangeQueue.length = 0;
bulkChangeQueue.time = performance.now(); bulkChangeQueue.time = performance.now();
(await API.importManyStyles(items)) (await API.styles.importMany(items))
.forEach((style, i) => updateStats(style, infos[i])); .forEach((style, i) => updateStats(style, infos[i]));
return done(); return done();
@ -290,10 +290,10 @@ async function importFromString(jsonString) {
]; ];
let tasks = Promise.resolve(); let tasks = Promise.resolve();
for (const id of newIds) { for (const id of newIds) {
tasks = tasks.then(() => API.deleteStyle(id)); tasks = tasks.then(() => API.styles.delete(id));
const oldStyle = oldStylesById.get(id); const oldStyle = oldStylesById.get(id);
if (oldStyle) { if (oldStyle) {
tasks = tasks.then(() => API.importStyle(oldStyle)); tasks = tasks.then(() => API.styles.import(oldStyle));
} }
} }
// taskUI is superfast and updates style list only in this page, // taskUI is superfast and updates style list only in this page,
@ -338,7 +338,7 @@ async function exportToFile() {
Object.assign({ Object.assign({
[prefs.STORAGE_KEY]: prefs.values, [prefs.STORAGE_KEY]: prefs.values,
}, await chromeSync.getLZValues()), }, await chromeSync.getLZValues()),
...await API.getAllStyles(), ...await API.styles.getAll(),
]; ];
const text = JSON.stringify(data, null, ' '); const text = JSON.stringify(data, null, ' ');
const type = 'application/json'; const type = 'application/json';

12
manage/manage.js
View File

@ -94,7 +94,7 @@ const handleEvent = {};
(async () => { (async () => {
const query = router.getSearch('search'); const query = router.getSearch('search');
const [styles, ids, el] = await Promise.all([ const [styles, ids, el] = await Promise.all([
API.getAllStyles(), API.styles.getAll(),
query && API.searchDB({query, mode: router.getSearch('searchMode')}), query && API.searchDB({query, mode: router.getSearch('searchMode')}),
waitForSelector('#installed'), // needed to avoid flicker due to an extra frame and layout shift waitForSelector('#installed'), // needed to avoid flicker due to an extra frame and layout shift
prefs.initializing, prefs.initializing,
@ -469,7 +469,7 @@ Object.assign(handleEvent, {
}, },
toggle(event, entry) { toggle(event, entry) {
API.toggleStyle(entry.styleId, this.matches('.enable') || this.checked); API.styles.toggle(entry.styleId, this.matches('.enable') || this.checked);
}, },
check(event, entry) { check(event, entry) {
@ -481,7 +481,7 @@ Object.assign(handleEvent, {
event.preventDefault(); event.preventDefault();
const json = entry.updatedCode; const json = entry.updatedCode;
json.id = entry.styleId; json.id = entry.styleId;
API[json.usercssData ? 'installUsercss' : 'installStyle'](json); (json.usercssData ? API.usercss : API.styles).install(json);
}, },
delete(event, entry) { delete(event, entry) {
@ -496,7 +496,7 @@ Object.assign(handleEvent, {
}) })
.then(({button}) => { .then(({button}) => {
if (button === 0) { if (button === 0) {
API.deleteStyle(id); API.styles.delete(id);
} }
}); });
const deleteButton = $('#message-box-buttons > button'); const deleteButton = $('#message-box-buttons > button');
@ -599,7 +599,7 @@ function handleBulkChange() {
} }
function handleUpdateForId(id, opts) { function handleUpdateForId(id, opts) {
return API.getStyle(id).then(style => { return API.styles.get(id).then(style => {
handleUpdate(style, opts); handleUpdate(style, opts);
bulkChangeQueue.time = performance.now(); bulkChangeQueue.time = performance.now();
}); });
@ -697,7 +697,7 @@ function switchUI({styleOnly} = {}) {
let iconsMissing = iconsEnabled && !$('.applies-to img'); let iconsMissing = iconsEnabled && !$('.applies-to img');
if (changed.enabled || (iconsMissing && !createStyleElement.parts)) { if (changed.enabled || (iconsMissing && !createStyleElement.parts)) {
installed.textContent = ''; installed.textContent = '';
API.getAllStyles().then(showStyles); API.styles.getAll().then(showStyles);
return; return;
} }
if (changed.sliders && newUI.enabled) { if (changed.sliders && newUI.enabled) {

6
manage/updater-ui.js
View File

@ -53,7 +53,7 @@ function checkUpdateAll() {
chrome.runtime.onConnect.removeListener(onConnect); chrome.runtime.onConnect.removeListener(onConnect);
}); });
API.updateCheckAll({ API.updater.checkAllStyles({
save: false, save: false,
observe: true, observe: true,
ignoreDigest, ignoreDigest,
@ -98,7 +98,7 @@ function checkUpdate(entry, {single} = {}) {
$('.update-note', entry).textContent = t('checkingForUpdate'); $('.update-note', entry).textContent = t('checkingForUpdate');
$('.check-update', entry).title = ''; $('.check-update', entry).title = '';
if (single) { if (single) {
API.updateCheck({ API.updater.checkStyle({
save: false, save: false,
id: entry.styleId, id: entry.styleId,
ignoreDigest: entry.classList.contains('update-problem'), ignoreDigest: entry.classList.contains('update-problem'),
@ -221,7 +221,7 @@ function showUpdateHistory(event) {
let deleted = false; let deleted = false;
Promise.all([ Promise.all([
chromeLocal.getValue('updateLog'), chromeLocal.getValue('updateLog'),
API.getUpdaterStates(), API.updater.getStates(),
]).then(([lines = [], states]) => { ]).then(([lines = [], states]) => {
logText = lines.join('\n'); logText = lines.join('\n');
messageBox({ messageBox({

3
manifest.json
View File

@ -52,12 +52,13 @@
"background/tab-manager.js", "background/tab-manager.js",
"background/icon-manager.js", "background/icon-manager.js",
"background/background.js", "background/background.js",
"background/usercss-helper.js", "background/usercss-api-helper.js",
"background/usercss-install-helper.js", "background/usercss-install-helper.js",
"background/style-via-api.js", "background/style-via-api.js",
"background/style-via-webrequest.js", "background/style-via-webrequest.js",
"background/search-db.js", "background/search-db.js",
"background/update.js", "background/update.js",
"background/context-menus.js",
"background/openusercss-api.js" "background/openusercss-api.js"
] ]
}, },

141
options/options.js
View File

@ -1,7 +1,25 @@
/* global messageBox msg setupLivePrefs enforceInputRange /* global
$ $$ $create $createLink $
FIREFOX OPERA CHROME URLS openURL prefs t API ignoreChromeError $$
CHROME_HAS_BORDER_BUG capitalize */ $create
$createLink
API
capitalize
CHROME
CHROME_HAS_BORDER_BUG
enforceInputRange
FIREFOX
getEventKeyName
ignoreChromeError
messageBox
msg
openURL
OPERA
prefs
setupLivePrefs
t
URLS
*/
'use strict'; 'use strict';
setupLivePrefs(); setupLivePrefs();
@ -44,7 +62,7 @@ if (CHROME && !chrome.declarativeContent) {
prefs.initializing.then(() => { prefs.initializing.then(() => {
el.checked = false; el.checked = false;
}); });
el.addEventListener('click', () => { el.on('click', () => {
if (el.checked) { if (el.checked) {
chrome.permissions.request({permissions: ['declarativeContent']}, ignoreChromeError); chrome.permissions.request({permissions: ['declarativeContent']}, ignoreChromeError);
} }
@ -101,84 +119,75 @@ document.onclick = e => {
// sync to cloud // sync to cloud
(() => { (() => {
const cloud = document.querySelector('.sync-options .cloud-name'); const elCloud = $('.sync-options .cloud-name');
const connectButton = document.querySelector('.sync-options .connect'); const elStart = $('.sync-options .connect');
const disconnectButton = document.querySelector('.sync-options .disconnect'); const elStop = $('.sync-options .disconnect');
const syncButton = document.querySelector('.sync-options .sync-now'); const elSyncNow = $('.sync-options .sync-now');
const statusText = document.querySelector('.sync-options .sync-status'); const elStatus = $('.sync-options .sync-status');
const loginButton = document.querySelector('.sync-options .sync-login'); const elLogin = $('.sync-options .sync-login');
/** @type {API.sync.Status} */
let status = {}; let status = {};
msg.onExtension(e => { msg.onExtension(e => {
if (e.method === 'syncStatusUpdate') { if (e.method === 'syncStatusUpdate') {
status = e.status; setStatus(e.status);
updateButtons();
} }
}); });
API.sync.getStatus()
.then(setStatus);
API.getSyncStatus() elCloud.on('change', updateButtons);
.then(_status => { for (const [btn, fn] of [
status = _status; [elStart, () => API.sync.start(elCloud.value)],
updateButtons(); [elStop, API.sync.stop],
[elSyncNow, API.sync.syncNow],
[elLogin, API.sync.login],
]) {
btn.on('click', e => {
if (getEventKeyName(e) === 'L') {
fn();
}
}); });
function validClick(e) {
return e.button === 0 && !e.ctrl && !e.alt && !e.shift;
} }
cloud.addEventListener('change', updateButtons); function setStatus(newStatus) {
status = newStatus;
updateButtons();
}
function updateButtons() { function updateButtons() {
const isConnected = status.state === 'connected';
const isDisconnected = status.state === 'disconnected';
if (status.currentDriveName) { if (status.currentDriveName) {
cloud.value = status.currentDriveName; elCloud.value = status.currentDriveName;
} }
cloud.disabled = status.state !== 'disconnected'; for (const [el, enable] of [
connectButton.disabled = status.state !== 'disconnected' || cloud.value === 'none'; [elCloud, isDisconnected],
disconnectButton.disabled = status.state !== 'connected' || status.syncing; [elStart, isDisconnected && elCloud.value !== 'none'],
syncButton.disabled = status.state !== 'connected' || status.syncing; [elStop, isConnected && !status.syncing],
statusText.textContent = getStatusText(); [elSyncNow, isConnected && !status.syncing],
loginButton.style.display = status.state === 'connected' && !status.login ? '' : 'none'; ]) {
el.disabled = !enable;
}
elStatus.textContent = getStatusText();
elLogin.hidden = !isConnected || status.login;
} }
function getStatusText() { function getStatusText() {
// chrome.i18n.getMessage is used instead of t() because calculated ids may be absent
let res;
if (status.syncing) { if (status.syncing) {
if (status.progress) { const {phase, loaded, total} = status.progress || {};
const {phase, loaded, total} = status.progress; res = phase
return chrome.i18n.getMessage(`optionsSyncStatus${capitalize(phase)}`, [loaded + 1, total]) || ? chrome.i18n.getMessage(`optionsSyncStatus${capitalize(phase)}`, [loaded + 1, total]) ||
`${phase} ${loaded} / ${total}`; `${phase} ${loaded} / ${total}`
: t('optionsSyncStatusSyncing');
} else {
const {state, errorMessage} = status;
res = (state === 'connected' || state === 'disconnected') && errorMessage ||
chrome.i18n.getMessage(`optionsSyncStatus${capitalize(state)}`) || state;
} }
return chrome.i18n.getMessage('optionsSyncStatusSyncing') || 'syncing'; return res;
} }
if ((status.state === 'connected' || status.state === 'disconnected') && status.errorMessage) {
return status.errorMessage;
}
return chrome.i18n.getMessage(`optionsSyncStatus${capitalize(status.state)}`) || status.state;
}
connectButton.addEventListener('click', e => {
if (validClick(e)) {
API.syncStart(cloud.value).catch(console.error);
}
});
disconnectButton.addEventListener('click', e => {
if (validClick(e)) {
API.syncStop().catch(console.error);
}
});
syncButton.addEventListener('click', e => {
if (validClick(e)) {
API.syncNow().catch(console.error);
}
});
loginButton.addEventListener('click', e => {
if (validClick(e)) {
API.syncLogin().catch(console.error);
}
});
})(); })();
function checkUpdates() { function checkUpdates() {
@ -193,7 +202,7 @@ function checkUpdates() {
chrome.runtime.onConnect.removeListener(onConnect); chrome.runtime.onConnect.removeListener(onConnect);
}); });
API.updateCheckAll({observe: true}); API.updater.checkAllStyles({observe: true});
function observer(info) { function observer(info) {
if ('count' in info) { if ('count' in info) {
@ -223,7 +232,7 @@ function setupRadioButtons() {
// group all radio-inputs by name="prefName" attribute // group all radio-inputs by name="prefName" attribute
for (const el of $$('input[type="radio"][name]')) { for (const el of $$('input[type="radio"][name]')) {
(sets[el.name] = sets[el.name] || []).push(el); (sets[el.name] = sets[el.name] || []).push(el);
el.addEventListener('change', onChange); el.on('change', onChange);
} }
// select the input corresponding to the actual pref value // select the input corresponding to the actual pref value
for (const name in sets) { for (const name in sets) {

2
popup/hotkeys.js
View File

@ -89,7 +89,7 @@ const hotkeys = (() => {
if (!match && $('input', entry).checked !== enable || entry.classList.contains(match)) { if (!match && $('input', entry).checked !== enable || entry.classList.contains(match)) {
results.push(entry.id); results.push(entry.id);
task = task task = task
.then(() => API.toggleStyle(entry.styleId, enable)) .then(() => API.styles.toggle(entry.styleId, enable))
.then(() => { .then(() => {
entry.classList.toggle('enabled', enable); entry.classList.toggle('enabled', enable);
entry.classList.toggle('disabled', !enable); entry.classList.toggle('disabled', !enable);

4
popup/popup-preinit.js
View File

@ -81,7 +81,7 @@ const initializing = (async () => {
/* Merges the extra props from API into style data. /* Merges the extra props from API into style data.
* When `id` is specified returns a single object otherwise an array */ * When `id` is specified returns a single object otherwise an array */
async function getStyleDataMerged(url, id) { async function getStyleDataMerged(url, id) {
const styles = (await API.getStylesByUrl(url, id)) const styles = (await API.styles.getByUrl(url, id))
.map(r => Object.assign(r.data, r)); .map(r => Object.assign(r.style, r));
return id ? styles[0] : styles; return id ? styles[0] : styles;
} }

15
popup/popup.js
View File

@ -143,7 +143,7 @@ async function initPopup(frames) {
switch (e.target.dataset.cmd) { switch (e.target.dataset.cmd) {
case 'ok': case 'ok':
hideModal(this, {animate: true}); hideModal(this, {animate: true});
API.deleteStyle(Number(id)); API.styles.delete(Number(id));
break; break;
case 'cancel': case 'cancel':
showModal($('.menu', $.entry(id)), '.menu-close'); showModal($('.menu', $.entry(id)), '.menu-close');
@ -464,20 +464,19 @@ Object.assign(handleEvent, {
event.preventDefault(); event.preventDefault();
}, },
toggle(event) { async toggle(event) {
// when fired on checkbox, prevent the parent label from seeing the event, see #501 // when fired on checkbox, prevent the parent label from seeing the event, see #501
event.stopPropagation(); event.stopPropagation();
API await API.styles.toggle(handleEvent.getClickedStyleId(event), this.checked);
.toggleStyle(handleEvent.getClickedStyleId(event), this.checked) resortEntries();
.then(() => resortEntries());
}, },
toggleExclude(event, type) { toggleExclude(event, type) {
const entry = handleEvent.getClickedStyleElement(event); const entry = handleEvent.getClickedStyleElement(event);
if (event.target.checked) { if (event.target.checked) {
API.addExclusion(entry.styleMeta.id, getExcludeRule(type)); API.styles.addExclusion(entry.styleMeta.id, getExcludeRule(type));
} else { } else {
API.removeExclusion(entry.styleMeta.id, getExcludeRule(type)); API.styles.removeExclusion(entry.styleMeta.id, getExcludeRule(type));
} }
}, },
@ -503,7 +502,7 @@ Object.assign(handleEvent, {
configure(event) { configure(event) {
const {styleId, styleIsUsercss} = handleEvent.getClickedStyleElement(event); const {styleId, styleIsUsercss} = handleEvent.getClickedStyleElement(event);
if (styleIsUsercss) { if (styleIsUsercss) {
API.getStyle(styleId, true).then(style => { API.styles.get(styleId).then(style => {
hotkeys.setState(false); hotkeys.setState(false);
configDialog(style).then(() => { configDialog(style).then(() => {
hotkeys.setState(true); hotkeys.setState(true);

8
popup/search-results.js
View File

@ -149,7 +149,7 @@ window.addEventListener('showStyles:done', () => {
addEventListener('styleAdded', async ({detail: {style}}) => { addEventListener('styleAdded', async ({detail: {style}}) => {
restoreScrollPosition(); restoreScrollPosition();
const usoId = calcUsoId(style) || const usoId = calcUsoId(style) ||
calcUsoId(await API.getStyle(style.id, true)); calcUsoId(await API.styles.get(style.id));
if (usoId && results.find(r => r.i === usoId)) { if (usoId && results.find(r => r.i === usoId)) {
renderActionButtons(usoId, style.id); renderActionButtons(usoId, style.id);
} }
@ -194,7 +194,7 @@ window.addEventListener('showStyles:done', () => {
results = await search({retry}); results = await search({retry});
} }
if (results.length) { if (results.length) {
const installedStyles = await API.getAllStyles(); const installedStyles = await API.styles.getAll();
const allUsoIds = new Set(installedStyles.map(calcUsoId)); const allUsoIds = new Set(installedStyles.map(calcUsoId));
results = results.filter(r => !allUsoIds.has(r.i)); results = results.filter(r => !allUsoIds.has(r.i));
} }
@ -419,7 +419,7 @@ window.addEventListener('showStyles:done', () => {
const updateUrl = `${URLS.usoArchiveRaw}usercss/${id}.user.css`; const updateUrl = `${URLS.usoArchiveRaw}usercss/${id}.user.css`;
try { try {
const sourceCode = await download(updateUrl); const sourceCode = await download(updateUrl);
const style = await API.installUsercss({sourceCode, updateUrl}); const style = await API.usercss.install({sourceCode, updateUrl});
renderFullInfo(entry, style); renderFullInfo(entry, style);
} catch (reason) { } catch (reason) {
error(`Error while downloading usoID:${id}\nReason: ${reason}`); error(`Error while downloading usoID:${id}\nReason: ${reason}`);
@ -432,7 +432,7 @@ window.addEventListener('showStyles:done', () => {
function uninstall() { function uninstall() {
const entry = this.closest('.search-result'); const entry = this.closest('.search-result');
saveScrollPosition(entry); saveScrollPosition(entry);
API.deleteStyle(entry._result.installedStyleId); API.styles.delete(entry._result.installedStyleId);
} }
function saveScrollPosition(entry) { function saveScrollPosition(entry) {