buninu-browser 0.2.2 → 0.2.4

package/tools/browser-lab.js

@@ -0,0 +1,78 @@
+#!/usr/bin/env bun
+// Development-only CDP comparison runner. No package dependencies or page patches.
+import { mkdirSync } from 'node:fs';
+import { resolve, join } from 'node:path';
+
+export class CDP {
+  constructor(url) {
+    this.ws = new WebSocket(url); this.next = 1; this.pending = new Map(); this.events = [];
+    this.ready = new Promise((yes, no) => { this.ws.addEventListener('open', yes, {once:true}); this.ws.addEventListener('error', no, {once:true}); });
+    this.ws.addEventListener('message', ({data}) => {
+      const m = JSON.parse(data);
+      if (m.id) { const p = this.pending.get(m.id); if (!p) return; this.pending.delete(m.id); clearTimeout(p.timer); m.error ? p.no(Error(JSON.stringify(m.error))) : p.yes(m.result); }
+      else { this.events.push({time:performance.now(), ...m}); if(this.events.length>3000)this.events.shift(); }
+    });
+    this.ws.addEventListener('close', () => { for(const p of this.pending.values()){clearTimeout(p.timer);p.no(Error('CDP closed'));} this.pending.clear(); });
+  }
+  async send(method, params={}, timeout=30000) {
+    await this.ready;
+    return new Promise((yes,no) => { const id=this.next++; const timer=setTimeout(()=>{this.pending.delete(id);no(Error(`${method} timed out`));},timeout);this.pending.set(id,{yes,no,timer});this.ws.send(JSON.stringify({id,method,params,...(this.sessionId?{sessionId:this.sessionId}:{})})); });
+  }
+  async evaluate(expression, timeout=10000) { const r=await this.send('Runtime.evaluate',{expression,returnByValue:true,awaitPromise:true},timeout);if(r.exceptionDetails)throw Error(r.exceptionDetails.text+' '+(r.exceptionDetails.exception?.description||''));return r.result?.value; }
+  close(){this.ws.close();}
+}
+export async function launch(engine, dir, extra=[]) {
+  mkdirSync(dir,{recursive:true});
+  const log=join(dir,engine+'.log');
+  const cmd=engine==='chromium' ? ['/usr/local/bin/chromium-headless-shell','--no-sandbox','--disable-dev-shm-usage','--remote-debugging-port=0','--window-size=1280,800',...extra,'about:blank'] : [process.execPath,resolve('buninu-browser.js'),'--remote-debugging-port=0',...extra];
+  const proc=Bun.spawn(cmd,{stdout:Bun.file(join(dir,engine+'.stdout')),stderr:'pipe',env:{...process.env,BUNINU_LOG:join(dir,'buninu-diagnostic.log')}});
+  let stderr='';const writer=Bun.file(log).writer();
+  (async()=>{for await(const chunk of proc.stderr){writer.write(chunk);stderr+=Buffer.from(chunk).toString();if(stderr.length>200000)stderr=stderr.slice(-100000);}await writer.end();})();
+  let cdp;
+  try {
+  let port;for(let i=0;i<200;i++){const m=stderr.match(/DevTools listening on ws:\/\/[^:]+:(\d+)/);if(m){port=Number(m[1]);break;}if(proc.exitCode!==null)throw Error(`engine exited ${proc.exitCode}: ${stderr.slice(-1000)}`);await Bun.sleep(50);}
+  if(!port){proc.kill();throw Error('CDP endpoint missing');}
+  const version=await (await fetch(`http://127.0.0.1:${port}/json/version`)).json();
+  cdp=new CDP(version.webSocketDebuggerUrl);await cdp.ready;
+  const {targetId}=await cdp.send('Target.createTarget',{url:'about:blank'});
+  const {sessionId}=await cdp.send('Target.attachToTarget',{targetId,flatten:true});
+  cdp.sessionId=sessionId;
+  await cdp.send('Page.enable');await cdp.send('Runtime.enable');
+  await cdp.send('Emulation.setDeviceMetricsOverride',{width:1280,height:800,deviceScaleFactor:1,mobile:false});
+  return {cdp,proc,stop:async()=>{cdp.close();proc.kill();await proc.exited;}};
+  } catch(error) { cdp?.close();proc.kill();await proc.exited;throw error; }
+}
+const describe = `(()=>({url:location.href,title:document.title,text:document.body?.innerText?.slice(0,12000),nodes:document.querySelectorAll('*').length,readyState:document.readyState,controls:[...document.querySelectorAll('a,button,input,select,summary,[role="button"]')].map(e=>{const r=e.getBoundingClientRect();return {tag:e.tagName,text:(e.innerText||e.getAttribute('aria-label')||e.getAttribute('placeholder')||'').trim().slice(0,100),href:e.getAttribute('href'),id:e.id,x:r.x,y:r.y,width:r.width,height:r.height};}).filter(e=>e.width>0&&e.height>0&&e.x<1280&&e.y<800&&e.x+e.width>0&&e.y+e.height>0).slice(0,100)}))()`;
+export async function snapshot(cdp,dir,name) {
+  const start=performance.now(); const {data}=await cdp.send('Page.captureScreenshot',{format:'png'});const captureMs=performance.now()-start;
+  await Bun.write(join(dir,name+'.png'),Buffer.from(data,'base64'));
+  let dom;try{dom=await cdp.evaluate(describe);}catch(error){dom={error:error.message};}
+  await Bun.write(join(dir,name+'.json'),JSON.stringify({...dom,captureMs},null,2));return {captureMs,...dom};
+}
+export async function runCase({engine,url,dir,actions=[],settle=1500}) {
+  const started=performance.now();let browser;const report={engine,url,actions:[]};
+  try {
+    browser=await launch(engine,dir);const {cdp}=browser;report.startupMs=performance.now()-started;
+    const nav=performance.now();await cdp.send('Page.navigate',{url},45000);report.navigateReplyMs=performance.now()-nav;
+    const deadline=performance.now()+30000;
+    while(performance.now()<deadline&&!cdp.events.some(e=>e.method==='Page.loadEventFired'&&e.time>=nav))await Bun.sleep(100);
+    const loaded=cdp.events.find(e=>e.method==='Page.loadEventFired'&&e.time>=nav);report.loadMs=loaded?loaded.time-nav:null;
+    await Bun.sleep(settle);report.initial=await snapshot(cdp,dir,'initial');
+    for(let i=0;i<actions.length;i++){
+      const action=actions[i],at=performance.now();let error=null;
+      try {
+        if(action.click||action.clickText){const point=await cdp.evaluate(`(()=>{const candidates=[...document.querySelectorAll(${JSON.stringify(action.click||'button,a,summary,[role="button"],[role="menuitem"]')})];const e=candidates.find(e=>{const r=e.getBoundingClientRect(),s=getComputedStyle(e);return r.width>0&&r.height>0&&s.visibility!=='hidden'&&(!${JSON.stringify(action.clickText||'')}||(e.innerText||e.getAttribute('aria-label')||'').trim()===${JSON.stringify(action.clickText||'')});});if(!e)return null;e.scrollIntoView({block:'nearest',inline:'nearest'});const r=e.getBoundingClientRect();return {x:r.x+r.width/2,y:r.y+r.height/2};})()`);if(!point)throw Error('visible selector not found');for(const type of ['mousePressed','mouseReleased'])await cdp.send('Input.dispatchMouseEvent',{type,...point,button:'left',clickCount:1});}
+        else if(action.point){for(const type of ['mousePressed','mouseReleased'])await cdp.send('Input.dispatchMouseEvent',{type,x:action.point[0],y:action.point[1],button:'left',clickCount:1});}
+        else if(action.type)await cdp.send('Input.insertText',{text:action.type});
+        else if(action.key){for(const type of ['keyDown','keyUp'])await cdp.send('Input.dispatchKeyEvent',{type,key:action.key,code:action.key,windowsVirtualKeyCode:action.key==='Enter'?13:action.key==='Escape'?27:0});}
+        else if(action.scroll)await cdp.send('Input.dispatchMouseEvent',{type:'mouseWheel',x:640,y:500,deltaY:action.scroll,deltaX:0});
+        else if(action.evaluate)report.lastEvaluation=await cdp.evaluate(action.evaluate);
+      }catch(e){error=e.message;}
+      await Bun.sleep(action.wait??600);
+      const state=await snapshot(cdp,dir,`action-${i+1}`);report.actions.push({action,error,elapsedMs:performance.now()-at,state});
+    }
+    report.errors=cdp.events.filter(e=>e.method==='Runtime.exceptionThrown').slice(-20);
+  }catch(error){report.error=error.stack;}finally{await browser?.stop();report.totalMs=performance.now()-started;await Bun.write(join(dir,'report.json'),JSON.stringify(report,null,2));}
+  return report;
+}
+if(import.meta.main){const [engine,url,dir,...rest]=process.argv.slice(2);if(!engine||!url||!dir)throw Error('usage: bun tools/browser-lab.js ENGINE URL OUTPUT_DIR [ACTIONS_JSON]');const result=await runCase({engine,url,dir:resolve(dir),actions:rest[0]?JSON.parse(rest[0]):[]});console.log(JSON.stringify({engine,url,error:result.error,startupMs:result.startupMs,loadMs:result.loadMs,captureMs:result.initial?.captureMs,title:result.initial?.title,actions:result.actions.map(a=>({action:a.action,error:a.error,url:a.state?.url}))}));}

