Revert "chore(trace viewer): always format trace location as URL, not file path" (#33476)

packages/playwright-core/src/server/trace/viewer/traceViewer.ts

@@ -106,17 +106,8 @@ export async function installRootRedirect(server: HttpServer, traceUrls: string[
   const params = new URLSearchParams();
   if (path.sep !== path.posix.sep)
     params.set('pathSeparator', path.sep);
-  for (const traceUrl of traceUrls) {
+  for (const traceUrl of traceUrls)
-    if (traceUrl.startsWith('http://') || traceUrl.startsWith('https://')) {
+    params.append('trace', traceUrl);
-      params.append('trace', traceUrl);
-      continue;
-    }
-
-    // <testServerOrigin>/trace/file?path=/path/to/trace.zip
-    const url = new URL('/trace/file', server.urlPrefix('precise'));
-    url.searchParams.set('path', traceUrl);
-    params.append('trace', url.toString());
-  }
   if (server.wsGuid())
     params.append('ws', server.wsGuid()!);
   if (options?.isServer)

packages/trace-viewer/src/sw/traceModelBackends.ts

@@ -30,8 +30,9 @@ export class ZipTraceModelBackend implements TraceModelBackend {
 
   constructor(traceURL: string, progress: Progress) {
     this._traceURL = traceURL;
+    zipjs.configure({ baseURL: self.location.href } as any);
     this._zipReader = new zipjs.ZipReader(
-        new zipjs.HttpReader(traceURL, { mode: 'cors', preventHeadRequest: true } as any),
+        new zipjs.HttpReader(formatUrl(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>();
@@ -86,8 +87,8 @@ export class FetchTraceModelBackend implements TraceModelBackend {
 
   constructor(traceURL: string) {
     this._traceURL = traceURL;
-    this._entriesPromise = fetch(traceURL).then(async response => {
+    this._entriesPromise = fetch('/trace/file?path=' + encodeURIComponent(traceURL)).then(async response => {
-      const json = await response.json();
+      const json = JSON.parse(await response.text());
       const entries = new Map<string, string>();
       for (const entry of json.entries)
         entries.set(entry.name, entry.path);
@@ -125,12 +126,17 @@ export class FetchTraceModelBackend implements TraceModelBackend {
 
   private async _readEntry(entryName: string): Promise<Response | undefined> {
     const entries = await this._entriesPromise;
-    const filePath = entries.get(entryName);
+    const fileName = entries.get(entryName);
-    if (!filePath)
+    if (!fileName)
       return;
-
+    return fetch('/trace/file?path=' + encodeURIComponent(fileName));
-    const url = new URL(this.traceURL());
-    url.searchParams.set('path', filePath);
-    return fetch(url);
   }
 }
+
+function formatUrl(trace: string) {
+  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);
+  return url;
+}

packages/trace-viewer/src/ui/embeddedWorkbenchLoader.tsx

@@ -21,7 +21,6 @@ import './embeddedWorkbenchLoader.css';
 import { Workbench } from './workbench';
 import { currentTheme, toggleTheme } from '@web/theme';
 import type { SourceLocation } from './modelUtil';
-import { filePathToTraceURL } from './uiModeTraceView';
 
 function openPage(url: string, target?: string) {
   if (url)
@@ -41,15 +40,7 @@ export const EmbeddedWorkbenchLoader: React.FunctionComponent = () => {
   React.useEffect(() => {
     window.addEventListener('message', async ({ data: { method, params } }) => {
       if (method === 'loadTraceRequested') {
-        if (params.traceUrl) {
+        setTraceURLs(params.traceUrl ? [params.traceUrl] : []);
-          // the param is called URL, but VS Code sends a path
-          const url = params.traceUrl.startsWith('http')
-            ? params.traceUrl
-            : filePathToTraceURL(params.traceUrl).toString();
-          setTraceURLs([url]);
-        } else {
-          setTraceURLs([]);
-        }
         setProcessingErrorMessage(null);
       } else if (method === 'applyTheme') {
         if (currentTheme() !== params.theme)

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(filePathToTraceURL(attachment.path)).then(model => setModel({ model, isLive: false }));
+      loadSingleTraceFile(attachment.path).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(filePathToTraceURL(traceLocation));
+        const model = await loadSingleTraceFile(traceLocation);
         setModel({ model, isLive: true });
       } catch {
         setModel(undefined);
@@ -108,25 +108,11 @@ const outputDirForTestCase = (testCase: reporterTypes.TestCase): string | undefi
   return undefined;
 };
 
-async function loadSingleTraceFile(traceURL: URL): Promise<MultiTraceModel> {
+async function loadSingleTraceFile(url: string): Promise<MultiTraceModel> {
   const params = new URLSearchParams();
-  params.set('trace', formatUrl(traceURL).toString());
+  params.set('trace', url);
   params.set('limit', '1');
   const response = await fetch(`contexts?${params.toString()}`);
   const contextEntries = await response.json() as ContextEntry[];
   return new MultiTraceModel(contextEntries);
 }
-
-function formatUrl(traceURL: URL) {
-  // Dropbox does not support cors.
-  if (traceURL.hostname === 'dropbox.com')
-    traceURL.hostname = 'dl.dropboxusercontent.com';
-
-  return traceURL;
-}
-
-export function filePathToTraceURL(path: string) {
-  const url = new URL('file', location.href);
-  url.searchParams.set('path', path);
-  return url;
-}