339 lines
9.4 KiB
JavaScript
339 lines
9.4 KiB
JavaScript
'use strict';
|
|
|
|
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 isEnabled = true;
|
|
let isTransitionPatched;
|
|
// will store the original method refs because the page can override them
|
|
let creationDoc, createElement, createElementNS;
|
|
return {
|
|
apply,
|
|
clear,
|
|
clearOrphans,
|
|
remove,
|
|
replace,
|
|
toggle,
|
|
list,
|
|
};
|
|
|
|
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();
|
|
}
|
|
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();
|
|
}
|
|
}
|
|
}
|
|
|
|
function remove(id) {
|
|
_remove(id);
|
|
_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) {
|
|
const style = table.get(id);
|
|
if (!style) return;
|
|
table.delete(id);
|
|
list.splice(list.indexOf(style), 1);
|
|
style.el.remove();
|
|
}
|
|
|
|
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
|
|
if (isChromePre65) {
|
|
const oldEl = style.el;
|
|
style.el = _createStyle(id, code);
|
|
oldEl.parentNode.insertBefore(style.el, oldEl.nextSibling);
|
|
oldEl.remove();
|
|
} else {
|
|
style.el.textContent = code;
|
|
}
|
|
// https://github.com/openstyles/stylus/issues/693
|
|
style.el.disabled = !isEnabled;
|
|
}
|
|
|
|
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 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 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});
|
|
}
|
|
}
|
|
};
|