firefox-devtools / firefox-devtools/profiler

Callstack: Add color-coded icons and better formatting

Open
#519 4 comments 0 reactions 1 assignee Claimed by @digitarald View on GitHub
call tree polish
Dominant language
TypeScript
Stars
1.5k
Forks
491
Avg merge
3d 5h
Merged PRs (30d)
30

Description

It would be helpful if the callstack had icons and colors to differentiate between the different types of nodes.

* Color-code events in callstack to match markers e.g. use a green square to indicate paint events
* Need a way to differentiate between website code vs Mozilla code vs OS code
* User actions like "click" should be called out with its own icon
* Function names should be bold or otherwise stronger-looking than its params/superclasses
* Subtle color to ::, <>, () characters

Will make an initial mockup to demo my ideas. Let me know if you have thoughts on what needs to be color-coded.

┆Issue is synchronized with this [Jira Task](https://mozilla-hub.atlassian.net/browse/FP-663)

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.