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

Merge branch 'master' into dev-build-script

Browse Source
This commit is contained in:
narcolepticinsomniac 2020-02-14 12:02:23 -05:00 committed by GitHub
commit d2f9ee4d54
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
13 changed files with 441 additions and 506 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
_locales/en/messages.json
View File

@ -1145,6 +1145,10 @@
"message": "Temporarily applies the changes without saving.\nSave the style to make the changes permanent.",
"description": "Tooltip for the checkbox in style editor to enable live preview while editing."
},
"reload": {
"message": "Reload Stylus extension",
"description": "Context menu reload"
},
"replace": {
"message": "Replace",
"description": "Label before the replace input field in the editor shown on Ctrl-H"

50
background/background.js
View File

@ -168,6 +168,9 @@ chrome.runtime.onInstalled.addListener(({reason}) => {
// "normal" = addon installed from webstore
chrome.management.getSelf(info => {
localStorage.installType = info.installType;
if (reason === 'install' && info.installType === 'development' && chrome.contextMenus) {
createContextMenus(['reload']);
}
});
if (reason !== 'update') return;
@ -187,6 +190,7 @@ browserCommands = {
styleDisableAll(info) {
prefs.set('disableAll', info ? info.checked : !prefs.get('disableAll'));
},
reload: () => chrome.runtime.reload(),
};
// *************************************************************************
@ -208,6 +212,11 @@ contextMenus = {
title: 'openOptions',
click: browserCommands.openOptions,
},
'reload': {
presentIf: () => localStorage.installType === 'development',
title: 'reload',
click: browserCommands.reload,
},
'editor.contextDelete': {
presentIf: () => !FIREFOX && prefs.get('editor.contextDelete'),
title: 'editDeleteText',
@ -220,28 +229,28 @@ contextMenus = {
}
};
if (chrome.contextMenus) {
const createContextMenus = ids => {
for (const id of ids) {
let item = contextMenus[id];
if (item.presentIf && !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 createContextMenus(ids) {
for (const id of ids) {
let item = contextMenus[id];
if (item.presentIf && !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) {
// circumvent the bug with disabling check marks in Chrome 62-64
const toggleCheckmark = CHROME >= 3172 && CHROME <= 3288 ?
(id => chrome.contextMenus.remove(id, () => createContextMenus([id]) + ignoreChromeError())) :
@ -299,7 +308,6 @@ function webNavUsercssInstallerFF(data) {
});
}
function webNavIframeHelperFF({tabId, frameId}) {
if (!frameId) return;
msg.sendTab(tabId, {method: 'ping'}, {frameId})

48
background/content-scripts.js
View File

@ -1,4 +1,4 @@
/* global msg queryTabs ignoreChromeError */
/* global msg queryTabs ignoreChromeError URLS */
/* exported contentScripts */
'use strict';
@ -15,6 +15,8 @@ const contentScripts = (() => {
m === ALL_URLS ? m : wildcardAsRegExp(m)
));
}
const busyTabs = new Set();
let busyTabsTimer;
return {injectToTab, injectToAllTabs};
function injectToTab({url, tabId, frameId = null}) {
@ -55,8 +57,12 @@ const contentScripts = (() => {
function injectToAllTabs() {
return queryTabs({}).then(tabs => {
for (const tab of tabs) {
// skip lazy-loaded aka unloaded tabs that seem to start loading on message in FF
if (tab.width) {
// skip unloaded/discarded/chrome tabs
if (!tab.width || tab.discarded || !URLS.supported(tab.url)) continue;
// our content scripts may still be pending injection at browser start so it's too early to ping them
if (tab.status === 'loading') {
trackBusyTab(tab.id, true);
} else {
injectToTab({
url: tab.url,
tabId: tab.id
@ -65,4 +71,40 @@ const contentScripts = (() => {
}
});
}
function toggleBusyTabListeners(state) {
const toggle = state ? 'addListener' : 'removeListener';
chrome.webNavigation.onCompleted[toggle](onBusyTabUpdated);
chrome.webNavigation.onErrorOccurred[toggle](onBusyTabUpdated);
chrome.webNavigation.onTabReplaced[toggle](onBusyTabReplaced);
chrome.tabs.onRemoved[toggle](onBusyTabRemoved);
if (state) {
busyTabsTimer = setTimeout(toggleBusyTabListeners, 15e3, false);
} else {
clearTimeout(busyTabsTimer);
}
}
function trackBusyTab(tabId, state) {
busyTabs[state ? 'add' : 'delete'](tabId);
if (state && busyTabs.size === 1) toggleBusyTabListeners(true);
if (!state && !busyTabs.size) toggleBusyTabListeners(false);
}
function onBusyTabUpdated({error, frameId, tabId, url}) {
if (!frameId && busyTabs.has(tabId)) {
trackBusyTab(tabId, false);
if (url && !error) {
injectToTab({tabId, url});
}
}
}
function onBusyTabReplaced({replacedTabId}) {
trackBusyTab(replacedTabId, false);
}
function onBusyTabRemoved(tabId) {
trackBusyTab(tabId, false);
}
})();

6
background/token-manager.js
View File

@ -1,4 +1,4 @@
/* global chromeLocal promisify */
/* global chromeLocal promisify FIREFOX */
/* exported tokenManager */
'use strict';
@ -43,7 +43,9 @@ const tokenManager = (() => {
clientSecret: '9Pj=TpsrStq8K@1BiwB9PIWLppM:@s=w',
authURL: 'https://login.microsoftonline.com/common/oauth2/v2.0/authorize',
tokenURL: 'https://login.microsoftonline.com/common/oauth2/v2.0/token',
redirect_uri: 'https://' + location.hostname + '.chromiumapp.org/',
redirect_uri: FIREFOX ?
'https://clngdbkpkpeebahjckkjfobafhncgmne.chromiumapp.org/' :
'https://' + location.hostname + '.chromiumapp.org/',
scopes: ['Files.ReadWrite.AppFolder', 'offline_access']
}
};

371
content/apply.js
View File

@ -1,42 +1,32 @@
/* eslint no-var: 0 */
/* global msg API prefs createStyleInjector */
/* exported APPLY */
'use strict';
// some weird bug in new Chrome: the content script gets injected multiple times
// define a constant so it throws when redefined
const APPLY = (() => {
const CHROME = chrome.app ? parseInt(navigator.userAgent.match(/Chrom\w+\/(?:\d+\.){2}(\d+)|$/)[1]) : NaN;
// Chrome reruns content script when documentElement is replaced.
// Note, we're checking against a literal `1`, not just `if (truthy)`,
// because <html id="INJECTED"> is exposed per HTML spec as a global variable and `window.INJECTED`.
// eslint-disable-next-line no-unused-expressions
self.INJECTED !== 1 && (() => {
self.INJECTED = 1;
const STYLE_VIA_API = !chrome.app && document instanceof XMLDocument;
const IS_OWN_PAGE = location.protocol.endsWith('-extension:');
const setStyleContent = createSetStyleContent();
const styleInjector = createStyleInjector({
compare: (a, b) => a.id - b.id,
setStyleContent,
onUpdate: onInjectorUpdate
});
const docRootObserver = createDocRootObserver({
onChange: () => {
if (styleInjector.outOfOrder()) {
styleInjector.sort();
return true;
}
}
});
const docRewriteObserver = createDocRewriteObserver({
onChange: () => {
docRootObserver.evade(styleInjector.sort);
}
onUpdate: onInjectorUpdate,
});
const initializing = init();
// save it now because chrome.runtime will be unavailable in the orphaned script
const orphanEventId = chrome.runtime.id;
let isOrphaned;
// firefox doesn't orphanize content scripts so the old elements stay
if (!chrome.app) styleInjector.clearOrphans();
msg.onTab(applyOnMessage);
if (!IS_OWN_PAGE) {
window.dispatchEvent(new CustomEvent(chrome.runtime.id, {
detail: pageObject({method: 'orphan'})
}));
window.addEventListener(chrome.runtime.id, orphanCheck, true);
if (!chrome.tabs) {
window.dispatchEvent(new CustomEvent(orphanEventId));
window.addEventListener(orphanEventId, orphanCheck, true);
}
let parentDomain;
@ -47,148 +37,20 @@ const APPLY = (() => {
}
function onInjectorUpdate() {
if (!IS_OWN_PAGE && styleInjector.list.length) {
docRewriteObserver.start();
docRootObserver.start();
} else {
docRewriteObserver.stop();
docRootObserver.stop();
if (!isOrphaned) {
updateCount();
updateExposeIframes();
}
updateCount();
updateExposeIframes();
}
function init() {
if (STYLE_VIA_API) {
return API.styleViaAPI({method: 'styleApply'});
}
return API.getSectionsByUrl(getMatchUrl())
.then(result =>
applyStyles(result)
.then(() => {
// CSS transition bug workaround: since we insert styles asynchronously,
// the browsers, especially Firefox, may apply all transitions on page load
if (styleInjector.list.some(s => s.code.includes('transition'))) {
applyTransitionPatch();
}
})
);
}
function pageObject(target) {
// https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Sharing_objects_with_page_scripts
const obj = new window.Object();
Object.assign(obj, target);
return obj;
}
function createSetStyleContent() {
// FF59+ bug workaround
// See https://github.com/openstyles/stylus/issues/461
// Since it's easy to spoof the browser version in pre-Quantum FF we're checking
// for getPreventDefault which got removed in FF59 https://bugzil.la/691151
const EVENT_NAME = chrome.runtime.id;
let ready;
return (el, content, disabled) =>
checkPageScript().then(ok => {
if (!ok) {
el.textContent = content;
// https://github.com/openstyles/stylus/issues/693
el.disabled = disabled;
} else {
const detail = pageObject({
method: 'setStyleContent',
id: el.id,
content,
disabled
});
window.dispatchEvent(new CustomEvent(EVENT_NAME, {detail}));
}
});
function checkPageScript() {
if (!ready) {
ready = CHROME || IS_OWN_PAGE || Event.prototype.getPreventDefault ?
Promise.resolve(false) : injectPageScript();
}
return ready;
}
function injectPageScript() {
const scriptContent = EVENT_NAME => {
document.currentScript.remove();
const available = checkStyleApplied();
if (available) {
window.addEventListener(EVENT_NAME, function handler(e) {
const {method, id, content, disabled} = e.detail;
if (method === 'setStyleContent') {
const el = document.getElementById(id);
if (!el) {
return;
}
el.textContent = content;
el.disabled = disabled;
} else if (method === 'orphan') {
window.removeEventListener(EVENT_NAME, handler);
}
}, true);
}
window.dispatchEvent(new CustomEvent(EVENT_NAME, {detail: {
method: 'init',
available
}}));
function checkStyleApplied() {
const style = document.createElement('style');
document.documentElement.appendChild(style);
const applied = Boolean(style.sheet);
style.remove();
return applied;
}
};
const code = `(${scriptContent})(${JSON.stringify(EVENT_NAME)})`;
// make sure it works in XML
const script = document.createElementNS('http://www.w3.org/1999/xhtml', 'script');
const {resolve, promise} = deferred();
// use inline script because using src is too slow
// https://github.com/openstyles/stylus/pull/766
script.text = code;
script.onerror = resolveFalse;
window.addEventListener('error', resolveFalse);
window.addEventListener(EVENT_NAME, handleInit);
(document.head || document.documentElement).appendChild(script);
// injection failed if handleInit is not called.
resolveFalse();
return promise.then(result => {
script.remove();
window.removeEventListener(EVENT_NAME, handleInit);
window.removeEventListener('error', resolveFalse);
return result;
});
function resolveFalse() {
resolve(false);
}
function handleInit(e) {
if (e.detail.method === 'init') {
resolve(e.detail.available);
}
}
}
}
function deferred() {
const o = {};
o.promise = new Promise((resolve, reject) => {
o.resolve = resolve;
o.reject = reject;
});
return o;
return STYLE_VIA_API ?
API.styleViaAPI({method: 'styleApply'}) :
API.getSectionsByUrl(getMatchUrl()).then(styleInjector.apply);
}
function getMatchUrl() {
var matchUrl = location.href;
let matchUrl = location.href;
if (!matchUrl.match(/^(http|file|chrome|ftp)/)) {
// dynamic about: and javascript: iframes don't have an URL yet
// so we'll try the parent frame which is guaranteed to have a real URL
@ -227,7 +89,7 @@ const APPLY = (() => {
if (!sections[request.style.id]) {
styleInjector.remove(request.style.id);
} else {
applyStyles(sections);
styleInjector.apply(sections);
}
});
} else {
@ -238,13 +100,13 @@ const APPLY = (() => {
case 'styleAdded':
if (request.style.enabled) {
API.getSectionsByUrl(getMatchUrl(), request.style.id)
.then(applyStyles);
.then(styleInjector.apply);
}
break;
case 'urlChanged':
API.getSectionsByUrl(getMatchUrl())
.then(replaceAll);
.then(styleInjector.replace);
break;
case 'backgroundReady':
@ -272,17 +134,12 @@ const APPLY = (() => {
}
function fetchParentDomain() {
if (parentDomain) {
return Promise.resolve();
}
return msg.send({
method: 'invokeAPI',
name: 'getTabUrlPrefix',
args: []
})
.then(newDomain => {
parentDomain = newDomain;
});
return parentDomain ?
Promise.resolve() :
API.getTabUrlPrefix()
.then(newDomain => {
parentDomain = newDomain;
});
}
function updateExposeIframes() {
@ -306,166 +163,22 @@ const APPLY = (() => {
}
if (STYLE_VIA_API) {
API.styleViaAPI({method: 'updateCount'}).catch(msg.ignoreError);
return;
} else {
API.updateIconBadge(styleInjector.list.length).catch(console.error);
}
// we have to send the tabId so we can't use `sendBg` that is used by `API`
msg.send({
method: 'invokeAPI',
name: 'updateIconBadge',
args: [styleInjector.list.length]
}).catch(console.error);
}
function rootReady() {
if (document.documentElement) {
return Promise.resolve();
}
return new Promise(resolve => {
new MutationObserver((mutations, observer) => {
if (document.documentElement) {
observer.disconnect();
resolve();
}
}).observe(document, {childList: true});
});
}
function applyStyles(sections) {
const styles = Object.values(sections);
if (!styles.length) {
return Promise.resolve();
}
return rootReady().then(() =>
docRootObserver.evade(() =>
styleInjector.addMany(
styles.map(s => ({id: s.id, code: s.code.join('')}))
)
)
);
}
function replaceAll(newStyles) {
styleInjector.replaceAll(
Object.values(newStyles)
.map(s => ({id: s.id, code: s.code.join('')}))
);
}
function applyTransitionPatch() {
// CSS transition bug workaround: since we insert styles asynchronously,
// the browsers, especially Firefox, may apply all transitions on page load
const el = styleInjector.createStyle('transition-patch');
// FIXME: this will trigger docRootObserver and cause a resort. We should
// move this function into style-injector.
document.documentElement.appendChild(el);
setStyleContent(el, `
:root:not(#\\0):not(#\\0) * {
transition: none !important;
}
`)
.then(afterPaint)
.then(() => {
el.remove();
});
}
function afterPaint() {
return new Promise(resolve => {
requestAnimationFrame(() => {
setTimeout(resolve);
});
});
}
function orphanCheck(e) {
if (e && e.detail.method !== 'orphan') {
return;
}
if (chrome.i18n && chrome.i18n.getUILanguage()) {
return true;
}
function orphanCheck() {
try {
if (chrome.i18n.getUILanguage()) return;
} catch (e) {}
// In Chrome content script is orphaned on an extension update/reload
// so we need to detach event listeners
window.removeEventListener(orphanEventId, orphanCheck, true);
isOrphaned = true;
styleInjector.clear();
window.removeEventListener(chrome.runtime.id, orphanCheck, true);
try {
msg.off(applyOnMessage);
} catch (e) {}
}
function createDocRewriteObserver({onChange}) {
// detect documentElement being rewritten from inside the script
let root;
let observing = false;
let timer;
const observer = new MutationObserver(check);
return {start, stop};
function start() {
if (observing) return;
// detect dynamic iframes rewritten after creation by the embedder i.e. externally
root = document.documentElement;
timer = setTimeout(check);
observer.observe(document, {childList: true});
observing = true;
}
function stop() {
if (!observing) return;
clearTimeout(timer);
observer.disconnect();
observing = false;
}
function check() {
if (root !== document.documentElement) {
root = document.documentElement;
onChange();
}
}
}
function createDocRootObserver({onChange}) {
let digest = 0;
let lastCalledTime = NaN;
let observing = false;
const observer = new MutationObserver(() => {
if (digest) {
if (performance.now() - lastCalledTime > 1000) {
digest = 0;
} else if (digest > 5) {
throw new Error('The page keeps generating mutations. Skip the event.');
}
}
if (onChange()) {
digest++;
lastCalledTime = performance.now();
}
});
return {start, stop, evade};
function start() {
if (observing) return;
observer.observe(document.documentElement, {childList: true});
observing = true;
}
function stop() {
if (!observing) return;
// FIXME: do we need this?
observer.takeRecords();
observer.disconnect();
observing = false;
}
function evade(fn) {
if (!observing) {
return fn();
}
stop();
const r = fn();
start();
return r;
}
}
})();

428
content/style-injector.js
View File

@ -1,89 +1,185 @@
/* exported createStyleInjector */
'use strict';
function createStyleInjector({compare, setStyleContent, onUpdate}) {
const CHROME = chrome.app ? parseInt(navigator.userAgent.match(/Chrom\w+\/(?:\d+\.){2}(\d+)|$/)[1]) : NaN;
self.createStyleInjector = self.INJECTED === 1 ? self.createStyleInjector : ({
compare,
onUpdate = () => {},
}) => {
const PREFIX = 'stylus-';
const PATCH_ID = 'transition-patch';
// styles are out of order if any of these elements is injected between them
const ORDERED_TAGS = new Set(['head', 'body', 'frameset', 'style', 'link']);
const IS_OWN_PAGE = Boolean(chrome.tabs);
// detect Chrome 65 via a feature it added since browser version can be spoofed
const isChromePre65 = chrome.app && typeof Worklet !== 'function';
const docRewriteObserver = RewriteObserver(_sort);
const docRootObserver = RootObserver(_sortIfNeeded);
const list = [];
const table = new Map();
let enabled = true;
let isEnabled = true;
let isTransitionPatched;
// will store the original method refs because the page can override them
let creationDoc, createElement, createElementNS;
return {
// manipulation
add,
addMany,
remove,
update,
apply,
clear,
replaceAll,
// method
clearOrphans,
remove,
replace,
toggle,
sort,
// state
outOfOrder,
list,
// static util
createStyle
};
function outOfOrder() {
if (!list.length) {
return false;
function apply(styleMap) {
const styles = _styleMapToArray(styleMap);
return !styles.length ?
Promise.resolve([]) :
docRootObserver.evade(() => {
if (!isTransitionPatched) _applyTransitionPatch(styles);
const els = styles.map(_apply);
_emitUpdate();
return els;
});
}
function clear() {
for (const style of list) {
style.el.remove();
}
let el = list[0].el;
if (el.parentNode !== document.documentElement) {
return true;
}
let i = 0;
while (el) {
if (i < list.length && el === list[i].el) {
i++;
} else if (ORDERED_TAGS.has(el.localName)) {
return true;
list.length = 0;
table.clear();
_emitUpdate();
}
function clearOrphans() {
for (const el of document.querySelectorAll(`style[id^="${PREFIX}"].stylus`)) {
const id = el.id.slice(PREFIX.length);
if (/^\d+$/.test(id) || id === PATCH_ID) {
el.remove();
}
el = el.nextSibling;
}
// some styles are not injected to the document
return i < list.length;
}
function addMany(styles) {
const pending = Promise.all(styles.map(_add));
emitUpdate();
return pending;
}
function add(style) {
const pending = _add(style);
emitUpdate();
return pending;
}
function _add(style) {
if (table.has(style.id)) {
return update(style);
}
style.el = createStyle(style.id);
const pending = setStyleContent(style.el, style.code, !enabled);
table.set(style.id, style);
const nextIndex = list.findIndex(i => compare(i, style) > 0);
if (nextIndex < 0) {
document.documentElement.appendChild(style.el);
list.push(style);
} else {
document.documentElement.insertBefore(style.el, list[nextIndex].el);
list.splice(nextIndex, 0, style);
}
return pending;
}
function remove(id) {
_remove(id);
emitUpdate();
_emitUpdate();
}
function replace(styleMap) {
const styles = _styleMapToArray(styleMap);
const added = new Set(styles.map(s => s.id));
const removed = [];
for (const style of list) {
if (!added.has(style.id)) {
removed.push(style.id);
}
}
styles.forEach(_apply);
removed.forEach(_remove);
_emitUpdate();
}
function toggle(_enabled) {
if (isEnabled === _enabled) return;
isEnabled = _enabled;
for (const style of list) {
style.el.disabled = !isEnabled;
}
}
function _add(style) {
const el = style.el = _createStyle(style.id, style.code);
table.set(style.id, style);
const nextIndex = list.findIndex(i => compare(i, style) > 0);
if (nextIndex < 0) {
document.documentElement.appendChild(el);
list.push(style);
} else {
document.documentElement.insertBefore(el, list[nextIndex].el);
list.splice(nextIndex, 0, style);
}
// moving an element resets its 'disabled' state
el.disabled = !isEnabled;
return el;
}
function _apply(style) {
return table.has(style.id) ? _update(style) : _add(style);
}
function _applyTransitionPatch(styles) {
isTransitionPatched = true;
// CSS transition bug workaround: since we insert styles asynchronously,
// the browsers, especially Firefox, may apply all transitions on page load
if (document.readyState === 'complete' ||
document.visibilityState === 'hidden' ||
!styles.some(s => s.code.includes('transition'))) {
return;
}
const el = _createStyle(PATCH_ID, `
:root:not(#\\0):not(#\\0) * {
transition: none !important;
}
`);
document.documentElement.appendChild(el);
// wait for the next paint to complete
// note: requestAnimationFrame won't fire in inactive tabs
requestAnimationFrame(() => setTimeout(() => el.remove()));
}
function _createStyle(id, code = '') {
if (!creationDoc) _initCreationDoc();
let el;
if (document.documentElement instanceof SVGSVGElement) {
// SVG document style
el = createElementNS.call(creationDoc, 'http://www.w3.org/2000/svg', 'style');
} else if (document instanceof XMLDocument) {
// XML document style
el = createElementNS.call(creationDoc, 'http://www.w3.org/1999/xhtml', 'style');
} else {
// HTML document style; also works on HTML-embedded SVG
el = createElement.call(creationDoc, 'style');
}
if (id) {
el.id = `${PREFIX}${id}`;
const oldEl = document.getElementById(el.id);
if (oldEl) oldEl.id += '-superseded-by-Stylus';
}
el.type = 'text/css';
// SVG className is not a string, but an instance of SVGAnimatedString
el.classList.add('stylus');
el.textContent = code;
return el;
}
function _emitUpdate() {
if (!IS_OWN_PAGE && list.length) {
docRewriteObserver.start();
docRootObserver.start();
} else {
docRewriteObserver.stop();
docRootObserver.stop();
}
onUpdate();
}
/*
FF59+ workaround: allow the page to read our sheets, https://github.com/openstyles/stylus/issues/461
First we're trying the page context document where inline styles may be forbidden by CSP
https://bugzilla.mozilla.org/show_bug.cgi?id=1579345#c3
and since userAgent.navigator can be spoofed via about:config or devtools,
we're checking for getPreventDefault that was removed in FF59
*/
function _initCreationDoc() {
creationDoc = !Event.prototype.getPreventDefault && document.wrappedJSObject;
if (creationDoc) {
({createElement, createElementNS} = creationDoc);
const el = document.documentElement.appendChild(_createStyle());
const isApplied = el.sheet;
el.remove();
if (isApplied) return;
}
creationDoc = document;
({createElement, createElementNS} = document);
}
function _remove(id) {
@ -94,91 +190,149 @@ function createStyleInjector({compare, setStyleContent, onUpdate}) {
style.el.remove();
}
function update({id, code}) {
function _sort() {
docRootObserver.evade(() => {
list.sort(compare);
for (const style of list) {
// moving an element resets its 'disabled' state
document.documentElement.appendChild(style.el);
style.el.disabled = !isEnabled;
}
});
}
function _sortIfNeeded() {
let needsSort;
let el = list.length && list[0].el;
if (!el) {
needsSort = false;
} else if (el.parentNode !== creationDoc.documentElement) {
needsSort = true;
} else {
let i = 0;
while (el) {
if (i < list.length && el === list[i].el) {
i++;
} else if (ORDERED_TAGS.has(el.localName)) {
needsSort = true;
break;
}
el = el.nextElementSibling;
}
// some styles are not injected to the document
if (i < list.length) needsSort = true;
}
if (needsSort) _sort();
return needsSort;
}
function _styleMapToArray(styleMap) {
return Object.values(styleMap).map(s => ({
id: s.id,
code: s.code.join(''),
}));
}
function _update({id, code}) {
const style = table.get(id);
if (style.code === code) return;
style.code = code;
// workaround for Chrome devtools bug fixed in v65
// https://github.com/openstyles/stylus/commit/0fa391732ba8e35fa68f326a560fc04c04b8608b
let oldEl;
if (CHROME < 3321) {
oldEl = style.el;
oldEl.id = '';
style.el = createStyle(id);
if (isChromePre65) {
const oldEl = style.el;
style.el = _createStyle(id, code);
oldEl.parentNode.insertBefore(style.el, oldEl.nextSibling);
style.el.disabled = !enabled;
}
return setStyleContent(style.el, code, !enabled)
.then(() => oldEl && oldEl.remove());
}
function createStyle(id) {
let el;
if (document.documentElement instanceof SVGSVGElement) {
// SVG document style
el = document.createElementNS('http://www.w3.org/2000/svg', 'style');
} else if (document instanceof XMLDocument) {
// XML document style
el = document.createElementNS('http://www.w3.org/1999/xhtml', 'style');
oldEl.remove();
} else {
// HTML document style; also works on HTML-embedded SVG
el = document.createElement('style');
style.el.textContent = code;
}
el.id = `${PREFIX}${id}`;
el.type = 'text/css';
// SVG className is not a string, but an instance of SVGAnimatedString
el.classList.add('stylus');
return el;
// https://github.com/openstyles/stylus/issues/693
style.el.disabled = !isEnabled;
}
function clear() {
for (const style of list) {
style.el.remove();
}
list.length = 0;
table.clear();
emitUpdate();
}
function RewriteObserver(onChange) {
// detect documentElement being rewritten from inside the script
let root;
let observing = false;
let timer;
const observer = new MutationObserver(_check);
return {start, stop};
function toggle(_enabled) {
if (enabled === _enabled) return;
enabled = _enabled;
for (const style of list) {
style.el.disabled = !enabled;
function start() {
if (observing) return;
// detect dynamic iframes rewritten after creation by the embedder i.e. externally
root = document.documentElement;
timer = setTimeout(_check);
observer.observe(document, {childList: true});
observing = true;
}
}
function sort() {
list.sort(compare);
for (const style of list) {
// FIXME: do we need this?
// const copy = document.importNode(el, true);
// el.textContent += ' '; // invalidate CSSOM cache
document.documentElement.appendChild(style.el);
// moving an element resets its 'disabled' state
style.el.disabled = !enabled;
function stop() {
if (!observing) return;
clearTimeout(timer);
observer.disconnect();
observing = false;
}
}
function emitUpdate() {
if (onUpdate) {
onUpdate();
}
}
function replaceAll(styles) {
const added = new Set(styles.map(s => s.id));
const removed = [];
for (const style of list) {
if (!added.has(style.id)) {
removed.push(style.id);
function _check() {
if (root !== document.documentElement) {
root = document.documentElement;
onChange();
}
}
// FIXME: is it possible that `docRootObserver` breaks the process?
return Promise.all(styles.map(_add))
.then(() => {
removed.forEach(_remove);
emitUpdate();
});
}
}
function RootObserver(onChange) {
let digest = 0;
let lastCalledTime = NaN;
let observing = false;
const observer = new MutationObserver(() => {
if (digest) {
if (performance.now() - lastCalledTime > 1000) {
digest = 0;
} else if (digest > 5) {
throw new Error('The page keeps generating mutations. Skip the event.');
}
}
if (onChange()) {
digest++;
lastCalledTime = performance.now();
}
});
return {evade, start, stop};
function evade(fn) {
const restore = observing && start;
stop();
return new Promise(resolve => _run(fn, resolve, _waitForRoot))
.then(restore);
}
function start() {
if (observing) return;
observer.observe(document.documentElement, {childList: true});
observing = true;
}
function stop() {
if (!observing) return;
// FIXME: do we need this?
observer.takeRecords();
observer.disconnect();
observing = false;
}
function _run(fn, resolve, wait) {
if (document.documentElement) {
resolve(fn());
return true;
}
if (wait) wait(fn, resolve);
}
function _waitForRoot(...args) {
new MutationObserver((_, observer) => _run(...args) && observer.disconnect())
.observe(document, {childList: true});
}
}
};

13
js/msg.js
View File

@ -1,9 +1,8 @@
/* global promisify deepCopy */
/* exported msg API */
// deepCopy is only used if the script is executed in extension pages.
'use strict';
const msg = (() => {
self.msg = self.INJECTED === 1 ? self.msg : (() => {
const runtimeSend = promisify(chrome.runtime.sendMessage.bind(chrome.runtime));
const tabSend = chrome.tabs && promisify(chrome.tabs.sendMessage.bind(chrome.tabs));
const tabQuery = chrome.tabs && promisify(chrome.tabs.query.bind(chrome.tabs));
@ -239,9 +238,15 @@ const msg = (() => {
}
})();
const API = new Proxy({}, {
self.API = self.INJECTED === 1 ? self.API : new Proxy({
// Handlers for these methods need sender.tab.id which is set by `send` as it uses messaging,
// unlike `sendBg` which invokes the background page directly in our own extension tabs
getTabUrlPrefix: true,
updateIconBadge: true,
styleViaAPI: true,
}, {
get: (target, name) =>
(...args) => Promise.resolve(msg.sendBg({
(...args) => Promise.resolve(self.msg[target[name] ? 'send' : 'sendBg']({
method: 'invokeAPI',
name,
args

9
js/polyfill.js
View File

@ -1,12 +1,19 @@
'use strict';
(() => {
// eslint-disable-next-line no-unused-expressions
self.INJECTED !== 1 && (() => {
if (!Object.entries) {
Object.entries = obj => Object.keys(obj).map(k => [k, obj[k]]);
}
if (!Object.values) {
Object.values = obj => Object.keys(obj).map(k => obj[k]);
}
// the above was shared by content scripts and workers,
// the rest is only needed for our extension pages
if (!self.chrome || !self.chrome.tabs) return;
if (typeof document === 'object') {
const ELEMENT_METH = {
append: {

3
js/prefs.js
View File

@ -1,8 +1,7 @@
/* global promisify */
/* exported prefs */
'use strict';
const prefs = (() => {
self.prefs = self.INJECTED === 1 ? self.prefs : (() => {
const defaults = {
'openEditInWindow': false, // new editor opens in a own browser window
'windowPosition': {}, // detached window position

6
js/promisify.js
View File

@ -1,4 +1,3 @@
/* exported promisify */
'use strict';
/*
Convert chrome APIs into promises. Example:
@ -7,8 +6,8 @@ Convert chrome APIs into promises. Example:
storageSyncGet(['key']).then(result => {...});
*/
function promisify(fn) {
return (...args) =>
self.promisify = self.INJECTED === 1 ? self.promisify : fn =>
(...args) =>
new Promise((resolve, reject) => {
fn(...args, (...result) => {
if (chrome.runtime.lastError) {
@ -21,4 +20,3 @@ function promisify(fn) {
);
});
});
}

5
manifest.json
View File

@ -1,6 +1,6 @@
{
"name": "Stylus",
"version": "1.5.7",
"version": "1.5.8",
"minimum_chrome_version": "49",
"description": "__MSG_description__",
"homepage_url": "https://add0n.com/stylus.html",
@ -59,6 +59,9 @@
"openManage": {
"description": "__MSG_openManage__"
},
"reload": {
"description": "__MSG_reload__"
},
"styleDisableAll": {
"description": "__MSG_disableAllStyles__"
}

2
package-lock.json generated
View File

@ -1,6 +1,6 @@
{
"name": "Stylus",
"version": "1.5.7",
"version": "1.5.8",
"lockfileVersion": 1,
"requires": true,
"dependencies": {

2
package.json
View File

@ -1,6 +1,6 @@
{
"name": "Stylus",
"version": "1.5.7",
"version": "1.5.8",
"description": "Redesign the web with Stylus, a user styles manager",
"license": "GPL-3.0-only",
"repository": "openstyles/stylus",