[chrome] implement popstate and make virtual states better

Author: velzie

packages/chrome/src/Browser.tsx

@@ -20,30 +20,6 @@ import type { ScramjetDownload } from "@mercuryworkshop/scramjet";
 
 export let browser: Browser;
 
-export const config = createState({
-	theme: {
-		frame_bg: [231, 238, 245],
-		toolbar_bg: [211, 218, 255],
-		toolbar_button_fg: [65, 72, 76],
-		toolbar_fg: [65, 72, 76],
-
-		inactive_tab_bg: [40, 40, 40],
-		inactive_tab_fg: [95, 92, 96],
-		active_tab_fg: [65, 72, 76],
-
-		button_bg: [231, 238, 0],
-
-		ntp_bg: [231, 238, 0],
-		ntp_fg: [232, 234, 237],
-		ntp_link_fg: [138, 180, 248],
-
-		omnibox_bg: [221, 228, 235],
-		omnibox_fg: [227, 227, 227],
-
-		bookmark_fg: [199, 199, 199],
-	},
-});
-
 export type SerializedBrowser = {
 	tabs: SerializedTab[];
 	globalhistory: SerializedHistoryState[];

packages/chrome/src/History.ts

@@ -80,11 +80,18 @@ export class History {
 		return this.states[this.index];
 	}
 
-	push(url: URL, state: any = null, navigate: boolean = true): HistoryState {
+	push(
+		url: URL,
+		state: any = null,
+		navigate: boolean = true,
+		virtual: boolean = false
+	): HistoryState {
 		if (this.index + 1 < this.states.length)
 			// "fork" history tree, creating a new timeline
 			this.states.splice(this.index, this.states.length - this.index);
 		const hstate = new HistoryState({ url, state });
+		if (virtual) hstate.virtual = true;
+
 		if (url.href != "puter://newtab") browser.globalhistory.push(hstate);
 		this.states.push(hstate);
 		this.index++;
@@ -130,8 +137,10 @@ export class History {
 		let newstate = this.states[this.index];
 
 		if (newstate.virtual) {
-			sendFrame(this.tab, "history_go", {
-				delta,
+			sendFrame(this.tab, "popstate", {
+				state: newstate.state,
+				url: newstate.url.href,
+				title: newstate.title || "",
 			});
 		} else if (navigate) {
 			this.justTriggeredNavigation = true;

packages/chrome/src/IsolatedFrame.tsx

@@ -819,4 +819,20 @@ const chromemethods: ChromeboundMethods = {
 			tab.history.push(new URL(url), undefined, false);
 		}
 	},
+
+	history_go: async (tab, { delta }) => {
+		if (tab) {
+			tab.history.go(delta);
+		}
+	},
+	history_pushState: async (tab, { url, title }) => {
+		if (tab) {
+			tab.history.push(new URL(url), title, true);
+		}
+	},
+	history_replaceState: async (tab, { url, title }) => {
+		if (tab) {
+			tab.history.replace(new URL(url), title);
+		}
+	},
 };

packages/chrome/src/pages/NewTabPage.tsx

@@ -113,7 +113,7 @@ NewTabPage.style = css`
 	}
 	.inputcontainer {
 		flex: 1;
-		max-width: 40em;
+		max-width: 60em;
 		box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.1);
 		background: var(--bg20);
 		border-radius: var(--radius);

packages/inject/src/index.ts

@@ -7,12 +7,16 @@ import { sendChrome } from "./ipc";
 export const client = self[SCRAMJETCLIENT];
 export const chromeframe = top!;
 
+const history_replaceState = History.prototype.replaceState;
+
 export const methods: FrameboundMethods = {
 	async navigate({ url }) {
 		window.location.href = url;
 	},
-	async history_go({ delta }) {
-		client.natives.call("History.prototype.go", history, delta);
+	async popstate({ url, state, title }) {
+		history_replaceState.call(history, state, title, url);
+		const popStateEvent = new PopStateEvent("popstate", { state });
+		window.dispatchEvent(popStateEvent);
 	},
 };
 
@@ -114,7 +118,7 @@ function setupHistoryEmulation() {
 			sendChrome("history_pushState", {
 				state: ctx.args[0],
 				title: ctx.args[1],
-				url: ctx.args[2],
+				url: new URL(ctx.args[2], client.url).href,
 			});
 
 			ctx.return(undefined);
@@ -126,7 +130,7 @@ function setupHistoryEmulation() {
 			sendChrome("history_replaceState", {
 				state: ctx.args[0],
 				title: ctx.args[1],
-				url: ctx.args[2],
+				url: new URL(ctx.args[2], client.url).href,
 			});
 
 			ctx.return(undefined);

packages/inject/src/types.d.ts

@@ -57,5 +57,11 @@ export type Framebound = {
 			url: string;
 		},
 	];
-	history_go: [{ delta: number }, void];
+	popstate: [
+		{
+			state: any;
+			url: string;
+			title: string;
+		},
+	];
 };