Bug 144742 - Web Inspector: Hidden Navigation Sidebar also hides essential tools
Summary: Web Inspector: Hidden Navigation Sidebar also hides essential tools
Status: RESOLVED DUPLICATE of bug 165211
Alias: None
Product: WebKit
Classification: Unclassified
Component: Web Inspector (show other bugs)
Version: 528+ (Nightly build)
Hardware: All All
: P2 Normal
Assignee: Nobody
URL:
Keywords: InRadar
Depends on:
Blocks:
 
Reported: 2015-05-07 07:35 PDT by Tobias Reiss
Modified: 2016-12-11 20:48 PST (History)
7 users (show)

See Also:


Attachments
Mockup (205.86 KB, image/png)
2015-06-24 14:28 PDT, Tobias Reiss
no flags Details
Mockup 2 Collapsed Console (206.25 KB, image/png)
2015-06-25 02:04 PDT, Tobias Reiss
no flags Details
Mockup 3 Expanded Console (192.05 KB, image/png)
2015-06-25 02:07 PDT, Tobias Reiss
no flags Details

Note You need to log in before you can comment on or make changes to this bug.
Description Tobias Reiss 2015-05-07 07:35:20 PDT
Steps to reproduce:

1. Go to "Debugger" Tab
2. Pick file from Navigation Sidebar and hide sidebar 
3. Add Breakpoint in Content Browser
4. Trigger Breakpoint
5. Try to step into Breakpoint
6. Where went the Button?

The problem I'm seeing here is that the "Navigation Sidebar" is intended to contain files but instead it also contains essential Tools.

Things I'd expect being in a Navigation Sidebar:
- Files where I can navigate through.

Things I wouldn't expect being in a Navigation Sidebar:
- Global Breakpoint settings (All/All Uncaught Exceptions)
- Breakpoint pause, continue, step over/in/out
- Stack trace

Why is the "Hide Navigation Sidebar" important?
- Enables distraction free working environment
- Space is restricted

My preferable solution:
- Put Global Breakpoints above "Quick console"
- Put Breakpoint Tool above "Quick console"
- Put Stack trace in "Details Sidebar"
Comment 1 Radar WebKit Bug Importer 2015-05-07 07:35:36 PDT
<rdar://problem/20854582>
Comment 2 Nikita Vasilyev 2015-06-18 16:34:48 PDT
I can’t visualize when you say "above Quick console"? Could you make a rough mockup?

The current design is inspired by Xcode: https://cloudup.com/c9GzQVYMVzl

We also share keyboard shortcuts with Chrome DevTools, which allow to operate the debugger with the left sidebar closed:

F8 or ⌘\      Pause/ Continue
F10 or ⌘'     Step over
F11 or ⌘;     Step into
⇧F11 or ⇧⌘;   Step out
Comment 3 Tobias Reiss 2015-06-24 14:28:11 PDT
Created attachment 255513 [details]
Mockup

Here's a mockup that shows what I mean by "above quick console".
Comment 4 Nikita Vasilyev 2015-06-24 18:34:08 PDT
Pros/cons besides the ones mentioned previously:
+ Consistency with Xcode
- People would have to re-learn where the controls are

I think it’s worth doing.
Comment 5 Tobias Reiss 2015-06-25 02:04:53 PDT
Created attachment 255543 [details]
Mockup 2 Collapsed Console

Additional mockup that shows "breakpoint tools" when Console is collapsed.
Comment 6 Tobias Reiss 2015-06-25 02:07:46 PDT
Created attachment 255544 [details]
Mockup 3 Expanded Console

Alternative mockup that shows "breakpoint tools" when Console is expanded.
Comment 7 Timothy Hatcher 2015-06-25 07:41:41 PDT
The console prompt should not move when expanded vs collapsed. I'm not too thrilled about another horizontal bar, especially when docked.
Comment 8 Tobias Reiss 2015-06-25 08:04:38 PDT
(In reply to comment #7)
> The console prompt should not move when expanded vs collapsed. 

Oh yeah, I agree!

> I'm not too thrilled about another horizontal bar, especially when docked.

I see but I personally like the experience from Xcode.
Comment 9 Nikita Vasilyev 2016-12-11 20:48:48 PST
Work related to this is happening in Bug 165211 - Web Inspector: Debugger and Console improvements.

Even though this bug was created earlier, I'm marking this as a duplicate as the other bug is closer to completion.

*** This bug has been marked as a duplicate of bug 165211 ***