Bug 144742 – Web Inspector: Hidden Navigation Sidebar also hides essential tools

• Component: Web Inspector
• Status: RESOLVED DUPLICATE

[Tobias Reiss]

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"

[Radar WebKit Bug Importer]

<rdar://problem/20854582>

[Nikita Vasilyev]

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

[Tobias Reiss]

Created attachment 255513 [details]
Mockup

Here's a mockup that shows what I mean by "above quick console".

[Nikita Vasilyev]

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.

[Tobias Reiss]

Created attachment 255543 [details]
Mockup 2 Collapsed Console

Additional mockup that shows "breakpoint tools" when Console is collapsed.

[Tobias Reiss]

Created attachment 255544 [details]
Mockup 3 Expanded Console

Alternative mockup that shows "breakpoint tools" when Console is expanded.

[Timothy Hatcher]

The console prompt should not move when expanded vs collapsed. I'm not too thrilled about another horizontal bar, especially when docked.

[Tobias Reiss]

(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.

[Nikita Vasilyev]

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 ***