Bug 203057 - Web Inspector: Elements: selection shouldn't be dimmed by shadow trees
Summary: Web Inspector: Elements: selection shouldn't be dimmed by shadow trees
Status: RESOLVED FIXED
Alias: None
Product: WebKit
Classification: Unclassified
Component: Web Inspector (show other bugs)
Version: WebKit Nightly Build
Hardware: All All
: P2 Normal
Assignee: Devin Rousso
URL:
Keywords: InRadar
Depends on:
Blocks: 203158
  Show dependency tree / graph
 
Reported: 2019-10-16 15:10 PDT by Devin Rousso
Modified: 2020-06-16 16:47 PDT (History)
6 users (show)

See Also:

Attachments
[Image] Screenshot of Issue (774.35 KB, image/png)
2019-10-16 15:10 PDT, Devin Rousso 		no flags Details
Patch (1.91 KB, patch)
2019-10-16 15:24 PDT, Devin Rousso 		no flags Details | Formatted Diff | Diff
View All Add an attachment (proposed patch, testcase, etc.)

Note You need to log in before you can comment on or make changes to this bug.
Description Devin Rousso 2019-10-16 15:10:53 PDT 
Created attachment 381120 [details]
[Image] Screenshot of Issue

# STEPS TO REPRODUCE:
1. inspect any page with a shadow tree
2. select a node in the Elements Tab inside a shadow tree
 => the blue selection area is colored by the grey background color of the shadow tree
Comment 1 Devin Rousso 2019-10-16 15:24:30 PDT 
Created attachment 381122 [details]
Patch
Comment 2 Joseph Pecoraro 2019-10-17 11:49:44 PDT 
Comment on attachment 381122 [details]
Patch

rs=me
Comment 3 WebKit Commit Bot 2019-10-17 13:21:27 PDT 
Comment on attachment 381122 [details]
Patch

Clearing flags on attachment: 381122

Committed r251254: <https://trac.webkit.org/changeset/251254>
Comment 4 WebKit Commit Bot 2019-10-17 13:21:28 PDT 
All reviewed patches have been landed.  Closing bug.
Comment 5 Radar WebKit Bug Importer 2019-10-17 13:22:20 PDT 
<rdar://problem/56382732>
Comment 6 Nikita Vasilyev 2020-06-16 15:37:14 PDT 
(In reply to Devin Rousso from comment #0)
> Created attachment 381120 [details]
> [Image] Screenshot of Issue
> 
> # STEPS TO REPRODUCE:
> 1. inspect any page with a shadow tree

When does shadow DOM look like this? I've been looking real-world example to understand the broader picture. YouTube.com, for instance, uses Web Components but it has barely any Shadow content nested like this.

I'm not convinced semi-transparent background of *each* shadow content is the way best way to display this.
Comment 7 Devin Rousso 2020-06-16 16:47:37 PDT 
One example is <https://perf.webkit.org/v3/#/analysis/task/2>.

If you have an alternate design/visualization, I'm all ears :)