Use an icon for MDN Links

RESOLVED FIXED in Firefox 57

Status

()

Firefox
Developer Tools: Netmonitor
P3
normal
RESOLVED FIXED
10 months ago
3 months ago

People

(Reporter: Honza, Assigned: Ragnis)

Tracking

(Blocks: 1 bug, {good-first-bug})

unspecified
Firefox 57
good-first-bug
Points:
---
Dependency tree / graph

Firefox Tracking Flags

(firefox57 fixed)

Details

Attachments

(7 attachments, 7 obsolete attachments)

(Reporter)

Description

10 months ago
Created attachment 8834794 [details]
mdn-httpheaders.png

The Network panel introduced links to MDN for HTTP headers in bug 1320233. These links are rendered in 'Headers' side panel (within a side bar displayed on the right side).

The label for every link is: "[Learn More]"  (no quotes)

See the attached screenshot

The label takes quite a lot of space, which is especially valuable in the side bar and we might want to replace it by an icon. An icon can also make the UI more attractive.

Two notes:
1) The icon should be carefully designed since icons tend to be cryptic. I am thinking about a question mark, some existing MDN icons or combination of both.
2) There should be a tooltip for the icon saying something like "Learn more about this header on MDN"
3) MDN link is also displayed for JS errors in the Console panel. These should be replaced too so, the UI is consistent.
4) There is also bug 1323454 that should introduce MDN link for HTTP status code. It isn't landed yet, but should also use an icon if we agree on it (again to have consistent UI)

Honza
(Reporter)

Comment 1

10 months ago
Created attachment 8834795 [details]
mdn-jserrors.png
(Reporter)

Updated

10 months ago
Priority: -- → P3
(Reporter)

Comment 2

10 months ago
@Blake: I have quickly mentioned this at our (DevTools) meeting yesterday. What would be the best process to decide here?

Honza
Flags: needinfo?(bwinton)
Hmm.  The lack of a designer is making this harder than it would otherwise be.

