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
Copy link
Copy Markdown
Contributor

@fatadel fatadel commented May 13, 2026

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
Copy link
Copy Markdown

codecov Bot commented May 13, 2026

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
Copy link
Copy Markdown
Member

@canova canova left a comment

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
Copy link
Copy Markdown
Contributor Author

fatadel commented Jun 1, 2026

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
Copy link
Copy Markdown
Member

@canova canova left a comment

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
Copy link
Copy Markdown
Contributor Author

fatadel commented Jun 3, 2026

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
Copy link
Copy Markdown
Contributor Author

fatadel commented Jun 3, 2026

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

Copy link
Copy Markdown
Member

@canova canova left a comment

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
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