From 4bdd5105e480b4ab21e84ff59907f30d83e945bc Mon Sep 17 00:00:00 2001
From: Simon Knott <info@simonknott.de>
Date: Tue, 29 Oct 2024 13:32:46 +0100
Subject: [PATCH] always operate on absolute urls

---
 .../trace-viewer/src/sw/traceModelBackends.ts | 10 +--------
 .../trace-viewer/src/ui/uiModeTraceView.tsx   | 21 +++++++++++++++----
 2 files changed, 18 insertions(+), 13 deletions(-)

diff --git a/packages/trace-viewer/src/sw/traceModelBackends.ts b/packages/trace-viewer/src/sw/traceModelBackends.ts
index 1782c78005..fa351879bd 100644
--- a/packages/trace-viewer/src/sw/traceModelBackends.ts
+++ b/packages/trace-viewer/src/sw/traceModelBackends.ts
@@ -31,7 +31,7 @@ export class ZipTraceModelBackend implements TraceModelBackend {
   constructor(traceURL: string, progress: Progress) {
     this._traceURL = traceURL;
     this._zipReader = new zipjs.ZipReader(
-        new zipjs.HttpReader(formatUrl(traceURL), { mode: 'cors', preventHeadRequest: true } as any),
+        new zipjs.HttpReader(traceURL, { mode: 'cors', preventHeadRequest: true } as any),
         { useWebWorkers: false });
     this._entriesPromise = this._zipReader.getEntries({ onprogress: progress }).then(entries => {
       const map = new Map<string, zip.Entry>();
@@ -134,11 +134,3 @@ export class FetchTraceModelBackend implements TraceModelBackend {
     return fetch(fileURL);
   }
 }
-
-function formatUrl(trace: string) {
-  let url = trace;
-  // Dropbox does not support cors.
-  if (url.startsWith('https://www.dropbox.com/'))
-    url = 'https://dl.dropboxusercontent.com/' + url.substring('https://www.dropbox.com/'.length);
-  return url;
-}
diff --git a/packages/trace-viewer/src/ui/uiModeTraceView.tsx b/packages/trace-viewer/src/ui/uiModeTraceView.tsx
index cf35d89007..eee20439e4 100644
--- a/packages/trace-viewer/src/ui/uiModeTraceView.tsx
+++ b/packages/trace-viewer/src/ui/uiModeTraceView.tsx
@@ -54,7 +54,7 @@ export const TraceView: React.FC<{
     // Test finished.
     const attachment = result && result.duration >= 0 && result.attachments.find(a => a.name === 'trace');
     if (attachment && attachment.path) {
-      loadSingleTraceFile(attachment.path).then(model => setModel({ model, isLive: false }));
+      loadSingleTraceFile(new URL(attachment.path, 'file://')).then(model => setModel({ model, isLive: false }));
       return;
     }
 
@@ -72,7 +72,7 @@ export const TraceView: React.FC<{
     // Start polling running test.
     pollTimer.current = setTimeout(async () => {
       try {
-        const model = await loadSingleTraceFile(traceLocation);
+        const model = await loadSingleTraceFile(new URL(traceLocation, 'file://'));
         setModel({ model, isLive: true });
       } catch {
         setModel(undefined);
@@ -108,11 +108,24 @@ const outputDirForTestCase = (testCase: reporterTypes.TestCase): string | undefi
   return undefined;
 };
 
-async function loadSingleTraceFile(url: string): Promise<MultiTraceModel> {
+async function loadSingleTraceFile(tracePathOrURL: URL): Promise<MultiTraceModel> {
   const params = new URLSearchParams();
-  params.set('trace', url);
+  params.set('trace', formatUrl(tracePathOrURL).toString());
   params.set('limit', '1');
   const response = await fetch(`contexts?${params.toString()}`);
   const contextEntries = await response.json() as ContextEntry[];
   return new MultiTraceModel(contextEntries);
 }
+
+function formatUrl(tracePathOrURL: URL) {
+  if (tracePathOrURL.protocol === 'file:') {
+    const url = new URL('/trace/file', location.href);
+    url.searchParams.set('path', tracePathOrURL.pathname);
+    return url;
+  }
+
+  if (tracePathOrURL.hostname === 'dropbox.com')
+    tracePathOrURL.hostname = 'dl.dropboxusercontent.com';
+
+  return tracePathOrURL;
+}