fix(desktop): activate a browser pane on click, widen icon hit targets

Merged
KI
2mo ago
+693-48

Summary

Clicking inside a browser pane's page content never activated/highlighted the pane — the hoisted <webview> lives outside the pane tree (kept fixed under <body> since #3346 so Electron never reparents/respawns the guest process across tab switches and splits), so the click never reached the pane's mousedown-based activation handler in Pane.tsx. The identical bug was fixed for PagePane's iframe three days earlier (#7257) but never extended to browser panes.

WebContents.on('focus') looked like the fix — Electron's documented signal for focus moving between WebContents in the same window — but doesn't actually fire for a <webview> guest. Confirmed live over CDP: wc.isFocused() stayed false immediately after a click that had already moved the host's document.activeElement onto the webview element.

Replaced it with the same no-preload technique the app's own design-mode feature already uses: inject a script that resolves a Promise on the guest's next mousedown, executeJavaScript awaits it, and the main process re-arms immediately after each resolution. Handles navigation gracefully — a torn-down document just re-arms into whatever's there now instead of giving up for the rest of the pane's life.

Also widened the header icon hit targets: split/close were 18×18px with only a 2px gap between them (tight enough to risk a misclick landing on the wrong icon) across PaneHeaderActions (shared by every pane kind), BrowserPaneToolbar's own icon row, and the overflow menu's zoom controls.

Test plan

  • bun run typecheck clean (apps/desktop, packages/panes)
  • CDP-verified live in the dev app: clicking inside a browser pane's page content flips its active-pane border, confirmed via the actual DOM class (not visual guess), toggled back and forth between panes twice
  • Navigation: the watch loop originally did not survive a real navigation (the awaited executeJavaScript is orphaned, never rejected) — caught by the full-surface sweep, fixed by re-arming on dom-ready with a generation counter; verified the hook is installed in the new document after example.com → example.org
  • URL suggestions were being painted over by the native webview on any loaded page (pre-existing, same class as #7232) — now portalled into the pane overlay layer; sweep asserts the list's bottom row hit-tests to a suggestion, not the webview
  • Nine-surface CDP sweep on the post-navigation document, all passing: overflow menu, find bar, design mode, URL suggestions, session dropdown, connection popover, click-to-activate, narrow header audit @900px, close inactive pane
  • Narrow panes: min-w-[260px] was never generated (packages/panes not in Tailwind @source) — fixed; header is a named @container on the pane root with tiered collapsing; audited 1728→520px and with min-width forced off down to 67px: zero overlaps
  • Manually confirmed in a running dev build by the reporter

Full investigation, root-cause writeup, and filmed CDP evidence: https://app.superset.sh/page/browser-pane-click-regression-fcikbu

Claude-Session: https://claude.ai/code/session_01J4vs5B7c44DH3t7KeFkdHV

Summary by cubic

Fixes browser panes not activating when you click inside the page, makes pane header icons easier to hit without overlapping in narrow panes, moves Open DevTools into the overflow menu, and keeps URL suggestions visible above the page.

  • Clicks inside the <webview> guest never reach the pane's mousedown handler, and Electron's focus signal doesn't fire for <webview> guests, so the main process injects a mousedown-detection script that re-arms after each click and survives navigation.
  • Header icons get wider hit targets; pane headers clip title and extras and hide lower-priority items via container queries so nothing overlaps even when squeezed. The container hangs on the pane root so the header's popovers (URL-bar suggestions) still layer above pane banners.
  • Tailwind now scans packages/panes so the pane's 260px minimum actually generates.
  • URL suggestions were painted over by the hoisted webview; they now portal into the pane's overlay layer above the page.

Summary by CodeRabbit

  • New Features

    • Added an “Open DevTools” option to the browser pane overflow menu.
    • Browser panes now stay synchronized with focus inside embedded web pages.

  • Bug Fixes

    • Improved pane sizing and prevented header content from overflowing narrow panes.
    • Added responsive behavior that hides lower-priority controls when space is limited.
    • Ensured minimum pane widths are applied consistently.

  • Style

    • Updated spacing and padding across pane headers and controls for improved visual consistency.
    • Moved DevTools access from the browser toolbar to the overflow menu.