diff --git a/packages/studio/src/player/components/Timeline.tsx b/packages/studio/src/player/components/Timeline.tsx index 2af548aca4..c50e8d362a 100644 --- a/packages/studio/src/player/components/Timeline.tsx +++ b/packages/studio/src/player/components/Timeline.tsx @@ -448,7 +448,7 @@ export const Timeline = memo(function Timeline({ return (
{ it("reads mounted resources without mutating the timeline", () => { document.body.innerHTML = ` -
@@ -41,7 +41,8 @@ describe("timeline performance diagnostics", () => { }); it("returns the zero baseline after unmount or reset removes the DOM", () => { - document.body.innerHTML = '
'; + document.body.innerHTML = + '
'; expect(readTimelinePerformanceDiagnostics().mountedClipRoots).toBe(1); document.body.replaceChildren(); diff --git a/packages/studio/src/player/lib/timelinePerformanceDiagnostics.ts b/packages/studio/src/player/lib/timelinePerformanceDiagnostics.ts index 2b30e615d4..6747477618 100644 --- a/packages/studio/src/player/lib/timelinePerformanceDiagnostics.ts +++ b/packages/studio/src/player/lib/timelinePerformanceDiagnostics.ts @@ -69,7 +69,7 @@ function sumDataAttribute(root: ParentNode, selector: string, dataKey: string): export function readTimelinePerformanceDiagnostics( root: ParentNode = document, ): Readonly { - const timelineRoots = root.querySelectorAll('[aria-label="Timeline"]'); + const timelineRoots = root.querySelectorAll('[aria-label="Timeline track view"]'); let mountedTimelineDescendants = 0; for (const timelineRoot of timelineRoots) { mountedTimelineDescendants += timelineRoot.querySelectorAll("*").length; diff --git a/packages/studio/tests/e2e/timeline-virtualization.mjs b/packages/studio/tests/e2e/timeline-virtualization.mjs index 89e1ea803f..521da8ffee 100644 --- a/packages/studio/tests/e2e/timeline-virtualization.mjs +++ b/packages/studio/tests/e2e/timeline-virtualization.mjs @@ -103,7 +103,7 @@ async function collectRun(page, injectedLongTaskMs = 0) { } function findTimelineScroller() { - const root = document.querySelector('[aria-label="Timeline"]'); + const root = document.querySelector('[aria-label="Timeline track view"]'); if (!(root instanceof HTMLElement)) throw new Error("Timeline root not mounted"); const scroller = root.querySelector("[data-timeline-scroll-viewport]"); if (!(scroller instanceof HTMLElement)) throw new Error("Timeline scroller not mounted"); @@ -172,7 +172,7 @@ async function assertLongTaskCapture(browser, longTaskLimitMs, scrollSamplesPerR const injectedDurationMs = longTaskLimitMs + 25; try { await page.setContent(` -
+
@@ -334,7 +334,9 @@ try { } await page.evaluate(() => window.__studioTest.resetTimelinePerformanceFixture()); - await page.waitForFunction(() => document.querySelector('[aria-label="Timeline"]') === null); + await page.waitForFunction( + () => document.querySelector('[aria-label="Timeline track view"]') === null, + ); await waitForStudioTestHookSettle(page); await loadFixtureAndWait(page, 1_000, PROFILE); await client.send("HeapProfiler.collectGarbage"); @@ -418,7 +420,7 @@ async function waitForFixtureRender(page, elementCount) { modelCount: window.__playerStore?.getState().elements.length ?? null, renderedCount: document - .querySelector('[aria-label="Timeline"]') + .querySelector('[aria-label="Timeline track view"]') ?.getAttribute("data-timeline-element-count") ?? null, })); if (observed.renderedCount === String(elementCount)) {