1572802 - The breakpoints pane scrolls horizontally

Status: RESOLVED FIXED

(DevTools :: Debugger, defect, P3)

Description

[Jason Laster [:jlast]]

When you add a breakpoint with a long snippet, the snippet forces the pane to be too wide and introduces horizontal scrolling.

We should use CSS to truncate the snippet and prevent scrolling.

STR:

1. go to https://send.firefox.com/
2. add a breakpoint in app.<sha>.js

http://g.recordit.co/AjleuSHcyk.gif

Comment 1

[Kevin Morehouse]

Can I take this one?

Comment 2

[David Walsh :davidwalsh]

Yes, that would be great!

Comment 3

[Kevin Morehouse]

Attachment: FirefoxBreakpointsScrollBugOriginalBehavior.mov

I've come up with a mock solution for this that I'd like some input on:

For starters, here's a look at the current (buggy) behavior, before the solution is in place:

Comment 4

[Kevin Morehouse]

Attachment: FirefoxBreakpointsScrollBugMockSolution.mov

Here's my mock solution, which collapses and expands the watch expressions & breakpoints panels in tandem, so that the breakpoints panel's width cannot be expanded "behind" the watch expressions panel and cause the horizontal scrolling.

Is this the kind of behavior I should try to implement? Or is there an alternative implementation I should aim for?

Comment 5

[David Walsh :davidwalsh]

That looks great Kevin!

Comment 6

[David Walsh :davidwalsh]

Hello Kevin, how's this going? Anything we can help with?

Comment 7

[David Walsh :davidwalsh]

Attachment: Bug 1572802 - Prevent unwanted breakpoint scrolling r=jlast

Comment 8

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/606f2e3c4850
Prevent unwanted breakpoint scrolling r=jlast

Comment 9

[Andreea Pavel [:apavel]]

https://hg.mozilla.org/mozilla-central/rev/606f2e3c4850