buninu-browser 0.5.1 → 0.6.0

package/lib/renderer/idle-callbacks.js

@@ -0,0 +1,109 @@
+/**
+ * Cooperative idle work shares a short period, rather than granting every
+ * queued callback a fresh budget. Dispatch one callback per host task so
+ * ordinary timers and input can run between callbacks. A callback registered
+ * during a period joins the next one; positive timeouts have their own task.
+ * Clock/timer injection keeps the fairness and lifetime tests deterministic.
+ */
+export function createIdleCallbacks({ now, setTimer, clearTimer, invoke }) {
+  const callbacks = new Map();
+  let runnable = [], next = 0, deadline = 0, timer = null;
+  let running = false, disposed = false;
+
+  function queue() {
+    if (disposed) return;
+    if (!callbacks.size) {
+      if (timer !== null) clearTimer(timer);
+      timer = null;
+      runnable = []; next = 0;
+      return;
+    }
+    if (running || timer !== null) return;
+    // A nested request must not start a new period before this one ends.
+    const delay = next >= runnable.length ? Math.max(1, deadline - now()) : 1;
+    timer = setTimer(dispatch, delay);
+  }
+
+  function remove(record) {
+    if (callbacks.get(record.id) !== record) return false;
+    callbacks.delete(record.id);
+    if (record.timer !== null) clearTimer(record.timer);
+    record.timer = null;
+    return true;
+  }
+
+  function deliver(record, didTimeout, until) {
+    if (!remove(record)) return;
+    invoke(record.callback, {
+      get didTimeout() { return didTimeout; },
+      timeRemaining: () => Math.max(0, until - now()),
+    });
+  }
+
+  function queueTimeout(record) {
+    // Web IDL permits unsigned-long timeouts, while host timers only accept a
+    // signed 32-bit delay. Chunk longer waits instead of overflowing to 1ms.
+    record.timer = setTimer(() => {
+      record.timer = null;
+      if (disposed || callbacks.get(record.id) !== record) return;
+      if (now() < record.expires) { queueTimeout(record); return; }
+      running = true;
+      try { deliver(record, true, now()); }
+      finally {
+        running = false;
+        queue();
+      }
+    }, Math.min(2147483647, Math.max(1, record.expires - now())));
+  }
+
+  function dispatch() {
+    timer = null;
+    if (disposed || !callbacks.size) return;
+    running = true;
+    try {
+      const at = now();
+      if (at >= deadline) {
+        runnable = [...callbacks.values()];
+        next = 0;
+        deadline = at + 10;
+      }
+      while (next < runnable.length && callbacks.get(runnable[next].id) !== runnable[next]) next++;
+      if (next < runnable.length) {
+        const record = runnable[next++], at = now();
+        const didTimeout = at >= record.expires;
+        deliver(record, didTimeout, didTimeout ? at : deadline);
+      }
+    } finally {
+      running = false;
+      queue();
+    }
+  }
+
+  return {
+    request(id, callback, timeout) {
+      if (disposed) return id;
+      const record = { id, callback, expires: timeout > 0 ? now() + timeout : Infinity, timer: null };
+      callbacks.set(id, record);
+      if (timeout > 0) queueTimeout(record);
+      queue();
+      return id;
+    },
+    cancel(id) {
+      const record = callbacks.get(id);
+      if (record) remove(record);
+      if (!callbacks.size) {
+        if (timer !== null) clearTimer(timer);
+        timer = null;
+        runnable = []; next = 0;
+      }
+    },
+    dispose() {
+      disposed = true;
+      if (timer !== null) clearTimer(timer);
+      timer = null;
+      for (const record of callbacks.values()) if (record.timer !== null) clearTimer(record.timer);
+      callbacks.clear();
+      runnable = []; next = 0;
+    },
+  };
+}

package/lib/renderer/main.js

