Bug 192118

Summary: Web Inspector: Elements: selecting more than one DOM node causes the scope highlight to contrast
Product: WebKit Reporter: Devin Rousso <hi>
Component: Web InspectorAssignee: Matt Baker <mattbaker>
Status: RESOLVED FIXED    
Severity: Normal CC: commit-queue, hi, inspector-bugzilla-changes, mattbaker, webkit-bug-importer
Priority: P3 Keywords: InRadar
Version: WebKit Nightly Build   
Hardware: All   
OS: All   
URL: https://devinrousso.com/demo/WebKit/test.html
Bug Depends on: 192059    
Bug Blocks:    
Attachments:
Description Flags
[Image] Screenshot of Issue
none
[Image] before and after
none
Patch
none
Patch for landing none

Devin Rousso
Reported 2018-11-28 15:35:33 PST
Created attachment 355932 [details] [Image] Screenshot of Issue .
Attachments
[Image] Screenshot of Issue (141.24 KB, image/png)
2018-11-28 15:35 PST, Devin Rousso 		no flags
Details
[Image] before and after (189.73 KB, image/png)
2018-11-28 16:36 PST, Matt Baker 		no flags
Details
Patch (1.54 KB, patch)
2018-11-28 16:40 PST, Matt Baker 		no flags
DetailsFormatted DiffDiff
Patch for landing (1.90 KB, patch)
2018-11-29 09:11 PST, Matt Baker 		no flags
DetailsFormatted DiffDiff
Show Obsolete (1) View All Add attachment proposed patch, testcase, etc.
Radar WebKit Bug Importer
Comment 1 2018-11-28 16:13:50 PST
<rdar://problem/46325664>
Matt Baker
Comment 2 2018-11-28 16:19:45 PST
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
Comment 3 2018-11-28 16:36:58 PST
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
Comment 4 2018-11-28 16:40:14 PST
Created attachment 355943 [details] Patch
Devin Rousso
Comment 5 2018-11-28 16:48:47 PST
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
Comment 6 2018-11-29 09:11:57 PST
Created attachment 356009 [details] Patch for landing
WebKit Commit Bot
Comment 7 2018-11-29 09:50:31 PST
Comment on attachment 356009 [details] Patch for landing Clearing flags on attachment: 356009 Committed r238671: <https://trac.webkit.org/changeset/238671>
WebKit Commit Bot
Comment 8 2018-11-29 09:50:33 PST
All reviewed patches have been landed. Closing bug.
Note You need to log in before you can comment on or make changes to this bug.