From 6698f3277a947e86e023a37e215b4197db221678 Mon Sep 17 00:00:00 2001
From: Dmitry Gozman <dgozman@gmail.com>
Date: Tue, 7 Dec 2021 11:58:20 -0800
Subject: [PATCH] fix(traceViewer): calculate the number of filmstrip frames
 correctly (#10757)

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.
---
 .../playwright-core/src/web/traceViewer/ui/filmStrip.tsx  | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/playwright-core/src/web/traceViewer/ui/filmStrip.tsx b/packages/playwright-core/src/web/traceViewer/ui/filmStrip.tsx
index 9fcf5ce68e..4e4060b380 100644
--- a/packages/playwright-core/src/web/traceViewer/ui/filmStrip.tsx
+++ b/packages/playwright-core/src/web/traceViewer/ui/filmStrip.tsx
@@ -87,12 +87,12 @@ const FilmStripLane: React.FunctionComponent<{
   const gapLeft = (startTime - boundaries.minimum) / boundariesDuration * width;
   const gapRight = (boundaries.maximum - endTime) / 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 frames: JSX.Element[] = [];
-  let i = 0;
-  for (let time = startTime; startTime && frameDuration && time <= endTime; time += frameDuration, ++i) {
+  for (let i = 0; startTime && frameDuration && i < frameCount; ++i) {
+    const time = startTime + frameDuration * i;
     const index = upperBound(screencastFrames, time, timeComparator) - 1;
     frames.push(<div className='film-strip-frame' key={i} style={{
       width: frameSize.width,
@@ -104,7 +104,7 @@ const FilmStripLane: React.FunctionComponent<{
     }} />);
   }
   // 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,
     height: frameSize.height,
     backgroundImage: `url(sha1/${screencastFrames[screencastFrames.length - 1].sha1})`,