Fix: transition fix is broken because setStyleContent becomes async
This commit is contained in:
parent
b9cc8b8ca5
commit
0e33e697e5
|
@ -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) {
|
||||||
|
|
Loading…
Reference in New Issue
Block a user