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: show preview for page under cursor (#6548)

Browse Source
This commit is contained in:
Pavel Feldman 2021-05-12 20:54:17 -07:00 committed by GitHub
parent cc43b0d23f
commit a7ea00d02e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 25 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
src/web/traceViewer/ui/filmStrip.tsx
View File

@ -21,18 +21,26 @@ import { useMeasure } from './helpers';
import { upperBound } from '../../uiUtils';
import { ContextEntry, PageEntry } from '../../../server/trace/viewer/traceModel';
const tileSize = { width: 200, height: 45 };
export const FilmStrip: React.FunctionComponent<{
context: ContextEntry,
boundaries: Boundaries,
previewX?: number,
}> = ({ context, boundaries, previewX }) => {
previewPoint?: { x: number, clientY: number },
}> = ({ context, boundaries, previewPoint }) => {
const [measure, ref] = useMeasure<HTMLDivElement>();
const screencastFrames = context.pages[0]?.screencastFrames;
let pageIndex = 0;
if (ref.current && previewPoint) {
const bounds = ref.current.getBoundingClientRect();
pageIndex = ((previewPoint.clientY - bounds.top) / tileSize.height) | 0;
}
const screencastFrames = context.pages[pageIndex]?.screencastFrames;
// TODO: pick file from the Y position.
let previewImage = undefined;
if (previewX !== undefined && context.pages.length) {
const previewTime = boundaries.minimum + (boundaries.maximum - boundaries.minimum) * previewX / measure.width;
if (previewPoint !== undefined && screencastFrames) {
const previewTime = boundaries.minimum + (boundaries.maximum - boundaries.minimum) * previewPoint.x / measure.width;
previewImage = screencastFrames[upperBound(screencastFrames, previewTime, timeComparator) - 1];
}
const previewSize = inscribe(context.created.viewportSize!, { width: 600, height: 600 });
@ -45,12 +53,12 @@ export const FilmStrip: React.FunctionComponent<{
key={index}
/>)
}
{previewImage && previewX !== undefined &&
{previewImage && previewPoint?.x !== undefined &&
<div className='film-strip-hover' style={{
width: previewSize.width,
height: previewSize.height,
top: measure.bottom + 5,
left: Math.min(previewX, measure.width - previewSize.width - 10),
left: Math.min(previewPoint!.x, measure.width - previewSize.width - 10),
}}>
<img src={`/sha1/${previewImage.sha1}`} width={previewSize.width} height={previewSize.height} />
</div>
@ -69,7 +77,7 @@ const FilmStripLane: React.FunctionComponent<{
viewportSize.width = Math.max(viewportSize.width, frame.width);
viewportSize.height = Math.max(viewportSize.height, frame.height);
}
const frameSize = inscribe(viewportSize!, { width: 200, height: 45 });
const frameSize = inscribe(viewportSize!, tileSize);
const frameMargin = 2.5;
const startTime = screencastFrames[0].timestamp;
const endTime = screencastFrames[screencastFrames.length - 1].timestamp;

17
src/web/traceViewer/ui/timeline.tsx
View File

@ -44,7 +44,7 @@ export const Timeline: React.FunctionComponent<{
onHighlighted: (action: ActionEntry | undefined) => void,
}> = ({ context, boundaries, selectedAction, highlightedAction, onSelected, onHighlighted }) => {
const [measure, ref] = useMeasure<HTMLDivElement>();
const [previewX, setPreviewX] = React.useState<number | undefined>();
const [previewPoint, setPreviewPoint] = React.useState<{ x: number, clientY: number } | undefined>();
const [hoveredBarIndex, setHoveredBarIndex] = React.useState<number | undefined>();
const offsets = React.useMemo(() => {
@ -144,22 +144,23 @@ export const Timeline: React.FunctionComponent<{
const onMouseMove = (event: React.MouseEvent) => {
if (!ref.current)
return;
const x = event.clientX - ref.current.getBoundingClientRect().left;
const bounds = ref.current.getBoundingClientRect();
const x = event.clientX - bounds.left;
const index = findHoveredBarIndex(x);
setPreviewX(x);
setPreviewPoint({ x, clientY: event.clientY });
setHoveredBarIndex(index);
if (typeof index === 'number')
onHighlighted(bars[index].entry);
};
const onMouseLeave = () => {
setPreviewX(undefined);
setPreviewPoint(undefined);
setHoveredBarIndex(undefined);
onHighlighted(undefined);
};
const onClick = (event: React.MouseEvent) => {
setPreviewX(undefined);
setPreviewPoint(undefined);
if (!ref.current)
return;
const x = event.clientX - ref.current.getBoundingClientRect().left;
@ -203,10 +204,10 @@ export const Timeline: React.FunctionComponent<{
></div>;
})
}</div>
<FilmStrip context={context} boundaries={boundaries} previewX={previewX} />
<FilmStrip context={context} boundaries={boundaries} previewPoint={previewPoint} />
<div className='timeline-marker timeline-marker-hover' style={{
display: (previewX !== undefined) ? 'block' : 'none',
left: (previewX || 0) + 'px',
display: (previewPoint !== undefined) ? 'block' : 'none',
left: (previewPoint?.x || 0) + 'px',
}}></div>
</div>;
};