chore: introduce debug toolbar (#5145)

src/cli/cli.ts

@@ -30,9 +30,6 @@ import { Browser } from '../client/browser';
 import { Page } from '../client/page';
 import { BrowserType } from '../client/browserType';
 import { BrowserContextOptions, LaunchOptions } from '../client/types';
-import { RecorderOutput, RecorderSupplement } from '../client/supplements/recorderSupplement';
-import { ConsoleApiSupplement } from '../client/supplements/consoleApiSupplement';
-import { FileOutput, OutputMultiplexer, TerminalOutput } from '../client/supplements/recorderOutputs';
 
 program
     .version('Version ' + require('../../package.json').version)
@@ -318,31 +315,17 @@ async function openPage(context: BrowserContext, url: string | undefined): Promi
 
 async function open(options: Options, url: string | undefined) {
   const { context } = await launchContext(options, false);
-  new ConsoleApiSupplement(context);
+  await context._enableConsoleApi();
   await openPage(context, url);
   if (process.env.PWCLI_EXIT_FOR_TEST)
     await Promise.all(context.pages().map(p => p.close()));
 }
 
 async function codegen(options: Options, url: string | undefined, language: string, outputFile?: string) {
   const { context, launchOptions, contextOptions } = await launchContext(options, false);
-  let highlighterType = language;
-  if (highlighterType === 'python-async')
-    highlighterType = 'python';
-  const outputs: RecorderOutput[] = [TerminalOutput.create(process.stdout, highlighterType)];
-  if (outputFile)
-    outputs.push(new FileOutput(outputFile));
-  const output = new OutputMultiplexer(outputs);
-
-  new ConsoleApiSupplement(context);
-  new RecorderSupplement(context,
-      language,
-      launchOptions,
-      contextOptions,
-      options.device,
-      options.saveStorage,
-      output);
-
+  if (process.env.PWTRACE)
+    contextOptions._traceDir = path.join(process.cwd(), '.trace');
+  await context._enableRecorder(language, launchOptions, contextOptions, options.device, options.saveStorage, !!process.stdout.columns, outputFile ? path.resolve(outputFile) : undefined);
   await openPage(context, url);
   if (process.env.PWCLI_EXIT_FOR_TEST)
     await Promise.all(context.pages().map(p => p.close()));

src/client/browserContext.ts

@@ -26,7 +26,7 @@ import { Browser } from './browser';
 import { Events } from './events';
 import { TimeoutSettings } from '../utils/timeoutSettings';
 import { Waiter } from './waiter';
-import { URLMatch, Headers, WaitForEventOptions, BrowserContextOptions, StorageState } from './types';
+import { URLMatch, Headers, WaitForEventOptions, BrowserContextOptions, StorageState, LaunchOptions } from './types';
 import { isUnderTest, headersObjectToArray, mkdirIfNeeded } from '../utils/utils';
 import { isSafeCloseError } from '../utils/errors';
 import * as api from '../../types/types';
@@ -44,6 +44,8 @@ export class BrowserContext extends ChannelOwner<channels.BrowserContextChannel,
   _ownerPage: Page | undefined;
   private _closedPromise: Promise<void>;
   _options: channels.BrowserNewContextParams = {};
+  private _stdout: NodeJS.WriteStream;
+  private _stderr: NodeJS.WriteStream;
 
   static from(context: channels.BrowserContextChannel): BrowserContext {
     return (context as any)._object;
@@ -62,6 +64,10 @@ export class BrowserContext extends ChannelOwner<channels.BrowserContextChannel,
     this._channel.on('close', () => this._onClose());
     this._channel.on('page', ({page}) => this._onPage(Page.from(page)));
     this._channel.on('route', ({ route, request }) => this._onRoute(network.Route.from(route), network.Request.from(request)));
+    this._stdout = process.stdout;
+    this._stderr = process.stderr;
+    this._channel.on('stdout', ({ data }) => this._stdout.write(Buffer.from(data, 'base64')));
+    this._channel.on('stderr', ({ data }) => this._stderr.write(Buffer.from(data, 'base64')));
     this._closedPromise = new Promise(f => this.once(Events.BrowserContext.Close, f));
   }
 
@@ -253,6 +259,35 @@ export class BrowserContext extends ChannelOwner<channels.BrowserContextChannel,
       throw e;
     }
   }
