firefox-devtools / firefox-devtools/profiler
Add an FPS graph to the Timeline
- Dominant language
- TypeScript
- Stars
- 1.5k
- Forks
- 491
- Avg merge
- 3d 5h
- Merged PRs (30d)
- 30
Description
The marker timeline and the jank markers already let you see when we painted and how long that took, and whether the thread was available for painting at all or busy doing something else (janking). But a line graph of the FPS might be a more useful visualization in some cases, especially if you're looking at a long running profile and are not zoomed in enough to care about individual paints.
We could have a line graph that displays both theoretical max FPS (based on the "responsiveness" information from the profile samples) and actual FPS, overlaid on top of each other. Maybe we should put both the content process and the parent process into the same graph. The parent process usually manages a higher theoretical FPS than the content process, so if we pick the right drawing order and the right colors (+ fill or no fill), it might not look too overwhelming.
┆Issue is synchronized with this [Jira Task](https://mozilla-hub.atlassian.net/browse/FP-100)
Contributor guide
Research direction
Start by examining the existing marker timeline and jank-marker visualization, then trace how responsiveness information is exposed in profile samples. Define the FPS graph’s theoretical and actual series, process coverage, colors, and drawing order; done means the visualization is readable on long profiles and overlays the intended FPS data.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- data-visualization, frontend, performance
- Issue type
- Feature
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 25/100