Replace dir-dependent margin/margin-left/margin-right with logical properties

*Please note:* This is another step in what will, time permitting, become a series of patches to simplify/modernize the viewer CSS.

Rather than having to manually specify ltr/rtl-specific margin-values in the CSS, we can use logical margin instead (and similar for some related left/right occurrences).
These logical properties depend on, among other things, the direction of the HTML document which we *always* specify in the viewer.

Given that most of these logical CSS properties are fairly new, and that cross-browser support is thus somewhat limited (see below), we need to use a couple of PostCSS plugins (see below) in order to support this in the GENERIC viewer.

 - https://developer.mozilla.org/en-US/docs/Web/CSS/margin-inline#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/inset-inline-start#browser_compatibility
 - https://developer.mozilla.org/en-US/docs/Web/CSS/inset-inline-end#browser_compatibility

---

 - https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-logical
 - https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-dir-pseudo-class

gulpfile.js

@@ -17,7 +17,9 @@
 "use strict";
 
 const autoprefixer = require("autoprefixer");
-const calc = require("postcss-calc");
+const postcssCalc = require("postcss-calc");
+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");
@@ -849,7 +851,14 @@ function buildGeneric(defines, dir) {
 
     preprocessHTML("web/viewer.html", defines).pipe(gulp.dest(dir + "web")),
     preprocessCSS("web/viewer.css", defines)
-      .pipe(postcss([calc(), autoprefixer(AUTOPREFIXER_CONFIG)]))
+      .pipe(
+        postcss([
+          postcssCalc(),
+          postcssLogical({ preserve: true }),
+          postcssDirPseudoClass(),
+          autoprefixer(AUTOPREFIXER_CONFIG),
+        ])
+      )
       .pipe(gulp.dest(dir + "web")),
 
     gulp
@@ -925,7 +934,14 @@ function buildComponents(defines, dir) {
     createComponentsBundle(defines).pipe(gulp.dest(dir)),
     gulp.src(COMPONENTS_IMAGES).pipe(gulp.dest(dir + "images")),
     preprocessCSS("web/pdf_viewer.css", defines)
-      .pipe(postcss([calc(), autoprefixer(AUTOPREFIXER_CONFIG)]))
+      .pipe(
+        postcss([
+          postcssCalc(),
+          postcssLogical({ preserve: true }),
+          postcssDirPseudoClass(),
+          autoprefixer(AUTOPREFIXER_CONFIG),
+        ])
+      )
       .pipe(gulp.dest(dir)),
   ]);
 }
@@ -1015,7 +1031,14 @@ function buildMinified(defines, dir) {
 
     preprocessHTML("web/viewer.html", defines).pipe(gulp.dest(dir + "web")),
     preprocessCSS("web/viewer.css", defines)
-      .pipe(postcss([calc(), autoprefixer(AUTOPREFIXER_CONFIG)]))
+      .pipe(
+        postcss([
+          postcssCalc(),
+          postcssLogical({ preserve: true }),
+          postcssDirPseudoClass(),
+          autoprefixer(AUTOPREFIXER_CONFIG),
+        ])
+      )
       .pipe(gulp.dest(dir + "web")),
 
     gulp
@@ -1338,7 +1361,11 @@ gulp.task(
         ),
         preprocessCSS("web/viewer.css", defines)
           .pipe(
-            postcss([autoprefixer({ overrideBrowserslist: ["Chrome >= 73"] })])
+            postcss([
+              postcssLogical({ preserve: true }),
+              postcssDirPseudoClass(),
+              autoprefixer({ overrideBrowserslist: ["Chrome >= 73"] }),
+            ])
           )
           .pipe(gulp.dest(CHROME_BUILD_CONTENT_DIR + "web")),
 
@@ -1873,7 +1900,11 @@ gulp.task("dev-css", function createDevCSS() {
 
     preprocessCSS("web/viewer.css", defines)
       .pipe(
-        postcss([autoprefixer({ overrideBrowserslist: ["last 2 versions"] })])
+        postcss([
+          postcssLogical({ preserve: true }),
+          postcssDirPseudoClass(),
+          autoprefixer({ overrideBrowserslist: ["last 2 versions"] }),
+        ])
       )
       .pipe(gulp.dest(cssDir)),
   ]);

package-lock.json

@@ -48,6 +48,8 @@
         "needle": "^3.0.0",
         "postcss": "^8.4.7",
         "postcss-calc": "^8.2.4",
+        "postcss-dir-pseudo-class": "^6.0.4",
+        "postcss-logical": "^5.0.4",
         "prettier": "^2.5.1",
         "puppeteer": "^13.4.1",
         "rimraf": "^3.0.2",
@@ -14980,6 +14982,21 @@
         "postcss": "^8.2.2"
       }
     },