@@ -265,7 +265,7 @@ const renderer = await createPageRenderer({
   clipboardWriteInput:text=>clipboardWrite(text,'clipboard-write-input'),
   webSockets,
   audio,
-  setCookie: (value) => process.send({ type: "cookie", value }),
+  setCookie: (value, url, sequence) => process.send({ type: "cookie", value, url, sequence }),
   reportError: (message) => report(`buninu-browser: page error: ${logging ? message : String(message).split("\n")[0]}`),
   consoleMessage: logging ? (level, text) => report(`page console.${level}: ${text}`) : null,
   trace: logging ? (text) => report(`timing: ${text}`) : null,
@@ -352,6 +352,10 @@ async function warmUp() {
 }
 
 process.on("message", async (message) => {
+  if (message?.type === "cookie-state") {
+    renderer.updateCookies(message.state);
+    return;
+  }
   if(message?.type==='clipboard-result') {
     const pending=clipboardWrites.get(message.id);if(!pending)return;
     clipboardWrites.delete(message.id);clearTimeout(pending.timer);

package/lib/renderer/media-source.js

@@ -14,6 +14,7 @@
  */
 import { createBytePipe } from "../media/byte-pipe.js";
 import { createSourceSnapshots } from "../media/source-snapshots.js";
+import { createWebMAudioSnapshots } from "../media/webm-snapshots.js";
 import { createWebMStream, ebmlHeader } from "../media/webm-stream.js";
 
 const BRAND = Symbol("MediaSource");
@@ -444,6 +445,8 @@ export function createMediaSourceScope({ origin, schedule, DOMException, onAppen
       this._webm = {};
       this._webmCovered = new Map();
       this._webmStream = /^(video|audio)\/webm\b/i.test(this._mime) ? createWebMStream() : null;
+      this._webmSnapshots = /^audio\/webm\b/i.test(this._mime) ? createWebMAudioSnapshots() : null;
+      if (this._webmSnapshots) this._pipe.snapshotAt = time => this._webmSnapshots.at(time, () => this._pipe.bytes());
       this._hasSegmentTimeline = false;
       this._hasMediaSegment = false;
       this._appendWindowStart = 0;
@@ -589,6 +592,7 @@ export function createMediaSourceScope({ origin, schedule, DOMException, onAppen
             addCovered(this._covered, start, end);
           }
         }
+        this._webmSnapshots?.append({ id, bytes, cluster });
         if (cluster && this._webmCluster !== cluster.token) {
           for (const prefix of cluster.prefix) this._pipe.append(prefix);
           this._webmCluster = cluster.token;

package/lib/renderer/page-realm.js

@@ -22,10 +22,12 @@ import {
   rewriteClassicScriptSource, rewriteConstructorReads, rewriteModuleSource,
 } from "./script-rewrite.js";
 import { prepareClassicScript } from "./prepared-script-cache.js";
-import { mediaQueryMatches, resolveVariables } from "../style/computed-style.js";
+import { computeElementStyle, mediaQueryMatches, resolveVariables } from "../style/computed-style.js";
 import { asIncumbent, createMessaging } from "./messaging.js";
 import { canvasContext, resetCanvas, disposeDocumentCanvases, encodeCanvas } from "./canvas-2d.js";
 import { createWorkers } from "./workers.js";
+import { createTimers } from "./timers.js";
+import { createAnimationFrames, supportsFrameCheckpoint } from "./animation-frames.js";
 import { createMediaSourceScope } from "./media-source.js";
 import { markNative, markNativeApi, setFunctionSourceTextTransform } from "./native-functions.js";
 import { applyGlobalShape, errorInterface, platformObject, storageInterface } from "./interfaces.js";
@@ -33,6 +35,7 @@ import { trustedTypesApi } from "./trusted-types.js";
 import { onPromiseRejection } from "./rejections.js";
 import { installAttributeReactions } from "./custom-element-reactions.js";
 import { createLayoutObservers } from "./layout-observers.js";
+import { createIdleCallbacks } from "./idle-callbacks.js";
 import { createBroadcastChannels } from "./broadcast-channel.js";
 import { createInertWindow } from "../happy-dom/parser.js";
 import { historyBinding } from "./history.js";
@@ -257,8 +260,8 @@ function cssEscape(value) {
  *     boundsOf(element: object): { left: number, top: number, width: number, height: number } | null,
  *     viewport(): { width: number, height: number, scrollX: number, scrollY: number, devicePixelRatio: number },
  *     scrollTo(x: number, y: number): void,
- *     computedStyle(element: object): object | null,
- *     customProperties?(element: object): Map<string, string> | null,
+ *     computedStyle(element: object, needsLayout?: boolean): object | null,
+ *     customProperties?(element: object, updateStyle?: boolean): Map<string, string> | null,
  *     navigate(url: string): void,
  *     activateLink?(anchor: object): void,
  *     fetchScript(url: string): Promise<string>,
@@ -271,7 +274,6 @@ function cssEscape(value) {
  * }} options
  */
 export function createPageRealm({ window, document, mode, hooks }) {
-  const timers = new Map();
   // Close functions of this document's open WebSockets (see networkApi)
   const openSockets = new Set();
   // Happy DOM runs its own document lifecycle and fires load/DOMContentLoaded
@@ -372,6 +374,7 @@ export function createPageRealm({ window, document, mode, hooks }) {
     playMedia: hooks.playMedia,
     pauseMedia: hooks.pauseMedia,
     seekMedia: hooks.seekMedia,
+    reselectMedia: hooks.reselectMedia,
     attachMediaSrc: (element, value) => hooks.attachMediaSrc?.(element, value),
     mediaReadyState: (element) => hooks.mediaReadyState?.(element) ?? 0,
     mediaNetworkState: (element) => hooks.mediaNetworkState?.(element) ?? 0,
@@ -742,25 +745,23 @@ export function createPageRealm({ window, document, mode, hooks }) {
     target.dispatchEvent(event);
   };
 
-  const schedule = (handler, delay, args, repeat) => {
-    const id = nextTimerId++;
+  const timers = createTimers({ invoke: callback => runTask(callback), nextId: () => nextTimerId++ });
+  const schedule = (handler, delay, args, repeat, timerTask = true) => {
+    const code = typeof handler === "function" ? null : String(handler);
     const callback = typeof handler === "function"
       ? () => callPage(handler, pageGlobal, args)
-      : () => evaluate(String(handler), "timer");
-    const fire = () => {
-      if (!timers.has(id)) return;
-      if (repeat) timers.set(id, hostSetTimeout(fire, Math.max(4, delay)));
-      else timers.delete(id);
-      runTask(callback);
-    };
-    timers.set(id, hostSetTimeout(fire, Math.max(0, Number(delay) || 0)));
-    return id;
-  };
-  const cancel = (id) => {
-    const handle = timers.get(Number(id));
-    if (handle) hostClearTimeout(handle);
-    timers.delete(Number(id));
+      : () => evaluate(code, "timer");
+    return timers.schedule(callback, delay, repeat, timerTask);
   };
+  const cancel = id => timers.cancel(id);
+  const animationFrames = supportsFrameCheckpoint() ? createAnimationFrames({
+    invoke: (callback, timestamp) => runTask(() => callPage(callback, pageGlobal, [timestamp])),
+    now: pageNow,
+  }) : null;
+  const idleCallbacks = createIdleCallbacks({
+    now: () => hostPerformance.now(), setTimer: hostSetTimeout, clearTimer: hostClearTimeout,
+    invoke: (callback, deadline) => runTask(() => callPage(callback, pageGlobal, [deadline])),
+  });
 
   const pageConsole = Object.fromEntries(["log", "info", "warn", "error", "debug", "trace"].map((level) => [
     level,
@@ -801,13 +802,14 @@ export function createPageRealm({ window, document, mode, hooks }) {
 
   const layoutObservers = createLayoutObservers({
     nodeOf, boundsOf: hooks.boundsOf, computedStyle: hooks.computedStyle, viewport: hooks.viewport,
-    schedule: (callback) => schedule(callback, 0, [], false), cancel, call: callPage, now: pageNow,
+    schedule: (callback) => schedule(callback, 0, [], false, false), cancel, call: callPage, now: pageNow,
   });
 
   /** MutationObserver wraps Happy DOM records; layout observers use renderer geometry. */
   function observerConstructors() {
     function MutationObserver(callback) {
       if (!new.target) throw new TypeError("Constructor MutationObserver requires 'new'");
+      if (typeof callback !== "function") throw new TypeError("MutationObserver callback must be a function");
       const self = {};
       const wrapRecord = (record) => ({
         type: record.type,
@@ -825,15 +827,22 @@ export function createPageRealm({ window, document, mode, hooks }) {
       self.observe = (target, options = {}) => {
         const node = nodeOf(target);
         if (!node) throw new TypeError("MutationObserver.observe requires a Node");
-        real.observe(node, {
-          childList: Boolean(options.childList),
-          attributes: Boolean(options.attributes ?? options.attributeFilter ?? options.attributeOldValue),
-          characterData: Boolean(options.characterData ?? options.characterDataOldValue),
-          subtree: Boolean(options.subtree),
-          attributeOldValue: Boolean(options.attributeOldValue),
-          characterDataOldValue: Boolean(options.characterDataOldValue),
-          ...(Array.isArray(options.attributeFilter) ? { attributeFilter: options.attributeFilter.map(String) } : {}),
-        });
+        const normalized = {};
+        const filter = options?.attributeFilter;
+        if (filter !== undefined) {
+          if (filter === null || (typeof filter !== "object" && typeof filter !== "function")) {
+            throw new TypeError("MutationObserver attributeFilter must be iterable");
+          }
+          normalized.attributeFilter = [];
+          for (const name of filter) normalized.attributeFilter.push(`${name}`);
+        }
+        // Omitted boolean members carry different semantics from false: e.g.
+        // attributeOldValue:false with no attributes member enables attributes.
+        for (const name of ["attributeOldValue", "attributes", "characterData", "characterDataOldValue", "childList", "subtree"]) {
+          const value = options?.[name];
+          if (value !== undefined) normalized[name] = Boolean(value);
+        }
+        real.observe(node, normalized);
       };
       self.disconnect = () => real.disconnect();
       self.takeRecords = () => real.takeRecords().map(wrapRecord);
@@ -1642,11 +1651,21 @@ export function createPageRealm({ window, document, mode, hooks }) {
     // Each is its own function with its Web IDL length (handles are optional for the clears).
     clearTimeout: (id = undefined) => cancel(id),
     clearInterval: (id = undefined) => cancel(id),
-    requestAnimationFrame: (callback) => schedule(() => callPage(callback, pageGlobal, [pageNow()]), 16, [], false),
-    cancelAnimationFrame: (handle) => cancel(handle),
-    requestIdleCallback: (callback) => schedule(
-      () => callPage(callback, pageGlobal, [{ didTimeout: false, timeRemaining: () => 10 }]), 1, [], false),
-    cancelIdleCallback: (handle) => cancel(handle),
+    requestAnimationFrame: (callback) => animationFrames
+      ? animationFrames.request(callback)
+      : schedule(() => callPage(callback, pageGlobal, [pageNow()]), 16, [], false, false),
+    cancelAnimationFrame: (handle) => animationFrames ? animationFrames.cancel(handle) : cancel(handle),
+    requestIdleCallback: (callback, options = undefined) => {
+      if (typeof callback !== "function") throw new TypeError("requestIdleCallback: callback is not a function");
+      if (options != null && typeof options !== "object" && typeof options !== "function") {
+        throw new TypeError("requestIdleCallback: options must be a dictionary");
+      }
+      // IdleRequestOptions.timeout is an unsigned long; zero does not start
+      // a timeout. Idle callbacks share short periods and yield between tasks.
+      const timeout = options?.timeout >>> 0;
+      return idleCallbacks.request(nextTimerId++, callback, timeout);
+    },
+    cancelIdleCallback: (handle) => idleCallbacks.cancel(Number(handle)),
     queueMicrotask: (callback) => hostQueueMicrotask(() => runTask(() => callPage(callback, pageGlobal, []))),
     structuredClone: (value) => hostStructuredClone(value),
     atob: (value) => hostAtob(String(value)),
@@ -1781,11 +1800,17 @@ export function createPageRealm({ window, document, mode, hooks }) {
     dispatchEvent: windowEvents.dispatchEvent,
     getComputedStyle: (element) => {
       const node = nodeOf(element);
-      const style = hooks.computedStyle(node);
-      return computedStyleBinding(style, {
-        custom: hooks.customProperties?.(node) ?? null,
-        bounds: style && style.display !== "none" && node?.isConnected ? hooks.boundsOf(node) : null,
-        element: node,
+      return computedStyleBinding((needsLayout) => {
+        // Detached elements have no resolved values, even if the style engine
+        // still retains their last connected style. Check every live read so
+        // an existing declaration also empties on removal and revives on attach.
+        if (!node?.isConnected) return { style: null, custom: null, bounds: null, element: node };
+        const style = hooks.computedStyle(node, needsLayout);
+        return {
+          style, custom: hooks.customProperties?.(node, false) ?? null,
+          bounds: needsLayout && style && style.display !== "none" && node?.isConnected ? hooks.boundsOf(node) : null,
+          element: node,
+        };
       });
     },
     getSelection: () => realm.selection(),
@@ -2454,8 +2479,9 @@ export function createPageRealm({ window, document, mode, hooks }) {
       // Leaving the document closes its WebSockets (1001 "going away").
       for (const close of openSockets) close();
       openSockets.clear();
-      for (const handle of timers.values()) hostClearTimeout(handle);
-      timers.clear();
+      timers.dispose();
+      animationFrames?.dispose();
+      idleCallbacks.dispose();
     },
   };
 }
@@ -2856,7 +2882,78 @@ function platformObjects({ eventTargets, userAgent, userAgentDataMembers, mobile
   };
 }
 
-/** A read-only snapshot of the few computed values the engine models. */
+// CSSOM returns a live declaration. Like Blink's CSSComputedStyleDeclaration,
+// resolve style first and update layout only for layout-dependent properties.
+const COMPUTED_LAYOUT_PROPERTIES = new Set([
+  "width", "height", "top", "right", "bottom", "left", "transform",
+  "margin", "marginTop", "marginRight", "marginBottom", "marginLeft",
+  "padding", "paddingTop", "paddingRight", "paddingBottom", "paddingLeft",
+]);
+const COMPUTED_PADDING_PROPERTIES = new Map([
+  ["padding", -1], ["paddingTop", 0], ["paddingRight", 1], ["paddingBottom", 2], ["paddingLeft", 3],
+]);
+// Populated once from the snapshot's fixed internal fields, never from page
+// input. Reuse the CSS/JS spelling table across elements and live snapshots.
+const COMPUTED_CSS_PROPERTIES = new Map();
+let computedStylePropertyNames = null;
+let computedStyleAccessorNames = null;
+const COMPUTED_STYLE_SCHEMA_ELEMENT = Object.freeze({
+  tagName: "DIV", getAttribute: () => null, hasAttribute: () => false,
+});
+// Computed styles and custom-property maps retain their identities until
+// restyle changes them. Share serialization across repeated declarations;
+// used geometry remains local to each live declaration and its bounds.
+const computedStyleSnapshots = new WeakMap();
+
+function computedStyleBinding(read) {
+  const initial = read(false);
+  const shape = computedStyleSnapshot(initial.style, initial);
+  // A declaration first obtained while detached still exposes the ordinary
+  // named accessors. Derive their schema once from the same serializer, without
+  // resolving the detached node or duplicating its supported-property list.
+  if (computedStyleAccessorNames === null) {
+    computedStyleSnapshot(computeElementStyle(COMPUTED_STYLE_SCHEMA_ELEMENT));
+  }
+  const snapshots = [{ ...initial, value: shape }, null];
+  const snapshot = name => {
+    const property = name.startsWith("--") ? null : COMPUTED_CSS_PROPERTIES.get(name) ?? name;
+    let layout = COMPUTED_LAYOUT_PROPERTIES.has(property);
+    let state;
+    const side = COMPUTED_PADDING_PROPERTIES.get(property);
+    if (side !== undefined) {
+      state = read(false);
+      const padding = state.style?.padding;
+      // CSSOM resolves fixed padding directly from computed style. Percentages
+      // and unresolved math still need the containing block's used geometry.
+      if (padding && (side < 0 ? padding.every(value => typeof value === "number")
+        : typeof padding[side] === "number")) layout = false;
+    }
+    if (!state || layout) state = read(layout);
+    const prior = snapshots[Number(layout)];
+    const bounds = state.bounds;
+    if (prior && prior.style === state.style && prior.custom === state.custom
+      && (prior.bounds === bounds || (prior.bounds && bounds
+        && prior.bounds.width === bounds.width && prior.bounds.height === bounds.height))) return prior.value;
+    const value = computedStyleSnapshot(state.style, state);
+    snapshots[Number(layout)] = { ...state, value };
+    return value;
+  };
+  const declaration = {
+    get length() { return snapshot("").length; },
+    item(index) { return snapshot("").item(index); },
+    getPropertyValue(name) {
+      const key = String(name);
+      return snapshot(key.startsWith("--") ? key : key.toLowerCase()).getPropertyValue(key);
+    },
+    getPropertyPriority() { return ""; },
+    get cssText() { return ""; },
+  };
+  for (const name of computedStyleAccessorNames) Object.defineProperty(declaration, name, {
+    enumerable: true, configurable: true, get: () => snapshot(name)[name] ?? "",
+  });
+  return declaration;
+}
+
 /**
  * The page's CSSStyleDeclaration for getComputedStyle (CSSOM §9): resolved
  * values for the longhands the engine computes, by camelCase name and by
@@ -2864,7 +2961,10 @@ function platformObjects({ eventTargets, userAgent, userAgentDataMembers, mobile
  * are used values (layout's box) when the element is rendered; percentages
  * that depend on layout read as specified otherwise.
  */
-function computedStyleBinding(style, { custom = null, bounds = null, element = null } = {}) {
+function computedStyleSnapshot(style, { custom = null, bounds = null, element = null } = {}) {
+  const reusable = !bounds && style && Object.isFrozen(style);
+  const cached = reusable && computedStyleSnapshots.get(style);
+  if (cached && cached.custom === custom) return cached.value;
   const px = (value) => `${Math.round(value * 1000) / 1000}px`;
   const length = (value) => typeof value === "number" ? px(value)
     : value?.unit === "%" ? `${value.value}%`
@@ -2975,14 +3075,20 @@ function computedStyleBinding(style, { custom = null, bounds = null, element = n
     values.margin = sides.map((side) => values[`margin${side}`]).join(" ");
     values.padding = sides.map((side) => values[`padding${side}`]).join(" ");
   }
-  const kebab = (name) => name.replace(/[A-Z]/g, (letter) => `-${letter.toLowerCase()}`);
-  const byKebab = Object.fromEntries(Object.entries(values).map(([name, value]) => [kebab(name), value]));
-  const names = Object.keys(byKebab);
+  if (style && computedStylePropertyNames === null) {
+    computedStyleAccessorNames = [...Object.keys(values), "webkitLineClamp", "webkitBoxOrient"];
+    computedStylePropertyNames = Object.keys(values).map(name => {
+      const cssName = name.replace(/[A-Z]/g, letter => `-${letter.toLowerCase()}`);
+      COMPUTED_CSS_PROPERTIES.set(cssName, name);
+      return cssName;
+    });
+  }
+  const names = style ? computedStylePropertyNames : [];
   const customValue = (name) => {
     const value = custom?.get(name);
     return value == null ? "" : resolveVariables(value, custom);
   };
-  return {
+  const result = {
     ...values,
     webkitLineClamp: values.WebkitLineClamp,
     webkitBoxOrient: values.WebkitBoxOrient,
@@ -2990,13 +3096,17 @@ function computedStyleBinding(style, { custom = null, bounds = null, element = n
     item: (index) => names[Number(index)] ?? "",
     getPropertyValue: (name) => {
       const key = String(name);
-      return key.startsWith("--") ? customValue(key) : byKebab[key.toLowerCase()] ?? "";
+      if (key.startsWith("--")) return customValue(key);
+      const property = COMPUTED_CSS_PROPERTIES.get(key.toLowerCase());
+      return property === undefined ? "" : values[property] ?? "";
     },
     getPropertyPriority: () => "",
     get cssText() {
       return "";
     },
   };
+  if (reusable) computedStyleSnapshots.set(style, { custom, value: result });
+  return result;
 }
 
 function formatConsoleValue(value) {