From 3743fe1ef523daea2638712c68a110a9935d1354 Mon Sep 17 00:00:00 2001
From: Pavel Feldman <pavel.feldman@gmail.com>
Date: Tue, 9 Nov 2021 07:40:21 -0800
Subject: [PATCH] feat(trace-viewer): make upload button nice, add disclaimer
 (#10163)

---
 .../src/web/traceViewer/ui/workbench.css      | 20 +++++++++++++++----
 .../src/web/traceViewer/ui/workbench.tsx      | 13 +++++++++---
 2 files changed, 26 insertions(+), 7 deletions(-)

diff --git a/packages/playwright-core/src/web/traceViewer/ui/workbench.css b/packages/playwright-core/src/web/traceViewer/ui/workbench.css
index b43fd9663a..6f8c02d242 100644
--- a/packages/playwright-core/src/web/traceViewer/ui/workbench.css
+++ b/packages/playwright-core/src/web/traceViewer/ui/workbench.css
@@ -21,9 +21,6 @@
   box-shadow: var(--box-shadow);
   flex: auto;
   flex-direction: column;
-  font-size: 24px;
-  color: #666;
-  font-weight: bold;
   background-color: #fffb;
   position: absolute;
   top: 0;
@@ -33,10 +30,25 @@
   z-index: 100;
 }
 
+.drop-target .title {
+  font-size: 24px;
+  color: #666;
+  font-weight: bold;
+}
+
 .drop-target input {
   margin-top: 50px;
 }
 
+.drop-target button {
+  color: rgb(255, 255, 255);
+  background-color: rgb(0, 122, 204);
+  padding: 6px 4px;
+  border: none;
+  margin: 40px 0;
+  cursor: pointer;
+}
+
 .progress {
   position: relative;
   margin: auto;
@@ -85,7 +97,7 @@
   margin-left: 16px;
 }
 
-.workbench .title {
+.workbench .header .title {
   margin-left: 16px;
 }
 
diff --git a/packages/playwright-core/src/web/traceViewer/ui/workbench.tsx b/packages/playwright-core/src/web/traceViewer/ui/workbench.tsx
index 744754176d..1a4521cea6 100644
--- a/packages/playwright-core/src/web/traceViewer/ui/workbench.tsx
+++ b/packages/playwright-core/src/web/traceViewer/ui/workbench.tsx
@@ -56,7 +56,7 @@ export const Workbench: React.FunctionComponent<{
     processTraceFile(event.dataTransfer.files[0]);
   };
 
-  const handleFileInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+  const handleFileInputChange = (event: any) => {
     event.preventDefault();
     if (!event.target.files)
       return;
@@ -139,8 +139,15 @@ export const Workbench: React.FunctionComponent<{
       <div className='inner-progress' style={{ width: (100 * progress.done / progress.total) + '%' }}></div>
     </div>}
     {!dragOver && !traceURL && <div className='drop-target'>
-      <div>Drop to upload a Playwright Trace</div>
-      <input type='file' onChange={handleFileInputChange} />
+      <div className='title'>Drop Playwright Trace to load</div>
+      <button onClick={() => {
+        const input = document.createElement('input');
+        input.type = 'file';
+        input.click();
+        input.addEventListener('change', e => handleFileInputChange(e));
+      }}>...or select file</button>
+      <div>Playwright Trace Viewer is a progressive web app, it does not send your trace anywhere,
+        it opens it locally instead.</div>
     </div>}
     {dragOver && <div className='drop-target'
       onDragLeave={() => { setDragOver(false); }}