| null = null;
constructor(
private from: number,
private to: number,
private duration: number,
private onTick: () => void,
private onComplete: () => void
) {
this.currentValue = from;
}
start(): void {
this.startTime = performance.now();
this.currentValue = this.from;
this.tick();
}
stop(): void {
if (this.timer) {
clearTimeout(this.timer);
this.timer = null;
}
}
private tick = (): void => {
const elapsed = performance.now() - this.startTime;
const t = Math.min(elapsed / this.duration, 1);
const eased = easeInOut(t);
this.currentValue = this.from + (this.to - this.from) * eased;
this.onTick();
if (t < 1) {
this.timer = setTimeout(this.tick, MS_PER_FRAME);
} else {
this.currentValue = this.to;
this.onTick();
this.timer = null;
this.onComplete();
}
};
}
/** Tailwind ease-in-out: cubic-bezier(0.4, 0, 0.2, 1) */
function easeInOut(t: number): number {
// The actual implementation uses a Newton-Raphson cubic-bezier solver
// for exact matching. See sidebar-interpolation.ts.
// This pseudocode shows the concept; the quadratic approximation below
// does NOT match the Tailwind curve and is kept only for illustration.
return t < 0.5 ? 2 * t * t : 1 - (-2 * t + 2) ** 2 / 2;
}
```
---
## Renderer Changes
### `BrowserContent` (browser-content.tsx)
Remove `useBoundingRect` entirely. Replace with a `useEffect` that sends
layout parameters when they change:
```typescript
function BrowserContent() {
const { mode, recordedSidebarSizeRef, isAnimating } = useBrowserSidebar();
const { topbarHeight, topbarVisible } = useAdaptiveTopbar();
const sidebarVisible = mode.startsWith("attached-");
const sidebarSide = mode.includes("-left") ? "left" : mode.includes("-right") ? "right" : "left";
useEffect(() => {
const params: PageLayoutParams = {
topbarHeight,
topbarVisible,
sidebarWidth: recordedSidebarSizeRef.current,
sidebarSide,
sidebarVisible,
sidebarAnimating: isAnimating,
};
flow.page.setLayoutParams(params);
}, [topbarHeight, topbarVisible, sidebarVisible, sidebarSide, isAnimating,
recordedSidebarSizeRef]);
return (
);
}
```
The `useBoundingRect` hook is no longer imported here. The component becomes a
simple placeholder `` for visual styling only.
### `useBoundingRect` hook
Not deleted. It is still used by:
- Portal components (`portal.tsx`) for overlay positioning
- Omnibox positioning (`address-bar.tsx`)
- macOS traffic light tracking (`macos.tsx`)
- Extension popup anchoring (`browser-action-provider.tsx`)
- Resizable panel pixel calculations (`resizable-extras.tsx`)
These use cases genuinely depend on dynamic DOM position and cannot be
replaced with a declarative model.
---
## Fullscreen Handling
When fullscreen is entered or exited, the renderer sends updated layout params
with `topbarVisible: false` (fullscreen hides the topbar). The main process
also detects fullscreen via the `enter-full-screen` / `leave-full-screen`
events and can immediately recompute bounds using `getContentSize()` with
`topbarVisible = false`, without waiting for the renderer.
The `TabLayoutManager` already has a fullscreen override that uses
`getContentSize()` directly (tab-layout.ts:111-113), so this path is
unaffected.
---
## Validation During Migration
During the transition, keep the old `page:set-bounds` IPC handler and add a
debug assertion that compares the renderer-measured bounds against the
main-process-computed bounds:
```typescript
// Temporary validation (remove after confidence period)
ipcMain.on("page:set-bounds", (event, rendererBounds: PageBounds) => {
const window = getWindow(event.sender);
if (!window) return;
const computed = window.pageBounds;
const dx = Math.abs(computed.x - rendererBounds.x);
const dy = Math.abs(computed.y - rendererBounds.y);
const dw = Math.abs(computed.width - rendererBounds.width);
const dh = Math.abs(computed.height - rendererBounds.height);
if (dx > 2 || dy > 2 || dw > 2 || dh > 2) {
console.warn("[page-bounds] Mismatch!", { computed, rendererBounds });
}
});
```
This lets you verify the declarative model matches reality before removing the
old code path.
---
## Summary of Changes
| Component | Before | After |
| ------------------------------ | ------------------------------------------------------ | ---------------------------------------------------------- |
| `BrowserContent` | `useBoundingRect` + `getBoundingClientRect` rAF loop | `useLayoutEffect` sends `PageLayoutParams` on state change |
| `browser.ts` `setPageBounds` | Stores bounds, caches insets, `_isResizing` debounce | Removed |
| `browser.ts` `setLayoutParams` | N/A | Computes bounds from params + `getContentSize()` |
| `browser.ts` resize handler | Recomputes from cached insets with `_isResizing` guard | Calls `recomputePageBounds()` directly |
| Sidebar tween | Bounds lag behind CSS animation | Main-process 100ms ease-in-out interpolation |
| Floating sidebar | No change needed | No change needed |
| Fullscreen | Clears insets, waits for renderer | Detects via event, recomputes immediately |
| IPC frequency | ~60 calls/sec during any layout change | ~1-5 calls per structural change |
| `useBoundingRect` hook | Used by `BrowserContent` | Removed from `BrowserContent`; kept for portals/omnibox |
### Benefits
- **Zero `getBoundingClientRect` calls** on the critical page bounds path.
- **Zero renderer round-trip latency** for resize or sidebar toggle.
- **Pixel-perfect sidebar tween tracking** via synchronized interpolation.
- **Single source of truth** for page bounds: `recomputePageBounds()` in the
main process.
- **~95% reduction in IPC traffic** for page bounds updates.
- **Simpler code:** no inset cache, no `_isResizing` flag, no debounce timer,
no epsilon comparisons, no settle-frame heuristics.