more comments

src/debug/showUserInput.ts

@@ -13,26 +13,29 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { Page } from '../server/page';
+import type { Page } from '../server/page';
 import type * as types from '../server/types';
 import type * as js from '../server/javascript';
-import { contextListeners } from '../server/browserContext';
+import type { BrowserContext } from '../server/browserContext';
+import { contextListeners } from '../server/contextListeners';
 
 export function installShowUserInput() {
   contextListeners.add({
-    async onUserInput(page, event) {
-      if (!page.context()._browser._options.showUserInput)
-        return;
-      if (event.type === 'touchscreen.tap')
-        return showTapIndicator(page, event.x, event.y);
-      if (event.type === 'mouse.down' || event.type === 'mouse.move' || event.type === 'mouse.up')
-        return showMouseIndicator(page, event.x, event.y, event.buttons);
-      if (event.type === 'keyboard.insertText') {
-        textForPage.set(page, event.text);
-        return renderKeyboardIndicator(page, event.text);
-      }
-      if (event.type === 'keyboard.down')
-        return updateKeyboardIndicator(page, event.key, event.code, event.modifiers);
+    async onContextCreated(context: BrowserContext) {
+      context._inputListeners.add(async (page, event) => {
+        if (!page.context()._browser._options.showUserInput)
+          return;
+        if (event.type === 'touchscreen.tap')
+          return showTapIndicator(page, event.x, event.y);
+        if (event.type === 'mouse.down' || event.type === 'mouse.move' || event.type === 'mouse.up')
+          return showMouseIndicator(page, event.x, event.y, event.buttons);
+        if (event.type === 'keyboard.insertText') {
+          textForPage.set(page, event.text);
+          return renderKeyboardIndicator(page, event.text);
+        }
+        if (event.type === 'keyboard.down')
+          return updateKeyboardIndicator(page, event.key, event.code, event.modifiers);
+      });
     }
   });
 }

src/server/browserContext.ts

@@ -19,7 +19,6 @@ import { EventEmitter } from 'events';
 import { TimeoutSettings } from '../utils/timeoutSettings';
 import { mkdirIfNeeded } from '../utils/utils';
 import { Browser, BrowserOptions } from './browser';
-import * as dom from './dom';
 import { Download } from './download';
 import * as frames from './frames';
 import { helper } from './helper';
@@ -29,6 +28,7 @@ import { Progress, ProgressController, ProgressResult } from './progress';
 import { Selectors, serverSelectors } from './selectors';
 import * as types from './types';
 import * as path from 'path';
+import { ActionListener, ActionMetadata, contextListeners, InputEvent } from './contextListeners';
 
 export class Video {
   readonly _videoId: string;
@@ -58,19 +58,6 @@ export class Video {
   }
 }
 
-export type ActionMetadata = {
-  type: 'click' | 'fill' | 'dblclick' | 'hover' | 'selectOption' | 'setInputFiles' | 'type' | 'press' | 'check' | 'uncheck' | 'goto' | 'setContent' | 'goBack' | 'goForward' | 'reload' | 'tap',
-  page: Page,
-  target?: dom.ElementHandle | string,
-  value?: string,
-  stack?: string,
-};
-
-export interface ActionListener {
-  onActionCheckpoint(name: string, metadata: ActionMetadata): Promise<void>;
-  onAfterAction(result: ProgressResult, metadata: ActionMetadata): Promise<void>;
-}
-
 export async function runAction<T>(task: (controller: ProgressController) => Promise<T>, metadata: ActionMetadata): Promise<T> {
   const controller = new ProgressController();
   controller.setListener({
@@ -88,46 +75,6 @@ export async function runAction<T>(task: (controller: ProgressController) => Pro
   return result;
 }
 
-export interface ContextListener {
-  onContextCreated?(context: BrowserContext): Promise<void>;
-  onContextWillDestroy?(context: BrowserContext): Promise<void>;
-  onContextDidDestroy?(context: BrowserContext): Promise<void>;
-  onUserInput?(page: Page, event: InputEvent): Promise<void>;
-}
-
-export type InputEvent = {
-  type: 'mouse.down',
-  x: number,
-  y: number,
-  buttons: Set<types.MouseButton>,
-} | {
-  type: 'mouse.up',
-  x: number,
-  y: number,
-  buttons: Set<types.MouseButton>,
-} | {
-  type: 'mouse.move',
-  x: number,
-  y: number,
-  buttons: Set<types.MouseButton>,
-} | {
-  type: 'keyboard.down',
-  key: string,
-  code: string,
-  modifiers: Set<types.KeyboardModifier>,
-} | {
-  type: 'keyboard.up',
-} | {
-  type: 'keyboard.insertText',
-  text: string,
-} | {
-  type: 'touchscreen.tap',
-  x: number,
-  y: number,
-};
-
-export const contextListeners = new Set<ContextListener>();
-
 export abstract class BrowserContext extends EventEmitter {
   static Events = {
     Close: 'close',
@@ -152,6 +99,7 @@ export abstract class BrowserContext extends EventEmitter {
   readonly _browserContextId: string | undefined;
   private _selectors?: Selectors;
   readonly _actionListeners = new Set<ActionListener>();
+  readonly _inputListeners = new Set<(page: Page, event: InputEvent) => Promise<void>>();
   private _origins = new Set<string>();
 
   constructor(browser: Browser, options: types.BrowserContextOptions, browserContextId: string | undefined) {
@@ -177,8 +125,8 @@ export abstract class BrowserContext extends EventEmitter {
   }
 
   async notifyInputListeners(page: Page, event: InputEvent) {
-    for (const listener of contextListeners)
-      await listener.onUserInput?.(page, event);
+    for (const listener of this._inputListeners)
+      await listener(page, event);
   }
 
   async _ensureVideosPath() {

src/server/contextListeners.ts

@@ -0,0 +1,72 @@
+/**
+ * Copyright (c) Microsoft Corporation.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import type * as dom from './dom';
+import type * as types from './types';
+import type { BrowserContext } from './browserContext';
+import type { ProgressResult } from './progress';
+import type { Page } from './page';
+
+export interface ContextListener {
+  onContextCreated?(context: BrowserContext): Promise<void>;
+  onContextWillDestroy?(context: BrowserContext): Promise<void>;
+  onContextDidDestroy?(context: BrowserContext): Promise<void>;
+}
+
+export type ActionMetadata = {
+  type: 'click' | 'fill' | 'dblclick' | 'hover' | 'selectOption' | 'setInputFiles' | 'type' | 'press' | 'check' | 'uncheck' | 'goto' | 'setContent' | 'goBack' | 'goForward' | 'reload' | 'tap',
+  page: Page,
+  target?: dom.ElementHandle | string,
+  value?: string,
+  stack?: string,
+};
+
+export interface ActionListener {
+  onActionCheckpoint(name: string, metadata: ActionMetadata): Promise<void>;
+  onAfterAction(result: ProgressResult, metadata: ActionMetadata): Promise<void>;
+}
+
+export type InputEvent = {
+  type: 'mouse.down',
+  x: number,
+  y: number,
+  buttons: Set<types.MouseButton>,
+} | {
+  type: 'mouse.up',
+  x: number,
+  y: number,
+  buttons: Set<types.MouseButton>,
+} | {
+  type: 'mouse.move',
+  x: number,
+  y: number,
+  buttons: Set<types.MouseButton>,
+} | {
+  type: 'keyboard.down',
+  key: string,
+  code: string,
+  modifiers: Set<types.KeyboardModifier>,
+} | {
+  type: 'keyboard.up',
+} | {
+  type: 'keyboard.insertText',
+  text: string,
+} | {
+  type: 'touchscreen.tap',
+  x: number,
+  y: number,
+};
+
+export const contextListeners = new Set<ContextListener>();

src/server/supplements/inspectorController.ts

@@ -14,7 +14,8 @@
  * limitations under the License.
  */
 
-import { BrowserContext, ContextListener, contextListeners } from '../browserContext';
+import { ContextListener, contextListeners } from '../contextListeners';
+import { BrowserContext } from '../browserContext';
 import { isDebugMode } from '../../utils/utils';
 import { ConsoleApiSupplement } from './consoleApiSupplement';
 import { RecorderSupplement } from './recorderSupplement';

src/trace/harTracer.ts

@@ -16,7 +16,8 @@
 
 import * as fs from 'fs';
 import * as util from 'util';
-import { BrowserContext, ContextListener, contextListeners } from '../server/browserContext';
+import { ContextListener, contextListeners } from '../server/contextListeners';
+import { BrowserContext } from '../server/browserContext';
 import { helper } from '../server/helper';
 import * as network from '../server/network';
 import { Page } from '../server/page';

src/trace/tracer.ts

@@ -14,7 +14,8 @@
  * limitations under the License.
  */
 
-import { ActionListener, ActionMetadata, BrowserContext, ContextListener, contextListeners, Video } from '../server/browserContext';
+import { ActionListener, ActionMetadata, ContextListener, contextListeners } from '../server/contextListeners';
+import { BrowserContext, Video } from '../server/browserContext';
 import type { SnapshotterResource as SnapshotterResource, SnapshotterBlob, SnapshotterDelegate } from './snapshotter';
 import * as trace from './traceTypes';
 import * as path from 'path';

test/headful.spec.ts

@@ -178,14 +178,14 @@ fixtures.build().it('focused input should produce the same screenshot', (test, {
 }, async ({browserType, browserOptions}) => {
   const headful = await browserType.launch({...browserOptions, headless: false });
   const headfulPage = await headful.newPage();
-  await headfulPage.setContent('<input>');
+  await headfulPage.setContent('<input style="caret-color: transparent">');
   await headfulPage.focus('input');
   const headfulScreenshot = await headfulPage.screenshot();
   await headful.close();
 
   const headless = await browserType.launch({...browserOptions, headless: true });
   const headlessPage = await headless.newPage();
-  await headlessPage.setContent('<input>');
+  await headlessPage.setContent('<input style="caret-color: transparent">');
   await headlessPage.focus('input');
   const headlessScreenshot = await headlessPage.screenshot();
   await headless.close();