Fix: transition fix is broken because setStyleContent becomes async

This commit is contained in:
eight 2018-10-30 15:03:45 +08:00
parent b9cc8b8ca5
commit 0e33e697e5

View File

@ -67,7 +67,7 @@ const APPLY = (() => {
const EVENT_NAME = chrome.runtime.id; const EVENT_NAME = chrome.runtime.id;
const usePageScript = CHROME || isOwnPage || Event.prototype.getPreventDefault ? const usePageScript = CHROME || isOwnPage || Event.prototype.getPreventDefault ?
Promise.resolve(false) : injectPageScript(); Promise.resolve(false) : injectPageScript();
return (el, content) => { return (el, content) =>
usePageScript.then(ok => { usePageScript.then(ok => {
if (!ok) { if (!ok) {
const disabled = el.disabled; const disabled = el.disabled;
@ -82,7 +82,6 @@ const APPLY = (() => {
window.dispatchEvent(new CustomEvent(EVENT_NAME, {detail})); window.dispatchEvent(new CustomEvent(EVENT_NAME, {detail}));
} }
}); });
};
function injectPageScript() { function injectPageScript() {
const scriptContent = EVENT_NAME => { const scriptContent = EVENT_NAME => {
@ -319,8 +318,9 @@ const APPLY = (() => {
} else { } else {
initDocRootObserver(); initDocRootObserver();
} }
const pending = [];
for (const section of Object.values(sections)) { for (const section of Object.values(sections)) {
applySections(section.id, section.code.join('')); pending.push(applySections(section.id, section.code.join('')));
} }
docRootObserver.firstStart(); docRootObserver.firstStart();
@ -331,7 +331,7 @@ const APPLY = (() => {
updateExposeIframes(); updateExposeIframes();
updateCount(); updateCount();
if (done) { if (done) {
done(); Promise.all(pending).then(done);
} }
} }
@ -359,12 +359,13 @@ const APPLY = (() => {
el.classList.add('stylus'); el.classList.add('stylus');
addStyleElement(el); addStyleElement(el);
} }
let settingStyle;
if (el.textContent !== code) { if (el.textContent !== code) {
setStyleContent(el, code); settingStyle = setStyleContent(el, code);
} }
styleElements.set(id, el); styleElements.set(id, el);
disabledElements.delete(id); disabledElements.delete(id);
return el; return Promise.resolve(settingStyle);
} }
function addStyleElement(newElement) { function addStyleElement(newElement) {
@ -420,12 +421,14 @@ const APPLY = (() => {
${docId}.${CSS.escape(className)}:root * { ${docId}.${CSS.escape(className)}:root * {
transition: none !important; transition: none !important;
} }
`); `)
// repaint .then(() => {
// eslint-disable-next-line no-unused-expressions // repaint
document.documentElement.offsetWidth; // eslint-disable-next-line no-unused-expressions
removeStyle({id: 0}); document.documentElement.offsetWidth;
document.documentElement.classList.remove(className); removeStyle({id: 0});
document.documentElement.classList.remove(className);
});
} }
function getStyleId(el) { function getStyleId(el) {