Some thoughts:
* As much as I like the MDN logo, I don't feel like it's recognizable enough to be the icon.
* We do have an info icon already (as seen at http://firefoxux.github.io/firefox-svg-icons/viewer/#info) which I think would be decent.
* I could also imagine something like https://developer.cdn.mozilla.net/static/img/favicon144.a6e4162070f4.png but with a question mark instead of the dino head, as a more subtle tie-in to MDN.
* I think it would be a good idea to phase this change in over a release or two.  Start with [Learn more (?)] then switch it to just (?) once people associate the (?) icon with the learn more link.
* Finally, and this is more for Bryan I think, do we have any data on how many people use the Learn more link?  It would be good to make sure at least as many people can still find it after the change as before.  In a related question, can we run tests like that on the DevTools?


So, having said all that, since we don't have a designer, I think we could ask the community for help here.
There's a github repo at https://github.com/mozilla/OpenDesign with instructions on how to request community help on a design problem.  If you'ld like I would be happy to get that all sorted out (since it kinda falls under my job description ;).
Flags: needinfo?(bwinton) → needinfo?(clarkbw)
(Reporter)

Comment 4

10 months ago
(In reply to Blake Winton (:bwinton) (:☕️) from comment #3)
> Hmm.  The lack of a designer is making this harder than it would otherwise
> be.
> 
> Some thoughts:
> * As much as I like the MDN logo, I don't feel like it's recognizable enough
> to be the icon.
> * We do have an info icon already (as seen at
> http://firefoxux.github.io/firefox-svg-icons/viewer/#info) which I think
> would be decent.
Yep, I like that icon (but, we should make sure it works in all DevTools themes).

> * I could also imagine something like
> https://developer.cdn.mozilla.net/static/img/favicon144.a6e4162070f4.png but
> with a question mark instead of the dino head, as a more subtle tie-in to
> MDN.
> * I think it would be a good idea to phase this change in over a release or
> two.  Start with [Learn more (?)] then switch it to just (?) once people
> associate the (?) icon with the learn more link.
> * Finally, and this is more for Bryan I think, do we have any data on how
> many people use the Learn more link?  It would be good to make sure at least
> as many people can still find it after the change as before.  In a related
> question, can we run tests like that on the DevTools?
Note that the links for HTTP Headers is fresh new feature (landed last week) so,
we can only use data from the 'learn more' link related to JS Error (in the Console panel)

> So, having said all that, since we don't have a designer, I think we could
> ask the community for help here.
> There's a github repo at https://github.com/mozilla/OpenDesign with
> instructions on how to request community help on a design problem.  If
> you'ld like I would be happy to get that all sorted out (since it kinda
> falls under my job description ;).
This sounds good. I don't have experience with this process but, it would be great to see how's this icon-issue solved using it.

Honza
(In reply to Blake Winton (:bwinton) (:☕️) from comment #3)
> Some thoughts:
> * As much as I like the MDN logo, I don't feel like it's recognizable enough
> to be the icon.

Agreed. I don't think its informative enough.

> * We do have an info icon already (as seen at
> http://firefoxux.github.io/firefox-svg-icons/viewer/#info) which I think
> would be decent.

That could work just fine.

> * I could also imagine something like
> https://developer.cdn.mozilla.net/static/img/favicon144.a6e4162070f4.png but
> with a question mark instead of the dino head, as a more subtle tie-in to
> MDN.

Too clever. :-)

> * I think it would be a good idea to phase this change in over a release or
> two.  Start with [Learn more (?)] then switch it to just (?) once people
> associate the (?) icon with the learn more link.

It would be nice to A/B test this.  I can see how honza wants to save space and I assume that an icon will be sufficient but I would love to be able to test this change before committing to it.

I'm not sure about the phased rollout unless we felt confident that people wouldn't associate the icon with the old text.  But we won't really know that unless we can A/B test them. :-\

> * Finally, and this is more for Bryan I think, do we have any data on how
> many people use the Learn more link?  It would be good to make sure at least
> as many people can still find it after the change as before.  In a related
> question, can we run tests like that on the DevTools?

The MDN team has metrics on this.  I think luke (ni?) can get us some of that.

> So, having said all that, since we don't have a designer, I think we could
> ask the community for help here.
> There's a github repo at https://github.com/mozilla/OpenDesign with
> instructions on how to request community help on a design problem.  If
> you'ld like I would be happy to get that all sorted out (since it kinda
> falls under my job description ;).

Lets give it a try.

My only other suggestion is that we think about just doing something more badge like, less pure icon.

like so: https://img.shields.io/badge/mdn-info-blue.svg  (and you can create your own versions here: https://shields.io/ at the bottom of the page)
Flags: needinfo?(clarkbw) → needinfo?(lcrouch)
Yes, there's a mozilla/firefox-console-errors "campaign" set up in MDN's Google Analytics:

https://analytics.google.com/analytics/web/?authuser=1#report/trafficsources-campaigns/a36116321w64965862p66726481/%3Fexplorer-table.plotKeys%3D%5B%5D%26_r.drilldown%3Danalytics.campaign%3Adefault%2Canalytics.sourceMedium%3Amozilla%20%2F%20firefox-console-errors/

For Jan 8 - Feb 7, 386,394 (3.31%) of MDN's sessions came from firefox-console-errors "Learn More" links.


If you add links to MDN from network panel, please tag them with:

?utm_source=mozilla&utm_medium=firefox-network-panel&utm_campaign=default

(like done in errordocs.js for the console error messages: http://searchfox.org/mozilla-central/source/devtools/server/actors/errordocs.js)

If you want, you can add &utm_content=<error-msg> to the links so we know exactly what error message the user was looking at when they clicked.
Flags: needinfo?(lcrouch)
I like the "mdn" badge icon, it could be pure html/css, wich should make it easier to adapt to the different themes. I'd like to experiment with the Learn more + icon/badge in the console when we have an agreement on which icon/badge to use.
(In reply to Luke Crouch [:groovecoder] from comment #6)
> If you add links to MDN from network panel, please tag them with:
> 
> ?utm_source=mozilla&utm_medium=firefox-network-panel&utm_campaign=default
> 

This is already done and is called "devtools-netmonitor" https://dxr.mozilla.org/mozilla-central/source/devtools/client/netmonitor/shared/components/headers-mdn.js#15

> If you want, you can add &utm_content=<error-msg> to the links so we know
> exactly what error message the user was looking at when they clicked.

We haven't done this as it concerns user privacy.


I'm all for A/B tests. The console learn more is quite successful as is at the moment and there is enough space available, so I hope we would either improve there or keep the current engagement. 

For HTTP headers, I agree that it makes sense to save space and to explore icons. A/B testing here would be ideal as well.

I will try to see if the MDN team can make designer resources available for this.

Comment 9

10 months ago
Created attachment 8835457 [details]
help.svg

Comment 10

10 months ago
Created attachment 8835459 [details]
help-2.svg

Comment 11

10 months ago
Created attachment 8835460 [details]
info.svg
An alternative that does not introduce additional UI elements and was already suggested in the description of the original bug (https://bugzilla.mozilla.org/show_bug.cgi?id=1320233#c0) is to turn the headers into a link. Not sure about discoverability but if there are underlines, people that are used to browse the web (and I suspect developers are) might suspect that the header is clickable.

This does not add additional UI elements, and does not consume space (other than the underline). And it should work with all themes.

Comment 13

10 months ago
Created attachment 8835470 [details]
help.svg
Attachment #8835457 - Attachment is obsolete: true

Comment 14

10 months ago
Created attachment 8835471 [details]
help-2.svg
Attachment #8835459 - Attachment is obsolete: true
(Reporter)

Comment 15

10 months ago
(In reply to Luke Crouch [:groovecoder] from comment #6)
> Yes, there's a mozilla/firefox-console-errors "campaign" set up in MDN's
> Google Analytics:
> 
> https://analytics.google.com/analytics/web/?authuser=1#report/trafficsources-
> campaigns/a36116321w64965862p66726481/%3Fexplorer-table.
> plotKeys%3D%5B%5D%26_r.drilldown%3Danalytics.campaign%3Adefault%2Canalytics.
> sourceMedium%3Amozilla%20%2F%20firefox-console-errors/
> 
> For Jan 8 - Feb 7, 386,394 (3.31%) of MDN's sessions came from
> firefox-console-errors "Learn More" links.
Nice stats!

> If you want, you can add &utm_content=<error-msg> to the links so we know
> exactly what error message the user was looking at when they clicked.
Does it make sense to add some utm_content for the network panel?

Honza
Flags: needinfo?(lcrouch)
(Reporter)

Comment 16

10 months ago
Thanks Sole for the comment!

Couple of additional comments:

1) I prefer a '?' icon over 'í' a bit. I believe that the question mark is widely used and understood as 'help'.

2) I like the idea of turning the header name into a link but, I think it could be rather an addition than an alternative. We should still use an icon. The reason is that the MDN integration should be consistent across the entire DevTools UI and there doesn't have to always be a label we could turn into a link (e.g. the icon could be used in panel's toolbar button).

Honza
These HTTP header network panel links may not need utm_content, since we already know what content the user is looking at when they click the link. I.e., the http header.

But if we add other links to MDN from dev tools, utm_content is a good place to put "what content was the user looking at when they clicked the link"
Flags: needinfo?(lcrouch)

Comment 18

10 months ago
Created attachment 8835886 [details]
MDN icon and word mark

This is the standard MDN icon and word mark and we can provide that in SVG too, but if this doesn't fit, we'd be more than happy to work with you on something that meets your expectations.
(In reply to Jan Honza Odvarko [:Honza] from comment #4)
> > So, having said all that, since we don't have a designer, I think we could
> > ask the community for help here.
> This sounds good. I don't have experience with this process but, it would be
> great to see how's this icon-issue solved using it.

Given that ntim has jumped in with a bunch of icons already, I'm going to hope that he's happy to continue to help, and maybe just leave it with him instead of filing the community-design bug…  ;)

> > * We do have an info icon already (as seen at
> > http://firefoxux.github.io/firefox-svg-icons/viewer/#info) which I think
> > would be decent.
> Yep, I like that icon (but, we should make sure it works in all DevTools
> themes).

Good call.  ntim, could you attach an SVG of the question mark (from http://firefoxux.github.io/firefox-svg-icons/viewer/#help) in a blue circle (like http://firefoxux.github.io/firefox-svg-icons/viewer/#info), and screenshots of how it would look in the various DevTools themes, to see if we need to re-colour it?

Thanks,
Blake.
Flags: needinfo?(ntim.bugs)

Updated

10 months ago
Blocks: 1339623

Comment 20

10 months ago
Created attachment 8837401 [details]
help.svg

Blake, I'd like to get your feedback on the icon shape.

The size of the icon is the same as how it will be displayed in the UI.

Once the glyph is good, the color can easily be tweaked from there.
Attachment #8835470 - Attachment is obsolete: true
Attachment #8835471 - Attachment is obsolete: true
Flags: needinfo?(ntim.bugs)
Attachment #8837401 - Flags: feedback?(bwinton)
If we decide to go in this direction, I think it would make sense to have this icon as a plain `<a>` tag, with a specific style (like http://codepen.io/nchevobbe/pen/GreNJZ ). 
By doing that, we will able to easily change its style and adapt it to different themes.

Comment 22

10 months ago
Whatever the selected approach is, I'm happy to work on it. It might be easier for me, since I worked on the existing patch.
(Reporter)

Comment 23

10 months ago
(In reply to Nicolas Chevobbe [:nchevobbe] from comment #21)
> If we decide to go in this direction, I think it would make sense to have
> this icon as a plain `<a>` tag, with a specific style (like
> http://codepen.io/nchevobbe/pen/GreNJZ ). 
> By doing that, we will able to easily change its style and adapt it to
> different themes.
I had problems with background images when moving JSONView to github. Debugger is rather using InlineSVG [1] (no bk images). Shouldn't we take the same approach so, we are ready for github when it's time?

[1] https://github.com/devtools-html/debugger.html/blob/master/assets/images/Svg.js#L47

Honza
Flags: needinfo?(chevobbe.nicolas)
(Reporter)

Comment 24

10 months ago
(In reply to Eduardo Bouças from comment #22)
> Whatever the selected approach is, I'm happy to work on it. It might be
> easier for me, since I worked on the existing patch.
Sounds great to me, assigning to you!

Let's wait for the following two things:
1) The icon. I like the icons suggested by ntim in comment #20. Let's just wait for Blake's response.
2) The markup. I think we should use the same approach as the Debugger, but let's wait what Nicolas says.

Honza
Assignee: nobody → mail
> I had problems with background images when moving JSONView to github. Debugger is rather using InlineSVG [1] (no bk images). Shouldn't we take the same approach so, we are ready for github when it's time?

I don't think this is suitable for every icon. This one is a good candidate because it's basically text, so you can do `<a class="help_icon">?</a>`, but that won't be possible with every icon.
On the other hand, I realize that it would not be consistent with how the other icons are displayed, so I'm not sure about this anymore. So my position for now would be, let's do whatever the person making the change is comfortable with :) And maybe we can argue later to change how it's done.
Flags: needinfo?(chevobbe.nicolas)
(Reporter)

Comment 26

10 months ago
From IRC discussion:

Use InlineSvg fro the open-inspector icon:
https://github.com/devtools-html/reps/commit/ec767abc747ea2e1294608b4db192dc251698606
(we can get an inspiration from this patch)

Honza
Comment on attachment 8837401 [details]
help.svg

The shape is okay, although I do still prefer the smaller dot and sharper ends (and slight extra downward curve at the top) of the question mark from http://firefoxux.github.io/firefox-svg-icons/viewer/#help  Is there any reason you can't start with that one, and change the width and height to "12px"?

Oh, and whatever we do, we should run it through an optimizer, to remove the comments; title, desc, and defs elements; and sketch:type and id attributes.  :)
Attachment #8837401 - Flags: feedback?(bwinton) → feedback-

Updated

10 months ago
Depends on: 1339686

Comment 28

9 months ago
Created attachment 8850405 [details]
Selection_005.png

Also, doesn't the [Learn More] on all headers looks very redundant, I know it points to different links all the time. Would this be better ?

- logo on the hover
- logo placed right next to the header key name
Flags: needinfo?(ntim.bugs)

Comment 29

9 months ago
(In reply to Ruturaj Vartak from comment #28)
> Created attachment 8850405 [details]
> Selection_005.png
> 
> Also, doesn't the [Learn More] on all headers looks very redundant, I know
> it points to different links all the time. Would this be better ?
> 
> - logo on the hover
> - logo placed right next to the header key name

Yeah, I would prefer having the logo in the indentation gap next to the header name.

Icon on hover would be nice too.

Blake, wdyt?
Flags: needinfo?(ntim.bugs) → needinfo?(bwinton)
(In reply to Tim Nguyen :ntim from comment #29)
> (In reply to Ruturaj Vartak from comment #28)
> > Created attachment 8850405 [details]
> > Selection_005.png
> > 
> > Also, doesn't the [Learn More] on all headers looks very redundant, I know
> > it points to different links all the time. Would this be better ?
> > 
> > - logo on the hover
> > - logo placed right next to the header key name
> 
> Yeah, I would prefer having the logo in the indentation gap next to the
> header name.
> 
> Icon on hover would be nice too.
> 
> Blake, wdyt?

I don't see the logo anywhere in the screenshot…

Also, previously from me:
> Some thoughts:
> * As much as I like the MDN logo, I don't feel like it's recognizable enough to be the icon.
> * We do have an info icon already (as seen at http://firefoxux.github.io/firefox-svg-icons/viewer/#info) which I think would be decent.
> * I could also imagine something like https://developer.cdn.mozilla.net/static/img/favicon144.a6e4162070f4.png but with a question mark instead of the dino head, as a more subtle tie-in to MDN.

So, "?" icon, not logo; always showing, not only on hover; darkening it on hover would be acceptable, I think.
In the indentation gap seems like a good plan, too.  That way it's closer to the thing it's describing…
Flags: needinfo?(bwinton)

Comment 31

9 months ago
Hey Tim,

Could you get somebody to post 
- the final set of logo[s]
- Final UX condition of darkening (on hover) as suggested by :bwinton 

Its definitely a [good-first-bug] :)

Thanks,
Rutu
Flags: needinfo?(ntim.bugs)

Comment 32

9 months ago
forgot to say "please", sorry for that :(

Comment 33

8 months ago
The icon from Firefox-svg-icons was added to devtools/client/themes/images/help.svg

For the darkening, just make sure to use the .devtools-button class.
Flags: needinfo?(ntim.bugs)
(Reporter)

Updated

8 months ago
Keywords: good-first-bug
(Assignee)

Comment 34

6 months ago
Created attachment 8881020 [details] [diff] [review]
Replace MDN link with an icon
(Assignee)

Comment 35

6 months ago
Oh, I just noticed that this has already been assigned. I thought I checked that, but it appears I got something mixed up.

Comment 36

6 months ago
(In reply to Ragnis from comment #35)
> Oh, I just noticed that this has already been assigned. I thought I checked
> that, but it appears I got something mixed up.

It's assigned to me, but I'm afraid I haven't had the chance to look into it. Feel free to take it!
Status: NEW → ASSIGNED

Updated

4 months ago
Assignee: mail → ragnis

Updated

4 months ago
Attachment #8881020 - Flags: review+

Comment 37

4 months ago
Tim,
Getting an error on the applied patch - 

STR: 
- ensure page is open
- open network monitor

Nothing shows up; on Browser JS Console; I see this error 
"No localization found for [netmonitor.headers.learnMore]"

On adding the l10N string, the error goes away.
Flags: needinfo?(ntim.bugs)

Comment 38

4 months ago
Forgot to mention, that this is in the built env. (not the devtools-launchpad) ; I'm on git @478ce5e7

Comment 39

4 months ago
I feel like the l10n string shouldn't be removed.

The url should be removed as tooltip, and "Learn more" should be used as tooltip.
Flags: needinfo?(ntim.bugs)

Comment 40

4 months ago
Btw, it would be nice if you could update the help icon to: http://design.firefox.com/icons/viewer/#help

Also, can you remove the background-size in the CSS ?

Comment 41

4 months ago
Created attachment 8899099 [details] [diff] [review]
fix-1337690-1.patch

- used the photon help-16.svg (I've added a new file, not sure if I had to replace original help.svg)
- updated the test case
Attachment #8881020 - Attachment is obsolete: true
Attachment #8899099 - Flags: review?(ntim.bugs)

Comment 42

4 months ago
Comment on attachment 8899099 [details] [diff] [review]
fix-1337690-1.patch

Review of attachment 8899099 [details] [diff] [review]:
-----------------------------------------------------------------

::: devtools/client/jar.mn
@@ +273,5 @@
>      skin/images/import.svg (themes/images/import.svg)
>      skin/images/pane-collapse.svg (themes/images/pane-collapse.svg)
>      skin/images/pane-expand.svg (themes/images/pane-expand.svg)
>      skin/images/help.svg (themes/images/help.svg)
> +    skin/images/help-16.svg (themes/images/help-16.svg)

help-16.svg should replace help.svg

::: devtools/client/netmonitor/src/assets/styles/netmonitor.css
@@ +103,5 @@
>  }
>  
> +.learn-more-link::before {
> +  background: url(chrome://devtools/skin/images/help-16.svg);
> +  background-size: 14px !important;

nit: remove background-size
Attachment #8899099 - Flags: review?(ntim.bugs)

Comment 43

4 months ago
Created attachment 8899160 [details] [diff] [review]
fix-1337690-2.patch

- used help-16.svg as help.svg
- fixed nit of background-size
Attachment #8899099 - Attachment is obsolete: true
Attachment #8899160 - Flags: review?(ntim.bugs)

Comment 44

4 months ago
Comment on attachment 8899160 [details] [diff] [review]
fix-1337690-2.patch

Review of attachment 8899160 [details] [diff] [review]:
-----------------------------------------------------------------

::: devtools/client/netmonitor/src/assets/styles/netmonitor.css
@@ +103,4 @@
>  }
>  
> +.learn-more-link::before {
> +  background: url(chrome://devtools/skin/images/help.svg);

nit: Use background-image (so it doesn't override -position, -size and -repeat)
Attachment #8899160 - Flags: review?(ntim.bugs) → review+

Comment 45

4 months ago
Created attachment 8899213 [details] [diff] [review]
fix-1337690-3.patch

- fixed nit: using background-image
Attachment #8899160 - Attachment is obsolete: true
Attachment #8899213 - Flags: review+

Comment 46

4 months ago
Pushed by ntim.bugs@gmail.com:
https://hg.mozilla.org/integration/mozilla-inbound/rev/6251951d39e8
Replace MDN link with an icon. r=ntim.
https://hg.mozilla.org/mozilla-central/rev/6251951d39e8
Status: ASSIGNED → RESOLVED
Last Resolved: 4 months ago
status-firefox57: --- → fixed
Resolution: --- → FIXED
Target Milestone: --- → Firefox 57
Screenshots:

https://screenshots.mattn.ca/compare/?oldProject=mozilla-central&oldRev=0286df0f0eba0e81e2c628c332f90457c38ea926&newProject=mozilla-central&newRev=7dddbd85047c6dc73ddbe1e423cd643a217845b3&filter=devtools
You need to log in before you can comment on or make changes to this bug.