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

chore(ui): minor trace viewer improvements (#21672)

Browse source
This commit is contained in:
Pavel Feldman 2023-03-14 15:24:48 -07:00 committed by GitHub
parent 910b963ca6
commit 7666894d77
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 17 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
packages/trace-viewer/src/ui/actionList.css
View file

@ -22,6 +22,9 @@
} }
.action-duration { .action-duration {
display: flex;
flex: none;
align-items: center;
margin: 0 4px; margin: 0 4px;
color: var(--gray); color: var(--gray);
} }

12
packages/trace-viewer/src/ui/actionList.tsx
View file

@ -50,7 +50,6 @@ export const ActionList: React.FC<ActionListProps> = ({
onHighlighted={onHighlighted} onHighlighted={onHighlighted}
isError={action => !!action.error?.message} isError={action => !!action.error?.message}
render={action => renderAction(action, sdkLanguage, revealConsole)} render={action => renderAction(action, sdkLanguage, revealConsole)}
noItemsMessage='No actions'
/>; />;
}; };
@ -62,16 +61,21 @@ const renderAction = (
const { errors, warnings } = modelUtil.stats(action); const { errors, warnings } = modelUtil.stats(action);
const locator = action.params.selector ? asLocator(sdkLanguage || 'javascript', action.params.selector) : undefined; const locator = action.params.selector ? asLocator(sdkLanguage || 'javascript', action.params.selector) : undefined;
let time: string = '';
if (action.endTime)
time = msToString(action.endTime - action.startTime);
else if (action.error)
time = 'Timed out';
return <> return <>
<div className='action-title'> <div className='action-title'>
<span>{action.apiName}</span> <span>{action.apiName}</span>
{locator && <div className='action-selector' title={locator}>{locator}</div>} {locator && <div className='action-selector' title={locator}>{locator}</div>}
{action.method === 'goto' && action.params.url && <div className='action-url' title={action.params.url}>{action.params.url}</div>} {action.method === 'goto' && action.params.url && <div className='action-url' title={action.params.url}>{action.params.url}</div>}
</div> </div>
<div className='action-duration' style={{ flex: 'none' }}>{action.endTime ? msToString(action.endTime - action.startTime) : 'Timed Out'}</div> <div className='action-duration' style={{ flex: 'none' }}>{time || <span className='codicon codicon-loading'></span>}</div>
<div className='action-icons' onClick={() => revealConsole()}> <div className='action-icons' onClick={() => revealConsole()}>
{!!errors && <div className='action-icon'><span className={'codicon codicon-error'}></span><span className="action-icon-value">{errors}</span></div>} {!!errors && <div className='action-icon'><span className='codicon codicon-error'></span><span className="action-icon-value">{errors}</span></div>}
{!!warnings && <div className='action-icon'><span className={'codicon codicon-warning'}></span><span className="action-icon-value">{warnings}</span></div>} {!!warnings && <div className='action-icon'><span className='codicon codicon-warning'></span><span className="action-icon-value">{warnings}</span></div>}
</div> </div>
</>; </>;
}; };

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

@ -35,10 +35,12 @@ export const SourceTab: React.FunctionComponent<{
const [lastAction, setLastAction] = React.useState<ActionTraceEvent | undefined>(); const [lastAction, setLastAction] = React.useState<ActionTraceEvent | undefined>();
const [selectedFrame, setSelectedFrame] = React.useState<number>(0); const [selectedFrame, setSelectedFrame] = React.useState<number>(0);
if (lastAction !== action) { React.useEffect(() => {
setLastAction(action); if (lastAction !== action) {
setSelectedFrame(0); setLastAction(action);
} setSelectedFrame(0);
}
}, [action, lastAction, setLastAction, setSelectedFrame]);
const stackInfo = React.useMemo<StackInfo>(() => { const stackInfo = React.useMemo<StackInfo>(() => {
if (!action) if (!action)