firefox-devtools · fatadel · Jan 30, 2026 · Jan 30, 2026 · Jan 30, 2026 · Jan 30, 2026
diff --git a/res/css/global.css b/res/css/global.css
@@ -3,6 +3,37 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 :root {
+  /* =====================
+   * Z-index scale
+   * ===================== */
+  --z-tab-selected: 1;
+  --z-warning: 4;
+  --z-root: 0;
+  --z-bottom-box: 1;
+  --z-serviceworker-notice: 4;
+  --z-arrow-panel: 5;
+  --z-copy-table-warning: 4;
+  --z-tree-view: 0;
+  --z-tree-view-inner: 2;
+  --z-overflow-edge-indicator: 3;
+  --z-chart-viewport-expanded: 1;
+  --z-timeline-selection: 1;
+  --z-timeline-selection-overlay: 2;
+  --z-timeline-selection-overlay-time: 1;
+  --z-timeline-selection-grippy: 3;
+  --z-timeline-track-local: 3;
+  --z-timeline-track-thread: 1;
+  --z-timeline-track-screenshot: 4; /* should be higher than any other timeline element */
+  --z-keyboard-shortcuts: 11; /* should be highest possible value */
+  --z-context-menu: 5; /* should be higher than --z-overflow-edge-indicator and --z-timeline-track-screenshot */
+  --z-panel-search: 1;
+  --z-panel-search-introduction: -1;
+  --z-timeline-header: 1;
+  --z-tracks-container: 0; /* should be below --z-timeline-header */
+
+  /* =====================
+   * Colors & theming
+   * ===================== */
   --base-foreground-color: #000;
   --base-background-color: #fff;
   --base-border-color: var(--grey-30);

diff --git a/src/components/app/BottomBox.css b/src/components/app/BottomBox.css
@@ -33,7 +33,7 @@
 /* Provide 3px extra grabbable surface on each side of the splitter */
 .bottom-box .layout-splitter::before {
   position: absolute;
-  z-index: 1;
+  z-index: var(--z-bottom-box);
   display: block;
   content: '';
   inset: 0 -3px;

diff --git a/src/components/app/KeyboardShortcut.css b/src/components/app/KeyboardShortcut.css
@@ -8,6 +8,7 @@
   --internal-shadow-color: rgb(0 0 0 / 0.4);
 
   position: absolute;
+  z-index: var(--z-keyboard-shortcuts);
   top: 0;
   left: 0;
   display: none;

diff --git a/src/components/app/ProfileViewer.css b/src/components/app/ProfileViewer.css
@@ -110,11 +110,11 @@
 }
 
 .profileViewerSplitter {
-  /* Create a stacking context, so that the KeyboardShortcut can overlay the profile
-     viewer. In addition, the built-in class uses position: absolute, which is not
-     appropriate here. */
+  /* Position relative for layout. Don't set z-index here to avoid creating a
+     stacking context that would trap the context menu below the screenshot hover.
+     This allows both the screenshot hover and context menu to be compared
+     at the .profileViewer level, ensuring the context menu appears on top. */
   position: relative;
-  z-index: 0;
 }
 
 .profileViewerSplitter > .layout-pane:not(.layout-pane-primary) {

diff --git a/src/components/app/ProfileViewer.tsx b/src/components/app/ProfileViewer.tsx
@@ -103,7 +103,6 @@ class ProfileViewerImpl extends PureComponent<Props> {
                 } as React.CSSProperties)
           }
         >
