Prepare frame contents to render tab preview tooltip #3412

piroor · Nov 15, 2024 · 77ea3d9 · 77ea3d9
1 parent bfe7a32
commit 77ea3d9
Show file tree

Hide file tree

Showing 4 changed files with 131 additions and 0 deletions.
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/resources/tab-preview-frame.html b/webextensions/resources/tab-preview-frame.html
@@ -0,0 +1,7 @@
+<!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">
+<script type="module" src="./tab-preview-frame.js"></script>
+<title></title>
diff --git a/webextensions/resources/tab-preview-frame.js b/webextensions/resources/tab-preview-frame.js
@@ -0,0 +1,32 @@
+/*
+# 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/.
+*/
+'use strict';
+
+try{
+  browser.runtime.onMessage.addListener((message, _sender) => {
+    console.log('ON MESSAGE IN IFRAME ', message);
+    const pre = document.createElement('pre');
+    pre.textContent = JSON.stringify(message);
+    document.body.appendChild(pre);
+
+    switch (message?.type) {
+      case 'treestyletab:show-tab-preview':
+        break;
+
+      case 'treestyletab:hide-tab-preview':
+        break;
+    }
+  });
+
+  document.documentElement.style.pointerEvents = 'none';
+
+  browser.runtime.sendMessage({
+    type: 'treestyletab:tab-preview-frame-loaded',
+  });
+}
+catch (error) {
+  console.log('TST Tab Preview Frame fatal error: ', error);
+}
diff --git a/webextensions/sidebar/tab-preview-tooltip.js b/webextensions/sidebar/tab-preview-tooltip.js
@@ -0,0 +1,91 @@
+/*
+# 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/.
+*/
+'use strict';
+
+import * as TabsStore from '/common/tabs-store.js';
+//import Tab from '/common/Tab.js';
+
+const TAB_PREVIEW_FRAME_STYLE = `
+  background: transparent;
+  border: 0 none;
+  bottom: 0;
+  height: 100%;
+  left: 0;
+  overflow: hidden;
+  pointer-events: none;
+  position: fixed;
+  right: 0;
+  top: 0;
+  width: 100%;
+  z-index: 65000;
+`;
+
+async function prepareFrame(tabId) {
+  await browser.tabs.executeScript(tabId, {
+    code: `
+      const frame = document.createElement('iframe');
+      frame.setAttribute('src', '${browser.runtime.getURL('/resources/tab-preview-frame.html')}');
+      frame.setAttribute('style', ${JSON.stringify(TAB_PREVIEW_FRAME_STYLE)});
+      document.documentElement.appendChild(frame);
+
+      let frameIdResolver;
+      let promisedFrameId = new Promise((resolve, _reject) => {
+        frameIdResolver = resolve;
+      });
+
+      browser.runtime.onMessage.addListener((message, _sender) => {
+        switch (message?.type) {
+          case 'treestyletab:ask-tab-preview-frame-id':
+            return promisedFrameId;
+
+          case 'treestyletab:notify-tab-preview-frame-id':
+            frameIdResolver(message.frameId);
+            break;
+        }
+      });
+    `,
+  });
+}
+
+export async function sendTabPreviewMessage(tabId, message, retrying) {
+  let frameId;
+  try {
+    frameId = await browser.tabs.sendMessage(tabId, {
+      type: 'treestyletab:ask-tab-preview-frame-id',
+    }).catch(_error => {});
+    if (!frameId) {
+      if (retrying)
+        return;
+
+      await prepareFrame(tabId);
+      setTimeout(() => {
+        sendTabPreviewMessage(tabId, message, true);
+      }, 100);
+    }
+  }
+  catch (error) {
+    console.log('Could not send tab preview message: ', tabId, message, error);
+    return;
+  }
+
+  browser.tabs.sendMessage(tabId, message, { frameId });
+}
+
+browser.runtime.onMessage.addListener((message, sender) => {
+  const windowId = TabsStore.getCurrentWindowId();
+  if (!windowId ||
+      sender.tab?.windowId != windowId)
+    return;
+
+  switch (message?.type) {
+    case 'treestyletab:tab-preview-frame-loaded':
+      browser.tabs.sendMessage(sender.tab.id, {
+        type: 'treestyletab:notify-tab-preview-frame-id',
+        frameId: sender.frameId,
+      });
+      break;
+  }
+});