RESOLVED FIXED 157468
Web Inspector: Add indicators to show nesting levels inside DOM Tree 
https://bugs.webkit.org/show_bug.cgi?id=157468
Summary Web Inspector: Add indicators to show nesting levels inside DOM Tree
Devin Rousso
Reported 2016-05-08 16:19:00 PDT
In Sublime Text, any code block is marked with a dotted line where each parent block's indentation begins and ends. I think that this could be really useful for looking at what elements are siblings/parents in the DOM Tree.
Attachments
Patch (2.50 KB, patch)
2016-05-08 16:21 PDT, Devin Rousso 		no flags
DetailsFormatted DiffDiff
[IMAGE] After Patch is applied (143.76 KB, image/png)
2016-05-08 16:21 PDT, Devin Rousso 		no flags
Details
Patch (2.64 KB, patch)
2016-05-09 21:30 PDT, Devin Rousso 		no flags
DetailsFormatted DiffDiff
[IMAGE] After Patch is applied (142.39 KB, image/png)
2016-05-10 10:03 PDT, Devin Rousso 		no flags
Details
Call Trees (487.07 KB, image/png)
2016-05-12 15:13 PDT, Timothy Hatcher 		no flags
Details
Patch (2.66 KB, patch)
2016-05-26 21:59 PDT, Devin Rousso 		no flags
DetailsFormatted DiffDiff
[IMAGE] After Patch is applied (39.14 KB, image/png)
2016-05-26 22:00 PDT, Devin Rousso 		no flags
Details
Show Obsolete (4) View All Add attachment proposed patch, testcase, etc.
Radar WebKit Bug Importer
Comment 1 2016-05-08 16:19:14 PDT
<rdar://problem/26162640>
Devin Rousso
Comment 2 2016-05-08 16:21:20 PDT
Created attachment 278379 [details] Patch
Devin Rousso
Comment 3 2016-05-08 16:21:55 PDT
Created attachment 278380 [details] [IMAGE] After Patch is applied
Timothy Hatcher
Comment 4 2016-05-09 07:37:45 PDT
We also do this in the Call Trees timeline view. If we do it in the DOM tree, we should match that UI. In Call Trees, we only show the guide for the selected and/or hovered rows. I think showing it for every rows is counter productive.
Devin Rousso
Comment 5 2016-05-09 21:30:01 PDT
Created attachment 278477 [details] Patch
Timothy Hatcher
Comment 6 2016-05-10 09:56:16 PDT
Comment on attachment 278477 [details] Patch Screenshot?
Devin Rousso
Comment 7 2016-05-10 10:03:17 PDT
Created attachment 278505 [details] [IMAGE] After Patch is applied Heh sorry. Made the screenshot and forgot to upload it :P
Blaze Burg
Comment 8 2016-05-11 21:11:26 PDT
The guidelines look too strong/saturated to me. Does that match the other guides in Call Trees?
Timothy Hatcher
Comment 9 2016-05-12 15:13:20 PDT
I agree. We should use the same style as Call Tress.
Timothy Hatcher
Comment 10 2016-05-12 15:13:40 PDT
Created attachment 278768 [details] Call Trees
Blaze Burg
Comment 11 2016-05-16 10:09:15 PDT
Comment on attachment 278477 [details] Patch Please tweak the styles (at least hue and saturation) to match Call Trees, as in Tim's attachment.
Devin Rousso
Comment 12 2016-05-23 22:18:52 PDT
So I'd like to finish this up, but for some reason I can't inspect the inspector anymore. Do I need to enable some other flag or something else?
Timothy Hatcher
Comment 13 2016-05-24 09:59:18 PDT
(In reply to comment #12) > So I'd like to finish this up, but for some reason I can't inspect the > inspector anymore. Do I need to enable some other flag or something else? The current defaults at at: http://trac.webkit.org/wiki/WebInspectorDebugging Thanks!
Devin Rousso
Comment 14 2016-05-26 21:59:44 PDT
Created attachment 279944 [details] Patch
Devin Rousso
Comment 15 2016-05-26 22:00:03 PDT
Created attachment 279945 [details] [IMAGE] After Patch is applied
WebKit Commit Bot
Comment 16 2016-05-27 11:32:47 PDT
Comment on attachment 279944 [details] Patch Clearing flags on attachment: 279944 Committed r201454: <http://trac.webkit.org/changeset/201454>
WebKit Commit Bot
Comment 17 2016-05-27 11:32:52 PDT
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.