Callstack: Add color-coded icons and better formatting

firefox-devtools / profiler

Firefox Profiler — Web app for Firefox performance analysis

https://profiler.firefox.com

Mozilla Public License 2.0

1.16k stars 379 forks source link

Callstack: Add color-coded icons and better formatting #519

Open violasong opened 7 years ago

violasong commented 7 years ago

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

violasong commented 7 years ago

digitarald commented 7 years ago

next step: @violasong to document the colors for implementation.

violasong commented 7 years ago

For reference, Markus' and Chrome colors:

Here's my suggestions for the colors (from the photon design system which has an NPM module for the color variables)

Color codes if you don't use the module: Blue 40 #45a1ff Orange 50 #ff9400 Purple 50 #9400ff Magenta 50 #ff1ad9 Green 50 #30e60b Yellow 50 #ffe900 Grey 30 #d7d7db

Here's one idea for conserving horizontal space - colored rects, though it would keep favicons square

Edit: Also, the colors I'm using for the text are #9B9B9B (gray) and #1A61C1 (navy). The double-colons are bolded.

digitarald commented 6 years ago

If we want to make this available, next step is breaking down the tasks here; making it work in the tree structure