refactor(inset): the bottom-inset arithmetic becomes testable, and is tested

The measurement lived inside the view, where the only way to check it was to
run Obsidian on a phone. It moves to a pure `insetFor(leaf, bars, visible)`
against the numbers a phone reports - including the case the events hid: while
the keyboard is up the navbar is behind it, so the deeper of the two is the
inset and adding them would push the composer twice as far as it must go.

src/inset.ts

@@ -0,0 +1,47 @@
+/**
+ * How much of a leaf's bottom is covered by something the operator cannot
+ * move: Obsidian's desktop status bar, a phone's navbar (which paints over a
+ * leaf rather than shortening it), and the software keyboard, which shrinks
+ * the visual viewport while the layout keeps its full height.
+ *
+ * Pure on purpose - the view feeds it live rectangles, the tests feed it the
+ * numbers a phone actually reports.
+ */
+
+export interface Rect {
+  bottom: number;
+  height: number;
+  left: number;
+  right: number;
+  top: number;
+}
+
+export interface Visible {
+  /** `visualViewport.height`: what is left once the keyboard is up. */
+  height: number;
+  /** `visualViewport.offsetTop`: where the visible area starts. */
+  offsetTop: number;
+}
+
+export function insetFor(
+  leaf: Rect,
+  bars: Rect[],
+  visible: Visible | null
+): number {
+  if (leaf.height <= 0) {
+    return 0;
+  }
+  let overlap = 0;
+  for (const bar of bars) {
+    // A bar that does not sit over this leaf horizontally covers nothing of
+    // it - the desktop status bar next to a left-hand sidedock, say.
+    if (bar.height > 0 && bar.left < leaf.right && bar.right > leaf.left) {
+      overlap = Math.max(overlap, leaf.bottom - bar.top);
+    }
+  }
+  if (visible) {
+    const floor = visible.offsetTop + visible.height;
+    overlap = Math.max(overlap, leaf.bottom - floor);
+  }
+  return Math.max(0, Math.round(overlap));
+}

src/view.ts

@@ -1,6 +1,8 @@
 import type { ViewStateResult, WorkspaceLeaf } from "obsidian";
 import { ItemView, TFile } from "obsidian";
 import { mount, unmount } from "svelte";
+import type { Rect } from "./inset";
+import { insetFor } from "./inset";
 import type BeaverPlugin from "./main";
 import { PanelState } from "./state.svelte";
 import App from "./ui/app.svelte";
@@ -11,8 +13,9 @@ export const VIEW_TYPE_PANEL = "beaver-panel";
 // sits under every view, including the one filling the screen.
 const BOTTOM_BARS = [".status-bar", ".mobile-navbar", ".mobile-toolbar"];
 
-// iOS animates the keyboard in; the viewport is only honest once it is done.
+// The keyboard and the navbar both animate. Rather than guess how long that
-const KEYBOARD_SETTLE_MS = 350;
+// takes, the inset is re-measured every frame until the reading holds still.
+const STEADY_FRAMES = 4;
 
 interface SavedState {
   follow?: unknown;
@@ -26,6 +29,7 @@ export class PanelView extends ItemView {
   readonly state = new PanelState();
   private readonly plugin: BeaverPlugin;
   private root: Record<string, unknown> | null = null;
+  private settling: number | null = null;
 
   constructor(leaf: WorkspaceLeaf, plugin: BeaverPlugin) {
     super(leaf);
@@ -82,15 +86,15 @@ export class PanelView extends ItemView {
         }
       })
     );
