chore: work towards streaming recorder backend (microsoft#36484)

Author: pavelfeldman

packages/playwright-core/src/server/recorder/contextRecorder.ts

@@ -16,7 +16,7 @@
 
 import { EventEmitter } from 'events';
 
-import { RecorderCollection } from './recorderCollection';
+import { RecorderSignalProcessor } from './recorderSignalProcessor';
 import * as rawRecorderSource from '../../generated/pollingRecorderSource';
 import { eventsHelper, monotonicTime, quoteCSSAttributeValue  } from '../../utils';
 import { raceAgainstDeadline } from '../../utils/isomorphic/timeoutRunner';
@@ -26,13 +26,16 @@ import { Frame } from '../frames';
 import { Page } from '../page';
 import { ThrottledFile } from './throttledFile';
 import { generateCode } from '../codegen/language';
+import { performAction } from './recorderRunner';
+import { collapseActions } from './recorderUtils';
 
 import type { RegisteredListener } from '../../utils';
 import type { Language, LanguageGenerator, LanguageGeneratorOptions } from '../codegen/types';
 import type * as channels from '@protocol/channels';
 import type * as actions from '@recorder/actions';
 import type { Source } from '@recorder/recorderTypes';
 import type { Progress } from '@protocol/progress';
+import type { Signal } from '../../../../recorder/src/actions';
 
 type BindingSource = { frame: Frame, page: Page };
 
@@ -45,7 +48,7 @@ export class ContextRecorder extends EventEmitter {
     Change: 'change'
   };
 
-  private _collection: RecorderCollection;
+  private _collection: RecorderSignalProcessor;
   private _pageAliases = new Map<Page, string>();
   private _lastPopupOrdinal = 0;
   private _lastDialogOrdinal = -1;
@@ -57,6 +60,9 @@ export class ContextRecorder extends EventEmitter {
   private _throttledOutputFile: ThrottledFile | null = null;
   private _orderedLanguages: LanguageGenerator[] = [];
   private _listeners: RegisteredListener[] = [];
+  private _actions: actions.ActionInContext[] = [];
+  private _languageGeneratorOptions: LanguageGeneratorOptions;
+  private _enabled: boolean = false;
 
   constructor(context: BrowserContext, params: channels.BrowserContextEnableRecorderParams, delegate: ContextRecorderDelegate) {
     super();
@@ -65,53 +71,76 @@ export class ContextRecorder extends EventEmitter {
     this._delegate = delegate;
     this._recorderSources = [];
     const language = params.language || context._browser.sdkLanguage();
-    this.setOutput(language, params.outputFile);
 
     // Make a copy of options to modify them later.
-    const languageGeneratorOptions: LanguageGeneratorOptions = {
+    this._languageGeneratorOptions = {
       browserName: context._browser.options.name,
       launchOptions: { headless: false, ...params.launchOptions, tracesDir: undefined },
       contextOptions: { ...params.contextOptions },
       deviceName: params.device,
       saveStorage: params.saveStorage,
     };
 
-    this._collection = new RecorderCollection(this._pageAliases);
-    this._collection.on('change', (actions: actions.ActionInContext[]) => {
-      this._recorderSources = [];
-      for (const languageGenerator of this._orderedLanguages) {
-        const { header, footer, actionTexts, text } = generateCode(actions, languageGenerator, languageGeneratorOptions);
-        const source: Source = {
-          isRecorded: true,
-          label: languageGenerator.name,
-          group: languageGenerator.groupName,
-          id: languageGenerator.id,
-          text,
-          header,
-          footer,
-          actions: actionTexts,
-          language: languageGenerator.highlighter,
-          highlight: []
-        };
-        source.revealLine = text.split('\n').length - 1;
-        this._recorderSources.push(source);
-        if (languageGenerator === this._orderedLanguages[0])
-          this._throttledOutputFile?.setContent(source.text);
-      }
-      this.emit(ContextRecorder.Events.Change, {
-        sources: this._recorderSources,
-        actions
-      });
+    this._collection = new RecorderSignalProcessor();
+    this._collection.on('action', (actionInContext: actions.ActionInContext) => {
+      if (!this._enabled)
+        return;
+      this._actions.push(actionInContext);
+      this._updateActions();
+    });
+    this._collection.on('signal', (signal: Signal) => {
+      if (!this._enabled)
+        return;
+      const lastAction = this._actions[this._actions.length - 1];
+      if (lastAction)
+        lastAction.action.signals.push(signal);
+      this._updateActions();
     });
+
     context.on(BrowserContext.Events.BeforeClose, () => {
       this._throttledOutputFile?.flush();
     });
     this._listeners.push(eventsHelper.addEventListener(process, 'exit', () => {
       this._throttledOutputFile?.flush();
     }));
+
+    this.setOutput(language, params.outputFile);
     this.setEnabled(params.mode === 'recording');
   }
 
+  private _resetActions() {
+    this._actions = [];
+    this._updateActions();
+  }
+
+  private _updateActions() {
+    const actions = collapseActions(this._actions);
+    this._recorderSources = [];
+    for (const languageGenerator of this._orderedLanguages) {
+      const { header, footer, actionTexts, text } = generateCode(actions, languageGenerator, this._languageGeneratorOptions);
+      const source: Source = {
+        isRecorded: true,
+        label: languageGenerator.name,
+        group: languageGenerator.groupName,
+        id: languageGenerator.id,
+        text,
+        header,
+        footer,
+        actions: actionTexts,
+        language: languageGenerator.highlighter,
+        highlight: []
+      };
+      source.revealLine = text.split('\n').length - 1;
+      this._recorderSources.push(source);
+      if (languageGenerator === this._orderedLanguages[0])
+        this._throttledOutputFile?.setContent(source.text);
+    }
+    this.emit(ContextRecorder.Events.Change, {
+      sources: this._recorderSources,
+      actions
+    });
+  }
+
   setOutput(codegenId: string, outputFile?: string) {
     const languages = languageSet();
     const primaryLanguage = [...languages].find(l => l.id === codegenId);
@@ -120,7 +149,7 @@ export class ContextRecorder extends EventEmitter {
     languages.delete(primaryLanguage);
     this._orderedLanguages = [primaryLanguage, ...languages];
     this._throttledOutputFile = outputFile ? new ThrottledFile(outputFile) : null;
-    this._collection?.restart();
+    this._resetActions();
   }
 
   languageName(id?: string): Language {
@@ -154,7 +183,7 @@ export class ContextRecorder extends EventEmitter {
   }
 
   setEnabled(enabled: boolean) {
-    this._collection.setEnabled(enabled);
+    this._enabled = enabled;
   }
 
   dispose() {
@@ -165,7 +194,7 @@ export class ContextRecorder extends EventEmitter {
     // First page is called page, others are called popup1, popup2, etc.
     const frame = page.mainFrame();
     page.on('close', () => {
-      this._collection.addRecordedAction({
+      this._collection.addAction({
         frame: this._describeMainFrame(page),
         action: {
           name: 'closePage',
@@ -187,7 +216,7 @@ export class ContextRecorder extends EventEmitter {
     if (page.opener()) {
       this._onPopup(page.opener()!, page);
     } else {
-      this._collection.addRecordedAction({
+      this._collection.addAction({
         frame: this._describeMainFrame(page),
         action: {
           name: 'openPage',
@@ -200,7 +229,7 @@ export class ContextRecorder extends EventEmitter {
   }
 
   clearScript(): void {
-    this._collection.restart();
+    this._resetActions();
     if (this._params.mode === 'recording') {
       for (const page of this._context.pages())
         this._onFrameNavigated(page.mainFrame(), page);
@@ -242,11 +271,15 @@ export class ContextRecorder extends EventEmitter {
   }
 
   private async _performAction(frame: Frame, action: actions.PerformOnRecordAction) {
-    await this._collection.performAction(await this._createActionInContext(frame, action));
+    const actionInContext = await this._createActionInContext(frame, action);
+    this._collection.addAction(actionInContext);
+    if (actionInContext.action.name !== 'openPage' && actionInContext.action.name !== 'closePage')
+      await performAction(this._pageAliases, actionInContext);
+    actionInContext.endTime = monotonicTime();
   }
 
   private async _recordAction(frame: Frame, action: actions.Action) {
-    this._collection.addRecordedAction(await this._createActionInContext(frame, action));
+    this._collection.addAction(await this._createActionInContext(frame, action));
   }
 
   private _onFrameNavigated(frame: Frame, page: Page) {