1401918 - The detail of a network call briefly shows a "No headers" text

Status: NEW

(DevTools :: Netmonitor, defect, P4)

Description

[Nicolas Chevobbe [:nchevobbe]]

Attachment: Sep-21-2017 11-50-45.mp4

See attachment

This is probably because we default to show this text if we don't have the data.
Since when we open the detail we fetch those data, for a short timespan we show the label, which looks a bit like a glitch.

At startup, if the request to fetch the data isn't done yet, we shouldn't show anything.

Comment 1

[Abhinav Koppula]

Attachment: Bug 1401918 - Fix for showing "No headers" text only after request status is obtained.

Review commit: https://reviewboard.mozilla.org/r/183026/diff/#index_header
See other reviews: https://reviewboard.mozilla.org/r/183026/

Comment 2

[Abhinav Koppula]

Hi Nicolas,
I think the No-Headers div should be shown only after the request status is obtained which would prevent the glitch.
I have submitted a mozreview-request. Does this look fine?

Comment 3

[Nicolas Chevobbe [:nchevobbe]]

Comment on attachment 8911602 [details]
Bug 1401918 - Fix for showing "No headers" text only after request status is obtained.

https://reviewboard.mozilla.org/r/183026/#review188264

Hello Abhinav, thanks or working on this. It is working well and I like the solution. 
I pushed to try to see if we don't have any issue.
Do you think we can have a test to make sure we don't regress ? Maybe not a full test where you open the devtools and all, but one where you would render the headersPanel to the dom with a right set of props and see how it renders. We do this for shared components like http://searchfox.org/mozilla-central/source/devtools/client/shared/components/test/mochitest/test_tree_01.html. Tell me what you think about it

Comment 4

[Hengyeow (:tanhengyeow)]

Seems like this bug has been resolved as of the latest m-c build :)

Comment 5

[Nicolas Chevobbe [:nchevobbe]]

I still see the "no headers" text for a bit when opening a request detail

Comment 6

[Hengyeow (:tanhengyeow)]

Hi Nicolas

