microsoft/playwright
1
1
Fork 0
mirror of https://github.com/microsoft/playwright.git synced 2024-12-13 17:14:02 +03:00
Code Issues Projects Releases Wiki Activity

fix(trace-viewer): center snapshot iframe (#20512)

Browse Source
This commit is contained in:
Dmitry Gozman 2023-01-30 14:32:45 -08:00 committed by GitHub
parent c27ad35299
commit 99353038f0
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 11 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
packages/trace-viewer/src/ui/snapshotTab.tsx
View File

@ -79,11 +79,14 @@ export const SnapshotTab: React.FunctionComponent<{
}, [iframeRef, snapshotUrl, snapshotInfoUrl, pointX, pointY]);
const windowHeaderHeight = 40;
const snapshotSize = snapshotInfo.viewport;
const scale = Math.min(measure.width / snapshotSize.width, measure.height / (snapshotSize.height + windowHeaderHeight), 1);
const scaledSize = {
width: snapshotSize.width * scale,
height: (snapshotSize.height + windowHeaderHeight) * scale,
const snapshotContainerSize = {
width: snapshotInfo.viewport.width,
height: snapshotInfo.viewport.height + windowHeaderHeight,
};
const scale = Math.min(measure.width / snapshotContainerSize.width, measure.height / snapshotContainerSize.height, 1);
const translate = {
x: (measure.width - snapshotContainerSize.width) / 2,
y: (measure.height - snapshotContainerSize.height) / 2,
};
return <div
className='snapshot-tab'
@ -105,9 +108,9 @@ export const SnapshotTab: React.FunctionComponent<{
</div>
<div ref={ref} className='snapshot-wrapper'>
{ snapshots.length ? <div className='snapshot-container' style={{
width: snapshotSize.width + 'px',
height: (snapshotSize.height + windowHeaderHeight) + 'px',
transform: `translate(${-snapshotSize.width * (1 - scale) / 2 + (measure.width - scaledSize.width) / 2}px, ${-snapshotSize.height * (1 - scale) / 2 + (measure.height - scaledSize.height) / 2}px) scale(${scale})`,
width: snapshotContainerSize.width + 'px',
height: snapshotContainerSize.height + 'px',
transform: `translate(${translate.x}px, ${translate.y}px) scale(${scale})`,
}}>
<div className='window-header'>
<div style={{ whiteSpace: 'nowrap' }}>