From f1679e35f29405c40766a0929aae648ec5c65249 Mon Sep 17 00:00:00 2001
From: Hiroshi Ogawa <4232207+hi-ogawa@users.noreply.github.com>
Date: Tue, 6 Oct 2026 10:24:18 +0900
Subject: [PATCH] refactor(ui): make trace fit a one-time zoom

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../ui/client/components/trace/TraceView.vue  | 31 +++++++------------
 .../client/components/trace/TraceViewPane.vue |  5 ++-
 .../components/trace/TraceZoomControl.vue     | 31 ++++++++++++-------
 packages/ui/client/composables/trace-view.ts  | 14 +++------
 test/ui/test/trace.spec.ts                    |  8 ++---
 5 files changed, 42 insertions(+), 47 deletions(-)

diff --git a/packages/ui/client/components/trace/TraceView.vue b/packages/ui/client/components/trace/TraceView.vue
index b21b80200..f9c95be37 100644
--- a/packages/ui/client/components/trace/TraceView.vue
+++ b/packages/ui/client/components/trace/TraceView.vue
@@ -5,18 +5,17 @@ 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, watchEffect } from 'vue'
+import { computed, ref, watch } from 'vue'
 import { openLocation } from '~/composables/location'
 import { traceViewSplitSizes } from '~/composables/navigation'
 import {
   getTraceEntryClass,
   selectActiveTraceStep,
   showTraceSelectorHighlight,
-  traceFitScale,
-  traceScale,
+  traceReplayElement,
+  traceZoom,
 } from '~/composables/trace-view'
 
 const props = defineProps<{
@@ -34,28 +33,20 @@ const iframeSandbox = computed(() => {
   return props.trace.recordCanvas ? 'allow-same-origin allow-scripts' : 'allow-same-origin'
 })
 
-const replayContainer = ref<HTMLElement>()
-const replayContainerSize = useElementSize(replayContainer)
 const viewport = computed(() => selectedStep.value?.snapshot.viewport)
-watchEffect(() => {
-  const { width, height } = replayContainerSize
-  if (viewport.value && width.value && height.value) {
-    traceFitScale.value = Math.min(
-      width.value / viewport.value.width,
-      height.value / viewport.value.height,
-      1,
-    )
-  }
-})
 const scaledViewportStyle = computed(() =>
   viewport.value
     ? {
-        width: `${Math.floor(viewport.value.width * traceScale.value)}px`,
-        height: `${Math.floor(viewport.value.height * traceScale.value)}px`,
+        width: `${Math.floor(viewport.value.width * traceZoom.value)}px`,
+        height: `${Math.floor(viewport.value.height * traceZoom.value)}px`,
       }
     : undefined,
 )
 
+function setReplayElement(el: unknown) {
+  traceReplayElement.value = el instanceof HTMLElement ? el : undefined
+}
+
 function onSelectStep(index: number) {
   selectActiveTraceStep(index)
   const step = entries.value[index]
@@ -280,7 +271,7 @@ function onSplitpanesResized({ panes }: SplitpanesResizedPayload) {
     </Pane>
     <Pane :size="traceViewSplitSizes[1]" min-size="20">
       <div class="h-full min-h-0 flex flex-col">
-        <div ref="replayContainer" class="min-h-0 flex flex-1 flex-col overflow-auto">
+        <div :ref="setReplayElement" class="min-h-0 flex flex-1 flex-col overflow-auto">
           <div
             v-if="selectedStep"
             class="mx-auto flex-none overflow-hidden"
@@ -291,7 +282,7 @@ function onSplitpanesResized({ panes }: SplitpanesResizedPayload) {
               :key="iframeSandbox"
               :sandbox="iframeSandbox"
               style="background: white; border: none; color-scheme: normal; transform-origin: 0 0"
-              :style="{ transform: `scale(${traceScale})` }"
+              :style="{ transform: `scale(${traceZoom})` }"
             />
           </div>
           <div v-else class="text-sm opacity-50 p-4">No trace step found</div>
diff --git a/packages/ui/client/components/trace/TraceViewPane.vue b/packages/ui/client/components/trace/TraceViewPane.vue
index 414983736..d04284dde 100644
--- a/packages/ui/client/components/trace/TraceViewPane.vue
+++ b/packages/ui/client/components/trace/TraceViewPane.vue
@@ -20,6 +20,9 @@ const props = defineProps<{
 }>()
 
 const trace = computed(() => getSelectedTrace(props.selection))
+const selectedViewport = computed(
+  () => trace.value?.entries[props.selection.selectedStepIndex]?.snapshot.viewport,
+)
 const attemptLabel = computed(() => (trace.value ? getTraceAttemptLabel(trace.value) : ''))
 const traceAttempts = computed(() =>
   [...getTraceAttemptMap(props.selection.test.artifacts)].map(([key, trace]) => ({
@@ -74,7 +77,7 @@ const traceLayoutPageUrl = computed(() => {
       <span v-else-if="attemptLabel" class="text-xs opacity-70">
         {{ attemptLabel }}
       </span>
-      <TraceZoomControl v-if="trace" />
+      <TraceZoomControl v-if="trace" :viewport="selectedViewport" />
       <label class="flex items-center gap-1 text-xs ws-nowrap select-none cursor-pointer">
         <input v-model="showTraceSelectorHighlight" type="checkbox" />
         <span>Show highlight</span>
diff --git a/packages/ui/client/components/trace/TraceZoomControl.vue b/packages/ui/client/components/trace/TraceZoomControl.vue
index b949b17a8..2f37fb619 100644
--- a/packages/ui/client/components/trace/TraceZoomControl.vue
+++ b/packages/ui/client/components/trace/TraceZoomControl.vue
@@ -2,24 +2,35 @@
 import { Dropdown } from 'floating-vue'
 import { computed } from 'vue'
 import IconButton from '~/components/IconButton.vue'
-import { traceScale, traceZoom } from '~/composables/trace-view'
+import { traceReplayElement, traceZoom } from '~/composables/trace-view'
+
+const props = defineProps<{
+  viewport?: { width: number; height: number }
+}>()
 
 const ZOOM_LEVELS = [0.25, 0.5, 0.75, 1, 1.25, 1.5, 2]
 
-const percent = computed(() => `${Math.round(traceScale.value * 100)}%`)
-const nextZoomIn = computed(() => ZOOM_LEVELS.find((level) => level > traceScale.value + 1e-3))
-const nextZoomOut = computed(() => ZOOM_LEVELS.findLast((level) => level < traceScale.value - 1e-3))
+const percent = computed(() => `${Math.round(traceZoom.value * 100)}%`)
+const nextZoomIn = computed(() => ZOOM_LEVELS.find((level) => level > traceZoom.value + 1e-3))
+const nextZoomOut = computed(() => ZOOM_LEVELS.findLast((level) => level < traceZoom.value - 1e-3))
 
 function zoomIn() {
-  traceZoom.value = nextZoomIn.value ?? traceScale.value
+  traceZoom.value = nextZoomIn.value ?? traceZoom.value
 }
 
 function zoomOut() {
-  traceZoom.value = nextZoomOut.value ?? traceScale.value
+  traceZoom.value = nextZoomOut.value ?? traceZoom.value
 }
 
 function fitToPane() {
-  traceZoom.value = 'fit'
+  const el = traceReplayElement.value
+  if (el && props.viewport) {
+    traceZoom.value = Math.min(
+      el.clientWidth / props.viewport.width,
+      el.clientHeight / props.viewport.height,
+      1,
+    )
+  }
 }
 
 function resetZoom() {
@@ -36,7 +47,7 @@ function resetZoom() {
       class="flex items-center gap-1 rounded px-1 text-xs tabular-nums op70 hover:bg-active hover:op100"
     >
       <span class="i-carbon:zoom-in block" />
-      <span>{{ traceZoom === 'fit' ? `Fit ${percent}` : percent }}</span>
+      <span>{{ percent }}</span>
     </button>
     <template #popper>
       <div data-testid="trace-zoom-popover" class="flex items-center gap-2 p-1 text-xs">
@@ -57,9 +68,7 @@ function resetZoom() {
         />
         <button
           type="button"
-          class="rounded border border-base px-2 py-0.5"
-          :class="traceZoom === 'fit' ? 'bg-active' : 'hover:bg-active'"
-          :aria-pressed="traceZoom === 'fit'"
+          class="rounded border border-base px-2 py-0.5 hover:bg-active"
           @click="fitToPane()"
         >
           Fit
diff --git a/packages/ui/client/composables/trace-view.ts b/packages/ui/client/composables/trace-view.ts
index 6ee00fae1..c277e067a 100644
--- a/packages/ui/client/composables/trace-view.ts
+++ b/packages/ui/client/composables/trace-view.ts
@@ -1,7 +1,7 @@
 import type { RunnerTestCase, RunnerTestFile, TestArtifact } from 'vitest'
 import type { BrowserTraceData, BrowserTraceEntry } from '../../../browser/src/client/tester/trace'
-import { StorageSerializers, useLocalStorage } from '@vueuse/core'
-import { computed, ref, watch, watchEffect } from 'vue'
+import { useLocalStorage } from '@vueuse/core'
+import { computed, ref, shallowRef, watch, watchEffect } from 'vue'
 import { getProjectConfigByName } from '~/utils/task'
 import { browserState, client, config } from './client'
 import { detailsPosition } from './navigation'
@@ -36,15 +36,9 @@ export const showTraceSelectorHighlight = useLocalStorage(
   true,
 )
 
-export const traceZoom = useLocalStorage<number | 'fit'>('vitest-ui_trace-zoom', 1, {
-  serializer: StorageSerializers.object,
-})
-
-export const traceFitScale = ref(1)
+export const traceZoom = useLocalStorage('vitest-ui_trace-zoom', 1)
 
-export const traceScale = computed(() =>
-  traceZoom.value === 'fit' ? traceFitScale.value : traceZoom.value,
-)
+export const traceReplayElement = shallowRef<HTMLElement>()
 
 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 745e12193..c56f0aee4 100644
--- a/test/ui/test/trace.spec.ts
+++ b/test/ui/test/trace.spec.ts
@@ -302,7 +302,6 @@ async function testZoom(page: Page) {
   // popover shows zoom state
   await zoomTrigger.click()
   await expect(zoomPercent).toHaveText('100%')
-  await expect(fitToPane).toHaveAttribute('aria-pressed', 'false')
   await expect(resetZoom).toBeDisabled()
 
   // zoom out and persist across reloads
@@ -317,17 +316,16 @@ async function testZoom(page: Page) {
   // fit scales down the tall viewport and persists across reloads
   await zoomTrigger.click()
   await fitToPane.click()
-  await expect(fitToPane).toHaveAttribute('aria-pressed', 'true')
-  await expect(zoomTrigger).toHaveText(/^Fit \d+%$/)
+  await expect(zoomTrigger).not.toHaveText('75%')
   const fitText = (await zoomTrigger.textContent())!
   expect(Number(fitText.match(/(\d+)%/)![1])).toBeLessThan(75)
   await page.reload()
   await expect(zoomTrigger).toHaveText(fitText)
 
-  // zooming leaves fit mode
+  // zoom in from fit to the next level
   await zoomTrigger.click()
   await zoomIn.click()
-  await expect(fitToPane).toHaveAttribute('aria-pressed', 'false')
+  await expect(zoomPercent).toHaveText(/^(25|50|75)%$/)
 
   // back to actual size
   await resetZoom.click()
-- 
2.51.2