package/tools/browser-soak.js

@@ -0,0 +1,75 @@
+#!/usr/bin/env bun
+// End-to-end bounded DOM/canvas/image churn, navigation and CDP capture soak.
+// Usage: bun tools/browser-soak.js buninu /tmp/browser-soak 900
+import { join, resolve } from 'node:path';
+import { launch } from './browser-lab.js';
+import { encodeImage } from '../lib/paint/frame.js';
+import { processMemory } from './process-memory.js';
+
+const [engine = 'buninu', directory = '/tmp/browser-soak', seconds = '600'] = process.argv.slice(2);
+const duration = Math.max(1, Number(seconds)) * 1000;
+const dir = resolve(directory);
+const rgba = new Uint8Array(32 * 32 * 4);
+for (let i = 0; i < rgba.length; i += 4) rgba.set([30, 120, 210, 255], i);
+const png = await encodeImage(rgba, 32, 32);
+let requests = 0;
+const server = Bun.serve({ port: 0, fetch(request) {
+  requests++;
+  const url = new URL(request.url);
+  if (url.pathname === '/pixel.png') return new Response(png, { headers: { 'content-type': 'image/png', 'cache-control': 'max-age=3600' } });
+  return new Response(`<!doctype html><meta charset="utf-8"><title>Browser soak ${url.search}</title>
+    <style>body{margin:0;font:16px sans-serif;background:#fafafa}header{position:sticky;top:0;background:#135;color:white;padding:12px;z-index:2}main{padding:12px}.card{display:flex;gap:12px;align-items:center;padding:8px;border-bottom:1px solid #ddd}canvas{display:block}button{font:inherit}</style>
+    <header>Navigation ${url.search} · <span id="counter">0</span> <button id="toggle">Toggle</button></header>
+    <main><canvas id="paint" width="800" height="120"></canvas><section id="cards">${Array.from({length:160}, (_,i)=>`<div class="card"><img src="/pixel.png" width="32" height="32"><span>Row ${i}: Browser rendering, memory and input exercise 中文 🙂</span></div>`).join('')}</section></main>
+    <script>
+      let tick=0; const paint=document.getElementById('paint'); const context=paint.getContext('2d');
+      const counter=document.getElementById('counter'); const cards=document.getElementById('cards');
+      document.getElementById('toggle').onclick=()=>document.body.style.background=tick%2?'#def':'#fed';
+      setInterval(()=>{tick++;counter.textContent=String(tick);context.fillStyle=tick%2?'#69c':'#c96';context.fillRect((tick*11)%760,20,40,80);
+        if(tick%10===0){const card=cards.firstElementChild;card.querySelector('span').textContent='Recycled row '+tick;cards.appendChild(card);}
+        if(tick%20===0){for(let i=0;i<8;i++){const c=document.createElement('canvas');c.width=800;c.height=600;c.getContext('2d').fillRect(0,0,800,600);}}
+      },100);
+    </script>`, { headers: { 'content-type': 'text/html' } });
+} });
+
+let browser;
+const samples = [];
+const errors = [];
+const started = performance.now();
+let navigations = 0;
+try {
+  browser = await launch(engine, dir);
+  const writer = Bun.file(join(dir, 'samples.jsonl')).writer();
+  const { cdp } = browser;
+  let nextNavigation = 0;
+  while (performance.now() - started < duration) {
+    const elapsed = performance.now() - started;
+    if (elapsed >= nextNavigation) {
+      const host = Math.floor(navigations / 4) % 2 ? 'localhost' : '127.0.0.1';
+      await cdp.send('Page.navigate', { url: `http://${host}:${server.port}/page?n=${navigations++}` });
+      nextNavigation = elapsed + 15000;
+      await Bun.sleep(300);
+    }
+    try {
+      await cdp.send('Input.dispatchMouseEvent', { type: 'mouseWheel', x: 600, y: 500, deltaY: samples.length % 20 < 10 ? 180 : -180, deltaX: 0 });
+      const before = performance.now();
+      const { data } = await cdp.send('Page.captureScreenshot', { format: 'png', optimizeForSpeed: true });
+      const captureMs = performance.now() - before;
+      const counter = await cdp.evaluate(`document.getElementById('counter')?.textContent`);
+      const processes = await processMemory(browser.proc.pid);
+      const sample = { elapsedMs: Math.round(elapsed), navigation: navigations, counter, captureMs, encodedLength: data.length, rssMiB: processes ? processes.reduce((sum,p)=>sum+p.rssKiB,0)/1024 : null, processes };
+      samples.push(sample);writer.write(JSON.stringify(sample)+'\n');writer.flush();
+      if (samples.length % 30 === 0) await Bun.write(join(dir, 'latest.png'), Buffer.from(data, 'base64'));
+      if (samples.length % 60 === 0) console.log(JSON.stringify(sample));
+    } catch (error) { errors.push({ elapsedMs: Math.round(elapsed), error: error.message }); }
+    await Bun.sleep(1000);
+  }
+  await writer.end();
+} finally {
+  await browser?.stop();server.stop(true);
+  const mean = values => values.length ? values.reduce((a,b)=>a+b,0)/values.length : null;
+  const report = { engine, elapsedMs: performance.now()-started, navigations, requests, samples: samples.length, errors,
+    peakRssMiB: Math.max(0,...samples.map(s=>s.rssMiB)), firstMinuteRssMiB: mean(samples.filter(s=>s.elapsedMs>=60000&&s.elapsedMs<120000).map(s=>s.rssMiB)),
+    lastMinuteRssMiB: mean(samples.filter(s=>s.elapsedMs>duration-60000).map(s=>s.rssMiB)), captureMeanMs: mean(samples.map(s=>s.captureMs)) };
+  await Bun.write(join(dir, 'report.json'), JSON.stringify(report,null,2));console.log(JSON.stringify(report));
+}

