Skip to content

[Deploy preview] Add a function list - #5233

Draft
mstange wants to merge 272 commits into
firefox-devtools:mainfrom
mstange:function-list
Draft

mstange wants to merge 272 commits into
firefox-devtools:mainfrom
mstange:function-list

Conversation

@mstange

@mstange mstange commented Nov 28, 2024 •

Copy link
Copy Markdown
Contributor

Deploy preview

WIP implementing the approach outlined in #15 (comment)

mstange and others added 30 commits December 4, 2018 12:02
* Properly handle Service Worker life cycle events (firefox-devtools#1520)
* Add Windows demangling support (firefox-devtools#1537)
* Expand the instructions for remote profiling (firefox-devtools#1536)
 * Allow focus to move from the search field when there's text in it
 * Fix network marker timing
 * Arrow panel accessibility fix
 * Make shrinking of the top bar behave nicer
 * JS Tracer
🎉 Happy new year 🎉

* Add support for simple text markers tooltips
* Add cache to network marker tooltip
* Keyboard navigation fixes
* Screenshot speedups
* Flame chart speedups
* Fixes top arrow for the meta info panel
* Add a button to load from URL in the Home
* Fixes issues with markers that start before the start of a profile
* change a label in the GC marker tooltip
* Add tooltip for samples in the thread activity graph
* Make the background of the symbolication notification opaque
* Add a memory track
* Move the keyboard focus to the network panel when it opens
* Use category colors in the stack chart
* Add more documentation around symbolication
* Add a category breakdown to the sidebar
* LogMarker support
* minor GC markers tooltips changes
* use category colors in flame graph
* accessibility fixes in MenuButtons
* close panels with the escape key
* cleaner URL for default parameters
* Import 2 profiles in one view
* Error boundaries
* better handling of tracing markers without an end in the profile
 * Copy marker's cause
 * Fix screenshot issues
 * Draw markers with at least 1 pixel on the scren
 * Fix unreliable first counters
 * Basic support for DiskIO markers
 * Rename the project to the Firefox Profiler, and move the URL
 * Add DiskIO makrers to the timeline
 * Always show a tooltip when hovering small timeline markers
* round values in the sidebar
* the call tree and other treeview-based panels are more screenreader-accessible
* memory-related markers are now separate to other markers, and integrated in the memory track
* better contrast for the meta info panel
* add ABI in the meta info panel
* symbolicate unsymbolicated profiles at load time
* Changing the zoom gesture from shift + mousewheel to ctrl + mousewheel
* tooltips for "instant" markers no longer show a 0ms duration
* remove the "..." icon to display the profile info, instead the profile short info is the button
* top bar's height is correct in Chrome now
* in the flamegraph we can navigate between nodes using the arrow keys (wasd is still used to move the chart itself)
* prevent focus on the call tree context menu
* backend of PII sanitization
* the rrd process now has a nice title
* we see the PID for the process tracks directly with its name
* we can access the processed markers in the console
* we can see a color change when clicking on a marker in the timeline
* we see whether the profile was captured in a "debug" build
* fix issues with the activity graph when changing the range or switching threads
* network markers are filtered separately than other markers
* checkboxes and radio buttons now have a photon style
* FileIO markers can be searched more easily
* show text markers' payload in the marker table
* fix the redirection for cleopatra's hash
* fix display of an empty PID line for screenshot tracks
* expose more things to the console
* fix issue with network markers partly in the range
* keep the url state after publishing
* improve algorithm to find idle threads at load time
* better handling of edge cases in the network panel
* minor contrast improvement
canova added 2 commits July 9, 2026 16:51
Changes:

[Nazım Can Altınova] Bump profiler-cli version to 0.4.0 (firefox-devtools#6132)
[Florian Quèze] Add "/" and "f" keyboard shortcuts to focus the panel
filter box (firefox-devtools#6025)
[Markus Stange] Change profile.shared.stackTable.prefix to prefixOffset
(delta from current index) (firefox-devtools#6089)
[Sky Ning] Add workflow to insert PR preview links (firefox-devtools#6133)
[Markus Stange] Implement column sorting in the marker table (firefox-devtools#6083)
[Markus Stange] Make it easier to create upside-down flame graphs
(firefox-devtools#6128)
[Markus Stange] Use appropriate highlighter dialects for ts + jsx
(firefox-devtools#6141)
[cathaysia] style: add .editorconfig (firefox-devtools#6142)
[Nazım Can Altınova] Prevent long source URLs from overflowing the code
error overlay (firefox-devtools#6147)
[Nazım Can Altınova] Extract a runCommand helper for profiler-cli
command handlers (firefox-devtools#6148)
[Markus Stange] feat(theme): add color-scheme meta (firefox-devtools#6150)
[Nazım Can Altınova] Add an early throw for the this.querier and remove
the non-null asserts in the cli codebase (firefox-devtools#6145)
[Markus Stange] feat: invert call stack in flame graph to render as
icicle graph (firefox-devtools#6090)
[Markus Stange] Improve preview link discovery (firefox-devtools#6149)
[Nazım Can Altınova] 🔃 Sync: l10n -> main (July 9, 2026) (firefox-devtools#6155)

And special thanks to our localizers:

de: Michael Köhler
el: Jim Spentzos
en-GB: Ian Neal
es-CL: ravmn
fr: Théo Chevalier
fy-NL: Fjoerfoks
ia: Melo46
it: Francesco Lodolo [:flod]
nl: Fjoerfoks
ru: Valery Ledovskoy
tr: Nazım Can Altınova
zh-TW: Pin-guang Chen
Changes:

[Sky Ning] Skip preview links for non-main PRs (firefox-devtools#6161)
[spokodev] fix(gecko-upgrade): don't crash on a counter with empty
sample_groups (firefox-devtools#6160)
[fatadel] Show counter values over time in profiler-cli (firefox-devtools#6136)
[Markus Stange] Make profile-conversion snapshots more compact and
meaningful (firefox-devtools#6152)
[Markus Stange] More typed arrays: sample + counter times, some
frametable columns (firefox-devtools#6139)
[Nazım Can Altınova] Only render a marker url field as a link when the
whole value is a URL (firefox-devtools#6163)
[fatadel] Show each counter's owning process in profiler-cli (firefox-devtools#6164)
[Nazım Can Altınova] Document the pre-existing thread info and network
JSON schemas in the cli (firefox-devtools#6171)
[Markus Stange] Copy column contents in
getRawSamplesTableBuilderFromExisting for consistency (firefox-devtools#6168)
[Markus Stange] Convert eligible columns to typed arrays when outputting
from profiler-edit (firefox-devtools#6167)
[Markus Stange] Remove unused samples.thread column (firefox-devtools#6151)
[Markus Stange] Fixed botched merge which broke 'yarn ts' (firefox-devtools#6174)
[Nazım Can Altınova] Add marker handles to `profiler-cli thread network`
(firefox-devtools#6172)
[Markus Stange] Update json-slabs 0.3.0 → 0.4.0 (major) (firefox-devtools#6176)
[Nazım Can Altınova] Surface network activity across profiler-cli
(firefox-devtools#6175)
[Nazım Can Altınova] Add `profile meta` command to profiler-cli (firefox-devtools#6177)
[Markus Stange] Allow raw marker table's `startTime` and `endTime`
columns to be Float64Array (firefox-devtools#6169)
[nightcityblade] Fix light theme text selection colors (firefox-devtools#6186)
[Nazım Can Altınova] Import source map URLs from Chrome DevTools traces
(firefox-devtools#6190)
[Nazım Can Altınova] Rename yarn `build-profiler-cli` script to
`build-cli` (firefox-devtools#6191)
[Nazım Can Altınova] Migrate husky to version 9 (firefox-devtools#6201)
[Nazım Can Altınova] Fix horizontal overflow when the transform
navigator is long (firefox-devtools#6199)
[fatadel] Add a 'hexadecimal' marker schema field format (firefox-devtools#6197)
[Nazım Can Altınova] Bump source-map to 0.8.0 and remove the old type
workaround (firefox-devtools#6202)
[Nazım Can Altınova] 🔃 Sync: l10n -> main (July 21, 2026) (firefox-devtools#6209)


And special thanks to our localizers:

fr: parmegiani.thomas
fr: Théo Chevalier
sr: Марко Костић (Marko Kostić)
sv-SE: Luna Jernberg
tr: Grk
zh-CN: Ariel
zh-CN: Olvcpr423
canova and others added 3 commits August 3, 2026 17:25
Changes:

[Markus Stange] remove unused collectSourceIndicesFromThreads firefox-devtools#6086
(firefox-devtools#6219)
[fatadel] Create the IPC track from the timeline-ipc schema display
location (firefox-devtools#6213)
[Nazım Can Altınova] Show markers that are in the committed range only
in `profiler-cli thread markers` (firefox-devtools#6222)
[Nazım Can Altınova] Add an "apply source map" button to the profile
info panel (firefox-devtools#6200)
[Markus Stange] Allow specifying the stage reliost symbol server (firefox-devtools#6228)
[Alex Thayer] Allow exporting argument values in profiles (firefox-devtools#5914)
[Nazım Can Altınova] 🔃 Sync: l10n -> main (August 3, 2026) (firefox-devtools#6234)
[Nazım Can Altınova] Bump profiler-cli version to 0.7.0 (firefox-devtools#6235)

And special thanks to our localizers:

de: Ger
de: Ralf Duehnfahr
el: Jim Spentzos
en-GB: Ian Neal
fy-NL: Fjoerfoks
ia: Melo46
it: Francesco Lodolo [:flod]
nl: Mark Heijl
ru: Valery Ledovskoy
sv-SE: Andreas Pettersson
sv-SE: Luna Jernberg
zh-TW: Pin-guang Chen
Changes:

[fatadel] Create the Network track from the timeline-network schema
display location (firefox-devtools#6224)
[Markus Stange] Only call `getRawFrameTableBuilderWithExistingContents`
once per symbolication batch. (firefox-devtools#6233)
[fatadel] Improve discoverability of downloading a local profile (firefox-devtools#6216)
[Nazım Can Altınova] Handle the cli daemon startup failures more
gracefully with better errors (firefox-devtools#6241)
[Nazım Can Altınova] Add the ability to apply source maps from the CLI
(firefox-devtools#6229)
[Nazım Can Altınova] Handle Text and Log marker payloads with their
marker schema (firefox-devtools#6247)
[Nazım Can Altınova] Bump the Gecko profile version to make sure that
the Text and Log marker changes are picked up in the frontends (firefox-devtools#6252)
[fatadel] Deactivate a menu button as soon as its panel is dismissed
(firefox-devtools#6251)
[Nazım Can Altınova] 🔃 Sync: l10n -> main (August 10, 2026) (firefox-devtools#6253)
[Nazım Can Altınova] Bump profiler-cli version to 0.8.0 (firefox-devtools#6254)

And special thanks to our localizers:

de: Ger
de: Michael Köhler
el: George kitsoukakis
en-CA: chutten
en-CA: Saurabh
en-GB: Ian Neal
es-CL: ravmn
fy-NL, nl: Fjoerfoks
fr: Théo Chevalier
fy-NL: Fjoerfoks
ia: Melo46
it: Francesco Lodolo [:flod]
nl: Fjoerfoks
ru: michellemelsspam
ru: Valery Ledovskoy
tr: giray
tr: Selim Şumlu
zh-TW: Pin-guang Chen
Changes:

[Nazım Can Altınova] Update oxfmt 0.59.0 → 0.63.0 (major) (firefox-devtools#6262)
[Andrew Creskey] Show which network requests were prefetched (firefox-devtools#6259)
[Florian Quèze] profiler-cli: document the marker field:value search
syntax (firefox-devtools#6265)
[Florian Quèze] profiler-cli: report one time base for text and JSON
output (firefox-devtools#6266)
[Florian Quèze] profiler-cli: avoid a stack overflow on large marker
threads (firefox-devtools#6264)
[Markus Stange] Give the frameTable a lib column (firefox-devtools#6258)
[Florian Quèze] profiler-cli: accept --limit 0 as unlimited, and make
truncation loud (firefox-devtools#6267)
[Florian Quèze] profiler-cli: report the network request count the
filters ran against (firefox-devtools#6274)
[Nazım Can Altınova] Fix dark mode contrast of the warning icons in the
publish panel (firefox-devtools#6280)
[Nazım Can Altınova] Extract the publish panel warning indicator into a
small component (firefox-devtools#6282)
[Markus Stange] More typed arrays in the FrameTable (and a flags column)
(firefox-devtools#6173)
[Nazım Can Altınova] Improve the profiler-cli publish script and
document the whole deployment in a better way (firefox-devtools#6260)
[fatadel] 🔃 Sync: l10n -> main (September 3, 2026) (firefox-devtools#6301)
[fatadel] Bump profiler-cli version to 0.9.0 (firefox-devtools#6302)

And special thanks to our localizers:

es-CL: ravmn
nl: Mark Heijl
sv-SE: Andreas Pettersson
sv-SE: Luna Jernberg
sv-SE: Peter Kihlstedt
tr: Selim Şumlu
tr: giray
zh-CN: 高乐喆
@mstange
mstange force-pushed the function-list branch 2 times, most recently from 55c94a0 to 7b7cea8 Compare September 3, 2026 20:22
Changes:

[fatadel] Show a category breakdown in profiler-cli (firefox-devtools#6256)
[fatadel] Show allocation data in the cli (firefox-devtools#6246)
[Florian Quèze] profiler-cli: name the process in the thread banner, and
follow the queried thread (firefox-devtools#6269)
[fatadel] Drive PII sanitization from marker schemas (firefox-devtools#6291)
[fatadel] Move FileIO table labels into marker schemas (firefox-devtools#6296)
[Florian Quèze] profiler-cli: add a thread list command (firefox-devtools#6273)
[Nazım Can Altınova] Update oxfmt 0.63.0 → 0.68.0 (major) (firefox-devtools#6316)
[Markus Stange] Add missing finishRawMarkerTableBuilder. (firefox-devtools#6318)
[Markus Stange] Fix the upload error button contrast (firefox-devtools#6315)
[Markus Stange] Allow typed arrays in the nativeSymbols table (firefox-devtools#6300)
[Markus Stange] Remove brittle test. (firefox-devtools#6322)
[Markus Stange] Fix file extension typo. (firefox-devtools#6325)
[Nazım Can Altınova] Add a permalink command to profiler-cli for already
published profiles (firefox-devtools#6331)
[Markus Stange] Typed arrays + flags for the FuncTable (firefox-devtools#6323)
[Florian Quèze] profiler-cli: add profile markers for cross-thread
marker search (firefox-devtools#6276)
[fatadel] Convert extension text markers to structured payloads (firefox-devtools#6314)
[Florian Quèze] profiler-cli: include per-marker fields and data in
--list --json (firefox-devtools#6275)
[Nazım Can Altınova]  Add `--with-samply` to "profiler-cli load" (firefox-devtools#6339)
[Markus Stange] Speed up call tree sidebar by sharing work with the
activity graph (firefox-devtools#6329)
[Nazım Can Altınova] 🔃 Sync: l10n -> main (Sept 22, 2026) (firefox-devtools#6341)
[Nazım Can Altınova] Bump profiler-cli version to 0.10.0 (firefox-devtools#6342)

And special thanks to our localizers:

el: Jim Spentzos
ro: robbp
…ming.

The Canvas computed the tooltip percentage itself, by subtracting the box's
start from its end. That only works because the non-inverted flame graph
happens to lay boxes out relative to rootTotalSummary. Move the computation
behind a getRatioOfRootTotalSummary() method on FlameGraphTiming so that each
implementation can decide how its box widths relate to the percentage it wants
to display.
The bottom box can currently only be opened for a call node. Add the
equivalent lookup for a bare function index, so that views which select
functions rather than call nodes can open the bottom box too.
Add a new "Function List" tab which shows a flat, sortable list of functions
rather than a tree. Selection is per-function instead of per-call-node, so
this adds selectedFunctionIndex to the per-thread view options along with the
URL handling, reducers and selectors that go with it.
The call tree's context menu operates on a call node path, which the function
list does not have. Add a sibling menu that operates on a function index
instead. The menu items are described by a data table rather than repeated
JSX, because the same set of transforms is about to be reused by more than one
view.
These are the same single-key shortcuts the call tree context menu offers
(m, f, S, c, C, r, R, d), applied to the selected function.
When the function list tab is active, the activity graph should highlight
every sample whose stack contains the selected function, rather than the
samples belonging to a selected call node.
Clicking a sample already selects the corresponding self call node. When the
function list tab is active, also select that call node's function so the
click has an effect there too.
Turn CallNodeInfoInverted from a concrete class into an interface, and rename
the existing class to LazyInvertedCallNodeInfo. Along with that, stop assuming
that an inverted tree has exactly one root per function: the timings are now
keyed by root call node handle, obtained via getRootNodeForFunc(), rather than
by func index directly. For the lazy implementation the two are still the same
number, so this is behavior-preserving.

This makes room for an inverted CallNodeInfo whose roots are restricted to a
single function, which the next commit adds.
The lower wing answers "who calls the selected function?". It is an inverted
tree, but unlike the regular inverted tree it has a single root — the selected
function — and its totals count only the samples in which that function
appears.

LowerWingCallNodeInfo builds that tree eagerly from the selected function's
root-most entry points, expanding by inverted depth as the view asks for it.
computeLowerWingTimings maps each entry point's inclusive time onto the
corresponding node so that the percentages stay relative to the full thread.
The upper wing answers "what does the selected function call?". It is a
non-inverted tree rooted at the selected function, built by re-rooting the
thread's stacks at that function's entry points.
Lay out the lower wing as a flame graph. Because the lower wing tree is
materialized lazily by inverted depth, the layout is computed row by row and
memoizes its prefix sums rather than walking a fully built table.
The flame graph currently derives box widths from rootTotalSummary, which also
serves as the 100% reference for the displayed percentages. The upper wing
needs those to differ: its root should fill the full width, while percentages
should stay relative to all filtered samples.

Add a separate flameGraphWidthTotal to CallTreeTimings for the width
reference. It equals rootTotalSummary everywhere so far, so nothing changes
yet.
The function list is about to grow three "wings" around the selected
function: descendants (upper), ancestors (lower), and self. Each needs its own
selected, expanded and right-clicked call node path.

Rather than adding three more pairs of fields, key the existing per-thread
paths by a CallNodeArea instead of by an isInverted boolean, and add the two
wing areas alongside the two tree areas. The selected function itself moves
into URL state so it can be shared and restored, and is mirrored into the wing
paths as the wings' root.

This commit adds the state, actions, reducers, selectors and URL handling; the
views that consume them follow.
A collapsible section with a header, used by the function list wings in the
next commit. The header can hold extra controls via headerActions.
Render the descendants and ancestors wings next to the function list, each in
its own disclosure box. Both are the same TreeView-based component, differing
only in which selectors they read and which context menu they open.

The function list context menu is now shared between the function list and the
wings, so rename it to WingContextMenu and give it a second connected variant
for the lower wing, whose right-clicked target is a call node rather than a
bare function.
The self wing shows where the selected function spends its own self time. It
is built from the focusSelf-filtered thread, taken before the implementation
filter so that native frames inside a JS function's self time stay visible
when the filter is set to "JS only".
Each wing can now be displayed either as a call tree or as a flame graph, and
WingViewToggle in the disclosure box header switches between them. The choice
is per-wing and persisted in the URL.
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.

6 participants