Filip/playwright
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

fix(ui): improve stack frame sidebar UX

Browse source 
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
This commit is contained in:
Sarkis Matinyan 2024-03-01 00:31:05 +04:00
parent 01fa035b95
commit cb5fd0cd27
No known key found for this signature in database
GPG key ID: 81DCD2E5CAD09CAF
2 changed files with 6 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
packages/trace-viewer/src/ui/sourceTab.tsx
View file

@ -26,10 +26,11 @@ import type { StackFrame } from '@protocol/channels';
export const SourceTab: React.FunctionComponent<{ export const SourceTab: React.FunctionComponent<{
stack: StackFrame[] | undefined, stack: StackFrame[] | undefined,
stackFrameLocation: 'bottom' | 'right',
sources: Map<string, SourceModel>, sources: Map<string, SourceModel>,
rootDir?: string, rootDir?: string,
fallbackLocation?: SourceLocation, fallbackLocation?: SourceLocation,
}> = ({ stack, sources, rootDir, fallbackLocation }) => { }> = ({ stack, sources, rootDir, fallbackLocation, stackFrameLocation }) => {
const [lastStack, setLastStack] = React.useState<StackFrame[] | undefined>(); const [lastStack, setLastStack] = React.useState<StackFrame[] | undefined>();
const [selectedFrame, setSelectedFrame] = React.useState<number>(0); const [selectedFrame, setSelectedFrame] = React.useState<number>(0);
@ -77,7 +78,9 @@ export const SourceTab: React.FunctionComponent<{
return { source, highlight, targetLine, fileName }; return { source, highlight, targetLine, fileName };
}, [stack, selectedFrame, rootDir, fallbackLocation], { source: { errors: [], content: 'Loading\u2026' }, highlight: [] }); }, [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'> <div className='vbox' data-testid='source-code'>
{fileName && <div className='source-tab-file-name'>{fileName}</div>} {fileName && <div className='source-tab-file-name'>{fileName}</div>}
<CodeMirrorWrapper text={source.content || ''} language='javascript' highlight={highlight} revealLine={targetLine} readOnly={true} lineNumbers={true} /> <CodeMirrorWrapper text={source.content || ''} language='javascript' highlight={highlight} revealLine={targetLine} readOnly={true} lineNumbers={true} />

1
packages/trace-viewer/src/ui/workbench.tsx
View file

@ -158,6 +158,7 @@ export const Workbench: React.FunctionComponent<{
stack={revealedStack} stack={revealedStack}
sources={sources} sources={sources}
rootDir={rootDir} rootDir={rootDir}
stackFrameLocation={sidebarLocation === 'bottom' ? 'right' : 'bottom'}
fallbackLocation={fallbackLocation} /> fallbackLocation={fallbackLocation} />
}; };
const consoleTab: TabbedPaneTabModel = { const consoleTab: TabbedPaneTabModel = {