fix(trace-viewer): include waitFor* in trace viewer (#7413)

src/client/android.ts

@@ -26,7 +26,6 @@ import { Page } from './page';
 import { TimeoutSettings } from '../utils/timeoutSettings';
 import { Waiter } from './waiter';
 import { EventEmitter } from 'events';
-import { ParsedStackTrace } from '../utils/stackTrace';
 
 type Direction = 'down' | 'up' | 'left' | 'right';
 type SpeedOptions = { speed?: number };
@@ -236,10 +235,10 @@ export class AndroidDevice extends ChannelOwner<channels.AndroidDeviceChannel, c
   }
 
   async waitForEvent(event: string, optionsOrPredicate: types.WaitForEventOptions = {}): Promise<any> {
-    return this._wrapApiCall(async (channel: channels.AndroidDeviceChannel, stackTrace: ParsedStackTrace) => {
+    return this._wrapApiCall(async (channel: channels.AndroidDeviceChannel) => {
       const timeout = this._timeoutSettings.timeout(typeof optionsOrPredicate === 'function' ? {} : optionsOrPredicate);
       const predicate = typeof optionsOrPredicate === 'function' ? optionsOrPredicate : optionsOrPredicate.predicate;
-      const waiter = Waiter.createForEvent(this, event, stackTrace);
+      const waiter = Waiter.createForEvent(this, event);
       waiter.rejectOnTimeout(timeout, `Timeout while waiting for event "${event}"`);
       if (event !== Events.AndroidDevice.Close)
         waiter.rejectOnEvent(this, Events.AndroidDevice.Close, new Error('Device closed'));

src/client/browserContext.ts

@@ -33,7 +33,6 @@ import * as api from '../../types/types';
 import * as structs from '../../types/structs';
 import { CDPSession } from './cdpSession';
 import { Tracing } from './tracing';
-import { ParsedStackTrace } from '../utils/stackTrace';
 
 export class BrowserContext extends ChannelOwner<channels.BrowserContextChannel, channels.BrowserContextInitializer> implements api.BrowserContext {
   _pages = new Set<Page>();
@@ -270,10 +269,10 @@ export class BrowserContext extends ChannelOwner<channels.BrowserContextChannel,
   }
 
   async waitForEvent(event: string, optionsOrPredicate: WaitForEventOptions = {}): Promise<any> {
-    return this._wrapApiCall(async (channel: channels.BrowserContextChannel, stackTrace: ParsedStackTrace) => {
+    return this._wrapApiCall(async (channel: channels.BrowserContextChannel) => {
       const timeout = this._timeoutSettings.timeout(typeof optionsOrPredicate === 'function'  ? {} : optionsOrPredicate);
       const predicate = typeof optionsOrPredicate === 'function'  ? optionsOrPredicate : optionsOrPredicate.predicate;
-      const waiter = Waiter.createForEvent(this, event, stackTrace);
+      const waiter = Waiter.createForEvent(this, event);
       waiter.rejectOnTimeout(timeout, `Timeout while waiting for event "${event}"`);
       if (event !== Events.BrowserContext.Close)
         waiter.rejectOnEvent(this, Events.BrowserContext.Close, new Error('Context closed'));

src/client/channelOwner.ts

@@ -107,18 +107,6 @@ export abstract class ChannelOwner<T extends channels.Channel = channels.Channel
     }
   }
 
-  _waitForEventInfoBefore(waitId: string, event: string, stackTrace: ParsedStackTrace) {
-    this._connection.sendMessageToServer(this, 'waitForEventInfo', { info: { waitId, phase: 'before', event } }, stackTrace).catch(() => {});
-  }
-
-  _waitForEventInfoAfter(waitId: string, error: string | undefined) {
-    this._connection.sendMessageToServer(this, 'waitForEventInfo', { info: { waitId, phase: 'after', error } }, null).catch(() => {});
-  }
-
-  _waitForEventInfoLog(waitId: string, message: string) {
-    this._connection.sendMessageToServer(this, 'waitForEventInfo', { info: { waitId, phase: 'log', message } }, null).catch(() => {});
-  }
-
   private toJSON() {
     // Jest's expect library tries to print objects sometimes.
     // RPC objects can contain links to lots of other objects,

src/client/electron.ts

@@ -18,7 +18,6 @@ import type { BrowserWindow } from 'electron';
 import * as structs from '../../types/structs';
 import * as api from '../../types/types';
 import * as channels from '../protocol/channels';
-import { ParsedStackTrace } from '../utils/stackTrace';
 import { TimeoutSettings } from '../utils/timeoutSettings';
 import { headersObjectToArray } from '../utils/utils';
 import { BrowserContext } from './browserContext';
@@ -101,16 +100,16 @@ export class ElectronApplication extends ChannelOwner<channels.ElectronApplicati
   }
 
   async close() {
-    return this._wrapApiCall(async (channel: channels.ElectronApplicationChannel, stackTrace: ParsedStackTrace) => {
+    return this._wrapApiCall(async (channel: channels.ElectronApplicationChannel) => {
       await channel.close();
     });
   }
 
   async waitForEvent(event: string, optionsOrPredicate: WaitForEventOptions = {}): Promise<any> {
-    return this._wrapApiCall(async (channel: channels.ElectronApplicationChannel, stackTrace: ParsedStackTrace) => {
+    return this._wrapApiCall(async (channel: channels.ElectronApplicationChannel) => {
       const timeout = this._timeoutSettings.timeout(typeof optionsOrPredicate === 'function' ? {} : optionsOrPredicate);
       const predicate = typeof optionsOrPredicate === 'function' ? optionsOrPredicate : optionsOrPredicate.predicate;
-      const waiter = Waiter.createForEvent(this, event, stackTrace);
+      const waiter = Waiter.createForEvent(this, event);
       waiter.rejectOnTimeout(timeout, `Timeout while waiting for event "${event}"`);
       if (event !== Events.ElectronApplication.Close)
         waiter.rejectOnEvent(this, Events.ElectronApplication.Close, new Error('Electron application closed'));

src/client/frame.ts

@@ -30,7 +30,6 @@ import { LifecycleEvent, URLMatch, SelectOption, SelectOptionOptions, FilePayloa
 import { urlMatches } from './clientHelper';
 import * as api from '../../types/types';
 import * as structs from '../../types/structs';
-import { ParsedStackTrace } from '../utils/stackTrace';
 
 export type WaitForNavigationOptions = {
   timeout?: number,
@@ -94,8 +93,8 @@ export class Frame extends ChannelOwner<channels.FrameChannel, channels.FrameIni
     });
   }
 
-  private _setupNavigationWaiter(options: { timeout?: number }, stackTrace: ParsedStackTrace): Waiter {
+  private _setupNavigationWaiter(options: { timeout?: number }): Waiter {
-    const waiter = new Waiter(this, '', stackTrace);
+    const waiter = new Waiter(this._page!, '');
     if (this._page!.isClosed())
       waiter.rejectImmediately(new Error('Navigation failed because page was closed!'));
     waiter.rejectOnEvent(this._page!, Events.Page.Close, new Error('Navigation failed because page was closed!'));
@@ -107,9 +106,9 @@ export class Frame extends ChannelOwner<channels.FrameChannel, channels.FrameIni
   }
 
   async waitForNavigation(options: WaitForNavigationOptions = {}): Promise<network.Response | null> {
-    return this._wrapApiCall(async (channel: channels.FrameChannel, stackTrace: ParsedStackTrace) => {
+    return this._wrapApiCall(async (channel: channels.FrameChannel) => {
       const waitUntil = verifyLoadState('waitUntil', options.waitUntil === undefined ? 'load' : options.waitUntil);
-      const waiter = this._setupNavigationWaiter(options, stackTrace);
+      const waiter = this._setupNavigationWaiter(options);
 
       const toUrl = typeof options.url === 'string' ? ` to "${options.url}"` : '';
       waiter.log(`waiting for navigation${toUrl} until "${waitUntil}"`);
@@ -145,8 +144,8 @@ export class Frame extends ChannelOwner<channels.FrameChannel, channels.FrameIni
     state = verifyLoadState('state', state);
     if (this._loadStates.has(state))
       return;
-    return this._wrapApiCall(async (channel: channels.FrameChannel, stackTrace: ParsedStackTrace) => {
+    return this._wrapApiCall(async (channel: channels.FrameChannel) => {
-      const waiter = this._setupNavigationWaiter(options, stackTrace);
+      const waiter = this._setupNavigationWaiter(options);
       await waiter.waitForEvent<LifecycleEvent>(this._eventEmitter, 'loadstate', s => {
         waiter.log(`  "${s}" event fired`);
         return s === state;

src/client/network.ts

@@ -26,7 +26,6 @@ import { Events } from './events';
 import { Page } from './page';
 import { Waiter } from './waiter';
 import * as api from '../../types/types';
-import { ParsedStackTrace } from '../utils/stackTrace';
 
 export type NetworkCookie = {
   name: string,
@@ -476,10 +475,10 @@ export class WebSocket extends ChannelOwner<channels.WebSocketChannel, channels.
   }
 
   async waitForEvent(event: string, optionsOrPredicate: WaitForEventOptions = {}): Promise<any> {
-    return this._wrapApiCall(async (channel: channels.WebSocketChannel, stackTrace: ParsedStackTrace) => {
+    return this._wrapApiCall(async (channel: channels.WebSocketChannel) => {
       const timeout = this._page._timeoutSettings.timeout(typeof optionsOrPredicate === 'function' ? {} : optionsOrPredicate);
       const predicate = typeof optionsOrPredicate === 'function' ? optionsOrPredicate : optionsOrPredicate.predicate;
-      const waiter = Waiter.createForEvent(this, event, stackTrace);
+      const waiter = Waiter.createForEvent(this, event);
       waiter.rejectOnTimeout(timeout, `Timeout while waiting for event "${event}"`);
       if (event !== Events.WebSocket.Error)
         waiter.rejectOnEvent(this, Events.WebSocket.Error, new Error('Socket error'));

src/client/page.ts

@@ -46,7 +46,6 @@ import { isString, isRegExp, isObject, mkdirIfNeeded, headersObjectToArray } fro
 import { isSafeCloseError } from '../utils/errors';
 import { Video } from './video';
 import { Artifact } from './artifact';
-import { ParsedStackTrace } from '../utils/stackTrace';
 
 type PDFOptions = Omit<channels.PagePdfParams, 'width' | 'height' | 'margin'> & {
   width?: string | number,
@@ -349,7 +348,7 @@ export class Page extends ChannelOwner<channels.PageChannel, channels.PageInitia
   }
 
   async waitForRequest(urlOrPredicate: string | RegExp | ((r: Request) => boolean | Promise<boolean>), options: { timeout?: number } = {}): Promise<Request> {
-    return this._wrapApiCall(async (channel: channels.PageChannel, stackTrace: ParsedStackTrace) => {
+    return this._wrapApiCall(async (channel: channels.PageChannel) => {
       const predicate = (request: Request) => {
         if (isString(urlOrPredicate) || isRegExp(urlOrPredicate))
           return urlMatches(request.url(), urlOrPredicate);
@@ -357,12 +356,12 @@ export class Page extends ChannelOwner<channels.PageChannel, channels.PageInitia
       };
       const trimmedUrl = trimUrl(urlOrPredicate);
       const logLine = trimmedUrl ? `waiting for request ${trimmedUrl}` : undefined;
-      return this._waitForEvent(Events.Page.Request, { predicate, timeout: options.timeout }, stackTrace, logLine);
+      return this._waitForEvent(Events.Page.Request, { predicate, timeout: options.timeout }, logLine);
     });
   }
 
   async waitForResponse(urlOrPredicate: string | RegExp | ((r: Response) => boolean | Promise<boolean>), options: { timeout?: number } = {}): Promise<Response> {
-    return this._wrapApiCall(async (channel: channels.PageChannel, stackTrace: ParsedStackTrace) => {
+    return this._wrapApiCall(async (channel: channels.PageChannel) => {
       const predicate = (response: Response) => {
         if (isString(urlOrPredicate) || isRegExp(urlOrPredicate))
           return urlMatches(response.url(), urlOrPredicate);
@@ -370,20 +369,20 @@ export class Page extends ChannelOwner<channels.PageChannel, channels.PageInitia
       };
       const trimmedUrl = trimUrl(urlOrPredicate);
       const logLine = trimmedUrl ? `waiting for response ${trimmedUrl}` : undefined;
-      return this._waitForEvent(Events.Page.Response, { predicate, timeout: options.timeout }, stackTrace, logLine);
+      return this._waitForEvent(Events.Page.Response, { predicate, timeout: options.timeout }, logLine);
     });
   }
 
   async waitForEvent(event: string, optionsOrPredicate: WaitForEventOptions = {}): Promise<any> {
-    return this._wrapApiCall(async (channel: channels.PageChannel, stackTrace: ParsedStackTrace) => {
+    return this._wrapApiCall(async (channel: channels.PageChannel) => {
-      return this._waitForEvent(event, optionsOrPredicate, stackTrace, `waiting for event "${event}"`);
+      return this._waitForEvent(event, optionsOrPredicate, `waiting for event "${event}"`);
     });
   }
 
-  private async _waitForEvent(event: string, optionsOrPredicate: WaitForEventOptions, stackTrace: ParsedStackTrace, logLine?: string): Promise<any> {
+  private async _waitForEvent(event: string, optionsOrPredicate: WaitForEventOptions, logLine?: string): Promise<any> {
     const timeout = this._timeoutSettings.timeout(typeof optionsOrPredicate === 'function' ? {} : optionsOrPredicate);
     const predicate = typeof optionsOrPredicate === 'function' ? optionsOrPredicate : optionsOrPredicate.predicate;
-    const waiter = Waiter.createForEvent(this, event, stackTrace);
+    const waiter = Waiter.createForEvent(this, event);
     if (logLine)
       waiter.log(logLine);
     waiter.rejectOnTimeout(timeout, `Timeout while waiting for event "${event}"`);

src/client/waiter.ts

@@ -15,9 +15,10 @@
  */
 
 import { EventEmitter } from 'events';
-import { ParsedStackTrace, rewriteErrorMessage } from '../utils/stackTrace';
+import { rewriteErrorMessage } from '../utils/stackTrace';
 import { TimeoutError } from '../utils/errors';
 import { createGuid } from '../utils/utils';
+import * as channels from '../protocol/channels';
 import { ChannelOwner } from './channelOwner';
 
 export class Waiter {
@@ -26,21 +27,23 @@ export class Waiter {
   private _immediateError?: Error;
   // TODO: can/should we move these logs into wrapApiCall?
   private _logs: string[] = [];
-  private _channelOwner: ChannelOwner;
+  private _channel: channels.EventTargetChannel;
   private _waitId: string;
   private _error: string | undefined;
 
-  constructor(channelOwner: ChannelOwner, event: string, stackTrace: ParsedStackTrace) {
+  constructor(channelOwner: ChannelOwner<channels.EventTargetChannel>, event: string) {
     this._waitId = createGuid();
-    this._channelOwner = channelOwner;
+    this._channel = channelOwner._channel;
-    this._channelOwner._waitForEventInfoBefore(this._waitId, event, stackTrace);
+    channelOwner._wrapApiCall(async (channel: channels.EventTargetChannel) => {
+      channel.waitForEventInfo({ info: { waitId: this._waitId, phase: 'before', event } }).catch(() => {});
+    });
     this._dispose = [
-      () => this._channelOwner._waitForEventInfoAfter(this._waitId, this._error)
+      () => this._channel.waitForEventInfo({ info: { waitId: this._waitId, phase: 'after', error: this._error } }).catch(() => {})
     ];
   }
 
-  static createForEvent(channelOwner: ChannelOwner, event: string, stackTrace: ParsedStackTrace) {
+  static createForEvent(channelOwner: ChannelOwner<channels.EventTargetChannel>, event: string) {
-    return new Waiter(channelOwner, event, stackTrace);
+    return new Waiter(channelOwner, event);
   }
 
   async waitForEvent<T = void>(emitter: EventEmitter, event: string, predicate?: (arg: T) => boolean | Promise<boolean>): Promise<T> {
@@ -89,7 +92,7 @@ export class Waiter {
 
   log(s: string) {
     this._logs.push(s);
-    this._channelOwner._waitForEventInfoLog(this._waitId, s);
+    this._channel.waitForEventInfo({ info: { waitId: this._waitId, phase: 'log', message: s } }).catch(() => {});
   }
 
   private _rejectOn(promise: Promise<any>, dispose?: () => void) {

src/dispatchers/dispatcher.ts

@@ -77,7 +77,7 @@ export class Dispatcher<Type extends { guid: string }, Initializer> extends Even
 
     (object as any)[dispatcherSymbol] = this;
     if (this._parent)
-      this._connection.sendMessageToClient(this._parent._guid, type, '__create__', { type, initializer, guid });
+      this._connection.sendMessageToClient(this._parent._guid, type, '__create__', { type, initializer, guid }, this._parent._object);
   }
 
   _dispatchEvent(method: string, params: Dispatcher<any, any> | any = {}) {
@@ -142,8 +142,8 @@ export class DispatcherConnection {
       const eventMetadata: CallMetadata = {
         id: `event@${++lastEventId}`,
         objectId: sdkObject?.guid,
-        pageId: sdkObject?.attribution.page?.guid,
+        pageId: sdkObject?.attribution?.page?.guid,
-        frameId: sdkObject?.attribution.frame?.guid,
+        frameId: sdkObject?.attribution?.frame?.guid,
         startTime: monotonicTime(),
         endTime: 0,
         type,
@@ -152,7 +152,7 @@ export class DispatcherConnection {
         log: [],
         snapshots: []
       };
-      sdkObject.instrumentation.onEvent(sdkObject, eventMetadata);
+      sdkObject.instrumentation?.onEvent(sdkObject, eventMetadata);
     }
     this.onmessage({ guid, method, params });
   }
@@ -176,8 +176,6 @@ export class DispatcherConnection {
     };
     const scheme = createScheme(tChannel);
     this._validateParams = (type: string, method: string, params: any): any => {
-      if (method === 'waitForEventInfo')
-        return tOptional(scheme['WaitForEventInfo'])(params.info, '');
       const name = type + method[0].toUpperCase() + method.substring(1) + 'Params';
       if (!scheme[name])
         throw new ValidationError(`Unknown scheme for ${type}.${method}`);
@@ -221,8 +219,8 @@ export class DispatcherConnection {
       id: `call@${id}`,
       ...validMetadata,
       objectId: sdkObject?.guid,
-      pageId: sdkObject?.attribution.page?.guid,
+      pageId: sdkObject?.attribution?.page?.guid,
-      frameId: sdkObject?.attribution.frame?.guid,
+      frameId: sdkObject?.attribution?.frame?.guid,
       startTime: monotonicTime(),
       endTime: 0,
       type: dispatcher._type,

src/protocol/channels.ts

@@ -35,14 +35,6 @@ export type Metadata = {
   apiName?: string,
 };
 
-export type WaitForEventInfo = {
-  waitId: string,
-  phase: 'before' | 'after' | 'log',
-  event?: string,
-  message?: string,
-  error?: string,
-};
-
 export type Point = {
   x: number,
   y: number,
@@ -604,11 +596,30 @@ export type BrowserStopTracingResult = {
   binary: Binary,
 };
 
+// ----------- EventTarget -----------
+export type EventTargetInitializer = {};
+export interface EventTargetChannel extends Channel {
+  waitForEventInfo(params: EventTargetWaitForEventInfoParams, metadata?: Metadata): Promise<EventTargetWaitForEventInfoResult>;
+}
+export type EventTargetWaitForEventInfoParams = {
+  info: {
+    waitId: string,
+    phase: 'before' | 'after' | 'log',
+    event?: string,
+    message?: string,
+    error?: string,
+  },
+};
+export type EventTargetWaitForEventInfoOptions = {
+
+};
+export type EventTargetWaitForEventInfoResult = void;
+
 // ----------- BrowserContext -----------
 export type BrowserContextInitializer = {
   isChromium: boolean,
 };
-export interface BrowserContextChannel extends Channel {
+export interface BrowserContextChannel extends EventTargetChannel {
   on(event: 'bindingCall', callback: (params: BrowserContextBindingCallEvent) => void): this;
   on(event: 'close', callback: (params: BrowserContextCloseEvent) => void): this;
   on(event: 'page', callback: (params: BrowserContextPageEvent) => void): this;
@@ -868,7 +879,7 @@ export type PageInitializer = {
   isClosed: boolean,
   opener?: PageChannel,
 };
-export interface PageChannel extends Channel {
+export interface PageChannel extends EventTargetChannel {
   on(event: 'bindingCall', callback: (params: PageBindingCallEvent) => void): this;
   on(event: 'close', callback: (params: PageCloseEvent) => void): this;
   on(event: 'console', callback: (params: PageConsoleEvent) => void): this;
@@ -2460,7 +2471,7 @@ export type RemoteAddr = {
 export type WebSocketInitializer = {
   url: string,
 };
-export interface WebSocketChannel extends Channel {
+export interface WebSocketChannel extends EventTargetChannel {
   on(event: 'open', callback: (params: WebSocketOpenEvent) => void): this;
   on(event: 'frameSent', callback: (params: WebSocketFrameSentEvent) => void): this;
   on(event: 'frameReceived', callback: (params: WebSocketFrameReceivedEvent) => void): this;
@@ -2717,7 +2728,7 @@ export type ElectronLaunchResult = {
 export type ElectronApplicationInitializer = {
   context: BrowserContextChannel,
 };
-export interface ElectronApplicationChannel extends Channel {
+export interface ElectronApplicationChannel extends EventTargetChannel {
   on(event: 'close', callback: (params: ElectronApplicationCloseEvent) => void): this;
   browserWindow(params: ElectronApplicationBrowserWindowParams, metadata?: Metadata): Promise<ElectronApplicationBrowserWindowResult>;
   evaluateExpression(params: ElectronApplicationEvaluateExpressionParams, metadata?: Metadata): Promise<ElectronApplicationEvaluateExpressionResult>;
@@ -2807,7 +2818,7 @@ export type AndroidDeviceInitializer = {
   model: string,
   serial: string,
 };
-export interface AndroidDeviceChannel extends Channel {
+export interface AndroidDeviceChannel extends EventTargetChannel {
   on(event: 'webViewAdded', callback: (params: AndroidDeviceWebViewAddedEvent) => void): this;
   on(event: 'webViewRemoved', callback: (params: AndroidDeviceWebViewRemovedEvent) => void): this;
   wait(params: AndroidDeviceWaitParams, metadata?: Metadata): Promise<AndroidDeviceWaitResult>;
@@ -3237,6 +3248,12 @@ export type SocksSocketEndOptions = {};
 export type SocksSocketEndResult = void;
 
 export const commandsWithTracingSnapshots = new Set([
+  'EventTarget.waitForEventInfo',
+  'BrowserContext.waitForEventInfo',
+  'Page.waitForEventInfo',
+  'WebSocket.waitForEventInfo',
+  'ElectronApplication.waitForEventInfo',
+  'AndroidDevice.waitForEventInfo',
   'Page.goBack',
   'Page.goForward',
   'Page.reload',
@@ -3285,7 +3302,9 @@ export const commandsWithTracingSnapshots = new Set([
   'Frame.waitForFunction',
   'Frame.waitForSelector',
   'JSHandle.evaluateExpression',
+  'ElementHandle.evaluateExpression',
   'JSHandle.evaluateExpressionHandle',
+  'ElementHandle.evaluateExpressionHandle',
   'ElementHandle.evalOnSelector',
   'ElementHandle.evalOnSelectorAll',
   'ElementHandle.check',

src/protocol/protocol.yml

@@ -31,21 +31,6 @@ Metadata:
     apiName: string?
 
 
-WaitForEventInfo:
-  type: object
-  properties:
-    waitId: string
-    phase:
-      type: enum
-      literals:
-      - before
-      - after
-      - log
-    event: string?
-    message: string?
-    error: string?
-
-
 Point:
   type: object
   properties:
@@ -504,10 +489,33 @@ Browser:
     close:
 
 
+EventTarget:
+  type: interface
+
+  commands:
+    waitForEventInfo:
+      parameters:
+        info:
+          type: object
+          properties:
+            waitId: string
+            phase:
+              type: enum
+              literals:
+              - before
+              - after
+              - log
+            event: string?
+            message: string?
+            error: string?
+      tracing:
+        snapshot: true
 
 BrowserContext:
   type: interface
 
+  extends: EventTarget
+
   initializer:
     isChromium: boolean
 
@@ -691,6 +699,8 @@ BrowserContext:
 Page:
   type: interface
 
+  extends: EventTarget
+
   initializer:
     mainFrame: Frame
     viewportSize:
@@ -2128,6 +2138,8 @@ RemoteAddr:
 WebSocket:
   type: interface
 
+  extends: EventTarget
+
   initializer:
     url: string
 
@@ -2346,6 +2358,8 @@ Electron:
 ElectronApplication:
   type: interface
 
+  extends: EventTarget
+
   initializer:
     context: BrowserContext
 
@@ -2413,6 +2427,8 @@ AndroidSocket:
 AndroidDevice:
   type: interface
 
+  extends: EventTarget
+
   initializer:
     model: string
     serial: string

src/protocol/validator.ts

@@ -43,13 +43,6 @@ export function createScheme(tChannel: (name: string) => Validator): Scheme {
     stack: tOptional(tArray(tType('StackFrame'))),
     apiName: tOptional(tString),
   });
-  scheme.WaitForEventInfo = tObject({
-    waitId: tString,
-    phase: tEnum(['before', 'after', 'log']),
-    event: tOptional(tString),
-    message: tOptional(tString),
-    error: tOptional(tString),
-  });
   scheme.Point = tObject({
     x: tNumber,
     y: tNumber,
@@ -335,6 +328,20 @@ export function createScheme(tChannel: (name: string) => Validator): Scheme {
     categories: tOptional(tArray(tString)),
   });
   scheme.BrowserStopTracingParams = tOptional(tObject({}));
+  scheme.EventTargetWaitForEventInfoParams = tObject({
+    info: tObject({
+      waitId: tString,
+      phase: tEnum(['before', 'after', 'log']),
+      event: tOptional(tString),
+      message: tOptional(tString),
+      error: tOptional(tString),
+    }),
+  });
+  scheme.BrowserContextWaitForEventInfoParams = tType('EventTargetWaitForEventInfoParams');
+  scheme.PageWaitForEventInfoParams = tType('EventTargetWaitForEventInfoParams');
+  scheme.WebSocketWaitForEventInfoParams = tType('EventTargetWaitForEventInfoParams');
+  scheme.ElectronApplicationWaitForEventInfoParams = tType('EventTargetWaitForEventInfoParams');
+  scheme.AndroidDeviceWaitForEventInfoParams = tType('EventTargetWaitForEventInfoParams');
   scheme.BrowserContextAddCookiesParams = tObject({
     cookies: tArray(tType('SetNetworkCookie')),
   });

src/server/trace/recorder/tracing.ts

@@ -133,7 +133,7 @@ export class Tracing implements InstrumentationListener {
       return;
     if (!this._snapshotter.started())
       return;
-    if (!this._shouldCaptureSnapshot(metadata))
+    if (!shouldCaptureSnapshot(metadata))
       return;
     const snapshotName = `${name}@${metadata.id}`;
     metadata.snapshots.push({ title: name, snapshotName });
@@ -162,7 +162,7 @@ export class Tracing implements InstrumentationListener {
     }
     pendingCall.afterSnapshot = this._captureSnapshot('after', sdkObject, metadata);
     await pendingCall.afterSnapshot;
-    const event: trace.ActionTraceEvent = { type: 'action', metadata, hasSnapshot: this._shouldCaptureSnapshot(metadata) };
+    const event: trace.ActionTraceEvent = { type: 'action', metadata, hasSnapshot: shouldCaptureSnapshot(metadata) };
     this._appendTraceEvent(event);
     this._pendingCalls.delete(metadata.id);
   }
@@ -225,8 +225,8 @@ export class Tracing implements InstrumentationListener {
       await fs.promises.appendFile(this._traceFile!, JSON.stringify(event) + '\n');
     });
   }
+}
 
-  private _shouldCaptureSnapshot(metadata: CallMetadata): boolean {
+function shouldCaptureSnapshot(metadata: CallMetadata): boolean {
   return commandsWithTracingSnapshots.has(metadata.type + '.' + metadata.method);
 }
-}

src/server/trace/viewer/traceModel.ts

@@ -43,9 +43,8 @@ export class TraceModel {
   appendEvents(events: trace.TraceEvent[], snapshotStorage: SnapshotStorage) {
     for (const event of events)
       this.appendEvent(event);
-    const actions: trace.ActionTraceEvent[] = [];
     for (const page of this.contextEntry!.pages)
-      actions.push(...page.actions);
+      page.actions.sort((a1, a2) => a1.metadata.startTime - a2.metadata.startTime);
     this.contextEntry!.resources = snapshotStorage.resources();
   }
 
@@ -55,6 +54,7 @@ export class TraceModel {
       pageEntry = {
         actions: [],
         events: [],
+        objects: {},
         screencastFrames: [],
       };
       this.pageEntries.set(pageId, pageEntry);
@@ -83,8 +83,12 @@ export class TraceModel {
       }
       case 'event': {
         const metadata = event.metadata;
-        if (metadata.pageId)
+        if (metadata.pageId) {
+          if (metadata.method === '__create__')
+            this._pageEntry(metadata.pageId).objects[metadata.params.guid] = metadata.params.initializer;
+          else
             this._pageEntry(metadata.pageId).events.push(event);
+        }
         break;
       }
       case 'resource-snapshot':
@@ -113,6 +117,7 @@ export type ContextEntry = {
 export type PageEntry = {
   actions: trace.ActionTraceEvent[];
   events: trace.ActionTraceEvent[];
+  objects: { [ket: string]: any };
   screencastFrames: {
     sha1: string,
     timestamp: number,

src/server/trace/viewer/traceViewer.ts

@@ -141,7 +141,10 @@ export class TraceViewer {
     });
     await context.extendInjectedScript('main', consoleApiSource.source);
     const [page] = context.pages();
+    if (isUnderTest())
       page.on('close', () => context.close(internalCallMetadata()).catch(() => {}));
+    else
+      page.on('close', () => process.exit());
     await page.mainFrame().goto(internalCallMetadata(), urlPrefix + '/traceviewer/traceViewer/index.html');
     return context;
   }

src/web/third_party/vscode/codicon.css

@@ -22,6 +22,7 @@
 	user-select: none;
 }
 
+.codicon-blank:before { content: '\81'; }
 .codicon-add:before { content: '\ea60'; }
 .codicon-plus:before { content: '\ea60'; }
 .codicon-gist-new:before { content: '\ea60'; }

src/web/traceViewer/ui/filmStrip.tsx

@@ -42,7 +42,7 @@ export const FilmStrip: React.FunctionComponent<{
   if (previewPoint !== undefined && screencastFrames) {
     const previewTime = boundaries.minimum + (boundaries.maximum - boundaries.minimum) * previewPoint.x / measure.width;
     previewImage = screencastFrames[upperBound(screencastFrames, previewTime, timeComparator) - 1];
-    previewSize = inscribe({width: previewImage.width, height: previewImage.height}, { width: 600, height: 600 });
+    previewSize = previewImage ? inscribe({width: previewImage.width, height: previewImage.height}, { width: 600, height: 600 }) : undefined;
   }
 
   return <div className='film-strip' ref={ref}>{

src/web/traceViewer/ui/tabbedPane.css

@@ -44,7 +44,7 @@
 }
 
 .tab-element {
-  padding: 2px 6px 0 6px;
+  padding: 2px 12px 0 12px;
   margin-right: 4px;
   cursor: pointer;
   display: flex;
@@ -53,7 +53,6 @@
   justify-content: center;
   user-select: none;
   border-bottom: 3px solid transparent;
-  width: 80px;
   outline: none;
   height: 100%;
 }

src/web/traceViewer/ui/timeline.tsx

@@ -170,8 +170,8 @@ export const Timeline: React.FunctionComponent<{
         return <div key={index}
           className={'timeline-label ' + bar.className + (targetBar === bar ? ' selected' : '')}
           style={{
-            left: bar.leftPosition + 'px',
+            left: bar.leftPosition,
-            width: Math.max(1, bar.rightPosition - bar.leftPosition) + 'px',
+            maxWidth: 100,
           }}
         >
           {bar.label}

src/web/traceViewer/ui/workbench.tsx

@@ -54,6 +54,9 @@ export const Workbench: React.FunctionComponent<{
   const snapshotSize = context.options.viewport || { width: 1280, height: 720 };
   const boundaries = { minimum: context.startTime, maximum: context.endTime };
 
+  // Leave some nice free space on the right hand side.
+  boundaries.maximum += (boundaries.maximum - boundaries.minimum) / 20;
+
   return <div className='vbox workbench'>
     <div className='hbox header'>
       <div className='logo'>🎭</div>

tests/chromium/trace-viewer/trace-viewer.spec.ts

@@ -24,8 +24,8 @@ class TraceViewerPage {
   constructor(public page: Page) {}
 
   async actionTitles() {
-    await this.page.waitForSelector('.action-title');
+    await this.page.waitForSelector('.action-title:visible');
-    return await this.page.$$eval('.action-title', ee => ee.map(e => e.textContent));
+    return await this.page.$$eval('.action-title:visible', ee => ee.map(e => e.textContent));
   }
 
   async selectAction(title: string) {
@@ -33,7 +33,20 @@ class TraceViewerPage {
   }
 
   async logLines() {
-    return await this.page.$$eval('.log-line', ee => ee.map(e => e.textContent));
+    await this.page.waitForSelector('.log-line:visible');
+    return await this.page.$$eval('.log-line:visible', ee => ee.map(e => e.textContent));
+  }
+
+  async eventBars() {
+    await this.page.waitForSelector('.timeline-bar.event:visible');
+    const list = await this.page.$$eval('.timeline-bar.event:visible', ee => ee.map(e => e.className));
+    const set = new Set<string>();
+    for (const item of list) {
+      for (const className of item.split(' '))
+        set.add(className);
+    }
+    const result = [...set];
+    return result.sort();
   }
 }
 
@@ -60,6 +73,15 @@ test.beforeAll(async ({ browser }, workerInfo) => {
   await page.goto('data:text/html,<html>Hello world</html>');
   await page.setContent('<button>Click</button>');
   await page.click('"Click"');
+  await Promise.all([
+    page.waitForNavigation(),
+    page.waitForTimeout(200).then(() => page.goto('data:text/html,<html>Hello world 2</html>'))
+  ]);
+  await page.evaluate(() => {
+    console.log('Log');
+    console.warn('Warning');
+    console.error('Error');
+  });
   await page.close();
   traceFile = path.join(workerInfo.project.outputDir, 'trace.zip');
   await context.tracing.stop({ path: traceFile });
@@ -72,7 +94,14 @@ test('should show empty trace viewer', async ({ showTraceViewer }, testInfo) =>
 
 test('should open simple trace viewer', async ({ showTraceViewer }) => {
   const traceViewer = await showTraceViewer(traceFile);
-  expect(await traceViewer.actionTitles()).toEqual(['page.goto', 'page.setContent', 'page.click']);
+  expect(await traceViewer.actionTitles()).toEqual([
+    'page.goto',
+    'page.setContent',
+    'page.click',
+    'page.waitForNavigation',
+    'page.goto',
+    'page.evaluate'
+  ]);
 });
 
 test('should contain action log', async ({ showTraceViewer }) => {
@@ -84,3 +113,9 @@ test('should contain action log', async ({ showTraceViewer }) => {
   expect(logLines).toContain('attempting click action');
   expect(logLines).toContain('  click action done');
 });
+
+test('should render events', async ({ showTraceViewer }) => {
+  const traceViewer = await showTraceViewer(traceFile);
+  const events = await traceViewer.eventBars();
+  expect(events).toContain('page_console');
+});

utils/generate_channels.js

@@ -187,6 +187,18 @@ for (const [name, value] of Object.entries(protocol)) {
     mixins.set(name, value);
 }
 
+const derivedClasses = new Map();
+for (const [name, item] of Object.entries(protocol)) {
+  if (item.type === 'interface' && item.extends) {
+    let items = derivedClasses.get(item.extends);
+    if (!items) {
+      items = [];
+      derivedClasses.set(item.extends, items);
+    }
+    items.push(name);
+  }
+}
+
 for (const [name, item] of Object.entries(protocol)) {
   if (item.type === 'interface') {
     const channelName = name;
@@ -210,8 +222,11 @@ for (const [name, item] of Object.entries(protocol)) {
     for (let [methodName, method] of Object.entries(item.commands || {})) {
       if (method === null)
         method = {};
-      if (method.tracing && method.tracing.snapshot)
+      if (method.tracing && method.tracing.snapshot) {
         tracingSnapshots.push(name + '.' + methodName);
+        for (const derived of derivedClasses.get(name) || [])
+          tracingSnapshots.push(derived + '.' + methodName);
+      }
       const parameters = objectType(method.parameters || {}, '');
       const paramsName = `${channelName}${titleCase(methodName)}Params`;
       const optionsName = `${channelName}${titleCase(methodName)}Options`;