[api-minor] Update the minimum supported browsers, and remove the Pos…

…tCSS `logical` plugin

The patch updates the minimum supported browsers/environments as follows:
 - Chrome 87, which was released on 2020-11-17; see https://en.wikipedia.org/wiki/Google_Chrome_version_history
 - Firefox ESR (no change); see https://wiki.mozilla.org/Release_Management/Calendar
 - Safari 14.1, which was released on 2021-04-26; see https://en.wikipedia.org/wiki/Safari_version_history#Safari_14
 - Node.js 14 (no change); see https://en.wikipedia.org/wiki/Node.js#Releases

The recent *major* release of the PostCSS `logical` plugin effectively removed support for all of the things that we used it for, which includes (but may not be limited to): preserving the original CSS code (for up-to-date browsers), re-writing the `:dir` pseudo-class, and support for re-writing `float: inline-start;`/`float: inline-end;` properties.
Please find additional details at https://github.com/csstools/postcss-plugins/blob/main/plugins/postcss-logical/CHANGELOG.md#600-january-24-2023
Hence the primary reason for these changes are related to native support for *logical* CSS properties/values. Currently, in the default viewer, we're using the following ones:
 - https://developer.mozilla.org/en-US/docs/Web/CSS/inset-inline-start#browser_compatibility
 - https://developer.mozilla.org/en-US/docs/Web/CSS/inset-inline-end#browser_compatibility
 - https://developer.mozilla.org/en-US/docs/Web/CSS/margin-inline-start#browser_compatibility
 - https://developer.mozilla.org/en-US/docs/Web/CSS/margin-inline-end#browser_compatibility
 - https://developer.mozilla.org/en-US/docs/Web/CSS/padding-inline-start#browser_compatibility
 - https://developer.mozilla.org/en-US/docs/Web/CSS/padding-inline-end#browser_compatibility
 - https://developer.mozilla.org/en-US/docs/Web/CSS/text-align#browser_compatibility
 - https://developer.mozilla.org/en-US/docs/Web/CSS/float#browser_compatibility

By updating the minimum supported browsers, we thus only have to worry about the *last* case here. Thankfully there's not that many `float: inline-start;`/`float: inline-end;` occurrences, and we can utilize CSS variables together with the pre-processor to support those in a way that won't affect the Firefox PDF Viewer.

gulpfile.js

@@ -18,7 +18,6 @@
 
 const autoprefixer = require("autoprefixer");
 const postcssDirPseudoClass = require("postcss-dir-pseudo-class");
-const postcssLogical = require("postcss-logical");
 const fs = require("fs");
 const gulp = require("gulp");
 const postcss = require("gulp-postcss");
