roxxie-proxy-u-prod 0.1.0

package/source/packages/chrome/src/Tab/History.ts

@@ -0,0 +1,186 @@
+import { StatefulClass } from "../util/StatefulClass";
+import type { Tab } from "./Tab";
+import { INTERNAL_URL_PROTOCOL } from "../consts";
+import { profileService } from "..";
+
+export type SerializedHistoryState = {
+	state: any;
+	url: string;
+	title: string | null;
+	favicon: string | null;
+	timestamp: number;
+};
+
+// history api emulation
+export class HistoryState extends StatefulClass {
+	url: URL = null!;
+	state: any;
+	title: string | null = null;
+	favicon: string | null = null;
+	timestamp: number;
+
+	virtual: boolean = false; // whether this state was created by pushState and can be navigated to without a full reload
+
+	constructor(partial?: Partial<HistoryState>) {
+		super();
+		Object.assign(this, partial);
+		this.timestamp = Date.now();
+		this.autodirty();
+	}
+
+	serialize(): SerializedHistoryState {
+		return {
+			url: this.url.href,
+			title: this.title,
+			state: this.state,
+			favicon: this.favicon,
+			timestamp: this.timestamp,
+		};
+	}
+	static deserialize(data: SerializedHistoryState): HistoryState {
+		return new HistoryState({
+			url: new URL(data.url),
+			state: data.state,
+			title: data.title,
+			favicon: data.favicon,
+			timestamp: data.timestamp,
+		});
+	}
+}
+
+export type SerializedHistory = {
+	index: number;
+	states: SerializedHistoryState[];
+};
+
+export class History extends StatefulClass {
+	index: number = -1;
+	states: HistoryState[] = [];
+	justTriggeredNavigation: boolean = false;
+
+	constructor(
+		private tab: Tab,
+		data?: SerializedHistory
+	) {
+		super();
+		if (data) {
+			this.index = data.index;
+			this.states = data.states.map((state) => HistoryState.deserialize(state));
+		}
+	}
+	serialize(): SerializedHistory {
+		return {
+			index: this.index,
+			states: this.states.map((state) => state.serialize()),
+		};
+	}
+
+	current(): HistoryState {
+		if (this.index < 0 || this.index >= this.states.length) {
+			throw new Error("No current history state");
+		}
+
+		return this.states[this.index];
+	}
+
+	push(
+		url: URL,
+		title: string | null = null,
+		state: any = null,
+		navigate: boolean = true,
+		virtual: boolean = false
+	): HistoryState {
+		if (this.index + 1 < this.states.length) {
+			// disown states we're removing
+			this.states.slice(this.index + 1).forEach((state) => this.disown(state));
+
+			// "fork" history tree, creating a new timeline
+			this.states.splice(this.index, this.states.length - this.index);
+		}
+		const hstate = new HistoryState({ url, state, title });
+		if (virtual) hstate.virtual = true;
+
+		if (url.href != `${INTERNAL_URL_PROTOCOL}//newtab`)
+			profileService.globalhistory = [...profileService.globalhistory, hstate];
+		this.states.push(hstate);
+		this.own(hstate);
+		this.index++;
+
+		if (navigate) {
+			this.justTriggeredNavigation = true;
+			this.tab._directnavigate(url);
+		} else this.tab.url = url;
+
+		this.tab.canGoBack = this.canGoBack();
+		this.tab.canGoForward = this.canGoForward();
+
+		this.markDirty();
+		return this.states[this.index];
+	}
+	replace(
+		url: URL,
+		title: string | null,
+		state: any,
+		navigate: boolean = true
+	): HistoryState {
+		if (this.index < this.states.length) {
+			this.current().url = url;
+			this.current().state = state;
+			this.current().title = title;
+			this.current().favicon = null;
+		} else {
+			return this.push(url, state);
+		}
+
+		if (navigate) {
+			this.justTriggeredNavigation = true;
+			this.tab._directnavigate(url);
+		}
+
+		this.tab.canGoBack = this.canGoBack();
+		this.tab.canGoForward = this.canGoForward();
+
+		this.markDirty();
+		return this.states[this.index];
+	}
+	go(delta: number, navigate: boolean = true): HistoryState {
+		const current = this.current();
+		this.index += delta;
+		if (this.index < 0) {
+			this.index = 0;
+		} else if (this.index >= this.states.length) {
+			this.index = this.states.length - 1;
+		}
+
+		let newstate = this.states[this.index];
+
+		if (current.virtual) {
+			// sendFrame(this.tab, "popstate", {
+			// 	state: newstate.state,
+			// 	url: newstate.url.href,
+			// 	title: newstate.title || "",
+			// });
+		} else if (navigate) {
+			this.justTriggeredNavigation = true;
+			this.tab._directnavigate(newstate.url);
+		}
+
+		if (newstate.virtual || !navigate) {
+			this.tab.url = newstate.url;
+			this.tab.title = newstate.title;
+			this.tab.icon = newstate.favicon;
+		}
+
+		this.tab.canGoBack = this.canGoBack();
+		this.tab.canGoForward = this.canGoForward();
+
+		this.markDirty();
+		return newstate;
+	}
+	canGoBack(): boolean {
+		return this.index > 0;
+	}
+	canGoForward(): boolean {
+		return this.index < this.states.length - 1;
+	}
+}

