chore(trace viewer): support HMR (#33609)

microsoft · Dec 11, 2024 · ed2be67 · ed2be67
1 parent a14d975
commit ed2be67
Show file tree

Hide file tree

Showing 4 changed files with 12 additions and 9 deletions.
diff --git a/packages/playwright-core/src/server/trace/viewer/traceViewer.ts b/packages/playwright-core/src/server/trace/viewer/traceViewer.ts
@@ -125,7 +125,13 @@ export async function installRootRedirect(server: HttpServer, traceUrls: string[
   for (const reporter of options.reporter || [])
     params.append('reporter', reporter);
 
-  const urlPath  = `./trace/${options.webApp || 'index.html'}?${params.toString()}`;
+  let baseUrl = '.';
+  if (process.env.PW_HMR) {
+    baseUrl = 'http://localhost:44223'; // port is hardcoded in build.js
+    params.set('server', server.urlPrefix('precise'));
+  }
+
+  const urlPath  = `${baseUrl}/trace/${options.webApp || 'index.html'}?${params.toString()}`;
   server.routePath('/', (_, response) => {
     response.statusCode = 302;
     response.setHeader('Location', urlPath);

diff --git a/packages/trace-viewer/src/sw/main.ts b/packages/trace-viewer/src/sw/main.ts
@@ -43,10 +43,8 @@ async function loadTrace(traceUrl: string, traceFileName: string | null, client:
   const clientId = client?.id ?? '';
   let data = clientIdToTraceUrls.get(clientId);
   if (!data) {
-    let traceViewerServerBaseUrl = new URL('../', client?.url ?? self.registration.scope);
-    if (traceViewerServerBaseUrl.searchParams.has('server'))
-      traceViewerServerBaseUrl = new URL(traceViewerServerBaseUrl.searchParams.get('server')!, traceViewerServerBaseUrl);
-
+    const clientURL = new URL(client?.url ?? self.registration.scope);
+    const traceViewerServerBaseUrl = new URL(clientURL.searchParams.get('server') ?? '../', clientURL);
     data = { limit, traceUrls: new Set(), traceViewerServer: new TraceViewerServer(traceViewerServerBaseUrl) };
     clientIdToTraceUrls.set(clientId, data);
   }

diff --git a/packages/trace-viewer/src/ui/snapshotTab.tsx b/packages/trace-viewer/src/ui/snapshotTab.tsx
@@ -344,7 +344,8 @@ export function extendSnapshot(snapshot: Snapshot): SnapshotUrls {
 
   const popoutParams = new URLSearchParams();
   popoutParams.set('r', snapshotUrl);
-  popoutParams.set('server', serverParam ?? '');
+  if (serverParam)
+    popoutParams.set('server', serverParam);
   popoutParams.set('trace', context(snapshot.action).traceUrl);
   if (snapshot.point) {
     popoutParams.set('pointX', String(snapshot.point.x));

diff --git a/packages/trace-viewer/src/ui/uiModeView.tsx b/packages/trace-viewer/src/ui/uiModeView.tsx
@@ -47,9 +47,7 @@ const xtermDataSource: XtermDataSource = {
 };
 
 const searchParams = new URLSearchParams(window.location.search);
-let testServerBaseUrl = new URL('../', window.location.href);
-if (testServerBaseUrl.searchParams.has('server'))
-  testServerBaseUrl = new URL(testServerBaseUrl.searchParams.get('server')!, testServerBaseUrl);
+const testServerBaseUrl = new URL(searchParams.get('server') ?? '../', window.location.href);
 const wsURL = new URL(searchParams.get('ws')!, testServerBaseUrl);
 wsURL.protocol = (wsURL.protocol === 'https:' ? 'wss:' : 'ws:');
 const queryParams = {