chore: start building tv-recorder toolbar

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

@@ -43,6 +43,7 @@ export class RecorderInTraceViewer extends EventEmitter implements IRecorderApp
   constructor(transport: RecorderTransport, tracePage: Page, traceServer: HttpServer, wsEndpointForTest: string | undefined) {
     super();
     this._transport = transport;
+    this._transport.eventSink.resolve(this);
     this._tracePage = tracePage;
     this._traceServer = traceServer;
     this.wsEndpointForTest = wsEndpointForTest;
@@ -94,6 +95,7 @@ async function openApp(trace: string, options?: TraceViewerServerOptions & { hea
 
 class RecorderTransport implements Transport {
   private _connected = new ManualPromise<void>();
+  readonly eventSink = new ManualPromise<EventEmitter>();
 
   constructor() {
   }
@@ -103,6 +105,8 @@ class RecorderTransport implements Transport {
   }
 
   async dispatch(method: string, params: any): Promise<any> {
+    const eventSink = await this.eventSink;
+    eventSink.emit('event', { event: method, params });
   }
 
   onclose() {

packages/recorder/src/recorder.css

@@ -20,14 +20,6 @@
   flex: auto;
 }
 
-.recorder-chooser {
-  border: none;
-  background: none;
-  outline: none;
-  color: var(--vscode-sideBarTitle-foreground);
-  min-width: 100px;
-}
-
 .recorder .codicon {
   font-size: 16px;
 }

packages/recorder/src/recorder.tsx

@@ -17,6 +17,7 @@
 import type { CallLog, Mode, Source } from './recorderTypes';
 import { CodeMirrorWrapper } from '@web/components/codeMirrorWrapper';
 import { SplitView } from '@web/components/splitView';
+import { emptySource, SourceChooser } from '@web/components/sourceChooser';
 import { TabbedPane } from '@web/components/tabbedPane';
 import { Toolbar } from '@web/components/toolbar';
 import { ToolbarButton, ToolbarSeparator } from '@web/components/toolbarButton';
@@ -54,15 +55,7 @@ export const Recorder: React.FC<RecorderProps> = ({
       if (source)
         return source;
     }
-    const source: Source = {
-      id: 'default',
-      isRecorded: false,
-      text: '',
-      language: 'javascript',
-      label: '',
-      highlight: []
-    };
-    return source;
+    return emptySource();
   }, [sources, fileId]);
 
   const [locator, setLocator] = React.useState('');
@@ -152,10 +145,10 @@ export const Recorder: React.FC<RecorderProps> = ({
       }}></ToolbarButton>
       <div style={{ flex: 'auto' }}></div>
       <div>Target:</div>
-      <select className='recorder-chooser' hidden={!sources.length} value={fileId} onChange={event => {
-        setFileId(event.target.selectedOptions[0].value);
-        window.dispatch({ event: 'fileChanged', params: { file: event.target.selectedOptions[0].value } });
-      }}>{renderSourceOptions(sources)}</select>
+      <SourceChooser fileId={fileId} sources={sources} setFileId={fileId => {
+        setFileId(fileId);
+        window.dispatch({ event: 'fileChanged', params: { file: fileId } });
+      }} />
       <ToolbarButton icon='clear-all' title='Clear' disabled={!source || !source.text} onClick={() => {
         window.dispatch({ event: 'clear' });
       }}></ToolbarButton>
@@ -184,22 +177,3 @@ export const Recorder: React.FC<RecorderProps> = ({
     />
   </div>;
 };
-
-function renderSourceOptions(sources: Source[]): React.ReactNode {
-  const transformTitle = (title: string): string => title.replace(/.*[/\\]([^/\\]+)/, '$1');
-  const renderOption = (source: Source): React.ReactNode => (
-    <option key={source.id} value={source.id}>{transformTitle(source.label)}</option>
-  );
-
-  const hasGroup = sources.some(s => s.group);
-  if (hasGroup) {
-    const groups = new Set(sources.map(s => s.group));
-    return [...groups].filter(Boolean).map(group => (
-      <optgroup label={group} key={group}>
-        {sources.filter(s => s.group === group).map(source => renderOption(source))}
-      </optgroup>
-    ));
-  }
-
-  return sources.map(source => renderOption(source));
-}

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

@@ -21,6 +21,10 @@ import type { SourceLocation } from './modelUtil';
 import { Workbench } from './workbench';
 import type { Mode, Source } from '@recorder/recorderTypes';
 import type { ContextEntry } from '../entries';
+import { emptySource, SourceChooser } from '@web/components/sourceChooser';
+import { Toolbar } from '@web/components/toolbar';
+import { ToolbarButton, ToolbarSeparator } from '@web/components/toolbarButton';
+import { toggleTheme } from '@web/theme';
 
 const searchParams = new URLSearchParams(window.location.search);
 const guid = searchParams.get('ws');
@@ -29,33 +33,81 @@ const trace = searchParams.get('trace') + '.json';
 export const RecorderView: React.FunctionComponent = () => {
   const [connection, setConnection] = React.useState<Connection | null>(null);
   const [sources, setSources] = React.useState<Source[]>([]);
+  const [mode, setMode] = React.useState<Mode>('none');
+  const [fileId, setFileId] = React.useState<string | undefined>();
+
+  React.useEffect(() => {
+    if (!fileId && sources.length > 0)
+      setFileId(sources[0].id);
+  }, [fileId, sources]);
+
+  const source = React.useMemo(() => {
+    if (fileId) {
+      const source = sources.find(s => s.id === fileId);
+      if (source)
+        return source;
+    }
+    return emptySource();
+  }, [sources, fileId]);
+
   React.useEffect(() => {
     const wsURL = new URL(`../${guid}`, window.location.toString());
     wsURL.protocol = (window.location.protocol === 'https:' ? 'wss:' : 'ws:');
     const webSocket = new WebSocket(wsURL.toString());
-    setConnection(new Connection(webSocket, { setSources }));
+    setConnection(new Connection(webSocket, { setSources, setMode }));
     return () => {
       webSocket.close();
     };
   }, []);
 
-  React.useEffect(() => {
-    if (!connection)
-      return;
-    connection.setMode('recording');
-  }, [connection]);
-
   return <div className='vbox workbench-loader'>
+    <Toolbar>
+      <ToolbarButton icon='circle-large-filled' title='Record' toggled={mode === 'recording' || mode === 'recording-inspecting' || mode === 'assertingText' || mode === 'assertingVisibility'} onClick={() => {
+        connection?.setMode(mode === 'none' || mode === 'standby' || mode === 'inspecting' ? 'recording' : 'standby');
+      }}>Record</ToolbarButton>
+      <ToolbarSeparator />
+      <ToolbarButton icon='inspect' title='Pick locator' toggled={mode === 'inspecting' || mode === 'recording-inspecting'} onClick={() => {
+        const newMode = ({
+          'inspecting': 'standby',
+          'none': 'inspecting',
+          'standby': 'inspecting',
+          'recording': 'recording-inspecting',
+          'recording-inspecting': 'recording',
+          'assertingText': 'recording-inspecting',
+          'assertingVisibility': 'recording-inspecting',
+          'assertingValue': 'recording-inspecting',
+        } as Record<string, Mode>)[mode];
+        connection?.setMode(newMode);
+      }}></ToolbarButton>
+      <ToolbarButton icon='eye' title='Assert visibility' toggled={mode === 'assertingVisibility'} disabled={mode === 'none' || mode === 'standby' || mode === 'inspecting'} onClick={() => {
+        connection?.setMode(mode === 'assertingVisibility' ? 'recording' : 'assertingVisibility');
+      }}></ToolbarButton>
+      <ToolbarButton icon='whole-word' title='Assert text' toggled={mode === 'assertingText'} disabled={mode === 'none' || mode === 'standby' || mode === 'inspecting'} onClick={() => {
+        connection?.setMode(mode === 'assertingText' ? 'recording' : 'assertingText');
+      }}></ToolbarButton>
+      <ToolbarButton icon='symbol-constant' title='Assert value' toggled={mode === 'assertingValue'} disabled={mode === 'none' || mode === 'standby' || mode === 'inspecting'} onClick={() => {
+        connection?.setMode(mode === 'assertingValue' ? 'recording' : 'assertingValue');
+      }}></ToolbarButton>
+      <ToolbarSeparator />
+      <div style={{ flex: 'auto' }}></div>
+      <div>Target:</div>
+      <SourceChooser fileId={fileId} sources={sources} setFileId={fileId => {
+        setFileId(fileId);
+      }} />
+      <ToolbarButton icon='clear-all' title='Clear' disabled={!source || !source.text} onClick={() => {
+      }}></ToolbarButton>
+      <ToolbarButton icon='color-mode' title='Toggle color mode' toggled={false} onClick={() => toggleTheme()}></ToolbarButton>
+    </Toolbar>
     <TraceView
       traceLocation={trace}
-      sources={sources} />
+      source={source} />
   </div>;
 };
 
 export const TraceView: React.FC<{
   traceLocation: string,
-  sources: Source[],
-}> = ({ traceLocation, sources }) => {
+  source: Source | undefined,
+}> = ({ traceLocation, source }) => {
   const [model, setModel] = React.useState<{ model: MultiTraceModel, isLive: boolean } | undefined>();
   const [counter, setCounter] = React.useState(0);
   const pollTimer = React.useRef<NodeJS.Timeout | null>(null);
@@ -82,19 +134,19 @@ export const TraceView: React.FC<{
   }, [counter, traceLocation]);
 
   const fallbackLocation = React.useMemo(() => {
-    if (!sources.length)
+    if (!source)
       return undefined;
     const fallbackLocation: SourceLocation = {
       file: '',
       line: 0,
       column: 0,
       source: {
         errors: [],
-        content: sources[0].text
+        content: source.text
       }
     };
     return fallbackLocation;
-  }, [sources]);
+  }, [source]);
 
   return <Workbench
     key='workbench'
@@ -103,6 +155,7 @@ export const TraceView: React.FC<{
     fallbackLocation={fallbackLocation}
     isLive={true}
     hideTimeline={true}
+    hideMetatada={true}
   />;
 };
 
@@ -114,13 +167,19 @@ async function loadSingleTraceFile(url: string): Promise<MultiTraceModel> {
   return new MultiTraceModel(contextEntries);
 }
 
+
+type ConnectionOptions = {
+  setSources: (sources: Source[]) => void;
+  setMode: (mode: Mode) => void;
+};
+
 class Connection {
   private _lastId = 0;
   private _webSocket: WebSocket;
   private _callbacks = new Map<number, { resolve: (arg: any) => void, reject: (arg: Error) => void }>();
-  private _options: { setSources: (sources: Source[]) => void; };
+  private _options: ConnectionOptions;
 
-  constructor(webSocket: WebSocket, options: { setSources: (sources: Source[]) => void }) {
+  constructor(webSocket: WebSocket, options: ConnectionOptions) {
     this._webSocket = webSocket;
     this._callbacks = new Map();
     this._options = options;
@@ -157,7 +216,7 @@ class Connection {
   }
 
   private _sendMessageNoReply(method: string, params?: any) {
-    this._sendMessage(method, params).catch(() => { });
+    this._sendMessage(method, params);
   }
 
   private _dispatchEvent(method: string, params?: any) {
@@ -166,5 +225,10 @@ class Connection {
       this._options.setSources(sources);
       window.playwrightSourcesEchoForTest = sources;
     }
+
+    if (method === 'setMode') {
+      const { mode } = params as { mode: Mode };
+      this._options.setMode(mode);
+    }
   }
 }

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

@@ -28,10 +28,6 @@
   background-color: var(--vscode-sideBar-background);
 }
 
-.snapshot-tab .toolbar .pick-locator {
-  margin: 0 4px;
-}
-
 .snapshot-controls {
   flex: none;
   background-color: var(--vscode-sideBar-background);

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

@@ -211,7 +211,8 @@ export const SnapshotTab: React.FunctionComponent<{
       iframe={iframeRef1.current}
       iteration={loadingRef.current.iteration} />
     <Toolbar>
-      <ToolbarButton className='pick-locator' title={showScreenshotInsteadOfSnapshot ? 'Disable "screenshots instead of snapshots" to pick a locator' : 'Pick locator'} icon='target' toggled={isInspecting} onClick={() => setIsInspecting(!isInspecting)} disabled={showScreenshotInsteadOfSnapshot} />
+      <ToolbarButton title={showScreenshotInsteadOfSnapshot ? 'Disable "screenshots instead of snapshots" to pick a locator' : 'Pick locator'} icon='target' toggled={isInspecting} onClick={() => setIsInspecting(!isInspecting)} disabled={showScreenshotInsteadOfSnapshot} />
+      <div style={{ width: 4 }}></div>
       {['action', 'before', 'after'].map(tab => {
         return <TabbedPaneTab
           key={tab}

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

@@ -16,7 +16,7 @@
 
 import { SplitView } from '@web/components/splitView';
 import * as React from 'react';
-import { useAsyncMemo } from '@web/uiUtils';
+import { copy, useAsyncMemo } from '@web/uiUtils';
 import './sourceTab.css';
 import { StackTraceView } from './stackTrace';
 import { CodeMirrorWrapper } from '@web/components/codeMirrorWrapper';
@@ -104,13 +104,18 @@ export const SourceTab: React.FunctionComponent<{
     orientation={stackFrameLocation === 'bottom' ? 'vertical' : 'horizontal'}
     sidebarHidden={!showStackFrames}
     main={<div className='vbox' data-testid='source-code'>
-      { fileName && <Toolbar>
+      {fileName && <Toolbar>
         <div className='source-tab-file-name' title={fileName}>
           <div>{shortFileName}</div>
         </div>
         <CopyToClipboard description='Copy filename' value={shortFileName}/>
         {location && <ToolbarButton icon='link-external' title='Open in VS Code' onClick={openExternally}></ToolbarButton>}
-      </Toolbar> }
+      </Toolbar>}
+      {!fileName && <div style={{ position: 'absolute', right: 5, top: 5 }}>
+        <ToolbarButton icon='files' title='Copy' onClick={() => {
+          copy(source.content || '');
+        }} />
+      </div>}
       <CodeMirrorWrapper text={source.content || ''} language='javascript' highlight={highlight} revealLine={targetLine} readOnly={true} lineNumbers={true} />
     </div>}
     sidebar={<StackTraceView stack={stack} selectedFrame={selectedFrame} setSelectedFrame={setSelectedFrame} />}