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

use wrappedJSObject to create style elements in page context

Browse Source
This commit is contained in:
tophf 2020-02-09 18:20:34 +03:00
parent 7109d33e4e
commit 8842247cd0
6 changed files with 186 additions and 275 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

270
content/apply.js
View File

@ -1,18 +1,18 @@
/* eslint no-var: 0 */
/* global msg API prefs createStyleInjector */ /* global msg API prefs createStyleInjector */
/* exported APPLY */
'use strict'; 'use strict';
// some weird bug in new Chrome: the content script gets injected multiple times // Chrome reruns content script when documentElement is replaced.
// define a constant so it throws when redefined // Note, we're checking against a literal `1`, not just `if (truthy)`,
const APPLY = (() => { // because <html id="INJECTED"> is exposed per HTML spec as a global variable and `window.INJECTED`.
const CHROME = chrome.app ? parseInt(navigator.userAgent.match(/Chrom\w+\/(?:\d+\.){2}(\d+)|$/)[1]) : NaN;
// eslint-disable-next-line no-unused-expressions
self.INJECTED !== 1 && (() => {
self.INJECTED = 1;
const STYLE_VIA_API = !chrome.app && document instanceof XMLDocument; const STYLE_VIA_API = !chrome.app && document instanceof XMLDocument;
const IS_OWN_PAGE = location.protocol.endsWith('-extension:'); const IS_OWN_PAGE = Boolean(chrome.tabs);
const setStyleContent = createSetStyleContent();
const styleInjector = createStyleInjector({ const styleInjector = createStyleInjector({
compare: (a, b) => a.id - b.id, compare: (a, b) => a.id - b.id,
setStyleContent,
onUpdate: onInjectorUpdate onUpdate: onInjectorUpdate
}); });
const docRootObserver = createDocRootObserver({ const docRootObserver = createDocRootObserver({
@ -29,14 +29,17 @@ const APPLY = (() => {
} }
}); });
const initializing = init(); 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); msg.onTab(applyOnMessage);
if (!IS_OWN_PAGE) { if (!IS_OWN_PAGE) {
window.dispatchEvent(new CustomEvent(chrome.runtime.id, { window.dispatchEvent(new CustomEvent(orphanEventId));
detail: pageObject({method: 'orphan'}) window.addEventListener(orphanEventId, orphanCheck, true);
}));
window.addEventListener(chrome.runtime.id, orphanCheck, true);
} }
let parentDomain; let parentDomain;
@ -54,141 +57,19 @@ const APPLY = (() => {
docRewriteObserver.stop(); docRewriteObserver.stop();
docRootObserver.stop(); docRootObserver.stop();
} }
if (isOrphaned) return;
updateCount(); updateCount();
updateExposeIframes(); updateExposeIframes();
} }
function init() { function init() {
if (STYLE_VIA_API) { return STYLE_VIA_API ?
return API.styleViaAPI({method: 'styleApply'}); API.styleViaAPI({method: 'styleApply'}) :
} API.getSectionsByUrl(getMatchUrl()).then(applyStyles);
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;
} }
function getMatchUrl() { function getMatchUrl() {
var matchUrl = location.href; let matchUrl = location.href;
if (!matchUrl.match(/^(http|file|chrome|ftp)/)) { if (!matchUrl.match(/^(http|file|chrome|ftp)/)) {
// dynamic about: and javascript: iframes don't have an URL yet // 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 // so we'll try the parent frame which is guaranteed to have a real URL
@ -316,78 +197,40 @@ const APPLY = (() => {
}).catch(console.error); }).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) { function applyStyles(sections) {
const styles = Object.values(sections); return new Promise(resolve => {
if (!styles.length) { const styles = styleMapToArray(sections);
return Promise.resolve(); if (styles.length) {
} docRootObserver.evade(() => {
return rootReady().then(() => styleInjector.addMany(styles);
docRootObserver.evade(() => resolve();
styleInjector.addMany( });
styles.map(s => ({id: s.id, code: s.code.join('')})) } else {
) resolve();
) }
); });
} }
function replaceAll(newStyles) { function replaceAll(newStyles) {
styleInjector.replaceAll( styleInjector.replaceAll(styleMapToArray(newStyles));
Object.values(newStyles)
.map(s => ({id: s.id, code: s.code.join('')}))
);
} }
function applyTransitionPatch() { function styleMapToArray(styleMap) {
// CSS transition bug workaround: since we insert styles asynchronously, return Object.values(styleMap).map(s => ({
// the browsers, especially Firefox, may apply all transitions on page load id: s.id,
const el = styleInjector.createStyle('transition-patch'); code: s.code.join(''),
// 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() { function orphanCheck() {
return new Promise(resolve => { try {
requestAnimationFrame(() => { if (chrome.i18n.getUILanguage()) return;
setTimeout(resolve); } catch (e) {}
});
});
}
function orphanCheck(e) {
if (e && e.detail.method !== 'orphan') {
return;
}
if (chrome.i18n && chrome.i18n.getUILanguage()) {
return true;
}
// In Chrome content script is orphaned on an extension update/reload // In Chrome content script is orphaned on an extension update/reload
// so we need to detach event listeners // so we need to detach event listeners
window.removeEventListener(orphanEventId, orphanCheck, true);
isOrphaned = true;
styleInjector.clear(); styleInjector.clear();
window.removeEventListener(chrome.runtime.id, orphanCheck, true);
try { try {
msg.off(applyOnMessage); msg.off(applyOnMessage);
} catch (e) {} } catch (e) {}
@ -459,13 +302,26 @@ const APPLY = (() => {
} }
function evade(fn) { function evade(fn) {
if (!observing) { if (observing) {
return fn(); stop();
_run(fn);
start();
} else {
_run(fn);
}
}
function _run(fn) {
if (document.documentElement) {
fn();
} else {
new MutationObserver((mutations, observer) => {
if (document.documentElement) {
observer.disconnect();
fn();
}
}).observe(document, {childList: true});
} }
stop();
const r = fn();
start();
return r;
} }
} }
})(); })();

