buninu-browser 0.2.1 → 0.2.3

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";
@@ -39,7 +39,7 @@ export async function runHeadlessShell(args = Bun.argv.slice(2)) {
 
   // The endpoint opens while the first renderer starts: a client's first
   // navigation fetches its document meanwhile.
-  const browser = await createBrowser({ allowHostJs, mobile, waitForRenderer: false });
+  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");
@@ -80,14 +80,16 @@ export async function runHeadlessShell(args = Bun.argv.slice(2)) {
  * anything that needs a renderer waits for it.
  *
  * @param {{ allowHostJs?: boolean, spareRenderer?: boolean, network?: NetworkService, rendererTimeout?: number,
- *   waitForRenderer?: boolean }} options
+ *   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,
+  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";
@@ -101,7 +103,10 @@ export async function createBrowser({
   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();
@@ -162,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;
@@ -206,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() {
@@ -253,7 +259,7 @@ export async function createBrowser({
    * 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 });
@@ -267,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 });
@@ -318,7 +324,7 @@ export async function createBrowser({
     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:")) {
@@ -326,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;
   }
 
@@ -359,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) };
@@ -375,12 +387,22 @@ export async function createBrowser({
       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 ? 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",
       quality: Number.isFinite(options.quality) ? options.quality : 80,
@@ -402,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"),
@@ -420,6 +455,9 @@ export async function createBrowser({
     lifecycleState() {
       return [...reachedLifecycle(committed.host, committed.generation)];
     },
+    move(x, y) {
+      return call("move", x / pageScale(), y / pageScale());
+    },
     async click(x, y) {
       const clicked = await call("click", x / pageScale(), y / pageScale());
       const href = typeof clicked === "string" ? clicked : clicked?.url;
@@ -494,6 +532,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),
       });
     }
   }