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

fix(ui): show stack frames in ui mode

Browse source
This commit is contained in:
Sarkis Matinyan 2024-02-19 16:51:01 +04:00
parent 1d4bdc6898
commit 01fa035b95
No known key found for this signature in database
GPG key ID: 81DCD2E5CAD09CAF
3 changed files with 3 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -27,10 +27,9 @@ import type { StackFrame } from '@protocol/channels';
export const SourceTab: React.FunctionComponent<{ export const SourceTab: React.FunctionComponent<{
stack: StackFrame[] | undefined, stack: StackFrame[] | undefined,
sources: Map<string, SourceModel>, sources: Map<string, SourceModel>,
hideStackFrames?: boolean,
rootDir?: string, rootDir?: string,
fallbackLocation?: SourceLocation, fallbackLocation?: SourceLocation,
}> = ({ stack, sources, hideStackFrames, rootDir, fallbackLocation }) => { }> = ({ stack, sources, rootDir, fallbackLocation }) => {
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);
@ -78,7 +77,7 @@ 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' sidebarHidden={hideStackFrames}> return <SplitView sidebarSize={200} orientation='horizontal'>
<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/uiModeView.tsx
View file

@ -589,7 +589,6 @@ const TraceView: React.FC<{
return <Workbench return <Workbench
key='workbench' key='workbench'
model={model?.model} model={model?.model}
hideStackFrames={true}
showSourcesFirst={true} showSourcesFirst={true}
rootDir={rootDir} rootDir={rootDir}
initialSelection={initialSelection} initialSelection={initialSelection}

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

@ -43,7 +43,6 @@ import type { UITestStatus } from './testUtils';
export const Workbench: React.FunctionComponent<{ export const Workbench: React.FunctionComponent<{
model?: MultiTraceModel, model?: MultiTraceModel,
hideStackFrames?: boolean,
showSourcesFirst?: boolean, showSourcesFirst?: boolean,
rootDir?: string, rootDir?: string,
fallbackLocation?: modelUtil.SourceLocation, fallbackLocation?: modelUtil.SourceLocation,
@ -51,7 +50,7 @@ export const Workbench: React.FunctionComponent<{
onSelectionChanged?: (action: ActionTraceEventInContext) => void, onSelectionChanged?: (action: ActionTraceEventInContext) => void,
isLive?: boolean, isLive?: boolean,
status?: UITestStatus, status?: UITestStatus,
}> = ({ model, hideStackFrames, showSourcesFirst, rootDir, fallbackLocation, initialSelection, onSelectionChanged, isLive, status }) => { }> = ({ model, showSourcesFirst, rootDir, fallbackLocation, initialSelection, onSelectionChanged, isLive, status }) => {
const [selectedAction, setSelectedActionImpl] = React.useState<ActionTraceEventInContext | undefined>(undefined); const [selectedAction, setSelectedActionImpl] = React.useState<ActionTraceEventInContext | undefined>(undefined);
const [revealedStack, setRevealedStack] = React.useState<StackFrame[] | undefined>(undefined); const [revealedStack, setRevealedStack] = React.useState<StackFrame[] | undefined>(undefined);
const [highlightedAction, setHighlightedAction] = React.useState<ActionTraceEventInContext | undefined>(); const [highlightedAction, setHighlightedAction] = React.useState<ActionTraceEventInContext | undefined>();
@ -158,7 +157,6 @@ export const Workbench: React.FunctionComponent<{
render: () => <SourceTab render: () => <SourceTab
stack={revealedStack} stack={revealedStack}
sources={sources} sources={sources}
hideStackFrames={hideStackFrames}
rootDir={rootDir} rootDir={rootDir}
fallbackLocation={fallbackLocation} /> fallbackLocation={fallbackLocation} />
}; };