Skip to content

Fix context menu and hover preview z-index#5797

Merged
fatadel merged 3 commits intofirefox-devtools:mainfrom
fatadel:z-index-5513
Jan 30, 2026
Merged

Fix context menu and hover preview z-index#5797
fatadel merged 3 commits intofirefox-devtools:mainfrom
fatadel:z-index-5513

Conversation

@fatadel
Copy link
Contributor

@fatadel fatadel commented Jan 30, 2026

Closes #5513.

Problem: the screenshot hover preview appears above the context menu.
Reason: profile viewer introduces stacking context making it impossible to place hover preview / context menu in relevance to each other on the z axis. It was there to make KeyboardShortcut overlay the profile viewer.
Fix: the stacking context is removed. KeyboardShortcut got its own z-index value.

Before

image

Profile

After

image

Profile

Side effect 1

As a side effect, this issue I reported yesterday is also fixed now (see the screenshot below).

image

Side effect 2

Another side effect is that I've decided to consolidate the z-index values throughout the whole project. Now they are all in one place making it way easier to reason about them and to see what should be higher/lower than what.

@fatadel fatadel requested review from canova and mstange January 30, 2026 13:38
@codecov
Copy link

codecov bot commented Jan 30, 2026

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 85.65%. Comparing base (3717fbe) to head (c896241).
⚠️ Report is 2 commits behind head on main.

Additional details and impacted files
@@           Coverage Diff           @@
##             main    #5797   +/-   ##
=======================================
  Coverage   85.65%   85.65%           
=======================================
  Files         319      319           
  Lines       31339    31339           
  Branches     8634     8546   -88     
=======================================
  Hits        26842    26842           
  Misses       4066     4066           
  Partials      431      431           

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

Copy link
Contributor

@mstange mstange left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good, thanks!

Now that the profile viewer is no longer a stacking context, I hope we won't be running into things which accidentally interleave its contents. Generally I think I'd feel safer if we made more things z-order-atomic (rather than fewer things), but in this case it would mean we'd have to move the context menu somewhere outside in the DOM hierarchy first. So your solution is perfectly fine.

@fatadel fatadel merged commit 1e386d2 into firefox-devtools:main Jan 30, 2026
21 checks passed
@fatadel fatadel deleted the z-index-5513 branch January 30, 2026 18:49
@canova canova mentioned this pull request Feb 4, 2026
canova added a commit that referenced this pull request Feb 4, 2026
Changes:

[Nazım Can Altınova] Make the range duration text white again (#5792)
[Alex Thayer] Display traced values in Stack Chart view (#5363)
[Nazım Can Altınova] Improve the JS traced arguments visualization in
call node tooltips (#5795)
[Markus Stange] Make the argument-values.json profile fixture go through
profile upgrading (#5796)
[Markus Stange] Add thread.usedInnerWindowIDs to the processed profile
format (#5780)
[fatadel] Fix context menu and hover preview z-index (#5797)
[fatadel] add TrackPower--tooltip-power-microwatt (#5799)
[Markus Stange] Two small test fixes (#5801)
[fatadel] fix selected thread pid color in light mode (#5805)
[Markus Stange] Some fixes to the profile merging code (#5802)
[fatadel] fix disabled button color in dark mode (#5808)
[fatadel] add comment for uptime label translation (#5806)
[Nazım Can Altınova] Add a theme toggle to the home page and follow the
system theme by default (#5800)
[Nazım Can Altınova] 🔃 Sync: l10n -> main (Feb 4, 2025) (#5813)

And huge thanks to our localizers:

de: Ger
de: Michael Köhler
de: Nazım Can Altınova
el: Jim Spentzos
en-GB: Ian Neal
es-CL: ravmn
fy-NL: Fjoerfoks
ia: Melo46
it: Francesco Lodolo [:flod]
nl: Mark Heijl
pt-BR: Marcelo Ghelman
ru: Valery Ledovskoy
sv-SE: Andreas Pettersson
tr: Selim Şumlu
zh-TW: Pin-guang Chen
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.

Adjust the context menu z-index relatively to the screenshot overlay

2 participants