feat(trace viewer): show baseURL in Metadata pane

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

@@ -109,6 +109,7 @@ export class Tracing extends SdkObject implements InstrumentationListener, Snaps
       this._contextCreatedEvent.browserName = context._browser.options.name;
       this._contextCreatedEvent.channel = context._browser.options.channel;
       this._contextCreatedEvent.options = context._options;
+      this._contextCreatedEvent.baseURL = context._options.baseURL;
     }
   }
 

packages/trace-viewer/src/entries.ts

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

packages/trace-viewer/src/traceModernizer.ts

@@ -85,6 +85,7 @@ export class TraceModernizer {
         this._version = event.version;
         contextEntry.origin = event.origin;
         contextEntry.browserName = event.browserName;
+        contextEntry.baseURL = event.baseURL;
         contextEntry.channel = event.channel;
         contextEntry.title = event.title;
         contextEntry.platform = event.platform;

packages/trace-viewer/src/ui/callTab.css

@@ -73,6 +73,14 @@
   overflow: hidden;
 }
 
+a.call-value {
+  text-decoration: none;
+}
+
+a.call-value:hover {
+  text-decoration: underline;
+}
+
 .call-value::before {
   content: '\00a0';
 }

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

@@ -25,6 +25,12 @@ export const MetadataView: React.FunctionComponent<{
   if (!model)
     return <></>;
   return <div className='metadata-view vbox'>
+    {model.baseURL && (
+      <>
+        <div className='call-section' style={{ paddingTop: 2 }}>Time</div>
+        <div className='call-line'>baseURL:<a className='call-value string' href={model.baseURL} title={model.baseURL} target="_blank">{model.baseURL}</a></div>
+      </>
+    )}
     <div className='call-section' style={{ paddingTop: 2 }}>Time</div>
     {!!model.wallTime && <div className='call-line'>start time:<span className='call-value datetime' title={new Date(model.wallTime).toLocaleString()}>{new Date(model.wallTime).toLocaleString()}</span></div>}
     <div className='call-line'>duration:<span className='call-value number' title={msToString(model.endTime - model.startTime)}>{msToString(model.endTime - model.startTime)}</span></div>

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

@@ -59,6 +59,7 @@ export class MultiTraceModel {
   readonly startTime: number;
   readonly endTime: number;
   readonly browserName: string;
+  readonly baseURL?: string;
   readonly channel?: string;
   readonly platform?: string;
   readonly wallTime?: number;
@@ -83,6 +84,7 @@ export class MultiTraceModel {
     const libraryContext = contexts.find(context => context.origin === 'library');
 
     this.browserName = libraryContext?.browserName || '';
+    this.baseURL = libraryContext?.baseURL;
     this.sdkLanguage = libraryContext?.sdkLanguage;
     this.channel = libraryContext?.channel;
     this.testIdAttributeName = libraryContext?.testIdAttributeName;

packages/trace/src/trace.ts

@@ -43,6 +43,7 @@ export type ContextCreatedTraceEvent = {
   options: BrowserContextEventOptions,
   sdkLanguage?: Language,
   testIdAttributeName?: string,
+  baseURL?: string,
 };
 
 export type ScreencastFrameTraceEvent = {