From bc6ea6a8787e920c0bf6831e5826f7937402c21b Mon Sep 17 00:00:00 2001
From: Jonas Jenwald <jonas.jenwald@gmail.com>
Date: Sun, 13 Mar 2022 23:21:32 +0100
Subject: [PATCH] Replace `dir`-dependent `float` 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 float-values in the CSS, we can use logical `inline-start`/`inline-end` 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 rely on PostCSS plugins in order to support this in the GENERIC viewer.

 - https://developer.mozilla.org/en-US/docs/Web/CSS/float#browser_compatibility
 - https://developer.mozilla.org/en-US/docs/Web/CSS/inset-inline-end#browser_compatibility
---
 web/viewer.css | 77 +++++++++++++-------------------------------------
 1 file changed, 20 insertions(+), 57 deletions(-)

diff --git a/web/viewer.css b/web/viewer.css
index 627fa98ec..e78a34ec6 100644
--- a/web/viewer.css
+++ b/web/viewer.css
@@ -668,46 +668,31 @@ html[dir="rtl"] .secondaryToolbar {
   transform: translateX(-50%);
 }
 
-html[dir="ltr"] #toolbarViewerLeft,
-html[dir="rtl"] #toolbarViewerRight,
-html[dir="ltr"] #toolbarSidebarLeft,
-html[dir="rtl"] #toolbarSidebarRight {
-  float: left;
+#toolbarViewerLeft,
+#toolbarSidebarLeft {
+  float: inline-start;
 }
-html[dir="ltr"] #toolbarViewerRight,
-html[dir="rtl"] #toolbarViewerLeft,
-html[dir="ltr"] #toolbarSidebarRight,
-html[dir="rtl"] #toolbarSidebarLeft {
-  float: right;
+#toolbarViewerRight,
+#toolbarSidebarRight {
+  float: inline-end;
 }
-html[dir="ltr"] #toolbarViewerLeft > *,
-html[dir="ltr"] #toolbarViewerMiddle > *,
-html[dir="ltr"] #toolbarViewerRight > *,
-html[dir="ltr"] #toolbarSidebarLeft *,
-html[dir="ltr"] #toolbarSidebarRight *,
-html[dir="ltr"] .findbar * {
+
+#toolbarViewerLeft > *,
+#toolbarViewerMiddle > *,
+#toolbarViewerRight > *,
+#toolbarSidebarLeft *,
+#toolbarSidebarRight *,
+.findbar * {
   position: relative;
-  float: left;
-}
-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;
+  float: inline-start;
 }
 
 .splitToolbarButton {
   margin: 2px 2px 0;
   display: inline-block;
 }
-html[dir="ltr"] .splitToolbarButton > .toolbarButton {
-  float: left;
-}
-html[dir="rtl"] .splitToolbarButton > .toolbarButton {
-  float: right;
+.splitToolbarButton > .toolbarButton {
+  float: inline-start;
 }
 
 .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;
 }