chore(trace-viewer): reveal embedded trace viewer when trace is enabled

src/embeddedTraceViewer.ts

@@ -52,6 +52,10 @@ export class EmbeddedTraceViewer implements TraceViewer {
     traceViewerPanel?.loadTraceRequested(file);
   }
 
+  async reveal() {
+    await this._startIfNeeded();
+  }
+
   close() {
     this._traceViewerPanelPromise?.then(panel => panel?.dispose()).catch(() => {});
     this._traceViewerPanelPromise = undefined;
@@ -78,6 +82,7 @@ export class EmbeddedTraceViewer implements TraceViewer {
       serverUrlPrefix: traceViewerPanel?.serverUrlPrefix,
       testConfigFile: this._config.configFile,
       traceFile: this._currentFile,
+      visible: !!traceViewerPanel?.visibleForTest(),
     };
   }
 }
@@ -154,6 +159,10 @@ class EmbeddedTraceViewerPanel extends DisposableBase {
     super.dispose();
   }
 
+  visibleForTest() {
+    return this._isVisible;
+  }
+
   private _clearTraceLoadRequestedTimeout() {
     if (this._traceLoadRequestedTimeout) {
       clearTimeout(this._traceLoadRequestedTimeout);

src/spawnTraceViewer.ts

@@ -102,6 +102,7 @@ export class SpawnTraceViewer implements TraceViewer {
       serverUrlPrefix: this._serverUrlPrefixForTest,
       testConfigFile: this._config.configFile,
       traceFile: this._currentFile,
+      visible: !!this._serverUrlPrefixForTest
     };
   }
 }

src/testModel.ts

@@ -100,7 +100,10 @@ export class TestModel extends DisposableBase {
     this.tag = new this._vscode.TestTag(this.config.configFile);
 
     this._disposables = [
-      this._embedder.settingsModel.showTrace.onChange(() => this._closeTraceViewerIfNeeded()),
+      this._embedder.settingsModel.showTrace.onChange(() => {
+        this._closeTraceViewerIfNeeded();
+        this._revealTraceViewer();
+      }),
       this._embedder.settingsModel.embeddedTraceViewer.onChange(() => this._closeTraceViewerIfNeeded()),
       this._collection.onUpdated(() => this._closeTraceViewerIfNeeded()),
     ];
@@ -124,6 +127,14 @@ export class TestModel extends DisposableBase {
     this._traceViewer = undefined;
   }
 
+  private _revealTraceViewer() {
+    if (!this._embedder.settingsModel.showTrace)
+      return;
+    if (this._collection.selectedModel() !== this)
+      return;
+    this.ensureTraceViewer()?.reveal?.().catch(() => {});
+  }
+
   async _loadModelIfNeeded(configSettings: ConfigSettings | undefined) {
     if (!this.isEnabled)
       return;

src/traceViewer.ts

@@ -25,12 +25,14 @@ export type TraceViewer = {
   currentFile(): string | undefined;
   willRunTests(): Promise<void>;
   open(file?: string): Promise<void>;
+  reveal?(): Promise<void>;
   close(): void;
   infoForTest(): Promise<{
     type: string;
     serverUrlPrefix?: string;
     testConfigFile: string;
     traceFile?: string;
+    visible: boolean;
   } | undefined>;
 };
 

tests/embedded-trace-viewer.spec.ts

@@ -418,3 +418,20 @@ test('should restore webview state when moving', async ({ activate }) => {
   ]);
 
 });
+
+test('should show embedded trace viewer upon trace enabling', async ({ activate }) => {
+  const { vscode } = await activate({
+    'playwright.config.js': `module.exports = { testDir: 'tests' }`,
+    'tests/test.spec.ts': `
+      import { test } from '@playwright/test';
+      test('should pass', async () => {});
+    `,
+  });
+
+  const configuration = vscode.workspace.getConfiguration('playwright');
+  configuration.update('showTrace', false, true);
+  await expect.poll(() => traceViewerInfo(vscode)).toBeUndefined();
+
+  configuration.update('showTrace', true, true);
+  await expect.poll(() => traceViewerInfo(vscode)).toMatchObject({ type: 'embedded', visible: true });
+});