Fix: Menu - RTL support #387

black7375 · Sep 5, 2022 · 734ed69 · 734ed69
1 parent b435705
commit 734ed69
Show file tree

Hide file tree

Showing 6 changed files with 41 additions and 25 deletions.
diff --git 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
@@ -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
@@ -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 {
-  padding-inline-start: 24px; /* 16p + (4px *  2) */
+  @include _layout_icon_menus;
 
-  -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;
+  padding-inline-start: 24px; /* 16p + (4px *  2) */
+  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
@@ -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
@@ -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
@@ -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;
 }