-    this.registerEvent(this.app.workspace.on("resize", () => this.inset()));
+    this.registerEvent(this.app.workspace.on("resize", () => this.settle()));
     this.registerEvent(
-      this.app.workspace.on("layout-change", () => this.inset())
+      this.app.workspace.on("layout-change", () => this.settle())
     );
     // The keyboard resizes the visual viewport only: no workspace event
     // fires, so the composer would stay behind it without these two.
     const vv = window.visualViewport;
     if (vv) {
-      const onViewport = () => this.inset();
+      const onViewport = () => this.settle();
       vv.addEventListener("resize", onViewport);
       vv.addEventListener("scroll", onViewport);
       this.register(() => {
@@ -98,49 +102,72 @@ export class PanelView extends ItemView {
         vv.removeEventListener("scroll", onViewport);
       });
     }
-    // Focusing the composer opens the keyboard a beat before the viewport
+    // Focus opens the keyboard, blur closes it; both animate, and on the way
-    // settles; re-measure once it has.
+    // out the navbar comes back, so the leaf has to be re-measured after.
-    this.registerDomEvent(this.contentEl, "focusin", () => {
+    this.registerDomEvent(this.contentEl, "focusin", () => this.settle());
-      window.setTimeout(() => this.inset(), KEYBOARD_SETTLE_MS);
+    this.registerDomEvent(this.contentEl, "focusout", () => this.settle());
-    });
     this.follow(this.app.workspace.getActiveFile());
     this.plugin.views.add(this);
     this.mountApp();
-    requestAnimationFrame(() => this.inset());
+    this.settle();
     return Promise.resolve();
   }
 
