microsoft/playwright
1
1
Fork 0
mirror of https://github.com/microsoft/playwright.git synced 2024-10-27 13:50:25 +03:00
Code Issues Projects Releases Wiki Activity

chore: render locator in trace viewer timeline label (#23754)

Browse Source
This commit is contained in:
Max Schmitt 2023-06-16 17:56:11 +02:00 committed by GitHub
parent fc8f0101c8
commit 4d02aa1e52
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 8 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
packages/trace-viewer/src/ui/timeline.tsx
View File

@ -22,6 +22,8 @@ import type { Boundaries } from '../geometry';
import { FilmStrip } from './filmStrip';
import type { ActionTraceEventInContext, MultiTraceModel } from './modelUtil';
import './timeline.css';
import { asLocator } from '@isomorphic/locatorGenerators';
import type { Language } from '@isomorphic/locatorGenerators';
type TimelineBar = {
action?: ActionTraceEventInContext;
@ -41,7 +43,8 @@ export const Timeline: React.FunctionComponent<{
selectedAction: ActionTraceEventInContext | undefined,
onSelected: (action: ActionTraceEventInContext) => void,
hideTimelineBars?: boolean,
}> = ({ model, selectedAction, onSelected, hideTimelineBars }) => {
sdkLanguage: Language,
}> = ({ model, selectedAction, onSelected, hideTimelineBars, sdkLanguage }) => {
const [measure, ref] = useMeasure<HTMLDivElement>();
const barsRef = React.useRef<HTMLDivElement | null>(null);
@ -62,7 +65,8 @@ export const Timeline: React.FunctionComponent<{
const bars = React.useMemo(() => {
const bars: TimelineBar[] = [];
for (const entry of model?.actions || []) {
let detail = trimRight(entry.params.selector || '', 50);
const locator = asLocator(sdkLanguage || 'javascript', entry.params.selector, false /* isFrameLocator */, true /* playSafe */);
let detail = trimRight(locator || '', 50);
if (entry.method === 'goto')
detail = trimRight(entry.params.url || '', 50);
bars.push({
@ -93,7 +97,7 @@ export const Timeline: React.FunctionComponent<{
});
}
return bars;
}, [model, boundaries, measure.width]);
}, [model, boundaries, measure.width, sdkLanguage]);
const hoveredBar = hoveredBarIndex !== undefined ? bars[hoveredBarIndex] : undefined;
let targetBar: TimelineBar | undefined = bars.find(bar => bar.action === selectedAction);

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

@ -126,6 +126,7 @@ export const Workbench: React.FunctionComponent<{
selectedAction={activeAction}
onSelected={onActionSelected}
hideTimelineBars={hideTimelineBars}
sdkLanguage={sdkLanguage}
/>
<SplitView sidebarSize={250} orientation={drawer === 'bottom' ? 'vertical' : 'horizontal'}>
<SplitView sidebarSize={250} orientation='horizontal' sidebarIsFirst={true}>