buninu-browser 0.2.0 → 0.2.2

package/lib/renderer/main.js

@@ -8,6 +8,8 @@
  * Protocol (structured-clone messages):
  *   controller -> renderer  { type: "call", id, method, params }
  *                           { type: "fetch-result", id, result | error }
+ *                           { type: "fetch-chunk", id, data }   (video/audio stream)
+ *                           { type: "fetch-end", id } / { type: "fetch-error", id, error }
  *   renderer -> controller  { type: "ready", sandbox: { seccomp, ses } } (each { installed, reason })
  *                           { type: "result", id, result | error }
  *                           { type: "fetch", id, url, kind }
@@ -21,7 +23,9 @@
  *   controller -> renderer  { type: "ws-event", id, event, ... }  (open, message, error, close)
  *   renderer -> controller  { type: "audio-open", id, rate, channels, name } / { type: "audio-data", id, data }
  *                           / { type: "audio-finish", id } / { type: "audio-close", id }  (audio output)
- *   controller -> renderer  { type: "audio-event", id, event, ... }  (request with bytes, ended, error)
+ *                           / { type: "audio-resync", id }  (paced from now on, after the writer paused)
+ *   controller -> renderer  { type: "audio-event", id, event, ... }  (ready, request with bytes, ended, error,
+ *                           closed with sentBytes: the PCM that reached the output before audio-close)
  *
  * With --compositor, a compositor Worker (compositor.js) answers screenshots
  * and scrolling on fd 3 while this thread is busy; frames go to it with
@@ -40,13 +44,15 @@ import { COMPOSITOR_FLAG, FULL_STYLE_FLAG, MOBILE_FLAG, VERIFY_STYLE_FLAG } from
 import { installSeccomp } from "./seccomp.js";
 import { RENDERER_LOG_FLAG } from "../log.js";
 import wasmpeg from "../../vendor/wasmpeg/src/js/index.js";
+import { createBytePipe } from "../media/byte-pipe.js";
+import { notifyRejectionHandled, notifyUnhandledRejection } from "./rejections.js";
 
 const DANGEROUSLY_ALLOW_HOST_JS = "--dangerously-allow-host-js";
 
 /** Methods the controller may invoke; anything else is ignored. */
 const METHODS = new Set([
-  "loadDocument", "showFragment", "runJavaScriptURL", "url", "scrollTo", "resize", "screenshot", "title",
-  "scroll", "press", "type", "scrollOffset", "click", "evaluate", "setUserAgent", "consoleMessages", "whenLoaded",
+  "loadDocument", "showFragment", "wheel", "runJavaScriptURL", "url", "scrollTo", "resize", "screenshot", "title",
+  "scroll", "press", "type", "scrollOffset", "click", "evaluate", "setUserAgent", "setInitScripts", "consoleMessages", "whenLoaded",
   "applyCompositorScroll",
 ]);
 
@@ -57,29 +63,48 @@ const logging = process.argv.includes(RENDERER_LOG_FLAG);
 const stderr = process.stderr;
 const report = (text) => stderr.write(`${text}\n`);
 
