cherry-pick(#21839): chore: sort tracing actions by wall time

Author: pavelfeldman

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,

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: {},

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,

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

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;

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;

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;

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>