1710306 - Missing horizontal scroll bar in raw rendering of response tab

Status: RESOLVED FIXED

(DevTools :: Console, defect, P3)

Description

[emmanuel.fournier]

Attachment: Capture d’écran 2021-05-09 195130.png

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

Steps to reproduce:

• Open web dev tools,
• Open a POST query (or XHR query)
• Open Response tab
• Click on raw switch button on the right side
• If the content have no CRLF, a long line of code is shown ...

Actual results:

There is a vertical scroll bar but no horizontal !?
It 's difficult to see those long lines
It's also difficult to select code

Expected results:

An horizontal scrool bar could be shown when there is code lines wider than the view.

Comment 1

[BugBot [:suhaib / :marco/ :calixte]]

The Bugbug bot thinks this bug should belong to the 'DevTools::Console' component, and is moving the bug to that component. Please revert this change in case you think the bot is wrong.

Comment 2

[Nicolas Chevobbe [:nchevobbe]]

This is due to this selector https://searchfox.org/mozilla-central/rev/85a74c965bd4bcab091b5767c13c44f84671d9ce/devtools/client/themes/webconsole.css#481-484 , which was aimed at the console input codeMirror instance, but we're matching the one in the network component.

The solution should be to make that selector more specific so we target the input

.webconsole-app .jsterm-input-container .CodeMirror-hscrollbar {
  /* We never want to see the horizontal scrollbar */
  display: none !important;
}

Comment 3

[emmanuel.fournier]

Is it possible to add a patch in the installation folder (C:\Program Files\Mozilla Firefox) ?

Comment 4

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

You might want to read our DevTools docs:
https://firefox-source-docs.mozilla.org/devtools/
(includes contributions guide)

Comment 5

[Nicolas Chevobbe [:nchevobbe]]

Attachment: Bug 1710306 - [devtools] Fix missing scrollbar in webconsole network message response tab. r=bomsy.

The selector that was used to not show toolbars in the console
input was also matching the codeMirror instance in the network
detail response tab. This is fixed by making the selector more
specific.

Comment 6

[emmanuel.fournier]

Great,
I miss to say that i use a mac ...
so how to patch the devtools/client/themes/webconsole.css file on macosx ?
or maybe i have to wait for a new FF version ?
Thky

Comment 7

[Nicolas Chevobbe [:nchevobbe]]

I pushed a patch for review, so it should be fixed in Firefox 91 (which will be in Beta/DevEdition next week and in release in ~6weeks)
In the meantime, you may use the netmonitor directly so you don't suffer from this?

Comment 8

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/654dd6f2e70c
[devtools] Fix missing scrollbar in webconsole network message response tab. r=bomsy.

Comment 9

[Natalia Csoregi [:nataliaCs]]

https://hg.mozilla.org/mozilla-central/rev/654dd6f2e70c