-// As in browsers, a page's unhandled rejection is logged, not fatal.
-process.on("unhandledRejection", (reason) => {
+// As in browsers, a page's unhandled rejection is logged, not fatal, unless
+// its unhandledrejection event is canceled.
+process.on("unhandledRejection", (reason, promise) => {
+  if (notifyUnhandledRejection(reason, promise)) return;
   const text = reason?.stack || (reason?.name ? `${reason.name}: ${reason.message}` : String(reason));
   report(`buninu-browser: page error: unhandled rejection: ${logging ? text : text.split("\n")[0]}`);
 });
 
+process.on("rejectionHandled", (promise) => notifyRejectionHandled(promise));
+
 const pendingFetches = new Map();
 let nextFetchId = 1;
 
 function fetchResource(url, kind) {
   return new Promise((resolve, reject) => {
     const id = nextFetchId++;
-    pendingFetches.set(id, { resolve, reject });
+    // The pipe exists before the request is sent, so a chunk that arrives
+    // before the head is still part of the body the caller receives.
+    const pipe = kind === "video" || kind === "audio" ? createBytePipe() : null;
+    pendingFetches.set(id, { resolve, reject, pipe, head: false });
     process.send({ type: "fetch", id, url, kind });
   });
 }
 
 function pageFetch(request) {
-  return new Promise((resolve, reject) => {
+  let fetchId;
+  let streamController;
+  const body = new ReadableStream({
+    start(controller) { streamController = controller; },
+    cancel() { promise.abort(); },
+  });
+  const promise = new Promise((resolve, reject) => {
     const id = nextFetchId++;
-    pendingFetches.set(id, { resolve, reject });
+    fetchId = id;
+    pendingFetches.set(id, { resolve, reject, page: true, body, streamController, head: false });
     process.send({ type: "page-fetch", id, request });
   });
+  promise.abort = () => {
+    if (!pendingFetches.delete(fetchId)) return;
+    process.send({ type: "page-fetch-abort", id: fetchId });
+  };
+  return promise;
 }
 
 // Page WebSockets live in the controller (Bun's WebSocket); events come back as ws-event.
@@ -98,6 +123,8 @@ const webSockets = {
 
 // Audio output: PCM goes to the controller, which plays it through PulseAudio.
 const audioListeners = new Map();
+// audio.close() promises, settled by the controller's "closed" event.
+const audioClosing = new Map();
 let nextAudioId = 1;
 const audio = {
   open({ rate, channels, name }, onEvent) {
@@ -108,14 +135,19 @@ const audio = {
   },
   write: (id, data) => process.send({ type: "audio-data", id, data }),
   finish: (id) => process.send({ type: "audio-finish", id }),
+  resync: (id) => process.send({ type: "audio-resync", id }),
+  /** Closes a stream; resolves to the bytes of PCM that reached the output first. */
   close(id) {
     audioListeners.delete(id);
     process.send({ type: "audio-close", id });
+    return new Promise((resolve) => audioClosing.set(id, resolve));
   },
 };
 
 // Workers load their module from disk, so this happens before seccomp.
 const compositor = process.argv.includes(COMPOSITOR_FLAG) ? await startCompositor() : null;
+// Started before the sandbox closes: the worker loads its module from disk.
+const rewriteScript = await startScriptRewriter();
 
 // Frames sent to the compositor and the latest one it confirmed.
 let framesSent = 0;
@@ -149,9 +181,48 @@ async function startCompositor() {
   return worker;
 }
 
+/**
+ * A worker thread that rewrites classic scripts for the page realm (see
+ * rewrite-worker.js); null when it cannot start, and scripts are then
+ * rewritten on the main thread as before.
+ */
+async function startScriptRewriter() {
+  let worker;
+  try {
+    worker = new Worker(new URL("./rewrite-worker.js", import.meta.url).href);
+    await new Promise((resolve, reject) => {
+      worker.addEventListener("message", resolve, { once: true });
+      worker.addEventListener("error", reject, { once: true });
+    });
+  } catch {
+    worker?.terminate();
+    return null;
+  }
+  const pending = new Map();
+  let nextId = 0;
+  worker.addEventListener("message", ({ data }) => {
+    const request = pending.get(data?.id);
+    if (!request) return;
+    pending.delete(data.id);
+    if (data.error !== undefined) request.reject(new Error(data.error));
+    else request.resolve(data.result);
+  });
+  worker.addEventListener("error", (event) => {
+    for (const request of pending.values()) request.reject(new Error(String(event?.message ?? "script rewriter failed")));
+    pending.clear();
+  });
+  worker.unref?.();
+  return (source) => new Promise((resolve, reject) => {
+    const id = ++nextId;
+    pending.set(id, { resolve, reject });
+    worker.postMessage({ id, source });
+  });
+}
+
 const renderer = await createPageRenderer({
   fetchResource,
-  requestNavigation: (url, download = null, fragmentFrom = null) => process.send({ type: "navigate", url, download, fragmentFrom }),
+  rewriteScript,
+  requestNavigation: (url, download = null, fragmentFrom = null, post = null) => process.send({ type: "navigate", url, download, fragmentFrom, post }),
   requestDownload: ({ url, name, data }) => process.send({ type: "download-data", url, name, data }),
   pageFetch,
   webSockets,
@@ -161,7 +232,11 @@ const renderer = await createPageRenderer({
   consoleMessage: logging ? (level, text) => report(`page console.${level}: ${text}`) : null,
   trace: logging ? (text) => report(`timing: ${text}`) : null,
   onFrame: compositor ? (frame) => compositor.postMessage({ type: "frame", serial: ++framesSent, ...frame }) : null,
-  onLifecycle: (name, generation) => process.send({ type: "lifecycle", name, generation }),
+  // Whoever waits for load (a screenshot, say) sees the frame painted at load.
+  onLifecycle: (name, generation) => {
+    if (name !== "load") process.send({ type: "lifecycle", name, generation });
+    else compositorCaughtUp().then(() => process.send({ type: "lifecycle", name, generation }));
+  },
   mobile: process.argv.includes(MOBILE_FLAG),
   verifyStyle: process.argv.includes(VERIFY_STYLE_FLAG),
   fullStyle: process.argv.includes(FULL_STYLE_FLAG),
@@ -224,15 +299,88 @@ async function warmUp() {
 }
 
 process.on("message", async (message) => {
+  if (message?.type === "page-fetch-head") {
+    const pending = pendingFetches.get(message.id);
+    if (!pending?.page || pending.head) return;
+    pending.head = true;
+    pending.resolve({ ...(message.result ?? {}), body: pending.body });
+    return;
+  }
+  if (message?.type === "page-fetch-chunk") {
+    pendingFetches.get(message.id)?.streamController?.enqueue(message.data);
+    return;
+  }
+  if (message?.type === "page-fetch-end") {
+    const pending = pendingFetches.get(message.id);
+    if (!pending?.page) return;
+    pendingFetches.delete(message.id);
+    pending.streamController.close();
+    return;
+  }
+  if (message?.type === "page-fetch-error") {
+    const pending = pendingFetches.get(message.id);
+    if (!pending?.page) return;
+    pendingFetches.delete(message.id);
+    const error = new Error(message.error || "fetch failed");
+    if (pending.head) pending.streamController.error(error);
+    else pending.reject(error);
+    return;
+  }
+  if (message?.type === "fetch-chunk") {
+    const pending = pendingFetches.get(message.id);
+    if (message.data) pending?.pipe?.append(message.data);
+    return;
+  }
+  if (message?.type === "fetch-end") {
+    const pending = pendingFetches.get(message.id);
+    if (!pending) return;
+    pendingFetches.delete(message.id);
+    pending.pipe?.finish();
+    return;
+  }
+  if (message?.type === "fetch-error") {
+    const pending = pendingFetches.get(message.id);
+    if (!pending) return;
+    pendingFetches.delete(message.id);
+    const error = new Error(message.error || "media fetch failed");
+    pending.pipe?.fail(error);
+    if (!pending.head) pending.reject(error);
+    return;
+  }
   if (message?.type === "fetch-result") {
     const pending = pendingFetches.get(message.id);
     if (!pending) return;
+    if (message.error) {
+      pendingFetches.delete(message.id);
+      const error = new Error(message.error);
+      pending.pipe?.fail(error);
+      if (!pending.head) pending.reject(error);
+      return;
+    }
+    const result = message.result ?? {};
+    if (result.streaming && pending.pipe) {
+      pending.head = true;
+      pending.resolve({ ...result, body: pending.pipe });
+      return;
+    }
     pendingFetches.delete(message.id);
-    if (message.error) pending.reject(new Error(message.error));
-    else pending.resolve(message.result);
+    if (pending.pipe) {
+      if (result.body) pending.pipe.append(result.body);
+      pending.pipe.finish();
+      pending.head = true;
+      pending.resolve({ ...result, body: pending.pipe });
+      return;
+    }
+    pending.resolve(result);
     return;
   }
   if (message?.type === "audio-event") {
+    if (message.event === "closed") {
+      const resolve = audioClosing.get(message.id);
+      audioClosing.delete(message.id);
+      resolve?.(Number.isFinite(message.sentBytes) ? message.sentBytes : 0);
+      return;
+    }
     const listener = audioListeners.get(message.id);
     if (message.event === "ended" || message.event === "error") audioListeners.delete(message.id);
     listener?.(message);