firefox-devtools / firefox-devtools/profiler
Make the stack chart display traces sequentially instead of by actual time.
- Dominant language
- TypeScript
- Stars
- 1.5k
- Forks
- 491
- Avg merge
- 3d 5h
- Merged PRs (30d)
- 30
Description
When using the JavaScript Tracer, the profiler will show the stack based on actual time.
So that if the recorded function calls run in a short period of time and nothing else run in between, you will end up with a profile [like this one](https://share.firefox.dev/3T8deMt):

Notice the following `focus` event handler:

It can't even be hovered in order to double click and focus on it. The stack chart is mostly empty.
It would be neat to have an option to make the stack chart display the frames next to each others, without any white space between them. Thus, no longer be based on time.
We may also make each frame be of the same width by ignoring their execution duration. This would help highlight that `focus` event handler versus the rest of the executions.
┆Issue is synchronized with this [Jira Task](https://mozilla-hub.atlassian.net/browse/FP-785)
Contributor guide
Research direction
Start with the JavaScript Tracer stack chart and the linked Firefox profile to understand how the current time-based display produces empty space and an unhoverable focus event. Review the chart implementation and determine how an option for sequential frames, including optional equal-width frames, should behave. Done means the focus handler is easy to hover and inspect without time-based gaps.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, typescript
- Domain
- frontend, performance
- Issue type
- Feature
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100