package/tools/network-reference.js

@@ -0,0 +1,49 @@
+#!/usr/bin/env bun
+// Exercise redirects through real HTTP servers, using Chromium as a reference.
+import { launch } from "./browser-lab.js";
+import { resolve } from "node:path";
+
+const [engine = "buninu", output = "/tmp/buninu-network-reference"] = process.argv.slice(2);
+const calls = [];
+let source, target;
+const handler = async request => {
+  const url = new URL(request.url);
+  calls.push({ method: request.method, path: url.pathname, host: url.host, origin: request.headers.get("origin"),
+    cookie: request.headers.get("cookie"), authorization: request.headers.get("authorization"),
+    preflight: request.headers.get("access-control-request-headers") });
+  const cors = { "access-control-allow-origin": request.headers.get("origin") ?? source,
+    "access-control-allow-credentials": "true", "access-control-allow-methods": "PUT", "access-control-allow-headers": "x-custom" };
+  if (request.method === "OPTIONS") return new Response(null, { status: 204, headers: cors });
+  if (url.pathname === "/") return new Response("<!doctype html><title>Network reference</title><p>Redirect fixture</p>", { headers: { "content-type": "text/html" } });
+  if (url.pathname.startsWith("/redirect/")) return new Response(null, { status: 307, headers: { location: target + url.pathname.slice(9) } });
+  if (url.pathname === "/chain") return new Response(null, { status: 302, headers: { ...cors, location: source + "/finish" } });
+  return new Response("visible body", { headers: { ...(url.pathname === "/denied" ? {} : cors),
+    "x-private": "hidden", "x-public": "visible", "access-control-expose-headers": "x-public" } });
+};
+const first = Bun.serve({ port: 0, fetch: handler });
+const second = Bun.serve({ port: 0, fetch: handler });
+source = `http://localhost:${first.port}`; target = `http://localhost:${second.port}`;
+let browser;
+const report = { engine, cases: [] };
+try {
+  browser = await launch(engine, resolve(output));
+  await browser.cdp.send("Page.navigate", { url: source + "/" });
+  await Bun.sleep(300);
+  await browser.cdp.evaluate('document.cookie="private=fixture; SameSite=Lax"; undefined;');
+  for (const [name, url, init] of [
+    ["denied", source + "/redirect/denied", {}],
+    ["allowed", source + "/redirect/allowed", {}],
+    ["same-origin", source + "/redirect/allowed", { mode: "same-origin" }],
+    ["opaque", source + "/redirect/allowed", { mode: "no-cors" }],
+    ["preflight", source + "/redirect/allowed", { method: "PUT", headers: { authorization: "Bearer fixture", "x-custom": "yes" }, body: "body" }],
+    ["chain", target + "/chain", {}],
+  ]) {
+    calls.length = 0;
+    const result = await browser.cdp.evaluate(`(async()=>{try {const r=await fetch(${JSON.stringify(url)},${JSON.stringify(init)});
+      return {type:r.type,status:r.status,body:await r.text(),private:r.headers.get('x-private'),public:r.headers.get('x-public')};
+      } catch(e) {return {error:e.name};}})()`);
+    report.cases.push({ name, result, calls: calls.slice() });
+  }
+  await Bun.write(resolve(output, "network.json"), JSON.stringify(report, null, 2));
+  console.log(JSON.stringify(report));
+} finally { await browser?.stop(); first.stop(true); second.stop(true); }

