[Firefox] Use float: inline-start/inline-end directly in MOZCENTRAL builds (PR 15968 follow-up)

Currently `float: inline-start/inline-end` is only supported in Firefox, see https://developer.mozilla.org/en-US/docs/Web/CSS/float#browser_compatibility, and in order to support other browsers we're thus forced to jump through some hoops.
This leads to slightly less nice code in the *built-in* Firefox PDF Viewer, and this patch attempts to improve the current situation:
 - Use Stylelint to forbid direct use of `float: inline-start/inline-end` in the CSS files, to prevent future bugs in the general PDF.js viewer.
 - Do a build-time replacement, only in MOZCENTRAL builds, to replace the CSS-variables with raw `float: inline-start/inline-end` instances.
This commit is contained in:
Jonas Jenwald 2023-04-09 12:38:49 +02:00
parent 8398cabd17
commit d3d16b15ac
3 changed files with 10 additions and 4 deletions

View File

@ -8,6 +8,9 @@
"block-no-empty": true,
"declaration-block-no-redundant-longhand-properties": true,
"declaration-property-value-disallowed-list": {
"float": ["inline-start", "inline-end"]
},
"length-zero-no-unit": [true, {
ignore: ["custom-properties"]
}],

View File

@ -1288,6 +1288,10 @@ function preprocessDefaultPreferences(content) {
return licenseHeader + "\n" + MODIFICATION_WARNING + "\n" + content + "\n";
}
function replaceMozcentralCSS() {
return replace(/var\(--(inline-(?:start|end))\)/g, "$1");
}
gulp.task(
"mozcentral",
gulp.series(
@ -1357,10 +1361,12 @@ gulp.task(
preprocessCSS("web/viewer.css", defines)
.pipe(postcss([autoprefixer(MOZCENTRAL_AUTOPREFIXER_CONFIG)]))
.pipe(replaceMozcentralCSS())
.pipe(gulp.dest(MOZCENTRAL_CONTENT_DIR + "web")),
preprocessCSS("web/viewer-geckoview.css", defines)
.pipe(postcss([autoprefixer(MOZCENTRAL_AUTOPREFIXER_CONFIG)]))
.pipe(replaceMozcentralCSS())
.pipe(gulp.dest(MOZCENTRAL_CONTENT_DIR + "web")),
gulp

View File

@ -17,10 +17,7 @@
:root {
--dir-factor: 1;
/*#if MOZCENTRAL*/
--inline-start: inline-start;
--inline-end: inline-end;
/*#else*/
/*#if !MOZCENTRAL*/
--inline-start: left;
--inline-end: right;
/*#endif*/