[frontend] switch from html2canvas to html-to-image

Author: velzie

frontend/package.json

@@ -18,6 +18,7 @@
 		"@mercuryworkshop/epoxy-transport": "^2.1.27",
 		"@mercuryworkshop/scramjet": "workspace:scramjet",
 		"dreamland": "workspace:dreamland",
+		"html-to-image": "^1.11.13",
 		"html2canvas": "^1.4.1",
 		"monaco-editor": "^0.52.2",
 		"vite-plugin-static-copy": "^3.1.0"

frontend/src/Tab.tsx

@@ -91,8 +91,8 @@ export class Tab extends StatefulClass {
 		};
 	}
 	deserialize(de: SerializedTab) {
-		if (de.id >= id) id = de.id + 1;
-		this.id = de.id;
+		// if (de.id >= id) id = de.id + 1;
+		// this.id = de.id;
 		this.title = de.title;
 		this.history.deserialize(de.history);
 		console.log(this.history.states[this.history.index].url);

frontend/src/browser.tsx

@@ -69,7 +69,8 @@ export class Browser extends StatefulClass {
 			console.log(tab);
 			tab.deserialize(detab);
 		}
-		this.activetab = this.tabs.find((t) => t.id == de.activetab)!;
+		this.activetab = this.tabs[0]; // TODO
+		// this.activetab = this.tabs.find((t) => t.id == de.activetab)!;
 		console.log(this.activetab, this.activetab.url);
 	}
 

frontend/src/components/Shell.tsx

@@ -2,7 +2,7 @@ import { css, type Component } from "dreamland/core";
 import { browser } from "../main";
 import { forceScreenshot, popTab, pushTab } from "../browser";
 import type { Tab } from "../Tab";
-import html2canvas from "html2canvas";
+import { toBlob } from "html-to-image";
 
 export const Shell: Component<{
 	tabs: Tab[];
@@ -20,6 +20,7 @@ export const Shell: Component<{
 			<div
 				class="container"
 				data-tab={tab.id}
+				id={"tab" + tab.id}
 				class:active={use(this.activetab).map((t) => t === tab)}
 				class:showframe={use(tab.internalpage).map((t) => !t)}
 			>
@@ -57,6 +58,8 @@ export const Shell: Component<{
 				</div>
 			</div>
 		);
+
+		setInterval(() => forceScreenshot(tab), 1000);
 	});
 	popTab.listen((tab) => {
 		const container = cx.root.querySelector(`[data-tab="${tab.id}"]`);
@@ -69,10 +72,7 @@ export const Shell: Component<{
 		) as HTMLElement;
 		if (!container) throw new Error(`No container found for tab ${tab.id}`);
 
-		const canvas = await html2canvas(
-			container.children[0].contentDocument.body
-		);
-		tab.screenshot = canvas.toDataURL();
+		tab.screenshot = URL.createObjectURL(await toBlob(container));
 	});
 
 	return <div></div>;

frontend/src/components/TabStrip.tsx

@@ -70,7 +70,11 @@ export const DragTab: Component<{
 		>
 			<div class="tooltip">
 				<span>{use(this.tab.title)}</span>
-				<img src={use(this.tab.screenshot)} />
+				<img src={use(this.tab.screenshot)} class="img" />
+				{/* <div
+					style={use`background: -moz-element(#tab${this.tab.id})`}
+					class="img"
+				></div> */}
 			</div>
 			<div
 				class="dragroot"
@@ -117,7 +121,8 @@ DragTab.style = css`
 		top: 5em;
 		left: 0;
 		z-index: 1000;
-		background: var(--aboutbrowser-tooltip-bg);
+		background: white;
+		border: 5px solid red;
 		width: 20em;
 		/* height: 10em; */
 		flex-direction: column;
@@ -127,8 +132,9 @@ DragTab.style = css`
 	:scope:hover .tooltip {
 		display: flex;
 	}
-	.tooltip img {
+	.tooltip .img {
 		width: 100%;
+		/* height: 5em; */
 	}
 
 	.main {