From 103b6121b81ed32450edeb488d096bb8b8186500 Mon Sep 17 00:00:00 2001
From: Pavel Feldman <pavel.feldman@gmail.com>
Date: Fri, 19 Nov 2021 16:29:27 -0800
Subject: [PATCH] fix(trace-viewer): provide hints on how to open trace
 statically (#10450)

---
 .../src/web/traceViewer/index.tsx             | 18 +++++++++++-------
 .../src/web/traceViewer/ui/workbench.css      |  6 +++---
 .../src/web/traceViewer/ui/workbench.tsx      | 19 +++++++++++++++++--
 3 files changed, 31 insertions(+), 12 deletions(-)

diff --git a/packages/playwright-core/src/web/traceViewer/index.tsx b/packages/playwright-core/src/web/traceViewer/index.tsx
index b500dd6d66..3f0241c852 100644
--- a/packages/playwright-core/src/web/traceViewer/index.tsx
+++ b/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'));
 })();
diff --git a/packages/playwright-core/src/web/traceViewer/ui/workbench.css b/packages/playwright-core/src/web/traceViewer/ui/workbench.css
index 40bfc19fe5..2d14f0041f 100644
--- a/packages/playwright-core/src/web/traceViewer/ui/workbench.css
+++ b/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;
diff --git a/packages/playwright-core/src/web/traceViewer/ui/workbench.tsx b/packages/playwright-core/src/web/traceViewer/ui/workbench.tsx
index 36c89ba8d6..d9812dea70 100644
--- a/packages/playwright-core/src/web/traceViewer/ui/workbench.tsx
+++ b/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>