firefox-devtools/profiler

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

Open

#2,949 opened on Oct 14, 2020

View on GitHubContributor guide
 (15 comments) (0 reactions) (0 assignees)TypeScript (486 forks)auto 404
help wantedmarkerstimeline

Repository metrics

Stars
 (1,515 stars)
PR merge metrics
 (PR metrics pending)

Description

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:

┆Issue is synchronized with this Jira Task

Contributor guide

Research direction
Examine the current screenshot rendering logic in TrackScreenshots.js, specifically the nested loops and break statement. Consider two approaches: inverting the loops to iterate over screenshots first or modifying the break to reuse the last screenshot only when appropriate. Use the provided profile links to test changes.
Tech stack
typescriptreact
Domain
frontenddeveloper experience
Issue type
Feature
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
3
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
Half day
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
Active
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
Clear
Prerequisites
GitReact
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
65