package/tools/process-memory.js

@@ -0,0 +1,38 @@
+import { readdir } from 'node:fs/promises';
+
+// Android kernels may omit /proc/PID/task/PID/children. PPid in status works
+// there too; return null if this platform does not expose process memory.
+export async function processMemory(rootPid) {
+  let entries;
+  try { entries = (await readdir('/proc')).filter(name => /^\d+$/.test(name)); }
+  catch { return null; }
+  const records = (await Promise.all(entries.map(async name => {
+    try {
+      const status = await Bun.file(`/proc/${name}/status`).text();
+      return { pid: Number(name), parent: Number(status.match(/^PPid:\s+(\d+)/m)?.[1]), rssKiB: Number(status.match(/^VmRSS:\s+(\d+)/m)?.[1] ?? 0) };
+    } catch { return null; }
+  }))).filter(Boolean);
+  const children = new Map();
+  for (const record of records) {
+    if (!children.has(record.parent)) children.set(record.parent, []);
+    children.get(record.parent).push(record);
+  }
+  const root = records.find(record => record.pid === rootPid);
+  if (!root) return null;
+  const found = [root];
+  for (let index = 0; index < found.length; index++) found.push(...(children.get(found[index].pid) ?? []));
+  return found;
+}
+
+if (import.meta.main) {
+  const [pid, output, seconds = '600'] = process.argv.slice(2);
+  const writer = Bun.file(output).writer();
+  const start = Date.now();
+  while (Date.now() - start < Number(seconds) * 1000) {
+    const processes = await processMemory(Number(pid));
+    if (!processes) break;
+    writer.write(JSON.stringify({elapsedMs:Date.now()-start,rssMiB:processes.reduce((sum,p)=>sum+p.rssKiB,0)/1024,processes})+'\n');
+    writer.flush();await Bun.sleep(1000);
+  }
+  await writer.end();
+}

