Introduce an expert option to shift tab preview panel on privacy mode…

… ex. privacy.resistFingerprinting=true #3698
piroor · Jan 14, 2025 · 4dea9ce · 4dea9ce
1 parent 22c8905
commit 4dea9ce
Show file tree

Hide file tree

Showing 6 changed files with 18 additions and 5 deletions.
diff --git a/webextensions/_locales/en/messages.json b/webextensions/_locales/en/messages.json
@@ -419,6 +419,8 @@
   "config_animationForce_label": { "message": "Enable animations regardless \"reduce animations\" platform settings" },
   "config_tabPreviewTooltip_label": { "message": "Show tab preview image on tab hover, instead of legacy tooltip (*You need to allow executing scripts on webpages)" },
   "config_tabPreviewTooltipInSidebar_label": { "message": "Fall back to show tab preview in the sidebar panel, if the preview cannot be shown out of the sidebar" },
+  "config_tabPreviewTooltipOffsetTop_label_before": { "message": "Shift tab preview " },
+  "config_tabPreviewTooltipOffsetTop_label_after": { "message": "px vertically when the height of the sidebar header cannot be detected due to privacy protection (ex. \"privacy.resistFingerprinting\"=\"true\")" },
   "config_showCollapsedDescendantsByTooltip_label": { "message": "Show collapsed descendants in the tooltip on a tab" },
   "config_shiftTabsForScrollbarDistance_label_before": { "message": "Shift tabs aside " },
   "config_shiftTabsForScrollbarDistance_label_after": { "message": " to keep in-tab buttons touchable avoiding covered with the auto-shown scrollbar" },

diff --git a/webextensions/_locales/ja/messages.json b/webextensions/_locales/ja/messages.json
@@ -415,6 +415,8 @@
   "config_animationForce_label": { "message": "アニメーションを抑制するプラットフォームの設定を無視して有効にする" },
   "config_tabPreviewTooltip_label": { "message": "タブの上にカーソルを乗せたとき、ツールチップの代わりにタブのプレビュー画像を表示する（※Webページ内でのスクリプトの実行を許可する必要があります）" },
   "config_tabPreviewTooltipInSidebar_label": { "message": "プレビューをサイドバー外に表示できないときはサイドバー内で表示する" },
+  "config_tabPreviewTooltipOffsetTop_label_before": { "message": "プライバシー優先時（\"privacy.resistFingerprinting\"=\"true\"に設定している場合など）でサイドバーのヘッダーの高さを検出できない場合に、プレビューの表示位置を縦方向に" },
+  "config_tabPreviewTooltipOffsetTop_label_after": { "message": "ピクセルずらす" },
   "config_showCollapsedDescendantsByTooltip_label": { "message": "タブのツールチップに折りたたまれた子孫タブの情報を含める" },
   "config_shiftTabsForScrollbarDistance_label_before": { "message": "自動的に表示されるスクロールバーに覆われてタブ内のボタンに触れなくならないよう、" },
   "config_shiftTabsForScrollbarDistance_label_after": { "message": "ぶんだけタブをずらして表示する" },

