buninu-browser 0.2.0 → 0.2.2

package/lib/headless-shell.js

@@ -17,7 +17,7 @@ import { installLog, logFileFromEnv, writeLog } from "./log.js";
 import { NetworkService } from "./network/network-service.js";
 import { RendererHost } from "./renderer/host.js";
 import { MOBILE_FLAG, MOBILE_LAYOUT_WIDTH, MOBILE_USER_AGENT } from "./renderer/flags.js";
-import { DESKTOP_USER_AGENT } from "./user-agent.js";
+import { DESKTOP_USER_AGENT, WEBKIT_USER_AGENT, webkitFromArgs } from "./user-agent.js";
 
 /** Opt-in phone presentation: mobile user agent and touch media features. */
 export const MOBILE = "--mobile";
@@ -37,15 +37,23 @@ export async function runHeadlessShell(args = Bun.argv.slice(2)) {
   const mobile = args.includes(MOBILE);
   if (mobile) console.error(`buninu-browser: ${MOBILE}: mobile user agent and touch media features; user agent overrides are ignored`);
 
-  const browser = await createBrowser({ allowHostJs, mobile });
-  const layerStatus = (layer) => layer?.installed ? "on" : `off (${layer?.reason})`;
-  console.error(`buninu-browser: renderer sandbox: seccomp ${layerStatus(browser.sandbox?.seccomp)}, `
-    + `ses ${layerStatus(browser.sandbox?.ses)}`);
-
+  // The endpoint opens while the first renderer starts: a client's first
+  // navigation fetches its document meanwhile.
+  const browser = await createBrowser({ allowHostJs, mobile, webkit: webkitFromArgs(args), waitForRenderer: false });
   const portArgument = args.find((argument) => argument.startsWith("--remote-debugging-port="));
   const requestedPort = Number(portArgument?.slice("--remote-debugging-port=".length) ?? 9222);
   const server = CdpServer.create(browser.context).listen(requestedPort, "127.0.0.1");
   console.error(`DevTools listening on ws://127.0.0.1:${server.port}/devtools/browser/cdp-server`);
+  try {
+    await browser.ready;
+  } catch (error) {
+    server.stop(true);
+    browser.close();
+    throw error;
+  }
+  const layerStatus = (layer) => layer?.installed ? "on" : `off (${layer?.reason})`;
+  console.error(`buninu-browser: renderer sandbox: seccomp ${layerStatus(browser.sandbox?.seccomp)}, `
+    + `ses ${layerStatus(browser.sandbox?.ses)}`);
 
   const shutdown = () => {
     server.stop(true);
@@ -67,13 +75,21 @@ export async function runHeadlessShell(args = Bun.argv.slice(2)) {
  * not wait for CanvasKit and fonts to load. Site isolation is by origin
  * because no Public Suffix List is bundled to compute sites.
  *
- * @param {{ allowHostJs?: boolean, spareRenderer?: boolean, network?: NetworkService, rendererTimeout?: number }} options
+ * With `waitForRenderer: false` it returns before the first renderer is up
+ * (`ready` settles then): navigations fetch their documents meanwhile, and
+ * anything that needs a renderer waits for it.
+ *
+ * @param {{ allowHostJs?: boolean, spareRenderer?: boolean, network?: NetworkService, rendererTimeout?: number,
+ *   waitForRenderer?: boolean, mobile?: boolean, webkit?: boolean }} options
+ * WebKit identity defaults on; webkit: false selects Chromium. Mobile takes priority.
  */
 export async function createBrowser({
   allowHostJs = false, spareRenderer = true, network = new NetworkService(), rendererTimeout = 30_000, mobile = false,
+  waitForRenderer = true, webkit = true,
 } = {}) {
-  // --mobile fixes the user agent for page requests and navigator.userAgent.
-  network.userAgent = mobile ? MOBILE_USER_AGENT : DESKTOP_USER_AGENT;
+  // Explicit presentation profiles fix the identity for requests and scripts.
+  const initialUserAgent = mobile ? MOBILE_USER_AGENT : webkit ? WEBKIT_USER_AGENT : DESKTOP_USER_AGENT;
+  network.userAgent = initialUserAgent;
   const history = [{ url: "about:blank", x: 0, y: 0 }];
   let historyIndex = 0;
   let currentUrl = "about:blank";
@@ -83,9 +99,14 @@ export async function createBrowser({
   let currentKey = null;
   let spare = null;
   let closed = false;
+  // Settles when the first renderer shows about:blank (assigned below).
+  let rendererReady = null;
   // Renderer-independent state replayed into every new renderer.
   const viewport = { width: 800, height: 600, deviceScaleFactor: 1 };
-  let userAgent = null;
+  let userAgent = webkit ? initialUserAgent : null;
+  // Page.addScriptToEvaluateOnNewDocument: source by identifier, run in every new document before its scripts.
+  const initScripts = new Map();
+  let nextInitScript = 1;
   // Listeners for frame and lifecycle notifications (the CDP server).
   const frameListeners = new Set();
   const lifecycleListeners = new Set();
@@ -146,13 +167,13 @@ export async function createBrowser({
         await load(currentUrl, invoke);
       },
       // Only the renderer showing the current page may navigate it.
-      onNavigate: (url, downloadName, fragmentFrom) => {
+      onNavigate: (url, downloadName, fragmentFrom, post = null) => {
         if (host !== current) return;
         if (fragmentFrom) {
           recordFragment(url, fragmentFrom);
           return;
         }
-        navigate(url, { downloadName }).catch((error) => console.error(`buninu-browser: navigation failed: ${error.message}`));
+        navigate(url, { downloadName, post }).catch((error) => console.error(`buninu-browser: navigation failed: ${error.message}`));
       },
       onDownload: ({ url, name, data }) => {
         if (host !== current) return;
@@ -190,6 +211,7 @@ export async function createBrowser({
   async function replayState(invoke) {
     await invoke("resize", ...resizeArguments());
     if (userAgent) await invoke("setUserAgent", userAgent);
+    if (initScripts.size) await invoke("setInitScripts", [...initScripts.values()]);
   }
 
   function prepareSpare() {
@@ -216,14 +238,28 @@ export async function createBrowser({
     return current;
   }
 
-  const call = (method, ...params) => current.call(method, ...params);
+  const call = async (method, ...params) => {
+    await rendererReady;
+    return current.call(method, ...params);
+  };
+
+  /**
+   * Applies viewport or user agent state the renderer is told about. Before
+   * the first renderer is up there is nothing to wait for: it starts with the
+   * state (replayState), and the latest state is applied again once it is.
+   */
+  function applyState(method, args) {
+    if (current) return current.call(method, ...args());
+    rendererReady.then(() => current?.call(method, ...args())).catch(() => {});
+    return undefined;
+  }
 
   /**
    * Fetches a top-level document, then commits it in the renderer for its
    * final origin. `invoke` pins the renderer (used when restoring a
    * restarted renderer).
    */
-  async function load(url, invoke = null, downloadName = null) {
+  async function load(url, invoke = null, downloadName = null, post = null) {
     const started = performance.now();
     if (downloadName !== null && resource && withoutHash(url) === withoutHash(resource.url)) {
       return download({ url: resource.url, body: resource.body, attributeName: downloadName, totalBytes: resource.body.byteLength });
@@ -237,7 +273,7 @@ export async function createBrowser({
       try {
         const target = new URL(url);
         const response = ["http:", "https:"].includes(target.protocol)
-          ? await network.navigate(target.href, { onResponse: (raw, finalUrl) => {
+          ? await network.navigate(target.href, { post, onResponse: (raw, finalUrl) => {
             if (!raw.ok || (downloadName === null && !isAttachment(raw.headers.get("content-disposition")))) return null;
             return download({ url: finalUrl, body: raw.body, disposition: raw.headers.get("content-disposition") ?? "",
               attributeName: downloadName ?? "", totalBytes: Number(raw.headers.get("content-length")) || 0 });
@@ -266,6 +302,7 @@ export async function createBrowser({
     const fetched = performance.now();
     writeLog("navigation", `${url}: ${document.error ?? `HTTP ${document.status ?? 200}`}`
       + `${document.url === url ? "" : ` -> ${document.url}`} in ${Math.round(fetched - started)}ms`);
+    if (!invoke) await rendererReady;
     const host = invoke ? current : await rendererFor(document.url);
     const generation = await (invoke ?? ((method, ...params) => host.call(method, ...params)))("loadDocument", document);
     committed = { host, generation };
@@ -275,14 +312,19 @@ export async function createBrowser({
 
   // Screenshots and scrolling go to the compositor thread, so they are
   // answered even while the renderer's main thread is busy.
-  const composite = (method, ...params) => current.composite(method, ...params);
+  const composite = async (method, ...params) => {
+    await rendererReady;
+    return current.composite(method, ...params);
+  };
 
   async function rememberScroll() {
+    // Before the first renderer is up nothing has been shown or scrolled.
+    if (!current) return;
     const offset = await composite("scrollOffset");
     Object.assign(history[historyIndex], { x: offset.x, y: offset.y });
   }
 
-  async function navigate(url, { downloadName = null } = {}) {
+  async function navigate(url, { downloadName = null, post = null } = {}) {
     const resolved = new URL(url, currentUrl).href;
     // A javascript: URL runs in the current document; history does not change.
     if (resolved.startsWith("javascript:")) {
@@ -290,15 +332,20 @@ export async function createBrowser({
       return;
     }
     await rememberScroll();
-    if (downloadName === null && withoutHash(resolved) === withoutHash(currentUrl)) {
+    let shown = resolved;
+    if (!post && downloadName === null && withoutHash(resolved) === withoutHash(currentUrl)) {
       currentUrl = resolved;
     } else {
-      const result = await load(resolved, null, downloadName);
+      const result = await load(resolved, null, downloadName, post);
       if (result?.downloaded) return null;
+      // The document is at the URL redirects ended on; the request's fragment
+      // carries over to it unless it has its own (Fetch §4.4, HTML §7.4.6).
+      shown = withFragment(currentUrl, resolved);
+      currentUrl = shown;
     }
-    await call("showFragment", resolved);
+    await call("showFragment", shown);
     history.splice(historyIndex + 1);
-    history.push({ url: resolved, x: 0, y: 0 });
+    history.push({ url: shown, x: 0, y: 0 });
     historyIndex = history.length - 1;
   }
 
@@ -323,6 +370,7 @@ export async function createBrowser({
 
   const context = {
     navigate,
+    get userAgent() { return userAgent ?? initialUserAgent; },
     setDownloadBehavior({ behavior = "allow", downloadPath = DEFAULT_DOWNLOAD_DIR, eventsEnabled = false } = {}) {
       if (!["allow", "allowAndName", "default", "deny"].includes(behavior)) throw new TypeError(`Unsupported download behavior ${behavior}`);
       downloadBehavior = { behavior, downloadPath, eventsEnabled: Boolean(eventsEnabled) };
@@ -336,14 +384,24 @@ export async function createBrowser({
     goForward: () => traverseHistory(historyIndex + 1),
     resize(width, height, deviceScaleFactor = 1) {
       Object.assign(viewport, { width, height, deviceScaleFactor });
-      return call("resize", ...resizeArguments());
+      return applyState("resize", resizeArguments);
     },
     setUserAgent(value) {
-      // With --mobile the phone user agent stays (casty, for one, overrides it with a desktop one).
-      if (mobile) return undefined;
+      // A client's default override must not replace an explicit CLI profile.
+      if (mobile || webkit) return undefined;
       userAgent = typeof value === "string" && value ? value : null;
       network.userAgent = userAgent;
-      return userAgent ? call("setUserAgent", userAgent) : undefined;
+      return userAgent ? applyState("setUserAgent", () => [userAgent]) : undefined;
+    },
+    addInitScript(source) {
+      const identifier = String(nextInitScript++);
+      initScripts.set(identifier, String(source));
+      applyState("setInitScripts", () => [[...initScripts.values()]]);
+      return identifier;
+    },
+    removeInitScript(identifier) {
+      if (!initScripts.delete(String(identifier))) return;
+      applyState("setInitScripts", () => [[...initScripts.values()]]);
     },
     screenshot: (options = {}) => composite("screenshot", {
       format: options.format === "jpeg" || options.format === "webp" ? options.format : "png",
@@ -366,7 +424,20 @@ export async function createBrowser({
         ? { url: resource.url, contentType: resource.contentType, body: resource.body }
         : null;
     },
-    scroll: (deltaX, deltaY) => composite("scroll", deltaX / pageScale(), deltaY / pageScale()),
+    /**
+     * Scrolls by a wheel delta. With the pointer's viewport position, the
+     * scroll container under it (an element, an iframe's document) scrolls
+     * first; the page scrolls when nothing there takes it.
+     */
+    async scroll(deltaX, deltaY, at = null) {
+      const scale = pageScale();
+      let left = { x: deltaX / scale, y: deltaY / scale };
+      if (at && Number.isFinite(at.x) && Number.isFinite(at.y)) {
+        left = await call("wheel", at.x / scale, at.y / scale, left.x, left.y) ?? left;
+        if (!left.x && !left.y) return undefined;
+      }
+      return composite("scroll", left.x, left.y);
+    },
     press: (key, options) => call("press", key, options),
     type: (text) => call("type", text),
     scrollOffset: () => composite("scrollOffset"),
@@ -401,12 +472,21 @@ export async function createBrowser({
     },
   };
 
-  await rendererFor("about:blank");
-  await current.call("loadDocument", { url: "about:blank" });
+  // The spare starts with the first renderer rather than after it, ready
+  // for the first navigation to an origin.
+  rendererReady = (async () => {
+    const first = rendererFor("about:blank");
+    prepareSpare();
+    await first;
+    await current.call("loadDocument", { url: "about:blank" });
+  })();
+  if (waitForRenderer) await rendererReady;
+  else rendererReady.catch(() => {}); // the caller awaits `ready`
 
   return {
     context,
     network,
+    ready: rendererReady,
     get sandbox() {
       return current?.sandbox ?? null;
     },
@@ -449,6 +529,18 @@ async function localDocument(url) {
   };
 }
 
+/** `url`, with the fragment of `requested` when it has none of its own. */
+function withFragment(url, requested) {
+  try {
+    const target = new URL(url);
+    const hash = new URL(requested).hash;
+    if (!target.hash && hash) target.hash = hash;
+    return target.href;
+  } catch {
+    return url;
+  }
+}
+
 function withoutHash(href) {
   const copy = new URL(href);
   copy.hash = "";

package/lib/input/hit-test.js

@@ -1,8 +1,11 @@
-const INTERACTIVE_TAGS = new Set(["A", "AUDIO", "BUTTON", "INPUT", "LABEL", "SELECT", "SUMMARY", "TEXTAREA", "VIDEO"]);
-// Form controls and labels are hit over their whole box, not only where text
-// is drawn (an unchecked checkbox or an empty field has none; a block label
-// is clickable beside its text).
-const CONTROL_TAGS = new Set(["AUDIO", "BUTTON", "INPUT", "LABEL", "SELECT", "TEXTAREA"]);
+import { hitTarget } from "../paint/display-list.js";
+
+// An iframe takes clicks for its own document (the renderer forwards them).
+const INTERACTIVE_TAGS = new Set(["A", "AUDIO", "BUTTON", "IFRAME", "INPUT", "LABEL", "SELECT", "SUMMARY", "TEXTAREA", "VIDEO"]);
+// Form controls, labels and iframes are hit over their whole box, not only
+// where text is drawn (an unchecked checkbox or an empty field has none; a
+// block label is clickable beside its text).
+const CONTROL_TAGS = new Set(["AUDIO", "BUTTON", "IFRAME", "INPUT", "LABEL", "SELECT", "TEXTAREA"]);
 
 export function interactiveRegions(tree, layout, scroll = { x: 0, y: 0 }, viewport = {}) {
   const regions = [];
@@ -71,6 +74,18 @@ export function hitTest(tree, layout, x, y, scroll, viewport) {
   return deepest.sort((left, right) => left.area - right.area)[0] ?? null;
 }
 
+/**
+ * The element a pointer event at a viewport point targets: the topmost one
+ * painted there (its own box or its text), skipping those that take no
+ * pointer events. Null when the point hits nothing.
+ */
+export function elementAtPoint(tree, displayList, x, y, scroll) {
+  const hittable = hitTestable(tree);
+  const nodeId = hitTarget(displayList, x, y, scroll, (id) => !hittable(tree.nodesById.get(id)));
+  const domNode = nodeId == null ? null : tree.nodesById.get(nodeId)?.domNode;
+  return domNode?.nodeType === 1 ? domNode : domNode?.parentElement ?? null;
+}
+
 /** Returns the content-coordinate bounds contributed by an element's text descendants. */
 export function elementBounds(tree, layout, element) {
   const rects = [];
@@ -81,11 +96,14 @@ export function elementBounds(tree, layout, element) {
         ? renderNode.domNode
         : renderNode?.domNode?.parentElement;
       if (!owner || (owner !== element && !element.contains(owner))) continue;
+      // A replaced element (an image) spans its own box, not its line's height.
+      const replaced = run.type === "image" && run.y != null;
+      const top = replaced ? run.y : fragment.y;
       rects.push({
         left: run.x,
-        top: fragment.y,
+        top,
         right: run.x + run.width,
-        bottom: fragment.y + fragment.height,
+        bottom: top + (replaced ? run.height : fragment.height),
       });
     }
   }