Skip to content

Drive counter tooltips from a tooltipRows schema#6023

Merged
fatadel merged 4 commits into
firefox-devtools:mainfrom
fatadel:issue-5961
Jun 3, 2026
Merged

Drive counter tooltips from a tooltipRows schema#6023
fatadel merged 4 commits into
firefox-devtools:mainfrom
fatadel:issue-5961

Conversation

@fatadel

@fatadel fatadel commented May 13, 2026

Copy link
Copy Markdown
Contributor

Replace the four hardcoded category branches in TrackCounterGraph's tooltip rendering (Memory / Power / Bandwidth / processCPU) with a declarative tooltipRows array on CounterDisplayConfig. Each row picks a data source (count, rate, accumulated, selection-total, …), a value format (unit, optional CO₂e, optional auto-scale ladder), and a label.

The new TrackCounterTooltip component iterates the rows, resolves each source, formats the value, and renders through TooltipDetails. Memory and CPU tooltips now use the same TooltipDetails layout as Power and Bandwidth.

Profile labels are raw English so the format stays self-describing. The frontend translates labels it recognizes from a private allow-list and renders unknown ones verbatim. The dedicated TooltipTrackPower component is removed; the power/energy unit ladders move into the formatter.

Bumps the processed profile format to v63. The v63 upgrader derives tooltipRows from each counter's category and name.

Closes #5961.


Profile

@fatadel fatadel requested review from canova and mstange May 13, 2026 17:34
@fatadel fatadel requested a review from a team as a code owner May 13, 2026 17:34
@codecov

codecov Bot commented May 13, 2026

Copy link
Copy Markdown

Codecov Report

❌ Patch coverage is 84.18079% with 28 lines in your changes missing coverage. Please review.
✅ Project coverage is 83.82%. Comparing base (a99497b) to head (d4776bf).
⚠️ Report is 2 commits behind head on main.

Files with missing lines Patch % Lines
src/components/timeline/TrackCounterTooltip.tsx 85.15% 19 Missing ⚠️
src/profile-logic/processed-profile-versioning.ts 52.94% 8 Missing ⚠️
...c/components/timeline/TrackCounterTooltipFormat.ts 96.00% 1 Missing ⚠️
Additional details and impacted files
@@            Coverage Diff             @@
##             main    #6023      +/-   ##
==========================================
- Coverage   83.82%   83.82%   -0.01%     
==========================================
  Files         330      331       +1     
  Lines       34682    34731      +49     
  Branches     9703     9629      -74     
==========================================
+ Hits        29072    29113      +41     
- Misses       5181     5190       +9     
+ Partials      429      428       -1     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

Comment thread locales/en-US/app.ftl Outdated
@fatadel fatadel requested a review from flodolo May 18, 2026 09:14
Comment thread src/components/timeline/TrackCounterTooltipFormat.ts Outdated
Replace the four hardcoded category branches in TrackCounterGraph's
tooltip rendering (Memory / Power / Bandwidth / processCPU) with a
declarative tooltipRows array on CounterDisplayConfig. Each row picks
a data source (count, rate, accumulated, selection-total, …), a value
format (unit, optional CO₂e, optional auto-scale ladder), and a label.

The new TrackCounterTooltip component iterates the rows, resolves
each source, formats the value, and renders through TooltipDetails.
Memory and CPU tooltips now use the same TooltipDetails layout as
Power and Bandwidth.

Profile labels are raw English so the format stays self-describing.
The frontend translates labels it recognizes from a private allow-list
and renders unknown ones verbatim. The dedicated TooltipTrackPower
component is removed; the power/energy unit ladders move into the
formatter.

Bumps the processed profile format to v63. The v63 upgrader derives
tooltipRows from each counter's category and name.

Closes firefox-devtools#5961.
@fatadel fatadel requested a review from canova May 27, 2026 15:36

@canova canova left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good to me overall, thanks. I added some comments below

Comment thread src/components/timeline/TrackCounterTooltipFormat.ts
Comment thread src/components/timeline/TrackCounterTooltip.tsx Outdated
Comment thread src/components/timeline/TrackCounterTooltip.tsx Outdated
Comment thread src/components/timeline/TrackCounterTooltip.tsx Outdated
Drop the parallel ResolverContext type and read this.props
directly. Extract picowatt-hour conversions into pwhToWh and
pwhPerMsToWatts helpers. Memoize the per-range sample sums so
mouse-move re-renders don't rescan the counter samples.
@fatadel

fatadel commented Jun 1, 2026