diff --git a/webextensions/common/common.js b/webextensions/common/common.js
@@ -200,6 +200,7 @@ export const configs = new Configs({
   tabPreviewTooltip: false,
   tabPreviewTooltipInSidebar: true,
   tabPreviewTooltipDelayMsec: 500, // same as "ui.tooltip.delay_ms"
+  tabPreviewTooltipOffsetTop: 0, // See also https://github.com/piroor/treestyletab/issues/3698
   showOverflowTitleByTooltip: true,
   showCollapsedDescendantsByTooltip: true,
 

diff --git a/webextensions/options/options.html b/webextensions/options/options.html
@@ -128,6 +128,12 @@ <h1>__MSG_config_appearance_caption__</h1>
              ><input id="tabPreviewTooltipInSidebar"
                      type="checkbox">
              __MSG_config_tabPreviewTooltipInSidebar_label__</label></p>
+    <p class="sub"
+      ><label>__MSG_config_tabPreviewTooltipOffsetTop_label_before__
+              <input id="tabPreviewTooltipOffsetTop"
+                     type="number"
+                     size="5">
+              __MSG_config_tabPreviewTooltipOffsetTop_label_after__</label></p>
     <p><label class="has-checkbox"
              ><input id="showCollapsedDescendantsByTooltip"
                      type="checkbox">

diff --git a/webextensions/resources/module/tab-preview-frame.js b/webextensions/resources/module/tab-preview-frame.js
@@ -421,7 +421,7 @@ function preparePanel() {
   panel = createdPanel;
 }
 
-function updatePanel({ previewTabId, title, url, tooltipHtml, hasPreview, previewURL, previewTabRect, offsetTop, align, rtl, scale, logging, animation, backgroundColor, borderColor, color, widthInOuterWorld } = {}) {
+function updatePanel({ previewTabId, title, url, tooltipHtml, hasPreview, previewURL, previewTabRect, offsetTop, align, rtl, scale, logging, animation, backgroundColor, borderColor, color, widthInOuterWorld, fixedOffsetTop } = {}) {
   if (!panel)
     return;
 
@@ -432,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, rtl, scale, widthInOuterWorld });
+    console.log('updatePanel ', { previewTabId, title, url, tooltipHtml, hasPreview, previewURL, previewTabRect, offsetTop, align, rtl, scale, widthInOuterWorld, fixedOffsetTop });
 
   panel.classList.add('updating');
   panel.classList.toggle('animation', animation);
@@ -452,7 +452,7 @@ function updatePanel({ previewTabId, title, url, tooltipHtml, hasPreview, previe
   // from both the sidebar and the content area, because all contents
   // of the browser window can be scaled on a high-DPI display by the
   // platform.
-  const isResistFingerprintingMode = window.mozInnerScreenY == 0 && window.screenY == 0;
+  const isResistFingerprintingMode = window.mozInnerScreenY == window.screenY;
   const devicePixelRatio = (widthInOuterWorld || window.innerWidth) / window.innerWidth;
   if (logging)
     console.log('updatePanel: isResistFingerprintingMode ', isResistFingerprintingMode, { devicePixelRatio });
@@ -467,7 +467,7 @@ function updatePanel({ previewTabId, title, url, tooltipHtml, hasPreview, previe
     0 :
     (window.mozInnerScreenY - window.screenY) * scale;
   const sidebarContentsOffset = isResistFingerprintingMode ?
-    0 :
+    (fixedOffsetTop || 0) :
     (offsetTop - offsetFromWindowEdge) / scale;
 
   if (previewTabRect) {
@@ -477,7 +477,7 @@ function updatePanel({ previewTabId, title, url, tooltipHtml, hasPreview, previe
     panel.style.maxHeight = `${panelMaxHeight}px`;
     panel.style.setProperty('--panel-max-height', `${panelMaxHeight}px`);
     if (logging)
-      console.log('updatePanel: limit panel height to ', panel.style.maxHeight, { previewTabRect, maxHeight: window.innerHeight, sidebarContentsOffset, offsetFromWindowEdge });
+      console.log('updatePanel: limit panel height to ', panel.style.maxHeight, { previewTabRect, maxHeight: window.innerHeight, sidebarContentsOffset, offsetFromWindowEdge, fixedOffsetTop });
   }
 
   panel.dataset.tabId = previewTabId;

diff --git a/webextensions/sidebar/tab-preview-tooltip.js b/webextensions/sidebar/tab-preview-tooltip.js
@@ -363,6 +363,7 @@ async function sendTabPreviewMessage(tabId, message, deferredResultResolver) {
       ...TabPreviewFrame.getColors(),
       ...(promisedPreviewURL ? { previewURL: null } : {}),
       widthInOuterWorld: rawTab.width,
+      fixedOffsetTop: configs.tabPreviewTooltipOffsetTop,
       animation: shouldApplyAnimation(),
       logging: configs.logFor['sidebar/tab-preview-tooltip'] && configs.debug,
     }, frameId ? { frameId } : {});
@@ -380,6 +381,7 @@ async function sendTabPreviewMessage(tabId, message, deferredResultResolver) {
           previewURL,
           ...TabPreviewFrame.getColors(),
           widthInOuterWorld: rawTab.width,
+          fixedOffsetTop: configs.tabPreviewTooltipOffsetTop,
           animation: shouldApplyAnimation(),
           logging: configs.logFor['sidebar/tab-preview-tooltip'] && configs.debug,
         }, frameId ? { frameId } : {});