+    "node_modules/postcss-dir-pseudo-class": {
+      "version": "6.0.4",
+      "resolved": "https://registry.npmjs.org/postcss-dir-pseudo-class/-/postcss-dir-pseudo-class-6.0.4.tgz",
+      "integrity": "sha512-I8epwGy5ftdzNWEYok9VjW9whC4xnelAtbajGv4adql4FIF09rnrxnA9Y8xSHN47y7gqFIv10C5+ImsLeJpKBw==",
+      "dev": true,
+      "dependencies": {
+        "postcss-selector-parser": "^6.0.9"
+      },
+      "engines": {
+        "node": "^12 || ^14 || >=16"
+      },
+      "peerDependencies": {
+        "postcss": "^8.4"
+      }
+    },
     "node_modules/postcss-load-config": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-3.1.0.tgz",
@@ -15006,6 +15023,18 @@
         }
       }
     },
+    "node_modules/postcss-logical": {
+      "version": "5.0.4",
+      "resolved": "https://registry.npmjs.org/postcss-logical/-/postcss-logical-5.0.4.tgz",
+      "integrity": "sha512-RHXxplCeLh9VjinvMrZONq7im4wjWGlRJAqmAVLXyZaXwfDWP73/oq4NdIp+OZwhQUMj0zjqDfM5Fj7qby+B4g==",
+      "dev": true,
+      "engines": {
+        "node": "^12 || ^14 || >=16"
+      },
+      "peerDependencies": {
+        "postcss": "^8.4"
+      }
+    },
     "node_modules/postcss-media-query-parser": {
       "version": "0.2.3",
       "resolved": "https://registry.npmjs.org/postcss-media-query-parser/-/postcss-media-query-parser-0.2.3.tgz",
@@ -30222,6 +30251,15 @@
         "postcss-value-parser": "^4.2.0"
       }
     },
+    "postcss-dir-pseudo-class": {
+      "version": "6.0.4",
+      "resolved": "https://registry.npmjs.org/postcss-dir-pseudo-class/-/postcss-dir-pseudo-class-6.0.4.tgz",
+      "integrity": "sha512-I8epwGy5ftdzNWEYok9VjW9whC4xnelAtbajGv4adql4FIF09rnrxnA9Y8xSHN47y7gqFIv10C5+ImsLeJpKBw==",
+      "dev": true,
+      "requires": {
+        "postcss-selector-parser": "^6.0.9"
+      }
+    },
     "postcss-load-config": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-3.1.0.tgz",
@@ -30233,6 +30271,13 @@
         "yaml": "^1.10.2"
       }
     },
