Add a Focus Self transform #5774

mstange · 2026-01-22T21:01:28Z

This transform avoids the need to drop callees manually if you want to see a flame graph for a single JS function but no other JS functions. With this transform, you can focus on the function's self while you're in the JS-only view, and then go back to the combined view to see any native functions involved in the execution of that JS function.

For example, in this profile, you can "focus self" on HTMLElement.click, and then change the implementation filter to "All Frames". This will show you the overhead on the way to calling the click handler, minus the time spent in the called JS code (profile). If you had just done "focus function" on HTMLElement.click, you would have seen all the time spent in callees too (profile), and you would have needed to drop each JS callee manually.

codecov · 2026-01-22T21:04:03Z

Codecov Report

❌ Patch coverage is 76.47059% with 12 lines in your changes missing coverage. Please review.
✅ Project coverage is 85.62%. Comparing base (1b6b00e) to head (35c005e).
⚠️ Report is 4 commits behind head on main.

Files with missing lines	Patch %	Lines
src/profile-logic/transforms.ts	80.00%	9 Missing ⚠️
src/components/shared/CallNodeContextMenu.tsx	0.00%	3 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #5774      +/-   ##
==========================================
- Coverage   85.64%   85.62%   -0.02%     
==========================================
  Files         319      319              
  Lines       31197    31247      +50     
  Branches     8588     8510      -78     
==========================================
+ Hits        26718    26756      +38     
- Misses       4049     4061      +12     
  Partials      430      430

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

flodolo · 2026-01-23T08:02:39Z

locales/en-US/app.ftl

    .title = { CallNodeContextMenu--transform-focus-function-title }
 CallNodeContextMenu--transform-focus-function-inverted = Focus on function (inverted)
    .title = { CallNodeContextMenu--transform-focus-function-title }
+CallNodeContextMenu--transform-focus-self-title =


Do we expect self to be translated?

Depends on how the call tree's "Self" column is translated. I've added the following note, does that work?

# The translation for "self" in this string should match the translation used # in CallTree--samples-self and CallTree--bytes-self. Alternatively it can be # translated as "self values" or "self time" (though "self time" is less desirable # because this menu item is also shown in "bytes" mode).

The note works, but we should add it also for the previous string. You can use a group-level comment (2 hashes), and reset it after this string.

er wait, I did it wrong

sorry about that, should be good now

flodolo · 2026-01-23T15:41:40Z

locales/en-US/app.ftl

 #   $item (String) - Name of the function that transform applied to.
 TransformNavigator--focus-function = Focus: { $item }

+# "Focus self" transform.


Same here, worth adding a short note on "self" (no need for it to be as long as the other).

Fixed, how does this look?

flodolo

Looks good.

canova

Thanks for the documentation and localization!

src/test/store/transforms.test.ts

canova · 2026-01-27T15:13:15Z

src/profile-logic/transforms.ts

    case 'focus-function':
      return _startCallNodePathWithFunction(transform.funcIndex, callNodePath);
+    case 'focus-self':
+      return _startCallNodePathWithFunction(transform.funcIndex, callNodePath);


nit: could you add a comment here maybe explaining why we still keep all the descendant call nodes? I was a bit confused by that at first, but then it made sense.

Oops actually I think I forgot to properly review this part. It doesn't make sense to me. Thanks for catching this!

Oh, I thought it was actually doing it because we had the implementation filter applied later. It appears I was wrong.

This transform avoids the need to drop callees manually if you want to see a flame graph for a single JS function but no other JS functions; with this transform, you can focus on the function's self while you're in the JS-only view, and then go back to the combined view to see any native functions involved in the execution of that JS function.

