Bug 157468 - Web Inspector: Add indicators to show nesting levels inside DOM Tree
Summary: Web Inspector: Add indicators to show nesting levels inside DOM Tree
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:
 
Reported: 2016-05-08 16:19 PDT by Devin Rousso
Modified: 2016-05-28 02:27 PDT (History)
8 users (show)

See Also:


Attachments
Patch (2.50 KB, patch)
2016-05-08 16:21 PDT, Devin Rousso
no flags Details | Formatted Diff | Diff
[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 Details | Formatted Diff | Diff
[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 Details | Formatted Diff | Diff
[IMAGE] After Patch is applied (39.14 KB, image/png)
2016-05-26 22:00 PDT, Devin Rousso
no flags Details

Note You need to log in before you can comment on or make changes to this bug.
Description Devin Rousso 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.
Comment 1 Radar WebKit Bug Importer 2016-05-08 16:19:14 PDT
<rdar://problem/26162640>
Comment 2 Devin Rousso 2016-05-08 16:21:20 PDT
Created attachment 278379 [details]
Patch
Comment 3 Devin Rousso 2016-05-08 16:21:55 PDT
Created attachment 278380 [details]
[IMAGE] After Patch is applied
Comment 4 Timothy Hatcher 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.
Comment 5 Devin Rousso 2016-05-09 21:30:01 PDT
Created attachment 278477 [details]
Patch
Comment 6 Timothy Hatcher 2016-05-10 09:56:16 PDT
Comment on attachment 278477 [details]
Patch

Screenshot?
Comment 7 Devin Rousso 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
Comment 8 BJ Burg 2016-05-11 21:11:26 PDT
The guidelines look too strong/saturated to me. Does that match the other guides in Call Trees?
Comment 9 Timothy Hatcher 2016-05-12 15:13:20 PDT
I agree. We should use the same style as Call Tress.
Comment 10 Timothy Hatcher 2016-05-12 15:13:40 PDT
Created attachment 278768 [details]
Call Trees
Comment 11 BJ Burg 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.
Comment 12 Devin Rousso 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?
Comment 13 Timothy Hatcher 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!
Comment 14 Devin Rousso 2016-05-26 21:59:44 PDT
Created attachment 279944 [details]
Patch
Comment 15 Devin Rousso 2016-05-26 22:00:03 PDT
Created attachment 279945 [details]
[IMAGE] After Patch is applied
Comment 16 WebKit Commit Bot 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>
Comment 17 WebKit Commit Bot 2016-05-27 11:32:52 PDT
All reviewed patches have been landed.  Closing bug.