Branch: refs/heads/main
Home: https://github.com/WebKit/WebKit
Commit: 2b2c81c579408863dfd8fe19d91dc4bfba822fd5
https://github.com/WebKit/WebKit/commit/2b2c81c579408863dfd8fe19d91dc4bfba822fd5
Author: Razvan Caliman <[email protected]>
Date: 2026-03-10 (Tue, 10 Mar 2026)
Changed paths:
M Source/WebInspectorUI/UserInterface/Views/FormattedValue.css
Log Message:
-----------
Web Inspector: Sources: White color on light background for selected DOM node
key in a Map in the Scope Chain sidebar
https://bugs.webkit.org/show_bug.cgi?id=309569
rdar://171840122
Reviewed by Simon Fraser.
The selected node of a DOM tree outline has white text that's supposed to
contrast
with the accent color (usually blue) of the `.selection-area` element that's
used as a backdrop.
The `.selection-area` element has a `z-index: -1` so that it appears behind the
tree element content.
In the Elements tab, `.tree-outline.dom` is a top-level element. There's no
ancestor with creating
a stacking context above it. The `z-index: -1` element renders behind the tree
content but is still
visible because there's nothing opaque behind it in the same stacking context.
But in the Scope Chain sidebar, the `.tree-outline.dom` is nested inside a
`.tree-outline.object li`
which has `overflow: hidden` that creates a new stacking context. In this case,
the `.selection-area` element
gets painted behind the stacking context root (the `.tree-outline.object li`),
which has an opaque background
from the sidebar panel.
This patch creates a new stacking context for the `.formatted-node` element
to scope the `z-index: -1` to it instead of the ancestor.
This difference of paint behavior is evident when using `WI.FormattedValue`
with DOM nodes in the Console,
where the backdrop is visible, compared to the use in the Scope Sidebar nested
within a `WI.ObjectTreeView`
which wraps a `WI.TreeOutline`.
* Source/WebInspectorUI/UserInterface/Views/FormattedValue.css:
(.formatted-node):
Canonical link: https://commits.webkit.org/309006@main
To unsubscribe from these emails, change your notification settings at
https://github.com/WebKit/WebKit/settings/notifications
