Filip/playwright
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

fix(traceViewer): calculate the number of filmstrip frames correctly (#10757)

Browse source 
We now fit evenly-spaced frames into available width (as intended before),
and then add one more last frame that could be cropped at the right.
This commit is contained in:
Dmitry Gozman 2021-12-07 11:58:20 -08:00 committed by GitHub
parent 00bc2ab531
commit 6698f3277a
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 4 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
packages/playwright-core/src/web/traceViewer/ui/filmStrip.tsx
View file

@ -87,12 +87,12 @@ const FilmStripLane: React.FunctionComponent<{
const gapLeft = (startTime - boundaries.minimum) / boundariesDuration * width; const gapLeft = (startTime - boundaries.minimum) / boundariesDuration * width;
const gapRight = (boundaries.maximum - endTime) / boundariesDuration * width; const gapRight = (boundaries.maximum - endTime) / boundariesDuration * width;
const effectiveWidth = (endTime - startTime) / boundariesDuration * width; const effectiveWidth = (endTime - startTime) / boundariesDuration * width;
const frameCount = effectiveWidth / (frameSize.width + 2 * frameMargin) | 0 + 1; const frameCount = (effectiveWidth / (frameSize.width + 2 * frameMargin)) | 0;
const frameDuration = (endTime - startTime) / frameCount; const frameDuration = (endTime - startTime) / frameCount;
const frames: JSX.Element[] = []; const frames: JSX.Element[] = [];
let i = 0; for (let i = 0; startTime && frameDuration && i < frameCount; ++i) {
for (let time = startTime; startTime && frameDuration && time <= endTime; time += frameDuration, ++i) { const time = startTime + frameDuration * i;
const index = upperBound(screencastFrames, time, timeComparator) - 1; const index = upperBound(screencastFrames, time, timeComparator) - 1;
frames.push(<div className='film-strip-frame' key={i} style={{ frames.push(<div className='film-strip-frame' key={i} style={{
width: frameSize.width, width: frameSize.width,
@ -104,7 +104,7 @@ const FilmStripLane: React.FunctionComponent<{
}} />); }} />);
} }
// Always append last frame to show endgame. // Always append last frame to show endgame.
frames.push(<div className='film-strip-frame' key={i} style={{ frames.push(<div className='film-strip-frame' key={frames.length} style={{
width: frameSize.width, width: frameSize.width,
height: frameSize.height, height: frameSize.height,
backgroundImage: `url(sha1/${screencastFrames[screencastFrames.length - 1].sha1})`, backgroundImage: `url(sha1/${screencastFrames[screencastFrames.length - 1].sha1})`,