1195839 - Review use of icons in netmonitor

Status: RESOLVED WORKSFORME

(DevTools :: Netmonitor, defect)

Description

[Jeff Griffiths (:canuckistani) (:⚡︎)]

In bug 1194561 we made changes to more clearly delineate different states for http requests and also present unencrypted requests *as a problem*.

I'm not 100% happy with the icons used but don't feel we should block that bug for icons. The proposed set are clear enough, and this bug is about finding optimal icons for conveying the different states.

Comment 1

[Karl Dubost💡 :karlcow]

In Bug 1194561#c11

> On the whole, I think this discussion has highlighted that we really need:
> 
> * Text tooltips to precisely explain the meaning of each icon
> * UX should spend some time thinking deeply about the specific icons we should use
> 
> But, I think those could be handled as follow ups to this.

The tooltip text needs improvements. I wonder if this is part of this or if it should be a separate bug. 

For example, currently the 

* green disk  = "200 OK"
* gray circle = "200 OK (cached)" 
* orange triangle = "304 Not Modified"

I wonder if these should be tied to a link to a MDN page, explaining the icon meanings.

And to separate the tooltip for the response code with a link to
https://developer.mozilla.org/en-US/docs/Web/HTTP/Response_codes

Comment 2

[Jeff Griffiths (:canuckistani) (:⚡︎)]

(In reply to Karl Dubost :karlcow from comment #1)
> In Bug 1194561#c11
> 
> > On the whole, I think this discussion has highlighted that we really need:
> > 
> > * Text tooltips to precisely explain the meaning of each icon
> > * UX should spend some time thinking deeply about the specific icons we should use
> > 
> > But, I think those could be handled as follow ups to this.
> 
> The tooltip text needs improvements. I wonder if this is part of this or if
> it should be a separate bug. 
> 
> For example, currently the 
> 
> * green disk  = "200 OK"
> * gray circle = "200 OK (cached)" 
> * orange triangle = "304 Not Modified"
> 
> I wonder if these should be tied to a link to a MDN page, explaining the
> icon meanings.
> 
> And to separate the tooltip for the response code with a link to
> https://developer.mozilla.org/en-US/docs/Web/HTTP/Response_codes

Great points - needinfo'ing Will to get his feedback on improving the docs.

Comment 3

[Tanvi Vyas[:tanvi]]

Copied from https://bugzilla.mozilla.org/show_bug.cgi?id=1194561#c39

(In reply to Tanvi Vyas [:tanvi] from comment #39) 
> States:
> 
> 1. HTTPS OK - green lock
> 2. HTTPS weak - grey lock with yellow warning triangle
> 3. HTTPS failed - grey warning triangle
> 4. HTTP OK - struck-through lock
> 5. localhost - globe
> 
> I'm not sure that the distinction between 2 and 3 is necessary.  We don't
> use the gray warning triangle in the urlbar anymore, so it doesn't match any
> state we already have.  Moreover, if the red square indicates connection
> failure, couldn't we just reuse the grey lock with yellow warning triangle.
> 
> What is the icon when mixed active content is loaded?  Grey lock with yellow
> triangle in the net monitor and grey lock with strike through in the url bar?

Comment 4

[Will Bamberg [:wbamberg]]

(In reply to Jeff Griffiths (:canuckistani) from comment #2)
> (In reply to Karl Dubost :karlcow from comment #1)
> > In Bug 1194561#c11
> > 
> > > On the whole, I think this discussion has highlighted that we really need:
> > > 
> > > * Text tooltips to precisely explain the meaning of each icon
> > > * UX should spend some time thinking deeply about the specific icons we should use
> > > 
> > > But, I think those could be handled as follow ups to this.
> > 
> > The tooltip text needs improvements. I wonder if this is part of this or if
> > it should be a separate bug. 
> > 
> > For example, currently the 
> > 
> > * green disk  = "200 OK"
> > * gray circle = "200 OK (cached)" 
> > * orange triangle = "304 Not Modified"
> > 
> > I wonder if these should be tied to a link to a MDN page, explaining the
> > icon meanings.
> > 
> > And to separate the tooltip for the response code with a link to
> > https://developer.mozilla.org/en-US/docs/Web/HTTP/Response_codes
> 
> Great points - needinfo'ing Will to get his feedback on improving the docs.

The original bug, AIUI, was about the icons in the "Domain" column, that is currently used to indicate whether the connection uses HTTP or HTTPS. But Karl's comment 1 sounds like it is about the icons in the "Method" column, which indicate the class of the HTTP/HTTPS response code. Are we talking about both of these, now?

* For the icons in "Method", we could totally make the status code be a link to the relevant entry in the MDN docs, like this: https://developer.mozilla.org/en-US/docs/Web/HTTP/Response_codes#304. Are there any doc updates needed for that? Or, rather than linking, should we steal that text and embed it in the devtools, to show it in a tooltip?

* For the icons in "Domain", it's less obvious that MDN docs can help very much. Just linking to a generic page on HTTPS, for example, doesn't seem particularly helpful. The main function of docs in this context seems to be to indicate what went wrong a with "weak" or "failed" HTTPS request, and here the devtools already know exactly what went wrong in a given case. At the moment, if you click the padlock icon, the Network Monitor opens the Security tab. Perhaps, if there is a problem with an HTTPS connection, then if you click the icon, the Security tab could highlight exactly what the problem was? (e.g. weak cipher, invalid cert,...).

Comment 5

[Will Bamberg [:wbamberg]]

Oh, and:

(In reply to Tanvi Vyas [:tanvi] from comment #3)
> Copied from https://bugzilla.mozilla.org/show_bug.cgi?id=1194561#c39
> 
> (In reply to Tanvi Vyas [:tanvi] from comment #39) 
> > States:
> > 
> > 1. HTTPS OK - green lock
> > 2. HTTPS weak - grey lock with yellow warning triangle
> > 3. HTTPS failed - grey warning triangle
> > 4. HTTP OK - struck-through lock
> > 5. localhost - globe
> > 
> > I'm not sure that the distinction between 2 and 3 is necessary.  We don't
> > use the gray warning triangle in the urlbar anymore, so it doesn't match any
> > state we already have.  Moreover, if the red square indicates connection
> > failure, couldn't we just reuse the grey lock with yellow warning triangle.
> > 

I agree with Tanvi that merging these two states seems like a good idea.

Comment 6

[Patrick Brosset <:pbro>]

Attachment: Screenshot 2019-02-14 at 15.53.13.png

The netmonitor has been improved over the past. The status codes are now shown in the list (not just colored circles), and from the sidebar, you can click to get more information from MDN.

The padlock icon still links to the security tab as Will said previously.

Is this enough for this bug to be closed, or is there anything more expected here?

Comment 7

[Karl Dubost💡 :karlcow]

Patrick,

perfect.
Thanks a lot for all the hard work of the devtools team. You are awesome!

Comment 8

[Patrick Brosset <:pbro>]

Always a pleasure to help Karl. If only we could do more!