🚧 Theoretically working tab drag image

pulse-browser · Dec 10, 2023 · 720873b · 720873b
1 parent 4c10c3b
commit 720873b
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 4 deletions.
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/content/browser/components/tabs/tabDrag.ts b/src/content/browser/components/tabs/tabDrag.ts
@@ -152,11 +152,13 @@ export function createTabDrag(tab: Tab) {
   const dropAfter = writable(false)
 
   const dragOverEvent = dragOver(tab, dropBefore, dropAfter)
-  const setDataTransferEvent = (event: DragEvent) => {
+  const setDataTransferEvent = async (event: DragEvent) => {
     event.dataTransfer?.setData(
       TAB_DATA_TYPE,
       JSON.stringify(tab.getDragRepresentation()),
     )
+    const canvas = await tab.captureTabToCanvas()
+    if (canvas) event.dataTransfer?.setDragImage(canvas, 0, 0)
   }
   const dragLeaveEvent = () => {
     dropBefore.set(false)

diff --git a/src/content/browser/lib/resources.ts b/src/content/browser/lib/resources.ts
@@ -3,8 +3,11 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 import { lazyESModuleGetters } from '../../shared/TypedImportUtilities'
 
+/*eslint sort-keys: "error"*/
+
 export const resource = lazyESModuleGetters({
   E10SUtils: 'resource://gre/modules/E10SUtils.sys.mjs',
   NetUtil: 'resource://gre/modules/NetUtil.sys.mjs',
+  PageThumbs: 'resource://gre/modules/PageThumbs.sys.mjs',
   WindowTracker: 'resource://app/modules/BrowserWindowTracker.sys.mjs',
 })
diff --git a/src/content/browser/lib/window/tab.ts b/src/content/browser/lib/window/tab.ts
@@ -7,6 +7,7 @@ import { type Writable, get, writable } from 'svelte/store'
 import { type BookmarkTreeNode, search } from '@shared/ExtBookmarkAPI'
 import { type ViewableWritable, viewableWritable } from '@shared/svelteUtils'
 
+import { resource } from '../resources'
 import { spinLock } from '../spinlock'
 import { createBrowser, getBrowserRemoteType, setURI } from '../xul/browser'
 import { domContentLoaded } from '../xul/domevents'
@@ -248,6 +249,23 @@ export class Tab {
     otherFindbar?.remove()
     tab.findbar.set(undefined)
   }
+
+  public async captureTabToCanvas(
+    canvas: HTMLCanvasElement | null = resource.PageThumbs.createCanvas(window),
+  ) {
+    try {
+      await resource.PageThumbs.captureToCanvas(
+        this.browserElement,
+        canvas,
+        undefined,
+      )
+    } catch (e) {
+      console.error(e)
+      canvas = null
+    }
+
+    return canvas
+  }
 }
 
 type TabProgressListenerEventDefaults = {