chore: align recorder drawer with trace viewer (#26922)

packages/recorder/src/recorder.css

@@ -28,10 +28,6 @@
   min-width: 100px;
 }
 
-.recorder .toolbar-button.toggled.microscope {
-  color: #12a3ff;
-}
-
 .recorder .toolbar-button.toggled.record {
   color: #a1260d;
 }
@@ -53,13 +49,3 @@ body.dark-mode .recorder .toolbar-button.toggled.record {
 .recorder .selector-input {
   flex: auto;
 }
-
-.recorder .toolbar .cm-wrapper {
-  margin-left: 8px;
-  display: flex;
-  padding: 8px;
-}
-
-.recorder .toolbar .CodeMirror {
-  height: auto;
-}

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 { TabbedPane } from '@web/components/tabbedPane';
 import { Toolbar } from '@web/components/toolbar';
 import { ToolbarButton } from '@web/components/toolbarButton';
 import * as React from 'react';
@@ -48,6 +49,7 @@ export const Recorder: React.FC<RecorderProps> = ({
   mode,
 }) => {
   const [fileId, setFileId] = React.useState<string | undefined>();
+  const [selectedTab, setSelectedTab] = React.useState<string>('log');
 
   React.useEffect(() => {
     if (!fileId && sources.length > 0)
@@ -140,18 +142,27 @@ export const Recorder: React.FC<RecorderProps> = ({
     </Toolbar>
     <SplitView sidebarSize={200} sidebarHidden={mode === 'recording'}>
       <CodeMirrorWrapper text={source.text} language={source.language} highlight={source.highlight} revealLine={source.revealLine} readOnly={true} lineNumbers={true}/>
-      <div className='vbox'>
-        <Toolbar>
-          <ToolbarButton icon='microscope' title='Pick locator' toggled={mode === 'inspecting'} onClick={() => {
-            window.dispatch({ event: 'setMode', params: { mode: mode === 'inspecting' ? 'none' : 'inspecting' } }).catch(() => { });
-          }}>Pick locator</ToolbarButton>
-          <CodeMirrorWrapper text={locator} language={source.language} readOnly={false} focusOnChange={true} wrapLines={true} onChange={onEditorChange} />
-          <ToolbarButton icon='files' title='Copy' onClick={() => {
-            copy(locator);
-          }}></ToolbarButton>
-        </Toolbar>
-        <CallLogView language={source.language} log={Array.from(log.values())}/>
-      </div>
+      <TabbedPane
+        leftToolbar={[<ToolbarButton icon='target' title='Pick locator' toggled={mode === 'inspecting'} onClick={() => {
+          window.dispatch({ event: 'setMode', params: { mode: mode === 'inspecting' ? 'none' : 'inspecting' } }).catch(() => { });
+          setSelectedTab('locator');
+        }} />]}
+        rightToolbar={selectedTab === 'locator' ? [<ToolbarButton icon='files' title='Copy' onClick={() => copy(locator)} />] : []}
+        tabs={[
+          {
+            id: 'locator',
+            title: 'Locator',
+            render: () => <CodeMirrorWrapper text={locator} language={source.language} readOnly={false} focusOnChange={true} onChange={onEditorChange} />
+          },
+          {
+            id: 'log',
+            title: 'Log',
+            render: () => <CallLogView language={source.language} log={Array.from(log.values())}/>
+          },
+        ]}
+        selectedTab={selectedTab}
+        setSelectedTab={setSelectedTab}
+      />
     </SplitView>
   </div>;
 };

tests/library/inspector/pause.spec.ts

@@ -376,7 +376,8 @@ it.describe('pause', () => {
     const recorderPage = await recorderPageGetter();
 
     const box1Promise = waitForTestLog<Box>(page, 'Highlight box for test: ');
-    await recorderPage.click('.toolbar .CodeMirror');
+    await recorderPage.getByText('Locator', { exact: true }).click();
+    await recorderPage.locator('.tabbed-pane .CodeMirror').click();
     await recorderPage.keyboard.type('getByText(\'Submit\')');
     const box1 = await box1Promise;