package/source/packages/chrome/src/Tab/Tab.tsx

@@ -0,0 +1,219 @@
+import { StatefulClass } from "../util/StatefulClass";
+import { History, type SerializedHistory } from "./History";
+import { INTERNAL_URL_PROTOCOL } from "../consts";
+import { NewTabPage } from "../pages/NewTabPage";
+import { PlaygroundPage } from "../pages/PlaygroundPage";
+import { AboutPage } from "../pages/AboutPage";
+import { HistoryPage } from "../pages/HistoryPage";
+import { SettingsPage } from "../pages/SettingsPage";
+import { DownloadsPage } from "../pages/DownloadsPage";
+import { ProxyFrame } from "../proxy/ProxyFrame";
+import { uuid } from "../util";
+import { mountedPromise } from "../App";
+import { tabsService } from "..";
+import { defaultFaviconUrl, roxxieIconUrl } from "../assets/favicon";
+// const requestInspectElement = createDelegate<[HTMLElement, Tab]>();
+
+export type SerializedTab = {
+	title: string | null;
+	url: string;
+	id: string;
+	icon: string | null;
+	history: SerializedHistory;
+	pinned: boolean;
+};
+
+export class Tab extends StatefulClass {
+	title: string | null = null;
+	frame: ProxyFrame;
+	devtoolsFrame: any;
+	screenshot: string | null = null;
+
+	pinned: boolean = false;
+
+	url: URL;
+
+	id: string;
+
+	icon: string | null = null;
+	justCreated: boolean = true;
+
+	history: History;
+
+	canGoForward: boolean = false;
+	canGoBack: boolean = false;
+
+	internalpage: HTMLElement | null = null;
+
+	devtoolsOpen: boolean = false;
+	devtoolsWidth = 200;
+
+	loadProgress: number = 0;
+	loadProgressTarget: number = 0;
+
+	sendToChobitsu: ((message: string) => void) | null = null;
+	onChobitsuMessage: ((message: string) => void) | null = null;
+	waitForInit: Promise<void>;
+	private initResolve!: () => void;
+
+	constructor(init: Partial<Tab>, history?: SerializedHistory) {
+		super();
+		Object.assign(this, init);
+		this.url ??= new URL(`${INTERNAL_URL_PROTOCOL}//newtab`);
+		this.id ??= uuid("tab-");
+
+		this.frame = new ProxyFrame();
+		this.history = new History(this, history);
+		this.own(this.history);
+		this.waitForInit = new Promise((resolve) => {
+			this.initResolve = resolve;
+		});
+		mountedPromise.then(() => {
+			if (history) {
+				// restore from serialized state
+
+				if (
+					this.url.protocol == INTERNAL_URL_PROTOCOL ||
+					tabsService.activetab === this
+				) {
+					this._directnavigate(this.url);
+				} else {
+					// wait for this tab to become active
+					let ptr = use(tabsService.activetab).constrain(this);
+					let activated = false;
+					ptr.listen((tab) => {
+						if (tab === this && !activated) {
+							this._directnavigate(this.url);
+							ptr.unconstrain(this);
+							activated = true;
+						}
+					});
+				}
+			} else {
+				// was just created
+				this.history.push(this.url, undefined);
+			}
+		});
+
+		const lerp = (a: number, b: number, t: number) => a * (1 - t) + b * t;
+		setInterval(() => {
+			if (this.loadProgress < this.loadProgressTarget) {
+				this.loadProgress = lerp(
+					this.loadProgress,
+					this.loadProgressTarget,
+					0.01
+				);
+				if (Math.abs(this.loadProgress - this.loadProgressTarget) < 0.01) {
+					this.loadProgress = this.loadProgressTarget;
+				}
+			}
+		}, 16);
+	}
+
+	serialize(): SerializedTab {
+		return {
+			title: this.title,
+			url: this.url.href,
+			id: this.id,
+			icon: this.icon,
+			history: this.history.serialize(),
+			pinned: this.pinned,
+		};
+	}
+	static deserialize(data: SerializedTab): Tab {
+		return new Tab(
+			{
+				title: data.title,
+				url: new URL(data.url),
+				id: data.id,
+				icon: data.icon,
+				pinned: data.pinned,
+			},
+			data.history
+		);
+	}
+
+	// only caller should be history.ts for this
+	_directnavigate(url: URL) {
+		this.url = url;
+		this.icon = defaultFaviconUrl;
+		if (url.protocol == INTERNAL_URL_PROTOCOL) {
+			this.icon = null;
+			this.history.current().favicon = roxxieIconUrl;
+			switch (url.host) {
+				case "newtab":
+					this.history.current().title = this.title = "New Tab";
+					this.internalpage = <NewTabPage tab={this} />;
+					break;
+				case "playground":
+					this.history.current().title = this.title = "Scramjet Playground";
+					this.internalpage = <PlaygroundPage tab={this} />;
+					break;
+				case "history":
+					this.history.current().title = this.title = "Browser History";
+					this.internalpage = <HistoryPage tab={this}></HistoryPage>;
+					break;
+				case "version":
+					this.history.current().title = this.title = "About Version";
+					this.internalpage = <AboutPage tab={this} />;
+					break;
+				case "settings":
+					this.history.current().title = this.title = "Settings";
+					this.internalpage = (
+						<SettingsPage
+							tab={this}
+							selected={
+								url.pathname.length > 1 ? url.pathname.slice(1) : "general"
+							}
+						/>
+					);
+					break;
+				case "downloads":
+					this.history.current().title = this.title = "Downloads";
+					this.internalpage = <DownloadsPage tab={this} />;
+			}
+		} else {
+			// placeholder title until the page fills in
+			this.history.current().title = this.title = url.href;
+
+			// if (!navigator.serviceWorker.controller) {
+			// 	serviceWorkerReady.then(() => {
+			console.warn("navigating to", url);
+			this.frame.go(url);
+			// 	});
+			// } else {
+			// this.frame.go(url);
+			// }
+		}
+	}
+
+	initialLoad() {
+		this.initResolve();
+		this.internalpage = null;
+	}
+
+	pushNavigate(url: URL) {
+		this.history.push(url, null, null, true, false);
+	}
+	replaceNavigate(url: URL) {
+		this.history.replace(url, null, true);
+	}
+
+	back() {
+		if (this.canGoBack) {
+			this.history.go(-1);
+		}
+	}
+	forward() {
+		if (this.canGoForward) {
+			this.history.go(1);
+		}
+	}
+	reload() {
+		if (this.internalpage) {
+			this._directnavigate(this.url);
+		} else {
+			this.frame.reload();
+		}
+	}
+}

