fix(vom): oopif fix

apps/extension/src/tools/__tests__/frame-geometry.test.ts

@@ -172,6 +172,58 @@ describe("frame geometry projection", () => {
     });
   });
 
+  it("reuses one frame graph while scrolling and projecting live geometry", async () => {
+    const getFrameGraph = vi.fn(async () => ({
+      rootFrameId: "main",
+      frames: [
+        { frameId: "main", target: { tabId: 4 } },
+        {
+          frameId: "child",
+          parentFrameId: "main",
+          ownerBackendNodeId: 10,
+          target: { tabId: 4, sessionId: "child-session" },
+        },
+      ],
+    }));
+    const cdp: CdpRunner = {
+      send: vi.fn(async (_tabId, method) => {
+        if (method === "DOM.scrollIntoViewIfNeeded") return {};
+        if (method === "Page.getLayoutMetrics") {
+          return { cssLayoutViewport: { clientWidth: 800, clientHeight: 600 } };
+        }
+        if (method === "DOM.getBoxModel") {
+          return { model: { content: [100, 100, 300, 100, 300, 200, 100, 200] } };
+        }
+        throw new Error(`unexpected root command ${method}`);
+      }) as CdpRunner["send"],
+      sendToTarget: vi.fn(async (_target, method) => {
+        if (method === "DOM.scrollIntoViewIfNeeded") return {};
+        if (method === "Page.getLayoutMetrics") {
+          return { cssLayoutViewport: { clientWidth: 200, clientHeight: 100 } };
+        }
+        if (method === "DOM.getContentQuads") {
+          return { quads: [[0, 0, 20, 0, 20, 20, 0, 20]] };
+        }
+        throw new Error(`unexpected child command ${method}`);
+      }) as CdpRunner["sendToTarget"],
+      getFrameGraph,
+    };
+
+    await expect(
+      resolveNodeGeometry(
+        cdp,
+        4,
+        {
+          target: { tabId: 4, sessionId: "child-session" },
+          frameId: "child",
+          backendNodeId: 101,
+        },
+        { scrollIntoView: true },
+      ),
+    ).resolves.not.toMatchObject({ code: expect.any(String) });
+    expect(getFrameGraph).toHaveBeenCalledOnce();
+  });
+
   it("clips live geometry to same-target iframe ancestors", async () => {
     const cdp: CdpRunner = {
       send: vi.fn(async (_tabId, method) => {

apps/extension/src/tools/frame-geometry.ts

@@ -188,6 +188,24 @@ async function scrollFrameOwners(
   return null;
 }
 
+async function scrollElementWithFrameGraph(
+  cdp: CdpRunner,
+  tabId: number,
+  target: CdpTarget,
+  backendNodeId: number,
+  frameId: string | undefined,
+  graph: CdpFrameGraph | null,
+): Promise<RpcError | null> {
+  if (frameId) {
+    if (!graph) return geometryError(`could not resolve frame graph for ${frameId}`);
+    const error = await scrollFrameOwners(cdp, tabId, graph, frameId);
+    if (error) return error;
+  } else if (target.sessionId) {
+    return geometryError("an OOPIF node address requires frameId");
+  }
+  return scrollNodeIntoView(cdpRunnerForTarget(cdp, target), tabId, backendNodeId);
+}
+
 export async function scrollElementAndFramesIntoView(
   cdp: CdpRunner,
   tabId: number,
@@ -195,18 +213,8 @@ export async function scrollElementAndFramesIntoView(
   backendNodeId: number,
   frameId?: string,
 ): Promise<RpcError | null> {
-  if (frameId) {
-    const graph = await loadFrameGraph(cdp, tabId);
-    if (graph) {
-      const error = await scrollFrameOwners(cdp, tabId, graph, frameId);
-      if (error) return error;
-    } else {
-      return geometryError(`could not resolve frame graph for ${frameId}`);
-    }
-  } else if (target.sessionId) {
-    return geometryError("an OOPIF node address requires frameId");
-  }
-  return scrollNodeIntoView(cdpRunnerForTarget(cdp, target), tabId, backendNodeId);
+  const graph = frameId ? await loadFrameGraph(cdp, tabId) : null;
+  return scrollElementWithFrameGraph(cdp, tabId, target, backendNodeId, frameId, graph);
 }
 
 function largestRegion(regions: Region): Polygon | null {
@@ -226,13 +234,22 @@ export async function resolveNodeGeometry(
   options: { scrollIntoView?: boolean } = {},
 ): Promise<ResolvedNodeGeometry | RpcError> {
   try {
+    if (address.target.sessionId && !address.frameId) {
+      return geometryError("an OOPIF node address requires frameId");
+    }
+    const graph = address.frameId ? await loadFrameGraph(cdp, tabId) : null;
+    if (address.frameId && !graph) {
+      return geometryError(`could not resolve frame graph for ${address.frameId}`);
+    }
+
     if (options.scrollIntoView) {
-      const scrollError = await scrollElementAndFramesIntoView(
+      const scrollError = await scrollElementWithFrameGraph(
         cdp,
         tabId,
         address.target,
         address.backendNodeId,
         address.frameId,
+        graph,
       );
       if (scrollError) return scrollError;
     }
@@ -244,14 +261,6 @@ export async function resolveNodeGeometry(
     );
     if (isRpcError(localRegion)) return localRegion;
 
-    const graph = address.frameId ? await loadFrameGraph(cdp, tabId) : null;
-    if (address.target.sessionId && !address.frameId) {
-      return geometryError("an OOPIF node address requires frameId");
-    }
-    if (address.frameId && !graph) {
-      return geometryError(`could not resolve frame graph for ${address.frameId}`);
-    }
-
     let topVisibleRegions: Region;
     if (address.frameId && graph) {
       const projection = await resolveFrameProjection(cdp, graph, address.frameId);