Bug 192118 – Web Inspector: Elements: selecting more than one DOM node causes the scope highlight to contrast

• Component: Web Inspector
• Status: RESOLVED FIXED

[Devin Rousso]

Created attachment 355932 [details]
[Image] Screenshot of Issue

.

[Radar WebKit Bug Importer]

<rdar://problem/46325664>

[Matt Baker]

The vertical border color depends on whether the expanded parent <li> is selected, or just hovered. From DOMTreeOutline.css:

113: .tree-outline.dom li:matches(.hovered, .selected) + ol.children.expanded {
114:     border: 0 solid hsla(0, 0%, 83%, 0.5);
115: }
...
129: .tree-outline.dom li.selected + ol.children.expanded {
130:     border-color: hsl(0, 0%, 83%);
131: }

Now that multiple items can be selected, it is possible for the opaque border color to be used while a child item is selected.

[Matt Baker]

Created attachment 355942 [details]
[Image] before and after

The original "selected" border color can be replicated using a darker shade of gray, with alpha = 0.5.

Side-by-side the alpha blended color is nearly identical. Blending with the hovered child is slightly different, but very subtle.

[Matt Baker]

Created attachment 355943 [details]
Patch

[Devin Rousso]

Comment on attachment 355943 [details]
Patch

r=me, nice!  Looks great :)

In dark mode, it looks like the current color makes it look pretty awful:

    .tree-outline.dom li.selected + ol.children.expanded {
        border-color: hsl(0, 0%, 27%);
    }

I think we should just remove it.  The value you added in this patch looks fine in dark mode too 😃

[Matt Baker]

Created attachment 356009 [details]
Patch for landing

[WebKit Commit Bot]

Comment on attachment 356009 [details]
Patch for landing

Clearing flags on attachment: 356009

Committed r238671: <https://trac.webkit.org/changeset/238671>

[WebKit Commit Bot]

All reviewed patches have been landed.  Closing bug.