Skip to content

Make network markers in the network panel sticky on click#5884

Merged
fatadel merged 1 commit into
firefox-devtools:mainfrom
fatadel:sticky-markers-5751
Mar 19, 2026
Merged

Make network markers in the network panel sticky on click#5884
fatadel merged 1 commit into
firefox-devtools:mainfrom
fatadel:sticky-markers-5751

Conversation

@fatadel

@fatadel fatadel commented Mar 5, 2026

Copy link
Copy Markdown
Contributor

Closes #5751.

When clicking a marker in the Network panel, its tooltip is now persisted, matching the Marker Chart behavior.
This enables interaction with tooltip content like copying text or clicking the filter button.
The existing behavior of displaying the tooltip on hover is kept as well, but hover tooltips are suppressed while a sticky tooltip is active, to avoid obstruction.

  • Add click coordinate tracking to NetworkChartRow state for sticky tooltip positioning
  • Show filter button in both hover and sticky tooltips
  • Suppress hover tooltips on other rows while a sticky tooltip is active
  • Toggle selection off when re-clicking the same row
  • Dismiss sticky tooltip on Escape key
  • Add new tests covering the sticky tooltip related behavior

Before / After

@codecov

codecov Bot commented Mar 5, 2026

Copy link
Copy Markdown

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 85.46%. Comparing base (8cad8d9) to head (3ddf9d9).
⚠️ Report is 2 commits behind head on main.

Additional details and impacted files
@@            Coverage Diff             @@
##             main    #5884      +/-   ##
==========================================
+ Coverage   85.44%   85.46%   +0.01%     
==========================================
  Files         321      321              
  Lines       32050    32079      +29     
  Branches     8836     8841       +5     
==========================================
+ Hits        27385    27415      +30     
+ Misses       4233     4232       -1     
  Partials      432      432              

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

@fatadel fatadel requested review from canova and mstange and removed request for canova March 5, 2026 10:26
@fatadel fatadel force-pushed the sticky-markers-5751 branch from f9b12db to 1cc967a Compare March 5, 2026 13:59

@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!
It looks like when the network marker is sticky, we still see another tooltip on top of it, which obstructs the other one. Is it possible to make the other tooltips not visible when there is already a sticky tooltip?

See an example:
Image

I see that we already do this in the marker chart/table. So it might be good to have the same behavior

Show filter button only in sticky (clicked) tooltips

I'm a bit confused by this one. Can we make it visible all the time? This is the current behavior of marker chart too.

@fatadel fatadel force-pushed the sticky-markers-5751 branch from 1cc967a to df48629 Compare March 16, 2026 14:52
@fatadel

fatadel commented Mar 16, 2026

Copy link
Copy Markdown
Contributor Author

Hey @canova,

Thanks for the valuable feedback! I agree with all the points you've raised. I've now incorporated your feedback - could you pls have another look?

@fatadel fatadel requested a review from canova March 16, 2026 14:57

@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 but I have one more thing I would like to see fixed.

When I right click on a marker while I have a sticky tooltip, it shows both of them and they overlap with each other too:
Image

Can we hide the tooltip when there is context menu?

Comment thread src/components/network-chart/index.tsx
Comment thread src/components/network-chart/index.tsx Outdated
When clicking a marker in the Network panel, its tooltip is now persisted, matching the Marker Chart behavior.
This enables interaction with tooltip content like copying text or clicking the filter button.
The existing behavior of displaying the tooltip on hover is kept as well, but hover tooltips are suppressed while a sticky tooltip is active, to avoid obstruction.

- Add click coordinate tracking to NetworkChartRow state for sticky tooltip positioning
- Show filter button in both hover and sticky tooltips
- Suppress hover tooltips on other rows while a sticky tooltip is active
- Toggle selection off when re-clicking the same row
- Dismiss sticky tooltip on Escape key
- Add new tests covering the sticky tooltip related behavior
@fatadel fatadel force-pushed the sticky-markers-5751 branch from df48629 to 3ddf9d9 Compare March 19, 2026 08:21
@fatadel

fatadel commented Mar 19, 2026

Copy link
Copy Markdown
Contributor Author

Thanks for the feedback @canova! I have now addressed your points :)

@fatadel fatadel requested a review from canova March 19, 2026 08:24

@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, thanks!

@fatadel fatadel merged commit f258e8b into firefox-devtools:main Mar 19, 2026
21 checks passed
@fatadel fatadel deleted the sticky-markers-5751 branch March 19, 2026 11:32
@canova canova mentioned this pull request Mar 20, 2026
canova added a commit that referenced this pull request Mar 20, 2026
Changes:

[Markus Stange] Start using const enum (#5879)
[Markus Stange] Some performance improvements (#5878)
[Nazım Can Altınova] Add startLine, startColumn, sourceMapURL and rename
uuid to id in source table (#5882)
[Markus Stange] Reduce repetition in profile compacting code (#5885)
[Markus Stange] Some more activity graph drawing perf improvements
(#5886)
[fatadel] Make network markers in the network panel sticky on click
(#5884)
[Markus Stange] Improve SampleGraph and HeightGraph performance (#5897)
[Nazım Can Altınova] 🔃 Sync: l10n -> main (March 20, 2026) (#5899)

And special thanks to our localizers:

be: Andrei Mukamolau
el: Jim Spentzos
en-GB: Paul
es-CL: ravmn
ia: Melo46
sv-SE: Andreas Pettersson
tr: Nazım Can Altınova
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.

Make network markers in the network panel sticky on click

3 participants