Skip to content

Fix arrow panel appearing behind marker tooltips - #5926

Merged
fatadel merged 2 commits into
firefox-devtools:mainfrom
fatadel:fix-z-index-5913
Apr 2, 2026
Merged

Fix arrow panel appearing behind marker tooltips#5926
fatadel merged 2 commits into
firefox-devtools:mainfrom
fatadel:fix-z-index-5913

Conversation

@fatadel

@fatadelfatadel commented Apr 1, 2026

Copy link
Copy Markdown
Contributor

Fixes#5913.

Tooltips are rendered via portal into #root-overlay, which is a sibling of #root. Two stacking contexts were trapping the arrow panel inside #root, preventing it from competing with tooltips:

  • #root had z-index: 0, creating a stacking context (it's a flex item)
  • .dragAndDropArea had isolation: isolate

This PR removes both so the arrow panel's z-index: 5 reaches the body stacking context. It also adds z-index: 4 to tooltips so they remain above regular content but below arrow panels and context menus (z-index: 5).


I know that removing z-index from the root may seem quite a significant change that can cause regressions. However, I don't see other solutions to this issue apart from a JS-based one by adding a portal to render the arrow panel inside #root-overlay but that seems overly complex and unnecessary to me.

My monkey testing didn't reveal any visual regressions, and Claude also claims there shouldn't be any.

Profile before / Profile after

 Tooltips are rendered via portal into #root-overlay, which is a sibling
of #root. Two stacking contexts were trapping the arrow panel inside
#root, preventing it from competing with tooltips:
- #root had z-index: 0, creating a stacking context (it's a flex item)
- .dragAndDropArea had isolation: isolate
Remove both so the arrow panel's z-index: 5 reaches the body stacking
context. Add z-index: 4 to tooltips so they remain above regular content
but below arrow panels and context menus (z-index: 5).
@fatadel
fatadel requested review from canova and mstangeApril 1, 2026 11:44
@codecov

codecovBot commented Apr 1, 2026

Copy link
Copy Markdown

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 85.41%. Comparing base (b8aabaa) to head (92dff0c).
⚠️ Report is 3 commits behind head on main.

Additional details and impacted files
@@ Coverage Diff @@## main #5926 +/- ##
=======================================
Coverage 85.41% 85.41% =======================================
Files 321 321 Lines 32158 32158 Branches 8876 8782 -94 =======================================
Hits 27469 27469 Misses 4253 4253 Partials 436 436 

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

@canovacanova 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.

Nice, thanks!

@fatadel
fatadel enabled auto-merge (squash) April 2, 2026 10:03
@fatadel
fatadel merged commit 634b4b9 into firefox-devtools:mainApr 2, 2026
19 checks passed
@fatadel
fatadel deleted the fix-z-index-5913 branch April 2, 2026 10:03
@fatadelfatadel mentioned this pull request Apr 28, 2026
fatadel added a commit that referenced this pull request Apr 28, 2026
Changes:
[Nazım Can Altınova] Add Adel to the automatic dependency reviews
(#5930)
[fatadel] Fix arrow panel appearing behind marker tooltips (#5926)
[fatadel] Upgrade Node.js from v22 to v24 (#5923)
[Markus Stange] Use createStackTableBySkippingDiscarded in focusSelf.
(#5916)
[Markus Stange] Propagate isJS to symbolicated funcs (#5907)
[Markus Stange] Always render the CPU-usage-aware activity graph when
CPU information is available (#5918)
[Nazım Can Altınova] Fallback to javascript highlighting in the source
view as a backup (#5936)
[Nazım Can Altınova] Properly type the return value of
_languageExtForPath (#5937)
[Nazım Can Altınova] Update typescript eslint dependencies (#5938)
[Markus Stange] Modernize more of the transform functions (#5934)
[Paul Adenot] Fix extractGeckoLogs for structured Log marker format (bug
2022540) (#5927)
[Nazım Can Altınova] Move some profile fetching code into a separate
module. (#5939)
[Markus Stange] Update the hovered item when panning any viewport canvas
(#5903)
[Markus Stange] Migrate Home page animation to CSS transitions and
remove react-transition-group (#5649)
[Nazım Can Altınova] Fix test/lint commands on Windows and fix CI
(#5947)
[Nazım Can Altınova] Convert profile-logic/js-tracer.tsx to a ts file
(#5942)
[Markus Stange] Remove panelLayoutGeneration (#5946)
[fatadel] Add CounterDisplayConfig to counters in the processed profile
format (#5912)
[Nazım Can Altınova] Fix eslint-config-prettier silently overriding
custom rules (#5955)
[fatadel] Dim non-matching nodes in the stack chart when searching
(#5935)
[Nazım Can Altınova] Fix loading .json.gz profiles from inside zip
archives (#5959)
[Ryan Hunt] Add a fullscreen button to the bottom box (#5605)
[Markus Stange] Speed up _computeCallNodeTableHierarchy by keeping
siblings ordered by func (#5964)
[Markus Stange] Replace symbolicator-cli with a profiler-edit node tool
(#5965)
[Nazım Can Altınova] Add "Include idle samples" toggle to the call tree
settings (#5968)
[Nazım Can Altınova] Add dark mode versions of the fullscreen icons
(#5972)
[fatadel] Replace 4 counter track components with a single generic
TrackCounter (#5944)
[fatadel] Use ephemeral port for esbuild's internal dev server (#5974)
[carverdamien] Remove category from LongTaskMarkerPayload (#5975)
And special thanks to our localizers:
de: Ger de: Michael Köhler el: Jim Spentzos en-GB: Ian Neal es-CL: ravmn fr: Théo Chevalier ia: Melo46 it: Francesco Lodolo [:flod] nl: Mark Heijl pt-BR: Marcelo Ghelman ru: Valery Ledovskoy ru: berry sv-SE: Andreas Pettersson tr: Grk zh-CN: Olvcpr423 zh-CN: wxie zh-TW: Pin-guang Chen
Sign up for freeto 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.

Marker tooltips appear on top of the profile share popup

2 participants

@fatadel@canova