Bug 151119 - Web Inspector: Add Breakpoints and Scripts folders to Debugger sidebar
Summary: Web Inspector: Add Breakpoints and Scripts folders to Debugger sidebar
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: Matt Baker
URL:
Keywords: InRadar
Depends on: 151517
Blocks:
  Show dependency treegraph
 
Reported: 2015-11-10 14:40 PST by Matt Baker
Modified: 2016-05-08 16:57 PDT (History)
8 users (show)

See Also:


Attachments
[Image] Sidebar mockup (136.32 KB, image/png)
2015-11-10 14:40 PST, Matt Baker
no flags Details
[Image] Sidebar mockup - filtered (136.32 KB, image/png)
2015-11-10 14:40 PST, Matt Baker
no flags Details
[Image] Sidebar mockup - filtered (74.58 KB, image/png)
2015-11-10 14:42 PST, Matt Baker
no flags Details
[Image] Global breakpoints always visible (131.49 KB, image/png)
2015-11-10 15:15 PST, Matt Baker
no flags Details
[Image] Debugger tab - no folders (456.34 KB, image/png)
2015-11-10 15:31 PST, Matt Baker
no flags Details
[Image] Sidebar with call stack/pause reason (407.92 KB, image/png)
2015-11-21 17:53 PST, Matt Baker
no flags Details
[Patch] Proposed Fix (14.99 KB, patch)
2016-05-07 22:10 PDT, Matt Baker
no flags Details | Formatted Diff | Diff

Note You need to log in before you can comment on or make changes to this bug.
Description Matt Baker 2015-11-10 14:40:03 PST
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.
Comment 1 Radar WebKit Bug Importer 2015-11-10 14:40:56 PST
<rdar://problem/23488916>
Comment 2 Matt Baker 2015-11-10 14:40:58 PST
Created attachment 265233 [details]
[Image] Sidebar mockup - filtered

With "Breakpoints Only" filter enabled
Comment 3 Matt Baker 2015-11-10 14:42:09 PST
Created attachment 265234 [details]
[Image] Sidebar mockup - filtered
Comment 4 Nikita Vasilyev 2015-11-10 14:51:16 PST
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.
Comment 5 Timothy Hatcher 2015-11-10 14:55:31 PST
I like the idea of sorting them to the top, and maybe add a divider.
Comment 6 Matt Baker 2015-11-10 15:15:03 PST
Created attachment 265236 [details]
[Image] Global breakpoints always visible
Comment 7 Matt Baker 2015-11-10 15:15:23 PST
(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
Comment 8 Matt Baker 2015-11-10 15:31:36 PST
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.
Comment 9 Timothy Hatcher 2015-11-17 16:50:41 PST
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.
Comment 10 Matt Baker 2015-11-21 17:53:29 PST
Created attachment 266035 [details]
[Image] Sidebar with call stack/pause reason
Comment 11 Nikita Vasilyev 2015-12-10 20:31:37 PST
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.
Comment 12 Joseph Pecoraro 2016-04-29 15:07:20 PDT
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.
Comment 13 Matt Baker 2016-04-29 15:36:51 PDT
I have a patch that is nearly complete. Will get it posted by tonight.
Comment 14 Matt Baker 2016-05-07 22:10:22 PDT
Created attachment 278351 [details]
[Patch] Proposed Fix
Comment 15 Timothy Hatcher 2016-05-08 16:35:23 PDT
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.
Comment 16 WebKit Commit Bot 2016-05-08 16:56:58 PDT
Comment on attachment 278351 [details]
[Patch] Proposed Fix

Clearing flags on attachment: 278351

Committed r200566: <http://trac.webkit.org/changeset/200566>
Comment 17 WebKit Commit Bot 2016-05-08 16:57:03 PDT
All reviewed patches have been landed.  Closing bug.