package/tools/script-benchmark.js

@@ -0,0 +1,25 @@
+#!/usr/bin/env bun
+// Compare deterministic script preparation, independent of network/site timing.
+import { resolve, basename } from "node:path";
+import { pathToFileURL } from "node:url";
+
+const [modulePath = "lib/renderer/script-rewrite.js", ...files] = process.argv.slice(2);
+const { rewriteClassicScriptSource } = await import(pathToFileURL(resolve(modulePath)).href);
+const cases = [
+  ["top-level-functions", Array.from({ length: 3000 }, (_, i) =>
+    `function function${i}(x) { return callback(x) + this.offset + value${i}; }`).join("\n")],
+  ["bundled-functions", `(function(){${Array.from({ length: 3000 }, (_, i) =>
+    `function function${i}(x) { return callback(x) + this.offset + value${i}; }`).join("\n")}result = function2999(1);})();`],
+];
+for (const file of files) cases.push([basename(file), await Bun.file(file).text()]);
+for (const [name, source] of cases) {
+  const samples = []; let result;
+  for (let i = 0; i < 7; i++) {
+    Bun.gc(true);
+    const start = performance.now(); result = rewriteClassicScriptSource(source);
+    samples.push(performance.now() - start);
+  }
+  const sorted = samples.slice(2).sort((a, b) => a - b);
+  console.log(JSON.stringify({ name, inputLength: source.length, outputLength: result.code.length,
+    outputHash: Bun.hash(result.code).toString(16), parsed: result.parsed, medianMs: sorted[2], samples }));
+}