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.

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) {

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)

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);

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!);
 }

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}">`;