From bca4edff4dbdc565741ef797c901bb77c2ae2d93 Mon Sep 17 00:00:00 2001
From: Hiroshi Ogawa <4232207+hi-ogawa@users.noreply.github.com>
Date: Mon, 5 Oct 2026 19:03:54 +0900
Subject: [PATCH] feat(ui): add fit and zoom controls to trace viewer

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../ui/client/components/trace/TraceView.vue  | 100 ++++++++++++++++--
 packages/ui/client/composables/trace-view.ts  |   6 +-
 test/ui/test/trace.spec.ts                    |  48 +++++++++
 3 files changed, 144 insertions(+), 10 deletions(-)

diff --git a/packages/ui/client/components/trace/TraceView.vue b/packages/ui/client/components/trace/TraceView.vue
index 059ce7b27..3c40c8d67 100644
--- a/packages/ui/client/components/trace/TraceView.vue
+++ b/packages/ui/client/components/trace/TraceView.vue
@@ -5,15 +5,18 @@ import type {
   NormalizedBrowserTraceEntry,
   TraceSelection,
 } from '~/composables/trace-view'
+import { useElementSize } from '@vueuse/core'
 import { createCache, createMirror, rebuild } from 'rrweb-snapshot'
 import { Pane, Splitpanes } from 'splitpanes'
 import { computed, ref, watch } from 'vue'
