roxxie-proxy-u-prod 0.1.0

package/source/packages/inject/src/emulators/contextmenu.ts

@@ -0,0 +1,46 @@
+import { ExecutionContextWrapper } from "../context";
+import { Chromebound } from "../types";
+import { setupAlwaysLastBubble } from "./alwaysLastBubble";
+
+export function setupContextMenu(
+	{ self, rpc, client }: ExecutionContextWrapper,
+	addAlwaysLastEventListener: ReturnType<typeof setupAlwaysLastBubble>
+) {
+	addAlwaysLastEventListener(self.document, "contextmenu", (e: MouseEvent) => {
+		if (e.defaultPrevented) return;
+		e.preventDefault();
+		e.stopPropagation();
+		e.stopImmediatePropagation();
+		const target = e.target;
+		const selection = getSelection()?.toString();
+
+		const resp: Chromebound["contextmenu"][0] = {
+			x: e.clientX,
+			y: e.clientY,
+			selection,
+		};
+
+		if (client.box.instanceof(target, "HTMLImageElement")) {
+			const targetImage = target as HTMLImageElement;
+			resp.image = {
+				src: targetImage.src,
+				width: targetImage.naturalWidth,
+				height: targetImage.naturalHeight,
+			};
+		} else if (client.box.instanceof(target, "HTMLAnchorElement")) {
+			const targetAnchor = target as HTMLAnchorElement;
+			resp.anchor = {
+				href: targetAnchor.href,
+			};
+		} else if (client.box.instanceof(target, "HTMLVideoElement")) {
+			const targetVideo = target as HTMLVideoElement;
+			resp.video = {
+				src: targetVideo.currentSrc,
+				width: targetVideo.videoWidth,
+				height: targetVideo.videoHeight,
+			};
+		}
+
+		rpc.call("contextmenu", resp);
+	});
+}

package/source/packages/inject/src/emulators/history.ts

@@ -0,0 +1,51 @@
+import { ExecutionContextWrapper } from "../context";
+
+export function setupHistoryEmulation({
+	client,
+	rpc,
+}: ExecutionContextWrapper) {
+	client.Proxy("History.prototype.pushState", {
+		apply(ctx) {
+			const relevantclient = client.box.histories.get(ctx.this)!;
+
+			// TODO: should probably not send the pushstate if relevantclient ends up being not top level
+			rpc.call("history_pushState", {
+				state: ctx.args[0],
+				title: ctx.args[1],
+				url: new URL(ctx.args[2], relevantclient.url).href,
+			});
+		},
+	});
+
+	client.Proxy("History.prototype.replaceState", {
+		apply(ctx) {
+			const relevantclient = client.box.histories.get(ctx.this)!;
+			rpc.call("history_replaceState", {
+				state: ctx.args[0],
+				title: ctx.args[1],
+				url: new URL(ctx.args[2], relevantclient.url).href,
+			});
+		},
+	});
+	client.Proxy("History.prototype.back", {
+		apply(ctx) {
+			rpc.call("history_go", { delta: -1 });
+
+			ctx.return(undefined);
+		},
+	});
+	client.Proxy("History.prototype.forward", {
+		apply(ctx) {
+			rpc.call("history_go", { delta: 1 });
+
+			ctx.return(undefined);
+		},
+	});
+	client.Proxy("History.prototype.go", {
+		apply(ctx) {
+			rpc.call("history_go", { delta: ctx.args[0] });
+
+			ctx.return(undefined);
+		},
+	});
+}

package/source/packages/inject/src/emulators/titlewatcher.ts

@@ -0,0 +1,42 @@
+import { ExecutionContextWrapper } from "../context";
+
+export function setupTitleWatcher({ self, rpc }: ExecutionContextWrapper) {
+	let cachedfaviconurl: string | null = null;
+	const observer = new MutationObserver(() => {
+		const title = self.document.querySelector("title");
+		if (title) {
+			rpc.call("titlechange", { title: title.textContent || undefined });
+		}
+		const favicon = self.document.querySelector(
+			"link[rel='icon'], link[rel='shortcut icon'], link[rel='icon shortcut']"
+		);
+
+		const loadAndSendData = async (href: string) => {
+			let res = await fetch(href);
+			let blob = await res.blob();
+			const reader = new FileReader();
+			reader.onload = () => {
+				rpc.call("titlechange", { icon: reader.result as string });
+			};
+			reader.onabort = () => {
+				console.warn("Failed to read favicon");
+				cachedfaviconurl = null;
+			};
+			reader.readAsDataURL(blob);
+		};
+
+		if (favicon) {
+			const iconhref = favicon.getAttribute("href");
+			if (iconhref) {
+				if (iconhref !== cachedfaviconurl) {
+					cachedfaviconurl = iconhref;
+					loadAndSendData(iconhref);
+				}
+			}
+		}
+	});
+	observer.observe(self.document, {
+		childList: true,
+		subtree: true,
+	});
+}