-  // Whatever floats over the bottom of this leaf, measured rather than
+  /**
-  // guessed: the desktop status bar, the phone's navbar (which the workspace
+   * Re-measure until the viewport stops moving. The keyboard animates both
-  // does not subtract from a leaf's height), and the software keyboard, which
+   * ways and Obsidian hides its navbar while it is up, so a fixed delay lands
-  // shrinks the visual viewport without resizing the layout at all.
+   * mid-animation; a frame loop that stops once two readings agree does not
-  private inset(): void {
+   * care how long the animation takes, or whether any event fires at all -
-    const box = this.contentEl.getBoundingClientRect();
+   * which is the case in a sidedock drawer.
-    if (box.height <= 0) {
+   */
+  private settle(): void {
+    if (this.settling !== null) {
       return;
     }
-    let overlap = 0;
+    let last = Number.NaN;
-    for (const bar of BOTTOM_BARS) {
+    let steady = 0;
-      const node = document.querySelector<HTMLElement>(bar);
+    const tick = () => {
-      if (!node || node.offsetParent === null) {
+      const floor = this.inset();
-        continue;
+      steady = floor === last ? steady + 1 : 0;
+      last = floor;
+      if (steady >= STEADY_FRAMES) {
+        this.settling = null;
+        return;
       }
-      const b = node.getBoundingClientRect();
+      this.settling = requestAnimationFrame(tick);
-      if (b.height > 0 && b.left < box.right && b.right > box.left) {
+    };
-        overlap = Math.max(overlap, box.bottom - b.top);
+    this.settling = requestAnimationFrame(tick);
+    this.register(() => {
+      if (this.settling !== null) {
+        cancelAnimationFrame(this.settling);
+        this.settling = null;
+      }
+    });
+  }
+
+  // Whatever floats over the bottom of this leaf, measured rather than
+  // guessed. Returns the inset it wrote, so the settle loop can tell when the
+  // reading stops changing; the arithmetic itself lives in ``inset.ts``.
+  private inset(): number {
+    const box = this.contentEl.getBoundingClientRect();
+    if (box.height <= 0) {
+      return Number.NaN;
+    }
+    const bars: Rect[] = [];
+    for (const selector of BOTTOM_BARS) {
+      const node = document.querySelector<HTMLElement>(selector);
+      if (node && node.offsetParent !== null) {
+        bars.push(node.getBoundingClientRect());
       }
     }
     const vv = window.visualViewport;
-    if (vv) {
+    const inset = insetFor(
-      // The keyboard eats the bottom of the window; anything of this leaf
+      box,
-      // below that line is unreachable until it goes away.
+      bars,
-      const floor = vv.offsetTop + vv.height;
+      vv ? { height: vv.height, offsetTop: vv.offsetTop } : null
-      overlap = Math.max(overlap, box.bottom - floor);
-    }
-    this.contentEl.style.setProperty(
-      "--beaver-inset-bottom",
-      `${Math.max(0, Math.round(overlap))}px`
     );
+    this.contentEl.style.setProperty("--beaver-inset-bottom", `${inset}px`);
+    return inset;
   }
 
   async onClose(): Promise<void> {

t/cdp-eval.ts

@@ -0,0 +1,35 @@
+// Evaluate an expression inside a running Obsidian started with
+// --remote-debugging-port. Usage: bun t/cdp-eval.ts <port> "<js expression>"
+const [port, expression] = process.argv.slice(2);
+const targets = (await (
+  await fetch(`http://localhost:${port}/json`)
+).json()) as {
+  type: string;
+  title: string;
+  webSocketDebuggerUrl: string;
+}[];
+const page = targets.find((t) => t.type === "page");
+if (!page) {
+  throw new Error("no page target");
+}
+const ws = new WebSocket(page.webSocketDebuggerUrl);
+await new Promise((resolve) => ws.addEventListener("open", resolve));
+const reply = new Promise<string>((resolve) => {
+  ws.addEventListener("message", (event) => {
+    const data = JSON.parse(String(event.data));
+    if (data.id === 1) {
+      resolve(
+        JSON.stringify(data.result?.result?.value ?? data.result ?? data)
+      );
+    }
+  });
+});
+ws.send(
+  JSON.stringify({
+    id: 1,
+    method: "Runtime.evaluate",
+    params: { awaitPromise: true, expression, returnByValue: true },
+  })
+);
+console.log(await reply);
+ws.close();

tests/inset.test.ts

@@ -0,0 +1,67 @@
+import { describe, expect, it } from "vitest";
+import type { Rect } from "../src/inset";
+import { insetFor } from "../src/inset";
+
+const rect = (over: Partial<Rect> = {}): Rect => ({
+  bottom: 780,
+  height: 780,
+  left: 0,
+  right: 390,
+  top: 0,
+  ...over,
+});
+
+// A phone: 780 tall, a 56px navbar over the bottom, 340px of keyboard.
+const NAVBAR = rect({ bottom: 780, height: 56, top: 724 });
+
+describe("insetFor", () => {
+  it("clears nothing when the leaf stands alone", () => {
+    expect(insetFor(rect(), [], null)).toBe(0);
+  });
+
+  it("clears the navbar that paints over the leaf", () => {
+    expect(insetFor(rect(), [NAVBAR], null)).toBe(56);
+  });
+
+  it("clears the keyboard, which shortens no layout", () => {
+    expect(insetFor(rect(), [], { height: 440, offsetTop: 0 })).toBe(340);
+  });
+
+  it("takes the deeper of the two rather than their sum", () => {
+    // While the keyboard is up the navbar is behind it: adding them would
+    // push the composer twice as far as it has to go.
+    expect(insetFor(rect(), [NAVBAR], { height: 440, offsetTop: 0 })).toBe(340);
+  });
+
+  it("comes back to the navbar once the keyboard goes", () => {
+    expect(insetFor(rect(), [NAVBAR], { height: 780, offsetTop: 0 })).toBe(56);
+  });
+
+  it("ignores a bar that sits beside the leaf, not over it", () => {
+    // The desktop status bar floats bottom-right; a left-hand sidedock never
+    // reaches it.
+    const sidedock = rect({ right: 300 });
+    const statusBar = rect({
+      bottom: 780,
+      height: 20,
+      left: 700,
+      right: 980,
+      top: 760,
+    });
+    expect(insetFor(sidedock, [statusBar], null)).toBe(0);
+  });
+
+  it("measures from where the visible area starts, not from zero", () => {
+    // iOS scrolls the page up under the keyboard instead of resizing it.
+    expect(insetFor(rect(), [], { height: 440, offsetTop: 100 })).toBe(240);
+  });
+
+  it("says nothing about a leaf with no height yet", () => {
+    expect(insetFor(rect({ bottom: 0, height: 0 }), [NAVBAR], null)).toBe(0);
+  });
+
+  it("never returns a negative inset", () => {
+    const short = rect({ bottom: 300, height: 300 });
+    expect(insetFor(short, [], { height: 780, offsetTop: 0 })).toBe(0);
+  });
+});