From cb5fd0cd27b7704cd6b61e55e2caafe9e343321a Mon Sep 17 00:00:00 2001
From: Sarkis Matinyan <s.a.matinyan@gmail.com>
Date: Fri, 1 Mar 2024 00:31:05 +0400
Subject: [PATCH] fix(ui): improve stack frame sidebar UX

1. Show stack frames if there are more than one frame
2. Position stack frames based on sourceTab docked position:
Source tab docked right -> stack frames at the bottom
Source tab docked bottom -> stack frames at the right
---
 packages/trace-viewer/src/ui/sourceTab.tsx | 7 +++++--
 packages/trace-viewer/src/ui/workbench.tsx | 1 +
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/packages/trace-viewer/src/ui/sourceTab.tsx b/packages/trace-viewer/src/ui/sourceTab.tsx
index e9efe4395e..a3acad64a2 100644
--- a/packages/trace-viewer/src/ui/sourceTab.tsx
+++ b/packages/trace-viewer/src/ui/sourceTab.tsx
@@ -26,10 +26,11 @@ import type { StackFrame } from '@protocol/channels';
 
 export const SourceTab: React.FunctionComponent<{
   stack: StackFrame[] | undefined,
+  stackFrameLocation: 'bottom' | 'right',
   sources: Map<string, SourceModel>,
   rootDir?: string,
   fallbackLocation?: SourceLocation,
-}> = ({ stack, sources, rootDir, fallbackLocation }) => {
+}> = ({ stack, sources, rootDir, fallbackLocation, stackFrameLocation }) => {
   const [lastStack, setLastStack] = React.useState<StackFrame[] | undefined>();
   const [selectedFrame, setSelectedFrame] = React.useState<number>(0);
 
@@ -77,7 +78,9 @@ export const SourceTab: React.FunctionComponent<{
     return { source, highlight, targetLine, fileName };
   }, [stack, selectedFrame, rootDir, fallbackLocation], { source: { errors: [], content: 'Loading\u2026' }, highlight: [] });
 
-  return <SplitView sidebarSize={200} orientation='horizontal'>
+  const showStackFrames = (stack?.length ?? 0) > 1;
+
+  return <SplitView sidebarSize={200} orientation={stackFrameLocation === 'bottom' ? 'vertical' : 'horizontal'} sidebarHidden={!showStackFrames}>
     <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/workbench.tsx b/packages/trace-viewer/src/ui/workbench.tsx
index bdc99a9c92..c667062d11 100644
--- a/packages/trace-viewer/src/ui/workbench.tsx
+++ b/packages/trace-viewer/src/ui/workbench.tsx
@@ -158,6 +158,7 @@ export const Workbench: React.FunctionComponent<{
       stack={revealedStack}
       sources={sources}
       rootDir={rootDir}
+      stackFrameLocation={sidebarLocation === 'bottom' ? 'right' : 'bottom'}
       fallbackLocation={fallbackLocation} />
   };
   const consoleTab: TabbedPaneTabModel = {