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(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 {
display: flex;
flex: none;
align-items: center;
margin: 0 4px;
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}
isError={action => !!action.error?.message}
render={action => renderAction(action, sdkLanguage, revealConsole)}
noItemsMessage='No actions'
/>;
};
@ -62,16 +61,21 @@ const renderAction = (
const { errors, warnings } = modelUtil.stats(action);
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 <>
<div className='action-title'>
<span>{action.apiName}</span>
{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>}
</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()}>
{!!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>}
{!!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>}
</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 [selectedFrame, setSelectedFrame] = React.useState<number>(0);
if (lastAction !== action) {
setLastAction(action);
setSelectedFrame(0);
}
React.useEffect(() => {
if (lastAction !== action) {
setLastAction(action);
setSelectedFrame(0);
}
}, [action, lastAction, setLastAction, setSelectedFrame]);
const stackInfo = React.useMemo<StackInfo>(() => {
if (!action)