From 477dc08b00592ec6efb65d2a29a5bb75b74d0757 Mon Sep 17 00:00:00 2001
From: Jonas Jenwald <jonas.jenwald@gmail.com>
Date: Thu, 17 Mar 2022 11:43:32 +0100
Subject: [PATCH] Replace `dir`-dependent `border`-rules with logical
 properties

*Please note:* This is the final step in a series of patches to simplify/modernize the viewer CSS, since the remaining `html[dir="rtl"]`-cases cannot be converted.

Rather than having to manually specify ltr/rtl-specific border-values in the CSS, we can use logical `border-inline-end`/`border-start-end-radius`/`border-end-end-radius` instead.
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 the previously added PostCSS plugins in order to support this in the GENERIC viewer.

 - https://developer.mozilla.org/en-US/docs/Web/CSS/border-inline-end#browser_compatibility
 - https://developer.mozilla.org/en-US/docs/Web/CSS/border-start-end-radius#browser_compatibility
 - https://developer.mozilla.org/en-US/docs/Web/CSS/border-end-end-radius#browser_compatibility
---
 web/viewer.css | 31 ++++++-------------------------
 1 file changed, 6 insertions(+), 25 deletions(-)

diff --git a/web/viewer.css b/web/viewer.css
index 5544c2527..6070c868b 100644
--- a/web/viewer.css
+++ b/web/viewer.css
@@ -240,16 +240,11 @@ select {
   visibility: hidden;
   z-index: 100;
   border-top: 1px solid rgba(51, 51, 51, 1);
+  border-inline-end: var(--doorhanger-border-color-whcm);
   transition-property: inset-inline-start;
   transition-duration: var(--sidebar-transition-duration);
   transition-timing-function: var(--sidebar-transition-timing-function);
 }
-html[dir="ltr"] #sidebarContainer {
-  border-right: var(--doorhanger-border-color-whcm);
-}
-html[dir="rtl"] #sidebarContainer {
-  border-left: var(--doorhanger-border-color-whcm);
-}
 
 #outerContainer.sidebarResizing #sidebarContainer {
   /* Improve responsiveness and avoid visual glitches when the sidebar is resized. */
@@ -484,16 +479,9 @@ html[dir="rtl"] #toolbarSidebar {
 
 .findbar .splitToolbarButton > .findNext {
   width: 29px;
-}
-html[dir="ltr"] .findbar .splitToolbarButton > .findNext {
-  border-bottom-right-radius: 2px;
-  border-top-right-radius: 2px;
-  border-right: 1px solid var(--field-border-color);
-}
-html[dir="rtl"] .findbar .splitToolbarButton > .findNext {
-  border-bottom-left-radius: 2px;
-  border-top-left-radius: 2px;
-  border-left: 1px solid var(--field-border-color);
+  border-start-end-radius: 2px;
+  border-end-end-radius: 2px;
+  border-inline-end: 1px solid var(--field-border-color);
 }
 
 .findbar input[type="checkbox"] {
@@ -510,15 +498,6 @@ html[dir="rtl"] .findbar .splitToolbarButton > .findNext {
   background-color: var(--button-hover-color);
 }
 
-html[dir="ltr"] #findInput {
-  border-top-right-radius: 0;
-  border-bottom-right-radius: 0;
-}
-html[dir="rtl"] #findInput {
-  border-top-left-radius: 0;
-  border-bottom-left-radius: 0;
-}
-
 .findbar .toolbarField[type="checkbox"]:checked + .toolbarLabel {
   background-color: var(--toggled-btn-bg-color) !important;
   color: var(--toggled-btn-color);
@@ -526,6 +505,8 @@ html[dir="rtl"] #findInput {
 
 #findInput {
   width: 200px;
+  border-start-end-radius: 0;
+  border-end-end-radius: 0;
 }
 #findInput::-webkit-input-placeholder {
   color: rgba(191, 191, 191, 1);