From ecb622c93cf11fbfc47b8381a1c869ca9151582e Mon Sep 17 00:00:00 2001 From: eight Date: Sat, 13 Oct 2018 21:29:06 +0800 Subject: [PATCH] Fix: implement styleViaAPI --- background/style-manager.js | 8 ++--- background/style-via-api.js | 12 +++---- content/apply.js | 66 ++++++++++++++++--------------------- 3 files changed, 37 insertions(+), 49 deletions(-) diff --git a/background/style-manager.js b/background/style-manager.js index 31daaf7d..260a5a47 100644 --- a/background/style-manager.js +++ b/background/style-manager.js @@ -26,7 +26,7 @@ const styleManager = (() => { maybeMatch: Set, sections: Object { id: styleId, - code: String + code: Array }> } */ const cachedStyleForUrl = createCache({ @@ -353,13 +353,13 @@ const styleManager = (() => { if (urlMatchStyle(url, data) !== true) { return; } - let code = ''; + const code = []; for (const section of data.sections) { if (urlMatchSection(url, section) === true && !styleCodeEmpty(section.code)) { - code += section.code; + code.push(section.code); } } - return code; + return code.length && code; } function prepare() { diff --git a/background/style-via-api.js b/background/style-via-api.js index 954f2e7b..fedf935c 100644 --- a/background/style-via-api.js +++ b/background/style-via-api.js @@ -23,14 +23,14 @@ API_METHODS.styleViaAPI = !CHROME && (() => { let observingTabs = false; return function (request) { - const action = ACTIONS[request.action]; + const action = ACTIONS[request.method]; return !action ? NOP : action(request, this.sender) .catch(onError) .then(maybeToggleObserver); }; - function styleApply({id = null, ignoreUrlCheck}, {tab, frameId, url}) { + function styleApply({id = null, ignoreUrlCheck = false}, {tab, frameId, url}) { if (prefs.get('disableAll')) { return NOP; } @@ -42,15 +42,11 @@ API_METHODS.styleViaAPI = !CHROME && (() => { const tasks = []; for (const section of Object.values(sections)) { const styleId = section.id; - const code = section.code; - if (!code) { - delete frameStyles[styleId]; - continue; - } + const code = section.code.join('\n'); if (code === (frameStyles[styleId] || []).join('\n')) { continue; } - frameStyles[styleId] = [code]; + frameStyles[styleId] = section.code; tasks.push( browser.tabs.insertCSS(tab.id, { code, diff --git a/content/apply.js b/content/apply.js index a399d61d..f131a1db 100644 --- a/content/apply.js +++ b/content/apply.js @@ -7,6 +7,7 @@ // 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; + const STYLE_VIA_API = !chrome.app && document instanceof XMLDocument; var ID_PREFIX = 'stylus-'; var ROOT; var isOwnPage = location.protocol.endsWith('-extension:'); @@ -29,26 +30,23 @@ const APPLY = (() => { let parentDomain; - // FIXME: does it work with styleViaAPI? prefs.subscribe(['disableAll'], (key, value) => doDisableAll(value)); if (window !== parent) { prefs.subscribe(['exposeIframes'], updateExposeIframes); } function init() { - // FIXME: styleViaAPI // FIXME: getStylesFallback? - if (!chrome.app && document instanceof XMLDocument) { - return API.styleViaAPI({action: 'styleApply'}); + if (STYLE_VIA_API) { + return API.styleViaAPI({method: 'styleApply'}); } return API.getSectionsByUrl(getMatchUrl()) .then(result => { ROOT = document.documentElement; - const styles = Object.values(result); - // CSS transition bug workaround: since we insert styles asynchronously, - // the browsers, especially Firefox, may apply all transitions on page load - applyStyles(styles, () => { - if (styles.some(s => s.code.includes('transition'))) { + applyStyles(result, () => { + // CSS transition bug workaround: since we insert styles asynchronously, + // the browsers, especially Firefox, may apply all transitions on page load + if ([...styleElements.values()].some(n => n.textContent.includes('transition'))) { applyTransitionPatch(); } }); @@ -136,10 +134,6 @@ const APPLY = (() => { return matchUrl; } - function buildSections(cache) { - return Object.values(cache); - } - /** * TODO: remove when FF fixes the bug. * Firefox borks sendMessage in same-origin iframes that have 'src' with a real path on the site. @@ -163,12 +157,12 @@ const APPLY = (() => { // } function applyOnMessage(request) { - if (!chrome.app && document instanceof XMLDocument && request.method !== 'ping') { - request.action = request.method; - request.method = null; - request.styles = null; - if (request.style) { - request.style.sections = null; + if (request.method === 'ping') { + return true; + } + if (STYLE_VIA_API) { + if (request.method === 'urlChanged') { + request.method = 'styleReplaceAll'; } API.styleViaAPI(request); return; @@ -188,7 +182,7 @@ const APPLY = (() => { if (!sections[request.style.id]) { removeStyle(request.style); } else { - applyStyles(buildSections(sections)); + applyStyles(sections); } }); } else { @@ -199,20 +193,15 @@ const APPLY = (() => { case 'styleAdded': if (request.style.enabled) { API.getSectionsByUrl(getMatchUrl(), request.style.id) - .then(buildSections) .then(applyStyles); } break; case 'urlChanged': API.getSectionsByUrl(getMatchUrl()) - .then(buildSections) .then(replaceAll); break; - case 'ping': - return true; - case 'backgroundReady': initializing.catch(err => { if (msg.RX_NO_RECEIVER.test(err.message)) { @@ -232,12 +221,16 @@ const APPLY = (() => { return; } disableAll = disable; - Array.prototype.forEach.call(document.styleSheets, stylesheet => { - if (stylesheet.ownerNode.matches(`style.stylus[id^="${ID_PREFIX}"]`) - && stylesheet.disabled !== disable) { - stylesheet.disabled = disable; - } - }); + if (STYLE_VIA_API) { + API.styleViaAPI({method: 'prefChanged', prefs: {disableAll}}); + } else { + Array.prototype.forEach.call(document.styleSheets, stylesheet => { + if (stylesheet.ownerNode.matches(`style.stylus[id^="${ID_PREFIX}"]`) + && stylesheet.disabled !== disable) { + stylesheet.disabled = disable; + } + }); + } } function fetchParentDomain() { @@ -290,7 +283,6 @@ const APPLY = (() => { disabledElements.delete(id); } else { return API.getSectionsByUrl(getMatchUrl(), id) - .then(buildSections) .then(applyStyles); } } else { @@ -313,8 +305,8 @@ const APPLY = (() => { } } - function applyStyles(styles, done) { - if (!styles.length) { + function applyStyles(sections, done) { + if (!Object.keys(sections).length) { if (done) { done(); } @@ -325,7 +317,7 @@ const APPLY = (() => { new MutationObserver((mutations, observer) => { if (document.documentElement) { observer.disconnect(); - applyStyles(styles, done); + applyStyles(sections, done); } }).observe(document, {childList: true}); return; @@ -336,8 +328,8 @@ const APPLY = (() => { } else { initDocRootObserver(); } - for (const section of styles) { - applySections(section.id, section.code); + for (const section of Object.values(sections)) { + applySections(section.id, section.code.join('')); } docRootObserver.firstStart();