Vv/trace player

packages/app/src/app.ts

@@ -1,7 +1,7 @@
 import './tailwind.css'
 import { css, html, nothing } from 'lit'
 import { customElement, query } from 'lit/decorators.js'
-import { TraceType, type TraceLog } from '@wdio/devtools-shared'
+import { TraceType } from '@wdio/devtools-shared'
 
 import { Element } from '@core/element'
 import { DataManagerController } from './controller/DataManager.js'
@@ -95,7 +95,6 @@ export class WebdriverIODevtoolsApplication extends Element {
 
   connectedCallback(): void {
     super.connectedCallback()
-    window.addEventListener('load-trace', this.#loadTrace.bind(this))
     this.addEventListener(
       'clear-execution-data',
       this.#clearExecutionData.bind(this)
@@ -120,11 +119,6 @@ export class WebdriverIODevtoolsApplication extends Element {
     `
   }
 
-  #loadTrace({ detail }: { detail: TraceLog }) {
-    this.dataManager.loadTraceFile(detail)
-    this.requestUpdate()
-  }
-
   #clearExecutionData({
     detail
   }: {
@@ -152,7 +146,10 @@ export class WebdriverIODevtoolsApplication extends Element {
             : nothing
         }
         ${this.#drag.getSlider('z-10 h-full')}
-        <wdio-devtools-workbench class="basis-auto"></wdio-devtools-workbench>
+        <wdio-devtools-workbench
+          class="basis-auto"
+          .playerMode="${this.dataManager.playerMode}"
+        ></wdio-devtools-workbench>
       </section>
     `
   }

packages/app/src/components/browser/trace-timeline-constants.ts

@@ -0,0 +1,19 @@
+import type { ActionCategory } from '../workbench/actionItems/category.js'
+
+/** Playback speed multipliers offered in the timeline controls. */
+export const SPEEDS = [0.5, 1, 2, 3, 5]
+
+/** Width of the track-label gutter (px) — lanes start after it. */
+export const GUTTER = 80
+
+/** Right breathing room (px) so end-of-timeline markers don't hug the edge. */
+export const INSET = 14
+
+/** Tailwind background class per action category, for the timeline chips. */
+export const CATEGORY_BG: Record<ActionCategory, string> = {
+  navigation: 'bg-chartsBlue',
+  input: 'bg-chartsPurple',
+  assertion: 'bg-chartsGreen',
+  query: 'bg-chartsYellow',
+  other: 'bg-gray-500'
+}

packages/app/src/components/browser/trace-timeline-utils.ts

@@ -0,0 +1,17 @@
+/** Detect image mime from a base64 string's magic bytes — trace screenshots
+ *  may be PNG (polling capture) or JPEG (CDP), and the zip names both `.jpeg`. */
+export function imageMime(base64: string): string {
+  return base64.startsWith('/9j/') ? 'image/jpeg' : 'image/png'
+}
+
+/** `m:ss.cc` timecode (e.g. 32_270ms → `0:32.27`). */
+export function formatTimecode(ms: number): string {
+  const safe = Number.isFinite(ms) && ms > 0 ? ms : 0
+  const totalSeconds = Math.floor(safe / 1000)
+  const minutes = Math.floor(totalSeconds / 60)
+  const seconds = totalSeconds % 60
+  const centis = Math.floor((safe % 1000) / 10)
+  return `${minutes}:${seconds.toString().padStart(2, '0')}.${centis
+    .toString()
+    .padStart(2, '0')}`
+}