Show a category breakdown in profiler-cli

[fatadel]

Main | Deploy preview

The CLI had no way to tell whether a hot region of a profile was Layout, GC, JavaScript or Graphics, which the call tree sidebar shows in the web UI. thread samples now breaks the samples currently in view down by category and subcategory, and function info does the same for one function's running and self time.

Closes #6204

---

Profile

Usage examples:

➜  profiler git:(issue-6204) ✗ pq thread samples
[Thread: t-38 (GeckoMain) | View: Full profile | Full: 11.143s]

Thread: https://juventus.com

Note: active samples only (idle excluded) — use --include-idle to include idle samples.

──── Categories (1493 running samples) ────

  Layout                        ████████████                     621   41.6%
    Style computation           ██████                           336   22.5%
    Other                       ██                               119    8.0%
    Reflow                      ██                               100    6.7%
    Frame construction          █                                 44    2.9%
    Selector query                                                19    1.3%
    CSS parsing                                                    3    0.2%
  JavaScript                    █████████                        454   30.4%
    JIT (ion)                   ██████                           317   21.2%
    JIT (baseline)              █                                 41    2.7%
    Other                                                         21    1.4%
    JIT (baseline-interpreter)                                    21    1.4%
    JIT Compile (baseline)                                        19    1.3%
    Builtin API                                                   16    1.1%
    Interpreter                                                   15    1.0%
    JIT Compile (ion)                                              3    0.2%
    Parsing                                                        1    0.1%
  Graphics                      ███                              179   12.0%
    DisplayList building        ██                               112    7.5%
    WebRender display list      █                                 53    3.5%
    Other                                                          9    0.6%
    DisplayList merging                                            5    0.3%
  Other                         ██                                80    5.4%
    Other                       ██                                80    5.4%
  Profiler                      █                                 79    5.3%
  DOM                           █                                 57    3.8%
  GC / CC                                                         19    1.3%
    Major GC (Mark)                                                7    0.5%
    Other                                                          3    0.2%
    Minor GC                                                       3    0.2%
    CC (Build Graph)                                               2    0.1%
    Major GC (Other)                                               1    0.1%
    Major GC (Sweep)                                               1    0.1%
    CC (Free Snow White)                                           1    0.1%
    CC (Finalize)                                                  1    0.1%
  Network                                                          4    0.3%

➜  profiler git:(issue-6204) ✗ profiler-cli function info f-1
[Thread: t-38 (GeckoMain) | View: Full profile | Full: 11.143s]

Function f-1:
  Full name: dyld!start
  Short name: start
  Is JS: false
  Relevant for JS: false
  Resource: dyld
  Library: dyld
  Library path: /usr/lib/dyld
  Debug name: dyld
  Debug path: /usr/lib/dyld
  Breakpad ID: F924BDD34365346695808B1B3FA8F8570

──── Categories: running (1493 samples, 100.0% of thread) ────

  Layout                        ████████████                     621   41.6%
    Style computation           ██████                           336   22.5%
    Other                       ██                               119    8.0%
    Reflow                      ██                               100    6.7%
    Frame construction          █                                 44    2.9%
    Selector query                                                19    1.3%
    CSS parsing                                                    3    0.2%
  JavaScript                    █████████                        454   30.4%
    JIT (ion)                   ██████                           317   21.2%
    JIT (baseline)              █                                 41    2.7%
    Other                                                         21    1.4%
    JIT (baseline-interpreter)                                    21    1.4%
    JIT Compile (baseline)                                        19    1.3%
    Builtin API                                                   16    1.1%
    Interpreter                                                   15    1.0%
    JIT Compile (ion)                                              3    0.2%
    Parsing                                                        1    0.1%
  Graphics                      ███                              179   12.0%
    DisplayList building        ██                               112    7.5%
    WebRender display list      █                                 53    3.5%
    Other                                                          9    0.6%
    DisplayList merging                                            5    0.3%
  Other                         ██                                80    5.4%
    Other                       ██                                80    5.4%
  Profiler                      █                                 79    5.3%
  DOM                           █                                 57    3.8%
  GC / CC                                                         19    1.3%
    Major GC (Mark)                                                7    0.5%
    Other                                                          3    0.2%
    Minor GC                                                       3    0.2%
    CC (Build Graph)                                               2    0.1%
    Major GC (Other)                                               1    0.1%
    Major GC (Sweep)                                               1    0.1%
    CC (Free Snow White)                                           1    0.1%
    CC (Finalize)                                                  1    0.1%
  Network                                                          4    0.3%

[codecov]

Codecov Report

❌ Patch coverage is 96.87500% with 3 lines in your changes missing coverage. Please review.
✅ Project coverage is 83.75%. Comparing base (1198e50) to head (9aa1448).
⚠️ Report is 38 commits behind head on main.

Files with missing lines	Patch %	Lines
src/profile-query/formatters/category-breakdown.ts	92.59%	1 Missing and 1 partial ⚠️
src/profile-logic/profile-data.ts	97.61%	1 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #6256      +/-   ##
==========================================
+ Coverage   83.73%   83.75%   +0.01%     
==========================================
  Files         350      352       +2     
  Lines       37523    37587      +64     
  Branches    10543    10552       +9     
==========================================
+ Hits        31420    31481      +61     
- Misses       5676     5678       +2     
- Partials      427      428       +1     

☔ View full report in Codecov by Harness.
📢 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.

[canova]

Thanks! I haven't reviewed the code yet, but posting some high level review after looking briefly to keep the conversation going:

Let's not add a --categories argument and directly output them all the time.
I think it came up a few times in the past before, so it's good to be on the same page. I see things like this when it comes to whether we want an argument or not:

• Are we changing a state that has a default: yes let's add as an arg (like the call tree strategy)
• Are we applying a filter: yes (like --limit or --search etc.)
• Are we adding an information that's otherwise not visible:
  • do we think it's useful in general: no, let's output it all the time
  • do we think it's not so useful in general: no, let's add as a sub command

The reason behind is that, arguments are less visible and it doesn't provide a lot of value. If we think it's important, we should just include it all the time. If we think it's not that important in general but can be useful for some cases only, we can add as a sub command.
Let me know what you think!

[fatadel]

Thanks! I haven't reviewed the code yet, but posting some high level review after looking briefly to keep the conversation going:

Let's not add a --categories argument and directly output them all the time. I think it came up a few times in the past before, so it's good to be on the same page. I see things like this when it comes to whether we want an argument or not:

* Are we changing a state that has a default: yes let's add as an arg (like the call tree strategy)

* Are we applying a filter: yes (like `--limit` or `--search` etc.)

* Are we adding an information that's otherwise not visible:
  
  * do we think it's useful in general: no, let's output it all the time
  * do we think it's not so useful in general: no, let's add as a sub command

The reason behind is that, arguments are less visible and it doesn't provide a lot of value. If we think it's important, we should just include it all the time. If we think it's not that important in general but can be useful for some cases only, we can add as a sub command. Let me know what you think!

I agree with the reasoning, I just think we need to put that knowledge from your head into some project docs :)