fix(trace-viewer): improve error dialog and command copy functionality

nilgaar · nilgaar · commit 221c73bd78ab · 2025-10-05T13:28:29.000+02:00
diff --git a/packages/trace-viewer/index.html b/packages/trace-viewer/index.html
@@ -16,37 +16,65 @@
 <!DOCTYPE html>
 <html lang="en" translate="no">
   <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="icon" href="/playwright-logo.svg" type="image/svg+xml">
-    <link rel="manifest" href="/manifest.webmanifest">
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="icon" href="/playwright-logo.svg" type="image/svg+xml" />
+    <link rel="manifest" href="/manifest.webmanifest" />
     <title>Playwright Trace Viewer</title>
   </head>
   <body>
     <div id="root"></div>
     <script type="module" src="/src/index.tsx"></script>
     <dialog id="fallback-error">
-      <p>The Playwright Trace Viewer must be loaded over the <code>http://</code> or <code>https://</code> protocols.</p>
-      <p>For more information, please see the <a href="https://aka.ms/playwright/trace-viewer-file-protocol">docs</a>.</p>
+      <p>
+        The Playwright Trace Viewer must be loaded over the
+        <code>http://</code> or <code>https://</code> protocols.
+      </p>
+      <p>
+        For more information, please see the
+        <a href="https://aka.ms/playwright/trace-viewer-file-protocol">docs</a>.
+      </p>
     </dialog>
     <script>
       if (!/^https?:/.test(window.location.protocol)) {
-        const fallbackErrorDialog = document.getElementById('fallback-error');
-        const isTraceViewerInsidePlaywrightReport = window.location.protocol === 'file:' && window.location.pathname.endsWith('/trace/index.html');
-        // Best-effort to show the report path in the dialog.
+        const fallbackErrorDialog = document.getElementById("fallback-error");
+
+        const isTraceViewerInsidePlaywrightReport =
+          window.location.protocol === "file:" &&
+          decodeURIComponent(window.location.pathname).endsWith(
+            "/trace/index.html"
+          );
+
         if (isTraceViewerInsidePlaywrightReport) {
+          const basePathname = decodeURIComponent(window.location.pathname);
+          const base = basePathname.replace(/\/trace\/index\.html$/, "");
+
           const reportPath = (() => {
-            const base = window.location.pathname.replace(/\/trace\/index\.html$/, '');
-            if (navigator.platform === 'Win32')
-              return base.replace(/^\//, '').replace(/\//g, '\\\\');
+            if (navigator.platform === "Win32") {
+              return base.replace(/^\//, "").replace(/\//g, "\\");
+            }
             return base;
           })();
-          const reportLink = document.createElement('div');
-          const command = `npx playwright show-report ${reportPath}`;
-          reportLink.innerHTML = `You can open the report via <code>${command}</code> from your Playwright project. <button type="button">Copy Command</button>`;
-          fallbackErrorDialog.insertBefore(reportLink, fallbackErrorDialog.children[1]);
-          reportLink.querySelector('button').addEventListener('click', () => navigator.clipboard.writeText(command));
+
+          const command = `npx playwright show-report "${reportPath}"`;
+
+          const reportLink = document.createElement("div");
+          reportLink.innerHTML =
+            `You can open the report via <code>${command}</code> from your Playwright project. ` +
+            `<button type="button">Copy Command</button>`;
+          fallbackErrorDialog.insertBefore(
+            reportLink,
+            fallbackErrorDialog.children[1]
+          );
+
+          const copyBtn = reportLink.querySelector("button");
+          if (copyBtn) {
+            copyBtn.addEventListener("click", () =>
+              navigator.clipboard.writeText(command)
+            );
+          }
         }
+
         fallbackErrorDialog.show();
       }
     </script>