+    "postcss-logical": {
+      "version": "5.0.4",
+      "resolved": "https://registry.npmjs.org/postcss-logical/-/postcss-logical-5.0.4.tgz",
+      "integrity": "sha512-RHXxplCeLh9VjinvMrZONq7im4wjWGlRJAqmAVLXyZaXwfDWP73/oq4NdIp+OZwhQUMj0zjqDfM5Fj7qby+B4g==",
+      "dev": true,
+      "requires": {}
+    },
     "postcss-media-query-parser": {
       "version": "0.2.3",
       "resolved": "https://registry.npmjs.org/postcss-media-query-parser/-/postcss-media-query-parser-0.2.3.tgz",

package.json

@@ -41,6 +41,8 @@
     "needle": "^3.0.0",
     "postcss": "^8.4.7",
     "postcss-calc": "^8.2.4",
+    "postcss-dir-pseudo-class": "^6.0.4",
+    "postcss-logical": "^5.0.4",
     "prettier": "^2.5.1",
     "puppeteer": "^13.4.1",
     "rimraf": "^3.0.2",

web/viewer.css

@@ -355,18 +355,11 @@ html[dir="rtl"] #toolbarSidebar {
     0 0 1px rgba(0, 0, 0, 0.1);
 }
 
-html[dir="ltr"] #toolbarSidebar .toolbarButton {
+#toolbarSidebar .toolbarButton {
-  margin-right: 2px !important;
+  margin-inline-end: 2px !important;
 }
-html[dir="rtl"] #toolbarSidebar .toolbarButton {
+#toolbarSidebarRight .toolbarButton {
-  margin-left: 2px !important;
+  margin-inline-end: 3px !important;
-}
-
-html[dir="ltr"] #toolbarSidebarRight .toolbarButton {
-  margin-right: 3px !important;
-}
-html[dir="rtl"] #toolbarSidebarRight .toolbarButton {
-  margin-left: 3px !important;
 }
 
 #sidebarResizer {
