Open traces through one button, with folders dropped

A browser's file dialog picks files or folders, never both, so the landing
screen and the header each offered two pickers. They now offer one: "Open
traces" picks one or several zips, and a folder opens by dropping it
anywhere on the page, which already walked folders. The header's tooltip
says so, since its folder button is gone.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

Author: vishnuv688

.changeset/open-whole-run.md

@@ -3,4 +3,4 @@
 '@wdio/devtools-backend': minor
 ---
 
-The trace player opens several traces at once. `show-trace` accepts several zips or a folder (`npx show-trace test-results/`), and the hosted player accepts several zips or a folder, picked or dropped. The player then lists every trace beside the timeline, one row per test with its outcome, failures first and then in run order, and plays the one picked without reloading. With `traceGranularity: 'test'` a run is a folder of per-test zips, so the whole run opens in one go. A zip records no test state, so the outcome is read from the trace: failed when an action or step failed, passed when it holds actions and none failed, unknown when it holds none. Files in the folder that are not zips are skipped, and a zip that cannot be opened is listed with the reason without stopping the rest. Opening a single zip works exactly as before.
+The trace player opens several traces at once. `show-trace` accepts several zips or a folder (`npx show-trace test-results/`), and the hosted player takes several zips through its Open button, or zips and folders dropped on the page. The player then lists every trace beside the timeline, one row per test with its outcome, failures first and then in run order, and plays the one picked without reloading. With `traceGranularity: 'test'` a run is a folder of per-test zips, so the whole run opens in one go. A zip records no test state, so the outcome is read from the trace: failed when an action or step failed, passed when it holds actions and none failed, unknown when it holds none. Files in the folder that are not zips are skipped, and a zip that cannot be opened is listed with the reason without stopping the rest. Opening a single zip works exactly as before.

README.md

@@ -262,7 +262,7 @@ The player exposes everything captured in the archive:
 
 The `show-trace` bin is exposed by each JavaScript adapter (`@wdio/devtools-service`, `@wdio/nightwatch-devtools`, `@wdio/selenium-devtools`), so `pnpm show-trace <zip>` / `npx show-trace <zip>` work in any project that installs one — no extra dependency.
 
