Bug 151119 – Web Inspector: Add Breakpoints and Scripts folders to Debugger sidebar

• Component: Web Inspector
• Status: RESOLVED FIXED

[Matt Baker]

Created attachment 265232 [details]
[Image] Sidebar mockup

* SUMMARY.
Add Breakpoints and Scripts folders to Debugger sidebar. Now that scripts without breakpoints can be shown in the navigation sidebar, finding files with breakpoints on pages with a large number of scripts requires scrolling through a long list, or clicking "Show only resources with breakpoints".

I propose we add two new folders, "Breakpoints" and "Scripts". The folder order in the sidebar would be: Global Breakpoints, Breakpoints, Scripts.

See attached mockups.

[Radar WebKit Bug Importer]

<rdar://problem/23488916>

[Matt Baker]

Created attachment 265233 [details]
[Image] Sidebar mockup - filtered

With "Breakpoints Only" filter enabled

[Matt Baker]

Created attachment 265234 [details]
[Image] Sidebar mockup - filtered

[Nikita Vasilyev]

I was never a huge fan of Xcode-style "Show only the resources with Breakpoints" button in Web Inspector. I think, if we introduce "Breakpoints" folder, we should remove the button.

Alternatively, we could pull the resources with breakpoints to the top of the list and not introduce two additional folders.

[Timothy Hatcher]

I like the idea of sorting them to the top, and maybe add a divider.

[Matt Baker]

Created attachment 265236 [details]
[Image] Global breakpoints always visible

[Matt Baker]

(In reply to comment #5)
> I like the idea of sorting them to the top, and maybe add a divider.

I'll mock this up next

[Matt Baker]

Created attachment 265237 [details]
[Image] Debugger tab - no folders

I kind of like the clean look. The "Show breakpoints only" filter button might no longer be needed.

[Timothy Hatcher]

I like the no-folder look. I suppose we can drop the filter button now. That should help remove confusion when using the errors filter.

[Matt Baker]

Created attachment 266035 [details]
[Image] Sidebar with call stack/pause reason

[Nikita Vasilyev]

Would be nice to have this fixed. The "with breakpoints only" toggle has been removed and now it's hard to see, well, scripts with breakpoints.

[Joseph Pecoraro]

Do we have any WIP patches for this that might be progressed? We removed very useful filtering of the Debugger Sidebar for breakpoints (bug 151517) planning for this, but this never materialized. The Debugger Sidebar is overwhelming without some form of filtering. I agree this approach would be better then a filter, but currently we are left with neither.

[Matt Baker]

I have a patch that is nearly complete. Will get it posted by tonight.

[Matt Baker]

Created attachment 278351 [details]
[Patch] Proposed Fix

[Timothy Hatcher]

Comment on attachment 278351 [details]
[Patch] Proposed Fix

View in context: https://bugs.webkit.org/attachment.cgi?id=278351&action=review

> Source/WebInspectorUI/UserInterface/Views/DebuggerSidebarPanel.js:107
> +        this.filterBar.placeholder = WebInspector.UIString("Filter List");

Maybe Filter Sidebar. Not sure about List.

[WebKit Commit Bot]

Comment on attachment 278351 [details]
[Patch] Proposed Fix

Clearing flags on attachment: 278351

Committed r200566: <http://trac.webkit.org/changeset/200566>

[WebKit Commit Bot]

All reviewed patches have been landed.  Closing bug.