buninu-browser 0.1.0 → 0.2.0

package/lib/renderer/flags.js

@@ -1,17 +1,20 @@
 /** Command-line flags the controller passes to renderer processes. */
+import { CHROMIUM_VERSION } from "../user-agent.js";
 
 /** fd 3 is the controller's compositor channel; start the compositor Worker. */
 export const COMPOSITOR_FLAG = "--compositor";
 
+/** BUNINU_VERIFY_STYLE: check every incremental restyle against a full one (development). */
+export const VERIFY_STYLE_FLAG = "--buninu-verify-style";
+/** BUNINU_FULL_STYLE: restyle the whole document every time (to compare with incremental restyles). */
+export const FULL_STYLE_FLAG = "--buninu-full-style";
+
 /** --mobile: the renderer presents itself as a phone (user agent, touch media features). */
 export const MOBILE_FLAG = "--buninu-mobile";
 
-/**
- * A current Android WebView user agent, as sent with --mobile. Sites such as
- * Google reject the frozen "Android 10; K" string of reduced user agents.
- */
+/** Chrome for Android on an Android 16 phone, as sent with --mobile. */
 export const MOBILE_USER_AGENT =
-  "Mozilla/5.0 (Linux; Android 16; ASUSAI2501C Build/BQ2A.250525.001; wv) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/153.0.8010.36 Mobile Safari/537.36";
+  `Mozilla/5.0 (Linux; Android 16; ASUSAI2501C Build/BQ2A.250525.001) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/${CHROMIUM_VERSION} Mobile Safari/537.36`;
 
 /**
  * --mobile lays pages out no wider than a phone (CSS pixels; a Pixel-class

package/lib/renderer/host.js

@@ -13,18 +13,33 @@
  * scrolling even while the main thread is busy (see compositor.js).
  */
 import { closeSync } from "node:fs";
+import { PulseClient } from "../audio/pulse-client.js";
 import { logEnabled, pipeToLog, RENDERER_LOG_FLAG } from "../log.js";
 import { NetworkService } from "../network/network-service.js";
-import { COMPOSITOR_FLAG } from "./flags.js";
+import { COMPOSITOR_FLAG, FULL_STYLE_FLAG, VERIFY_STYLE_FLAG } from "./flags.js";
 
 const ALLOWED_SCHEMES = new Set(["http:", "https:", "data:"]);
 const FETCH_MODES = new Set(["cors", "no-cors", "same-origin"]);
 const CREDENTIALS_MODES = new Set(["omit", "same-origin", "include"]);
 const REDIRECT_MODES = new Set(["follow", "error", "manual"]);
 const MAX_REQUEST_HEADERS = 100;
-const RESOURCE_KINDS = new Set(["stylesheet", "image", "script", "metadata", "video"]);
+const RESOURCE_KINDS = new Set(["stylesheet", "image", "script", "metadata", "video", "audio"]);
 const NAVIGATION_SCHEMES = new Set(["http:", "https:", "about:", "data:"]);
 const MAX_RESOURCE_BYTES = 32 * 1024 * 1024;
+// Audio output: one PulseAudio native-protocol connection (jspulse or a
+// PulseAudio daemon on 127.0.0.1:4713) shared by every renderer, opened on
+// first use. Renderers cannot open sockets, so their audio comes through here.
+let pulse = null;
+function pulseClient() {
+  pulse ??= PulseClient.connect().catch((error) => {
+    pulse = null;
+    throw new Error(`no PulseAudio server at 127.0.0.1:4713 (start jspulse): ${error.message}`);
+  });
+  return pulse;
+}
+const MAX_AUDIO_STREAMS = 8;
+const MAX_AUDIO_CHUNK = 4 * 1024 * 1024;
+
 // WebSockets page script may hold open per renderer, and the largest message either way.
 const MAX_WEB_SOCKETS = 64;
 const MAX_WEB_SOCKET_MESSAGE = 16 * 1024 * 1024;
