Better RTS support around tab preview panel #3689

piroor · Jan 7, 2025 · d96425a · d96425a
1 parent e204b43
commit d96425a
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 3 deletions.
diff --git a/webextensions/resources/module/tab-preview-frame.js b/webextensions/resources/module/tab-preview-frame.js
@@ -131,6 +131,7 @@ try{
       box-shadow: var(--panel-shadow);
       box-sizing: border-box;
       color: var(--panel-color);
+      direction: ltr;
       font: Message-Box;
       left: auto;
       line-height: 1.5;
@@ -145,6 +146,9 @@ try{
       right: auto;
       z-index: ${Number.MAX_SAFE_INTEGER}; /* for SIDEBAR and TAB case */
     }
+    .tab-preview-panel.rtl {
+      direction: rtl;
+    }
     .tab-preview-panel.animation {
       transition: var(--tab-preview-panel-show-hide-animation),
                   left 0.1s ease-out,
@@ -417,7 +421,7 @@ function preparePanel() {
   panel = createdPanel;
 }
 
-function updatePanel({ previewTabId, title, url, tooltipHtml, hasPreview, previewURL, previewTabRect, offsetTop, align, scale, logging, animation, backgroundColor, borderColor, color } = {}) {
+function updatePanel({ previewTabId, title, url, tooltipHtml, hasPreview, previewURL, previewTabRect, offsetTop, align, rtl, scale, logging, animation, backgroundColor, borderColor, color } = {}) {
   if (!panel)
     return;
 
@@ -428,7 +432,7 @@ function updatePanel({ previewTabId, title, url, tooltipHtml, hasPreview, previe
     hasPreview = hasLoadablePreviewURL;
 
   if (logging)
-    console.log('updatePanel ', { previewTabId, title, url, tooltipHtml, hasPreview, previewURL, previewTabRect, offsetTop, align, scale });
+    console.log('updatePanel ', { previewTabId, title, url, tooltipHtml, hasPreview, previewURL, previewTabRect, offsetTop, align, rtl, scale });
 
   panel.classList.add('updating');
   panel.classList.toggle('animation', animation);
@@ -470,6 +474,8 @@ function updatePanel({ previewTabId, title, url, tooltipHtml, hasPreview, previe
   if (align)
     panel.dataset.align = align;
 
+  panel.classList.toggle('rtl', !!rtl);
+
   const previewImage = panel.querySelector('.tab-preview-image');
   previewImage.classList.toggle('blank', !hasPreview && !hasLoadablePreviewURL);
   if (!previewURL ||

diff --git a/webextensions/sidebar/tab-preview-tooltip.js b/webextensions/sidebar/tab-preview-tooltip.js
@@ -561,7 +561,8 @@ async function onTabSubstanceEnter(event) {
     /* These information is used to calculate offset of the sidebar header */
     offsetTop: window.mozInnerScreenY - window.screenY,
     offsetLeft: window.mozInnerScreenX - window.screenX,
-    align: mayBeRight || isRTL() ? 'right' : 'left',
+    align: mayBeRight ? 'right' : 'left',
+    rtl: isRTL(),
     scale: 1 / window.devicePixelRatio,
     hasCustomTooltip,
     ...(hasCustomTooltip ?