1347905 - POST request parameters are not displayed in a structured way like GET parameters are

Status: RESOLVED WONTFIX

(DevTools :: Netmonitor, defect, P2)

Description

[Patrick Brosset <:pbro>]

Attachment: POST-attachment-FF.png

STR:
- load https://www.zalando.de/adidas-performance-ultraboost-x-laufschuh-neutral-core-black-easy-blue-glow-orange-ad541a0zl-q11.html
- open the netmonitor
- find the 'collect' POST request in the list and select it
- switch to the parameter sidebar panel

==> The string is displayed in plain text and it does not wrap.

At the very least it should wrap, but much better would be to parse these params and display them in a structured way just like we do for the GET request parameters.

See the attached screenshot for the problem.

Comment 1

[Patrick Brosset <:pbro>]

Attachment: GET-urlparam-FF.png

As a comparison, here's what happens with GET requests. Much better.

Comment 2

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

Thanks for the report!

Honza

Comment 3

[Locke Chen]

Hi Honza
I'd like work on this issue, 
Cloud you please assign to me?
Thank you. :)

Comment 4

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

(In reply to Locke Chen from comment #3)
> Hi Honza
> I'd like work on this issue, 
> Cloud you please assign to me?
> Thank you. :)

Great, done!

Honza

Comment 5

[Locke Chen]

