feat(trace): show dialogs, navigations and misc events (#5025)

Author: dgozman

src/cli/traceViewer/traceModel.ts

@@ -15,6 +15,7 @@
  */
 
 import * as trace from '../../trace/traceTypes';
+export * as trace from '../../trace/traceTypes';
 
 export type TraceModel = {
   contexts: ContextEntry[];
@@ -36,11 +37,14 @@ export type VideoEntry = {
   videoId: string;
 };
 
+export type InterestingPageEvent = trace.DialogOpenedEvent | trace.DialogClosedEvent | trace.NavigationEvent | trace.LoadEvent;
+
 export type PageEntry = {
   created: trace.PageCreatedTraceEvent;
   destroyed: trace.PageDestroyedTraceEvent;
   video?: VideoEntry;
   actions: ActionEntry[];
+  interestingEvents: InterestingPageEvent[];
   resources: trace.NetworkResourceTraceEvent[];
 }
 
@@ -88,6 +92,7 @@ export function readTraceFile(events: trace.TraceEvent[], traceModel: TraceModel
           destroyed: undefined as any,
           actions: [],
           resources: [],
+          interestingEvents: [],
         };
         pageEntries.set(event.pageId, pageEntry);
         contextEntries.get(event.contextId)!.pages.push(pageEntry);
@@ -129,11 +134,19 @@ export function readTraceFile(events: trace.TraceEvent[], traceModel: TraceModel
         responseEvents.push(event);
         break;
       }
+      case 'dialog-opened':
+      case 'dialog-closed':
+      case 'navigation':
+      case 'load': {
+        const pageEntry = pageEntries.get(event.pageId)!;
+        pageEntry.interestingEvents.push(event);
+        break;
+      }
     }
 
     const contextEntry = contextEntries.get(event.contextId)!;
-    contextEntry.startTime = Math.min(contextEntry.startTime, (event as any).timestamp);
-    contextEntry.endTime = Math.max(contextEntry.endTime, (event as any).timestamp);
+    contextEntry.startTime = Math.min(contextEntry.startTime, event.timestamp);
+    contextEntry.endTime = Math.max(contextEntry.endTime, event.timestamp);
   }
   traceModel.contexts.push(...contextEntries.values());
 }

src/cli/traceViewer/videoTileGenerator.ts

@@ -81,7 +81,7 @@ function parseMetaInfo(text: string, video: PageVideoTraceEvent): VideoMetaInfo
     width: parseInt(resolutionMatch![1], 10),
     height: parseInt(resolutionMatch![2], 10),
     fps: parseInt(fpsMatch![1], 10),
-    startTime: (video as any).timestamp,
-    endTime: (video as any).timestamp + duration
+    startTime: video.timestamp,
+    endTime: video.timestamp + duration
   };
 }

src/cli/traceViewer/web/common.css

@@ -24,6 +24,7 @@
   --purple: #9C27B0;
   --yellow: #FFC107;
   --blue: #2196F3;
+  --transparent-blue: #2196F355;
   --orange: #d24726;
   --black: #1E1E1E;
   --gray: #888888;

src/cli/traceViewer/web/index.tsx

@@ -14,20 +14,19 @@
  * limitations under the License.
  */
 
-import { TraceModel, VideoMetaInfo } from '../traceModel';
+import { TraceModel, VideoMetaInfo, trace } from '../traceModel';
 import './common.css';
 import './third_party/vscode/codicon.css';
 import { Workbench } from './ui/workbench';
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
-import { ActionTraceEvent } from '../../../trace/traceTypes';
 
 declare global {
   interface Window {
     getTraceModel(): Promise<TraceModel>;
     getVideoMetaInfo(videoId: string): Promise<VideoMetaInfo | undefined>;
     readFile(filePath: string): Promise<string>;
-    renderSnapshot(action: ActionTraceEvent): void;
+    renderSnapshot(action: trace.ActionTraceEvent): void;
   }
 }
 

src/cli/traceViewer/web/ui/timeline.css

@@ -33,7 +33,7 @@
   background-color: rgb(0 0 0 / 10%);
 }
 
-.timeline-label {
+.timeline-time {
   position: absolute;
   top: 4px;
   right: 3px;
@@ -58,16 +58,16 @@
   left: 0;
 }
 
-.timeline-lane.timeline-action-labels {
+.timeline-lane.timeline-labels {
   margin-top: 10px;
 }
 
-.timeline-lane.timeline-actions {
+.timeline-lane.timeline-bars {
   margin-bottom: 10px;
   overflow: visible;
 }
 
-.timeline-action {
+.timeline-bar {
   position: absolute;
   top: 0;
   bottom: 0;
@@ -77,39 +77,52 @@
   background-color: var(--action-color);
 }
 
-.timeline-action.selected {
+.timeline-bar.selected {
   filter: brightness(70%);
   box-shadow: 0 0 0 1px var(--action-color);
 }
 
-.timeline-action.click {
+.timeline-bar.click {
   --action-color: var(--green);
 }
 
-.timeline-action.fill,
-.timeline-action.press {
+.timeline-bar.fill,
+.timeline-bar.press {
   --action-color: var(--orange);
 }
 
-.timeline-action.goto {
+.timeline-bar.goto {
   --action-color: var(--blue);
 }
 
-.timeline-action-label {
+.timeline-bar.dialog {
+  --action-color: var(--transparent-blue);
+}
+
+.timeline-bar.navigation {
+  --action-color: var(--purple);
+}
+
+.timeline-bar.load {
+  --action-color: var(--yellow);
+}
+
+.timeline-label {
   position: absolute;
   top: 0;
   bottom: 0;
   margin-left: 2px;
   background-color: #fffffff0;
   justify-content: center;
   display: none;
+  white-space: nowrap;
 }
 
-.timeline-action-label.selected {
+.timeline-label.selected {
   display: flex;
 }
 
-.timeline-time-bar {
+.timeline-marker {
   display: none;
   position: absolute;
   top: 0;
@@ -119,6 +132,6 @@
   pointer-events: none;
 }
 
-.timeline-time-bar.timeline-time-bar-hover {
+.timeline-marker.timeline-marker-hover {
   background-color: var(--light-pink);
 }