From b99c214b292ea3da0ba718ee35bba6696e20a6d3 Mon Sep 17 00:00:00 2001
From: Pavel Feldman <pavel.feldman@gmail.com>
Date: Thu, 1 Jun 2023 15:49:48 -0700
Subject: [PATCH] chore(trace): render drawer as a sidebar in the tv mode
 (#23451)

Fixes: https://github.com/microsoft/playwright/issues/23227
---
 packages/trace-viewer/src/ui/sourceTab.tsx  | 2 +-
 packages/trace-viewer/src/ui/uiModeView.tsx | 3 ++-
 packages/trace-viewer/src/ui/workbench.tsx  | 5 +++--
 3 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/packages/trace-viewer/src/ui/sourceTab.tsx b/packages/trace-viewer/src/ui/sourceTab.tsx
index 0b244b4404..d8a15c8ce8 100644
--- a/packages/trace-viewer/src/ui/sourceTab.tsx
+++ b/packages/trace-viewer/src/ui/sourceTab.tsx
@@ -75,7 +75,7 @@ export const SourceTab: React.FunctionComponent<{
     return { source, highlight, targetLine, fileName };
   }, [action, selectedFrame, rootDir, fallbackLocation], { source: { errors: [], content: 'Loading\u2026' }, highlight: [] });
 
-  return <SplitView sidebarSize={200} orientation='horizontal' sidebarHidden={hideStackFrames}>
+  return <SplitView sidebarSize={200} orientation='vertical' sidebarHidden={hideStackFrames}>
     <div className='vbox' data-testid='source-code'>
       {fileName && <div className='source-tab-file-name'>{fileName}</div>}
       <CodeMirrorWrapper text={source.content || ''} language='javascript' highlight={highlight} revealLine={targetLine} readOnly={true} lineNumbers={true} />
diff --git a/packages/trace-viewer/src/ui/uiModeView.tsx b/packages/trace-viewer/src/ui/uiModeView.tsx
index 8582e39934..753e777f25 100644
--- a/packages/trace-viewer/src/ui/uiModeView.tsx
+++ b/packages/trace-viewer/src/ui/uiModeView.tsx
@@ -557,7 +557,8 @@ const TraceView: React.FC<{
     initialSelection={initialSelection}
     onSelectionChanged={onSelectionChanged}
     fallbackLocation={item.testFile}
-    isLive={model?.isLive} />;
+    isLive={model?.isLive}
+    drawer='bottom' />;
 };
 
 declare global {
diff --git a/packages/trace-viewer/src/ui/workbench.tsx b/packages/trace-viewer/src/ui/workbench.tsx
index 0f3e55cc66..1064e14ab1 100644
--- a/packages/trace-viewer/src/ui/workbench.tsx
+++ b/packages/trace-viewer/src/ui/workbench.tsx
@@ -41,7 +41,8 @@ export const Workbench: React.FunctionComponent<{
   initialSelection?: ActionTraceEventInContext,
   onSelectionChanged?: (action: ActionTraceEventInContext) => void,
   isLive?: boolean,
-}> = ({ model, hideTimelineBars, hideStackFrames, showSourcesFirst, rootDir, fallbackLocation, initialSelection, onSelectionChanged, isLive }) => {
+  drawer?: 'bottom' | 'right',
+}> = ({ model, hideTimelineBars, hideStackFrames, showSourcesFirst, rootDir, fallbackLocation, initialSelection, onSelectionChanged, isLive, drawer }) => {
   const [selectedAction, setSelectedAction] = React.useState<ActionTraceEventInContext | undefined>(undefined);
   const [highlightedAction, setHighlightedAction] = React.useState<ActionTraceEventInContext | undefined>();
   const [selectedNavigatorTab, setSelectedNavigatorTab] = React.useState<string>('actions');
@@ -126,7 +127,7 @@ export const Workbench: React.FunctionComponent<{
       onSelected={onActionSelected}
       hideTimelineBars={hideTimelineBars}
     />
-    <SplitView sidebarSize={250} orientation='vertical'>
+    <SplitView sidebarSize={250} orientation={drawer === 'bottom' ? 'vertical' : 'horizontal'}>
       <SplitView sidebarSize={250} orientation='horizontal' sidebarIsFirst={true}>
         <SnapshotTab action={activeAction} sdkLanguage={sdkLanguage} testIdAttributeName={model?.testIdAttributeName || 'data-testid'} />
         <TabbedPane tabs={