mirror of
https://github.com/microsoft/playwright.git
synced 2024-10-27 13:50:25 +03:00
chore: render locator in trace viewer timeline label (#23754)
This commit is contained in:
parent
fc8f0101c8
commit
4d02aa1e52
@ -22,6 +22,8 @@ import type { Boundaries } from '../geometry';
|
|||||||
import { FilmStrip } from './filmStrip';
|
import { FilmStrip } from './filmStrip';
|
||||||
import type { ActionTraceEventInContext, MultiTraceModel } from './modelUtil';
|
import type { ActionTraceEventInContext, MultiTraceModel } from './modelUtil';
|
||||||
import './timeline.css';
|
import './timeline.css';
|
||||||
|
import { asLocator } from '@isomorphic/locatorGenerators';
|
||||||
|
import type { Language } from '@isomorphic/locatorGenerators';
|
||||||
|
|
||||||
type TimelineBar = {
|
type TimelineBar = {
|
||||||
action?: ActionTraceEventInContext;
|
action?: ActionTraceEventInContext;
|
||||||
@ -41,7 +43,8 @@ export const Timeline: React.FunctionComponent<{
|
|||||||
selectedAction: ActionTraceEventInContext | undefined,
|
selectedAction: ActionTraceEventInContext | undefined,
|
||||||
onSelected: (action: ActionTraceEventInContext) => void,
|
onSelected: (action: ActionTraceEventInContext) => void,
|
||||||
hideTimelineBars?: boolean,
|
hideTimelineBars?: boolean,
|
||||||
}> = ({ model, selectedAction, onSelected, hideTimelineBars }) => {
|
sdkLanguage: Language,
|
||||||
|
}> = ({ model, selectedAction, onSelected, hideTimelineBars, sdkLanguage }) => {
|
||||||
const [measure, ref] = useMeasure<HTMLDivElement>();
|
const [measure, ref] = useMeasure<HTMLDivElement>();
|
||||||
const barsRef = React.useRef<HTMLDivElement | null>(null);
|
const barsRef = React.useRef<HTMLDivElement | null>(null);
|
||||||
|
|
||||||
@ -62,7 +65,8 @@ export const Timeline: React.FunctionComponent<{
|
|||||||
const bars = React.useMemo(() => {
|
const bars = React.useMemo(() => {
|
||||||
const bars: TimelineBar[] = [];
|
const bars: TimelineBar[] = [];
|
||||||
for (const entry of model?.actions || []) {
|
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')
|
if (entry.method === 'goto')
|
||||||
detail = trimRight(entry.params.url || '', 50);
|
detail = trimRight(entry.params.url || '', 50);
|
||||||
bars.push({
|
bars.push({
|
||||||
@ -93,7 +97,7 @@ export const Timeline: React.FunctionComponent<{
|
|||||||
});
|
});
|
||||||
}
|
}
|
||||||
return bars;
|
return bars;
|
||||||
}, [model, boundaries, measure.width]);
|
}, [model, boundaries, measure.width, sdkLanguage]);
|
||||||
|
|
||||||
const hoveredBar = hoveredBarIndex !== undefined ? bars[hoveredBarIndex] : undefined;
|
const hoveredBar = hoveredBarIndex !== undefined ? bars[hoveredBarIndex] : undefined;
|
||||||
let targetBar: TimelineBar | undefined = bars.find(bar => bar.action === selectedAction);
|
let targetBar: TimelineBar | undefined = bars.find(bar => bar.action === selectedAction);
|
||||||
|
@ -126,6 +126,7 @@ export const Workbench: React.FunctionComponent<{
|
|||||||
selectedAction={activeAction}
|
selectedAction={activeAction}
|
||||||
onSelected={onActionSelected}
|
onSelected={onActionSelected}
|
||||||
hideTimelineBars={hideTimelineBars}
|
hideTimelineBars={hideTimelineBars}
|
||||||
|
sdkLanguage={sdkLanguage}
|
||||||
/>
|
/>
|
||||||
<SplitView sidebarSize={250} orientation={drawer === 'bottom' ? 'vertical' : 'horizontal'}>
|
<SplitView sidebarSize={250} orientation={drawer === 'bottom' ? 'vertical' : 'horizontal'}>
|
||||||
<SplitView sidebarSize={250} orientation='horizontal' sidebarIsFirst={true}>
|
<SplitView sidebarSize={250} orientation='horizontal' sidebarIsFirst={true}>
|
||||||
|
Loading…
Reference in New Issue
Block a user