improve CSS transition suppression on own pages in FF

This commit is contained in:
tophf 2017-09-03 23:52:06 +03:00
parent 538da08a95
commit 36d790e0c2
7 changed files with 49 additions and 5 deletions

View File

@ -196,7 +196,7 @@ function webNavigationListener(method, {url, tabId, frameId}) {
getStyles({matchUrl: url, enabled: true, asHash: true}).then(styles => {
if (method && URLS.supported(url) && tabId >= 0) {
if (method === 'styleApply') {
handleCssTransitionBug(tabId, frameId, styles);
handleCssTransitionBug({tabId, frameId, url, styles});
}
chrome.tabs.sendMessage(tabId, {
method,

View File

@ -726,7 +726,7 @@ function calcStyleDigest(style) {
}
function handleCssTransitionBug(tabId, frameId, styles) {
function handleCssTransitionBug({tabId, frameId, url, styles}) {
for (let id in styles) {
id |= 0;
if (!id) {
@ -743,7 +743,7 @@ function handleCssTransitionBug(tabId, frameId, styles) {
continue;
}
}
if (FIREFOX) {
if (FIREFOX && !url.startsWith(URLS.ownOrigin)) {
patchFirefox();
} else {
styles.needTransitionPatch = true;

View File

@ -2,6 +2,17 @@
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<style id="firefox-transitions-bug-suppressor">
/* restrict to FF */
@-moz-document url-prefix("") {
/* increased specificity to override sane selectors in user styles */
html#stylus.firefox #stylus-edit #header *,
html#stylus.firefox #stylus-edit #sections * {
transition: none !important;
}
}
</style>
<script src="js/dom.js"></script>
<script src="js/messaging.js"></script>
<script src="js/prefs.js"></script>

View File

@ -36,9 +36,10 @@ for (const type of [NodeList, NamedNodeMap, HTMLCollection, HTMLAllCollection])
window.addEventListener('resize', () => debounce(addTooltipsToEllipsized, 100));
}
// add favicon in Firefox
// eslint-disable-next-line no-unused-expressions
onDOMready().then(() => $('#firefox-transitions-bug-suppressor').remove());
if (navigator.userAgent.includes('Firefox')) {
// die if unable to access BG directly
chrome.windows.getCurrent(wnd => {
if (!BG && wnd.incognito) {
// private windows can't get bg page
@ -46,6 +47,7 @@ if (navigator.userAgent.includes('Firefox')) {
throw 0;
}
});
// add favicon in Firefox
setTimeout(() => {
if (!window.prefs) {
return;

View File

@ -8,6 +8,16 @@
<style id="style-overrides"></style>
<style id="firefox-transitions-bug-suppressor">
/* restrict to FF */
@-moz-document url-prefix("") {
/* increased specificity to override sane selectors in user styles */
html#stylus.firefox #stylus-manage #header * {
transition: none !important;
}
}
</style>
<!-- Notes:
* Chrome doesn't garbage-collect (or even leaks) SVG <symbol> referenced via <use> so we'll embed the code directly
* inter-tag whitespace in templates is automatically removed in localization.js

View File

@ -3,6 +3,17 @@
<head>
<title i18n-text-append="optionsHeading">Stylus </title>
<link rel="stylesheet" href="options/options.css">
<style id="firefox-transitions-bug-suppressor">
/* restrict to FF */
@-moz-document url-prefix("") {
/* increased specificity to override sane selectors in user styles */
html#stylus.firefox #options *, #stylus #notes * {
transition: none !important;
}
}
</style>
<script src="js/dom.js"></script>
<script src="js/messaging.js"></script>
<script src="js/localization.js"></script>

View File

@ -4,6 +4,16 @@
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<link rel="stylesheet" href="popup/popup.css">
<style id="firefox-transitions-bug-suppressor">
/* restrict to FF */
@-moz-document url-prefix("") {
/* increased specificity to override sane selectors in user styles */
html#stylus.firefox #stylus-popup #actions * {
transition: none !important;
}
}
</style>
<!-- Notes:
* Chrome doesn't garbage-collect (or even leaks) SVG <symbol> referenced via <use> so we'll embed the code directly
* inter-tag whitespace in templates is automatically removed in localization.js