firefox-devtools / firefox-devtools/profiler

Make the stack chart display traces sequentially instead of by actual time.

Open
#5,097 0 comments 0 reactions 0 assignees View on GitHub
JS Execution Tracing
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):
![image](https://github.com/user-attachments/assets/7b1f0317-7066-4454-8dfe-604ea82a28a4)
Notice the following `focus` event handler:
![image](https://github.com/user-attachments/assets/796af632-b7d0-4717-be94-910be66e7940)
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

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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.