@@ -80,9 +79,9 @@ const config = JSON.parse(fs.readFileSync(CONFIG_FILE).toString());
 
 const ENV_TARGETS = [
   "last 2 versions",
-  "Chrome >= 85",
+  "Chrome >= 87",
   "Firefox ESR",
-  "Safari >= 14",
+  "Safari >= 14.1",
   "Node >= 14",
   "> 1%",
   "not IE > 0",
@@ -912,11 +911,7 @@ function buildGeneric(defines, dir) {
     preprocessHTML("web/viewer.html", defines).pipe(gulp.dest(dir + "web")),
     preprocessCSS("web/viewer.css", defines)
       .pipe(
-        postcss([
-          postcssLogical({ preserve: true }),
-          postcssDirPseudoClass(),
-          autoprefixer(AUTOPREFIXER_CONFIG),
-        ])
+        postcss([postcssDirPseudoClass(), autoprefixer(AUTOPREFIXER_CONFIG)])
       )
       .pipe(gulp.dest(dir + "web")),
 
@@ -993,11 +988,7 @@ function buildComponents(defines, dir) {
     gulp.src(COMPONENTS_IMAGES).pipe(gulp.dest(dir + "images")),
     preprocessCSS("web/pdf_viewer.css", defines)
       .pipe(
-        postcss([
-          postcssLogical({ preserve: true }),
-          postcssDirPseudoClass(),
-          autoprefixer(AUTOPREFIXER_CONFIG),
-        ])
+        postcss([postcssDirPseudoClass(), autoprefixer(AUTOPREFIXER_CONFIG)])
       )
       .pipe(gulp.dest(dir)),
   ]);
@@ -1089,11 +1080,7 @@ function buildMinified(defines, dir) {
     preprocessHTML("web/viewer.html", defines).pipe(gulp.dest(dir + "web")),
     preprocessCSS("web/viewer.css", defines)
       .pipe(
-        postcss([
-          postcssLogical({ preserve: true }),
-          postcssDirPseudoClass(),
-          autoprefixer(AUTOPREFIXER_CONFIG),
-        ])
+        postcss([postcssDirPseudoClass(), autoprefixer(AUTOPREFIXER_CONFIG)])
       )
       .pipe(gulp.dest(dir + "web")),
 
@@ -1435,9 +1422,8 @@ gulp.task(
         preprocessCSS("web/viewer.css", defines)
           .pipe(
             postcss([
-              postcssLogical({ preserve: true }),
               postcssDirPseudoClass(),
-              autoprefixer({ overrideBrowserslist: ["Chrome >= 85"] }),
+              autoprefixer({ overrideBrowserslist: ["Chrome >= 87"] }),
             ])
           )
           .pipe(gulp.dest(CHROME_BUILD_CONTENT_DIR + "web")),
@@ -2005,7 +1991,6 @@ gulp.task("dev-css", function createDevCSS() {
     preprocessCSS("web/viewer.css", defines)
       .pipe(
         postcss([
-          postcssLogical({ preserve: true }),
           postcssDirPseudoClass(),
           autoprefixer({ overrideBrowserslist: ["last 1 versions"] }),
         ])

package.json

@@ -42,7 +42,6 @@
     "path2d-polyfill": "^2.0.1",
     "postcss": "^8.4.21",
     "postcss-dir-pseudo-class": "^7.0.0",
-    "postcss-logical": "^5.0.4",
     "prettier": "^2.8.3",
     "puppeteer": "^19.0.0",
     "rimraf": "^4.1.2",

web/viewer.css

@@ -17,6 +17,14 @@
 
 :root {
   --dir-factor: 1;
+  /*#if MOZCENTRAL*/
+  --inline-start: inline-start;
+  --inline-end: inline-end;
+  /*#else*/
+  --inline-start: left;
+  --inline-end: right;
+  /*#endif*/
+
   --sidebar-width: 200px;
   --sidebar-transition-duration: 200ms;
   --sidebar-transition-timing-function: ease;
@@ -114,6 +122,10 @@
 
 :root:dir(rtl) {
   --dir-factor: -1;
+  /*#if !MOZCENTRAL*/
+  --inline-start: right;
+  --inline-end: left;
+  /*#endif*/
 }
 
 @media (prefers-color-scheme: dark) {
@@ -658,11 +670,11 @@ body {
 
 #toolbarViewerLeft,
 #toolbarSidebarLeft {
-  float: inline-start;
+  float: var(--inline-start);
 }
 #toolbarViewerRight,
 #toolbarSidebarRight {
-  float: inline-end;
+  float: var(--inline-end);
 }
 
 #toolbarViewerLeft > *,
@@ -672,7 +684,7 @@ body {
 #toolbarSidebarRight *,
 .findbar * {
   position: relative;
-  float: inline-start;
+  float: var(--inline-start);
 }
 
 #toolbarViewerLeft {
@@ -690,7 +702,7 @@ body {
   display: inline-block;
 }
 .splitToolbarButton > .toolbarButton {
-  float: inline-start;
+  float: var(--inline-start);
 }
 
 .toolbarButton,
@@ -740,7 +752,7 @@ body {
 }
 
 .splitToolbarButtonSeparator {
-  float: inline-start;
+  float: var(--inline-start);
   margin: 4px 0;
   width: 1px;
   height: 20px;
@@ -1169,7 +1181,7 @@ a.secondaryToolbarButton[href="#"] {
 }
 
 .thumbnail {
-  float: inline-start;
+  float: var(--inline-start);
   margin: 0 10px 5px;
 }
 
@@ -1251,13 +1263,13 @@ a:focus > .thumbnail > .thumbnailSelectionRing,
   padding-inline-start: 4px;
 }
 #layersView .treeItem > a > label > input {
-  float: inline-start;
+  float: var(--inline-start);
   margin-top: 1px;
 }
 
 .treeItemToggler {
   position: relative;
-  float: inline-start;
+  float: var(--inline-start);
   height: 0;
   width: 0;
   color: rgba(255, 255, 255, 0.5);