@@ -510,14 +503,7 @@ html[dir="rtl"] .findbar {
 
 .findbar .splitToolbarButton {
   margin-top: 3px;
-}
+  margin-inline: 0 5px;
-html[dir="ltr"] .findbar .splitToolbarButton {
-  margin-left: 0;
-  margin-right: 5px;
-}
-html[dir="rtl"] .findbar .splitToolbarButton {
-  margin-left: 5px;
-  margin-right: 0;
 }
 
 .findbar .splitToolbarButton > .toolbarButton {
@@ -627,7 +613,7 @@ html[dir="rtl"] .secondaryToolbar {
 .doorHangerRight:after,
 .doorHangerRight:before {
   bottom: 100%;
-  border: solid rgba(0, 0, 0, 0);
+  border: 8px solid rgba(0, 0, 0, 0);
   content: " ";
   height: 0;
   width: 0;
@@ -635,14 +621,14 @@ html[dir="rtl"] .secondaryToolbar {
   pointer-events: none;
   opacity: var(--doorhanger-triangle-opacity-whcm);
 }
-.doorHanger:after,
-.doorHangerRight:after {
-  border-width: 8px;
-}
 .doorHanger:after {
+  inset-inline-start: 10px;
+  margin-inline-start: -8px;
   border-bottom-color: var(--toolbar-bg-color);
 }
 .doorHangerRight:after {
+  inset-inline-end: 10px;
+  margin-inline-end: -8px;
   border-bottom-color: var(--doorhanger-bg-color);
 }
 .doorHanger:before,
@@ -650,29 +636,13 @@ html[dir="rtl"] .secondaryToolbar {
   border-bottom-color: var(--doorhanger-border-color);
   border-width: 9px;
 }
-
+.doorHanger:before {
-html[dir="ltr"] .doorHanger:after,
+  inset-inline-start: 10px;
-html[dir="rtl"] .doorHangerRight:after {
+  margin-inline-start: -9px;
-  left: 10px;
-  margin-left: -8px;
 }
-
+.doorHangerRight:before {
-html[dir="ltr"] .doorHanger:before,
+  inset-inline-end: 10px;
-html[dir="rtl"] .doorHangerRight:before {
+  margin-inline-end: -9px;
-  left: 10px;
-  margin-left: -9px;
-}
-
-html[dir="rtl"] .doorHanger:after,
-html[dir="ltr"] .doorHangerRight:after {
-  right: 10px;
-  margin-right: -8px;
-}
-
-html[dir="rtl"] .doorHanger:before,
-html[dir="ltr"] .doorHangerRight:before {
-  right: 10px;
-  margin-right: -9px;
 }
 
 #findResultsCount {
@@ -788,9 +758,7 @@ html[dir="rtl"] .splitToolbarButton > .toolbarButton {
   position: relative;
 }
 html[dir="ltr"] .splitToolbarButton > .toolbarButton:first-child,
-html[dir="rtl"] .splitToolbarButton > .toolbarButton:last-child {
+html[dir="rtl"] .splitToolbarButton > .toolbarButton:last-child,
-  margin: 0;
-}
 html[dir="ltr"] .splitToolbarButton > .toolbarButton:last-child,
 html[dir="rtl"] .splitToolbarButton > .toolbarButton:first-child {
   margin: 0;
@@ -834,15 +802,13 @@ html[dir="rtl"] .splitToolbarButtonSeparator {
   box-sizing: border-box;
 }
 
-html[dir="ltr"] #toolbarViewerLeft > .toolbarButton:first-child,
+#toolbarViewerLeft > .toolbarButton:first-child {
-html[dir="rtl"] #toolbarViewerRight > .toolbarButton:last-child {
+  margin-inline-start: 2px;
-  margin-left: 2px;
+}
+#toolbarViewerRight > .toolbarButton:last-child {
+  margin-inline-end: 2px;
 }
 
-html[dir="ltr"] #toolbarViewerRight > .toolbarButton:last-child,
-html[dir="rtl"] #toolbarViewerLeft > .toolbarButton:first-child {
-  margin-right: 2px;
-}
 .toolbarButton:hover,
 .toolbarButton:focus-visible {
   background-color: var(--button-hover-color);
@@ -1178,12 +1144,6 @@ html[dir="rtl"] .toolbarButton.pdfSidebarNotification::after {
   width: 1px;
   background-color: var(--separator-color);
 }
-html[dir="ltr"] .verticalToolbarSeparator {
-  margin-left: 2px;
-}
-html[dir="rtl"] .verticalToolbarSeparator {
-  margin-right: 2px;
-}
 
 .horizontalToolbarSeparator {
   display: block;
@@ -1213,14 +1173,8 @@ html[dir="rtl"] .verticalToolbarSeparator {
   opacity: 0;
   position: absolute !important;
   left: 0;
-}
+  margin: 10px 0 3px;
-
+  margin-inline-start: 7px;
-html[dir="ltr"] .toolbarField[type="checkbox"] {
-  margin: 10px 0 3px 7px;
-}
-
-html[dir="rtl"] .toolbarField[type="checkbox"] {
-  margin: 10px 7px 3px 0;
 }
 
 .toolbarField.pageNumber {
@@ -1288,7 +1242,6 @@ html[dir="rtl"] .thumbnail {
 #thumbnailView > a:last-of-type > .thumbnail {
   margin-bottom: 10px;
 }
-
 #thumbnailView > a:last-of-type > .thumbnail:not([data-loaded]) {
   margin-bottom: 9px;
 }
@@ -1346,14 +1299,9 @@ a:focus > .thumbnail > .thumbnailSelectionRing,
   user-select: none;
 }
 
-html[dir="ltr"] .treeWithDeepNesting > .treeItem,
+.treeWithDeepNesting > .treeItem,
-html[dir="ltr"] .treeItem > .treeItems {
+.treeItem > .treeItems {
-  margin-left: 20px;
+  margin-inline-start: 20px;
-}
-
-html[dir="rtl"] .treeWithDeepNesting > .treeItem,
-html[dir="rtl"] .treeItem > .treeItems {
-  margin-right: 20px;
 }
 
 .treeItem > a {