+
+  async _pause() {
+    return this._wrapApiCall('browserContext.pause', async () => {
+      await this._channel.pause();
+    });
+  }
+
+  async _enableConsoleApi() {
+    await this._channel.consoleSupplementExpose();
+  }
+
+  async _enableRecorder(
+    language: string,
+    launchOptions?: LaunchOptions,
+    contextOptions?: BrowserContextOptions,
+    device?: string,
+    saveStorage?: string,
+    terminal?: boolean,
+    outputFile?: string) {
+    await this._channel.recorderSupplementEnable({
+      language,
+      launchOptions,
+      contextOptions,
+      device,
+      saveStorage,
+      terminal,
+      outputFile,
+    });
+  }
 }
 
 export async function prepareBrowserContextOptions(options: BrowserContextOptions): Promise<channels.BrowserNewContextOptions> {

src/client/page.ts

@@ -640,9 +640,7 @@ export class Page extends ChannelOwner<channels.PageChannel, channels.PageInitia
   }
 
   async _pause() {
-    return this._wrapApiCall('page.pause', async () => {
-      await this._channel.pause();
-    });
+    await this.context()._pause();
   }
 
   async _pdf(options: PDFOptions = {}): Promise<Buffer> {

src/dispatchers/browserContextDispatcher.ts

@@ -38,6 +38,8 @@ export class BrowserContextDispatcher extends Dispatcher<BrowserContext, channel
       this._dispatchEvent('close');
       this._dispose();
     });
