buninu-browser 0.2.2 → 0.2.4

package/lib/renderer/font-loading.js

@@ -0,0 +1,227 @@
+// Web fonts belong to the document. Built-in typefaces are shared native
+// references: registering their byte buffers again would copy tens of MB for
+// every document and iframe.
+const encoder = new TextEncoder();
+const MAX_FONT_BYTES = 32 * 1024 * 1024;
+
+export function registerTypeface(CanvasKit, provider, typeface, family) {
+  const bytes = encoder.encode(`${family}\0`);
+  const memory = CanvasKit.Malloc(Uint8Array, bytes.length);
+  try {
+    memory.toTypedArray().set(bytes);
+    // This is the entry point the bundled registerFont(bytes, family) uses
+    // after creating a Typeface. Skia retains the typeface and copies the name.
+    provider._registerFont(typeface, memory.byteOffset);
+  } finally {
+    CanvasKit.Free(memory);
+  }
+}
+
+function styleRank(face, wanted) {
+  const order = wanted === "italic" ? ["italic", "oblique", "normal"]
+    : wanted === "oblique" ? ["oblique", "italic", "normal"] : ["normal", "oblique", "italic"];
+  return order.indexOf(face.style ?? "normal");
+}
+
+/** CSS Fonts weight fallback order, including the special 400..500 interval. */
+function weightRank(face, wanted) {
+  const [low, high] = face.weight ?? [400, 400];
+  if (low <= wanted && wanted <= high) return 0;
+  if (wanted >= 400 && wanted <= 500) {
+    if (low > wanted && low <= 500) return low - wanted;
+    if (high < wanted) return 1000 + wanted - high;
+    return 2000 + low - wanted;
+  }
+  if (wanted < 400) return high < wanted ? wanted - high : 1000 + low - wanted;
+  return low > wanted ? low - wanted : 1000 + wanted - high;
+}
+
+function covers(face, point) {
+  return (face.unicodeRanges ?? [[0, 0x10ffff]]).some(([from, to]) => from <= point && point <= to);
+}
+
+function stretchRank(face, wanted) {
+  const [low, high] = face.stretch ?? [100, 100];
+  if (low <= wanted && wanted <= high) return 0;
+  if (wanted <= 100) return high < wanted ? wanted - high : 1000 + low - wanted;
+  return low > wanted ? low - wanted : 1000 + wanted - high;
+}
+
+function ranked(faces, weight, style, stretch = 100) {
+  return faces.toReversed().sort((left, right) => stretchRank(left, stretch) - stretchRank(right, stretch)
+    || styleRank(left, style) - styleRank(right, style)
+    || weightRank(left, weight) - weightRank(right, weight));
+}
+
+/** Only request faces needed by text which actually participates in layout. */
+export function neededFontFaces(faces, textRuns, availableFamilies = new Set()) {
+  const families = new Map();
+  for (const face of faces) {
+    const key = face.family.toLowerCase();
+    if (!families.has(key)) families.set(key, []);
+    families.get(key).push(face);
+  }
+  const needed = new Set();
+  const choices = new Map();
+  for (const { text, style } of textRuns) {
+    if (!text || !style) continue;
+    const points = new Set([...text].map(character => character.codePointAt(0)));
+    for (const family of style.fontFamily ?? []) {
+      const definitions = families.get(family.toLowerCase());
+      if (!definitions) {
+        if (availableFamilies.has(family.toLowerCase())) break;
+        continue;
+      }
+      const key = `${family.toLowerCase()}\n${style.fontWeight ?? 400}/${style.fontStyle ?? "normal"}/${style.fontStretch ?? 100}`;
+      let ordered = choices.get(key);
+      if (!ordered) choices.set(key, ordered = ranked(definitions, style.fontWeight ?? 400, style.fontStyle ?? "normal", style.fontStretch ?? 100));
+      for (const point of points) {
+        const face = ordered.find(face => covers(face, point));
+        if (face) { needed.add(face); points.delete(point); }
+      }
+      if (!points.size) break;
+    }
+  }
+  return needed;
+}
+
+export class DocumentFonts {
+  #CanvasKit;
+  #builtins;
+  #defaultCollection;
+  #fetch;
+  #changed;
+  #error;
+  #provider = null;
+  #collection = null;
+  #faces = [];
+  #records = new Map();
+  #sources = new Map();
+  #pending = new Set();
+  #requests = new Set();
+  #closed = false;
+  #nextAlias = 1;
+  #availableFamilies;
+  #hasUnicodeRanges = false;
+
+  constructor({ CanvasKit, builtins, defaultCollection, fetch, availableFamilies = new Set(), changed = () => {}, error = () => {} }) {
+    this.#CanvasKit = CanvasKit;
+    this.#builtins = builtins;
+    this.#defaultCollection = defaultCollection;
+    this.#fetch = fetch;
+    this.#changed = changed;
+    this.#error = error;
+    this.#availableFamilies = availableFamilies;
+  }
+
+  get collection() { return this.#collection ?? this.#defaultCollection; }
+
+  get hasUnicodeRanges() { return this.#hasUnicodeRanges; }
+
+  setFaces(faces) {
+    this.#faces = faces;
+    this.#hasUnicodeRanges = faces.some(face => face.unicodeRanges?.length
+      && !(face.unicodeRanges.length === 1 && face.unicodeRanges[0][0] === 0 && face.unicodeRanges[0][1] === 0x10ffff));
+  }
+
+  update(faces, textRuns) {
+    if (this.#closed) return;
+    this.setFaces(faces);
+    for (const face of neededFontFaces(faces, textRuns, this.#availableFamilies)) {
+      const key = JSON.stringify(face);
+      if (this.#records.has(key)) continue;
+      const record = { face, alias: null };
+      this.#records.set(key, record);
+      const pending = this.#load(record).catch(error => {
+        if (!this.#closed) this.#error(error);
+      }).finally(() => this.#pending.delete(pending));
+      this.#pending.add(pending);
+    }
+  }
+
+  /** Available faces in CSS fallback order; unicode-subset files share a family. */
+  resolve(family, weight = 400, style = "normal", point = null, stretch = 100) {
+    const definitions = this.#faces.filter(face => face.family.toLowerCase() === family.toLowerCase()
+      && (point === null || covers(face, point)));
+    return ranked(definitions, weight, style, stretch).map(face => this.#records.get(JSON.stringify(face))?.alias).filter(Boolean);
+  }
+
+  async ready() {
+    while (!this.#closed && this.#pending.size) await Promise.all([...this.#pending]);
+  }
+
+  #ensureProvider() {
+    if (this.#provider) return;
+    const kit = this.#CanvasKit;
+    this.#provider = kit.TypefaceFontProvider.Make();
+    for (const { family, typeface } of this.#builtins) registerTypeface(kit, this.#provider, typeface, family);
+    this.#collection = kit.FontCollection.Make();
+    this.#collection.setDefaultFontManager(this.#provider);
+    this.#collection.enableFontFallback();
+  }
+
+  async #load(record) {
+    let failure;
+    for (const source of record.face.sources) {
+      if (this.#closed) return;
+      try {
+        let typeface;
+        if (source.local) {
+          typeface = this.#builtins.find(entry => entry.family.toLowerCase() === source.local.toLowerCase())?.typeface;
+          if (!typeface) continue;
+        } else {
+          if (!source.url || (source.format && !/^(?:woff2?|truetype|opentype)(?:-variations)?$/i.test(source.format))) continue;
+          let pending = this.#sources.get(source.url);
+          if (!pending) {
+            pending = this.#loadSource(source.url);
+            this.#sources.set(source.url, pending);
+          }
+          typeface = await pending;
+          if (this.#closed) return;
+        }
+        this.#ensureProvider();
+        const alias = `Buninu Web Font ${this.#nextAlias++}`;
+        registerTypeface(this.#CanvasKit, this.#provider, typeface, alias);
+        record.alias = alias;
+        this.#changed();
+        return;
+      } catch (error) { failure = error; }
+    }
+    if (failure) throw failure;
+  }
+
+  async #loadSource(url) {
+    // Fonts use CORS even though images and classic stylesheets normally do
+    // not. This goes through the controller's existing page-fetch policy.
+    const request = this.#fetch({ url, method: "GET", headers: [], body: null,
+      mode: "cors", credentials: "same-origin", redirect: "follow" });
+    this.#requests.add(request);
+    try {
+      const response = await request;
+      if (this.#closed) return null;
+      if (response.status < 200 || response.status >= 300) throw new Error(`Font HTTP ${response.status}`);
+      const bytes = response.body instanceof Uint8Array ? response.body : await Bun.readableStreamToBytes(response.body);
+      if (this.#closed) return null;
+      if (!bytes.length || bytes.length > MAX_FONT_BYTES) throw new Error("Font size exceeds the renderer limit");
+      const typeface = this.#CanvasKit.Typeface.MakeTypefaceFromData(bytes);
+      if (!typeface) throw new Error("Font decoding failed");
+      return typeface;
+    } finally {
+      this.#requests.delete(request);
+    }
+  }
+
+  dispose() {
+    if (this.#closed) return;
+    this.#closed = true;
+    for (const request of this.#requests) request.abort?.();
+    this.#requests.clear();
+    this.#collection?.delete();
+    this.#provider?.delete();
+    this.#collection = this.#provider = null;
+    for (const source of this.#sources.values()) source.then(typeface => typeface?.delete(), () => {});
+    this.#sources.clear();
+    this.#records.clear();
+    this.#faces = [];
+  }
+}

package/lib/renderer/history.js

@@ -0,0 +1,42 @@
+// Methods borrowed from another window's History.prototype must operate on
+// their receiver, not the window in which the function was created.
+const histories = new WeakMap();
+
+export function historyBinding(location, setHref) {
+  const state = { location, setHref, value: null, length: 1 };
+  const receiver = (object) => {
+    const record = histories.get(object);
+    if (!record) throw new TypeError("Illegal invocation");
+    return record;
+  };
+  const change = (object, data, url, push) => {
+    const record = receiver(object);
+    if (url !== undefined && url !== null) {
+      const target = new URL(String(url), record.location.href);
+      if (target.origin !== new URL(record.location.href).origin) {
+        throw new DOMException("History state URL must have the document's origin.", "SecurityError");
+      }
+      record.setHref(target.href);
+    }
+    record.value = data ?? null;
+    if (push) record.length++;
+  };
+  function History() { throw new TypeError("Illegal constructor"); }
+  History.prototype = {
+    constructor: History,
+    get length() { return receiver(this).length; },
+    get state() { return receiver(this).value; },
+    scrollRestoration: "auto",
+    back() {},
+    forward() {},
+    go() {},
+    pushState(data, _title, url = undefined) { change(this, data, url, true); },
+    replaceState(data, _title, url = undefined) { change(this, data, url, false); },
+  };
+  const history = Object.create(History.prototype);
+  histories.set(history, state);
+  return { History, history, pushEntry(replace) {
+    state.value = null;
+    if (!replace) state.length++;
+  } };
+}

package/lib/renderer/host.js

@@ -73,6 +73,7 @@ export class RendererHost {
   #audio = new Map();
   // In-flight page fetches, so AbortController reaches the actual HTTP request.
   #pageFetches = new Map();
+  #resourceFetches = new Map();
   #nextId = 1;
   #queue = Promise.resolve();
   #restarting = false;
@@ -189,6 +190,7 @@ export class RendererHost {
       this.call("applyCompositorScroll", x, y).catch(() => {});
     }
     if ((method === "loadDocument" || method === "showFragment") && params[0]) {
+      if (method === "loadDocument") this.#closeResourceFetches(this.#child);
       this.#documentUrl = String(method === "loadDocument" ? params[0].url : params[0]);
     }
     const run = () => this.#call(method, params);
@@ -489,7 +491,14 @@ 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 });
+      if (this.#child === child) {
+        child.send({ type: "audio-event", id, ...payload });
+        // The compositor's A/V clock must not wait behind page JavaScript.
+        if (payload.event === "timing" && this.#channel && !this.#channel.closed) {
+          this.#channel.writer.write(`${JSON.stringify({ type: "audio-timing", audioId: id, seconds: payload.seconds })}\n`);
+          this.#channel.writer.flush();
+        }
+      }
     };
     const owned = [...this.#audio.values()].filter((entry) => entry.child === child).length;
     if (this.#audio.has(id) || owned >= MAX_AUDIO_STREAMS
@@ -527,6 +536,7 @@ export class RendererHost {
   }
 
   #closePageFetches(child) {
+    this.#closeResourceFetches(child);
     for (const [id, entry] of this.#pageFetches) {
       if (entry.child !== child) continue;
       this.#pageFetches.delete(id);
@@ -534,6 +544,14 @@ export class RendererHost {
     }
   }
 
+  #closeResourceFetches(child) {
+    for (const [id, entry] of this.#resourceFetches) {
+      if (entry.child !== child) continue;
+      this.#resourceFetches.delete(id);
+      entry.controller.abort();
+    }
+  }
+
   #closeSockets(child) {
     for (const [id, entry] of this.#sockets) {
       if (entry.child !== child) continue;
@@ -545,6 +563,16 @@ export class RendererHost {
   }
 
   async #fetchForRenderer(child, { id, url, kind }) {
+    const entry = { child, controller: new AbortController() };
+    this.#resourceFetches.set(id, entry);
+    try {
+      await this.#fetchResource(child, { id, url, kind }, entry.controller.signal);
+    } finally {
+      if (this.#resourceFetches.get(id) === entry) this.#resourceFetches.delete(id);
+    }
+  }
+
+  async #fetchResource(child, { id, url, kind }, signal) {
     const reply = (payload) => {
       if (this.#child === child) child.send({ type: "fetch-result", id, ...payload });
     };
@@ -554,7 +582,10 @@ export class RendererHost {
     } catch {
       return reply({ error: "invalid URL" });
     }
-    if (!ALLOWED_SCHEMES.has(target.protocol) || !RESOURCE_KINDS.has(kind)) {
+    // Local documents may render local resources. Authorize this from the
+    // controller's document URL, never from a renderer-supplied referrer.
+    const localFile = target.protocol === "file:" && new URL(this.#documentUrl).protocol === "file:";
+    if ((!ALLOWED_SCHEMES.has(target.protocol) && !localFile) || !RESOURCE_KINDS.has(kind)) {
       return reply({ error: `blocked ${kind} request for ${target.protocol}` });
     }
     // A renderer only ever holds documents of its own origin (site isolation
@@ -563,7 +594,7 @@ export class RendererHost {
     // being framed.
     const frame = kind === "iframe";
     if (frame && !sameOrigin(target.href, this.#documentUrl)) return reply({ error: "cross-origin frame" });
-    // Video and audio over http(s) stream. data: stays one response: it is
+    // Video and audio over http(s)/file stream. data: stays one response: it is
     // already in hand, and the renderer wraps it in a finished pipe.
     if ((kind === "video" || kind === "audio") && target.protocol !== "data:") {
       const send = (payload) => {
@@ -592,7 +623,7 @@ export class RendererHost {
           } else if (event.type === "error") {
             send({ type: "fetch-error", id, error: String(event.error ?? "media fetch failed") });
           }
-        });
+        }, { signal });
       } catch (error) {
         send({ type: "fetch-error", id, error: String(error?.message ?? error) });
       }
@@ -601,7 +632,7 @@ export class RendererHost {
     try {
       const response = target.protocol === "data:"
         ? await dataResponse(target)
-        : await this.#network.subresource(target.href, this.#documentUrl, kind);
+        : await this.#network.subresource(target.href, this.#documentUrl, kind, { signal });
       if (response.body.byteLength > MAX_RESOURCE_BYTES) return reply({ error: "resource too large" });
       if (frame && !sameOrigin(response.url || target.href, this.#documentUrl)) return reply({ error: "cross-origin frame" });
       if (frame && framingDenied(response.rawHeaders ?? [])) return reply({ error: "framing denied" });

package/lib/renderer/image-loading.js

@@ -0,0 +1,27 @@
+// Image bytes are decoded by our renderer, not Happy DOM's disabled loader.
+// Share their state with HTMLImageElement's page-facing IDL attributes.
+const states = new WeakMap();
+
+export function beginImageLoad(element, src) {
+  states.set(element, { src, complete: false, width: 0, height: 0 });
+}
+
+export function finishImageLoad(element, src, resource, dispatch = () => {}) {
+  if (element.getAttribute('src') !== src) return;
+  states.set(element, { src, complete: true, width: resource?.width ?? 0, height: resource?.height ?? 0 });
+  dispatch(resource ? 'load' : 'error');
+}
+
+export function installImageLoadingAttributes(prototype, nodeOf) {
+  for (const [property, field] of [['naturalWidth', 'width'], ['naturalHeight', 'height'], ['complete', 'complete']]) {
+    Object.defineProperty(prototype, property, {
+      configurable: true, enumerable: true,
+      get() {
+        const node = nodeOf(this), src = node.getAttribute('src');
+        const state = states.get(node);
+        if (state && state.src === src) return state[field];
+        return field === 'complete' ? !src : 0;
+      },
+    });
+  }
+}

package/lib/renderer/image-resources.js

@@ -0,0 +1,65 @@
+/**
+ * Coalesce concurrent requests for the same image within one document. Each
+ * consumer gets its own CanvasKit handle, sharing the underlying pixels, so
+ * removing one element cannot delete another element's image. Completed
+ * requests are dropped; HTTP freshness and persistent caching belong to the
+ * controller's network service.
+ */
+export function imageCrossOrigin(element) {
+  const value = element.getAttribute("crossorigin");
+  return value === null ? null : value.toLowerCase() === "use-credentials" ? "include" : "same-origin";
+}
+
+export function imageRequestKey(src, credentials) {
+  return JSON.stringify([src, credentials]);
+}
+
+export function createImageResourceLoader(CanvasKit, fetchResource, fetchCors) {
+  const documents = new WeakMap();
+  const corsRequests = new WeakMap();
+  const loadImage = function (document, url, credentials = null) {
+    let requests = documents.get(document);
+    if (!requests) documents.set(document, requests = new Map());
+    const key = imageRequestKey(url, credentials);
+    let entry = requests.get(key);
+    if (!entry) {
+      entry = { consumers: 0, ready: (async () => {
+        let response;
+        if (credentials !== null) {
+          const request = fetchCors({ url, method: "GET", headers: [], body: null,
+            mode: "cors", credentials, redirect: "follow" });
+          let pending = corsRequests.get(document);
+          if (!pending) corsRequests.set(document, pending = new Set());
+          pending.add(request);
+          try {
+            const result = await request;
+            const body = result.body instanceof Uint8Array ? result.body : await Bun.readableStreamToBytes(result.body);
+            response = { ...result, body };
+          } finally { pending.delete(request); }
+        } else response = await fetchResource(url, "image");
+        if (!(response.ok ?? (response.status >= 200 && response.status < 300))) throw new Error(`HTTP ${response.status}`);
+        // Keep Bun's header validation/decompression-size guard before Skia
+        // takes ownership of these untrusted encoded bytes.
+        const { width, height } = await new Bun.Image(response.body).metadata();
+        const image = CanvasKit.MakeImageFromEncoded(response.body);
+        if (!image) throw new Error("Image decoding failed");
+        return { width, height, image, url: response.url ?? url, requestedURL: url, crossOrigin: credentials,
+          originClean: credentials !== null ? true : undefined };
+      })() };
+      requests.set(key, entry);
+    }
+    entry.consumers++;
+    return entry.ready.then(resource => Object.freeze({ ...resource, image: resource.image.clone() })).finally(() => {
+      if (--entry.consumers) return;
+      requests.delete(key);
+      // All successful consumers already own their clone. Failures have no
+      // image to release, and must allow a later request to try again.
+      entry.ready.then(resource => resource.image.delete(), () => {});
+    });
+  };
+  loadImage.cancelDocument = (document) => {
+    for (const request of corsRequests.get(document) ?? []) request.abort?.();
+    corsRequests.delete(document);
+  };
+  return loadImage;
+}

package/lib/renderer/interfaces.js

@@ -74,6 +74,34 @@ export function platformObject(name, template, { parent = Object.prototype, base
 
 const accessor = (object, key) => Object.getOwnPropertyDescriptor(object, key);
 
+/** A page-local Error constructor around SES's tamed intrinsic, retaining native error branding. */
+export function errorInterface(BaseError, isError) {
+  const Error = function Error(message, options) {
+    return Reflect.construct(BaseError, arguments, new.target ?? Error);
+  };
+  const prototype = Object.create(BaseError.prototype);
+  for (const key of Reflect.ownKeys(BaseError.prototype)) {
+    if (key === "constructor") continue;
+    const descriptor = Object.getOwnPropertyDescriptor(BaseError.prototype, key);
+    Object.defineProperty(prototype, key, { ...descriptor, configurable: true, ...("value" in descriptor ? { writable: true } : {}) });
+  }
+  Object.defineProperty(prototype, "constructor", { value: Error, writable: true, configurable: true });
+  Error.prototype = prototype;
+  Object.setPrototypeOf(Error, BaseError);
+  for (const key of Reflect.ownKeys(BaseError)) {
+    if (["length", "name", "prototype"].includes(key)) continue;
+    const descriptor = Object.getOwnPropertyDescriptor(BaseError, key);
+    Object.defineProperty(Error, key, { ...descriptor, configurable: true, ...("value" in descriptor ? { writable: true } : {}) });
+  }
+  Object.defineProperty(Error, "length", { value: 1, configurable: true });
+  Object.defineProperty(Error, Symbol.hasInstance, {
+    value(value) { return Function.prototype[Symbol.hasInstance].call(this === Error ? BaseError : this, value); },
+    configurable: true,
+  });
+  if (isError) Object.defineProperty(Error, "isError", { value: isError, writable: true, configurable: true });
+  return Error;
+}
+
 /**
  * window.localStorage and sessionStorage (HTML §12.2.1): the methods on
  * Storage.prototype, and the stored items as each storage's own properties

package/lib/renderer/keyboard-input.js

@@ -0,0 +1,12 @@
+// Preserve CDP's virtual key codes; infer them for the direct press API too.
+const codes = { Backspace:8, Tab:9, Enter:13, Shift:16, Control:17, Alt:18,
+  Escape:27, ' ':32, Space:32, PageUp:33, PageDown:34, End:35, Home:36,
+  ArrowLeft:37, ArrowUp:38, ArrowRight:39, ArrowDown:40, Insert:45, Delete:46 };
+export function keyboardInput(key, options = {}) {
+  key = String(key);
+  const code = String(options.code ?? '');
+  const inferred = codes[key] ?? codes[code]
+    ?? (/^[a-z0-9]$/i.test(key) ? key.toUpperCase().charCodeAt(0) : 0);
+  const keyCode = Number(options.windowsVirtualKeyCode ?? options.keyCode ?? inferred) || 0;
+  return { key, code, keyCode, which:keyCode, charCode:0, composed:true };
+}