-**A whole run at once.** With `traceGranularity: 'test'` every test writes its own `trace.zip`, so a run is a folder of them. Give `show-trace` the folder, or several zips, and the player lists every trace beside the timeline, one row per test with its outcome, failures first and then in the order they ran; picking a row plays that trace without reloading (`↑`/`↓` move between rows, `Enter` opens one). The hosted player does the same for several zips, or a folder, picked or dropped on the page.
+**A whole run at once.** With `traceGranularity: 'test'` every test writes its own `trace.zip`, so a run is a folder of them. Give `show-trace` the folder, or several zips, and the player lists every trace beside the timeline, one row per test with its outcome, failures first and then in the order they ran; picking a row plays that trace without reloading (`↑`/`↓` move between rows, `Enter` opens one). The hosted player does the same for several zips picked with its one Open button, or for a folder dropped on the page (a browser's file dialog picks files or folders, never both).
 
 ```sh
 pnpm show-trace test-results/                        # every zip under the folder
@@ -271,7 +271,7 @@ pnpm show-trace a/trace.zip b/trace.zip              # several zips
 
 Each zip is read once, as the list fills in, and kept for when it is picked. Anything in the folder that is not a `.zip` (screenshots, videos, the artifacts manifest) is skipped; a zip that cannot be opened stays in the list with the reason, and the rest open normally. A zip records no test state, so the outcome is read from the trace itself: **failed** when an action or step in it failed, **passed** when it holds actions and none failed, **unknown** when it holds none. An assertion library that records no row (a jest `expect`, chai) can fail a test whose trace still reads as passed. One zip opens exactly as before, with no list.
 
-**Hosted player: [trace.webdriver.io](https://trace.webdriver.io).** The same player as a web page, for opening a trace without installing anything: drop a `.zip` on the page or pick one, or several, or a folder of them. The archive is parsed in the browser tab and never uploaded, which matters because a trace records everything the run showed or typed. Run controls are absent, as in `show-trace`. A replayed page still loads its own stylesheets and images from the site under test, as it does in `show-trace`; from an `https` page the browser blocks the `http` ones, so a trace of an `http` site can render unstyled there and fully in `show-trace`. To try the hosted build locally:
+**Hosted player: [trace.webdriver.io](https://trace.webdriver.io).** The same player as a web page, for opening a trace without installing anything: pick one or several `.zip` files, or drop them or a folder of them on the page. The archive is parsed in the browser tab and never uploaded, which matters because a trace records everything the run showed or typed. Run controls are absent, as in `show-trace`. A replayed page still loads its own stylesheets and images from the site under test, as it does in `show-trace`; from an `https` page the browser blocks the `http` ones, so a trace of an `http` site can render unstyled there and fully in `show-trace`. To try the hosted build locally:
 
 ```sh
 pnpm player:hosted   # builds it and serves it at http://localhost:4173 under the production headers

packages/app/src/components/header.ts

@@ -6,7 +6,6 @@ import '~icons/custom/logo.svg'
 import '~icons/mdi/white-balance-sunny.js'
 import '~icons/mdi/moon-waning-crescent.js'
 import '~icons/mdi/upload.js'
-import '~icons/mdi/folder-open.js'
 
 import {
   applyDarkMode,
@@ -110,42 +109,25 @@ export class DevtoolsHeader extends Element {
     `
   }
 
-  @query('input[data-pick="files"]') traceInput?: HTMLInputElement
-  @query('input[data-pick="folder"]') folderInput?: HTMLInputElement
+  @query('input[type="file"]') traceInput?: HTMLInputElement
 
   #openTraceButton() {
     return html`
       <button
         class="p-2"
-        title="Open other trace .zip files"
-        aria-label="Open other trace .zip files"
+        title="Open trace .zip files, or drop a folder of them on the page"
+        aria-label="Open trace .zip files"
         @click="${() => this.traceInput?.click()}"
       >
         <icon-mdi-upload></icon-mdi-upload>
       </button>
-      <button
-        class="p-2"
-        title="Open a folder of traces"
-        aria-label="Open a folder of traces"
-        @click="${() => this.folderInput?.click()}"
-      >
-        <icon-mdi-folder-open></icon-mdi-folder-open>
-      </button>
       <input
-        data-pick="files"
         type="file"
         accept="${TRACE_FILE_ACCEPT}"
         multiple
         hidden
         @change="${() => this.#onTracePicked(this.traceInput)}"
       />
-      <input
-        data-pick="folder"
-        type="file"
-        webkitdirectory
-        hidden
-        @change="${() => this.#onTracePicked(this.folderInput)}"
-      />
     `
   }
 

packages/app/src/components/onboarding/open-trace.ts

@@ -22,8 +22,7 @@ export class DevtoolsOpenTrace extends Element {
 
   @state() dragging = false
 
-  @query('input[data-pick="files"]') input?: HTMLInputElement
-  @query('input[data-pick="folder"]') folderInput?: HTMLInputElement
+  @query('input[type="file"]') input?: HTMLInputElement
 
   static styles = [
     ...Element.styles,
@@ -46,14 +45,8 @@ export class DevtoolsOpenTrace extends Element {
         border-color: var(--accent);
       }
 
-      .actions {
-        display: flex;
-        justify-content: center;
-        gap: 8px;
-        margin-top: 16px;
-      }
-
       button {
+        margin-top: 16px;
         padding: 8px 18px;
         border-radius: 6px;
         background: var(--accent);
@@ -156,34 +149,19 @@ export class DevtoolsOpenTrace extends Element {
     return this.phase ? TRACE_OPEN_PHASE_LABEL[this.phase] : 'Opening trace…'
   }
 
+  // A picker takes files or folders, never both, so folders come in by drop.
   #pickers() {
     return html`
-      <div class="actions">
-        <button ?disabled="${this.busy}" @click="${() => this.input?.click()}">
-          Select files
-        </button>
-        <button
-          ?disabled="${this.busy}"
-          @click="${() => this.folderInput?.click()}"
-        >
-          Select folder
-        </button>
-      </div>
+      <button ?disabled="${this.busy}" @click="${() => this.input?.click()}">
+        Open traces
+      </button>
       <input
-        data-pick="files"
         type="file"
         accept="${TRACE_FILE_ACCEPT}"
         multiple
         hidden
         @change="${() => this.#onPick(this.input)}"
       />
-      <input
-        data-pick="folder"
-        type="file"
-        webkitdirectory
-        hidden
-        @change="${() => this.#onPick(this.folderInput)}"
-      />
     `
   }