+    context.on(BrowserContext.Events.StdOut, data => this._dispatchEvent('stdout', { data: Buffer.from(data, 'utf8').toString('base64') }));
+    context.on(BrowserContext.Events.StdErr, data => this._dispatchEvent('stderr', { data: Buffer.from(data, 'utf8').toString('base64') }));
 
     if (context._browser._options.name === 'chromium') {
       for (const page of (context as CRBrowserContext).backgroundPages())
@@ -133,11 +135,17 @@ export class BrowserContextDispatcher extends Dispatcher<BrowserContext, channel
   }
 
   async recorderSupplementEnable(params: channels.BrowserContextRecorderSupplementEnableParams): Promise<void> {
-    const recorder = new RecorderSupplement(this._context, params, {
-      printLn: text => this._dispatchEvent('recorderSupplementPrintLn', { text }),
-      popLn: text => this._dispatchEvent('recorderSupplementPopLn', { text }),
+    await RecorderSupplement.getOrCreate(this._context, 'codegen', params);
+  }
+
+  async pause() {
+    if (!this._context._browser._options.headful)
+      return;
+    const recorder = await RecorderSupplement.getOrCreate(this._context, 'pause', {
+      language: 'javascript',
+      terminal: true
     });
-    await recorder.install();
+    await recorder.pause();
   }
 
   async crNewCDPSession(params: channels.BrowserContextCrNewCDPSessionParams): Promise<channels.BrowserContextCrNewCDPSessionResult> {

src/dispatchers/pageDispatcher.ts

@@ -237,10 +237,6 @@ export class PageDispatcher extends Dispatcher<Page, channels.PageInitializer> i
     return { entries: await coverage.stopCSSCoverage() };
   }
 
-  async pause() {
-    await this._page.pause();
-  }
-
   _onFrameAttached(frame: Frame) {
     this._dispatchEvent('frameAttached', { frame: FrameDispatcher.from(this._scope, frame) });
   }

src/protocol/channels.ts

@@ -533,10 +533,10 @@ export interface BrowserContextChannel extends Channel {
   on(event: 'close', callback: (params: BrowserContextCloseEvent) => void): this;
   on(event: 'page', callback: (params: BrowserContextPageEvent) => void): this;
   on(event: 'route', callback: (params: BrowserContextRouteEvent) => void): this;
+  on(event: 'stdout', callback: (params: BrowserContextStdoutEvent) => void): this;
+  on(event: 'stderr', callback: (params: BrowserContextStderrEvent) => void): this;
   on(event: 'crBackgroundPage', callback: (params: BrowserContextCrBackgroundPageEvent) => void): this;
   on(event: 'crServiceWorker', callback: (params: BrowserContextCrServiceWorkerEvent) => void): this;
-  on(event: 'recorderSupplementPrintLn', callback: (params: BrowserContextRecorderSupplementPrintLnEvent) => void): this;
-  on(event: 'recorderSupplementPopLn', callback: (params: BrowserContextRecorderSupplementPopLnEvent) => void): this;
   addCookies(params: BrowserContextAddCookiesParams, metadata?: Metadata): Promise<BrowserContextAddCookiesResult>;
   addInitScript(params: BrowserContextAddInitScriptParams, metadata?: Metadata): Promise<BrowserContextAddInitScriptResult>;
   clearCookies(params?: BrowserContextClearCookiesParams, metadata?: Metadata): Promise<BrowserContextClearCookiesResult>;
@@ -555,6 +555,7 @@ export interface BrowserContextChannel extends Channel {
   setOffline(params: BrowserContextSetOfflineParams, metadata?: Metadata): Promise<BrowserContextSetOfflineResult>;
   storageState(params?: BrowserContextStorageStateParams, metadata?: Metadata): Promise<BrowserContextStorageStateResult>;
   consoleSupplementExpose(params?: BrowserContextConsoleSupplementExposeParams, metadata?: Metadata): Promise<BrowserContextConsoleSupplementExposeResult>;
+  pause(params?: BrowserContextPauseParams, metadata?: Metadata): Promise<BrowserContextPauseResult>;
   recorderSupplementEnable(params: BrowserContextRecorderSupplementEnableParams, metadata?: Metadata): Promise<BrowserContextRecorderSupplementEnableResult>;
   crNewCDPSession(params: BrowserContextCrNewCDPSessionParams, metadata?: Metadata): Promise<BrowserContextCrNewCDPSessionResult>;
 }
@@ -569,18 +570,18 @@ export type BrowserContextRouteEvent = {
   route: RouteChannel,
   request: RequestChannel,
 };
+export type BrowserContextStdoutEvent = {
+  data: Binary,
+};
+export type BrowserContextStderrEvent = {
+  data: Binary,
+};
 export type BrowserContextCrBackgroundPageEvent = {
   page: PageChannel,
 };
 export type BrowserContextCrServiceWorkerEvent = {
   worker: WorkerChannel,
 };
-export type BrowserContextRecorderSupplementPrintLnEvent = {
-  text: string,
-};
-export type BrowserContextRecorderSupplementPopLnEvent = {
-  text: string,
-};
 export type BrowserContextAddCookiesParams = {
   cookies: SetNetworkCookie[],
 };
@@ -706,16 +707,25 @@ export type BrowserContextStorageStateResult = {
 export type BrowserContextConsoleSupplementExposeParams = {};
 export type BrowserContextConsoleSupplementExposeOptions = {};
 export type BrowserContextConsoleSupplementExposeResult = void;
+export type BrowserContextPauseParams = {};
+export type BrowserContextPauseOptions = {};
+export type BrowserContextPauseResult = void;
 export type BrowserContextRecorderSupplementEnableParams = {
   language: string,
-  launchOptions: any,
-  contextOptions: any,
+  launchOptions?: any,
+  contextOptions?: any,
   device?: string,
   saveStorage?: string,
+  terminal?: boolean,
+  outputFile?: string,
 };
 export type BrowserContextRecorderSupplementEnableOptions = {
+  launchOptions?: any,
+  contextOptions?: any,
   device?: string,
   saveStorage?: string,
+  terminal?: boolean,
+  outputFile?: string,
 };
 export type BrowserContextRecorderSupplementEnableResult = void;
 export type BrowserContextCrNewCDPSessionParams = {
@@ -786,7 +796,6 @@ export interface PageChannel extends Channel {
   mouseClick(params: PageMouseClickParams, metadata?: Metadata): Promise<PageMouseClickResult>;
   touchscreenTap(params: PageTouchscreenTapParams, metadata?: Metadata): Promise<PageTouchscreenTapResult>;
   accessibilitySnapshot(params: PageAccessibilitySnapshotParams, metadata?: Metadata): Promise<PageAccessibilitySnapshotResult>;
-  pause(params?: PagePauseParams, metadata?: Metadata): Promise<PagePauseResult>;
   pdf(params: PagePdfParams, metadata?: Metadata): Promise<PagePdfResult>;
   crStartJSCoverage(params: PageCrStartJSCoverageParams, metadata?: Metadata): Promise<PageCrStartJSCoverageResult>;
   crStopJSCoverage(params?: PageCrStopJSCoverageParams, metadata?: Metadata): Promise<PageCrStopJSCoverageResult>;
@@ -1083,9 +1092,6 @@ export type PageAccessibilitySnapshotOptions = {
 export type PageAccessibilitySnapshotResult = {
   rootAXNode?: AXNode,
 };
-export type PagePauseParams = {};
-export type PagePauseOptions = {};
-export type PagePauseResult = void;
 export type PagePdfParams = {
   scale?: number,
   displayHeaderFooter?: boolean,

src/protocol/protocol.yml

@@ -602,14 +602,19 @@ BrowserContext:
     consoleSupplementExpose:
       experimental: True
 
+    pause:
+      experimental: True
+
     recorderSupplementEnable:
       experimental: True
       parameters:
         language: string
-        launchOptions: json
-        contextOptions: json
+        launchOptions: json?
+        contextOptions: json?
         device: string?
         saveStorage: string?
+        terminal: boolean?
+        outputFile: string?
 
     crNewCDPSession:
       parameters:
@@ -634,21 +639,21 @@ BrowserContext:
         route: Route
         request: Request
 
-    crBackgroundPage:
+    stdout:
       parameters:
-        page: Page
+        data: binary
 
-    crServiceWorker:
+    stderr:
       parameters:
-        worker: Worker
+        data: binary
 
-    recorderSupplementPrintLn:
+    crBackgroundPage:
       parameters:
-        text: string
+        page: Page
 
-    recorderSupplementPopLn:
+    crServiceWorker:
       parameters:
-        text: string
+        worker: Worker
 
 Page:
   type: interface
@@ -854,8 +859,6 @@ Page:
       returns:
         rootAXNode: AXNode?
 
-    pause:
-
     pdf:
       parameters:
         scale: number?