open.source/stylus
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

make transition suppressor rule more robust

Browse Source
This commit is contained in:
tophf 2021-04-19 16:01:36 +03:00
parent 43f1da1b4c
commit 711f6502b5
3 changed files with 15 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
global.css
View File

@ -1,7 +1,6 @@
html#stylus #header *:not(#\0) {
/* This suppresses transitions on page open.
* WARNING! Must be the first rule here so dom.js can simply call deleteRule for index 0.
* Using an increased specificity to override sane selectors in user styles */
html#stylus #header *:not(#\0transition-suppressor) {
/* This suppresses a bug in all? browsers: they apply transitions during page load.
* Using an increased specificity to override sane selectors in user styles. */
transition: none !important;
}
body {

12
js/dom.js
View File

@ -437,8 +437,16 @@ async function waitForSheet({
window.on('resize', () => debounce(addTooltipsToEllipsized, 100));
});
// Using `load` event as we need transition bug suppressor active until everything loads
window.on('load', () => $('link[href^="global.css"]').sheet.deleteRule(0), {once: true});
window.on('load', () => {
const {sheet} = $('link[href^="global.css"]');
for (let i = 0, rule; (rule = sheet.cssRules[i]); i++) {
// Not using \0 in the id as it's converted to \xFFFD, probably a bug
if (/#.transition-suppressor/.test(rule.selectorText)) {
sheet.deleteRule(i);
break;
}
}
}, {once: true});
function addFaviconFF() {
const iconset = ['', 'light/'][prefs.get('iconset')] || '';

4
tools/test.js
View File

@ -6,8 +6,8 @@ testGlobalCss();
function testGlobalCss() {
const css = fs.readFileSync('global.css', {encoding: 'utf8'});
const ERR = 'global.css: the first rule must be the transition suppressor';
const RX_SUPPRESSOR = /^[^{}]+{\s*transition:\s*none\s*!\s*important/i;
const ERR = 'global.css: missing the transition suppressor rule';
const RX_SUPPRESSOR = /[^{}]+#\\0transition-suppressor[^{}]+{\s*transition:\s*none\s*!\s*important/i;
const RX_COMMENT = /\/\*([^*]|\*(?!\/))*(\*\/|$)/g;
if (!RX_SUPPRESSOR.test(css.replace(RX_COMMENT, ''))) {
console.error(ERR);