fix(trace-viewer): provide hints on how to open trace statically (#10450)

packages/playwright-core/src/web/traceViewer/index.tsx

@@ -23,13 +23,17 @@ import '../common.css';
 
 (async () => {
   applyTheme();
-  navigator.serviceWorker.register('sw.bundle.js');
-  if (!navigator.serviceWorker.controller) {
-    await new Promise<void>(f => {
-      navigator.serviceWorker.oncontrollerchange = () => f();
-    });
+  if (window.location.protocol !== 'file:') {
+    navigator.serviceWorker.register('sw.bundle.js');
+    if (!navigator.serviceWorker.controller) {
+      await new Promise<void>(f => {
+        navigator.serviceWorker.oncontrollerchange = () => f();
+      });
+    }
+
+    // Keep SW running.
+    setInterval(function() { fetch('ping'); }, 10000);
   }
-  // Keep SW running.
-  setInterval(function() { fetch('ping'); }, 10000);
+
   ReactDOM.render(<Workbench/>, document.querySelector('#root'));
 })();

packages/playwright-core/src/web/traceViewer/ui/workbench.css

@@ -18,16 +18,16 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  box-shadow: var(--box-shadow);
   flex: auto;
   flex-direction: column;
-  background-color: #fffb;
+  background-color: white;
   position: absolute;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   z-index: 100;
+  line-height: 24px;
 }
 
 .drop-target .title {
@@ -52,7 +52,7 @@
 .drop-target button {
   color: rgb(255, 255, 255);
   background-color: rgb(0, 122, 204);
-  padding: 6px 4px;
+  padding: 8px 12px;
   border: none;
   margin: 30px 0;
   cursor: pointer;

packages/playwright-core/src/web/traceViewer/ui/workbench.tsx

@@ -41,7 +41,8 @@ export const Workbench: React.FunctionComponent<{
   const [selectedPropertiesTab, setSelectedPropertiesTab] = React.useState<string>('logs');
   const [progress, setProgress] = React.useState<{ done: number, total: number }>({ done: 0, total: 0 });
   const [dragOver, setDragOver] = React.useState<boolean>(false);
-  const [processingErrorMessage, setProcessingErrorMessage] = React.useState<string|null>(null);
+  const [processingErrorMessage, setProcessingErrorMessage] = React.useState<string | null>(null);
+  const [fileForLocalModeError, setFileForLocalModeError] = React.useState<string | null>(null);
 
   const processTraceFile = (file: File) => {
     const blobTraceURL = URL.createObjectURL(file);
@@ -73,6 +74,12 @@ export const Workbench: React.FunctionComponent<{
 
   React.useEffect(() => {
     const newTraceURL = new URL(window.location.href).searchParams.get('trace');
+    // Don't accept file:// URLs - this means we re opened locally.
+    if (newTraceURL?.startsWith('file:')) {
+      setFileForLocalModeError(newTraceURL);
+      return;
+    }
+
     // Don't re-use blob file URLs on page load (results in Fetch error)
     if (newTraceURL && !newTraceURL.startsWith('blob:'))
       setTraceURL(newTraceURL);
@@ -185,7 +192,15 @@ export const Workbench: React.FunctionComponent<{
     {!!progress.total && <div className='progress'>
       <div className='inner-progress' style={{ width: (100 * progress.done / progress.total) + '%' }}></div>
     </div>}
-    {!dragOver && (!traceURL || processingErrorMessage) && <div className='drop-target'>
+    {fileForLocalModeError && <div className='drop-target'>
+      <div>Trace Viewer uses Service Workers to show traces. To view trace:</div>
+      <div style={{ paddingTop: 20 }}>
+        <div>1. Click <a href={fileForLocalModeError}>here</a> to put your trace into the download shelf</div>
+        <div>2. Go to <a href='https://trace.playwright.dev'>trace.playwright.dev</a></div>
+        <div>3. Drop the trace from the download shelf into the page</div>
+      </div>
+    </div>}
+    {!dragOver && !fileForLocalModeError && (!traceURL || processingErrorMessage) && <div className='drop-target'>
       <div className='processing-error'>{processingErrorMessage}</div>
       <div className='title'>Drop Playwright Trace to load</div>
       <div>or</div>