171
content/style-injector.js
View File

@ -1,21 +1,27 @@
/* exported createStyleInjector */
'use strict'; 'use strict';
function createStyleInjector({compare, setStyleContent, onUpdate}) { self.createStyleInjector = self.INJECTED === 1 ? self.createStyleInjector : ({
const CHROME = chrome.app ? parseInt(navigator.userAgent.match(/Chrom\w+\/(?:\d+\.){2}(\d+)|$/)[1]) : NaN; compare,
onUpdate = () => {},
}) => {
const PREFIX = 'stylus-'; const PREFIX = 'stylus-';
const PATCH_ID = 'transition-patch';
// styles are out of order if any of these elements is injected between them // 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 ORDERED_TAGS = new Set(['head', 'body', 'frameset', 'style', 'link']);
// detect Chrome 65 via a feature it added since browser version can be spoofed
const isChromePre65 = chrome.app && typeof Worklet !== 'function';
const list = []; const list = [];
const table = new Map(); 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 { return {
// manipulation // manipulation
add,
addMany, addMany,
remove, remove,
update,
clear, clear,
clearOrphans,
replaceAll, replaceAll,
// method // method
@ -30,12 +36,32 @@ function createStyleInjector({compare, setStyleContent, onUpdate}) {
createStyle createStyle
}; };
/*
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 outOfOrder() { function outOfOrder() {
if (!list.length) { if (!list.length) {
return false; return false;
} }
let el = list[0].el; let el = list[0].el;
if (el.parentNode !== document.documentElement) { if (el.parentNode !== creationDoc.documentElement) {
return true; return true;
} }
let i = 0; let i = 0;
@ -45,45 +71,59 @@ function createStyleInjector({compare, setStyleContent, onUpdate}) {
} else if (ORDERED_TAGS.has(el.localName)) { } else if (ORDERED_TAGS.has(el.localName)) {
return true; return true;
} }
el = el.nextSibling; el = el.nextElementSibling;
} }
// some styles are not injected to the document // some styles are not injected to the document
return i < list.length; return i < list.length;
} }
function addMany(styles) { function addMany(styles) {
const pending = Promise.all(styles.map(_add)); if (!isTransitionPatched) _applyTransitionPatch(styles);
emitUpdate(); const els = styles.map(_add);
return pending; onUpdate();
} return els;
function add(style) {
const pending = _add(style);
emitUpdate();
return pending;
} }
function _add(style) { function _add(style) {
if (table.has(style.id)) { if (table.has(style.id)) {
return update(style); return _update(style);
} }
style.el = createStyle(style.id); const el = style.el = createStyle(style.id, style.code);
const pending = setStyleContent(style.el, style.code, !enabled);
table.set(style.id, style); table.set(style.id, style);
const nextIndex = list.findIndex(i => compare(i, style) > 0); const nextIndex = list.findIndex(i => compare(i, style) > 0);
if (nextIndex < 0) { if (nextIndex < 0) {
document.documentElement.appendChild(style.el); document.documentElement.appendChild(el);
list.push(style); list.push(style);
} else { } else {
document.documentElement.insertBefore(style.el, list[nextIndex].el); document.documentElement.insertBefore(el, list[nextIndex].el);
list.splice(nextIndex, 0, style); list.splice(nextIndex, 0, style);
} }
return pending; // moving an element resets its 'disabled' state
el.disabled = !isEnabled;
return el;
}
// CSS transition bug workaround: since we insert styles asynchronously,
// the browsers, especially Firefox, may apply all transitions on page load
function _applyTransitionPatch(styles) {
isTransitionPatched = document.readyState === 'complete';
if (isTransitionPatched || !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 remove(id) { function remove(id) {
_remove(id); _remove(id);
emitUpdate(); onUpdate();
} }
function _remove(id) { function _remove(id) {
@ -94,40 +134,57 @@ function createStyleInjector({compare, setStyleContent, onUpdate}) {
style.el.remove(); style.el.remove();
} }
function update({id, code}) { function _update({id, code}) {
const style = table.get(id); const style = table.get(id);
if (style.code === code) return; if (style.code === code) return;
style.code = code; style.code = code;
// workaround for Chrome devtools bug fixed in v65 // workaround for Chrome devtools bug fixed in v65
// https://github.com/openstyles/stylus/commit/0fa391732ba8e35fa68f326a560fc04c04b8608b if (isChromePre65) {
let oldEl; const oldEl = style.el;
if (CHROME < 3321) { style.el = createStyle(id, code);
oldEl = style.el;
oldEl.id = '';
style.el = createStyle(id);
oldEl.parentNode.insertBefore(style.el, oldEl.nextSibling); oldEl.parentNode.insertBefore(style.el, oldEl.nextSibling);
style.el.disabled = !enabled; oldEl.remove();
} else {
style.el.textContent = code;
} }
return setStyleContent(style.el, code, !enabled) // https://github.com/openstyles/stylus/issues/693
.then(() => oldEl && oldEl.remove()); style.el.disabled = !isEnabled;
} }
function createStyle(id) { function _supersede(domId) {
const el = document.getElementById(domId);
if (el) {
// remove if it looks like our style that wasn't cleaned up in orphanCheck
// (note, Firefox doesn't orphanize content scripts at all so orphanCheck will never run)
if (el.localName === 'style' && el.classList.contains('stylus')) {
el.remove();
} else {
el.id += ' superseded by Stylus';
}
}
}
function createStyle(id, code = '') {
if (!creationDoc) _initCreationDoc();
let el; let el;
if (document.documentElement instanceof SVGSVGElement) { if (document.documentElement instanceof SVGSVGElement) {
// SVG document style // SVG document style
el = document.createElementNS('http://www.w3.org/2000/svg', 'style'); el = createElementNS.call(creationDoc, 'http://www.w3.org/2000/svg', 'style');
} else if (document instanceof XMLDocument) { } else if (document instanceof XMLDocument) {
// XML document style // XML document style
el = document.createElementNS('http://www.w3.org/1999/xhtml', 'style'); el = createElementNS.call(creationDoc, 'http://www.w3.org/1999/xhtml', 'style');
} else { } else {
// HTML document style; also works on HTML-embedded SVG // HTML document style; also works on HTML-embedded SVG
el = document.createElement('style'); el = createElement.call(creationDoc, 'style');
}
if (id) {
el.id = `${PREFIX}${id}`;
_supersede(el.id);
} }
el.id = `${PREFIX}${id}`;
el.type = 'text/css'; el.type = 'text/css';
// SVG className is not a string, but an instance of SVGAnimatedString // SVG className is not a string, but an instance of SVGAnimatedString
el.classList.add('stylus'); el.classList.add('stylus');
el.textContent = code;
return el; return el;
} }
@ -137,14 +194,23 @@ function createStyleInjector({compare, setStyleContent, onUpdate}) {
} }
list.length = 0; list.length = 0;
table.clear(); table.clear();
emitUpdate(); onUpdate();
}
function clearOrphans() {
for (const el of document.querySelectorAll(`style[id^="${PREFIX}-"].stylus`)) {
const id = el.id.slice(PREFIX.length + 1);
if (/^\d+$/.test(id) || id === PATCH_ID) {
el.remove();
}
}
} }
function toggle(_enabled) { function toggle(_enabled) {
if (enabled === _enabled) return; if (isEnabled === _enabled) return;
enabled = _enabled; isEnabled = _enabled;
for (const style of list) { for (const style of list) {
style.el.disabled = !enabled; style.el.disabled = !isEnabled;
} }
} }
@ -156,13 +222,7 @@ function createStyleInjector({compare, setStyleContent, onUpdate}) {
// el.textContent += ' '; // invalidate CSSOM cache // el.textContent += ' '; // invalidate CSSOM cache
document.documentElement.appendChild(style.el); document.documentElement.appendChild(style.el);
// moving an element resets its 'disabled' state // moving an element resets its 'disabled' state
style.el.disabled = !enabled; style.el.disabled = !isEnabled;
}
}
function emitUpdate() {
if (onUpdate) {
onUpdate();
} }
} }
@ -174,11 +234,8 @@ function createStyleInjector({compare, setStyleContent, onUpdate}) {
removed.push(style.id); removed.push(style.id);
} }
} }
// FIXME: is it possible that `docRootObserver` breaks the process? styles.forEach(_add);
return Promise.all(styles.map(_add)) removed.forEach(_remove);
.then(() => { onUpdate();
removed.forEach(_remove);
emitUpdate();
});
} }
} };

7
js/msg.js
View File

@ -1,9 +1,8 @@
/* global promisify deepCopy */ /* global promisify deepCopy */
/* exported msg API */
// deepCopy is only used if the script is executed in extension pages. // deepCopy is only used if the script is executed in extension pages.
'use strict'; 'use strict';
const msg = (() => { self.msg = self.INJECTED === 1 ? self.msg : (() => {
const runtimeSend = promisify(chrome.runtime.sendMessage.bind(chrome.runtime)); const runtimeSend = promisify(chrome.runtime.sendMessage.bind(chrome.runtime));
const tabSend = chrome.tabs && promisify(chrome.tabs.sendMessage.bind(chrome.tabs)); const tabSend = chrome.tabs && promisify(chrome.tabs.sendMessage.bind(chrome.tabs));
const tabQuery = chrome.tabs && promisify(chrome.tabs.query.bind(chrome.tabs)); const tabQuery = chrome.tabs && promisify(chrome.tabs.query.bind(chrome.tabs));
@ -239,9 +238,9 @@ const msg = (() => {
} }
})(); })();
const API = new Proxy({}, { self.API = self.INJECTED === 1 ? self.API : new Proxy({}, {
get: (target, name) => get: (target, name) =>
(...args) => Promise.resolve(msg.sendBg({ (...args) => Promise.resolve(self.msg.sendBg({
method: 'invokeAPI', method: 'invokeAPI',
name, name,
args args

4
js/polyfill.js
View File

@ -1,6 +1,8 @@
'use strict'; 'use strict';
(() => { // eslint-disable-next-line no-unused-expressions
self.INJECTED !== 1 && (() => {
if (!Object.entries) { if (!Object.entries) {
Object.entries = obj => Object.keys(obj).map(k => [k, obj[k]]); Object.entries = obj => Object.keys(obj).map(k => [k, obj[k]]);
} }

3
js/prefs.js
View File

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

6
js/promisify.js
View File

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