From 87d9e758789ebd5b96a0ce0b1be22f4d09d8e76d Mon Sep 17 00:00:00 2001
From: Simon Knott <info@simonknott.de>
Date: Thu, 25 Jul 2024 10:58:20 +0200
Subject: [PATCH] feat(trace viewer): show `baseURL` in Metadata pane

---
 .../playwright-core/src/server/trace/recorder/tracing.ts  | 1 +
 packages/trace-viewer/src/entries.ts                      | 1 +
 packages/trace-viewer/src/traceModernizer.ts              | 1 +
 packages/trace-viewer/src/ui/callTab.css                  | 8 ++++++++
 packages/trace-viewer/src/ui/metadataView.tsx             | 6 ++++++
 packages/trace-viewer/src/ui/modelUtil.ts                 | 2 ++
 packages/trace/src/trace.ts                               | 1 +
 7 files changed, 20 insertions(+)

diff --git a/packages/playwright-core/src/server/trace/recorder/tracing.ts b/packages/playwright-core/src/server/trace/recorder/tracing.ts
index 1dec4f536a..dad9b0c8b8 100644
--- a/packages/playwright-core/src/server/trace/recorder/tracing.ts
+++ b/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;
     }
   }
 
diff --git a/packages/trace-viewer/src/entries.ts b/packages/trace-viewer/src/entries.ts
index bca5751ab2..5513221648 100644
--- a/packages/trace-viewer/src/entries.ts
+++ b/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;
diff --git a/packages/trace-viewer/src/traceModernizer.ts b/packages/trace-viewer/src/traceModernizer.ts
index e7c65ac41f..3751fb531d 100644
--- a/packages/trace-viewer/src/traceModernizer.ts
+++ b/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;
diff --git a/packages/trace-viewer/src/ui/callTab.css b/packages/trace-viewer/src/ui/callTab.css
index 3334b2e2ef..3bca9f7141 100644
--- a/packages/trace-viewer/src/ui/callTab.css
+++ b/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';
 }
diff --git a/packages/trace-viewer/src/ui/metadataView.tsx b/packages/trace-viewer/src/ui/metadataView.tsx
index 6cb315686a..534428a7a0 100644
--- a/packages/trace-viewer/src/ui/metadataView.tsx
+++ b/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>
diff --git a/packages/trace-viewer/src/ui/modelUtil.ts b/packages/trace-viewer/src/ui/modelUtil.ts
index 309b210eab..74c80cec3c 100644
--- a/packages/trace-viewer/src/ui/modelUtil.ts
+++ b/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;
diff --git a/packages/trace/src/trace.ts b/packages/trace/src/trace.ts
index ebd3466fd8..9b995e0d1d 100644
--- a/packages/trace/src/trace.ts
+++ b/packages/trace/src/trace.ts
@@ -43,6 +43,7 @@ export type ContextCreatedTraceEvent = {
   options: BrowserContextEventOptions,
   sdkLanguage?: Language,
   testIdAttributeName?: string,
+  baseURL?: string,
 };
 
 export type ScreencastFrameTraceEvent = {