From 34e933f4744bdcb09408c7f3f9fef5d0124ebdf7 Mon Sep 17 00:00:00 2001
From: Max Schmitt <max@schmitt.mx>
Date: Tue, 12 Oct 2021 20:11:57 +0200
Subject: [PATCH] fix(trace-viewer): show warning when opening an empty trace
 (#9449)

---
 .../src/web/traceViewer/ui/actionList.css            | 12 ++++++++++++
 .../src/web/traceViewer/ui/actionList.tsx            | 12 +++++++++++-
 2 files changed, 23 insertions(+), 1 deletion(-)

diff --git a/packages/playwright-core/src/web/traceViewer/ui/actionList.css b/packages/playwright-core/src/web/traceViewer/ui/actionList.css
index f1bb3b9889..c530eafb27 100644
--- a/packages/playwright-core/src/web/traceViewer/ui/actionList.css
+++ b/packages/playwright-core/src/web/traceViewer/ui/actionList.css
@@ -122,3 +122,15 @@
 .action-entry .codicon-warning {
   color: darkorange;
 }
+
+.no-actions-entry {
+  height: 400px;
+  display: grid;
+  place-items: center;
+  text-align: center;
+}
+
+.no-actions-entry-text {
+  font-weight: bold;
+  font-size: 1.3rem;
+}
diff --git a/packages/playwright-core/src/web/traceViewer/ui/actionList.tsx b/packages/playwright-core/src/web/traceViewer/ui/actionList.tsx
index 69522616d4..b62f333261 100644
--- a/packages/playwright-core/src/web/traceViewer/ui/actionList.tsx
+++ b/packages/playwright-core/src/web/traceViewer/ui/actionList.tsx
@@ -45,7 +45,7 @@ export const ActionList: React.FC<ActionListProps> = ({
   }, [selectedAction, actionListRef]);
 
   return <div className='action-list vbox'>
-    <div className='.action-list-title tab-strip'>
+    <div className='action-list-title tab-strip'>
       <div className='tab-element'>
         <div className='tab-label'>Actions</div>
       </div>
@@ -72,6 +72,16 @@ export const ActionList: React.FC<ActionListProps> = ({
       }}
       ref={actionListRef}
     >
+      {actions.length === 0 && <div className='no-actions-entry'>
+        <div>
+          <div className='no-actions-entry-text'>
+            No actions recorded
+          </div>
+          <div>
+            Make sure that the right context was used when recording the trace.
+          </div>
+        </div>
+      </div>}
       {actions.map(action => {
         const { metadata } = action;
         const selectedSuffix = action === selectedAction ? ' selected' : '';