2017-03-26 02:30:59 +00:00
|
|
|
// Not using some slow features of ES6, see http://kpdecker.github.io/six-speed/
|
|
|
|
// like destructring, classes, defaults, spread, calculated key names
|
|
|
|
/* eslint no-var: 0 */
|
|
|
|
'use strict';
|
2017-03-15 13:11:33 +00:00
|
|
|
|
2017-04-12 09:54:55 +00:00
|
|
|
var ID_PREFIX = 'stylus-';
|
|
|
|
var ROOT = document.documentElement;
|
2017-03-28 09:54:22 +00:00
|
|
|
var isOwnPage = location.href.startsWith('chrome-extension:');
|
2017-03-26 02:30:59 +00:00
|
|
|
var disableAll = false;
|
|
|
|
var styleElements = new Map();
|
2017-04-01 12:21:31 +00:00
|
|
|
var disabledElements = new Map();
|
2017-04-12 09:54:55 +00:00
|
|
|
var retiredStyleTimers = new Map();
|
|
|
|
var docRewriteObserver;
|
2015-04-30 12:32:19 +00:00
|
|
|
|
2015-05-06 16:53:41 +00:00
|
|
|
requestStyles();
|
2017-03-26 02:30:59 +00:00
|
|
|
chrome.runtime.onMessage.addListener(applyOnMessage);
|
|
|
|
|
2017-04-04 01:14:28 +00:00
|
|
|
if (!isOwnPage) {
|
|
|
|
window.dispatchEvent(new CustomEvent(chrome.runtime.id));
|
|
|
|
window.addEventListener(chrome.runtime.id, orphanCheck, true);
|
|
|
|
}
|
2015-05-06 16:53:41 +00:00
|
|
|
|
2017-04-12 12:31:05 +00:00
|
|
|
function requestStyles(options, callback = applyStyles) {
|
2017-04-12 09:54:55 +00:00
|
|
|
var matchUrl = location.href;
|
2017-04-12 12:31:05 +00:00
|
|
|
if (!matchUrl.match(/^(http|file|chrome|ftp)/)) {
|
2017-04-12 09:54:55 +00:00
|
|
|
// 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
|
2017-04-12 12:31:05 +00:00
|
|
|
try {
|
|
|
|
if (window != parent) {
|
|
|
|
matchUrl = parent.location.href;
|
|
|
|
}
|
|
|
|
} catch (e) {}
|
|
|
|
}
|
2017-03-26 02:30:59 +00:00
|
|
|
const request = Object.assign({
|
|
|
|
method: 'getStyles',
|
2017-04-12 09:54:55 +00:00
|
|
|
matchUrl,
|
2017-03-26 02:30:59 +00:00
|
|
|
enabled: true,
|
|
|
|
asHash: true,
|
|
|
|
}, options);
|
2017-04-21 08:59:01 +00:00
|
|
|
// On own pages we request the styles directly to minimize delay and flicker
|
2017-03-26 02:30:59 +00:00
|
|
|
if (typeof getStylesSafe !== 'undefined') {
|
2017-04-12 12:31:05 +00:00
|
|
|
getStylesSafe(request).then(callback);
|
2017-03-26 02:30:59 +00:00
|
|
|
} else {
|
2017-04-12 12:31:05 +00:00
|
|
|
chrome.runtime.sendMessage(request, callback);
|
2017-03-26 02:30:59 +00:00
|
|
|
}
|
2015-03-31 21:35:06 +00:00
|
|
|
}
|
2015-01-30 03:32:14 +00:00
|
|
|
|
2017-03-14 12:18:58 +00:00
|
|
|
|
|
|
|
function applyOnMessage(request, sender, sendResponse) {
|
2017-03-27 09:11:29 +00:00
|
|
|
if (request.styles == 'DIY') {
|
2017-04-12 12:31:05 +00:00
|
|
|
// Do-It-Yourself tells our built-in pages to fetch the styles directly
|
|
|
|
// which is faster because IPC messaging JSON-ifies everything internally
|
|
|
|
requestStyles({}, styles => {
|
|
|
|
request.styles = styles;
|
|
|
|
applyOnMessage(request);
|
|
|
|
});
|
2017-03-27 09:11:29 +00:00
|
|
|
return;
|
|
|
|
}
|
2017-04-21 08:59:01 +00:00
|
|
|
|
2017-03-31 08:46:18 +00:00
|
|
|
switch (request.method) {
|
2017-03-26 02:30:59 +00:00
|
|
|
|
|
|
|
case 'styleDeleted':
|
2017-04-12 09:54:55 +00:00
|
|
|
removeStyle(request);
|
2017-03-26 02:30:59 +00:00
|
|
|
break;
|
|
|
|
|
|
|
|
case 'styleUpdated':
|
|
|
|
if (request.codeIsUpdated === false) {
|
2017-04-12 09:54:55 +00:00
|
|
|
applyStyleState(request.style);
|
2017-03-26 02:30:59 +00:00
|
|
|
break;
|
|
|
|
}
|
2017-04-12 12:31:05 +00:00
|
|
|
if (request.style.enabled) {
|
|
|
|
removeStyle({id: request.style.id, retire: true});
|
|
|
|
requestStyles({id: request.style.id});
|
|
|
|
} else {
|
2017-04-12 09:54:55 +00:00
|
|
|
removeStyle(request.style);
|
2017-03-26 02:30:59 +00:00
|
|
|
}
|
2017-04-12 12:31:05 +00:00
|
|
|
break;
|
2017-03-26 02:30:59 +00:00
|
|
|
|
|
|
|
case 'styleAdded':
|
|
|
|
if (request.style.enabled) {
|
2017-04-12 06:15:57 +00:00
|
|
|
requestStyles({id: request.style.id});
|
2017-03-26 02:30:59 +00:00
|
|
|
}
|
|
|
|
break;
|
|
|
|
|
|
|
|
case 'styleApply':
|
|
|
|
applyStyles(request.styles);
|
|
|
|
break;
|
|
|
|
|
|
|
|
case 'styleReplaceAll':
|
2017-04-12 09:54:55 +00:00
|
|
|
replaceAll(request.styles);
|
2017-03-26 02:30:59 +00:00
|
|
|
break;
|
|
|
|
|
2017-03-31 08:46:18 +00:00
|
|
|
case 'prefChanged':
|
|
|
|
if ('disableAll' in request.prefs) {
|
|
|
|
doDisableAll(request.prefs.disableAll);
|
|
|
|
}
|
2017-03-26 02:30:59 +00:00
|
|
|
break;
|
|
|
|
|
|
|
|
case 'ping':
|
|
|
|
sendResponse(true);
|
|
|
|
break;
|
|
|
|
}
|
2017-03-14 12:18:58 +00:00
|
|
|
}
|
2015-01-30 03:32:14 +00:00
|
|
|
|
2017-03-26 02:30:59 +00:00
|
|
|
|
2017-04-12 09:54:55 +00:00
|
|
|
function doDisableAll(disable) {
|
|
|
|
if (!disable === !disableAll) {
|
2017-03-26 02:30:59 +00:00
|
|
|
return;
|
|
|
|
}
|
|
|
|
disableAll = disable;
|
2017-04-12 09:54:55 +00:00
|
|
|
Array.prototype.forEach.call(document.styleSheets, stylesheet => {
|
|
|
|
if (stylesheet.ownerNode.matches(`STYLE.stylus[id^="${ID_PREFIX}"]`)
|
2017-04-12 06:15:57 +00:00
|
|
|
&& stylesheet.disabled != disable) {
|
|
|
|
stylesheet.disabled = disable;
|
2017-03-26 02:30:59 +00:00
|
|
|
}
|
2017-04-12 06:15:57 +00:00
|
|
|
});
|
2015-03-17 18:03:20 +00:00
|
|
|
}
|
|
|
|
|
2017-03-26 02:30:59 +00:00
|
|
|
|
2017-04-12 09:54:55 +00:00
|
|
|
function applyStyleState({id, enabled}) {
|
|
|
|
const inCache = disabledElements.get(id) || styleElements.get(id);
|
|
|
|
const inDoc = document.getElementById(ID_PREFIX + id);
|
2017-04-21 08:59:01 +00:00
|
|
|
if (enabled) {
|
|
|
|
if (inDoc) {
|
|
|
|
return;
|
|
|
|
} else if (inCache) {
|
|
|
|
addStyleElement(inCache);
|
|
|
|
disabledElements.delete(id);
|
|
|
|
} else {
|
|
|
|
requestStyles({id});
|
|
|
|
}
|
|
|
|
} else {
|
|
|
|
if (inDoc) {
|
|
|
|
disabledElements.set(id, inDoc);
|
|
|
|
inDoc.remove();
|
2017-04-12 06:15:57 +00:00
|
|
|
}
|
2017-03-26 02:30:59 +00:00
|
|
|
}
|
Improve style caching, cache requests too, add code:false mode
Previously, when a cache was invalidated and every tab/iframe issued a getStyles request, we previous needlessly accessed IndexedDB for each of these requests. It happened because 1) the global cachedStyles was created only at the end of the async DB-reading, 2) and each style record is retrieved asynchronously so the single threaded JS engine interleaved all these operations. It could easily span a few seconds when many tabs are open and you have like 100 styles.
Now, in getStyles: all requests issued while cachedStyles is being populated are queued and invoked at the end.
Now, in filterStyles: all requests are cached using the request's options combined in a string as a key. It also helps on each navigation because we monitor page loading process at different stages: before, when committed, history traversal, requesting applicable styles by a content script. Icon badge update also may issue a copy of the just issued request by one of the navigation listeners.
Now, the caches are invalidated smartly: style add/update/delete/toggle only purges filtering cache, and modifies style cache in-place without re-reading the entire IndexedDB.
Now, code:false mode for manage page that only needs style meta. It reduces the transferred message size 10-100 times thus reducing the overhead caused by to internal JSON-fication in the extensions API.
Also fast&direct getStylesSafe for own pages; code cosmetics
2017-03-17 22:50:35 +00:00
|
|
|
}
|
|
|
|
|
2017-03-26 02:30:59 +00:00
|
|
|
|
2017-04-12 09:54:55 +00:00
|
|
|
function removeStyle({id, retire = false}) {
|
|
|
|
const el = document.getElementById(ID_PREFIX + id);
|
2017-03-26 02:30:59 +00:00
|
|
|
if (el) {
|
2017-04-12 09:54:55 +00:00
|
|
|
if (retire) {
|
|
|
|
// to avoid page flicker when the style is updated
|
|
|
|
// instead of removing it immediately we rename its ID and queue it
|
|
|
|
// to be deleted in applyStyles after a new version is fetched and applied
|
|
|
|
const deadID = 'ghost-' + id;
|
|
|
|
el.id = ID_PREFIX + deadID;
|
|
|
|
// in case something went wrong and new style was never applied
|
|
|
|
retiredStyleTimers.set(deadID, setTimeout(removeStyle, 1000, {id: deadID}));
|
|
|
|
} else {
|
|
|
|
el.remove();
|
|
|
|
}
|
2017-03-26 02:30:59 +00:00
|
|
|
}
|
2017-04-12 09:54:55 +00:00
|
|
|
styleElements.delete(ID_PREFIX + id);
|
|
|
|
disabledElements.delete(id);
|
|
|
|
retiredStyleTimers.delete(id);
|
2015-07-12 20:02:17 +00:00
|
|
|
}
|
|
|
|
|
2017-03-26 02:30:59 +00:00
|
|
|
|
2017-04-12 09:54:55 +00:00
|
|
|
function applyStyles(styles) {
|
|
|
|
if (!styles) {
|
|
|
|
// Chrome is starting up
|
2017-03-26 02:30:59 +00:00
|
|
|
requestStyles();
|
|
|
|
return;
|
|
|
|
}
|
2017-04-12 09:54:55 +00:00
|
|
|
if ('disableAll' in styles) {
|
|
|
|
doDisableAll(styles.disableAll);
|
|
|
|
delete styles.disableAll;
|
2017-03-26 02:30:59 +00:00
|
|
|
}
|
2017-04-12 09:54:55 +00:00
|
|
|
if (document.head
|
|
|
|
&& document.head.firstChild
|
|
|
|
&& document.head.firstChild.id == 'xml-viewer-style') {
|
2017-03-26 02:30:59 +00:00
|
|
|
// when site response is application/xml Chrome displays our style elements
|
|
|
|
// under document.documentElement as plain text so we need to move them into HEAD
|
|
|
|
// which is already autogenerated at this moment
|
2017-04-12 09:54:55 +00:00
|
|
|
ROOT = document.head;
|
2017-03-26 02:30:59 +00:00
|
|
|
}
|
2017-04-12 09:54:55 +00:00
|
|
|
for (const id in styles) {
|
|
|
|
applySections(id, styles[id]);
|
|
|
|
}
|
|
|
|
initDocRewriteObserver();
|
|
|
|
if (retiredStyleTimers.size) {
|
|
|
|
setTimeout(() => {
|
|
|
|
for (const [id, timer] of retiredStyleTimers.entries()) {
|
|
|
|
removeStyle({id});
|
|
|
|
clearTimeout(timer);
|
2017-03-26 02:30:59 +00:00
|
|
|
}
|
2017-04-12 09:54:55 +00:00
|
|
|
});
|
2017-03-26 02:30:59 +00:00
|
|
|
}
|
2015-01-30 03:32:14 +00:00
|
|
|
}
|
|
|
|
|
2017-03-26 02:30:59 +00:00
|
|
|
|
2015-01-30 16:36:46 +00:00
|
|
|
function applySections(styleId, sections) {
|
2017-04-12 09:54:55 +00:00
|
|
|
let el = document.getElementById(ID_PREFIX + styleId);
|
2017-03-26 02:30:59 +00:00
|
|
|
if (el) {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
if (document.documentElement instanceof SVGSVGElement) {
|
2017-04-21 08:59:01 +00:00
|
|
|
// SVG document style
|
2017-03-26 02:30:59 +00:00
|
|
|
el = document.createElementNS('http://www.w3.org/2000/svg', 'style');
|
2017-04-06 13:02:38 +00:00
|
|
|
} else if (document instanceof XMLDocument) {
|
2017-04-21 08:59:01 +00:00
|
|
|
// XML document style
|
2017-04-06 13:02:38 +00:00
|
|
|
el = document.createElementNS('http://www.w3.org/1999/xhtml', 'style');
|
2017-03-26 02:30:59 +00:00
|
|
|
} else {
|
2017-04-21 08:59:01 +00:00
|
|
|
// HTML document style; also works on HTML-embedded SVG
|
2017-03-26 02:30:59 +00:00
|
|
|
el = document.createElement('style');
|
|
|
|
}
|
2017-04-12 09:54:55 +00:00
|
|
|
Object.assign(el, {
|
|
|
|
id: ID_PREFIX + styleId,
|
|
|
|
className: 'stylus',
|
|
|
|
type: 'text/css',
|
|
|
|
textContent: sections.map(section => section.code).join('\n'),
|
|
|
|
});
|
|
|
|
addStyleElement(el);
|
2017-03-26 02:30:59 +00:00
|
|
|
styleElements.set(el.id, el);
|
2017-04-01 12:21:31 +00:00
|
|
|
disabledElements.delete(styleId);
|
2015-03-03 16:48:29 +00:00
|
|
|
}
|
|
|
|
|
2017-03-26 02:30:59 +00:00
|
|
|
|
2017-04-12 09:54:55 +00:00
|
|
|
function addStyleElement(el) {
|
|
|
|
if (ROOT && !document.getElementById(el.id)) {
|
|
|
|
ROOT.appendChild(el);
|
|
|
|
el.disabled = disableAll;
|
2017-03-26 02:30:59 +00:00
|
|
|
}
|
2015-04-30 12:32:19 +00:00
|
|
|
}
|
|
|
|
|
2017-03-26 02:30:59 +00:00
|
|
|
|
2017-04-12 09:54:55 +00:00
|
|
|
function replaceAll(newStyles) {
|
|
|
|
const oldStyles = Array.prototype.slice.call(
|
|
|
|
document.querySelectorAll(`STYLE.stylus[id^="${ID_PREFIX}"]`));
|
|
|
|
oldStyles.forEach(el => (el.id += '-ghost'));
|
|
|
|
styleElements.clear();
|
|
|
|
disabledElements.clear();
|
2017-04-21 08:59:01 +00:00
|
|
|
[...retiredStyleTimers.values()].forEach(clearTimeout);
|
2017-04-12 09:54:55 +00:00
|
|
|
retiredStyleTimers.clear();
|
|
|
|
applyStyles(newStyles);
|
|
|
|
oldStyles.forEach(el => el.remove());
|
2017-03-26 02:30:59 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
|
2017-04-12 09:54:55 +00:00
|
|
|
function initDocRewriteObserver() {
|
|
|
|
if (isOwnPage || docRewriteObserver || !styleElements.size) {
|
2017-03-26 02:30:59 +00:00
|
|
|
return;
|
|
|
|
}
|
2017-03-28 09:54:22 +00:00
|
|
|
// re-add styles if we detect documentElement being recreated
|
2017-04-12 09:54:55 +00:00
|
|
|
const reinjectStyles = () => {
|
2017-04-21 10:06:00 +00:00
|
|
|
if (!styleElements) {
|
|
|
|
return orphanCheck && orphanCheck();
|
|
|
|
}
|
2017-04-12 09:54:55 +00:00
|
|
|
ROOT = document.documentElement;
|
|
|
|
for (const el of styleElements.values()) {
|
|
|
|
addStyleElement(document.importNode(el, true));
|
|
|
|
}
|
|
|
|
};
|
|
|
|
// detect documentElement being rewritten from inside the script
|
|
|
|
docRewriteObserver = new MutationObserver(mutations => {
|
2017-04-15 10:25:48 +00:00
|
|
|
for (let m = mutations.length; --m >= 0;) {
|
|
|
|
const added = mutations[m].addedNodes;
|
|
|
|
for (let n = added.length; --n >= 0;) {
|
|
|
|
if (added[n].localName == 'html') {
|
2017-04-12 09:54:55 +00:00
|
|
|
reinjectStyles();
|
|
|
|
return;
|
2017-03-28 04:08:37 +00:00
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
2017-04-12 09:54:55 +00:00
|
|
|
});
|
|
|
|
docRewriteObserver.observe(document, {childList: true});
|
|
|
|
// detect dynamic iframes rewritten after creation by the embedder i.e. externally
|
2017-04-21 08:59:01 +00:00
|
|
|
setTimeout(() => {
|
|
|
|
if (document.documentElement != ROOT) {
|
|
|
|
reinjectStyles();
|
|
|
|
}
|
|
|
|
});
|
2015-04-30 12:32:19 +00:00
|
|
|
}
|
2017-03-28 04:08:37 +00:00
|
|
|
|
|
|
|
|
|
|
|
function orphanCheck() {
|
|
|
|
const port = chrome.runtime.connect();
|
|
|
|
if (port) {
|
|
|
|
port.disconnect();
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
|
|
|
// we're orphaned due to an extension update
|
|
|
|
// we can detach the mutation observer
|
2017-04-12 09:54:55 +00:00
|
|
|
if (docRewriteObserver) {
|
|
|
|
docRewriteObserver.disconnect();
|
|
|
|
}
|
2017-03-28 04:08:37 +00:00
|
|
|
// we can detach event listeners
|
2017-04-04 01:14:28 +00:00
|
|
|
window.removeEventListener(chrome.runtime.id, orphanCheck, true);
|
2017-03-28 04:08:37 +00:00
|
|
|
// we can't detach chrome.runtime.onMessage because it's no longer connected internally
|
|
|
|
// we can destroy our globals in this context to free up memory
|
|
|
|
[ // functions
|
|
|
|
'addStyleElement',
|
|
|
|
'applyOnMessage',
|
|
|
|
'applySections',
|
|
|
|
'applyStyles',
|
2017-04-12 09:54:55 +00:00
|
|
|
'applyStyleState',
|
2017-03-28 04:08:37 +00:00
|
|
|
'doDisableAll',
|
2017-03-28 09:54:22 +00:00
|
|
|
'initDocRewriteObserver',
|
2017-03-28 04:08:37 +00:00
|
|
|
'orphanCheck',
|
|
|
|
'removeStyle',
|
|
|
|
'replaceAll',
|
|
|
|
'requestStyles',
|
|
|
|
// variables
|
2017-04-12 09:54:55 +00:00
|
|
|
'ROOT',
|
|
|
|
'disabledElements',
|
|
|
|
'retiredStyleTimers',
|
2017-03-28 09:54:22 +00:00
|
|
|
'styleElements',
|
2017-04-12 09:54:55 +00:00
|
|
|
'docRewriteObserver',
|
2017-03-28 04:08:37 +00:00
|
|
|
].forEach(fn => (window[fn] = null));
|
|
|
|
}
|