@@ -42,6 +57,7 @@ export class RendererHost {
   #timeout;
   #onRestart;
   #onNavigate;
+  #onDownload;
   #network;
   // The document this host asked its renderer to load: the trusted origin
   // for everything the renderer requests.
@@ -51,6 +67,8 @@ export class RendererHost {
   #pending = new Map();
   // Page WebSockets: id -> { child, socket } (Bun's WebSocket, opened here)
   #sockets = new Map();
+  // Audio streams: id -> { child, stream } (PulseAudio playback streams)
+  #audio = new Map();
   #nextId = 1;
   #queue = Promise.resolve();
   #restarting = false;
@@ -68,7 +86,8 @@ export class RendererHost {
    *   args?: string[],
    *   timeout?: number,
    *   onRestart?: (call: (method: string, ...params: unknown[]) => Promise<unknown>) => Promise<void>,
-   *   onNavigate?: (url: string) => void,
+   *   onNavigate?: (url: string, downloadName: string | null, fragmentFrom: { x: number, y: number } | null) => void,
+   *   onDownload?: (payload: { url: string, name: string, data: Uint8Array }) => void,
    *   onFrame?: () => void,
    *   onLifecycle?: (name: "DOMContentLoaded" | "load", generation: number) => void,
    *   compositor?: boolean,
@@ -77,7 +96,8 @@ export class RendererHost {
    * }} options
    */
   constructor({
-    entry = DEFAULT_ENTRY, args = [], timeout = 30_000, onRestart = null, onNavigate = null, fetch: fetchImpl = fetch,
+    entry = DEFAULT_ENTRY, args = [], timeout = 30_000, onRestart = null, onNavigate = null, onDownload = null,
+    fetch: fetchImpl = fetch,
     network = new NetworkService({ fetch: fetchImpl }), onFrame = null, onLifecycle = null,
     // The compositor's channel is an extra stdio pipe used as fd 3, which
     // Windows does not have (Bun hands out libuv pipes there, not file
@@ -88,6 +108,7 @@ export class RendererHost {
     this.#onLifecycle = onLifecycle;
     this.#compositor = compositor;
     this.#onNavigate = onNavigate;
+    this.#onDownload = onDownload;
     this.#entry = entry;
     this.#args = args;
     this.#timeout = timeout;
@@ -108,7 +129,8 @@ export class RendererHost {
     const compositor = this.#compositor;
     const child = Bun.spawn({
       cmd: [process.execPath, this.#entry, ...this.#args,
-        ...(logging ? [RENDERER_LOG_FLAG] : []), ...(compositor ? [COMPOSITOR_FLAG] : [])],
+        ...(logging ? [RENDERER_LOG_FLAG] : []), ...(compositor ? [COMPOSITOR_FLAG] : []),
+        ...(process.env.BUNINU_VERIFY_STYLE ? [VERIFY_STYLE_FLAG] : []), ...(process.env.BUNINU_FULL_STYLE ? [FULL_STYLE_FLAG] : [])],
       // No inherited environment: nothing from the controller leaks in.
       // Windows programs need SystemRoot to load system libraries.
       env: process.platform === "win32" && process.env.SystemRoot ? { SystemRoot: process.env.SystemRoot } : {},
@@ -126,6 +148,7 @@ export class RendererHost {
       onExit: (_process, exitCode, signalCode) => {
         this.#closeChannel(channel);
         this.#closeSockets(child);
+        this.#closeAudio(child);
         if (this.#child !== child) return;
         console.error(`buninu-browser: renderer ${child.pid} exited unexpectedly (${signalCode ?? `code ${exitCode}`})`);
         this.#child = null;
@@ -277,6 +300,7 @@ export class RendererHost {
     this.#closeChannel(this.#channel);
     const child = this.#child;
     this.#closeSockets(child);
+    this.#closeAudio(child);
     this.#child = null;
     this.#ready = null;
     child?.kill();
@@ -350,6 +374,28 @@ export class RendererHost {
       if (entry?.child !== child) return;
       const code = Number.isInteger(message.code) ? message.code : undefined;
       entry.socket.close(code, typeof message.reason === "string" ? message.reason.slice(0, 123) : undefined);
+    } else if (message.type === "audio-open" && Number.isInteger(message.id)) {
+      this.#openAudio(child, message);
+    } else if (message.type === "audio-data" && Number.isInteger(message.id)) {
+      const entry = this.#audio.get(message.id);
+      if (entry?.child === child && message.data instanceof Uint8Array && message.data.byteLength <= MAX_AUDIO_CHUNK) {
+        // Audio that arrives before the stream is open waits for it.
+        if (entry.stream) entry.stream.write(message.data);
+        else entry.early.push(message.data);
+      }
+    } else if (message.type === "audio-finish" && Number.isInteger(message.id)) {
+      const entry = this.#audio.get(message.id);
+      if (entry?.child !== child) return;
+      const send = (payload) => this.#child === child && child.send({ type: "audio-event", id: message.id, ...payload });
+      (entry.opened ?? Promise.resolve()).then(() => entry.stream?.finish()).then(() => {
+        this.#audio.delete(message.id);
+        send({ event: "ended" });
+      }, () => this.#audio.delete(message.id));
+    } else if (message.type === "audio-close" && Number.isInteger(message.id)) {
+      const entry = this.#audio.get(message.id);
+      if (entry?.child !== child) return;
+      this.#audio.delete(message.id);
+      (entry.opened ?? Promise.resolve()).then(() => entry.stream?.close()).catch(() => {});
     } else if (message.type === "lifecycle" && LIFECYCLE_NAMES.has(message.name) && Number.isInteger(message.generation)) {
       this.#onLifecycle?.(message.name, message.generation);
     } else if (message.type === "cookie" && typeof message.value === "string" && message.value.length <= 4096) {
@@ -362,7 +408,19 @@ export class RendererHost {
       } catch {
         return;
       }
-      if (NAVIGATION_SCHEMES.has(target.protocol)) this.#onNavigate?.(target.href);
+      if (NAVIGATION_SCHEMES.has(target.protocol)) {
+        const download = typeof message.download === "string" ? message.download.slice(0, 200) : null;
+        const from = message.fragmentFrom;
+        const fragmentFrom = from && Number.isFinite(from.x) && Number.isFinite(from.y) ? { x: from.x, y: from.y } : null;
+        this.#onNavigate?.(target.href, download, fragmentFrom);
+      }
+    } else if (message.type === "download-data" && typeof message.url === "string"
+      && message.data instanceof Uint8Array && message.data.byteLength <= 64 * 1024 * 1024) {
+      let target;
+      try { target = new URL(message.url); } catch { return; }
+      if (target.protocol !== "blob:") return;
+      this.#onDownload?.({ url: target.href, name: typeof message.name === "string" ? message.name.slice(0, 200) : "",
+        data: message.data });
     }
   }
 
@@ -398,6 +456,43 @@ export class RendererHost {
     });
   }
 
+  /** A renderer's audio element starts playing: a PulseAudio stream relays its PCM. */
+  #openAudio(child, { id, rate, channels, name }) {
+    const send = (payload) => {
+      if (this.#child === child) child.send({ type: "audio-event", id, ...payload });
+    };
+    const owned = [...this.#audio.values()].filter((entry) => entry.child === child).length;
+    if (this.#audio.has(id) || owned >= MAX_AUDIO_STREAMS
+      || !(Number.isInteger(rate) && rate >= 1000 && rate <= 384000) || !(Number.isInteger(channels) && channels >= 1 && channels <= 8)) {
+      send({ event: "error", message: "invalid audio stream" });
+      return;
+    }
+    const entry = { child, stream: null, early: [] };
+    entry.opened = pulseClient()
+      .then((client) => client.openPlayback({
+        rate, channels, name: String(name ?? "audio").slice(0, 200),
+        leadSeconds: name === "piano" ? 0.12 : undefined,
+        onRequest: (bytes) => send({ event: "request", bytes }),
+      }))
+      .then((stream) => {
+        if (this.#audio.get(id) !== entry) return stream.close();
+        entry.stream = stream;
+        for (const data of entry.early.splice(0)) stream.write(data);
+      }, (error) => {
+        this.#audio.delete(id);
+        send({ event: "error", message: String(error?.message ?? error) });
+      });
+    this.#audio.set(id, entry);
+  }
+
+  #closeAudio(child) {
+    for (const [id, entry] of this.#audio) {
+      if (entry.child !== child) continue;
+      this.#audio.delete(id);
+      (entry.opened ?? Promise.resolve()).then(() => entry.stream?.close()).catch(() => {});
+    }
+  }
+
   #closeSockets(child) {
     for (const [id, entry] of this.#sockets) {
       if (entry.child !== child) continue;
@@ -433,6 +528,7 @@ export class RendererHost {
           url: response.url || target.href,
           contentType: response.contentType,
           body: response.body,
+          documentCookie: this.#network.documentCookie(this.#documentUrl),
         },
       });
     } catch (error) {

package/lib/renderer/main.js

@@ -11,13 +11,17 @@
  *   renderer -> controller  { type: "ready", sandbox: { seccomp, ses } } (each { installed, reason })
  *                           { type: "result", id, result | error }
  *                           { type: "fetch", id, url, kind }
- *                           { type: "navigate", url }
+ *                           { type: "navigate", url, download, fragmentFrom }  (fragmentFrom: the renderer
+ *                             already showed this fragment; the scroll offset it left)
  *                           { type: "page-fetch", id, request }  (fetch/XHR, answered by fetch-result)
  *                           { type: "cookie", value }            (document.cookie = value)
  *                           { type: "lifecycle", name, generation } (DOMContentLoaded, load)
  *                           { type: "ws-open", id, url, protocols } / { type: "ws-send", id, data }
  *                           / { type: "ws-close", id, code, reason }  (page WebSockets)
  *   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)
  *
  * With --compositor, a compositor Worker (compositor.js) answers screenshots
  * and scrolling on fd 3 while this thread is busy; frames go to it with
@@ -32,7 +36,7 @@
  */
 import "../../vendor/ses/dist/ses.mjs";
 import { createPageRenderer } from "./page-renderer.js";
-import { COMPOSITOR_FLAG, MOBILE_FLAG } from "./flags.js";
+import { COMPOSITOR_FLAG, FULL_STYLE_FLAG, MOBILE_FLAG, VERIFY_STYLE_FLAG } from "./flags.js";
 import { installSeccomp } from "./seccomp.js";
 import { RENDERER_LOG_FLAG } from "../log.js";
 import wasmpeg from "../../vendor/wasmpeg/src/js/index.js";
@@ -92,6 +96,24 @@ const webSockets = {
   close: (id, code, reason) => process.send({ type: "ws-close", id, code, reason }),
 };
 
+// Audio output: PCM goes to the controller, which plays it through PulseAudio.
+const audioListeners = new Map();
+let nextAudioId = 1;
+const audio = {
+  open({ rate, channels, name }, onEvent) {
+    const id = nextAudioId++;
+    audioListeners.set(id, onEvent);
+    process.send({ type: "audio-open", id, rate, channels, name });
+    return id;
+  },
+  write: (id, data) => process.send({ type: "audio-data", id, data }),
+  finish: (id) => process.send({ type: "audio-finish", id }),
+  close(id) {
+    audioListeners.delete(id);
+    process.send({ type: "audio-close", id });
+  },
+};
+
 // Workers load their module from disk, so this happens before seccomp.
 const compositor = process.argv.includes(COMPOSITOR_FLAG) ? await startCompositor() : null;
 
@@ -129,9 +151,11 @@ async function startCompositor() {
 
 const renderer = await createPageRenderer({
   fetchResource,
-  requestNavigation: (url) => process.send({ type: "navigate", url }),
+  requestNavigation: (url, download = null, fragmentFrom = null) => process.send({ type: "navigate", url, download, fragmentFrom }),
+  requestDownload: ({ url, name, data }) => process.send({ type: "download-data", url, name, data }),
   pageFetch,
   webSockets,
+  audio,
   setCookie: (value) => process.send({ type: "cookie", value }),
   reportError: (message) => report(`buninu-browser: page error: ${logging ? message : String(message).split("\n")[0]}`),
   consoleMessage: logging ? (level, text) => report(`page console.${level}: ${text}`) : null,
@@ -139,6 +163,8 @@ const renderer = await createPageRenderer({
   onFrame: compositor ? (frame) => compositor.postMessage({ type: "frame", serial: ++framesSent, ...frame }) : null,
   onLifecycle: (name, generation) => 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),
   videoDecoder: wasmpeg,
 });
 await warmUp();
@@ -206,6 +232,12 @@ process.on("message", async (message) => {
     else pending.resolve(message.result);
     return;
   }
+  if (message?.type === "audio-event") {
+    const listener = audioListeners.get(message.id);
+    if (message.event === "ended" || message.event === "error") audioListeners.delete(message.id);
+    listener?.(message);
+    return;
+  }
   if (message?.type === "ws-event") {
     const listener = socketListeners.get(message.id);
     if (message.event === "close") socketListeners.delete(message.id);

package/lib/renderer/module-transform.js

@@ -124,8 +124,9 @@ export function transformModule(source) {
 
   rewriteImportReferences(program, importExpressions, edits);
 
-  // import.meta and import() can appear anywhere in the module.
-  walk(program, (node) => {
+  // import.meta and import() can appear anywhere in the module; most
+  // modules have neither, and then the extra walk is skipped.
+  if (/\bimport\s*[.(]/.test(source)) walk(program, (node) => {
     if (node.type === "MetaProperty" && node.meta.name === "import") {
       edits.push({ start: node.start, end: node.end, text: `${MODULE}.meta` });
     } else if (node.type === "ImportExpression") {
@@ -135,14 +136,17 @@ export function transformModule(source) {
     return true;
   });
 
-  edits.sort((left, right) => right.start - left.start);
-  let body = source.startsWith("#!") ? source.slice(source.indexOf("\n") + 1) : source;
-  const offset = source.length - body.length;
+  // Applied in one pass: re-slicing the whole source per edit was quadratic.
+  edits.sort((left, right) => left.start - right.start);
+  const offset = source.startsWith("#!") ? source.indexOf("\n") + 1 : 0;
+  const pieces = [];
+  let cursor = offset;
   for (const edit of edits) {
-    const start = edit.start - offset;
-    const end = edit.end - offset;
-    body = body.slice(0, start) + edit.text + body.slice(end);
+    pieces.push(source.slice(cursor, edit.start), edit.text);
+    cursor = edit.end;
   }
+  pieces.push(source.slice(cursor));
+  const body = pieces.join("");
   const stars = starExports.map((index) => `${MODULE}.exportStar(${namespace(index)});`).join("\n");
   const code = `(async function (${MODULE}) {
 "use strict";
@@ -319,12 +323,7 @@ function rewriteImportReferences(program, imports, edits) {
       case "ExportAllDeclaration":
         return;
       default:
-        for (const [key, value] of Object.entries(node)) {
-          if (key === "type" || key === "start" || key === "end") continue;
-          for (const child of Array.isArray(value) ? value : [value]) {
-            if (child && typeof child === "object") expression(child);
-          }
-        }
+        forEachChild(node, expression);
     }
   }
 
@@ -353,12 +352,7 @@ function collectVarNames(node, names) {
   if (node.type === "VariableDeclaration" && node.kind === "var") {
     for (const declarator of node.declarations) for (const name of boundNames(declarator.id)) names.add(name);
   }
-  for (const [key, value] of Object.entries(node)) {
-    if (key === "type" || key === "start" || key === "end") continue;
-    for (const child of Array.isArray(value) ? value : [value]) {
-      if (child && typeof child === "object") collectVarNames(child, names);
-    }
-  }
+  forEachChild(node, (child) => collectVarNames(child, names));
 }
 
 function importType(node) {
@@ -371,10 +365,23 @@ function importType(node) {
 function walk(node, visit) {
   if (!node || typeof node.type !== "string") return;
   if (visit(node) === false) return;
-  for (const [key, value] of Object.entries(node)) {
+  forEachChild(node, (child) => walk(child, visit));
+}
+
+/**
+ * Calls `each` with every child object of an AST node. A for-in loop with
+ * no temporary arrays: Object.entries and [value] wrappers per node were
+ * most of the time spent transforming large modules.
+ */
+function forEachChild(node, each) {
+  for (const key in node) {
     if (key === "type" || key === "start" || key === "end") continue;
-    for (const child of Array.isArray(value) ? value : [value]) {
-      if (child && typeof child === "object") walk(child, visit);
+    const value = node[key];
+    if (value === null || typeof value !== "object") continue;
+    if (Array.isArray(value)) {
+      for (const child of value) if (child !== null && typeof child === "object") each(child);
+    } else {
+      each(value);
     }
   }
 }