firefox-devtools / firefox-devtools/profiler

Use colors to convey the meaning of values in the calltree

Open
#968 2 comments 1 reaction 0 assignees View on GitHub
call tree
Dominant language
TypeScript
Stars
1.5k
Forks
491
Avg merge
3d 5h
Merged PRs (30d)
30

Description

In the [hotspot tool](https://github.com/KDAB/hotspot], the values are also displayed using a colored background. The colored background itself had a width that depends on the value. This is nice because this stays accessible: the absolute value are still displayed, and the color isn't the only thing that conveys the meaning, as the width changes too.

![call tree in the hotspot tool](https://user-images.githubusercontent.com/454175/39276007-bf1527d0-48e7-11e8-8851-6b53ef2d5cd1.png)

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

Contributor guide

Open the contributing guide

Research direction

Start with the profiler's call tree view and compare its current value presentation with the linked Hotspot example. Done means the absolute values remain visible while color and background width also convey their relative meaning in an accessible way.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
data-visualization, frontend
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.