From 734ed6913ee4dced970774ca3eddbc51f34b6acc Mon Sep 17 00:00:00 2001
From: alstjr7375 <alstjr7375@daum.net>
Date: Mon, 5 Sep 2022 09:52:44 +0900
Subject: [PATCH 1/3] Fix: Menu - RTL support #387

---
 css/leptonChrome.css                   | 15 ++++++++++-----
 css/leptonContent.css                  | 20 ++++++++++++++------
 src/icons/layout/_activity_stream.scss | 17 ++++++++---------
 src/icons/layout/_bookmark_menu.scss   |  4 ++--
 src/icons/layout/_menu.scss            |  4 ++--
 src/icons/layout/_menu_common.scss     |  6 +++++-
 6 files changed, 41 insertions(+), 25 deletions(-)

diff --git a/css/leptonChrome.css b/css/leptonChrome.css
index d1e3c16..b211153 100644
--- a/css/leptonChrome.css
+++ b/css/leptonChrome.css
@@ -9106,9 +9106,13 @@
 
   /* Padding */
   :root {
+    --uc-menu-background-position: left;
     --context-menu-background-padding-default: 5px;
     --context-menu-background-padding: var(--context-menu-background-padding-default);
   }
+  :root:-moz-locale-dir(rtl) {
+    --uc-menu-background-position: right;
+  }
 
   :not(menu, #ContentSelectDropdown, #context-navigation) > menupopup > menuitem:not(.menuitem-iconic),
   :not(menu, #ContentSelectDropdown, #context-navigation) > menupopup > menu:not(.menu-iconic),
@@ -9130,19 +9134,20 @@
   .openintabs-menuitem,
   #blockedPopupDontShowMessage,
   #BMB_viewBookmarksToolbar {
-    background-position: left var(--context-menu-background-padding) center !important;
+    background-position: var(--uc-menu-background-position) var(--context-menu-background-padding) center !important;
     padding-inline-start: var(--context-menu-background-padding) !important;
   }
 
   /* Menubar */
   @supports -moz-bool-pref("userChrome.icon.global_menubar") {
     #main-menubar > menu {
-      background-position: left var(--context-menu-background-padding-default) center !important;
+      background-position: var(--uc-menu-background-position) var(--context-menu-background-padding-default) center !important;
       padding-inline-start: calc(16px + var(--context-menu-background-padding-default)) !important;
       padding-inline-end: 3px;
     }
     #main-menubar > menu:first-child {
-      background-position: left calc(3px + var(--context-menu-background-padding-default)) center !important;
+      background-position: var(--uc-menu-background-position) calc(3px + var(--context-menu-background-padding-default))
+        center !important;
       padding-inline-start: calc(19px + var(--context-menu-background-padding-default)) !important;
     }
     #main-menubar > menu > menupopup {
@@ -9311,7 +9316,7 @@
     #PersonalToolbar menupopup[placespopup="true"] menuitem:not(.menuitem-iconic, [disabled="true"]),
     #PersonalToolbar menupopup[placespopup="true"] menu:not(.menu-iconic) {
       margin-inline: var(--arrowpanel-menuitem-padding-inline) !important;
-      background-position: left calc(var(--arrowpanel-menuicon-padding)) center !important;
+      background-position: var(--uc-menu-background-position) calc(var(--arrowpanel-menuicon-padding)) center !important;
     }
 
     menupopup:is(#BMB_bookmarksPopup) menuitem:not(.menuitem-iconic, [disabled="true"]),
@@ -9335,7 +9340,7 @@
     #PersonalToolbar menupopup[placespopup="true"] menu:not(.menu-iconic) {
       margin-inline: var(--arrowpanel-menuitem-padding-inline) !important;
       padding-inline-start: calc(var(--arrowpanel-menuicon-padding) + var(--context-menu-text-padding)) !important;
-      background-position: left calc(var(--arrowpanel-menuicon-padding)) center !important;
+      background-position: var(--uc-menu-background-position) calc(var(--arrowpanel-menuicon-padding)) center !important;
     }
   }
   /* Linux */