Do you mind sharing the page that you used to reproduce this? (Seems like you are viewing it from console if I'm not wrong)

Here's how I tried to reproduce this:
1. Open "Network" panel
2. Click on a request
3. Headers panel shows the intended details and there's no "glitch" that can be visibly detected

Comment 7

[Nicolas Chevobbe [:nchevobbe]]

Attachment: network_detail_glitch.mp4

1. Go to https://nchevobbe.github.io/demo/console-test-app.html
2. Open the console
3. Ensure the "XHR" filter is on
4. In the content page, click the "XHR" button (this will make an ajax call to github)
5. Expand the console message

---

I do still see the "No headers" text, which appears, I think, because we fetch headers once the component was rendered.

Comment 8

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

I can also see it using instructions in comment #7

Honza

Comment 10

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

Some info for anyone interested in fixing this bug:

1. Here is the place where the Headers panel returns early showing the empty-message:

https://searchfox.org/mozilla-central/rev/00c0d068ece99717bea7475f7dc07e61f7f35984/devtools/client/netmonitor/src/components/HeadersPanel.js#368

2. The condition above can be changed to show useful info even if responseHeaders.headers.length == 0

Honza

Comment 11

[Aaditya Arora]

Hi Jan and Nicolas,

I have looked into the problem and found that placing the if condition below the status or changing the condition to this
responseHeaders.headers.length == 0 would have no influence on the No headers for this request message. As we are calling this function fetchNetworkUpdatePacket in component which is calling a connector function requestData which is a async function, So our component will be rendered with undefined value of requestHeaders / uploadHeaders / responseHeaders and so No headers for this request message will be shown.

and when this async function completed executing they will update the props and our component will be re rendered with the related headers information.

So, I think the best way would be to change this if condition with something else which does not depends on this async process but is useful to give us condition for showing No Headers message.

I have few questions related to this :

1. When we actually want to show No headers message ? one use case I can see is when we are network panel and the request is not yet completed then we are showing this message but this is also hiding information of headers-overviewtill request is not completed.

2. Can we change this condition of No headers message with something else which knows that ...Yaa, it is confirmed
   that they will receive headers info... like summrystatus ?

please, correct me if I have assumed something wrong.

thanks

Comment 12

[torleif]

(In reply to Aaditya Arora from comment #11)

...

Maybe it's what you're saying, but just want to emphasize that "the request is not yet completed" is what should not prevent me from seeing the request headers. The network panel should know several things immediately as the request is sent, which it should be able to show me before the response comes back.

Comment 13

[Aaditya Arora]

(In reply to torleif from comment #12)

(In reply to Aaditya Arora from comment #11)

Maybe it's what you're saying, but just want to emphasize that "the request is not yet completed" is what should not prevent me from seeing the request headers. The network panel should know several things immediately as the request is sent, which it should be able to show me before the response comes back.

Yaa.. I understand what you are saying and totally agree with you and headers panel should display useful information even if response is not computed.

thanks

Comment 14

[Aaditya Arora]

(In reply to Aaditya Arora from comment #11)

Hi,
I need some information regarding this.

I have few questions related to this :

1. When we actually want to show No headers message ? one use case I can see is when we are network panel and the request is not yet completed then we are showing this message but this is also hiding information of headers-overviewtill request is not completed.

2. Can we change this condition of No headers message with something else which knows that ...Yaa, it is confirmed
   that they will receive headers info... like summrystatus ?

thanks

Comment 15

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

(In reply to Aaditya Arora from comment #14)

1. When we actually want to show No headers message ?

Yes, I think this is the right question.
Perhaps we can remove the message entirely.

I tried to remove the condition entirely and it seems to be less confusing.
https://searchfox.org/mozilla-central/rev/dbddac86aadf1d4871fb350bbe66db43728a9f81/devtools/client/netmonitor/src/components/HeadersPanel.js#365

As soon as the response is back (can be a failure) the UI is updated with headers.

Note that even Request headers need to be fetched asynchronously (from DevTools backend). It' because devtools are using client-server architecture. The client is DevTools Toolbox with panels/tools connected to the server, which is content page running in the same browser or e.g. on remote device.

Honza

Comment 16

[Aaditya Arora]

(In reply to Jan Honza Odvarko [:Honza] (always need-info? me) from comment #15)

Perhaps we can remove the message entirely.

Okay, but can you give me any solid example where we might required no headers text. Or will there be any condition that will come where their will be no headers in that request. (I don't think so*)

Note that even Request headers need to be fetched asynchronously (from DevTools backend). It' because devtools are using client-> server architecture. The client is DevTools Toolbox with panels/tools connected to the server, which is content page running in > the same browser or e.g. on remote device.

I don't understand this thing that why request headers needed to be fetched from devtools backend. Can you please help me (or suggest me some text for reading) in this because I think it will help me to understand the architecture better.

...

and if we are going with removing the conditions entirely then do I need to submit a patch for this ?

thanks
Aaditya

Comment 17

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

(In reply to Aaditya Arora from comment #16)

Perhaps we can remove the message entirely.

Okay, but can you give me any solid example where we might required no headers text. Or will there be any condition that will come where their will be no headers in that request. (I don't think so*)

Not sure if I understand the comment correctly. But, yes, I don't see where we might require the text, and so I am suggesting to remove it entirely.

Note that even Request headers need to be fetched asynchronously (from DevTools backend). It' because devtools are using client-> server architecture. The client is DevTools Toolbox with panels/tools connected to the server, which is content page running in > the same browser or e.g. on remote device.

I don't understand this thing that why request headers needed to be fetched from devtools backend. Can you please help me (or suggest me some text for reading) in this because I think it will help me to understand the architecture better.

Firefox DevTools is using client server architecture where client & server are connected through an async protocol called RDP (Remote debugging protocol) [1]

To get any data about the page being debugged (debuggee) or about the HTTP traffic (e.g. HTTP headers) - the client [2] needs to fetch the data (asynchronously) over the protocol (even if the debugged page runs in the same browser window).

Honza

[1] https://docs.firefox-dev.tools/backend/protocol.html
[2] https://docs.firefox-dev.tools/backend/client-api.html