chore: show channel name in trace viewer metadata (#26987)

Fixes #26986

Author: mxschmitt

packages/playwright-core/src/server/trace/recorder/tracing.ts

@@ -109,6 +109,7 @@ export class Tracing extends SdkObject implements InstrumentationListener, Snaps
       this._snapshotter = new Snapshotter(context, this);
       assert(tracesDir, 'tracesDir must be specified for BrowserContext');
       this._contextCreatedEvent.browserName = context._browser.options.name;
+      this._contextCreatedEvent.channel = context._browser.options.channel;
       this._contextCreatedEvent.options = context._options;
     }
   }

packages/trace-viewer/src/entries.ts

@@ -24,6 +24,7 @@ export type ContextEntry = {
   startTime: number;
   endTime: number;
   browserName: string;
+  channel?: string;
   platform?: string;
   wallTime?: number;
   sdkLanguage?: Language;

packages/trace-viewer/src/traceModel.ts

@@ -156,6 +156,7 @@ export class TraceModel {
         this._version = event.version;
         contextEntry.isPrimary = true;
         contextEntry.browserName = event.browserName;
+        contextEntry.channel = event.channel;
         contextEntry.title = event.title;
         contextEntry.platform = event.platform;
         contextEntry.wallTime = event.wallTime;

packages/trace-viewer/src/ui/metadataView.tsx

@@ -30,6 +30,7 @@ export const MetadataView: React.FunctionComponent<{
     <div className='call-line'>duration:<span className='call-value number' title={msToString(model.endTime - model.startTime)}>{msToString(model.endTime - model.startTime)}</span></div>
     <div className='call-section'>Browser</div>
     <div className='call-line'>engine:<span className='call-value string' title={model.browserName}>{model.browserName}</span></div>
+    {model.channel && <div className='call-line'>channel:<span className='call-value string' title={model.channel}>{model.channel}</span></div>}
     {model.platform && <div className='call-line'>platform:<span className='call-value string' title={model.platform}>{model.platform}</span></div>}
     {model.options.userAgent && <div className='call-line'>user agent:<span className='call-value datetime' title={model.options.userAgent}>{model.options.userAgent}</span></div>}
     <div className='call-section'>Viewport</div>

packages/trace-viewer/src/ui/modelUtil.ts

@@ -51,6 +51,7 @@ export class MultiTraceModel {
   readonly startTime: number;
   readonly endTime: number;
   readonly browserName: string;
+  readonly channel?: string;
   readonly platform?: string;
   readonly wallTime?: number;
   readonly title?: string;
@@ -72,6 +73,7 @@ export class MultiTraceModel {
 
     this.browserName = primaryContext?.browserName || '';
     this.sdkLanguage = primaryContext?.sdkLanguage;
+    this.channel = primaryContext?.channel;
     this.testIdAttributeName = primaryContext?.testIdAttributeName;
     this.platform = primaryContext?.platform || '';
     this.title = primaryContext?.title || '';

packages/trace/src/trace.ts

@@ -34,6 +34,7 @@ export type ContextCreatedTraceEvent = {
   version: number,
   type: 'context-options',
   browserName: string,
+  channel?: string,
   platform: string,
   wallTime: number,
   title?: string,