firefox-devtools / firefox-devtools/profiler
Graph JIT tier of JS functions over time
- Dominant language
- TypeScript
- Stars
- 1.5k
- Forks
- 491
- Avg merge
- 3d 5h
- Merged PRs (30d)
- 30
Description
This work is not currently planned, but captured here so we have a record of it:
See [Bug 1150299](https://bugzilla.mozilla.org/show_bug.cgi?id=1150299) for more details. Some of it is copied here.

- - -
Shu wrote:
> Talked with several people. This is a picture of the current idea
> for the UI.
>
> For the initial UI, we should focus on displaying leaf
> functions (that is, "self time" or "exclusive frames"
> only). Focusing on frames with call trees underneath them should
> come after we get the current view to work well.
>
> The x axis is time. The y axis is conceptually "hotness" that
> moves with time. We want to visualize the evolution of hotness of
> a particular function over time. The idea is to divide the x axis
> according to N buckets. Let |b| be a bucket. Each bucket has a
> |startTime(b)| and |endTime(b)|. Suppose we have two helper functions:
>
> timeOfSamples(leafFun, startTime, endTime)
>
> Returns time taken by leaf samples of leafFun between startTime
> and endTime.
>
> timeOfAllSamples(startTime, endTime)
>
> Returns time taken by all samples between startTime and endTime.
>
> The y value (height of each bucket) for a bucket |b| is then
>
> timeOfSamples(f, startTime(b), endTime(b))
> ------------------------------------------
> timeOfAllSamples(startTime(b), endTime(b))
>
> To express the implementation tier, each bucket itself would be a
> bar chart of 3 colors, a distinct color for each tier of
> Interpreter, Baseline, and Ion. In the picture, Interpreter is
> red, Baseline is blue, Ion is green. This is either a gradient or
> a blurred average or whatever.
>
> This graph is naturally discontinuous.
>
> A quirk is that this graph is not a static picture that can be
> zoomed in/out. Changing the width of the graph changes the
> buckets, and thus the y values. So, "zooming" in and out of this
> graph is really like pulling or squeezing an accordion. If it's
> pulled out enough, each bucket on the x axis would be exactly 1
> sample, and the max(y) would be 1. This is shown in the picture
> with the "zoomed in" view.
>
> Some visceral information I hope this UI gets across:
>
> - Phases in a program as seen by color changes over time: graph
> is tall enough and large chunks of red, then blue, then green,
> then blue, then green, etc.
>
> - Can't even get into Baseline: graph is tall enough and mostly
> red.
>
> - Failing to stay in Ion: graph is tall enough and mostly blue.
>
> - Oscillating and keep jumping in/out of Ion: graph is tall
> enough and is all technicolor.
┆Issue is synchronized with this [Jira Task](https://mozilla-hub.atlassian.net/browse/FP-698)
Contributor guide
Research direction
Start by reading Bug 1150299 and the linked Jira task, then inspect the existing profiler UI and graphing entry points; this issue names no files or tests. Done would require an agreed time-bucketed graph for leaf functions with Interpreter, Baseline, and Ion tiers, including the described width-dependent zoom behavior.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, 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
- 18/100