roxxie-proxy-u-prod 0.1.0

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

@@ -0,0 +1,269 @@
+import type { FC } from "dreamland/core";
+import { css } from "dreamland/core";
+import { TabStrip } from "@components/TabStrip/TabStrip";
+import { Sidebar, VerticalPinList } from "@components/TabStrip/Sidebar";
+import { Tab } from "./Tab/Tab";
+import { BookmarksStrip } from "@components/BookmarksStrip";
+import { Omnibar } from "@components/Omnibar/Omnibar";
+import { getTheme } from "./themes";
+import { contexts } from "./proxy/scramjet";
+import { INTERNAL_URL_PROTOCOL } from "./consts";
+import { Shell } from "@components/Shell";
+import { settingsService, tabsService } from ".";
+
+const DEFAULT_HYBRID_SIDEBAR_WIDTH = 225;
+const DEFAULT_VERTICAL_SIDEBAR_WIDTH = 280;
+
+function getSidebarWidth(
+	layout: "horizontal" | "bottom" | "hybrid" | "vertical" | "compact",
+	savedWidth: number | null
+) {
+	if (savedWidth !== null) return savedWidth;
+	return layout === "vertical"
+		? DEFAULT_VERTICAL_SIDEBAR_WIDTH
+		: DEFAULT_HYBRID_SIDEBAR_WIDTH;
+}
+
+export function App(
+	this: FC<
+		{},
+		{
+			children: any;
+		}
+	>
+) {
+	const applyTheme = () => {
+		const appearance = settingsService.settings.appearance;
+		const themeId = settingsService.settings.themeId;
+		const theme = getTheme(themeId);
+
+		// Determine if we should use light mode
+		let isLight = false;
+		if (appearance === "system") {
+			const prefersDark = window.matchMedia(
+				"(prefers-color-scheme: dark)"
+			).matches;
+			isLight = !prefersDark;
+		} else {
+			isLight = appearance === "light";
+		}
+
+		document.body.classList.toggle("light-mode", isLight);
+
+		// Apply theme tokens
+		for (const [key, value] of Object.entries(theme.tokens)) {
+			document.body.style.setProperty(`--${key}`, value);
+		}
+
+		for (const context of contexts) {
+			context.rpc.call("updateTheme", theme);
+		}
+	};
+
+	applyTheme();
+
+	const applyProfile = () => {
+		const profile = settingsService.settings.uiProfile;
+		document.body.classList.toggle("ui-compact", profile === "compact");
+		document.body.classList.toggle("ui-touch", profile === "touch");
+		document.body.classList.toggle("ui-default", profile === "default");
+	};
+
+	applyProfile();
+
+	const applyLayout = () => {
+		const layout = settingsService.settings.tabLayout;
+		document.body.classList.toggle("layout-bottom", layout === "bottom");
+		document.body.classList.toggle("layout-compact", layout === "compact");
+		const verticalTabs = layout === "hybrid" || layout === "vertical";
+		document.body.classList.toggle("vertical-tabs", verticalTabs);
+		document.body.classList.toggle("full-vertical-tabs", layout === "vertical");
+		document.body.classList.toggle(
+			"sidebar-left",
+			settingsService.settings.verticalTabJustify === "left"
+		);
+		document.body.classList.toggle(
+			"sidebar-right",
+			settingsService.settings.verticalTabJustify === "right"
+		);
+	};
+
+	applyLayout();
+
+	const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
+	const handleThemeChange = () => {
+		if (settingsService.settings.appearance === "system") {
+			applyTheme();
+		}
+	};
+
+	mediaQuery.addEventListener("change", handleThemeChange);
+
+	use(settingsService.settings.appearance).listen(applyTheme);
+	use(settingsService.settings.themeId).listen(applyTheme);
+
+	use(settingsService.settings.uiProfile).listen(applyProfile);
+	use(settingsService.settings.tabLayout).listen(applyLayout);
+	use(settingsService.settings.verticalTabJustify).listen(applyLayout);
+
+	this.cx.mount = () => {
+		applyTheme();
+	};
+
+	return (
+		<div
+			id="app"
+			class={use(settingsService.settings.tabLayout).map((layout) =>
+				[
+					layout === "hybrid" || layout === "vertical" ? "vertical-tabs" : "",
+					`layout-${layout}`,
+				]
+					.filter(Boolean)
+					.join(" ")
+			)}
+		>
+			{use(settingsService.settings.tabLayout).map((layout) =>
+				layout === "hybrid" || layout === "vertical" ? (
+					<Sidebar
+						layout={layout}
+						justify={use(settingsService.settings.verticalTabJustify)}
+						tabs={use(tabsService.tabs)}
+						activetab={use(tabsService.activetab)}
+						sidebarWidth={use(
+							settingsService.settings.tabLayout,
+							settingsService.settings.sidebarWidth
+						).map(([currentLayout, sidebarWidth]) =>
+							getSidebarWidth(currentLayout, sidebarWidth)
+						)}
+						setSidebarWidth={(width: number) => {
+							settingsService.settings.sidebarWidth = Math.round(width);
+						}}
+						addTab={() => {
+							tabsService.newTab(
+								new URL(`${INTERNAL_URL_PROTOCOL}//newtab`),
+								true
+							);
+						}}
+						destroyTab={(tab: Tab) => {
+							tabsService.destroyTab(tab);
+						}}
+						topContent={
+							layout === "hybrid" ? (
+								<VerticalPinList
+									tabs={use(tabsService.tabs)}
+									activetab={use(tabsService.activetab)}
+									destroyTab={(tab: Tab) => tabsService.destroyTab(tab)}
+								/>
+							) : (
+								<div class="vertical-sidebar-header">
+									<Omnibar tab={use(tabsService.activetab)} layout="vertical" />
+									<VerticalPinList
+										tabs={use(tabsService.tabs)}
+										activetab={use(tabsService.activetab)}
+										destroyTab={(tab: Tab) => tabsService.destroyTab(tab)}
+									/>
+									<div class="vertical-sidebar-bookmarks">
+										<BookmarksStrip orientation="vertical" />
+									</div>
+								</div>
+							)
+						}
+					/>
+				) : layout === "compact" ? null : (
+					<TabStrip
+						tabs={use(tabsService.tabs)}
+						activetab={use(tabsService.activetab)}
+						addTab={() => {
+							tabsService.newTab(
+								new URL(`${INTERNAL_URL_PROTOCOL}//newtab`),
+								true
+							);
+						}}
+						destroyTab={(tab: Tab) => {
+							tabsService.destroyTab(tab);
+						}}
+					/>
+				)
+			)}
+			<div id="main">
+				{use(settingsService.settings.tabLayout).map((layout) =>
+					layout === "vertical" ? null : (
+						<>
+							<Omnibar
+								tab={use(tabsService.activetab)}
+								layout={layout === "compact" ? "compact" : "horizontal"}
+							/>
+							{use(
+								tabsService.activetab.url,
+								settingsService.settings.showBookmarksBar
+							)
+								.map(
+									([u, pinned]) =>
+										pinned || u.href === `${INTERNAL_URL_PROTOCOL}//newtab`
+								)
+								.and(<BookmarksStrip />)}
+							<div class="separator"></div>
+						</>
+					)
+				)}
+				{this.children}
+			</div>
+		</div>
+	);
+}
+App.style = css`
+	:scope {
+		background-color: var(--frame);
+		--separator-color: color-mix(in srgb, currentColor 10%, transparent);
+	}
+
+	.separator {
+		color: var(--toolbar);
+		position: relative;
+		top: -1px;
+
+		/*box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);*/
+		border-top: 1px solid var(--text-15);
+	}
+
+	:global(.vertical-sidebar-header) {
+		display: flex;
+		flex-direction: column;
+		gap: var(--space-md);
+	}
+
+	:global(.vertical-sidebar-bookmarks) {
+		padding-bottom: 0.25rem;
+		border-bottom: 1px solid var(--text-15);
+	}
+`;
+
+const app = document.getElementById("app")!;
+
+export let mountedResolve!: () => void;
+export const mountedPromise = new Promise<void>((resolve) => {
+	mountedResolve = resolve;
+}).then(() => {
+	mountedResolve = null!;
+});
+
+export async function mount(): Promise<HTMLElement> {
+	try {
+		let shell = <Shell />;
+		let built = <App>{shell}</App>;
+		built.addEventListener("contextmenu", (e) => {
+			e.preventDefault();
+		});
+
+		// Replace the gate only after browser construction and setup have
+		// succeeded. If either throws, the user still has a working Try again
+		// button instead of a detached startup controller.
+		app.replaceWith(built);
+		mountedResolve();
+
+		return built;
+	} catch (e) {
+		console.error(e);
+		throw e;
+	}
+}