-          <div id="screenshot-hover"></div>
           <div className="profileViewerTopBar">
             {hasZipFile ? (
               <button
@@ -153,6 +152,7 @@ class ProfileViewerImpl extends PureComponent<Props> {
               {isBottomBoxOpen ? <BottomBox /> : null}
             </SplitterLayout>
           </SplitterLayout>
+          <div id="screenshot-hover"></div>
           <SymbolicationStatusOverlay />
           <BeforeUnloadManager />
           <DebugWarning />

diff --git a/src/components/app/Root.css b/src/components/app/Root.css
@@ -3,7 +3,7 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 #root {
-  z-index: 0;
+  z-index: var(--z-root);
   display: flex;
   min-width: 0; /* This allows Flexible Layout to shrink this further than its min-content */
   flex: 1;

diff --git a/src/components/app/ServiceWorkerManager.css b/src/components/app/ServiceWorkerManager.css
@@ -5,7 +5,7 @@
 .serviceworker-ready-notice-wrapper {
   /* Position */
   position: fixed;
-  z-index: 4;
+  z-index: var(--z-serviceworker-notice);
   top: 0;
   right: 0;
   left: 0;

diff --git a/src/components/app/TabBar.css b/src/components/app/TabBar.css
@@ -94,7 +94,7 @@
 }
 
 .tabBarTab.selected {
-  z-index: 1;
+  z-index: var(--z-tab-selected);
   padding: 6px 4px;
   border-color: var(--base-border-color);
   margin: 0 -0.5px; /* No bottom margin, so that this tab covers the .Details-top-bar bottom border. */

diff --git a/src/components/shared/ButtonWithPanel/ArrowPanel.css b/src/components/shared/ButtonWithPanel/ArrowPanel.css
@@ -4,7 +4,7 @@
 
 .arrowPanelAnchor {
   position: absolute;
-  z-index: 5;
+  z-index: var(--z-arrow-panel);
   top: 75%;
   left: 50%;
 }

diff --git a/src/components/shared/ContextMenu.css b/src/components/shared/ContextMenu.css
@@ -13,7 +13,7 @@
   --internal-selected-disabled-background-color: var(--blue-50-a30);
   --internal-highlight-foreground-color: var(--grey-70);
 
-  z-index: 4; /* needs to be on a higher level than .overflowEdgeIndicatorEdge */
+  z-index: var(--z-context-menu);
   display: none;
   min-width: 160px;
   max-width: 600px;

diff --git a/src/components/shared/MarkerSettings.css b/src/components/shared/MarkerSettings.css
@@ -66,7 +66,7 @@
 .copyTableButtonWarningWrapper {
   /* Position */
   position: fixed;
-  z-index: 4;
+  z-index: var(--z-copy-table-warning);
   top: 0;
   right: 0;
   left: 0;

diff --git a/src/components/shared/PanelSearch.css b/src/components/shared/PanelSearch.css
@@ -1,7 +1,7 @@
 .panelSearchField {
   /* so that the introduction is on top of other panels, _but_ still keep it
    * below the input field (see below) */
-  z-index: 1;
+  z-index: var(--z-panel-search);
   padding: 0 4px;
 }
 
@@ -24,7 +24,10 @@
   /* This is grey-90 with 10% opacity, according to the photon design document */
   --internal-shadow-color: rgb(12 12 13 / 0.1);
 
-  z-index: -1; /* it needs to be below the input field */
+  z-index: var(
+    --z-panel-search-introduction
+  ); /* it needs to be below the input field */
+
   padding: 0 4px;
   background-color: var(--base-background-color);
   box-shadow: 0 1px 4px var(--internal-shadow-color);

diff --git a/src/components/shared/TreeView.css b/src/components/shared/TreeView.css
@@ -76,7 +76,7 @@
 
 .treeViewBody {
   position: relative;
-  z-index: 0;
+  z-index: var(--z-tree-view);
   overflow: auto;
   flex: 1;
   background-color: var(--base-background-color);
@@ -96,7 +96,7 @@
 
 .treeViewBodyInner0 {
   position: sticky;
-  z-index: 2;
+  z-index: var(--z-tree-view-inner);
   left: 0;
 }
 

diff --git a/src/components/shared/Warning.css b/src/components/shared/Warning.css
@@ -5,7 +5,7 @@
 .warningMessageBarWrapper {
   /* Position */
   position: fixed;
-  z-index: 4;
+  z-index: var(--z-warning);
   top: 0;
   right: 0;
   left: 0;

diff --git a/src/components/shared/chart/Viewport.css b/src/components/shared/chart/Viewport.css
@@ -21,7 +21,7 @@
   --internal-shadow-color: rgb(64 115 140 / 0.2);
 
   position: absolute;
-  z-index: 1;
+  z-index: var(--z-chart-viewport-expanded);
   top: 0;
   left: 0;
   width: 100%;

diff --git a/src/components/timeline/OverflowEdgeIndicator.css b/src/components/timeline/OverflowEdgeIndicator.css
@@ -14,7 +14,7 @@
   --internal-shadow-color: rgb(0 0 0 / 0.4);
 
   position: absolute;
-  z-index: 3;
+  z-index: var(--z-overflow-edge-indicator);
   opacity: 0;
   pointer-events: none;
   transition: 150ms ease-in-out;

diff --git a/src/components/timeline/Selection.css b/src/components/timeline/Selection.css
@@ -54,7 +54,7 @@
 
 .timelineSelectionHoverLine {
   position: absolute;
-  z-index: 1;
+  z-index: var(--z-timeline-selection);
   top: 0;
   bottom: 0;
   width: 1px;
@@ -64,7 +64,7 @@
 
 .timelineSelectionOverlayTime {
   position: absolute;
-  z-index: 1;
+  z-index: var(--z-timeline-selection-overlay-time);
   padding: 3.25px 8px;
   border-radius: 0 4px 4px 0;
   margin-left: 1px;
@@ -74,7 +74,7 @@
 
 .timelineSelectionOverlay {
   position: absolute;
-  z-index: 2;
+  z-index: var(--z-timeline-selection-overlay);
   display: flex;
   overflow: hidden;
   flex-flow: row nowrap;
@@ -110,7 +110,7 @@
 .timelineSelectionGrippyRangeStart,
 .timelineSelectionGrippyRangeEnd {
   position: relative;
-  z-index: 3;
+  z-index: var(--z-timeline-selection-grippy);
   width: 0;
   padding: 3px;
   border: 1px solid var(--grippy-range-border-color);

diff --git a/src/components/timeline/Track.css b/src/components/timeline/Track.css
@@ -171,9 +171,7 @@
  */
 .timelineTrackLocalTracks::before {
   position: absolute;
-
-  /* Place it above the Reorderable component, which has a z-index of 2. */
-  z-index: 3;
+  z-index: var(--z-timeline-track-local);
   left: -15px;
   width: calc(100% + 15px);
   height: 100%;

diff --git a/src/components/timeline/TrackScreenshots.css b/src/components/timeline/TrackScreenshots.css
@@ -41,7 +41,7 @@
 .timelineTrackScreenshotHover {
   /* This positioning is defined through JavaScript */
   position: absolute;
-  z-index: 4; /* Ensure this is higher than any other timeline element. */
+  z-index: var(--z-timeline-track-screenshot);
   pointer-events: none;
 }
 

diff --git a/src/components/timeline/TrackThread.css b/src/components/timeline/TrackThread.css
@@ -4,7 +4,7 @@
 
 .timelineTrackThread {
   position: relative;
-  z-index: 1;
+  z-index: var(--z-timeline-track-thread);
   display: flex;
   flex: 1;
   flex-flow: column nowrap;

diff --git a/src/components/timeline/index.css b/src/components/timeline/index.css
@@ -99,7 +99,7 @@
 .timelineHeader {
   /* This should be on top of the overflow edge indicator that wraps the thread
    list, so border bottom will always be visible. */
-  z-index: 1;
+  z-index: var(--z-timeline-header);
   display: flex;
   height: 20px;
   flex-direction: row;
@@ -120,8 +120,7 @@
 }
 
 .tracksContainer {
-  /* This should be below the timeline header. */
-  z-index: 0;
+  z-index: var(--z-tracks-container);
 
   /* Moving the timeline 1 pixel below the timeline header. This way, the first
    * visible track's top border will be hidden as expected. */