feat(trace-viewer): make upload button nice, add disclaimer (#10163)

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;
 }
 

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); }}