diff --git a/css/leptonContent.css b/css/leptonContent.css
index 10cf40b..a451ead 100644
--- a/css/leptonContent.css
+++ b/css/leptonContent.css
@@ -279,15 +279,19 @@
     }
 
     .context-menu-list .context-menu-item button span {
-      padding-inline-start: 24px;
-      /* 16p + (4px *  2) */
+      /* Color */
       -moz-context-properties: fill, fill-opacity !important;
       fill: currentColor !important;
       /* Layout */
-      background-size: 16px;
-      background-repeat: no-repeat;
+      background-size: 16px !important;
+      background-repeat: no-repeat !important;
       background-image: var(--menuitem-image);
-      background-position: left 4px center;
+      padding-inline-start: 24px;
+      /* 16p + (4px *  2) */
+      background-position: var(--uc-menu-background-position, left) 4px center;
+    }
+    .context-menu-list .context-menu-item button span:dir(rtl) {
+      --uc-menu-background-position: right;
     }
 
     .context-menu-item span[data-l10n-id="newtab-menu-pin"] {
@@ -3037,9 +3041,13 @@
 
     /* Padding */
     :root {
+      --uc-menu-background-position: left;
       --context-menu-background-padding-default: 5px;
       --context-menu-background-padding: var(--context-menu-background-padding-default);
     }
+    :root:-moz-locale-dir(rtl) {
+      --uc-menu-background-position: right;
+    }
 
     menupopup:is(#placesContext, #placesColumnsContext, #downloadsContextMenu)
       menuitem:not(.menuitem-iconic, .bookmark-item, .in-menulist, [checked="true"]),
@@ -3048,7 +3056,7 @@
     menupopup:is(#organizeButtonPopup, #maintenanceButtonPopup)
       > menuitem:not(.menuitem-iconic, .bookmark-item, .in-menulist, [checked="true"]),
     menupopup:is(#viewMenuPopup, #maintenanceButtonPopup) > menu:not(.menu-iconic, .in-menulist, [checked="true"]) {
-      background-position: left var(--context-menu-background-padding) center !important;
+      background-position: var(--uc-menu-background-position) var(--context-menu-background-padding) center !important;
       padding-inline-start: var(--context-menu-background-padding) !important;
     }
 
diff --git a/src/icons/layout/_activity_stream.scss b/src/icons/layout/_activity_stream.scss
index fb5fcae..20d6121 100644
--- a/src/icons/layout/_activity_stream.scss
+++ b/src/icons/layout/_activity_stream.scss
@@ -1,16 +1,15 @@
+@import "./menu_common";
+
 .context-menu-list .context-menu-item button {
   padding-inline-start: 0 !important;
 }
 
 .context-menu-list .context-menu-item button span {
+  @include _layout_icon_menus;
+
   padding-inline-start: 24px; /* 16p + (4px *  2) */
-
-  -moz-context-properties: fill, fill-opacity !important;
-  fill: currentColor !important;
-
-  /* Layout */
-  background-size: 16px;
-  background-repeat: no-repeat;
-  background-image: var(--menuitem-image);
-  background-position: left 4px center;
+  background-position: var(--uc-menu-background-position, left) 4px center;
+  &:dir(rtl) {
+    --uc-menu-background-position: right;
+  }
 }
diff --git a/src/icons/layout/_bookmark_menu.scss b/src/icons/layout/_bookmark_menu.scss
index 5b55528..98beb65 100644
--- a/src/icons/layout/_bookmark_menu.scss
+++ b/src/icons/layout/_bookmark_menu.scss
@@ -66,7 +66,7 @@ $_bookmarkToolbarMenus: selector.nest(
   }
   @include _layoutBookmarkMenu() {
     margin-inline: var(--arrowpanel-menuitem-padding-inline) !important;
-    background-position: left calc(var(--arrowpanel-menuicon-padding)) center !important;
+    background-position: var(--uc-menu-background-position) calc(var(--arrowpanel-menuicon-padding)) center !important;
   }
   @include _layoutBookmarkPopup() {
     padding-inline-start: calc(var(--arrowpanel-menuicon-padding) + var(--context-menu-text-padding) + 2px) !important;
@@ -82,7 +82,7 @@ $_bookmarkToolbarMenus: selector.nest(
   @include _layoutBookmarkMenu() {
     margin-inline: var(--arrowpanel-menuitem-padding-inline) !important;
     padding-inline-start: calc(var(--arrowpanel-menuicon-padding) + var(--context-menu-text-padding)) !important;
-    background-position: left calc(var(--arrowpanel-menuicon-padding)) center !important;
+    background-position: var(--uc-menu-background-position) calc(var(--arrowpanel-menuicon-padding)) center !important;
   }
 }
 
diff --git a/src/icons/layout/_menu.scss b/src/icons/layout/_menu.scss
index 93aac39..074bb4a 100644
--- a/src/icons/layout/_menu.scss
+++ b/src/icons/layout/_menu.scss
@@ -56,12 +56,12 @@ $_layoutCommonMenus: (
 /* Menubar */
 @include Option("userChrome.icon.global_menubar") {
   #{$_globalMenus} {
-    background-position: left var(--context-menu-background-padding-default) center !important;
+    background-position: var(--uc-menu-background-position) var(--context-menu-background-padding-default) center !important;
     padding-inline-start: calc(16px + var(--context-menu-background-padding-default)) !important;
     padding-inline-end: 3px;
 
     &:first-child {
-      background-position: left calc(3px + var(--context-menu-background-padding-default)) center !important;
+      background-position: var(--uc-menu-background-position) calc(3px + var(--context-menu-background-padding-default)) center !important;
       padding-inline-start: calc(19px + var(--context-menu-background-padding-default)) !important;
     }
     > menupopup {
diff --git a/src/icons/layout/_menu_common.scss b/src/icons/layout/_menu_common.scss
index 5ed7246..b7bb0f5 100644
--- a/src/icons/layout/_menu_common.scss
+++ b/src/icons/layout/_menu_common.scss
@@ -62,12 +62,16 @@ $_initialMenus: selector.append(
 // Padding
 @mixin _layout_root_padding() {
   :root {
+    --uc-menu-background-position: left;
     --context-menu-background-padding-default: 5px;
     --context-menu-background-padding: var(--context-menu-background-padding-default);
+    &:-moz-locale-dir(rtl) {
+      --uc-menu-background-position: right;
+    }
   }
 }
 @mixin _layout_init_padding() {
-  background-position: left var(--context-menu-background-padding) center !important;
+  background-position: var(--uc-menu-background-position) var(--context-menu-background-padding) center !important;
   padding-inline-start: var(--context-menu-background-padding) !important;
 }
 

From bad60c68fdc4b1d10169593b1259ab5c9c6c49d6 Mon Sep 17 00:00:00 2001
From: alstjr7375 <alstjr7375@daum.net>
Date: Tue, 6 Sep 2022 09:58:43 +0900
Subject: [PATCH 2/3] Fix: Tab Bar - RTL support #387

---
 css/leptonChrome.css                          | 73 +++++++++++++++----
 src/padding/_tabbar_width.scss                |  4 +
 src/tab/_container_tab.scss                   |  7 +-
 src/tab/sound_tab/_show_with_favicons.scss    | 30 ++++++--
 .../unselected_tab/_dynamic_separator.scss    | 20 ++++-
 5 files changed, 109 insertions(+), 25 deletions(-)

diff --git a/css/leptonChrome.css b/css/leptonChrome.css
index b211153..97285a6 100644
--- a/css/leptonChrome.css
+++ b/css/leptonChrome.css
@@ -3192,6 +3192,10 @@
     --uc-title-post-spacer: 25px;
     /* Original: 40px */
   }
+  :root:-moz-locale-dir(rtl) {
+    --uc-title-pre-spacer: 25px;
+    --uc-title-post-spacer: 30px;
+  }
 
   @supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled") {
     .titlebar-spacer[type="pre-tabs"] {
@@ -6329,6 +6333,18 @@
 /*= Unselected Tab - Divide line =============================================*/
 /*= Unselected Tab - Dynamic Separator =======================================*/
 @supports -moz-bool-pref("userChrome.tab.dynamic_separtor") {
+  #tabbrowser-arrowscrollbox {
+    --start-tab-separator-position-x: -1.5px;
+    --end-tab-separator-position-x: 1.5px;
+    --tab-separator-position-x: -2.5px;
+    --tab-separator-position-y: calc(-50% + 1px);
+  }
+  #tabbrowser-arrowscrollbox:-moz-locale-dir(rtl) {
+    --start-tab-separator-position-x: 1.5px;
+    --end-tab-separator-position-x: -1.5px;
+    --tab-separator-position-x: 2.5px;
+  }
+
   @supports -moz-bool-pref("userChrome.tab.newtab_button_like_tab") {
     #tabbrowser-arrowscrollbox {
       position: absolute;
@@ -6349,7 +6365,7 @@
       opacity: 0;
       background-color: var(--toolbarseparator-color);
       /* More position */
-      transform: translateX(-2.5px) translateY(calc(-50% + 1px));
+      transform: translateX(var(--tab-separator-position-x)) translateY(var(--tab-separator-position-y));
     }
     @supports -moz-bool-pref("userChrome.compatibility.dynamic_separator") {
       .tab-background::before,
@@ -6386,12 +6402,12 @@
     }
 
     .tab-background::before {
-      transform: translateX(-2.5px) translateY(calc(-50% + 1px)) !important;
+      transform: translateX(var(--tab-separator-position-x)) translateY(var(--tab-separator-position-y)) !important;
     }
 
     .tabbrowser-tab[last-visible-tab] .tab-background::after {
       right: 0;
-      transform: translateX(1.5px) translateY(calc(-50% + 1px)) !important;
+      transform: translateX(var(--end-tab-separator-position-x)) translateY(var(--tab-separator-position-y)) !important;
     }
   }
   .tabbrowser-tab:not([visuallyselected], [multiselected], :hover, :first-child) .tab-background::before {
@@ -6403,14 +6419,14 @@
       @supports not -moz-bool-pref("userChrome.tabbar.one_liner.responsive") {
         .tabbrowser-tab:not([visuallyselected], [multiselected], :hover):first-child .tab-background::before {
           opacity: var(--tab-separator-opacity);
-          transform: translateX(-1.5px) translateY(calc(-50% + 1px));
+          transform: translateX(var(--start-tab-separator-position-x)) translateY(var(--tab-separator-position-y));
         }
       }
       @supports -moz-bool-pref("userChrome.tabbar.one_liner.responsive") {
         @media screen and (min-width: 1100px) {
           .tabbrowser-tab:not([visuallyselected], [multiselected], :hover):first-child .tab-background::before {
             opacity: var(--tab-separator-opacity);
-            transform: translateX(-1.5px) translateY(calc(-50% + 1px));
+            transform: translateX(var(--start-tab-separator-position-x)) translateY(var(--tab-separator-position-y));
           }
         }
       }
@@ -6908,13 +6924,20 @@
   }
 
   /* Makes the speaker icon to always appear if the tab is playing (not only on hover) */
+  .tabbrowser-tab {
+    --uc-sound-tab-icon-position-x: -0.5px;
+  }
+  .tabbrowser-tab:-moz-locale-dir(rtl) {
+    --uc-sound-tab-icon-position-x: 0.5px;
+  }
+
   .tab-icon-overlay:not([crashed]),
   .tab-icon-overlay[pinned][crashed][selected] {
     /* Position */
     top: 0 !important;
     inset-inline-end: -9px !important;
     z-index: 1 !important;
-    transform: translateX(-0.5px) translateY(-6px);
+    transform: translateX(var(--uc-sound-tab-icon-position-x)) translateY(-6px);
     /* Shape */
     padding: 1.5px !important;
     border-radius: 10px !important;
@@ -6934,14 +6957,24 @@
   /* Label */
   @supports not -moz-bool-pref("userChrome.hidden.tab_icon") {
     .tabbrowser-tab:not([pinned], [sharing], [crashed]):is([soundplaying], [muted], [activemedia-blocked]) .tab-label {
-      transform: translateX(4px);
+      --uc-sound-tab-label-position-x: 4px;
+      transform: translateX(var(--uc-sound-tab-label-position-x));
+    }
+    .tabbrowser-tab:not([pinned], [sharing], [crashed]):is([soundplaying], [muted], [activemedia-blocked])
+      .tab-label:-moz-locale-dir(rtl) {
+      --uc-sound-tab-label-position-x: -4px;
     }
   }
   @supports -moz-bool-pref("userChrome.hidden.tab_icon") {
     @supports not -moz-bool-pref("userChrome.hidden.tab_icon.always") {
       .tabbrowser-tab:not([pinned], [sharing], [crashed]):is([soundplaying], [muted], [activemedia-blocked])
         .tab-label {
-        transform: translateX(4px);
+        --uc-sound-tab-label-position-x: 4px;
+        transform: translateX(var(--uc-sound-tab-label-position-x));
+      }
+      .tabbrowser-tab:not([pinned], [sharing], [crashed]):is([soundplaying], [muted], [activemedia-blocked])
+        .tab-label:-moz-locale-dir(rtl) {
+        --uc-sound-tab-label-position-x: -4px;
       }
     }
   }
@@ -6958,9 +6991,17 @@
   }
   /* None exist favicon - Size bigger */
   @supports not -moz-bool-pref("userChrome.tab.always_show_tab_icon") {
+    .tabbrowser-tab {
+      --uc-sound-tab-no-icon-position-x: -0.5px;
+      --uc-sound-tab-no-icon-label-position-x: 3px;
+    }
+    .tabbrowser-tab:-moz-locale-dir(rtl) {
+      --uc-sound-tab-no-icon-position-x: 0.5px;
+      --uc-sound-tab-no-icon-label-position-x: -3px;
+    }
     @supports not -moz-bool-pref("userChrome.hidden.tab_icon") {
       .tabbrowser-tab:not([image]) .tab-icon-overlay:not([pinned], [sharing], [crashed]) {
-        transform: translateX(-0.5px) translateY(-1px);
+        transform: translateX(var(--uc-sound-tab-no-icon-position-x)) translateY(-1px);
         inset-inline-end: 0 !important;
         margin-inline-end: 0 !important;
         padding: 0 !important;
@@ -6971,13 +7012,13 @@
       }
       .tabbrowser-tab:not([image]):not([image]):not([pinned], [sharing], [crashed]):is([soundplaying], [muted], [activemedia-blocked])
         .tab-label {
-        transform: translateX(3px);
+        transform: translateX(var(--uc-sound-tab-no-icon-label-position-x));
       }
     }
     @supports -moz-bool-pref("userChrome.hidden.tab_icon") {
       @supports not -moz-bool-pref("userChrome.hidden.tab_icon.always") {
         .tabbrowser-tab .tab-icon-overlay:not([pinned], [sharing], [crashed]) {
-          transform: translateX(-0.5px) translateY(-1px);
+          transform: translateX(var(--uc-sound-tab-no-icon-position-x)) translateY(-1px);
           inset-inline-end: 0 !important;
           margin-inline-end: 0 !important;
           padding: 0 !important;
@@ -6988,7 +7029,7 @@
         }
         .tabbrowser-tab:not([image]):not([pinned], [sharing], [crashed]):is([soundplaying], [muted], [activemedia-blocked])
           .tab-label {
-          transform: translateX(3px);
+          transform: translateX(var(--uc-sound-tab-no-icon-label-position-x));
         }
       }
     }
@@ -7001,7 +7042,7 @@
 
   /* Busy - Overlay Position */
   .tabbrowser-tab:not([pinned])[busy] .tab-icon-overlay:is([soundplaying], [muted], [activemedia-blocked]) {
-    transform: translateX(-0.5px) translateY(-6px);
+    transform: translateX(var(--uc-sound-tab-icon-position-x)) translateY(-6px);
   }
 
   .tabbrowser-tab:not([image]) .tab-icon-overlay:not([pinned], [sharing], [crashed])[busy] {
@@ -7082,8 +7123,12 @@
       }
     }
     .tabbrowser-tab {
+      --container-position-x: 9px;
       --container-position-y: 11px;
     }
+    .tabbrowser-tab:-moz-locale-dir(rtl) {
+      --container-position-x: -9px;
+    }
 
     :root[uidensity="compact"] .tabbrowser-tab {
       --container-position-y: 10px;
@@ -7098,7 +7143,7 @@
       content: "";
       display: block;
       position: absolute !important;
-      transform: translate(9px, var(--container-position-y)) !important;
+      transform: translate(var(--container-position-x), var(--container-position-y)) !important;
       /* Shape */
       border-bottom: 2px solid var(--identity-icon-color);
       width: 25%;
diff --git a/src/padding/_tabbar_width.scss b/src/padding/_tabbar_width.scss
index b48dd03..6797e88 100644
--- a/src/padding/_tabbar_width.scss
+++ b/src/padding/_tabbar_width.scss
@@ -2,6 +2,10 @@
 :root {
   --uc-title-pre-spacer: 30px; /* Original: 40px */
   --uc-title-post-spacer: 25px; /* Original: 40px */
+  &:-moz-locale-dir(rtl) {
+    --uc-title-pre-spacer: 25px;
+    --uc-title-post-spacer: 30px;
+  }
 }
 @include WindowControl_Left {
   .titlebar-spacer[type="pre-tabs"] {
diff --git a/src/tab/_container_tab.scss b/src/tab/_container_tab.scss
index b3a966d..f87337e 100644
--- a/src/tab/_container_tab.scss
+++ b/src/tab/_container_tab.scss
@@ -5,7 +5,12 @@
 }
 
 .tabbrowser-tab {
+  $containerPositionX: 9px;
+  --container-position-x: #{ $containerPositionX };
   --container-position-y: 11px;
+  &:-moz-locale-dir(rtl) {
+    --container-position-x: #{ $containerPositionX * -1 };
+  }
 }
 :root[uidensity="compact"] .tabbrowser-tab {
   --container-position-y: 10px;
@@ -18,7 +23,7 @@
   content: "";
   display: block;
   position: absolute !important;
-  transform: translate(9px, var(--container-position-y)) !important;
+  transform: translate(var(--container-position-x), var(--container-position-y)) !important;
 
   /* Shape */
   border-bottom: 2px solid var(--identity-icon-color);
diff --git a/src/tab/sound_tab/_show_with_favicons.scss b/src/tab/sound_tab/_show_with_favicons.scss
index 8427e96..b0bfaa0 100644
--- a/src/tab/sound_tab/_show_with_favicons.scss
+++ b/src/tab/sound_tab/_show_with_favicons.scss
@@ -31,13 +31,19 @@
 }
 
 /* Makes the speaker icon to always appear if the tab is playing (not only on hover) */
+.tabbrowser-tab {
+  --uc-sound-tab-icon-position-x: -0.5px;
+  &:-moz-locale-dir(rtl) {
+    --uc-sound-tab-icon-position-x: 0.5px;
+  }
+}
 .tab-icon-overlay:not([crashed]),
 .tab-icon-overlay[pinned][crashed][selected] {
   /* Position */
   top: 0 !important;
   inset-inline-end: -9px !important;
   z-index: 1 !important;
-  transform: translateX(-0.5px) translateY(-6px);
+  transform: translateX(var(--uc-sound-tab-icon-position-x)) translateY(-6px);
 
   /* Shape */
   padding: 1.5px !important;
@@ -57,7 +63,13 @@
 /* Label */
 @include _hidden_tabIcon_soundTabLabel {
   .tabbrowser-tab:not([pinned], [sharing], [crashed]):is([soundplaying], [muted], [activemedia-blocked]) .tab-label {
-    transform: translateX(4px);
+    $soundTabLabelPositionX: 4px;
+    --uc-sound-tab-label-position-x: #{ $soundTabLabelPositionX };
+    transform: translateX(var(--uc-sound-tab-label-position-x));
+
+    &:-moz-locale-dir(rtl) {
+      --uc-sound-tab-label-position-x: #{ $soundTabLabelPositionX * -1 };
+    }
   }
 }
 
@@ -76,9 +88,15 @@
 /* None exist favicon - Size bigger */
 @include NotOption("userChrome.tab.always_show_tab_icon") {
   .tabbrowser-tab {
+    --uc-sound-tab-no-icon-position-x: -0.5px;
+    --uc-sound-tab-no-icon-label-position-x: 3px;
+    &:-moz-locale-dir(rtl) {
+      --uc-sound-tab-no-icon-position-x: 0.5px;
+      --uc-sound-tab-no-icon-label-position-x: -3px;
+    }
     @include _hidden_tabIcon_soundTabIcon {
       .tab-icon-overlay:not([pinned], [sharing], [crashed]) {
-        transform: translateX(-0.5px) translateY(-1px);
+        transform: translateX(var(--uc-sound-tab-no-icon-position-x)) translateY(-1px);
         inset-inline-end: 0 !important;
         margin-inline-end: 0 !important;
         padding: 0 !important;
@@ -87,8 +105,8 @@
         opacity: 0 !important; /* Favicon hidden */
       }
       &:not([image]):not([pinned], [sharing], [crashed]):is([soundplaying], [muted], [activemedia-blocked])
-                                                           .tab-label {
-        transform: translateX(3px);
+        .tab-label {
+        transform: translateX(var(--uc-sound-tab-no-icon-label-position-x));
       }
     }
   }
@@ -102,7 +120,7 @@
 
 /* Busy - Overlay Position */
 .tabbrowser-tab:not([pinned])[busy] .tab-icon-overlay:is([soundplaying], [muted], [activemedia-blocked]) {
-  transform: translateX(-0.5px) translateY(-6px);
+  transform: translateX(var(--uc-sound-tab-icon-position-x)) translateY(-6px);
 }
 .tabbrowser-tab:not([image]) .tab-icon-overlay:not([pinned], [sharing], [crashed])[busy] {
   inset-inline-end: -9px !important;
diff --git a/src/tab/unselected_tab/_dynamic_separator.scss b/src/tab/unselected_tab/_dynamic_separator.scss
index e997567..f1a8ed7 100644
--- a/src/tab/unselected_tab/_dynamic_separator.scss
+++ b/src/tab/unselected_tab/_dynamic_separator.scss
@@ -23,6 +23,18 @@
 
 //------------------------------------------------------------------------------
 
+#tabbrowser-arrowscrollbox {
+  --start-tab-separator-position-x: -1.5px;
+  --end-tab-separator-position-x: 1.5px;
+  --tab-separator-position-x: -2.5px;
+  --tab-separator-position-y: calc(-50% + 1px);
+  &:-moz-locale-dir(rtl) {
+    --start-tab-separator-position-x: 1.5px;
+    --end-tab-separator-position-x: -1.5px;
+    --tab-separator-position-x: 2.5px;
+  }
+}
+
 @include Option("userChrome.tab.newtab_button_like_tab") {
   #tabbrowser-arrowscrollbox {
     position: absolute;
@@ -33,7 +45,7 @@
     @include _dynamicSeparatorShape;
 
     /* More position */
-    transform: translateX(-2.5px) translateY(calc(-50% + 1px));
+    transform: translateX(var(--tab-separator-position-x)) translateY(var(--tab-separator-position-y));
   }
 }
 
@@ -46,11 +58,11 @@
   }
 
   .tab-background::before {
-    transform: translateX(-2.5px) translateY(calc(-50% + 1px)) !important;
+    transform: translateX(var(--tab-separator-position-x)) translateY(var(--tab-separator-position-y)) !important;
   }
   .tabbrowser-tab[last-visible-tab] .tab-background::after {
     right: 0;
-    transform: translateX(1.5px) translateY(calc(-50% + 1px)) !important;
+    transform: translateX(var(--end-tab-separator-position-x)) translateY(var(--tab-separator-position-y)) !important;
   }
 }
 
@@ -62,7 +74,7 @@
     @include OneLinerContent {
       .tabbrowser-tab:not([visuallyselected], [multiselected], :hover):first-child .tab-background::before {
         opacity: var(--tab-separator-opacity);
-        transform: translateX(-1.5px) translateY(calc(-50% + 1px));
+        transform: translateX(var(--start-tab-separator-position-x)) translateY(var(--tab-separator-position-y));
       }
     }
   }

From 09757bd870f65005974980015e654a743e44be92 Mon Sep 17 00:00:00 2001
From: alstjr7375 <alstjr7375@daum.net>
Date: Tue, 6 Sep 2022 10:04:18 +0900
Subject: [PATCH 3/3] Doc: Restrictions - RTL #387

---
 docs/Restrictions.md | 17 ++++++++++++-----
 1 file changed, 12 insertions(+), 5 deletions(-)

diff --git a/docs/Restrictions.md b/docs/Restrictions.md
index 4c8029a..0194345 100644
--- a/docs/Restrictions.md
+++ b/docs/Restrictions.md
@@ -6,7 +6,8 @@
   * [Cross Platform](#cross-platform)
   * [Firefox Version](#firefox-version)
   * [Side Effect](#side-effect)
-  * [`-moz-accent-color` Related](#-moz-accent-color-related)
+  * [RTL](#rtl)
+  * [`-moz-accent-color`](#-moz-accent-color)
 - [Internals](#internals)
   * [CSS Loading Order](#css-loading-order)
   * [DOM structure cannot be modified](#dom-structure-cannot-be-modified)
@@ -59,10 +60,6 @@ This project is using SCSS to make a [reusable compatible mixins](../src/utils).
 - `-moz-os-version` -> `-moz-platform` [#331](https://github.com/black7375/Firefox-UI-Fix/issues/331)
 - Breaking change with `-moz-accent-color`/`-moz-accent-color-foreground` -> `AccentColor`/`AccentColorText` [#433](https://github.com/black7375/Firefox-UI-Fix/issues/433)
 
-### `-moz-accent-color`
-
-I don't know the exact reason, but it can be a problem if it is not applied to [CSS Variable](https://developer.mozilla.org/en-US/docs/Web/CSS/var). [#437](https://github.com/black7375/Firefox-UI-Fix/issues/437)
-
 ### Side Effect
 Only CSS modifications can cause bugs that are hard to think of in the general web, such as the [context menu not appearing](https://github.com/black7375/Firefox-UI-Fix/issues/114).
 
@@ -77,6 +74,16 @@ Info: `#nav-bar` is [`toolbar`](https://udn.realityripple.com/docs/Archive/Mozil
 
 Another `display: flex`'s side effect examples. [#368](https://github.com/black7375/Firefox-UI-Fix/issues/368) [#372](https://github.com/black7375/Firefox-UI-Fix/issues/372)
 
+### RTL
+
+It can be detected using [`:-moz-locale-dir(rtl)`](https://developer.mozilla.org/en-US/docs/Web/CSS/:-moz-locale-dir(rtl)) on the interface(chrome) and [`:dir(rtl)`](https://developer.mozilla.org/en-US/docs/Web/CSS/:dir) on the content.
+
+[`margin-inline`](https://developer.mozilla.org/en-US/docs/Web/CSS/margin-inline) and [`padding-inline`](https://developer.mozilla.org/en-US/docs/Web/CSS/padding-inline) works as desired, but [`background-position-x`](https://developer.mozilla.org/en-US/docs/Web/CSS/background-position-x) and [`translateX()`](https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/translateX) should use the opposite values.
+
+### `-moz-accent-color`
+
+I don't know the exact reason, but it can be a problem if it is not applied to [CSS Variable](https://developer.mozilla.org/en-US/docs/Web/CSS/var). [#437](https://github.com/black7375/Firefox-UI-Fix/issues/437)
+
 ## Internals
 ### CSS Loading Order
 User CSS(`userChrome.css`, `userContent.css`) is usually loaded first.