Use inset-inline-start/end instead of left/right for better RTL support

#3689
piroor · Jan 7, 2025 · e204b43 · e204b43
1 parent 5a2720c
commit e204b43
Show file tree

Hide file tree

Showing 18 changed files with 101 additions and 246 deletions.
diff --git a/submodules/webextensions-lib-menu-ui b/submodules/webextensions-lib-menu-ui
diff --git a/webextensions/options/init.js b/webextensions/options/init.js
@@ -898,10 +898,7 @@ function initPreviews() {
             select.contains(event.target))
         return;
       const rect = select.getBoundingClientRect();
-      if (isRTL())
-        previewImage.style.right = `${rect.right}px`;
-      else
-        previewImage.style.left = `${rect.left}px`;
+      previewImage.style.insetInlineStart = `${isRTL() ? rect.right : rect.left}px`;
       previewImage.style.top  = `${rect.top - 5 - previewImage.offsetHeight}px`;
     });
     select.addEventListener('change', () => {

diff --git a/webextensions/options/options.css b/webextensions/options/options.css
@@ -155,6 +155,7 @@ label input[type="checkbox"] ~ img {
   box-shadow: 0.25em 0.25em 0.5em rgba(0, 0, 0, 0.45);
   display: inline-block;
   height: 125px /*83px*/;
+  inset-inline-start: 0;
   margin-inline-start: 0.5em;
   opacity: 0;
   pointer-events: none;
@@ -163,12 +164,6 @@ label input[type="checkbox"] ~ img {
   transition: opacity 0.25s ease-out;
   width: 120px /*80px*/;
 }
-:root:not(.rtl) .preview-image {
-  right: 0;
-}
-:root.rtl .preview-image {
-  left: 0;
-}
 .has-preview-image:not([data-value="-1"]):hover .preview-image {
   opacity: 1;
 }

diff --git a/webextensions/resources/group-tab.html b/webextensions/resources/group-tab.html
@@ -32,11 +32,11 @@
     bottom: 0;
     display: flex;
     flex-direction: column;
-    left: 0;
+    inset-inline-start: 0;
+    inset-inline-end: 0;
     padding-block: 1em 0;
     padding-inline: 0;
     position: fixed;
-    right: 0;
     top: 0;
   }
 
@@ -152,16 +152,11 @@
     box-shadow: 0 0 0.1em rgba(255, 255, 255, 0.3);
     content: " ";
     display: inline-block;
+    inset-inline-end: 0;
     opacity: 0;
     position: absolute;
     top: 0;
   }
-  :root:not(.rtl) .closebox::before {
-    right: 0;
-  }
-  :root.rtl .closebox::before {
-    left: 0;
-  }
 
   .closebox:hover::before {
     opacity: 0.1;
@@ -171,16 +166,11 @@
     background: var(--text-color);
     content: " ";
     display: inline-block;
+    inset-inline-end: 0;
     mask: url("/sidebar/styles/icons/close-16.svg") no-repeat center / 100%;
     position: absolute;
     top: 0;
   }
-  :root:not(.rtl) .closebox::after {
-    right: 0;
-  }
-  :root.rtl .closebox::after {
-    left: 0;
-  }
 
   #tabs a,
   #tabs span.link {
@@ -238,6 +228,7 @@
     display: inline-block;
     font-size: var(--throbber-size);
     height: var(--throbber-size);
+    inset-inline-start: calc(50% - var(--throbber-size));
     max-height: var(--throbber-size);
     max-width: var(--throbber-size);
     overflow: hidden;
@@ -251,12 +242,6 @@
     top: calc(50% - var(--throbber-size));
     transform: scale(2, 2);
   }
-  :root.updating:not(.has-contents):not(.rtl) .throbber {
-    left: calc(50% - var(--throbber-size));
-  }
-  :root.updating:not(.has-contents).rtl .throbber {
-    right: calc(50% - var(--throbber-size));
-  }
 
   :root.updating:not(.has-contents) .throbber::before {
     animation: throbber 1.05s steps(30) infinite; /* The FPS is reduced from 60 to 30 at https://bugzilla.mozilla.org/show_bug.cgi?id=1511095 */
@@ -282,6 +267,7 @@
     box-shadow: 0.2em 0.2em 0.5em rgba(0, 0, 0, 0.35);
     color: #efefef;
     display: none;
+    inset-inline-end: 0.5em;
     line-height: 1;
     margin-block: 1em 0;
     margin-inline: 1em 0;
@@ -293,12 +279,6 @@
     transition: opacity 150ms ease-out;
     z-idnex: 1000;
   }
-  :root:not(.rtl) #optionsHint {
-    right: 0.5em;
-  }
-  :root.rtl #optionsHint {
-    left: 0.5em;
-  }
   #optionHint:hover {
     opacity: 1;
   }

diff --git a/webextensions/resources/startup.html b/webextensions/resources/startup.html
@@ -74,15 +74,10 @@
     position: fixed;
     top: 0;
     font-size: 95%;
+    inset-inline-start: 0;
     text-align: start;
     transition: opacity 0.3s ease;
   }
-  :root:not(.rtl) .user-chrome-css {
-    left: 0;
-  }
-  :root.rtl .user-chrome-css {
-    right: 0;
-  }
   .user-chrome-css:not(:hover) {
     opacity: 0.65;
   }
@@ -95,25 +90,15 @@
     line-height: 1;
   }
   .user-chrome-css .arrow.top-tabbar {
+    inset-inline-start: 2em;
     top: 0;
     transform: rotate(180deg);
   }
-  :root:not(.rtl) .user-chrome-css .arrow.top-tabbar {
-    left: 2em;
-  }
-  :root.rtl .user-chrome-css .arrow.top-tabbar {
-    right: 2em;
-  }
   .user-chrome-css .arrow.sidebar-header {
+    inset-inline-start: 0;
     top: 1.8em;
     transform: rotate(90deg);
   }
-  :root:not(.rtl) .user-chrome-css .arrow.sidebar-header {
-    left: 0;
-  }
-  :root.rtl .user-chrome-css .arrow.sidebar-header {
-    right: 0;
-  }
   .user-chrome-css p {
     margin-block: 1em 0;
     margin-inline: 1em 0;

diff --git a/webextensions/sidebar/size.js b/webextensions/sidebar/size.js
@@ -261,7 +261,7 @@ export function calc(expression) {
   const box = document.createElement('span');
   const style = box.style;
   style.display       = 'inline-block';
-  style.left          = 0;
+  style.insetInlineStart = 0;
   style.height        = 0;
   style.overflow      = 'hidden';
   style.pointerEvents = 'none';
@@ -272,7 +272,7 @@ export function calc(expression) {
   const innerBox = box.appendChild(document.createElement('span'));
   const innerStyle = innerBox.style;
   innerStyle.display       = 'inline-block';
-  innerStyle.left          = 0;
+  innerStyle.insetInlineStart = 0;
   innerStyle.height        = 0;
   innerStyle.pointerEvents = 'none';
   innerStyle.position      = 'fixed';