profiler: Screenshot: stop repeating the same screenshot over and over when it doesn't change

In this patch we want to do an experiment, it’s not sure we’ll land this in the end. This experiment is that we don’t want that we repeat the screenshot in the screenshot track, if it doesn’t change.

The current logic is at https://github.com/firefox-devtools/profiler/blob/0ecc660cb4fc6877dff6cb8db08d08451453ff36/src/components/timeline/TrackScreenshots.js#L273-L333

What it does is that for each pixel we try to find the right screenshot. Especially here: https://github.com/firefox-devtools/profiler/blob/0ecc660cb4fc6877dff6cb8db08d08451453ff36/src/components/timeline/TrackScreenshots.js#L301-L307 We see that if don’t find a screenshot, by breaking we reuse the previous data.

We also see that there are 2 nested loops: the outer loop loops over the pixel “left” information, and the inner loops over the screenshots.

Instead I think we’ll want to invert the logic: the outer loop looping over the screenshots, and some logic inside to compute the “left” information. Especially take care that we don’t overlap images, so when looping over the screenshots you’ll need to skip them until we have some space. When finally we have some space we’ll need to display the last screenshot.

Maybe that’s not the easiest solution, and instead we should just change something at the break in the existing code. So this will need some research.

Here are some profile links containing screenshots:

• https://profiler.firefox.com/public/404ff08ee5f412f355264601f12e5feff0ebaee6/marker-chart/?globalTrackOrder=6-1-2-3-4-0-5&thread=6&v=3
• https://profiler.firefox.com/public/d4e0b257c771dd7d4a7a6bd6c8c8cbb2d5dad40c/calltree/?globalTrackOrder=10-11-12-13-0-1-2-3-4-5-6-7-8-9&hiddenGlobalTracks=1-2-3-4-5-6-7-9&thread=9&v=3
• https://profiler.firefox.com/public/36d6d200bb8ec4eff5a90044dc066063703edf6a/calltree/?globalTrackOrder=4-5-0-1-2-3&hiddenGlobalTracks=1-2-3&thread=0&v=3

┆Issue is synchronized with this Jira Task