From 61a192432844dff87e3493a03c0158534a2cdb3c Mon Sep 17 00:00:00 2001
From: Pavel Feldman <pavel.feldman@gmail.com>
Date: Wed, 6 Sep 2023 17:13:25 -0700
Subject: [PATCH] chore: align recorder drawer with trace viewer (#26922)

---
 packages/recorder/src/recorder.css    | 14 -----------
 packages/recorder/src/recorder.tsx    | 35 ++++++++++++++++++---------
 tests/library/inspector/pause.spec.ts |  3 ++-
 3 files changed, 25 insertions(+), 27 deletions(-)

diff --git a/packages/recorder/src/recorder.css b/packages/recorder/src/recorder.css
index 16baefffed..fc824f98fe 100644
--- a/packages/recorder/src/recorder.css
+++ b/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;
-}
diff --git a/packages/recorder/src/recorder.tsx b/packages/recorder/src/recorder.tsx
index ba6d217ff9..af32c60d0b 100644
--- a/packages/recorder/src/recorder.tsx
+++ b/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>;
 };
diff --git a/tests/library/inspector/pause.spec.ts b/tests/library/inspector/pause.spec.ts
index 1c387892a7..dabff31491 100644
--- a/tests/library/inspector/pause.spec.ts
+++ b/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;