firefox-devtools / firefox-devtools/profiler

Add an FPS graph to the Timeline

Open
#16 6 comments 4 reactions 0 assignees View on GitHub
timeline unified profiler
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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.