fix(browser): stop idle native pane layout polling

application/state/useHostBrowserPanel.test.ts

@@ -21,6 +21,17 @@ async function fixture(t: test.TestContext) {
     value: (callback: FrameRequestCallback) => { frames.set(++frameId, callback); return frameId; } });
   Object.defineProperty(globalThis, 'cancelAnimationFrame', { configurable: true,
     value: (id: number) => frames.delete(id) });
+  const resizeObservers = new Map<ResizeObserver, Set<Element>>();
+  const resizeCallbacks = new Map<ResizeObserver, ResizeObserverCallback>();
+  class LayoutResizeObserver implements ResizeObserver {
+    constructor(callback: ResizeObserverCallback) { resizeCallbacks.set(this, callback); resizeObservers.set(this, new Set()); }
+    observe(target: Element) { resizeObservers.get(this)?.add(target); }
+    unobserve(target: Element) { resizeObservers.get(this)?.delete(target); }
+    disconnect() { resizeObservers.delete(this); resizeCallbacks.delete(this); }
+  }
+  Object.defineProperty(env.window, 'ResizeObserver', { configurable: true, value: LayoutResizeObserver });
+  const fonts = Object.assign(new env.window.EventTarget(), { status: 'loaded' });
+  Object.defineProperty(env.document, 'fonts', { configurable: true, value: fonts });
   const style = env.document.createElement('div').style;
   style.colorScheme = 'dark';
   globalThis.getComputedStyle = () => style;
@@ -40,8 +51,11 @@ async function fixture(t: test.TestContext) {
       isVisible: visible });
     return React.createElement('div', { ref: panel.elementRef });
   }
