Merge pull request #14671 from Snuffleupagus/float-inline

Replace `dir`-dependent `float` with logical properties

gulpfile.js

@@ -17,7 +17,6 @@
 "use strict";
 
 const autoprefixer = require("autoprefixer");
-const postcssCalc = require("postcss-calc");
 const postcssDirPseudoClass = require("postcss-dir-pseudo-class");
 const postcssLogical = require("postcss-logical");
 const fs = require("fs");
@@ -853,7 +852,6 @@ function buildGeneric(defines, dir) {
     preprocessCSS("web/viewer.css", defines)
       .pipe(
         postcss([
-          postcssCalc(),
           postcssLogical({ preserve: true }),
           postcssDirPseudoClass(),
           autoprefixer(AUTOPREFIXER_CONFIG),
@@ -936,7 +934,6 @@ function buildComponents(defines, dir) {
     preprocessCSS("web/pdf_viewer.css", defines)
       .pipe(
         postcss([
-          postcssCalc(),
           postcssLogical({ preserve: true }),
           postcssDirPseudoClass(),
           autoprefixer(AUTOPREFIXER_CONFIG),
@@ -1033,7 +1030,6 @@ function buildMinified(defines, dir) {
     preprocessCSS("web/viewer.css", defines)
       .pipe(
         postcss([
-          postcssCalc(),
           postcssLogical({ preserve: true }),
           postcssDirPseudoClass(),
           autoprefixer(AUTOPREFIXER_CONFIG),

package-lock.json

@@ -47,7 +47,6 @@
         "mkdirp": "^1.0.4",
         "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",
@@ -14969,19 +14968,6 @@
         "url": "https://opencollective.com/postcss/"
       }
     },
-    "node_modules/postcss-calc": {
-      "version": "8.2.4",
-      "resolved": "https://registry.npmjs.org/postcss-calc/-/postcss-calc-8.2.4.tgz",
-      "integrity": "sha512-SmWMSJmB8MRnnULldx0lQIyhSNvuDl9HfrZkaqqE/WHAhToYsAvDq+yAsA/kIyINDszOp3Rh0GFoNuH5Ypsm3Q==",
-      "dev": true,
-      "dependencies": {
-        "postcss-selector-parser": "^6.0.9",
-        "postcss-value-parser": "^4.2.0"
-      },
-      "peerDependencies": {
-        "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",
@@ -30241,16 +30227,6 @@
         "source-map-js": "^1.0.2"
       }
     },
-    "postcss-calc": {
-      "version": "8.2.4",
-      "resolved": "https://registry.npmjs.org/postcss-calc/-/postcss-calc-8.2.4.tgz",
-      "integrity": "sha512-SmWMSJmB8MRnnULldx0lQIyhSNvuDl9HfrZkaqqE/WHAhToYsAvDq+yAsA/kIyINDszOp3Rh0GFoNuH5Ypsm3Q==",
-      "dev": true,
-      "requires": {
-        "postcss-selector-parser": "^6.0.9",
-        "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",

package.json

@@ -40,7 +40,6 @@
     "mkdirp": "^1.0.4",
     "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",

web/viewer.css

@@ -244,12 +244,12 @@ select {
 }
 html[dir="ltr"] #sidebarContainer {
   transition-property: left;
-  left: calc(0px - var(--sidebar-width));
+  left: calc(-1 * var(--sidebar-width));
   border-right: var(--doorhanger-border-color-whcm);
 }
 html[dir="rtl"] #sidebarContainer {
   transition-property: right;
-  right: calc(0px - var(--sidebar-width));
+  right: calc(-1 * var(--sidebar-width));
   border-left: var(--doorhanger-border-color-whcm);
 }
 
@@ -668,46 +668,31 @@ html[dir="rtl"] .secondaryToolbar {
   transform: translateX(-50%);
 }
 
-html[dir="ltr"] #toolbarViewerLeft,
+#toolbarViewerLeft,
-html[dir="rtl"] #toolbarViewerRight,
+#toolbarSidebarLeft {
-html[dir="ltr"] #toolbarSidebarLeft,
+  float: inline-start;
-html[dir="rtl"] #toolbarSidebarRight {
-  float: left;
 }
-html[dir="ltr"] #toolbarViewerRight,
+#toolbarViewerRight,
-html[dir="rtl"] #toolbarViewerLeft,
+#toolbarSidebarRight {
-html[dir="ltr"] #toolbarSidebarRight,
+  float: inline-end;
-html[dir="rtl"] #toolbarSidebarLeft {
-  float: right;
 }
-html[dir="ltr"] #toolbarViewerLeft > *,
+
-html[dir="ltr"] #toolbarViewerMiddle > *,
+#toolbarViewerLeft > *,
-html[dir="ltr"] #toolbarViewerRight > *,
+#toolbarViewerMiddle > *,
-html[dir="ltr"] #toolbarSidebarLeft *,
+#toolbarViewerRight > *,
-html[dir="ltr"] #toolbarSidebarRight *,
+#toolbarSidebarLeft *,
-html[dir="ltr"] .findbar * {
+#toolbarSidebarRight *,
+.findbar * {
   position: relative;
-  float: left;
+  float: inline-start;
-}
-html[dir="rtl"] #toolbarViewerLeft > *,
-html[dir="rtl"] #toolbarViewerMiddle > *,
-html[dir="rtl"] #toolbarViewerRight > *,
-html[dir="rtl"] #toolbarSidebarLeft *,
-html[dir="rtl"] #toolbarSidebarRight *,
-html[dir="rtl"] .findbar * {
-  position: relative;
-  float: right;
 }
 
 .splitToolbarButton {
   margin: 2px 2px 0;
   display: inline-block;
 }
-html[dir="ltr"] .splitToolbarButton > .toolbarButton {
+.splitToolbarButton > .toolbarButton {
-  float: left;
+  float: inline-start;
-}
-html[dir="rtl"] .splitToolbarButton > .toolbarButton {
-  float: right;
 }
 
 .toolbarButton,
@@ -764,6 +749,7 @@ html[dir="rtl"] .splitToolbarButton > .toolbarButton:first-child {
   margin: 0;
 }
 .splitToolbarButtonSeparator {
+  float: inline-start;
   padding: 10px 0;
   width: 1px;
   background-color: var(--separator-color);
@@ -778,13 +764,6 @@ html[dir="rtl"] .splitToolbarButton > .toolbarButton:first-child {
   padding: 13px 0;
 }
 
-html[dir="ltr"] .splitToolbarButtonSeparator {
-  float: left;
-}
-html[dir="rtl"] .splitToolbarButtonSeparator {
-  float: right;
-}
-
 .toolbarButton,
 .dropdownToolbarButton,
 .secondaryToolbarButton,
@@ -1230,14 +1209,9 @@ html[dir="rtl"] .toolbarButton.pdfSidebarNotification::after {
 }
 
 .thumbnail {
+  float: inline-start;
   margin: 0 10px 5px;
 }
-html[dir="ltr"] .thumbnail {
-  float: left;
-}
-html[dir="rtl"] .thumbnail {
-  float: right;
-}
 
 #thumbnailView > a:last-of-type > .thumbnail {
   margin-bottom: 10px;
@@ -1332,11 +1306,13 @@ a:focus > .thumbnail > .thumbnailSelectionRing,
 
 .treeItemToggler {
   position: relative;
+  float: inline-start;
   height: 0;
   width: 0;
   color: rgba(255, 255, 255, 0.5);
 }
 .treeItemToggler::before {
+  inset-inline-end: 4px;
   mask-image: var(--treeitem-expanded-icon);
 }
 .treeItemToggler.treeItemsHidden::before {
@@ -1348,18 +1324,6 @@ html[dir="rtl"] .treeItemToggler.treeItemsHidden::before {
 .treeItemToggler.treeItemsHidden ~ .treeItems {
   display: none;
 }
-html[dir="ltr"] .treeItemToggler {
-  float: left;
-}
-html[dir="rtl"] .treeItemToggler {
-  float: right;
-}
-html[dir="ltr"] .treeItemToggler::before {
-  right: 4px;
-}
-html[dir="rtl"] .treeItemToggler::before {
-  left: 4px;
-}
 
 .treeItem.selected > a {
   background-color: var(--treeitem-selected-bg-color);
@@ -1396,7 +1360,6 @@ html[dir="rtl"] .treeItemToggler::before {
 #errorMessageLeft {
   float: left;
 }
-
 #errorMessageRight {
   float: right;
 }