package/source/packages/inject/src/emulators/windowopen.ts

@@ -0,0 +1,134 @@
+import { ExecutionContextWrapper } from "../context";
+import { chromeframe } from "..";
+import { reduceSequence } from "..";
+
+export function setupWindowOpen({
+	self,
+	rpc,
+	client,
+}: ExecutionContextWrapper) {
+	client.Proxy("window.open", {
+		apply(ctx) {
+			const url = new URL(ctx.args[0], client.url);
+
+			// TODO: return real window in singlethreaded mode
+
+			let realWindow: Window | null = null;
+			let realWindowResolve!: (window: Window) => void;
+			const realWindowPromise: Promise<Window> = new Promise((resolve) => {
+				realWindowResolve = resolve;
+			});
+
+			rpc
+				.call("newtab", {
+					url: url.href,
+				})
+				.then(({ sequence }) => {
+					console.error(
+						`windowopenproxy: newtab: sequence was received`,
+						sequence
+					);
+					let newWindow = reduceSequence(sequence);
+					if (!newWindow) {
+						throw new Error("Failed to reduce sequence");
+					}
+					realWindow = newWindow;
+					realWindowResolve(realWindow);
+				});
+
+			const windowProxy = new Proxy(
+				{},
+				{
+					get(target, prop) {
+						// TODO: hardcoded scramjet prefix
+						if (typeof prop === "string" && prop.startsWith("$scramjet__")) {
+							prop = prop.slice(11);
+						}
+
+						console.log(
+							`windowopenproxy: property ${String(prop)} was accessed`
+						);
+
+						if (realWindow) {
+							return Reflect.get(realWindow, prop);
+						} else {
+							if (prop === "location") {
+								// this doesn't need to be undetectable, just working
+								return new Proxy(
+									{},
+									{
+										get(target, prop) {
+											if (
+												typeof prop === "string" &&
+												prop.startsWith("$scramjet__")
+											) {
+												prop = prop.slice(11);
+											}
+											if (prop in url) {
+												return url[prop];
+											}
+											if (prop === "assign") {
+												return (target: string | URL) => {
+													console.log(
+														`windowopenproxy.location.assign: ${String(target)} was called`
+													);
+													realWindowPromise.then((realWindow) => {
+														console.log(realWindow);
+														console.log(typeof realWindow);
+														console.log(
+															`windowopenproxy.location.assign: real window was created, calling assign on it`,
+															realWindow
+														);
+														realWindow.location.assign(target);
+													});
+												};
+											} else if (prop === "reload") {
+												return () => {
+													realWindowPromise.then((realWindow) => {
+														realWindow.location.reload();
+													});
+												};
+											} else if (prop === "replace") {
+												return (target: string | URL) => {
+													realWindowPromise.then((realWindow) => {
+														realWindow.location.replace(target);
+													});
+												};
+											}
+											console.warn(
+												`windowopenproxy.location: property ${String(prop)} was accessed, but real window.location was not yet created`
+											);
+											return undefined;
+										},
+										set(target, prop, value) {
+											realWindowPromise.then((realWindow) => {
+												Reflect.set(realWindow.location, prop, value);
+											});
+											return true;
+										},
+									}
+								);
+							}
+
+							console.warn(
+								`windowopenproxy: property ${String(prop)} was accessed, but real window was not yet created`
+							);
+						}
+					},
+					set(target, prop, value) {
+						if (realWindow) {
+							Reflect.set(realWindow, prop, value);
+						} else {
+							realWindowPromise.then((window) => {
+								Reflect.set(window, prop, value);
+							});
+						}
+						return true;
+					},
+				}
+			);
+
+			ctx.return(windowProxy);
+		},
+	});
+}

