Implement simulated tab preview panel (#3671)

* Prepare frame contents to render tab preview tooltip #3412 * Add comments to describe the design of the module * Implement events to track mouseenter/leave on tab substances * Send show/hide preview message to the active tab #3412 * Send message to show tab preview with preview URL * Show tab preview * Remove needless parameter * Simulate behavior of the native tab preview panel #3412 * Fix indent * Apply appearance same to the native tab preview panel as possible as we can #3412 * Cleanup old subframes #3412 * Don't try to capture discarded tabs #3412 * Cleanup cached tab object to avoid mismatched relation * Make more safe for invalid tab case * Show tab preview panel with fixed width * Use internal name same to Firefox's one * Suppress error about sending message to special tabs * Clear preview when active tab is switched * Re-prepare frame to show tab preview tooltip automatically * Hide tab preview panel when the sidebar is closed * Cleanup needless iframe * Hide tab preview tooltip when the tab is detached * Destroy and reconstruct frame more safely * Show tab preview panel with expected scale in zoomed tabs * Apply platform specific appearance correctly * Don't apply opacity animation while updating * Position tab preview in better coordinates even if the sidebar header is shown. * Fix mispositioning in zoomed contents * Ignore delayed messages * Suppress regular tooltip when in-content tab previw tooltip is not available * Calculate offset more correctly * Show tab preview panel near the sidebar * Deactivate tab preview tooltip by default * Show tab preview tooltip in the sidebar if the tab contents is privileged * Calculate size and position of the tab preview tooltip more correctly * Don't try to embed tab preview tooltip in other addon's contents * Show tab preview tooltip as soon as possible * Fallback to in-sidebar tab preview tooltip if the active tab is privileged * Add an option UI for tab preview panel
piroor · Nov 28, 2024 · 5720caf · 5720caf
1 parent 6a02166
commit 5720caf
Show file tree

Hide file tree

Showing 19 changed files with 807 additions and 10 deletions.
diff --git a/webextensions/_locales/en/messages.json b/webextensions/_locales/en/messages.json
@@ -409,6 +409,7 @@
   "config_maxPinnedTabsRowsAreaPercentage_label_after":  { "message": "% of the sidebar" },
   "config_animation_label": { "message": "Enable animation effects" },
   "config_animationForce_label": { "message": "Enable animations regardless \"reduce animations\" platform settings" },
+  "config_tabPreviewTooltip_label": { "message": "Show tab preview image instead of tooltip" },
   "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
@@ -406,6 +406,7 @@
   "config_maxPinnedTabsRowsAreaPercentage_label_after":  { "message": "%まで" },
   "config_animation_label": { "message": "アニメーション効果を有効にする" },
   "config_animationForce_label": { "message": "アニメーションを抑制するプラットフォームの設定を無視して有効にする" },
+  "config_tabPreviewTooltip_label": { "message": "ツールチップの代わりにタブのプレビュー画像を表示する" },
   "config_showCollapsedDescendantsByTooltip_label": { "message": "タブのツールチップに折りたたまれた子孫タブの情報を含める" },
   "config_shiftTabsForScrollbarDistance_label_before": { "message": "自動的に表示されるスクロールバーに覆われてタブ内のボタンに触れなくならないよう、" },
   "config_shiftTabsForScrollbarDistance_label_after": { "message": "ぶんだけタブをずらして表示する" },

diff --git a/webextensions/background/api-tabs-listener.js b/webextensions/background/api-tabs-listener.js
@@ -1220,6 +1220,14 @@ async function onDetached(tabId, detachInfo) {
       tabId,
       wasPinned: oldTab.pinned
     });
