From c7d9ae1c8bdd038cd5c57c316aad93c4f6644325 Mon Sep 17 00:00:00 2001
From: Pavel Feldman <pavel.feldman@gmail.com>
Date: Fri, 22 Sep 2023 10:43:44 -0700
Subject: [PATCH] ui(trace): make drawer appear under action list (#27260)

---
 packages/trace-viewer/src/ui/actionList.tsx |  2 +-
 packages/trace-viewer/src/ui/uiModeView.tsx |  2 +-
 packages/trace-viewer/src/ui/workbench.tsx  | 86 ++++++++++-----------
 3 files changed, 45 insertions(+), 45 deletions(-)

diff --git a/packages/trace-viewer/src/ui/actionList.tsx b/packages/trace-viewer/src/ui/actionList.tsx
index e6dd6a5577..1f5b06709f 100644
--- a/packages/trace-viewer/src/ui/actionList.tsx
+++ b/packages/trace-viewer/src/ui/actionList.tsx
@@ -94,7 +94,7 @@ export const renderAction = (
   else if (!isLive)
     time = '-';
   return <>
-    <div className='action-title'>
+    <div className='action-title' title={action.apiName}>
       <span>{action.apiName}</span>
       {locator && <div className='action-selector' title={locator}>{locator}</div>}
       {action.method === 'goto' && action.params.url && <div className='action-url' title={action.params.url}>{action.params.url}</div>}
diff --git a/packages/trace-viewer/src/ui/uiModeView.tsx b/packages/trace-viewer/src/ui/uiModeView.tsx
index bcde089ea4..9c04722b83 100644
--- a/packages/trace-viewer/src/ui/uiModeView.tsx
+++ b/packages/trace-viewer/src/ui/uiModeView.tsx
@@ -498,7 +498,7 @@ const TestList: React.FC<{
     dataTestId='test-tree'
     render={treeItem => {
       return <div className='hbox ui-mode-list-item'>
-        <div className='ui-mode-list-item-title'>{treeItem.title}</div>
+        <div className='ui-mode-list-item-title' title={treeItem.title}>{treeItem.title}</div>
         {!!treeItem.duration && treeItem.status !== 'skipped' && <div className='ui-mode-list-item-time'>{msToString(treeItem.duration)}</div>}
         <Toolbar noMinHeight={true} noShadow={true}>
           <ToolbarButton icon='play' title='Run' onClick={() => runTreeItem(treeItem)} disabled={!!runningState}></ToolbarButton>
diff --git a/packages/trace-viewer/src/ui/workbench.tsx b/packages/trace-viewer/src/ui/workbench.tsx
index ce32b9a7ca..4ff57b5716 100644
--- a/packages/trace-viewer/src/ui/workbench.tsx
+++ b/packages/trace-viewer/src/ui/workbench.tsx
@@ -193,8 +193,8 @@ export const Workbench: React.FunctionComponent<{
       selectedTime={selectedTime}
       setSelectedTime={setSelectedTime}
     />
-    <SplitView sidebarSize={250} orientation='horizontal' sidebarIsFirst={true} settingName='actionListSidebar'>
-      <SplitView sidebarSize={250} orientation={sidebarLocation === 'bottom' ? 'vertical' : 'horizontal'} settingName='propertiesSidebar'>
+    <SplitView sidebarSize={250} orientation={sidebarLocation === 'bottom' ? 'vertical' : 'horizontal'} settingName='propertiesSidebar'>
+      <SplitView sidebarSize={250} orientation='horizontal' sidebarIsFirst={true} settingName='actionListSidebar'>
         <SnapshotTab
           action={activeAction}
           sdkLanguage={sdkLanguage}
@@ -204,51 +204,51 @@ export const Workbench: React.FunctionComponent<{
           highlightedLocator={highlightedLocator}
           setHighlightedLocator={locatorPicked} />
         <TabbedPane
-          tabs={tabs}
-          selectedTab={selectedPropertiesTab}
-          setSelectedTab={selectPropertiesTab}
-          leftToolbar={[
-            <ToolbarButton title='Pick locator' icon='target' toggled={isInspecting} onClick={() => {
-              if (!isInspecting)
-                selectPropertiesTab('inspector');
-              setIsInspecting(!isInspecting);
-            }} />
+          tabs={[
+            {
+              id: 'actions',
+              title: 'Actions',
+              component: <ActionList
+                sdkLanguage={sdkLanguage}
+                actions={model?.actions || []}
+                selectedAction={model ? selectedAction : undefined}
+                selectedTime={selectedTime}
+                setSelectedTime={setSelectedTime}
+                onSelected={onActionSelected}
+                onHighlighted={setHighlightedAction}
+                revealConsole={() => selectPropertiesTab('console')}
+                isLive={isLive}
+              />
+            },
+            {
+              id: 'metadata',
+              title: 'Metadata',
+              component: <MetadataView model={model}/>
+            },
           ]}
-          rightToolbar={[
-            sidebarLocation === 'bottom' ?
-              <ToolbarButton title='Dock to right' icon='layout-sidebar-right-off' onClick={() => {
-                setSidebarLocation('right');
-              }} /> :
-              <ToolbarButton title='Dock to bottom' icon='layout-panel-off' onClick={() => {
-                setSidebarLocation('bottom');
-              }} />
-          ]}
-        />
+          selectedTab={selectedNavigatorTab} setSelectedTab={setSelectedNavigatorTab}/>
       </SplitView>
       <TabbedPane
-        tabs={[
-          {
-            id: 'actions',
-            title: 'Actions',
-            component: <ActionList
-              sdkLanguage={sdkLanguage}
-              actions={model?.actions || []}
-              selectedAction={model ? selectedAction : undefined}
-              selectedTime={selectedTime}
-              setSelectedTime={setSelectedTime}
-              onSelected={onActionSelected}
-              onHighlighted={setHighlightedAction}
-              revealConsole={() => selectPropertiesTab('console')}
-              isLive={isLive}
-            />
-          },
-          {
-            id: 'metadata',
-            title: 'Metadata',
-            component: <MetadataView model={model}/>
-          },
+        tabs={tabs}
+        selectedTab={selectedPropertiesTab}
+        setSelectedTab={selectPropertiesTab}
+        leftToolbar={[
+          <ToolbarButton title='Pick locator' icon='target' toggled={isInspecting} onClick={() => {
+            if (!isInspecting)
+              selectPropertiesTab('inspector');
+            setIsInspecting(!isInspecting);
+          }} />
         ]}
-        selectedTab={selectedNavigatorTab} setSelectedTab={setSelectedNavigatorTab}/>
+        rightToolbar={[
+          sidebarLocation === 'bottom' ?
+            <ToolbarButton title='Dock to right' icon='layout-sidebar-right-off' onClick={() => {
+              setSidebarLocation('right');
+            }} /> :
+            <ToolbarButton title='Dock to bottom' icon='layout-panel-off' onClick={() => {
+              setSidebarLocation('bottom');
+            }} />
+        ]}
+      />
     </SplitView>
   </div>;
 };