buninu-browser 0.2.3 → 0.3.0

package/lib/renderer/compositor.js

@@ -6,8 +6,8 @@
  * screenshots and scrolling on its own channel, so the page stays visible and
  * scrollable while the main thread works.
  *
- * Channel to the controller: fd 3, a socket shared with the controller,
- * newline-delimited JSON (it does not go through the main thread's IPC):
+ * Channel to the controller: authenticated loopback socket, with length-prefixed
+ * JSON and optional binary pixels (does not go through main-thread IPC):
  *   controller -> compositor  { id, method: "screenshot" | "scroll" | "scrollOffset", params }
  *                             (screenshot params: [{ format?: "png" | "jpeg" | "webp", quality? }])
  *   compositor -> controller  { id, result } | { id, error }
@@ -22,36 +22,45 @@
  * a fragment link, a key press or a new document.
  */
 import { ScrollViewport } from "../layout/scroll-viewport.js";
-import { cropViewport, encodeImage } from "../paint/frame.js";
+import { rawFrame, captureViewport, encodeImage, encodeImageBase64 } from "../paint/frame.js";
+import { FrameCaptureCache } from "../paint/frame-cache.js";
+import { FrameLeaseTracker } from "../paint/shared-frame-pool.js";
 import wasmpeg from "../../vendor/wasmpeg/src/js/index.js";
 import { VideoPresentation, compositeVideo } from "./video-presentation.js";
 
-const CHANNEL_FD = 3;
-const MAX_LINE_BYTES = 1024 * 1024;
+import {connectCompositor} from './compositor-channel.js';
 
 const viewport = new ScrollViewport(800, 600);
 let tile = null;
 let scrollEpoch = -1;
 let frameSerial = 0;
-let cached = { key: "", data: "" };
+const captures = new FrameCaptureCache();
+const frameLeases = new FrameLeaseTracker(serial => postMessage({ type: "frame-release", serial }));
 const video = new VideoPresentation(wasmpeg, () => {
   frameSerial++;
   send({ type: "frame" });
 }, report => postMessage({ type: "video-report", ...report }));
 
-const channel = Bun.file(CHANNEL_FD).writer();
-
+let channel;
 function send(message) {
-  channel.write(`${JSON.stringify(message)}\n`);
-  channel.flush();
+  const result = message.result;
+  if (result?.pixels instanceof Uint8Array) {
+    const {pixels,...metadata} = result;
+    channel.send({...message,result:metadata},pixels);
+  } else channel.send(message);
 }
+const endpoint = await new Promise(resolve => {
+  self.onmessage = ({data}) => { if (data?.type === 'connect') resolve(data.endpoint); };
+});
+channel = await connectCompositor(endpoint, request => { void handleRequest(request); }, () => process.exit(1));
 
 self.onmessage = ({ data }) => {
   if (data?.type === "video-open") { void video.open(data); return; }
   if (data?.type === "video-stop") { video.stop(data.id); frameSerial++; return; }
-  if (data?.type === "video-bind") { video.bind(data.id, data.audioId, data.audioStart, data.time); return; }
+  if (data?.type === "video-bind") { video.bind(data.id, data.audioId, data.audioStart, data.time, data.endTime); return; }
   if (data?.type !== "frame") return;
   tile = data.tile;
+  frameLeases.replace(data.serial, tile);
   frameSerial++;
   viewport.resize(data.viewport.width, data.viewport.height);
   viewport.setContentSize(data.content.width, data.content.height);
@@ -73,16 +82,21 @@ self.onmessage = ({ data }) => {
 };
 
 const methods = {
-  async screenshot({ format = "png", quality = 80 } = {}) {
+  async screenshot({ format = "png", quality = 80, optimizeForSpeed = false, clip } = {}) {
     if (!tile) return "";
-    const key = `${frameSerial}:${viewport.x}:${viewport.y}:${format}:${quality}`;
-    if (cached.key !== key) {
-      const composited = tile.videoLayer?.id === video.config?.id ? compositeVideo(tile, video.frame) : tile;
-      const { pixels, width, height } = cropViewport(composited, viewport.x, viewport.y, viewport.width, viewport.height);
-      const bytes = await encodeImage(pixels, width, height, { format, quality });
-      cached = { key, data: Buffer.from(bytes).toString("base64") };
+    if (format === 'rgba' || format === 'bgra') {
+      return frameLeases.capture(frame => {
+        const composited = frame.videoLayer?.id === video.config?.id ? compositeVideo(frame, video.frame) : frame;
+        const {pixels,width,height} = captureViewport(composited,viewport.x,viewport.y,viewport.width,viewport.height,clip);
+        return rawFrame(pixels,width,height,format);
+      });
     }
-    return cached.data;
+    const key = `${frameSerial}:${viewport.x}:${viewport.y}:${format}:${quality}:${optimizeForSpeed}:${JSON.stringify(clip)}`;
+    return captures.get(key, () => frameLeases.capture(frame => {
+      const composited = frame.videoLayer?.id === video.config?.id ? compositeVideo(frame, video.frame) : frame;
+      const { pixels, width, height } = captureViewport(composited, viewport.x, viewport.y, viewport.width, viewport.height,clip);
+      return encodeImageBase64(pixels, width, height, { format, quality, optimizeForSpeed });
+    }));
   },
   scroll(deltaX, deltaY) {
     if (viewport.scrollBy(deltaX, deltaY)) {
@@ -96,13 +110,7 @@ const methods = {
   },
 };
 
-async function handleLine(line) {
-  let request;
-  try {
-    request = JSON.parse(line);
-  } catch {
-    return;
-  }
+async function handleRequest(request) {
   if (request?.type === "audio-timing" && Number.isInteger(request.audioId)) {
     video.timing(request.audioId, request.seconds);
     return;
@@ -116,20 +124,6 @@ async function handleLine(line) {
   }
 }
 
-(async () => {
-  const decoder = new TextDecoder();
-  let pending = "";
-  for await (const chunk of Bun.file(CHANNEL_FD).stream()) {
-    pending += decoder.decode(chunk, { stream: true });
-    let newline;
-    while ((newline = pending.indexOf("\n")) >= 0) {
-      handleLine(pending.slice(0, newline));
-      pending = pending.slice(newline + 1);
-    }
-    if (pending.length > MAX_LINE_BYTES) pending = "";
-  }
-})();
-
 // Bun.Image initialises its codecs on first use; do that before the
 // renderer installs seccomp, which forbids opening files.
 await encodeImage(new Uint8Array(4), 1, 1);

package/lib/renderer/custom-element-reactions.js

@@ -5,14 +5,38 @@ export function installAttributeReactions(Adapter, constructor, realm, callPage)
   const callback = constructor.prototype.attributeChangedCallback;
   if (typeof callback !== "function") return;
   const observed = constructor.observedAttributes;
+  const pending = new WeakMap();
   Object.defineProperty(Adapter, "observedAttributes", {
     value: observed === undefined ? [] : Array.from(observed, String),
   });
   Object.defineProperty(Adapter.prototype, "attributeChangedCallback", {
     value(name, oldValue, newValue, namespace = null) {
-      callPage(callback, realm.wrap(this), [name, oldValue, newValue, namespace]);
+      const args = [name, oldValue, newValue, namespace];
+      const reactions = pending.get(this);
+      if (reactions) reactions.push(args);
+      else callPage(callback, realm.wrap(this), args);
     },
     configurable: true,
     writable: true,
   });
+  const observedNames = new Set(Adapter.observedAttributes);
+  // The host DOM upgrades existing elements in place, but does not enqueue
+  // their initial attribute callbacks. Capture values before construction:
+  // those reactions run after the constructor and before connectedCallback.
+  return (element) => {
+    const reactions = Array.from(element.attributes)
+      .filter(attribute => observedNames.has(attribute.localName))
+      .map(attribute => [attribute.localName, null, attribute.value, attribute.namespaceURI]);
+    pending.set(element, reactions);
+    return {
+      finish() {
+        try {
+          // Attribute writes by the constructor or earlier callbacks append
+          // to this element's queue, after the captured initial reactions.
+          for (let index = 0; index < reactions.length; index++) callPage(callback, realm.wrap(element), reactions[index]);
+        } finally { pending.delete(element); }
+      },
+      cancel() { pending.delete(element); },
+    };
+  };
 }

package/lib/renderer/flags.js

@@ -1,7 +1,7 @@
 /** 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. */
+/** Start the compositor Worker with its pre-sandbox loopback channel. */
 export const COMPOSITOR_FLAG = "--compositor";
 
 /** BUNINU_VERIFY_STYLE: check every incremental restyle against a full one (development). */

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 = [];
+  }
+}