Lots of exciting changes 🎉: [arai-a] Put radio buttons into labels (#5738) [DaniPopes] Update comment for "unique-string" (#5741) [Karan Pradhan] Hide tooltip filter button in non-sticky tooltips and add hideFilterButton tests (#5718) [arai-a] Add a menu to copy the Marker Table as text (#5732) [arai-a] Make the entire list item clickable for the "Full Range" (#5742) [Markus Stange] Move symbol table demangling out of SymbolStore into SymbolProvider (#5746) [Markus Stange] Remove SVG asset imports from profile-data.ts (#5747) [arai-a] Do not apply sticky tooltip on double click (#5754) [arai-a] Skip the ChartCanvas redraw on the Viewport's internal default state usage (#5744) [Markus Stange] Stop blindly extracting uint8array.buffer after calling compress() (#5753) [Markus Stange] In the assembly view state, refer to the current symbol by index (#5755) [Markus Stange] Fix "scroll to hotspot" functionality in the source view + assembly view (#5759) [Markus Stange] Keep the colorField markerSchema field when processing profiles in the gecko format (#5760) [Markus Stange] Implement dark mode (#5740) [Markus Stange] Fix light-mode colors (#5765) [Markus Stange] Tweak dark mode colours. (#5767) [Nazım Can Altınova] Enable some basic type-aware lints (#5775) [Markus Stange] Allow seeing different assembly code for the same function (#5349) [fatadel] Refine tree view a11y (#5779) [fatadel] Align double-click behavior of stack chart with flame graph (#5782) [Markus Stange] Split gz.ts properly into node and browser variants (#5764) [Markus Stange] Simplify and optimize the computation of per-call-node line and address timings (#5770) [Nazım Can Altınova] Move the dark mode toggle to devtools console (#5783) [Nazım Can Altınova] 🔃 Sync: l10n -> main (Jan 27, 2026) (#5785) [Nazım Can Altınova] Improve Chrome importer marker payload logic (#5717) [Markus Stange] Add a Focus Self transform (#5774) [Nazım Can Altınova] Enable the Turkish locale in production (#5786) And huge thanks to our localizers 🎉 : be: Mikalai Udodau de: Ger de: Michael Köhler el: Jim Spentzos en-CA: chutten en-CA: Saurabh en-GB: Ian Neal en-GB: Saurabh es-CL: ravmn fy-NL, nl: Fjoerfoks fr: Skywarp fr: Théo Chevalier fur: Fabio Tomat fy-NL: Fjoerfoks ia: Melo46 it: Francesco Lodolo [:flod] nl: Fjoerfoks nl: Mark Heijl pt-BR: Marcelo Ghelman ru: berry ru: Valery Ledovskoy sv-SE: Andreas Pettersson tr: Grk zh-CN: Olvcpr423 zh-CN: wxie zh-TW: Pin-guang Chen

mstange requested a review from canova January 22, 2026 21:01

mstange self-assigned this Jan 22, 2026

mstange requested a review from a team as a code owner January 22, 2026 21:01

mstange force-pushed the focus-self-transform branch from d18cff3 to 62f75cd Compare January 22, 2026 21:01

mstange force-pushed the focus-self-transform branch 2 times, most recently from fec7650 to c470427 Compare January 22, 2026 21:35

flodolo reviewed Jan 23, 2026

View reviewed changes

mstange force-pushed the focus-self-transform branch from 4eb37eb to 5450567 Compare January 23, 2026 15:28

flodolo reviewed Jan 23, 2026

View reviewed changes

mstange force-pushed the focus-self-transform branch 2 times, most recently from 5d63c03 to 7299b85 Compare January 23, 2026 15:55

flodolo approved these changes Jan 23, 2026

View reviewed changes

canova approved these changes Jan 27, 2026

View reviewed changes

mstange added 2 commits January 27, 2026 11:32

Add translation notes for "focus self" strings.

35c005e

mstange force-pushed the focus-self-transform branch from 7299b85 to 35c005e Compare January 27, 2026 16:33

mstange enabled auto-merge January 27, 2026 16:33

mstange merged commit e06bd91 into firefox-devtools:main Jan 27, 2026
20 checks passed

canova mentioned this pull request Jan 27, 2026

Deploy January 27, 2026 #5787

Merged

Add a Focus Self transform #5774

Add a Focus Self transform #5774

Conversation

mstange commented Jan 22, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

codecov bot commented Jan 22, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

flodolo left a comment

Choose a reason for hiding this comment

Uh oh!

canova left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

mstange commented Jan 22, 2026 •

edited

Loading

codecov bot commented Jan 22, 2026 •

edited

Loading