package/source/packages/chrome/src/Tab/screenshot.ts

@@ -0,0 +1,66 @@
+import type { Tab } from "./Tab";
+
+import type HtmlToImage from "html-to-image";
+
+let stream: MediaStream | null;
+let track: MediaStreamTrack | null;
+let video: HTMLVideoElement | null;
+
+export async function startCapture() {
+	if (stream) return;
+
+	stream = await navigator.mediaDevices.getDisplayMedia({
+		video: {
+			displaySurface: "window",
+		},
+		//@ts-expect-error untyped
+		preferCurrentTab: true,
+		audio: false,
+	});
+	track = stream.getVideoTracks()[0];
+
+	video = document.createElement("video");
+	video.srcObject = stream;
+	video.play();
+}
+
+const canvas = document.createElement("canvas");
+const ctx = canvas.getContext("2d")!;
+export async function takeScreenshotGDM(
+	container: HTMLElement
+): Promise<Blob | null> {
+	if (!stream || !track || !video) return null;
+	try {
+		//@ts-expect-error untyped
+		const restrictionTarget = await RestrictionTarget.fromElement(container);
+		//@ts-expect-error untyped
+		await track.restrictTo(restrictionTarget);
+
+		await new Promise((r) => setTimeout(r, 100));
+		const settings = track.getSettings();
+		canvas.width = settings.width!;
+		canvas.height = settings.height!;
+		ctx.drawImage(video, 0, 0);
+		const blob: Blob | null = await new Promise((resolve) =>
+			canvas.toBlob(resolve, "image/png")
+		);
+
+		return blob;
+	} catch (e) {
+		console.error(e);
+
+		return null;
+	}
+}
+
+export async function takeScreenshotSvg(tab: Tab): Promise<string | null> {
+	const cw = tab.frame.frame.contentWindow!;
+	const h2: typeof HtmlToImage = (cw as any).h2;
+	const svg = await h2.toSvg(tab.frame.frame.contentDocument!.body, {
+		onImageErrorHandler: (...args) => {
+			console.log(args);
+		},
+	});
+
+	return svg;
+}

