From 720873be2b32a9e2ea5d23b027c92fe16fc33a13 Mon Sep 17 00:00:00 2001
From: trickypr <23250792+trickypr@users.noreply.github.com>
Date: Sun, 10 Dec 2023 20:48:22 +1100
Subject: [PATCH] =?UTF-8?q?=F0=9F=9A=A7=20Theoretically=20working=20tab=20?=
 =?UTF-8?q?drag=20image?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pnpm-lock.yaml                                 |  6 +++---
 src/content/browser/components/tabs/tabDrag.ts |  4 +++-
 src/content/browser/lib/resources.ts           |  3 +++
 src/content/browser/lib/window/tab.ts          | 18 ++++++++++++++++++
 4 files changed, 27 insertions(+), 4 deletions(-)

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 319699b..a245846 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -80,7 +80,7 @@ devDependencies:
     version: 8.0.1
   gecko-types:
     specifier: github:quark-platform/gecko-types
-    version: github.com/quark-platform/gecko-types/3e535488ede5d1a1a666e4b24e7a0d81e84d27ab
+    version: github.com/quark-platform/gecko-types/98eca1c9a0ca382b5acfcc956a3934aa3dd08557
   html-webpack-plugin:
     specifier: ^5.5.3
     version: 5.5.3(webpack@5.89.0)
@@ -4554,8 +4554,8 @@ packages:
     resolution: {integrity: sha512-FSZOvfJVfMWhk/poictNsDBCXq/Z+2Zu2peWs6d8OhWWb9nY++czw95D47hdw06L/kfjasLevwrbUtnXyWLAJw==}
     dev: true
 
-  github.com/quark-platform/gecko-types/3e535488ede5d1a1a666e4b24e7a0d81e84d27ab:
-    resolution: {tarball: https://codeload.github.com/quark-platform/gecko-types/tar.gz/3e535488ede5d1a1a666e4b24e7a0d81e84d27ab}
+  github.com/quark-platform/gecko-types/98eca1c9a0ca382b5acfcc956a3934aa3dd08557:
+    resolution: {tarball: https://codeload.github.com/quark-platform/gecko-types/tar.gz/98eca1c9a0ca382b5acfcc956a3934aa3dd08557}
     name: gecko-types
     version: 1.0.0
     dev: true
diff --git a/src/content/browser/components/tabs/tabDrag.ts b/src/content/browser/components/tabs/tabDrag.ts
index f0473d0..5319408 100644
--- 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
index 3415db3..29d78c9 100644
--- 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
index a2d7d40..f50f6ae 100644
--- 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 = {