package/source/packages/inject/src/errorpage/errorpage.css

@@ -0,0 +1,234 @@
+:root {
+	/* Fallbacks from themes.ts DEFAULT_THEME_ID (dark) */
+	--bg: #0c0f13;
+	--text: #eaf2f7;
+	--toolbar_field: #131719;
+	--toolbar_field_text: #eaf2f7;
+	--tab_line: #5bb4f4;
+
+	/* Local derived utility tokens used by error page + buttons */
+	--radius-xs: 3px;
+	--radius-sm: 4px;
+	--radius-md: 5px;
+	--radius-lg: 6px;
+	--radius-xl: 8px;
+
+	--font:
+		"Inter", "Segoe UI", Roboto, Ubuntu, Cantarell, "Noto Sans",
+		"Helvetica Neue", Arial, sans-serif;
+	--muted: color-mix(in srgb, var(--text) 62%, var(--bg));
+
+	--text-5: color-mix(in srgb, var(--text) 5%, transparent);
+	--text-8: color-mix(in srgb, var(--text) 8%, transparent);
+	--text-10: color-mix(in srgb, var(--text) 10%, transparent);
+	--text-15: color-mix(in srgb, var(--text) 15%, transparent);
+	--text-20: color-mix(in srgb, var(--text) 20%, transparent);
+	--text-40: color-mix(in srgb, var(--text) 40%, transparent);
+
+	--accent-shade-5: color-mix(in srgb, var(--tab_line) 95%, black);
+	--accent-shade-10: color-mix(in srgb, var(--tab_line) 90%, black);
+	--accent-shade-20: color-mix(in srgb, var(--tab_line) 80%, black);
+	--accent-shade-25: color-mix(in srgb, var(--tab_line) 75%, black);
+}
+
+html,
+body {
+	height: 100%;
+	margin: 0;
+	background: var(--bg);
+	color: var(--text);
+	font-family: var(--font);
+	overflow: hidden;
+}
+
+.wrapper {
+	min-height: 100%;
+	display: grid;
+	place-items: center;
+	padding: 24px;
+	box-sizing: border-box;
+}
+
+.errpage {
+	max-width: 900px;
+	width: 100%;
+	display: flex;
+	gap: 24px;
+	align-items: flex-start;
+	background: color-mix(in srgb, var(--toolbar_field) 55%, transparent);
+	border: 1px solid var(--text-15);
+	border-radius: var(--radius-xl);
+	padding: 24px;
+	box-sizing: border-box;
+}
+.err-graphic {
+	flex: 0 0 120px;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+.err-graphic .face {
+	width: 96px;
+	height: 96px;
+	border-radius: 12px;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	background: transparent;
+	border: 4px solid var(--muted);
+	color: var(--muted);
+	font-size: 44px;
+	line-height: 1;
+}
+
+.err-main {
+	flex: 1 1 auto;
+}
+.err-title {
+	font-size: 28px;
+	font-weight: 600;
+	margin: 0 0 8px 0;
+	color: var(--text);
+}
+.err-sub {
+	margin: 0 0 18px 0;
+	color: var(--muted);
+	font-size: 14px;
+}
+
+.err-message {
+	margin: 0 0 16px 0;
+	padding: 10px 14px;
+	padding-left: 16px;
+	background: color-mix(in srgb, var(--muted) 6%, transparent);
+	border-radius: var(--radius-sm);
+	overflow: hidden;
+	color: var(--muted);
+	word-break: break-word;
+	font-size: 13px;
+	position: relative;
+}
+
+.err-message,
+.face {
+	font-family:
+		ui-monospace, SFMono-Regular, Menlo, Monaco, "Roboto Mono", monospace;
+}
+
+.err-message::before {
+	content: "";
+	position: absolute;
+	left: 0;
+	top: 0;
+	bottom: 0;
+	width: 2px;
+	background: var(--muted);
+	border-top-left-radius: var(--radius-sm);
+	border-bottom-left-radius: var(--radius-sm);
+}
+
+.controls {
+	display: flex;
+	gap: 12px;
+	align-items: center;
+	flex-wrap: wrap;
+	margin-bottom: 14px;
+}
+
+.btn {
+	color: inherit;
+	background: var(--toolbar_field);
+	border: 1px solid var(--text-20);
+	border-radius: var(--radius-md);
+	padding: 0.5em 1em;
+	font-size: 0.9em;
+	cursor: pointer;
+	color: var(--toolbar_field_text);
+	font: inherit;
+}
+
+.btn:hover {
+	background: var(--text-10);
+	background-image: radial-gradient(
+		70% 80% at 50% 100%,
+		var(--text-8),
+		var(--text-5)
+	);
+}
+
+.btn-primary {
+	background-color: var(--tab_line);
+	background-image: radial-gradient(
+		70% 80% at 50% 100%,
+		var(--tab_line),
+		var(--accent-shade-20)
+	);
+	box-shadow: inset 0px 0.05em 0.025em rgb(255 255 255 / 30%);
+	text-shadow: 0 0.055em 0.05em var(--accent-shade-20);
+	color: white;
+	font-weight: 500;
+	border-color: var(--tab_line);
+}
+
+.btn-primary:hover {
+	background-color: var(--accent-shade-10);
+	background-image: radial-gradient(
+		70% 80% at 50% 100%,
+		var(--accent-shade-5),
+		var(--accent-shade-25)
+	);
+	filter: saturate(1.1);
+}
+
+.btn:disabled,
+.btn[disabled] {
+	opacity: 0.6;
+	cursor: not-allowed;
+	pointer-events: none;
+	background: var(--toolbar_field);
+	color: var(--text-40);
+	border-color: var(--text-20);
+}
+
+.btn:disabled:hover,
+.btn[disabled]:hover {
+	background: var(--toolbar_field);
+}
+
+.details {
+	display: none;
+	margin-top: 8px;
+	background: transparent;
+	border: 1px dashed var(--muted);
+	opacity: 0.78;
+	padding: 10px;
+	border-radius: 6px;
+	font-family:
+		ui-monospace, SFMono-Regular, Menlo, Monaco, "Roboto Mono", monospace;
+	font-size: 12px;
+	color: var(--muted);
+	max-height: 260px;
+	overflow: auto;
+	white-space: pre-wrap;
+}
+
+.suggestions {
+	margin-top: 12px;
+	color: var(--muted);
+	font-size: 13px;
+}
+
+@media (max-width: 720px) {
+	.errpage {
+		flex-direction: column;
+		align-items: center;
+		text-align: center;
+	}
+	.err-graphic {
+		order: 0;
+	}
+	.err-main {
+		order: 1;
+		width: 100%;
+	}
+}

package/source/packages/inject/src/errorpage/errorpage.html

@@ -0,0 +1,29 @@
+<div class="wrapper" role="main" aria-labelledby="errTitle">
+	<div class="errpage" role="alert" aria-live="polite">
+		<div class="err-graphic" aria-hidden="true">
+			<div class="face">:(</div>
+		</div>
+
+		<div class="err-main">
+			<h1 id="errTitle" class="err-title">This page can&#39;t be loaded</h1>
+			<p class="err-sub">
+				The page at this address could not be loaded. This might be due to a
+				network issue or the server being unreachable.
+			</p>
+
+			<p class="err-message" id="errorMessage"></p>
+
+			<div class="controls">
+				<button class="btn btn-primary" id="reloadBtn">Reload</button>
+				<button class="btn btn-link" id="toggleBtn">Show details</button>
+				<button class="btn btn-link" id="copyBtn">Copy details</button>
+			</div>
+			<pre id="details" class="details" style="display: none"></pre>
+
+			<p class="suggestions">
+				Try checking your connection, or try again later. If you believe this is
+				a problem with the browser, try disabling extensions.
+			</p>
+		</div>
+	</div>
+</div>

package/source/packages/inject/src/errorpage/errorpage.ts

@@ -0,0 +1,76 @@
+//@ts-expect-error
+import rawErrorHtml from "./errorpage.html";
+//@ts-expect-error
+import rawErrorCss from "./errorpage.css";
+import { ThemeDefinition } from "../../../chrome/src/themes";
+
+let themeStyle: HTMLStyleElement;
+export function applyTheme(theme: ThemeDefinition) {
+	themeStyle.innerHTML = `:root {
+		--font: "Inter", system-ui, sans-serif;
+		--bg: ${theme.tokens.ntp_background};
+		--text: ${theme.tokens.ntp_text};
+		--muted: color-mix(in srgb, ${theme.tokens.ntp_text} 55%, transparent);
+		--accent: ${theme.tokens.tab_line};
+		--button-bg: ${theme.tokens.tab_line};
+		--button-text: ${theme.tokens.ntp_background};
+	}`;
+}
+
+export function loadErrorPage(errormeta: {
+	message: string;
+	stack: string;
+	theme: ThemeDefinition;
+}) {
+	let initialStyle = document.createElement("style");
+	initialStyle.innerHTML = rawErrorCss;
+	document.head.appendChild(initialStyle);
+
+	themeStyle = document.createElement("style");
+	document.head.appendChild(themeStyle);
+	applyTheme(errormeta.theme);
+
+	document.open();
+	document.write(rawErrorHtml);
+	document.close();
+
+	let reloadBtn = document.getElementById("reloadBtn")!;
+	let toggleBtn = document.getElementById("toggleBtn")!;
+	let details = document.getElementById("details")!;
+	let copyBtn = document.getElementById("copyBtn")!;
+	let errorMessage = document.getElementById("errorMessage")!;
+
+	reloadBtn.addEventListener("click", () => location.reload());
+
+	let error = `Error: ${errormeta.message}\n\n${errormeta.stack}`;
+
+	errorMessage.innerText = errormeta.message;
+	details.innerText = errormeta.stack;
+	toggleBtn.addEventListener("click", () => {
+		if (details.style.display === "none") {
+			details.style.display = "block";
+			toggleBtn.textContent = "Hide details";
+		} else {
+			details.style.display = "none";
+			toggleBtn.textContent = "Show details";
+		}
+	});
+
+	copyBtn.addEventListener("click", () => {
+		const text = error;
+		const textarea = document.createElement("textarea");
+		textarea.value = text;
+		textarea.style.position = "fixed";
+		textarea.style.opacity = "0";
+		document.body.appendChild(textarea);
+		textarea.select();
+		document.execCommand("copy");
+		document.body.removeChild(textarea);
+
+		const originalText = copyBtn.textContent;
+		copyBtn.textContent = "Copied!";
+		setTimeout(() => {
+			copyBtn.textContent = originalText;
+		}, 2000);
+	});
+}

package/source/packages/inject/src/index.ts

@@ -0,0 +1,62 @@
+import { FrameSequence, InjectScramjetInit } from "./types";
+
+import {
+	type ScramjetClient,
+	SCRAMJETCLIENT,
+	setWasm,
+} from "@mercuryworkshop/scramjet/bundled";
+import { loadErrorPage } from "./errorpage/errorpage";
+import { ExecutionContextWrapper } from "./context";
+
+// these are the only globals that are safe to be shared
+export let chromeframe: Window;
+export let wasm: Uint8Array;
+
+export function reduceSequence(sequence: FrameSequence): Window | null {
+	return sequence.reduce<Window | null>((win, idx) => {
+		if (!win) return null;
+		return win.frames[idx];
+	}, self.top);
+}
+
+function $injectLoad(init: InjectScramjetInit) {
+	if (SCRAMJETCLIENT in globalThis) {
+		const existing = (globalThis as any)[SCRAMJETCLIENT] as ScramjetClient;
+		existing.syncDocumentInit({
+			initHeaders: init.initHeaders,
+			history: init.history,
+			cookies: init.cookies,
+		});
+		return;
+	}
+
+	if (init.sequence && !chromeframe) {
+		chromeframe = reduceSequence(init.sequence)!;
+		if (!chromeframe) {
+			throw new Error(
+				"Reducing InitSequence failed to yield valid frame! This is very bad."
+			);
+		}
+	}
+
+	if (!("WASM" in self)) {
+		throw new Error("WASM not found in global scope!");
+	}
+	wasm = Uint8Array.from(atob(self.WASM), (c) => c.charCodeAt(0));
+	delete (self as any).WASM;
+	setWasm(wasm);
+
+	const context = new ExecutionContextWrapper(self, init);
+	console.log("Execution Context Created", self);
+}
+
+function $injectLoadError(init: InjectScramjetInit, errormeta) {
+	loadErrorPage(errormeta);
+
+	$injectLoad(init);
+}
+
+// @ts-expect-error
+globalThis.$injectLoadError = $injectLoadError;
+// @ts-expect-error
+globalThis.$injectLoad = $injectLoad;