From e1c220a37b77431545cd67e8c79c1bddab63a326 Mon Sep 17 00:00:00 2001
From: Max Schmitt <max@schmitt.mx>
Date: Mon, 26 Jun 2023 18:13:40 +0200
Subject: [PATCH] fix(trace-viewer): file path contains encoded characters
 (#23893)

This fixes:

```
npx playwright show-trace %20I%20Love%20Node.zip
```

Extracted from https://github.com/microsoft/playwright/pull/23414.
---
 .../playwright-core/src/server/trace/viewer/traceViewer.ts  | 2 +-
 packages/trace-viewer/src/sw.ts                             | 2 ++
 packages/trace-viewer/src/traceModelBackends.ts             | 6 +++---
 packages/trace-viewer/src/ui/attachmentsTab.tsx             | 4 ++--
 packages/trace-viewer/src/ui/sourceTab.tsx                  | 2 +-
 5 files changed, 9 insertions(+), 7 deletions(-)

diff --git a/packages/playwright-core/src/server/trace/viewer/traceViewer.ts b/packages/playwright-core/src/server/trace/viewer/traceViewer.ts
index 649f5c5461..a678522199 100644
--- a/packages/playwright-core/src/server/trace/viewer/traceViewer.ts
+++ b/packages/playwright-core/src/server/trace/viewer/traceViewer.ts
@@ -93,7 +93,7 @@ async function startTraceViewerServer(traceUrls: string[], options?: Options): P
     return server.serveFile(request, response, absolutePath);
   });
 
-  const params = traceUrls.map(t => `trace=${t}`);
+  const params = traceUrls.map(t => `trace=${encodeURIComponent(t)}`);
   const transport = options?.transport || (options?.isServer ? new StdinServer() : undefined);
 
   if (transport) {
diff --git a/packages/trace-viewer/src/sw.ts b/packages/trace-viewer/src/sw.ts
index 6dec512f16..52257be2cc 100644
--- a/packages/trace-viewer/src/sw.ts
+++ b/packages/trace-viewer/src/sw.ts
@@ -47,6 +47,8 @@ async function loadTrace(traceUrl: string, traceFileName: string | null, clientI
     const backend = traceUrl.endsWith('json') ? new FetchTraceModelBackend(traceUrl) : new ZipTraceModelBackend(traceUrl, fetchProgress);
     await traceModel.load(backend, unzipProgress);
   } catch (error: any) {
+    // eslint-disable-next-line no-console
+    console.error(error);
     if (error?.message?.includes('Cannot find .trace file') && await traceModel.hasEntry('index.html'))
       throw new Error('Could not load trace. Did you upload a Playwright HTML report instead? Make sure to extract the archive first and then double-click the index.html file or put it on a web server.');
     if (traceFileName)
diff --git a/packages/trace-viewer/src/traceModelBackends.ts b/packages/trace-viewer/src/traceModelBackends.ts
index 15faa55ac6..9405072c42 100644
--- a/packages/trace-viewer/src/traceModelBackends.ts
+++ b/packages/trace-viewer/src/traceModelBackends.ts
@@ -86,7 +86,7 @@ export class FetchTraceModelBackend implements TraceModelBackend {
 
   constructor(traceURL: string) {
     this._traceURL = traceURL;
-    this._entriesPromise = fetch('/trace/file?path=' + encodeURI(traceURL)).then(async response => {
+    this._entriesPromise = fetch('/trace/file?path=' + encodeURIComponent(traceURL)).then(async response => {
       const json = JSON.parse(await response.text());
       const entries = new Map<string, string>();
       for (const entry of json.entries)
@@ -128,12 +128,12 @@ export class FetchTraceModelBackend implements TraceModelBackend {
     const fileName = entries.get(entryName);
     if (!fileName)
       return;
-    return fetch('/trace/file?path=' + encodeURI(fileName));
+    return fetch('/trace/file?path=' + encodeURIComponent(fileName));
   }
 }
 
 function formatUrl(trace: string) {
-  let url = trace.startsWith('http') || trace.startsWith('blob') ? trace : `file?path=${trace}`;
+  let url = trace.startsWith('http') || trace.startsWith('blob') ? trace : `file?path=${encodeURIComponent(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);
diff --git a/packages/trace-viewer/src/ui/attachmentsTab.tsx b/packages/trace-viewer/src/ui/attachmentsTab.tsx
index 55abaf7546..eba678cbf1 100644
--- a/packages/trace-viewer/src/ui/attachmentsTab.tsx
+++ b/packages/trace-viewer/src/ui/attachmentsTab.tsx
@@ -66,6 +66,6 @@ function attachmentURL(traceUrl: string, attachment: {
   body?: string;
 }) {
   if (attachment.sha1)
-    return 'sha1/' + attachment.sha1 + '?trace=' + traceUrl;
-  return 'file?path=' + attachment.path;
+    return 'sha1/' + attachment.sha1 + '?trace=' + encodeURIComponent(traceUrl);
+  return 'file?path=' + encodeURIComponent(attachment.path!);
 }
diff --git a/packages/trace-viewer/src/ui/sourceTab.tsx b/packages/trace-viewer/src/ui/sourceTab.tsx
index d8a15c8ce8..132baffbdf 100644
--- a/packages/trace-viewer/src/ui/sourceTab.tsx
+++ b/packages/trace-viewer/src/ui/sourceTab.tsx
@@ -66,7 +66,7 @@ export const SourceTab: React.FunctionComponent<{
       try {
         let response = await fetch(`sha1/src@${sha1}.txt`);
         if (response.status === 404)
-          response = await fetch(`file?path=${file}`);
+          response = await fetch(`file?path=${encodeURIComponent(file)}`);
         source.content = await response.text();
       } catch {
         source.content = `<Unable to read "${file}">`;