package/source/packages/chrome/src/CDP.ts

@@ -0,0 +1,285 @@
+import type Protocol from "devtools-protocol";
+import { tabsService } from ".";
+import type { Tab } from "./Tab/Tab";
+
+export function startCDP(message: (message: string) => void): CDPServer {
+	const server = new CDPServer(message);
+
+	return server;
+}
+
+export class ErrorWithCode extends Error {
+	code: number;
+	constructor(code: number, message: string) {
+		super(message);
+		this.code = code;
+
+		Object.setPrototypeOf(this, new.target.prototype);
+	}
+}
+
+let server: CDPServer;
+class CDPServer {
+	id = 0;
+
+	constructor(public sendMessage: (message: string) => void) {
+		console.log("starting cdp server");
+		server = this;
+	}
+
+	async message(message: string) {
+		const msg = JSON.parse(message);
+		const resultMsg: any = {
+			id: msg.id,
+			sessionId: msg.sessionId,
+		};
+		console.log(msg);
+
+		try {
+			resultMsg.result = await this.callMethod(
+				msg.method,
+				msg.params,
+				msg.sessionId
+			);
+		} catch (e) {
+			console.error("CDP error", e);
+			if (e instanceof ErrorWithCode) {
+				resultMsg.error = {
+					message: e.message,
+					code: e.code,
+				};
+			} else if (e instanceof Error) {
+				resultMsg.error = {
+					message: e.message,
+				};
+			}
+		}
+		console.log(resultMsg);
+
+		this.sendMessage(JSON.stringify(resultMsg));
+	}
+
+	sessionid = 0;
+
+	sessions = new Map<
+		string,
+		{
+			tab: Tab;
+			callbacks: Map<number, (result: any) => void>;
+			messageid: number;
+		}
+	>();
+	initSession(tab: Tab): string {
+		const sid = String(this.sessionid++);
+
+		const callbacks = new Map<number, (result: any) => void>();
+		const session = {
+			tab,
+			callbacks,
+			messageid: 1,
+		};
+		this.sessions.set(sid, session);
+		tab.onChobitsuMessage = (message: string) => {
+			let msg = JSON.parse(message);
+			if (callbacks.has(msg.id)) {
+				const callback = callbacks.get(msg.id)!;
+				callback(msg);
+				callbacks.delete(session.messageid);
+
+				return;
+			}
+			console.log("Forwawrding Evvent", msg);
+			if (msg.params?.context && !msg.params.context.auxData) {
+				msg.params.context.auxData = {
+					frameId: String(tab.id),
+					isDefault: true,
+				};
+			}
+			this.sendMessage(
+				JSON.stringify({
+					method: msg.method,
+					params: msg.params,
+					sessionId: sid,
+				})
+			);
+		};
+
+		return sid;
+	}
+
+	async callTabMethod(
+		sessionid: string,
+		method: string,
+		params: object
+	): Promise<object> {
+		const session = this.sessions.get(sessionid);
+		if (!session) {
+			throw new ErrorWithCode(-32001, `Session ${sessionid} not found`);
+		}
+		const msgid = session.messageid++;
+
+		const msg = {
+			id: msgid,
+			method,
+			params,
+		};
+		if (!session.tab.sendToChobitsu) {
+			throw new ErrorWithCode(-32001, `Session ${sessionid} not found`);
+		}
+		session.tab.sendToChobitsu(JSON.stringify(msg));
+
+		return await new Promise((resolve) => {
+			session.callbacks.set(msgid, (result: any) => {
+				resolve(result);
+			});
+		});
+	}
+
+	emit<T>(method: string, params: T) {
+		const msg = JSON.stringify({
+			method,
+			params,
+		});
+		this.sendMessage(msg);
+	}
+
+	async callMethod(method: string, params: any, sessionId?: string) {
+		const [domainName, methodName] = method.split(".");
+		const domain: any = (Scopes as any)[domainName];
+		if (domain) {
+			if (domain[methodName]) {
+				return domain[methodName](params) || {};
+			}
+		}
+
+		if (sessionId) {
+			console.log("Routing " + method + " to session " + sessionId);
+
+			const result: any = await this.callTabMethod(sessionId, method, params);
+
+			if (result.result) {
+				return result.result;
+			} else if (result.error) {
+				throw new Error(result.error.message);
+			} else {
+				throw new Error("Bad message from subcdp");
+			}
+		}
+
+		throw Error(`${method} unimplemented`);
+	}
+}
+
+function createTargetInfo(tab: Tab): Protocol.Target.TargetInfo {
+	return {
+		browserContextId: "0",
+		targetId: String(tab.id),
+		type: "page",
+		title: tab.title || "New Tab",
+		url: tab.url.href,
+		attached: true,
+		canAccessOpener: false,
+	};
+}
+
+const Scopes = {
+	Browser: {
+		getVersion(): Protocol.Browser.GetVersionResponse {
+			return {
+				protocolVersion: "0.0.0",
+				product: "scramjet",
+				revision: "0",
+				userAgent: navigator.userAgent,
+				jsVersion: "0.0.0",
+			};
+		},
+		setDownloadBehavior(params: Protocol.Browser.SetDownloadBehaviorRequest) {
+			console.log(params);
+		},
+	},
+
+	Runtime: {
+		runIfWaitingForDebugger() {
+			console.log("?");
+		},
+	},
+
+	Target: {
+		async createTarget(
+			params: Protocol.Target.CreateTargetRequest
+		): Promise<Protocol.Target.CreateTargetResponse> {
+			console.log("creating new target");
+			const tab = tabsService.newTab(new URL("https://google.com/"));
+			const sessionid = server.initSession(tab);
+
+			await tab.waitForInit;
+			server.emit<Protocol.Target.AttachedToTargetEvent>(
+				"Target.attachedToTarget",
+				{
+					sessionId: sessionid,
+					waitingForDebugger: false,
+					targetInfo: createTargetInfo(tab),
+				}
+			);
+
+			return {
+				targetId: String(tab.id),
+			};
+		},
+
+		async closeTarget(params: Protocol.Target.CloseTargetRequest) {
+			let tab = tabsService.tabs.find((x) => x.id === String(params.targetId));
+			if (!tab) {
+				throw new Error(`Target ${params.targetId} not found`);
+			}
+			tabsService.destroyTab(tab);
+			server.emit<Protocol.Target.TargetDestroyedEvent>(
+				"Target.targetDestroyed",
+				{
+					targetId: String(tab.id),
+				}
+			);
+		},
+
+		async setAutoAttach(params: Protocol.Target.SetAutoAttachRequest) {
+			return {};
+		},
+		getTargetInfo(
+			params: Protocol.Target.GetTargetInfoRequest
+		): Protocol.Target.GetTargetInfoResponse {
+			return {
+				targetInfo: {
+					targetId: "0",
+					/**
+					 * List of types: https://source.chromium.org/chromium/chromium/src/+/main:content/browser/devtools/devtools_agent_host_impl.cc?ss=chromium&q=f:devtools%20-f:out%20%22::kTypeTab%5B%5D%22
+					 */
+					type: "tab",
+					title: "test",
+					url: "https://google.com",
+					/**
+					 * Whether the target has an attached client.
+					 */
+					attached: false,
+					/**
+					 * Opener target Id
+					 */
+					// openerId?: TargetID;
+					/**
+					 * Whether the target has access to the originating window.
+					 */
+					canAccessOpener: false,
+					/**
+					 * Frame id of originating window (is only set if target has an opener).
+					 */
+					// openerFrameId?: Page.FrameId;
+					// browserContextId?: Browser.BrowserContextID;
+					/**
+					 * Provides additional details for specific target types. For example, for
+					 * the type of "page", this may be set to "prerender".
+					 */
+					// subtype?: string;
+				},
+			};
+		},
+	},
+};