chore: iterate towards recording into trace (4) (#32743)

packages/playwright-core/src/cli/program.ts

@@ -560,7 +560,7 @@ async function open(options: Options, url: string | undefined, language: string)
 
 async function codegen(options: Options & { target: string, output?: string, testIdAttribute?: string }, url: string | undefined) {
   const { target: language, output: outputFile, testIdAttribute: testIdAttributeName } = options;
-  const tracesDir = path.join(os.tmpdir(), `recorder-trace-${Date.now()}`);
+  const tracesDir = path.join(os.tmpdir(), `playwright-recorder-trace-${Date.now()}`);
   const { context, launchOptions, contextOptions } = await launchContext(options, {
     headless: !!process.env.PWTEST_CLI_HEADLESS,
     executablePath: process.env.PWTEST_CLI_EXECUTABLE_PATH,

packages/playwright-core/src/server/dispatchers/browserContextDispatcher.ts

@@ -308,7 +308,6 @@ export class BrowserContextDispatcher extends Dispatcher<BrowserContext, channel
         screenshots: true,
         live: true,
       });
-      await this._context.tracing.startChunk({ name: 'trace', title: 'trace' });
       await Recorder.show('trace-events', this._context, RecorderInTraceViewer.factory(this._context), params);
     } else {
       await Recorder.show('actions', this._context, RecorderApp.factory(this._context), params);

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

@@ -73,8 +73,8 @@ export class ContextRecorder extends EventEmitter {
       saveStorage: params.saveStorage,
     };
 
-    const collection = new RecorderCollection(codegenMode, context, this._pageAliases, params.mode === 'recording');
-    collection.on('change', (actions: ActionInContext[]) => {
+    this._collection = new RecorderCollection(codegenMode, context, this._pageAliases);
+    this._collection.on('change', (actions: ActionInContext[]) => {
       this._recorderSources = [];
       for (const languageGenerator of this._orderedLanguages) {
         const { header, footer, actionTexts, text } = generateCode(actions, languageGenerator, languageGeneratorOptions);
@@ -103,7 +103,7 @@ export class ContextRecorder extends EventEmitter {
     this._listeners.push(eventsHelper.addEventListener(process, 'exit', () => {
       this._throttledOutputFile?.flush();
     }));
-    this._collection = collection;
+    this.setEnabled(true);
   }
 
   setOutput(codegenId: string, outputFile?: string) {
@@ -145,6 +145,10 @@ export class ContextRecorder extends EventEmitter {
 
   setEnabled(enabled: boolean) {
     this._collection.setEnabled(enabled);
+    if (enabled)
+      this._context.tracing.startChunk({ name: 'trace', title: 'trace' }).catch(() => {});
+    else
+      this._context.tracing.stopChunk({ mode: 'discard' }).catch(() => {});
   }
 
   dispose() {

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

@@ -29,14 +29,13 @@ import type { BrowserContext } from '../browserContext';
 
 export class RecorderCollection extends EventEmitter {
   private _actions: ActionInContext[] = [];
-  private _enabled: boolean;
+  private _enabled = false;
   private _pageAliases: Map<Page, string>;
   private _context: BrowserContext;
 
-  constructor(codegenMode: 'actions' | 'trace-events', context: BrowserContext, pageAliases: Map<Page, string>, enabled: boolean) {
+  constructor(codegenMode: 'actions' | 'trace-events', context: BrowserContext, pageAliases: Map<Page, string>) {
     super();
     this._context = context;
-    this._enabled = enabled;
     this._pageAliases = pageAliases;
 
     if (codegenMode === 'trace-events') {

packages/trace-viewer/src/sw.ts

@@ -47,7 +47,7 @@ async function loadTrace(traceUrl: string, traceFileName: string | null, clientI
   }
   set.add(traceUrl);
 
-  const isRecorderMode = traceUrl.includes('/recorder-trace-');
+  const isRecorderMode = traceUrl.includes('/playwright-recorder-trace-');
 
   const traceModel = new TraceModel();
   try {

packages/trace-viewer/src/ui/callTab.css

@@ -36,6 +36,8 @@
 
 .call-section {
   padding-left: 6px;
+  padding-top: 2px;
+  margin-top: 2px;
   font-weight: bold;
   text-transform: uppercase;
   font-size: 10px;
@@ -53,9 +55,8 @@
   align-items: center;
   text-overflow: ellipsis;
   overflow: hidden;
-  line-height: 18px;
+  line-height: 20px;
   white-space: nowrap;
-  max-height: 18px;
 }
 
 .call-line:not(:hover) .toolbar-button.copy {
@@ -64,7 +65,8 @@
 
 .call-line .toolbar-button.copy {
   margin-left: 5px;
-  transform: scale(0.8);
+  margin-top: -2px;
+  margin-bottom: -2px;
 }
 
 .call-value {

packages/trace-viewer/src/ui/recorderView.tsx

@@ -102,6 +102,7 @@ export const TraceView: React.FC<{
     showSourcesFirst={true}
     fallbackLocation={fallbackLocation}
     isLive={true}
+    hideTimeline={true}
   />;
 };
 

packages/trace-viewer/src/ui/workbench.tsx

@@ -50,14 +50,15 @@ export const Workbench: React.FunctionComponent<{
   rootDir?: string,
   fallbackLocation?: modelUtil.SourceLocation,
   isLive?: boolean,
+  hideTimeline?: boolean,
   status?: UITestStatus,
   annotations?: { type: string; description?: string; }[];
   inert?: boolean,
   openPage?: (url: string, target?: string) => Window | any,
   onOpenExternally?: (location: modelUtil.SourceLocation) => void,
   revealSource?: boolean,
   showSettings?: boolean,
-}> = ({ model, showSourcesFirst, rootDir, fallbackLocation, isLive, status, annotations, inert, openPage, onOpenExternally, revealSource, showSettings }) => {
+}> = ({ model, showSourcesFirst, rootDir, fallbackLocation, isLive, hideTimeline, status, annotations, inert, openPage, onOpenExternally, revealSource, showSettings }) => {
   const [selectedCallId, setSelectedCallId] = React.useState<string | undefined>(undefined);
   const [revealedError, setRevealedError] = React.useState<ErrorDescription | undefined>(undefined);
 
@@ -317,7 +318,7 @@ export const Workbench: React.FunctionComponent<{
   };
 
   return <div className='vbox workbench' {...(inert ? { inert: 'true' } : {})}>
-    <Timeline
+    {!hideTimeline && <Timeline
       model={model}
       consoleEntries={consoleModel.entries}
       boundaries={boundaries}
@@ -328,7 +329,7 @@ export const Workbench: React.FunctionComponent<{
       sdkLanguage={sdkLanguage}
       selectedTime={selectedTime}
       setSelectedTime={setSelectedTime}
-    />
+    />}
     <SplitView
       sidebarSize={250}
       orientation={sidebarLocation === 'bottom' ? 'vertical' : 'horizontal'} settingName='propertiesSidebar'