yujunjun/playwright
1
0
Fork 0
mirror of https://github.com/microsoft/playwright.git synced 2025-06-26 21:40:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

chore(trace): render drawer as a sidebar in the tv mode (#23451)

Browse Source 
Fixes: https://github.com/microsoft/playwright/issues/23227
This commit is contained in:
Pavel Feldman 2023-06-01 15:49:48 -07:00 committed by GitHub
parent 0a6fe3fac5
commit b99c214b29
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 6 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/trace-viewer/src/ui/sourceTab.tsx
View File

@ -75,7 +75,7 @@ export const SourceTab: React.FunctionComponent<{
return { source, highlight, targetLine, fileName }; return { source, highlight, targetLine, fileName };
}, [action, selectedFrame, rootDir, fallbackLocation], { source: { errors: [], content: 'Loading\u2026' }, highlight: [] }); }, [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'> <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} />

3
packages/trace-viewer/src/ui/uiModeView.tsx
View File

@ -557,7 +557,8 @@ const TraceView: React.FC<{
initialSelection={initialSelection} initialSelection={initialSelection}
onSelectionChanged={onSelectionChanged} onSelectionChanged={onSelectionChanged}
fallbackLocation={item.testFile} fallbackLocation={item.testFile}
isLive={model?.isLive} />; isLive={model?.isLive}
drawer='bottom' />;
}; };
declare global { declare global {

5
packages/trace-viewer/src/ui/workbench.tsx
View File

@ -41,7 +41,8 @@ export const Workbench: React.FunctionComponent<{
initialSelection?: ActionTraceEventInContext, initialSelection?: ActionTraceEventInContext,
onSelectionChanged?: (action: ActionTraceEventInContext) => void, onSelectionChanged?: (action: ActionTraceEventInContext) => void,
isLive?: boolean, 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 [selectedAction, setSelectedAction] = React.useState<ActionTraceEventInContext | undefined>(undefined);
const [highlightedAction, setHighlightedAction] = React.useState<ActionTraceEventInContext | undefined>(); const [highlightedAction, setHighlightedAction] = React.useState<ActionTraceEventInContext | undefined>();
const [selectedNavigatorTab, setSelectedNavigatorTab] = React.useState<string>('actions'); const [selectedNavigatorTab, setSelectedNavigatorTab] = React.useState<string>('actions');
@ -126,7 +127,7 @@ export const Workbench: React.FunctionComponent<{
onSelected={onActionSelected} onSelected={onActionSelected}
hideTimelineBars={hideTimelineBars} hideTimelineBars={hideTimelineBars}
/> />
<SplitView sidebarSize={250} orientation='vertical'> <SplitView sidebarSize={250} orientation={drawer === 'bottom' ? 'vertical' : 'horizontal'}>
<SplitView sidebarSize={250} orientation='horizontal' sidebarIsFirst={true}> <SplitView sidebarSize={250} orientation='horizontal' sidebarIsFirst={true}>
<SnapshotTab action={activeAction} sdkLanguage={sdkLanguage} testIdAttributeName={model?.testIdAttributeName || 'data-testid'} /> <SnapshotTab action={activeAction} sdkLanguage={sdkLanguage} testIdAttributeName={model?.testIdAttributeName || 'data-testid'} />
<TabbedPane tabs={ <TabbedPane tabs={