cherry-pick(release-1.16): allow serving html report w/ traces off relative path

pavelfeldman · aslushnikov · commit cafe5f3fd1b2 · 2021-10-20T15:31:26.000-10:00
Cherry-picks PR #9668 SHA f853176 Fixes #9652
diff --git a/packages/playwright-core/src/web/htmlReport/htmlReport.tsx b/packages/playwright-core/src/web/htmlReport/htmlReport.tsx
@@ -188,7 +188,7 @@ const TestResultView: React.FC<{
 
     {!!traces.length && <Chip header='Traces'>
       {traces.map((a, i) => <div key={`trace-${i}`}>
-        <a href={`trace/index.html?trace=${window.location.origin}/` + a.path}>
+        <a href={`trace/index.html?trace=${new URL(a.path!, window.location.href)}`}>
           <img src='trace.png' style={{ width: 192, height: 117, marginLeft: 20 }} />
         </a>
       </div>)}
diff --git a/packages/playwright-core/src/web/traceViewer/index.html b/packages/playwright-core/src/web/traceViewer/index.html
@@ -19,9 +19,9 @@
   <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="icon" type="image/png" sizes="32x32" href="/trace/icon-32x32.png">
-    <link rel="icon" type="image/png" sizes="16x16" href="/trace/icon-16x16.png">
-    <link rel="manifest" href="/trace/manifest.webmanifest">
+    <link rel="icon" type="image/png" sizes="32x32" href="icon-32x32.png">
+    <link rel="icon" type="image/png" sizes="16x16" href="icon-16x16.png">
+    <link rel="manifest" href="manifest.webmanifest">
     <title>Playwright Trace Viewer</title>
   </head>
   <body>
diff --git a/packages/playwright-core/src/web/traceViewer/index.tsx b/packages/playwright-core/src/web/traceViewer/index.tsx
@@ -23,9 +23,7 @@ import '../common.css';
 
 (async () => {
   applyTheme();
-  navigator.serviceWorker.register('/trace/sw.bundle.js', {
-    scope: '/trace/'
-  });
+  navigator.serviceWorker.register('sw.bundle.js');
   if (!navigator.serviceWorker.controller) {
     await new Promise<void>(f => {
       navigator.serviceWorker.oncontrollerchange = () => f();
diff --git a/packages/playwright-core/src/web/traceViewer/static/manifest.webmanifest b/packages/playwright-core/src/web/traceViewer/static/manifest.webmanifest
@@ -2,28 +2,27 @@
     "theme_color": "#000",
     "background_color": "#fff",
     "display": "browser",
-    "scope": "/trace",
-    "start_url": "/trace/index.html",
+    "start_url": "index.html",
     "name": "Playwright Trace Viewer",
     "short_name": "Trace Viewer",
     "icons": [
         {
-            "src": "/trace/icon-192x192.png",
+            "src": "icon-192x192.png",
             "sizes": "192x192",
             "type": "image/png"
         },
         {
-            "src": "/trace/icon-256x256.png",
+            "src": "icon-256x256.png",
             "sizes": "256x256",
             "type": "image/png"
         },
         {
-            "src": "/trace/icon-384x384.png",
+            "src": "icon-384x384.png",
             "sizes": "384x384",
             "type": "image/png"
         },
         {
-            "src": "/trace/icon-512x512.png",
+            "src": "icon-512x512.png",
             "sizes": "512x512",
             "type": "image/png"
         }
diff --git a/packages/playwright-core/src/web/traceViewer/ui/workbench.tsx b/packages/playwright-core/src/web/traceViewer/ui/workbench.tsx
@@ -40,7 +40,7 @@ export const Workbench: React.FunctionComponent<{
   React.useEffect(() => {
     (async () => {
       if (traceURL) {
-        const contextEntry = (await fetch(`/trace/context?trace=${traceURL}`).then(response => response.json())) as ContextEntry;
+        const contextEntry = (await fetch(`context?trace=${traceURL}`).then(response => response.json())) as ContextEntry;
         modelUtil.indexModel(contextEntry);
         setContextEntry(contextEntry);
       } else {