(In reply to Jan Honza Odvarko [:Honza] from comment #4)
> (In reply to Locke Chen from comment #3)
> > Hi Honza
> > I'd like work on this issue, 
> > Cloud you please assign to me?
> > Thank you. :)
> 
> Great, done!
> 
> Honza

Hi Honza
Looks like the question should be contentType does not contain "x-www-form-urlencoded".
If I removed this statement, it will succeed.
Do you have this problem is not any better suggestions?

https://searchfox.org/mozilla-central/source/devtools/client/netmonitor/src/utils/request-utils.js#33

Comment 6

[Locke Chen]

I'm sorry for my strange question.:P
Have you any better suggestion in this solution?

Comment 7

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

(In reply to Locke Chen from comment #6)
> I'm sorry for my strange question.:P
> Have you any better suggestion in this solution?
I see, that explains why posted body isn't parsed.
So, this isn't bug on our side.

Could you make sure the string is wrapped to multiple lines?
It's currently displayed as one huge line and it's hard to read it.

Honza

Comment 8

[Locke Chen]

(In reply to Jan Honza Odvarko [:Honza] from comment #7)
> (In reply to Locke Chen from comment #6)
> > I'm sorry for my strange question.:P
> > Have you any better suggestion in this solution?
> I see, that explains why posted body isn't parsed.
> So, this isn't bug on our side.
> 
> Could you make sure the string is wrapped to multiple lines?
> It's currently displayed as one huge line and it's hard to read it.
> 
> Honza
Looks like it should be ok.
I recorded the 'Request Header' information as follows:

POST /collect HTTP/1.1
Host: www.google-analytics.com
User-Agent: Mozilla/5.0 (X11; Linux x86_64; rv:55.0) Gecko/20100101 Firefox/55.0
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Language: en-US,en;q=0.5
Accept-Encoding: gzip, deflate, br
Referer: https://www.zalando.de/adidas-performance-ultraboost-x-laufschuh-neutral-core-black-easy-blue-glow-orange-ad541a0zl-q11.html
Content-Length: 3261
Content-Type: text/plain;charset=UTF-8
Connection: keep-alive

Comment 9

[Locke Chen]

And the length of the request payload is 3251 characters.

Comment 10

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

(In reply to Locke Chen from comment #8)
> (In reply to Jan Honza Odvarko [:Honza] from comment #7)
> > (In reply to Locke Chen from comment #6)
> > > I'm sorry for my strange question.:P
> > > Have you any better suggestion in this solution?
> > I see, that explains why posted body isn't parsed.
> > So, this isn't bug on our side.
> > 
> > Could you make sure the string is wrapped to multiple lines?
> > It's currently displayed as one huge line and it's hard to read it.
> > 
> > Honza
> Looks like it should be ok.
> I recorded the 'Request Header' information as follows:
Sorry, I wasn't clear. What I meant is the string in "Request payload" side panel. This string is displayed as one huge line and not easily readable. It would be nice to have it rendered as multiple lines automatically wrapped according to the current width of the panel. See the POST-attachment-FF.png attachment - the box labeled with #6. This should be fixed as part of this bug report.

Honza

Comment 11

[Locke Chen]

(In reply to Jan Honza Odvarko [:Honza] from comment #10)
> (In reply to Locke Chen from comment #8)
> > (In reply to Jan Honza Odvarko [:Honza] from comment #7)
> > > (In reply to Locke Chen from comment #6)
> > > > I'm sorry for my strange question.:P
> > > > Have you any better suggestion in this solution?
> > > I see, that explains why posted body isn't parsed.
> > > So, this isn't bug on our side.
> > > 
> > > Could you make sure the string is wrapped to multiple lines?
> > > It's currently displayed as one huge line and it's hard to read it.
> > > 
> > > Honza
> > Looks like it should be ok.
> > I recorded the 'Request Header' information as follows:
> Sorry, I wasn't clear. What I meant is the string in "Request payload" side
> panel. This string is displayed as one huge line and not easily readable. It
> would be nice to have it rendered as multiple lines automatically wrapped
> according to the current width of the panel. See the POST-attachment-FF.png
> attachment - the box labeled with #6. This should be fixed as part of this
> bug report.
> 
> Honza

Hi Honza
The length of the "Request payload" is 3251 characters.
This is indeed a huge line.
This situation seems to be caused by contentType. #5
Therefore, [1] here will be no data in the array.
However, the POST data is not here JSON format. So this huge lines to appear.
[1] https://searchfox.org/mozilla-central/source/devtools/client/netmonitor/src/components/params-panel.js#68

Comment 12

[Locke Chen]

I can add verification the postData to this statement.
But I think it's just a workaround not a total solution.

Comment 13

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

Removing NI, discussed offline.

Goal here should be to wrap the POST body in the panel so, the string is more readable (use CSS).

Honza

Comment 14

[Locke Chen]

(In reply to Jan Honza Odvarko [:Honza] from comment #13)
> Removing NI, discussed offline.
> 
> Goal here should be to wrap the POST body in the panel so, the string is
> more readable (use CSS).
> 
> Honza
Hi Honza
I traced all the css related to the source code. But I still can not change the style about the "overflow-wrap".
I think the reason is I don't know how to design CSS. :(
But I found the relevant CSS and source code.
https://searchfox.org/mozilla-central/source/devtools/client/netmonitor/src/components/properties-view.js#91-94
https://searchfox.org/mozilla-central/source/devtools/client/netmonitor/src/components/editor.js#92-100
https://searchfox.org/mozilla-central/source/devtools/client/netmonitor/src/assets/styles/netmonitor.css#819-823,825-831

Comment 15

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

@Ricky, you've been working with the SourceEditor/CodeMirror recently. Any tips for Locke here?

Honza

Comment 16

[Ricky Chien [:rickychien] (inactive)]

SourceEditor/CodeMirror will be updated in bug 1350226. Let's wait for bug 1350226 and then see how to improve this. Thanks!

Comment 17

[Luna Phipps-Costin]

I don't think text/plain should be wrapped by default. It appears like a code editor in the response frame, it should stay on the same line.

Comment 18

[Nicolas Chevobbe [:nchevobbe]]

I can't find the POST request from Comment 0 anymore, and all the other POST requests show the parameters in a nice way.
Honza, do you think we should close this bug ?

Comment 19

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

(In reply to Nicolas Chevobbe [:nchevobbe] from comment #18)
> I can't find the POST request from Comment 0 anymore, and all the other POST
> requests show the parameters in a nice way.
> Honza, do you think we should close this bug ?
Yes

In any cae, I believe that the problem with STR in comment #0 was wrong mime type.

Possible follow up report could suggest using `lineWrapping: true` for CodeMirror editor.
See demo here: https://codemirror.net/demo/indentwrap.html

It's currently set to false by default and we might want to introduce UI toggle for it
(since false might result in better readability in many cases)

If this sounds useful to anybody please file a bug (or I can do it).

Honza