Closed Bug 1560804 Opened 9 months ago Closed 9 months ago

Firefox developer console shows double scrollbars for XHR


(DevTools :: Console, defect, P2)

68 Branch


(firefox69 fixed)

Firefox 69
Tracking Status
firefox69 --- fixed


(Reporter: volkmar.woerner, Assigned: nchevobbe)




(5 files)

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

Attached image firefox-console-1.png

Default view of reply of XHR in console

Attached image firefox-console-2.jpg

View of XHR reply after scrolling down with marked scrollbar

Attached image firefox-console-3.jpg

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

Component: Untriaged → Console
Product: Firefox → DevTools

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

Ever confirmed: true
Priority: -- → P2

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

Flags: needinfo?(odvarko)

How can I reproduce this?


Flags: needinfo?(odvarko) → needinfo?(nchevobbe)

Steps to reproduce

  1. Go to
  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

Flags: needinfo?(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?

Assignee: nobody → nchevobbe

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

Pushed by
Fix double scrollbar in network message detail. r=Honza.
Closed: 9 months ago
Resolution: --- → FIXED
Target Milestone: --- → Firefox 69
Regressions: 1567082
You need to log in before you can comment on or make changes to this bug.