+    // We need to notify this to some conetnt scripts, to destroy themselves.
+    try {
+      browser.tabs.sendMessage(tabId, {
+        type: Constants.kCOMMAND_NOTIFY_TAB_DETACHED_FROM_WINDOW,
+      }).catch(_error => {});
+    }
+    catch (_error) {
+    }
 
     TabsStore.addRemovedTab(oldTab);
     oldWindow.detachTab(oldTab.id, {

diff --git a/webextensions/background/browser-action-menu.js b/webextensions/background/browser-action-menu.js
@@ -125,6 +125,12 @@ const mItems = [
         type:  'checkbox',
         expert: true
       },
+      {
+        title: browser.i18n.getMessage('config_tabPreviewTooltip_label'),
+        key:   'tabPreviewTooltip',
+        type:  'checkbox',
+        permissions: Permissions.ALL_URLS
+      },
       {
         title: browser.i18n.getMessage('config_showCollapsedDescendantsByTooltip_label'),
         key:   'showCollapsedDescendantsByTooltip',
@@ -1372,6 +1378,7 @@ const mItems = [
       },
       {
         title:       browser.i18n.getMessage('config_requestPermissions_allUrls_ctrlTabTracking'),
+        key:         'skipCollapsedTabsForTabSwitchingShortcuts',
         type:        'checkbox',
         permissions: Permissions.ALL_URLS
       },

diff --git a/webextensions/common/common.js b/webextensions/common/common.js
@@ -171,6 +171,7 @@ export const configs = new Configs({
   showNewTabActionSelector: true,
   longPressOnNewTabButton: Constants.kCONTEXTUAL_IDENTITY_SELECTOR,
   zoomable: false,
+  tabPreviewTooltip: false,
   showOverflowTitleByTooltip: true,
   showCollapsedDescendantsByTooltip: true,
 

diff --git a/webextensions/common/constants.js b/webextensions/common/constants.js
@@ -34,6 +34,7 @@ export const kCOMMAND_CONFIRM_TO_CLOSE_TABS          = 'treestyletab:confirm-to-
 export const kCOMMAND_SHOW_DIALOG                    = 'treestyletab:show-dialog';
 export const kCOMMAND_NOTIFY_BACKGROUND_READY        = 'treestyletab:notify-background-ready';
 export const kCOMMAND_NOTIFY_CONNECTION_READY        = 'treestyletab:notify-connection-ready';
+export const kCOMMAND_NOTIFY_SIDEBAR_CLOSED          = 'treestyletab:notify-sidebar-closed';
 export const kCOMMAND_NOTIFY_TAB_CREATING            = 'treestyletab:notify-tab-creating';
 export const kCOMMAND_NOTIFY_TAB_CREATED             = 'treestyletab:notify-tab-created';
 export const kCOMMAND_NOTIFY_TAB_UPDATED             = 'treestyletab:notify-tab-updated';

diff --git a/webextensions/common/permissions.js b/webextensions/common/permissions.js
@@ -117,7 +117,9 @@ export function bindToCheckbox(permissions, checkbox, options = {}) {
     .then(granted => {
       const checked = options.onInitialized ?
         options.onInitialized(granted) :
-        undefined;
+        checkbox.dataset.relatedConfigKey ?
+          configs[checkbox.dataset.relatedConfigKey] :
+          undefined;
       checkbox.checked = checked !== undefined ? !!checked : granted;
     })
     .catch(_error => {

diff --git a/webextensions/common/sidebar-connection.js b/webextensions/common/sidebar-connection.js
@@ -10,7 +10,8 @@ import EventListenerManager from '/extlib/EventListenerManager.js';
 import {
   log as internalLogger,
   mapAndFilterUniq,
-  configs
+  configs,
+  wait,
 } from './common.js';
 import * as Constants from './constants.js';
 import * as TabsStore from './tabs-store.js';
@@ -223,6 +224,32 @@ if (Constants.IS_BACKGROUND) {
       mReceivers.delete(windowId);
       mFocusState.delete(windowId);
       onDisconnected.dispatch(windowId, connections.size);
+
+      // We need to notify this to some conetnt scripts, to destroy themselves.
+      /*
+      browser.runtime.sendMessage({
+        type: Constants.kCOMMAND_NOTIFY_SIDEBAR_CLOSED,
+        windowId,
+      });
+      */
+      browser.windows.get(windowId, { populate: true }).then(async win => {
+        let count = 0;
+        for (const tab of win.tabs) {
+          count++;
+          if (count >= 20) {
+            // We should not block too long seconds on too much tabs case.
+            await wait(10);
+            count = 0;
+          }
+          try {
+            browser.tabs.sendMessage(tab.id, {
+              type: Constants.kCOMMAND_NOTIFY_SIDEBAR_CLOSED,
+            });
+          }
+          catch (_error) {
+          }
+        }
+      });
     };
     const receiver = message => {
       if (Array.isArray(message))

diff --git a/webextensions/manifest.json b/webextensions/manifest.json
@@ -261,6 +261,7 @@
     "browser_style": false
   },
   "web_accessible_resources": [
+    "/resources/blank.html",
     "/resources/group-tab.html*",
     "/resources/icons/*",
     "/sidebar/styles/icons/*"

diff --git a/webextensions/options/init.js b/webextensions/options/init.js
@@ -781,6 +781,15 @@ function initPermissionOptions() {
   Permissions.isGranted(Permissions.BOOKMARKS).then(granted => updateBookmarksUI(granted));
   Permissions.isGranted(Permissions.ALL_URLS).then(granted => updateCtrlTabSubItems(granted));
 
+  Permissions.bindToCheckbox(
+    Permissions.ALL_URLS,
+    document.querySelector('#allUrlsPermissionGranted_tabPreviewTooltip'),
+    {
+      onChanged: (granted) => {
+        configs.tabPreviewTooltip = granted;
+      }
+    }
+  );
   Permissions.bindToCheckbox(
     Permissions.ALL_URLS,
     document.querySelector('#allUrlsPermissionGranted_ctrlTabTracking'),

diff --git a/webextensions/options/options.html b/webextensions/options/options.html
@@ -115,7 +115,14 @@ <h1>__MSG_config_appearance_caption__</h1>
                           size="5"
                           min="0"
                           max="100">
-                   __MSG_config_maxPinnedTabsRowsAreaPercentage_label_after__</label></p>
+                   __MSG_config_maxPinnedTabsRowsAreaPercentage_label_after__</label></p>[
+    </div>
+    <p><label class="has-checkbox"
+             ><input id="allUrlsPermissionGranted_tabPreviewTooltip"
+                     type="checkbox"
+                     data-related-config-key="tabPreviewTooltip">
+             __MSG_config_tabPreviewTooltip_label__</label></p>
+    <div class="expert">
     <p><label class="has-checkbox"
              ><input id="showCollapsedDescendantsByTooltip"
                      type="checkbox">
@@ -593,7 +600,8 @@ <h1>__MSG_config_newTab_caption__</h1>
               <span class="preview-image"></span></label></p>
     <p><label class="sub has-checkbox"
              ><input id="clipboardReadPermissionGranted_middleClickPasteURLOnNewTabButton"
-                     type="checkbox">
+                     type="checkbox"
+                     data-related-config-key="middleClickPasteURLOnNewTabButton">
              __MSG_config_middleClickPasteURLOnNewTabButton_label__</label></p>
     <p><label>__MSG_config_autoAttachOnNewTabButtonAccelClick_before__
               <select id="autoAttachOnNewTabButtonAccelClick">
@@ -839,7 +847,8 @@ <h1>__MSG_config_treeBehavior_caption__</h1>
 
     <p><label class="has-checkbox"
              ><input id="allUrlsPermissionGranted_ctrlTabTracking"
-                     type="checkbox">
+                     type="checkbox"
+                     data-related-config-key="skipCollapsedTabsForTabSwitchingShortcuts">
               __MSG_config_requestPermissions_allUrls_ctrlTabTracking__</label></p>
     <div id="ctrlTabSubItemsContainer" class="expert">
       <p class="sub"><label class="has-checkbox"

diff --git a/webextensions/resources/tab-preview-frame.html b/webextensions/resources/tab-preview-frame.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<meta charset="UTF-8">
+<!--
+This is a sub part to show tab preview tooltip.
+See also: /siedbar/tab-preview-tooltip.js
+-->
+<script type="module" src="./tab-preview-frame.js"></script>
+<title></title>