1560804 - Firefox developer console shows double scrollbars for XHR

Status: RESOLVED FIXED

(DevTools :: Console, defect, P2)

Description

[Volkmar Wörner]

User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:68.0) Gecko/20100101 Firefox/68.0

Steps to reproduce:

Use a site with XHR and long-line replies (e.g. twitter).
open developer console and then jump to an XHR with a long line reply

Actual results:

Developer console shows double scrollbars and positions inner container wrong.
see screenshots

Expected results:

no double scrollbars

Comment 1

[Volkmar Wörner]

Attachment: firefox-console-1.png

Default view of reply of XHR in console

Comment 2

[Volkmar Wörner]

Attachment: firefox-console-2.jpg

View of XHR reply after scrolling down with marked scrollbar

Comment 3

[Volkmar Wörner]

Attachment: firefox-console-3.jpg

developer console view of XHR reply after scrolling view form screenshot 2 to the right with marked scrollbar

Comment 4

[Nicolas Chevobbe [:nchevobbe]]

Thanks for the report Volkmar. I'm able to reproduce indeed

Comment 5

[Nicolas Chevobbe [:nchevobbe]]

Honza, would you know why we do see this in the console and not in the netmonitor panel?

Comment 6

[Jan Honza Odvarko [:Honza] (always need-info? me)]

How can I reproduce this?

Honza

Comment 7

[Nicolas Chevobbe [:nchevobbe]]

Attachment: Jun-27-2019 14-05-04.mp4

Steps to reproduce

1. Go to https://long-one-line-response.glitch.me/
2. Open the console
3. Make sure the XHR filter button is on
4. Click on the button in the content page
5. There should be a network message in the console output, expand it
6. Select the response tab
7. Scroll all the way to the bottom of the network detail panel
8. Scroll the Response payload container all the way to the bottom as well

You should now see 2 horizontal scrollbars

See the attached video

Comment 8

[Nicolas Chevobbe [:nchevobbe]]

This makes it a bit better:

diff --git a/devtools/client/netmonitor/src/components/SourceEditor.js b/devtools/client/netmonitor/src/components/SourceEditor.js
--- a/devtools/client/netmonitor/src/components/SourceEditor.js
+++ b/devtools/client/netmonitor/src/components/SourceEditor.js
@@ -29,7 +29,7 @@ class SourceEditor extends Component {
 
     this.editor = new Editor({
       lineNumbers: true,
-      lineWrapping: false,
+      lineWrapping: true,
       mode: null, // Disable auto syntax detection, but then we set mode asynchronously
       readOnly: true,
       theme: "mozilla",

but there's still multiple toolbars, and maybe it was set here for a reason?

Comment 9

[Nicolas Chevobbe [:nchevobbe]]

Attachment: Bug 1560804 - Fix double scrollbar in network message detail. r=Honza.

We take this as an opportunity to fix the alignment between the XHR
badge and the URL.

Comment 10

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/5bb0858a7537
Fix double scrollbar in network message detail. r=Honza.

Comment 11

[Cosmin Sabou [:CosminS]]

https://hg.mozilla.org/mozilla-central/rev/5bb0858a7537