Copy link
Copy Markdown
Contributor Author

Thanks for your review, @canova! It seems like I have addressed all the issues now.

@fatadel fatadel requested a review from canova June 1, 2026 10:21

@canova canova left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks! Looks good to me, but I noticed one thing that we should fix before landing.

I was testing the localization with togglePseudoLocalization('accented') executed in the devtools console, and I can't see that the tooltips are properly localized currently.

For example, this is the same profile with profiler.firefox.com:

Image

This is from the deploy preview:

Image

Note that the profile in the initial comment doesn't include the labelKey so it won't work. I captured a new profile

Looks like because we updated the ftl keys to append 2.

Comment thread src/components/timeline/TrackCounterTooltipFormat.ts Outdated
Comment thread src/components/timeline/TrackCounterTooltipFormat.ts Outdated
Comment thread src/components/timeline/TrackCounterTooltipFormat.ts Outdated
@fatadel

fatadel commented Jun 3, 2026

Copy link
Copy Markdown
Contributor Author

Great catches, thanks @canova! Fixed now. I've also updated the PR description with the link to the profile you recorded.

@fatadel fatadel requested a review from canova June 3, 2026 10:23
@fatadel

fatadel commented Jun 3, 2026

Copy link
Copy Markdown
Contributor Author

And thanks for the trick with togglePseudoLocalization('accented'), @canova! Now it indeed shows localized keys 🥳

@canova canova left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks, looks good to me!

@fatadel fatadel enabled auto-merge (squash) June 3, 2026 11:28
@fatadel fatadel merged commit c231ed3 into firefox-devtools:main Jun 3, 2026
22 checks passed
@fatadel fatadel deleted the issue-5961 branch June 3, 2026 11:29
@canova canova mentioned this pull request Jun 16, 2026
canova added a commit that referenced this pull request Jun 16, 2026
Changes:

[Nazım Can Altınova] Fix call node context menu being hidden behind
source view bottom box (#6045)
[Nazım Can Altınova] Pass `--use-env-proxy` only when the node version
is >= 24 (#6064)
[fatadel] Upgrade @firefox-devtools/react-contextmenu to 5.2.4 (#6066)
[Markus Stange] Switch profiler-edit from minimist to commander (#6065)
[Markus Stange] Support reading profiles from JsonSlabs files (#6037)
[Florian Quèze] Don't fail profile processing when a marker's stack
field is not a backtrace (#6069)
[fatadel] Replace the footer-links overlay with a settings menu (#6042)
[fatadel] Upgrade @types/node to match Node 24 (#6070)
[fatadel] Remove unused undici-types package (#6074)
[cathaysia] Update isLocalURL to include LAN addresses, .local domains,
and hostn… (#5973)
[Markus Stange] Fix from-url with binary profiles (#6072)
[fatadel] Upgrade to React 19 (#6067)
[Markus Stange] Add an insertStackLabels helper. (#6076)
[fatadel] Drive counter tooltips from a tooltipRows schema (#6023)
[fatadel] Add TrackPower--tooltip-average-power-microwatt (#6080)
[Markus Stange] Downgrade to React 19.1 to fix unusable dev build
performance. (#6082)
[Nazım Can Altınova] Add source map symbolication and source view
support (#6018)
[spokodev] fix(FilterNavigatorBar): clip overflow so many breadcrumbs do
not expand the parent (#6085)
[Markus Stange] Move paddings inside the tree header cells. (#6002)
[Markus Stange] Add an --insert-label-frames argument to the
profiler-edit tool (#5966)
[Markus Stange] Stop printing "error: too many arguments" during tests.
(#6088)
[Markus Stange] More additions to profiler-edit, for sp3 profiles
(#6009)
[Nazım Can Altınova] Do not rely on localized texts in the settings menu
tests (#6101)

And special thanks to our localizers:

be: Andrei Mukamolau
de: Ger
de: Michael Köhler
de: Ralf Duehnfahr
el: Jim Spentzos
en-CA: chutten
en-GB: Ian Neal
es-CL: ravmn
fr: Théo Chevalier
fr: wy
fur: Fabio Tomat
fy-NL: Fjoerfoks
ia: Melo46
it: Francesco Lodolo [:flod]
nl: Mark Heijl
ru: Valery Ledovskoy
sr: Марко Костић (Marko Kostić)
sv-SE: Andreas Pettersson
tr: Grk
tr: Selim Şumlu
zh-CN: Olvcpr423
zh-TW: Pin-guang Chen
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Define a schema-driven tooltip for counter tracks

3 participants