-  const element = { isConnected: true, closest: () => null,
-    getBoundingClientRect: () => new env.window.DOMRect(200, 100, 500, 600) };
+  const element = env.document.createElement('div');
+  env.document.body.append(element);
+  let bounds = new env.window.DOMRect(200, 100, 500, 600);
+  let reads = 0;
+  element.getBoundingClientRect = () => { reads += 1; return bounds; };
   let renderer: ReturnType<typeof create>;
   t.after(async () => {
     if (renderer) await act(async () => renderer.unmount());
@@ -62,11 +76,15 @@ async function fixture(t: test.TestContext) {
   };
   const tick = async () => {
     await act(async () => {
+      await Promise.resolve();
       const pending = [...frames.values()]; frames.clear();
       for (const callback of pending) callback(0);
     });
   };
-  return { layouts, overlay, tick, panel: () => panel,
+  return { layouts, overlay, tick, panel: () => panel, pendingFrames: () => frames.size,
+    env, element, style, fonts, reads: () => reads, setBounds: (next: DOMRect) => { bounds = next; },
+    observerCount: () => resizeObservers.size,
+    resize: () => { for (const [observer, callback] of resizeCallbacks) callback([], observer); },
     respond: (callback: typeof respond) => { respond = callback; },
     hide: async () => { await act(async () => renderer.update(React.createElement(Panel, { visible: false }))); } };
 }
@@ -128,3 +146,103 @@ test('hiding or locking the pane clears pictures without taking another capture'
   await f.hide();
   assert.deepEqual(f.panel().snapshot, []);
 });
+
+
+test('a stationary visible browser leaves no repeating layout work', async (t) => {
+  const f = await fixture(t);
+  for (let index = 0; index < 600; index += 1) await f.tick();
+  assert.equal(f.layouts.length, 1);
+  assert.equal(f.pendingFrames(), 0, 'idle browser must stop scheduling document/style/geometry scans');
+});
+
+
+test('layout, scroll, font, stylesheet and theme changes coalesce without resuming idle scans', async (t) => {
+  const f = await fixture(t);
+  const reads = f.reads();
+  f.setBounds(new f.env.window.DOMRect(100, 50, 400, 500));
+  for (let index = 0; index < 20; index += 1) {
+    f.resize();
+    f.env.window.dispatchEvent(new f.env.window.Event('resize'));
+    f.element.dispatchEvent(new f.env.window.Event('scroll', { bubbles: true }));
+  }
+  f.fonts.dispatchEvent(new f.env.window.Event('loadingdone'));
+  f.env.document.dispatchEvent(new f.env.window.Event('load'));
+  f.style.colorScheme = 'light';
+  f.env.document.documentElement.classList.add('light');
+  assert.equal(f.reads(), reads, 'bursts do not synchronously force repeated layout reads');
+  await f.tick();
+  assert.equal(f.reads(), reads + 1);
+  assert.deepEqual(f.layouts.at(-1)?.bounds, { x: 100, y: 50, width: 400, height: 500 });
+  assert.equal(f.layouts.at(-1)?.theme, 'light');
+  assert.equal(f.pendingFrames(), 0);
+  f.env.document.body.setAttribute('inert', ''); await f.tick();
+  assert.equal(f.layouts.at(-1)?.visible, false);
+  f.env.document.body.removeAttribute('inert'); await f.tick();
+  assert.equal(f.layouts.at(-1)?.visible, true);
+});
+
+test('resize observation follows a moving overlay and is released while hidden', async (t) => {
+  const f = await fixture(t);
+  const popper = f.overlay(tooltip, 10, 10); await f.tick();
+  assert.equal(f.layouts.at(-1)?.occluded, false);
+  popper.firstElementChild!.getBoundingClientRect = () => new f.env.window.DOMRect(220, 110, 150, 40);
+  f.resize(); await f.tick();
+  assert.equal(f.layouts.at(-1)?.occluded, true);
+  await f.hide();
+  assert.equal(f.observerCount(), 0);
+  const reads = f.reads();
+  f.overlay('<div role="dialog" aria-modal="true"></div>');
+  f.env.window.dispatchEvent(new f.env.window.Event('resize'));
+  f.fonts.dispatchEvent(new f.env.window.Event('loadingdone'));
+  await f.tick();
+  assert.equal(f.pendingFrames(), 0);
+  assert.equal(f.reads(), reads);
+});
+
+test('only pane/ancestor and overlay motion follows frames, then stops at settlement', async (t) => {
+  const f = await fixture(t);
+  const animation = { pending: false, playState: 'running' };
+  f.element.getAnimations = () => [animation as unknown as Animation];
+  f.element.dispatchEvent(new f.env.window.Event('transitionrun', { bubbles: true }));
+  const reads = f.reads();
+  for (let index = 0; index < 5; index += 1) {
+    f.setBounds(new f.env.window.DOMRect(200 + index * 10, 100, 500, 600));
+    await f.tick();
+  }
+  assert.equal(f.reads(), reads + 5);
+  assert.equal(f.layouts.at(-1)?.bounds?.x, 240);
+  animation.playState = 'finished'; await f.tick();
+  assert.equal(f.pendingFrames(), 0);
+
+  const spinner = f.env.document.createElement('div'); f.env.document.body.append(spinner); await f.tick();
+  spinner.getAnimations = () => [animation as unknown as Animation];
+  const settledReads = f.reads();
+  spinner.dispatchEvent(new f.env.window.Event('animationstart', { bubbles: true }));
+  await f.tick();
+  assert.equal(f.reads(), settledReads, 'unrelated cursor/spinner animation does not wake the browser');
+});
+
+test('removing an animating overlay cannot leave an endless layout loop', async (t) => {
+  const f = await fixture(t);
+  const popper = f.overlay(tooltip);
+  popper.firstElementChild!.getAnimations = () => [{ pending: false, playState: 'running' } as Animation];
+  await f.tick();
+  assert.equal(f.pendingFrames(), 1);
+  popper.remove(); await f.tick();
+  assert.equal(f.pendingFrames(), 0);
+  assert.equal(f.layouts.at(-1)?.occluded, false);
+});
+
+test('an old capture stays obsolete when an identical overlay is opened again', async (t) => {
+  const f = await fixture(t);
+  const captures: ((result: Result) => void)[] = [];
+  f.respond((layout) => layout.occluded ? new Promise((resolve) => { captures.push(resolve); }) : Promise.resolve(true));
+  const first = f.overlay(tooltip); await f.tick();
+  first.remove(); await f.tick();
+  f.overlay(tooltip); await f.tick();
+  assert.equal(captures.length, 2);
+  await act(async () => captures[0]({ layers }));
+  assert.deepEqual(f.panel().snapshot, [], 'the first A capture must not become valid after A -> B -> A');
+  await act(async () => captures[1]({ layers }));
+  assert.deepEqual(f.panel().snapshot, layers);
+});

application/state/useHostBrowserPanel.ts

@@ -38,9 +38,33 @@ export function useHostBrowserPanel(options: BrowserPanelOptions) {
 
   useLayoutEffect(() => {
     const bridge = netcattyBridge.get();
-    let frame = 0;
+    let frame: number | null = null;
     let previous = '';
     let disposed = false;
+    let layoutRevision = 0;
+    const element = elementRef.current;
+    const doc = element?.ownerDocument;
+    const view = doc?.defaultView;
+    const observed = new Set<Element>();
+    const animations = new Map<Animation, Element>();
+    const schedule = () => {
+      if (disposed || frame !== null) return;
+      frame = requestAnimationFrame(() => {
+        frame = null;
+        for (const [animation, target] of animations) {
+          if (!target.isConnected || (!animation.pending && animation.playState !== 'running')) animations.delete(animation);
+        }
+        update();
+        if (animations.size > 0) schedule();
+      });
+    };
+    const trackAnimations = (target: Element) => {
+      for (const animation of target.getAnimations?.() ?? []) {
+        if (!animation.pending && animation.playState !== 'running') continue;
+        animations.set(animation, target);
+      }
+    };
+    const resizeObserver = isVisible && view?.ResizeObserver ? new view.ResizeObserver(schedule) : null;
     const update = () => {
       const element = elementRef.current;
       const rect = element?.getBoundingClientRect();
@@ -48,9 +72,21 @@ export function useHostBrowserPanel(options: BrowserPanelOptions) {
       // to yield; dialogs are modal even when their content is beside the pane.
       const locked = !!document.querySelector('[data-app-lock-overlay]');
       const modal = !!document.querySelector('[role="dialog"][aria-modal="true"], [role="alertdialog"]');
-      const covered = modal || (!!rect && Array.from(document.querySelectorAll(
-        '[role="dialog"], [role="menu"][data-state="open"], [data-radix-popper-content-wrapper] > *',
-      )).some((overlay) => overlapsBrowser(rect, overlay)));
+      const overlays = Array.from(document.querySelectorAll(
+        '[role="dialog"], [role="alertdialog"], [role="menu"][data-state="open"], [data-radix-popper-content-wrapper] > *',
+      ));
+      const covered = modal || (!!rect && overlays.some((overlay) => overlapsBrowser(rect, overlay)));
+      const targets = new Set<Element>(overlays);
+      for (let target: Element | null = element; target; target = target.parentElement) targets.add(target);
+      for (const target of observed) {
+        if (!targets.has(target)) { resizeObserver?.unobserve(target); observed.delete(target); }
+      }
+      for (const target of targets) {
+        if (observed.has(target)) continue;
+        observed.add(target);
+        resizeObserver?.observe(target);
+        trackAnimations(target);
+      }
       const visible = isVisible && !!element?.isConnected && !!rect
         && rect.width > 0 && rect.height > 0 && !element?.closest('[inert]') && !locked;
       if (!visible) setSnapshot(null);
@@ -63,17 +99,59 @@ export function useHostBrowserPanel(options: BrowserPanelOptions) {
       const next = JSON.stringify(layout);
       if (next !== previous) {
         previous = next;
+        const revision = ++layoutRevision;
         void bridge?.setHostBrowserPanelLayout?.(layout).then((result) => {
-          if (disposed || previous !== next) return;
+          if (disposed || layoutRevision !== revision) return;
           setSnapshot(visible && covered && typeof result === 'object' ? { browserId, layers: result.layers } : null);
         }).catch(() => {});
       }
-      if (isVisible) frame = requestAnimationFrame(update);
     };
+    if (!isVisible) {
+      setSnapshot(null);
+      void bridge?.setHostBrowserPanelLayout?.({ browserId, visible: false }).catch(() => {});
+      return;
+    }
+
+    // Layout, theme and portal changes coalesce into a single frame. Keep
+    // following only running animations on the pane's ancestors or overlay
+    // containers; unrelated spinner/cursor animations must not restart polling.
+    const mutationObserver = view?.MutationObserver ? new view.MutationObserver(schedule) : null;
+    if (doc) mutationObserver?.observe(doc.documentElement, {
+      subtree: true, childList: true, attributes: true,
+      attributeFilter: ['style', 'class', 'hidden', 'inert', 'role', 'aria-modal', 'data-state',
+        'data-app-lock-overlay', 'data-radix-popper-content-wrapper', 'href', 'media', 'disabled'],
+    });
+    const onMotion = (event: Event) => {
+      const target = event.target;
+      if (!element || !view || !(target instanceof view.Element)) return;
+      if (!target.contains(element) && !target.matches(
+        '[role="dialog"], [role="alertdialog"], [role="menu"], [data-app-lock-overlay], '
+        + '[data-radix-popper-content-wrapper], [data-radix-popper-content-wrapper] > *',
+      )) return;
+      trackAnimations(target);
+      schedule();
+    };
+    const motionEvents = ['transitionrun', 'transitionend', 'transitioncancel', 'animationstart', 'animationend', 'animationcancel'];
+    for (const event of motionEvents) doc?.addEventListener(event, onMotion, true);
+    doc?.addEventListener('scroll', schedule, true);
+    doc?.addEventListener('load', schedule, true);
+    view?.addEventListener('resize', schedule);
+    doc?.fonts?.addEventListener('loadingdone', schedule);
+    doc?.fonts?.addEventListener('loadingerror', schedule);
+    if (doc?.fonts?.status === 'loading') void doc.fonts.ready.then(schedule);
     update();
+    if (animations.size > 0) schedule();
     return () => {
       disposed = true;
-      cancelAnimationFrame(frame);
+      if (frame !== null) cancelAnimationFrame(frame);
+      resizeObserver?.disconnect();
+      mutationObserver?.disconnect();
+      for (const event of motionEvents) doc?.removeEventListener(event, onMotion, true);
+      doc?.removeEventListener('scroll', schedule, true);
+      doc?.removeEventListener('load', schedule, true);
+      view?.removeEventListener('resize', schedule);
+      doc?.fonts?.removeEventListener('loadingdone', schedule);
+      doc?.fonts?.removeEventListener('loadingerror', schedule);
       void bridge?.setHostBrowserPanelLayout?.({ browserId, visible: false }).catch(() => {});
     };
   }, [browserId, isVisible]);

electron/hostBrowser/hostBrowser.renderer.live.test.cjs

@@ -35,11 +35,24 @@ async function capture(file, selector) {
   fs.writeFileSync(file, (await owner.webContents.capturePage(bounds)).toPNG());
 }
 async function click(selector) {
+  // Electron requires native focus before sendInputEvent can deliver a click.
+  app.focus({ steal: true }); owner.focus(); owner.webContents.focus();
+  await until(() => owner.isFocused(), true, 'acceptance window has native focus for click');
   const rect = await run(`(() => { const element = document.querySelector(${JSON.stringify(selector)}); element?.scrollIntoView({block:'nearest'}); const r = element?.getBoundingClientRect(); return r && {x:r.x+r.width/2,y:r.y+r.height/2}; })()`);
   assert.ok(rect, `missing ${selector}`);
+  owner.webContents.sendInputEvent({ type: 'mouseMove', x: Math.round(rect.x), y: Math.round(rect.y) });
+  await run('new Promise(resolve => requestAnimationFrame(resolve))');
   for (const type of ['mouseDown', 'mouseUp']) owner.webContents.sendInputEvent({ type, button: 'left', clickCount: 1, x: Math.round(rect.x), y: Math.round(rect.y) });
   await run('new Promise(resolve => requestAnimationFrame(() => requestAnimationFrame(resolve)))');
 }
+async function pressEscape() {
+  app.focus({ steal: true }); owner.focus(); owner.webContents.focus();
+  await until(() => owner.isFocused(), true, 'acceptance window has native focus for Escape');
+  await run('new Promise(resolve => requestAnimationFrame(resolve))');
+  owner.webContents.sendInputEvent({ type: 'keyDown', keyCode: 'Escape' });
+  owner.webContents.sendInputEvent({ type: 'keyUp', keyCode: 'Escape' });
+  await run('new Promise(resolve => requestAnimationFrame(() => requestAnimationFrame(resolve)))');
+}
 async function input(selector, value) {
   await until(() => run(`!!document.querySelector(${JSON.stringify(selector)})`), true, `input exists: ${selector}`);
   await run(`(() => { const element = document.querySelector(${JSON.stringify(selector)}); Object.getOwnPropertyDescriptor(HTMLInputElement.prototype,'value').set.call(element,${JSON.stringify(value)}); element.dispatchEvent(new Event('input',{bubbles:true})); })()`);
@@ -93,6 +106,65 @@ async function main() {
   assert.ok(root); assert.equal(root.children.length, 1, 'only the website is a separate native view');
   const page = root.children[0].webContents;
   await page.executeJavaScript("document.getElementById('draft').value='Unsaved browser input'");
+  // A visible but stationary browser must not spend every frame reading the
+  // whole renderer. Settle startup/FontFaceSet work before observing idle time.
+  await wait(300);
+  const assertIdleLayout = async () => {
+    await run(`(() => {
+      const query=document.querySelector.bind(document),queryAll=document.querySelectorAll.bind(document),style=getComputedStyle;
+      window.layoutReads={queries:0,styles:0};
+      document.querySelector=(...args)=>{window.layoutReads.queries++;return query(...args)};
+      document.querySelectorAll=(...args)=>{window.layoutReads.queries++;return queryAll(...args)};
+      window.getComputedStyle=(...args)=>{window.layoutReads.styles++;return style(...args)};
+      window.restoreLayoutReads=()=>{document.querySelector=query;document.querySelectorAll=queryAll;window.getComputedStyle=style;};
+    })()`);
+    await wait(250);
+    const reads=await run('window.restoreLayoutReads();window.layoutReads');
+    assert.deepEqual(reads,{queries:0,styles:0},'idle browser leaves no repeated overlay/style scans');
+  };
+  await assertIdleLayout();
+
+  // Position-only CSS motion does not fire ResizeObserver on the viewport.
+  // Follow its real animation frames, then release the frame loop again.
+  await run(`(() => {const parent=document.querySelector('[data-section=host-browser-root]').parentElement;parent.id='moving-browser-fixture';parent.style.transition='transform 300ms linear';parent.style.transform='translateX(32px)';})()`);
+  const positions=[];
+  for(let index=0;index<15;index++){await wait(25);positions.push(root.getBounds().x);}
+  assert.ok(new Set(positions).size>=4,'the native browser follows intermediate transform positions');
+  const expectedX=await run('Math.round(document.querySelector("[data-section=host-browser-panel]").getBoundingClientRect().x)');
+  assert.equal(root.getBounds().x,expectedX,'native browser reaches the final CSS position');
+  await assertIdleLayout();
+  await run('document.getElementById("moving-browser-fixture").style.transform="none"');await wait(350);
+
+  // Exercise continuous pointer-driven size updates through the same hook and
+  // native view. No application session or real SSH host is involved.
+  await run(`(() => {
+    const handle=document.createElement('div');handle.id='browser-drag-fixture';handle.style.cssText='position:fixed;left:2px;top:100px;width:8px;height:200px;z-index:99999';
+    const parent=document.getElementById('moving-browser-fixture');
+    handle.onmousedown=()=>{const move=event=>{parent.style.width=Math.max(300,event.clientX-parent.getBoundingClientRect().x)+'px'};const up=()=>{window.removeEventListener('mousemove',move);window.removeEventListener('mouseup',up)};window.addEventListener('mousemove',move);window.addEventListener('mouseup',up)};
+    document.body.append(handle);
+  })()`);
+  owner.webContents.sendInputEvent({type:'mouseDown',button:'left',clickCount:1,x:6,y:150});
+  for(const x of [850,750,650,550]){owner.webContents.sendInputEvent({type:'mouseMove',x,y:150});await wait(30);}
+  owner.webContents.sendInputEvent({type:'mouseUp',button:'left',clickCount:1,x:550,y:150});await wait(80);
+  const expectedWidth=await run('Math.round(document.querySelector("[data-section=host-browser-panel]").getBoundingClientRect().width)');
+  assert.equal(root.getBounds().width,expectedWidth,'drag-driven viewport width reaches the native browser');
+  assert.ok(expectedWidth<600,'the pointer drag actually resized the fixture');
+  await run('document.getElementById("moving-browser-fixture").style.width="";document.getElementById("browser-drag-fixture").remove()');await wait(100);
+
+  await run('document.documentElement.style.colorScheme="light";document.documentElement.style.setProperty("--background","40 70% 90%")');
+  await until(()=>manager.getPanelState(event,browserId).theme,'light','theme reaches native browser without a frame poll');
+  await run('document.documentElement.style.colorScheme="dark";document.documentElement.style.setProperty("--background","210 25% 18%")');
+  await until(()=>manager.getPanelState(event,browserId).theme,'dark','theme restores');
+  await run(`document.body.insertAdjacentHTML('beforeend','<div id="modal-layout-fixture" role="dialog" aria-modal="true" style="position:fixed;left:0;top:0;width:1px;height:1px"></div>')`);
+  await until(()=>owner.contentView.children.includes(root),false,'modal beside the viewport still covers native content');
+  await run('document.getElementById("modal-layout-fixture").remove()');
+  await until(()=>owner.contentView.children.includes(root),true,'closing modal restores native content');
+  await run(`document.body.insertAdjacentHTML('beforeend','<div id="lock-layout-fixture" data-app-lock-overlay></div>')`);
+  await until(()=>owner.contentView.children.includes(root),false,'app lock hides native content');
+  await run('document.getElementById("lock-layout-fixture").remove()');
+  await until(()=>owner.contentView.children.includes(root),true,'unlock restores native content');
+  assert.equal(await page.executeJavaScript("document.getElementById('draft').value"),'Unsaved browser input');
+
   for (let index = 0; index < 2; index++) {
     app.focus({ steal: true });
     owner.focus(); owner.webContents.focus();
@@ -110,7 +182,7 @@ async function main() {
     assert.equal(owner.contentView.children.includes(root), false, 'the split menu is above the native content');
     await click(`#choice-${index}-0`);
     await until(() => run(`document.getElementById('choice-${index}-0').dataset.chosen`), 'true', 'split menu choices are clickable');
-    owner.webContents.sendInputEvent({ type: 'keyDown', keyCode: 'Escape' });
+    await pressEscape();
     owner.webContents.sendInputEvent({ type: 'mouseMove', x: 980, y: 740 });
     await until(() => owner.contentView.children.includes(root), true, 'closing menu restores live content');
     assert.equal(await page.executeJavaScript("document.getElementById('draft').value"), 'Unsaved browser input');
@@ -204,7 +276,7 @@ async function main() {
   await until(() => owner.contentView.children.includes(root), true, 'bookmark navigation attaches the website again');
   await click('[aria-label="下载"]');
   await until(() => run('document.body.textContent.includes("暂无下载")'), true, 'downloads use the app popover');
-  owner.webContents.sendInputEvent({ type: 'keyDown', keyCode: 'Escape' });
+  await pressEscape();
   fs.writeFileSync(path.join(downloadsPath, 'report.txt'), 'Keep the existing file');
   const activePage = root.children[0].webContents;
   await activePage.executeJavaScript("document.getElementById('download').click()");
@@ -218,15 +290,15 @@ async function main() {
   await until(() => fs.existsSync(savedCopy), true, 'Save as writes a separate copy');
   assert.equal(fs.readFileSync(savedCopy, 'utf8'), 'Netcatty automatic download\n');
   assert.equal(fs.existsSync(path.join(downloadsPath, 'report (1).txt')), true, 'Save as retains the original downloaded file');
-  owner.webContents.sendInputEvent({ type: 'keyDown', keyCode: 'Escape' });
+  await pressEscape();
   await click('[title="在文件夹中显示"]');
   assert.deepEqual(shellActions.at(-1), ['reveal', path.join(downloadsPath, 'report (1).txt')]);
   await click('[aria-label="打开下载文件夹"]');
   assert.deepEqual(shellActions.at(-1), ['open', downloadsPath]);
-  owner.webContents.sendInputEvent({ type: 'keyDown', keyCode: 'Escape' });
+  await pressEscape();
   await activePage.executeJavaScript("document.getElementById('download').click()");
   await until(() => run('document.body.textContent.includes("report (2).txt") && document.querySelectorAll("[data-download-id]").length === 2'), true, 'a second download also gets a new name and reopens the list');
-  owner.webContents.sendInputEvent({ type: 'keyDown', keyCode: 'Escape' });
+  await pressEscape();
   activePage.downloadURL(`${url}slow.bin`);
   await until(() => run('!!document.querySelector("[aria-label=取消下载]") && document.body.textContent.includes("正在下载")'), true, 'progress is visible while the server is still sending the file');
   await until(() => !owner.contentView.children.includes(root), true, 'the progress popover has acquired the webpage surface');
@@ -237,7 +309,7 @@ async function main() {
   await click('[aria-label="下载"]');
   await click('[aria-label="取消下载"]');
   await until(() => run('document.body.textContent.includes("已取消")'), true, 'download can be cancelled from the list');
-  owner.webContents.sendInputEvent({ type: 'keyDown', keyCode: 'Escape' });
+  await pressEscape();
   await activePage.executeJavaScript("(() => { const a=document.createElement('a');a.href='/inline.pdf';document.body.append(a);a.click();a.remove(); })()");
   await until(() => run('document.body.textContent.includes("慢速报告.pdf") && !!document.querySelector("[aria-label=取消下载]") && document.body.textContent.includes("正在下载")'), true, 'inline PDF navigation opens progress before the response finishes');
   assert.equal(pendingPdf.writableEnded, false, 'the server has not sent the rest of the PDF');
@@ -246,7 +318,7 @@ async function main() {
   await capture(pdfProgressScreenshot);
   await click('[aria-label="取消下载"]');
   await until(() => pendingPdf.destroyed, true, 'cancelling an inline PDF stops the network transfer');
-  owner.webContents.sendInputEvent({ type: 'keyDown', keyCode: 'Escape' });
+  await pressEscape();
   pendingPdf = undefined;
   await input('[aria-label="输入网址"]', `${url}inline.pdf`);
   await run('document.querySelector("[aria-label=输入网址]").form.requestSubmit()');
@@ -258,11 +330,19 @@ async function main() {
   assert.equal(await run('document.body.textContent.includes("ERR_FAILED")'), false, 'address-bar downloads do not show a false page error');
   const downloadScreenshot=path.join(userData,'automatic-downloads.png');
   await capture(downloadScreenshot);
-  owner.webContents.sendInputEvent({ type: 'keyDown', keyCode: 'Escape' });
+  // Close the list through its own trigger before testing independent
+  // navigation focus. A prior Escape may leave the baseline list open.
+  await click('[aria-label="下载"]');
+  await until(() => run('!!document.querySelector("[data-radix-popper-content-wrapper] > [role=dialog]")'), false, 'download list is closed before starting navigation');
   await input('[aria-label="输入网址"]', `${url}slow-page`);
   await run('document.querySelector("[aria-label=输入网址]").form.requestSubmit()');
   await until(() => !!pendingNavigation, true, 'slow navigation is waiting for its response to finish');
-  await click('[aria-label="新标签页"]');
+  assert.equal(activePage.isLoading(), true, 'the response remains unfinished while switching tabs');
+  // Exercise the native page shortcut while its response remains unfinished.
+  // The new-tab button is covered above with the same real mouse input helper.
+  activePage.focus();
+  activePage.sendInputEvent({ type: 'keyDown', keyCode: 'T', modifiers: [process.platform === 'darwin' ? 'meta' : 'control'] });
+  activePage.sendInputEvent({ type: 'keyUp', keyCode: 'T', modifiers: [process.platform === 'darwin' ? 'meta' : 'control'] });
   await until(() => run('document.activeElement.getAttribute("aria-label")'), '输入网址', 'new tab receives input focus while the previous page is loading');
   await input('[aria-label="输入网址"]', 'keep my address draft');
   pendingNavigation.end();
@@ -289,7 +369,7 @@ async function main() {
   const screenshot = path.join(userData, 'unified-browser.png');
   fs.writeFileSync(screenshot, (await owner.webContents.capturePage()).toPNG());
   assert.deepEqual(errors, [], 'no renderer errors');
-  console.log(JSON.stringify({ ok: true, rendererChrome: true, hoverKeepsPageLive: true, splitMenusClickable: true, tabs: true, addressAndHistory: true, shortcuts: true, bookmarks: true, iconUpload: true, imageResize: true, imageReplaceAndRemove: true, editPersistence: true, downloads: true, automaticDownloads: true, duplicateNames: true, saveAs: true, downloadProgressAndCancel: true, inlinePdfProgressAndCancel: true, hiddenRestore: true, narrowLayout: true, locales: 5, screenshot, editorScreenshot, editorTextScreenshot, downloadScreenshot, pdfProgressScreenshot }));
+  console.log(JSON.stringify({ ok: true, rendererChrome: true, idleLayout: true, animatedLayout: true, dragLayout: true, themeLayout: true, modalAndLockLayout: true, hoverKeepsPageLive: true, splitMenusClickable: true, tabs: true, addressAndHistory: true, shortcuts: true, bookmarks: true, iconUpload: true, imageResize: true, imageReplaceAndRemove: true, editPersistence: true, downloads: true, automaticDownloads: true, duplicateNames: true, saveAs: true, downloadProgressAndCancel: true, inlinePdfProgressAndCancel: true, hiddenRestore: true, narrowLayout: true, locales: 5, screenshot, editorScreenshot, editorTextScreenshot, downloadScreenshot, pdfProgressScreenshot }));
 }
 app.whenReady().then(main).catch(async (error) => { console.error(error); if (owner && !owner.isDestroyed()) { const screenshot=path.join(userData,'failure.png'); fs.writeFileSync(screenshot,(await owner.webContents.capturePage()).toPNG()); console.error(screenshot); } process.exitCode = 1; }).finally(async () => {
   clearTimeout(watchdog);