+import IconButton from '~/components/IconButton.vue'
 import { openLocation } from '~/composables/location'
 import { traceViewSplitSizes } from '~/composables/navigation'
 import {
   getTraceEntryClass,
   selectActiveTraceStep,
   showTraceSelectorHighlight,
+  traceZoom,
 } from '~/composables/trace-view'
 
 const props = defineProps<{
@@ -31,6 +34,47 @@ const iframeSandbox = computed(() => {
   return props.trace.recordCanvas ? 'allow-same-origin allow-scripts' : 'allow-same-origin'
 })
 
+const ZOOM_LEVELS = [0.25, 0.5, 0.75, 1, 1.25, 1.5, 2]
+
+const replayContainer = ref<HTMLElement>()
+const replayContainerSize = useElementSize(replayContainer)
+const viewport = computed(() => selectedStep.value?.snapshot.viewport)
+const fitScale = computed(() => {
+  const { width, height } = replayContainerSize
+  if (!viewport.value || !width.value || !height.value) {
+    return 1
+  }
+  return Math.min(width.value / viewport.value.width, height.value / viewport.value.height, 1)
+})
+const scale = computed(() => traceZoom.value ?? fitScale.value)
+const nextZoomIn = computed(() => ZOOM_LEVELS.find((level) => level > scale.value + 1e-3))
+const nextZoomOut = computed(() => ZOOM_LEVELS.findLast((level) => level < scale.value - 1e-3))
+const zoomLabel = computed(() =>
+  viewport.value
+    ? `${viewport.value.width}x${viewport.value.height} · ${Math.round(scale.value * 100)}%`
+    : '',
+)
+const scaledViewportStyle = computed(() =>
+  viewport.value
+    ? {
+        width: `${Math.floor(viewport.value.width * scale.value)}px`,
+        height: `${Math.floor(viewport.value.height * scale.value)}px`,
+      }
+    : undefined,
+)
+
+function zoomIn() {
+  traceZoom.value = nextZoomIn.value ?? traceZoom.value
+}
+
+function zoomOut() {
+  traceZoom.value = nextZoomOut.value ?? traceZoom.value
+}
+
+function fitToPane() {
+  traceZoom.value = null
+}
+
 function onSelectStep(index: number) {
   selectActiveTraceStep(index)
   const step = entries.value[index]
@@ -252,15 +296,53 @@ function onSplitpanesResized({ panes }: SplitpanesResizedPayload) {
       </div>
     </Pane>
     <Pane :size="traceViewSplitSizes[1]" min-size="20">
-      <div class="h-full min-h-0 flex flex-col overflow-auto">
-        <iframe
-          v-if="selectedStep"
-          ref="iframeEl"
-          :key="iframeSandbox"
-          :sandbox="iframeSandbox"
-          style="background: white; border: none; color-scheme: normal; flex: none"
-        />
-        <div v-else class="text-sm opacity-50 p-4">No trace step found</div>
+      <div class="h-full min-h-0 flex flex-col">
+        <div
+          v-if="viewport"
+          class="h-8 flex flex-none items-center justify-end gap-1 border-b border-base px-2 text-xs"
+        >
+          <span data-testid="trace-zoom-label" class="mr-1 tabular-nums opacity-70">{{
+            zoomLabel
+          }}</span>
+          <IconButton
+            v-tooltip.bottom="'Zoom Out'"
+            title="Zoom Out"
+            icon="i-carbon:zoom-out"
+            :disabled="nextZoomOut == null"
+            @click="zoomOut()"
+          />
+          <IconButton
+            v-tooltip.bottom="'Zoom In'"
+            title="Zoom In"
+            icon="i-carbon:zoom-in"
+            :disabled="nextZoomIn == null"
+            @click="zoomIn()"
+          />
+          <IconButton
+            v-tooltip.bottom="'Fit to Pane'"
+            title="Fit to Pane"
+            icon="i-carbon:fit-to-screen"
+            :active="traceZoom == null"
+            :aria-pressed="traceZoom == null"
+            @click="fitToPane()"
+          />
+        </div>
+        <div ref="replayContainer" class="min-h-0 flex flex-1 flex-col overflow-auto">
+          <div
+            v-if="selectedStep"
+            class="mx-auto flex-none overflow-hidden"
+            :style="scaledViewportStyle"
+          >
+            <iframe
+              ref="iframeEl"
+              :key="iframeSandbox"
+              :sandbox="iframeSandbox"
+              style="background: white; border: none; color-scheme: normal; transform-origin: 0 0"
+              :style="{ transform: `scale(${scale})` }"
+            />
+          </div>
+          <div v-else class="text-sm opacity-50 p-4">No trace step found</div>
+        </div>
       </div>
     </Pane>
   </Splitpanes>
diff --git a/packages/ui/client/composables/trace-view.ts b/packages/ui/client/composables/trace-view.ts
index 67ca60094..c83a163bf 100644
--- a/packages/ui/client/composables/trace-view.ts
+++ b/packages/ui/client/composables/trace-view.ts
@@ -1,6 +1,6 @@
 import type { RunnerTestCase, RunnerTestFile, TestArtifact } from 'vitest'
 import type { BrowserTraceData, BrowserTraceEntry } from '../../../browser/src/client/tester/trace'
-import { useLocalStorage } from '@vueuse/core'
+import { StorageSerializers, useLocalStorage } from '@vueuse/core'
 import { computed, ref, watch, watchEffect } from 'vue'
 import { getProjectConfigByName } from '~/utils/task'
 import { browserState, client, config } from './client'
@@ -36,6 +36,10 @@ export const showTraceSelectorHighlight = useLocalStorage(
   true,
 )
 
+export const traceZoom = useLocalStorage<number | null>('vitest-ui_trace-zoom', null, {
+  serializer: StorageSerializers.object,
+})
+
 function getTraceAttemptKey(trace: BrowserTraceData): string {
   return `${trace.repeats}:${trace.retry}`
 }
diff --git a/test/ui/test/trace.spec.ts b/test/ui/test/trace.spec.ts
index e982e5145..98addc26c 100644
--- a/test/ui/test/trace.spec.ts
+++ b/test/ui/test/trace.spec.ts
@@ -80,6 +80,10 @@ test.describe('ui', () => {
   test('persists resized trace panes across reloads', async ({ page }) => {
     await testPersistsResizedTracePanes(page)
   })
+
+  test('zoom', async ({ page }) => {
+    await testZoom(page)
+  })
 })
 
 test.describe('html reporter', () => {
@@ -170,6 +174,10 @@ test.describe('html reporter', () => {
   test('persists resized trace panes across reloads', async ({ page }) => {
     await testPersistsResizedTracePanes(page)
   })
+
+  test('zoom', async ({ page }) => {
+    await testZoom(page)
+  })
 })
 
 async function testBasic(page: Page) {
@@ -264,6 +272,46 @@ async function testBasic(page: Page) {
   await expect(traceFrame.getByRole('button', { name: 'Switch Target' })).toBeVisible()
 }
 
+async function testZoom(page: Page) {
+  await openExplorerItem(page, 'simple')
+
+  const traceView = page.getByTestId('trace-view')
+  const traceFrame = traceView.frameLocator('iframe')
+  const iframe = traceView.locator('iframe')
+  const zoomLabel = traceView.getByTestId('trace-zoom-label')
+  const zoomIn = traceView.getByRole('button', { name: 'Zoom In' })
+  const zoomOut = traceView.getByRole('button', { name: 'Zoom Out' })
+  const fitToPane = traceView.getByRole('button', { name: 'Fit to Pane' })
+  await expect(traceFrame.getByRole('button', { name: 'Simple' })).toBeVisible()
+
+  // fit by default scales down the default tall viewport
+  await expect(fitToPane).toHaveAttribute('aria-pressed', 'true')
+  await expect(zoomLabel).toHaveText(/^414x896 · \d+%$/)
+  const fitLabel = await zoomLabel.textContent()
+  expect(Number(fitLabel.match(/(\d+)%/)![1])).toBeLessThan(100)
+
+  // zoom in to actual size
+  for (let i = 0; i < 10 && (await zoomLabel.textContent()) !== '414x896 · 100%'; i++) {
+    await zoomIn.click()
+  }
+  await expect(zoomLabel).toHaveText('414x896 · 100%')
+  await expect(fitToPane).toHaveAttribute('aria-pressed', 'false')
+  await expect.poll(async () => Math.round((await iframe.boundingBox())!.width)).toBe(414)
+  await expect(traceFrame.getByRole('button', { name: 'Simple' })).toBeVisible()
+
+  // zoom out and persist across reloads
+  await zoomOut.click()
+  await expect(zoomLabel).toHaveText('414x896 · 75%')
+  await page.reload()
+  await expect(zoomLabel).toHaveText('414x896 · 75%')
+  await expect.poll(async () => Math.round((await iframe.boundingBox())!.width)).toBe(311)
+
+  // back to fit
+  await fitToPane.click()
+  await expect(fitToPane).toHaveAttribute('aria-pressed', 'true')
+  await expect(zoomLabel).toHaveText(fitLabel)
+}
+
 async function testViewport(page: Page) {
   await openExplorerItem(page, 'viewport')
 
-- 
2.51.2