Fix inverted drop position marker for faviconized tabs on RTL environ…

…ment #3689
piroor · Jan 6, 2025 · f232d89 · f232d89
1 parent 5e1cab5
commit f232d89
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 5 deletions.
diff --git a/webextensions/sidebar/drag-and-drop.js b/webextensions/sidebar/drag-and-drop.js
@@ -348,7 +348,7 @@ function getDropAction(event) {
   const onFaviconizedTab    = targetTab.pinned && configs.faviconizePinnedTabs;
   const dropAreasCount      = (info.draggedTab && onFaviconizedTab && !info.substanceTargetTab) ? 2 : 3 ;
   const targetTabRect       = Scroll.getTabRect(targetTab);
-  const targetTabCoordinate = onFaviconizedTab ? (isRTL() ? targetTabRect.right : targetTabRect.left) : targetTabRect.top ;
+  const targetTabCoordinate = onFaviconizedTab ? targetTabRect.left : targetTabRect.top ;
   const targetTabSize       = onFaviconizedTab ? targetTabRect.width : targetTabRect.height ;
   let beforeOrAfterDropAreaSize;
   if (dropAreasCount == 2) {
@@ -369,13 +369,14 @@ function getDropAction(event) {
     after: `> ${targetTabCoordinate + targetTabSize - beforeOrAfterDropAreaSize}`,
   });
   */
+  const shouldInvertArea = onFaviconizedTab && isRTL();
   if (eventCoordinate < targetTabCoordinate + beforeOrAfterDropAreaSize) {
-    info.dropPosition = kDROP_BEFORE;
+    info.dropPosition = shouldInvertArea ? kDROP_AFTER : kDROP_BEFORE;
     info.insertBefore = info.firstTargetTab;
   }
   else if (dropAreasCount == 2 ||
            eventCoordinate > targetTabCoordinate + targetTabSize - beforeOrAfterDropAreaSize) {
-    info.dropPosition = kDROP_AFTER;
+    info.dropPosition = shouldInvertArea ? kDROP_BEFORE : kDROP_AFTER;
     info.insertAfter  = info.lastTargetTab;
   }
   else {

diff --git a/webextensions/sidebar/styles/drag-and-drop.css b/webextensions/sidebar/styles/drag-and-drop.css
@@ -50,13 +50,15 @@ tab-item:not(.faviconized)[data-drop-position="after"] tab-item-substance::befor
   right: 0;
 }
 
-tab-item.faviconized[data-drop-position="before"] tab-item-substance::before {
+:root:not(.rtl) tab-item.faviconized[data-drop-position="before"] tab-item-substance::before,
+:root.rtl tab-item.faviconized[data-drop-position="after"] tab-item-substance::before {
   bottom: 0;
   left: 0;
   top: 0;
 }
 
-tab-item.faviconized[data-drop-position="after"] tab-item-substance::before {
+:root:not(.rtl) tab-item.faviconized[data-drop-position="after"] tab-item-substance::before,
+:root.rtl tab-item.faviconized[data-drop-position="before"] tab-item-substance::before {
   bottom: 0;
   right: 0;
   top: 0;