From 39c3482980e98d1692d907d882693fd60ba17fa0 Mon Sep 17 00:00:00 2001
From: Pavel Feldman <pavel.feldman@gmail.com>
Date: Tue, 21 Mar 2023 10:03:49 -0700
Subject: [PATCH] cherry-pick(#21839): chore: sort tracing actions by wall time

---
 .../playwright-core/src/server/dispatchers/dispatcher.ts   | 2 +-
 packages/playwright-core/src/server/instrumentation.ts     | 1 +
 packages/playwright-core/src/server/recorder.ts            | 1 +
 .../playwright-core/src/server/trace/recorder/tracing.ts   | 2 +-
 packages/playwright-test/src/worker/testInfo.ts            | 1 -
 packages/protocol/src/callMetadata.ts                      | 2 +-
 packages/trace-viewer/src/ui/modelUtil.ts                  | 7 +++----
 packages/trace-viewer/src/ui/watchMode.tsx                 | 2 +-
 8 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/packages/playwright-core/src/server/dispatchers/dispatcher.ts b/packages/playwright-core/src/server/dispatchers/dispatcher.ts
index 5bf9c3e7ae..6676a01d33 100644
--- a/packages/playwright-core/src/server/dispatchers/dispatcher.ts
+++ b/packages/playwright-core/src/server/dispatchers/dispatcher.ts
@@ -246,7 +246,7 @@ export class DispatcherConnection {
     const sdkObject = dispatcher._object instanceof SdkObject ? dispatcher._object : undefined;
     const callMetadata: CallMetadata = {
       id: `call@${id}`,
-      wallTime: validMetadata.wallTime,
+      wallTime: validMetadata.wallTime || Date.now(),
       location: validMetadata.location,
       apiName: validMetadata.apiName,
       internal: validMetadata.internal,
diff --git a/packages/playwright-core/src/server/instrumentation.ts b/packages/playwright-core/src/server/instrumentation.ts
index 147d188988..7fba75dee4 100644
--- a/packages/playwright-core/src/server/instrumentation.ts
+++ b/packages/playwright-core/src/server/instrumentation.ts
@@ -108,6 +108,7 @@ export function serverSideCallMetadata(): CallMetadata {
     id: '',
     startTime: 0,
     endTime: 0,
+    wallTime: Date.now(),
     type: 'Internal',
     method: '',
     params: {},
diff --git a/packages/playwright-core/src/server/recorder.ts b/packages/playwright-core/src/server/recorder.ts
index e9f4dab910..0dfbfab0b0 100644
--- a/packages/playwright-core/src/server/recorder.ts
+++ b/packages/playwright-core/src/server/recorder.ts
@@ -574,6 +574,7 @@ class ContextRecorder extends EventEmitter {
         frameId: frame.guid,
         startTime: monotonicTime(),
         endTime: 0,
+        wallTime: Date.now(),
         type: 'Frame',
         method: action,
         params,
diff --git a/packages/playwright-core/src/server/trace/recorder/tracing.ts b/packages/playwright-core/src/server/trace/recorder/tracing.ts
index 1ee1f774a8..ffdc644496 100644
--- a/packages/playwright-core/src/server/trace/recorder/tracing.ts
+++ b/packages/playwright-core/src/server/trace/recorder/tracing.ts
@@ -489,7 +489,7 @@ function createBeforeActionTraceEvent(metadata: CallMetadata): trace.BeforeActio
     class: metadata.type,
     method: metadata.method,
     params: metadata.params,
-    wallTime: metadata.wallTime || Date.now(),
+    wallTime: metadata.wallTime,
     pageId: metadata.pageId,
   };
 }
diff --git a/packages/playwright-test/src/worker/testInfo.ts b/packages/playwright-test/src/worker/testInfo.ts
index 21821cd90b..7d0c689544 100644
--- a/packages/playwright-test/src/worker/testInfo.ts
+++ b/packages/playwright-test/src/worker/testInfo.ts
@@ -249,7 +249,6 @@ export class TestInfoImpl implements TestInfo {
       stepId,
       ...data,
       location,
-      wallTime: Date.now(),
     };
     this._onStepBegin(payload);
     return step;
diff --git a/packages/protocol/src/callMetadata.ts b/packages/protocol/src/callMetadata.ts
index 1877310c0c..7681c5f5f9 100644
--- a/packages/protocol/src/callMetadata.ts
+++ b/packages/protocol/src/callMetadata.ts
@@ -33,7 +33,7 @@ export type CallMetadata = {
   // through the dispatcher, so is always excluded from inspector / tracing.
   isServerSide?: boolean;
   // Client wall time.
-  wallTime?: number;
+  wallTime: number;
   location?: { file: string, line?: number, column?: number };
   log: string[];
   error?: SerializedError;
diff --git a/packages/trace-viewer/src/ui/modelUtil.ts b/packages/trace-viewer/src/ui/modelUtil.ts
index e040077860..ac0714ee91 100644
--- a/packages/trace-viewer/src/ui/modelUtil.ts
+++ b/packages/trace-viewer/src/ui/modelUtil.ts
@@ -66,9 +66,8 @@ export class MultiTraceModel {
     this.events = ([] as EventTraceEvent[]).concat(...contexts.map(c => c.events));
     this.hasSource = contexts.some(c => c.hasSource);
 
-    this.actions.sort((a1, a2) => (a1.startTime - a2.startTime) || (a1.endTime - a2.endTime));
     this.events.sort((a1, a2) => a1.time - a2.time);
-    this.actions = dedupeActions(this.actions);
+    this.actions = dedupeAndSortActions(this.actions);
     this.sources = collectSources(this.actions);
   }
 }
@@ -85,7 +84,7 @@ function indexModel(context: ContextEntry) {
     (event as any)[contextSymbol] = context;
 }
 
-function dedupeActions(actions: ActionTraceEvent[]) {
+function dedupeAndSortActions(actions: ActionTraceEvent[]) {
   const callActions = actions.filter(a => a.callId.startsWith('call@'));
   const expectActions = actions.filter(a => a.callId.startsWith('expect@'));
 
@@ -115,7 +114,7 @@ function dedupeActions(actions: ActionTraceEvent[]) {
     result.push(expectAction);
   }
 
-  result.sort((a1, a2) => a1.startTime - a2.startTime);
+  result.sort((a1, a2) => (a1.wallTime - a2.wallTime));
   for (let i = 1; i < result.length; ++i)
     (result[i] as any)[prevInListSymbol] = result[i - 1];
   return result;
diff --git a/packages/trace-viewer/src/ui/watchMode.tsx b/packages/trace-viewer/src/ui/watchMode.tsx
index 816da62ade..81a6ff90b9 100644
--- a/packages/trace-viewer/src/ui/watchMode.tsx
+++ b/packages/trace-viewer/src/ui/watchMode.tsx
@@ -413,7 +413,7 @@ const TestList: React.FC<{
     render={treeItem => {
       return <div className='hbox watch-mode-list-item'>
         <div className='watch-mode-list-item-title'>{treeItem.title}</div>
-        {!!treeItem.duration && <div className='watch-mode-list-item-time'>{msToString(treeItem.duration)}</div>}
+        {!!treeItem.duration && treeItem.status !== 'skipped' && <div className='watch-mode-list-item-time'>{msToString(treeItem.duration)}</div>}
         <Toolbar noMinHeight={true} noShadow={true}>
           <ToolbarButton icon='play' title='Run' onClick={() => runTreeItem(treeItem)} disabled={!!runningState}></ToolbarButton>
           <ToolbarButton icon='go-to-file' title='Open in VS Code' onClick={() => sendMessageNoReply('open', { location: locationToOpen(treeItem) })}></ToolbarButton>