package/source/packages/chrome/src/Tab/serialize.ts

@@ -0,0 +1,221 @@
+type SerializedBrowserData = {
+	localStorage: Record<string, string>;
+	indexedDB: SerializedIndexedDB[];
+};
+
+type SerializedIndexedDB = {
+	name: string;
+	version: number;
+	stores: SerializedObjectStore[];
+};
+
+type SerializedObjectStore = {
+	name: string;
+	keyPath: any;
+	autoIncrement: boolean;
+	pairs: Array<[IDBValidKey, string]>; // [key, stringified_value]
+};
+
+async function serializeObjectStore(
+	store: IDBObjectStore
+): Promise<SerializedObjectStore> {
+	const ser: SerializedObjectStore = {
+		name: store.name,
+		keyPath: store.keyPath,
+		autoIncrement: store.autoIncrement,
+		pairs: [],
+	};
+
+	// Get all records from the store
+	return new Promise<SerializedObjectStore>((resolveStore, rejectStore) => {
+		const request = store.openCursor();
+
+		request.onerror = () =>
+			rejectStore(new Error(`Failed to open cursor for ${store.name}`));
+
+		request.onsuccess = function cursorIteration(_event) {
+			const cursor = request.result;
+
+			if (cursor) {
+				// Add current record to the pairs array
+				ser.pairs.push([cursor.key, JSON.stringify(cursor.value)]);
+
+				// Move to the next record
+				cursor.continue();
+			} else {
+				// No more records, resolve with the serialized store
+				resolveStore(ser);
+			}
+		};
+	});
+}
+
+async function serializeDb(name: string): Promise<SerializedIndexedDB> {
+	return new Promise<SerializedIndexedDB>((resolve, reject) => {
+		const req = indexedDB.open(name);
+
+		req.onerror = () => reject(new Error(`Failed to open database ${name}`));
+
+		req.onsuccess = async () => {
+			const db = req.result;
+
+			try {
+				const storeNames = Array.from(db.objectStoreNames);
+
+				if (storeNames.length === 0) {
+					resolve({
+						name: db.name,
+						version: db.version,
+						stores: [],
+					});
+					db.close();
+
+					return;
+				}
+
+				const trans = db.transaction(storeNames, "readonly");
+				const storePromises = storeNames.map((name) =>
+					serializeObjectStore(trans.objectStore(name))
+				);
+
+				const stores = await Promise.all(storePromises);
+
+				resolve({
+					name: db.name,
+					version: db.version,
+					stores,
+				});
+			} catch (error) {
+				reject(error);
+			} finally {
+				db.close();
+			}
+		};
+	});
+}
+
+type SerializedOPFSFile = {
+	kind: "file";
+	name: string;
+	data: Uint8Array;
+};
+
+type SerializedOFPSDirectory = {
+	kind: "directory";
+	name: string;
+	files: SerializedOPFSHandle[];
+};
+
+type SerializedOPFSHandle = SerializedOPFSFile | SerializedOFPSDirectory;
+
+export async function serializeAll(): Promise<SerializedBrowserData> {
+	// Serialize localStorage
+	const localStorage: Record<string, string> = {};
+	for (const key in window.localStorage) {
+		// Skip internal keys
+		if (key === "browserstate" || key.startsWith("puter")) continue;
+
+		// Only include actual localStorage items, not methods
+		if (Object.prototype.hasOwnProperty.call(window.localStorage, key)) {
+			localStorage[key] = window.localStorage[key];
+		}
+	}
+
+	// Serialize IndexedDB databases
+	const databases = await window.indexedDB.databases();
+	const dbPromises = databases
+		.filter((dbInfo) => dbInfo.name) // Filter out any databases without names
+		.map((dbInfo) => serializeDb(dbInfo.name!));
+
+	const indexedDBData = await Promise.all(dbPromises);
+
+	return {
+		localStorage,
+		indexedDB: indexedDBData,
+	};
+}
+
+export async function deserializeAll(
+	data: SerializedBrowserData
+): Promise<void> {
+	// Restore localStorage
+	for (const [key, value] of Object.entries(data.localStorage)) {
+		window.localStorage.setItem(key, value);
+	}
+
+	for (const db of data.indexedDB) {
+		await deserializeDb(db);
+	}
+
+	console.log("Browser data successfully restored");
+}
+
+async function deserializeDb(db: SerializedIndexedDB): Promise<void> {
+	return new Promise<void>((resolve, reject) => {
+		const request = indexedDB.open(db.name, db.version);
+
+		// Handle database upgrades/creation
+		request.onupgradeneeded = (_event) => {
+			const database = request.result;
+
+			// Create object stores
+			for (const store of db.stores) {
+				if (!database.objectStoreNames.contains(store.name)) {
+					database.createObjectStore(store.name, {
+						keyPath: store.keyPath,
+						autoIncrement: store.autoIncrement,
+					});
+				}
+			}
+		};
+
+		request.onerror = () =>
+			reject(new Error(`Failed to open database ${db.name}`));
+
+		request.onsuccess = async () => {
+			const database = request.result;
+
+			try {
+				for (const store of db.stores) {
+					if (store.pairs.length === 0) continue;
+
+					const transaction = database.transaction(store.name, "readwrite");
+					const objectStore = transaction.objectStore(store.name);
+
+					const addPromises = store.pairs.map(async ([key, valueStr]) => {
+						try {
+							const value = JSON.parse(valueStr);
+							if (store.autoIncrement) {
+								objectStore.put(value);
+							} else {
+								objectStore.put(value, key);
+							}
+						} catch (e) {
+							console.error(
+								`Failed to parse value for key ${String(key)} in store ${store.name}:`,
+								e
+							);
+						}
+					});
+
+					await Promise.all(addPromises);
+
+					// Wait for transaction to complete
+					await new Promise<void>((resolveTransaction, rejectTransaction) => {
+						transaction.oncomplete = () => resolveTransaction();
+						transaction.onerror = () =>
+							rejectTransaction(
+								new Error(`Transaction failed for ${store.name}`)
+							);
+					});
+				}
+
+				resolve();
+			} catch (error) {
+				reject(error);
+			} finally {
+				database.close();
+			}
+		};
+	});
+}