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

feat(trace): account for more action types in timeline (#5077)

Browse Source
This commit is contained in:
Dmitry Gozman 2021-01-20 16:19:01 -08:00 committed by GitHub
parent 45c33ae02f
commit 16249ccbda
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 20 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
src/cli/traceViewer/web/ui/timeline.css
View File

@ -82,16 +82,28 @@
box-shadow: 0 0 0 1px var(--action-color); box-shadow: 0 0 0 1px var(--action-color);
} }
.timeline-bar.click { .timeline-bar.click,
.timeline-bar.dblclick,
.timeline-bar.hover,
.timeline-bar.check,
.timeline-bar.uncheck,
.timeline-bar.tap {
--action-color: var(--green); --action-color: var(--green);
} }
.timeline-bar.fill, .timeline-bar.fill,
.timeline-bar.press { .timeline-bar.press,
.timeline-bar.type,
.timeline-bar.selectOption,
.timeline-bar.setInputFiles {
--action-color: var(--orange); --action-color: var(--orange);
} }
.timeline-bar.goto { .timeline-bar.goto,
.timeline-bar.setContent,
.timeline-bar.goBack,
.timeline-bar.goForward,
.timeline-bar.reload {
--action-color: var(--blue); --action-color: var(--blue);
} }

5
src/cli/traceViewer/web/ui/timeline.tsx
View File

@ -55,13 +55,16 @@ export const Timeline: React.FunctionComponent<{
const bars: TimelineBar[] = []; const bars: TimelineBar[] = [];
for (const page of context.pages) { for (const page of context.pages) {
for (const entry of page.actions) { for (const entry of page.actions) {
let detail = entry.action.selector || '';
if (entry.action.action === 'goto')
detail = entry.action.value || '';
bars.push({ bars.push({
entry, entry,
leftTime: entry.action.startTime, leftTime: entry.action.startTime,
rightTime: entry.action.endTime, rightTime: entry.action.endTime,
leftPosition: timeToPosition(measure.width, boundaries, entry.action.startTime), leftPosition: timeToPosition(measure.width, boundaries, entry.action.startTime),
rightPosition: timeToPosition(measure.width, boundaries, entry.action.endTime), rightPosition: timeToPosition(measure.width, boundaries, entry.action.endTime),
label: entry.action.action + ' ' + (entry.action.selector || entry.action.value || ''), label: entry.action.action + ' ' + detail,
type: entry.action.action, type: entry.action.action,
priority: 0, priority: 0,
}); });

2
src/cli/traceViewer/web/ui/workbench.tsx
View File

@ -36,7 +36,7 @@ export const Workbench: React.FunctionComponent<{
return actions; return actions;
}, [context]); }, [context]);
const snapshotSize = context.created.viewportSize!; const snapshotSize = context.created.viewportSize || { width: 1280, height: 720 };
return <div className='vbox workbench'> return <div className='vbox workbench'>
<div className='hbox header'> <div className='hbox header'>