1209581 - Need great icons for about:debugging.

Status: RESOLVED FIXED

(DevTools :: about:debugging, defect)

Description

[Jan Keromnes [:janx]]

In the new "about:debugging" page, there are different Target categories, which all need specific, intuitive and cool-looking icons.

Icons needed:
- Tab (Tabs that don't have a favicon (yet), "Tabs" category)
- Worker (Service Worker, Shared Worker, Other Worker, "Workers" category).
- Device ("Devices" category)

Not needed:
- Add-ons / Extensions (we already have the green puzzle-piece icon).
- Wi-Fi Device / USB Device / Simulator (current plan is to only show the name of a device with no icon).

Comment 1

[Jan Keromnes [:janx]]

Ryan or Brian, do you have any idea who I should ping about this? I've never done this before.

Comment 2

[Brian Grinstead [:bgrins]]

(In reply to Jan Keromnes [:janx] from comment #1)
> Ryan or Brian, do you have any idea who I should ping about this? I've never
> done this before.

I think Helen could help sort this out.  Jan, when I open about:debugging I only see Add-ons and workers.  How do you I see the Tabs and Devices sections?

Comment 3

[Helen V. Holmes (:helenvholmes) (:✨)]

Happy to help! Same question as Brian above, though.

Comment 4

[J. Ryan Stinnett [:jryans] (Use needinfo, replies may be slow)]

(In reply to Brian Grinstead [:bgrins] from comment #2)
> (In reply to Jan Keromnes [:janx] from comment #1)
> > Ryan or Brian, do you have any idea who I should ping about this? I've never
> > done this before.
> 
> I think Helen could help sort this out.  Jan, when I open about:debugging I
> only see Add-ons and workers.  How do you I see the Tabs and Devices
> sections?

I believe these features haven't landed yet, so there are only add-ons and workers categories so far.

Comment 5

[Jan Keromnes [:janx]]

Ryan is correct, only Add-ons and Workers are available today in about:debugging, but Devices are coming up soon (bug 1212802).

While we'll not necessarily add a Tabs category at first (because it's already easy enough to switch to a particular tab and open a toolbox), the Tab icon is still needed for remote-device tabs where a favicon isn't available.

Comment 6

[Jan Keromnes [:janx]]

Thanks for your offer Helen! Please needinfo/ping me if you have any more questions.

Comment 7

[Helen V. Holmes (:helenvholmes) (:✨)]

Attachment: about-debugging-icons.patch

I formatted the icons the same way as the panel icons so they might need to be sized up for your needs, janx --> sorry about that! (Same goes for color.)

Comment 8

[Jan Keromnes [:janx]]

Attachment: aboutdebuggingicons.png

Great icons! Here is a screenshot of about:debugging using the new SVG icons.

Comment 9

[Jan Keromnes [:janx]]

Comment on attachment 8680866 [details] [diff] [review]
about-debugging-icons.patch

Thanks Helen! The icons look great.

A few nits:
- As discussed on IRC, please shift the workers icon flush to the left.
- Again on IRC, :ntim suggested we should use another icon for tabs, do you agree?
- Also, I'm not sure how to properly position and size the devices icon. Should it be vertically centered?

Comment 10

[Helen V. Holmes (:helenvholmes) (:✨)]

Attachment: slightly-larger-icons.zip

I made these slightly larger than the icons in the patch because they looked less weighty than :shorlander's puzzle piece.

Comment 11

[Helen V. Holmes (:helenvholmes) (:✨)]

(In reply to Jan Keromnes [:janx] from comment #9)
> Comment on attachment 8680866 [details] [diff] [review]
> about-debugging-icons.patch
> 
> - Again on IRC, :ntim suggested we should use another icon for tabs, do you
> agree?

I agree that we should just use the one that's being used elsewhere: https://github.com/nt1m/firefox-svg-icons/blob/master/navigation/tab.svg

Comment 12

[Tim Nguyen :ntim]

Comment on attachment 8681417 [details]
slightly-larger-icons.zip

Are you sure these are the right icons ? They show up really tiny for me. I also tried viewing the SVGs on Safari to make sure Firefox wasn't playing tricks, but I get the same result.

Comment 13

[Helen V. Holmes (:helenvholmes) (:✨)]

(In reply to Tim Nguyen [:ntim] from comment #12)
> Comment on attachment 8681417 [details]
> slightly-larger-icons.zip
> 
> Are you sure these are the right icons ? They show up really tiny for me. I
> also tried viewing the SVGs on Safari to make sure Firefox wasn't playing
> tricks, but I get the same result.

Ah, by larger I meant larger within their viewport. The width and height can be messed with in the first <svg> line of the file.

Comment 14

[Jan Keromnes [:janx]]

Comment on attachment 8680866 [details] [diff] [review]
about-debugging-icons.patch

(Marking previous icons patch as obsolete.)

Comment 15

[Jan Keromnes [:janx]]

Comment on attachment 8681413 [details]
aboutdebuggingicons.png

(Marking previous screenshot as obsolete.)

Comment 16

[Jan Keromnes [:janx]]

Comment on attachment 8681417 [details]
slightly-larger-icons.zip

Thanks Helen, the new icons look great!

- They did look "small" because of a viewbox problem (I fixed that by editing the SVG files to change their viewbox from "0 0 40 40" to "0 0 16 16", so no need to change anything).

- The list-item icons (e.g. the icons in front of each worker in the Workers panel) are hard to see in whitesmoke-over-white-background, but I can use a CSS filter to fix that (we probably don't want a light and dark version of each icon, right?)

- The green addon icon looks weird as a category icon. Tim, do you think we should create a separate white version of it? If I cheat with a CSS filter ("grayscale(100%) contrast(300%)") the result isn't great.

Comment 17

[Helen V. Holmes (:helenvholmes) (:✨)]

Attachment: edit-addon-svg.zip

(In reply to Jan Keromnes [:janx] from comment #16)
> Comment on attachment 8681417 [details]
> slightly-larger-icons.zip
> - The list-item icons (e.g. the icons in front of each worker in the Workers
> panel) are hard to see in whitesmoke-over-white-background, but I can use a
> CSS filter to fix that (we probably don't want a light and dark version of
> each icon, right?)

I agree that we probably don't want two separate icons just for simplicity sake, but let me know if you decide you'd like more icons anyway!

> - The green addon icon looks weird as a category icon. Tim, do you think we
> should create a separate white version of it? If I cheat with a CSS filter
> ("grayscale(100%) contrast(300%)") the result isn't great.
I attached a new zip with the add-on icon as white (I also switched all of the icons' fill to white --> I think ntim mentioned in #devtools that most of the icons elsewhere are fill="white", not fill="whitesmoke"). Hopefully that looks better janx!

I think this clears ntim.

Comment 18

[Tim Nguyen :ntim]

(In reply to Helen V. Holmes (:helenvholmes) (:✨) from comment #17)
> Created attachment 8684900 [details]
> edit-addon-svg.zip
> 
> (In reply to Jan Keromnes [:janx] from comment #16)
> > Comment on attachment 8681417 [details]
> > slightly-larger-icons.zip
> > - The list-item icons (e.g. the icons in front of each worker in the Workers
> > panel) are hard to see in whitesmoke-over-white-background, but I can use a
> > CSS filter to fix that (we probably don't want a light and dark version of
> > each icon, right?)
Yeah, an invert(1) filter and possibly an opacity filter should be enough.

> > - The green addon icon looks weird as a category icon. Tim, do you think we
> > should create a separate white version of it? If I cheat with a CSS filter
> > ("grayscale(100%) contrast(300%)") the result isn't great.
> I attached a new zip with the add-on icon as white (I also switched all of
> the icons' fill to white --> I think ntim mentioned in #devtools that most
> of the icons elsewhere are fill="white", not fill="whitesmoke").
It's more precisely #fbfbfb (see our in-content prefs icons), so yeah, nearly white.

Comment 19

[Jan Keromnes [:janx]]

Attachment: aboutdebugging.png

Thanks Helen! Here is a screenshot with the new icons.

The white add-on icon looks a little bit stretched towards the right, not sure if I'm doing something wrong here.

As you can see in the Workers tab, the white icons can be made grey with the CSS filter "invert(30%)", so we don't need sprites or multiple icons for now! \o/

Comment 20

[Jan Keromnes [:janx]]

(In reply to Tim Nguyen [:ntim] from comment #18)
> Yeah, an invert(1) filter and possibly an opacity filter should be enough.

Good suggestion! In my screenshot, I use invert(30%), but I might add an additional filter like opacity or grayscale.

> It's more precisely #fbfbfb (see our in-content prefs icons), so yeah,
> nearly white.

Ah, then we should use #fbfbfb I guess.

(In reply to Jan Keromnes [:janx] from comment #19)
> The white add-on icon looks a little bit stretched towards the right, not
> sure if I'm doing something wrong here.

This is easier to see when you visually compare the white and green addon icons. Maybe another viewbox problem? I was able to mitigate it by changing the viewbox from "0 0 16 16" to "0 0 18 16", maybe the original icon isn't completely square.

Comment 21

[Tim Nguyen :ntim]

(In reply to Jan Keromnes [:janx] from comment #20)
> This is easier to see when you visually compare the white and green addon
> icons. Maybe another viewbox problem? I was able to mitigate it by changing
> the viewbox from "0 0 16 16" to "0 0 18 16", maybe the original icon isn't
> completely square.
Seems like the right viewBox is "0 0 18 18".

Comment 22

[Helen V. Holmes (:helenvholmes) (:✨)]

(In reply to Tim Nguyen [:ntim] from comment #21)
> Seems like the right viewBox is "0 0 18 18".

Janx, does this fix the skewing problem?

Thanks for being so patient :)

Comment 23

[Jan Keromnes [:janx]]

Attachment: Add in new about:debugging icons namespaced with debugging-.

Helen, thanks again for the new icons!

It looks like "0 0 18 18" does fix the skewing problem (not sure why but hey, it works!)

I took the liberty of editing your original patch to include the final icons.

Comment 24

[Jan Keromnes [:janx]]

Attachment: Use the cool new about:debugging icons.

Ryan, this patch makes about:debugging use Helen's new icons.

Please have a look.

https://treeherder.mozilla.org/#/jobs?repo=try&revision=2e8ded280ca7

Comment 25

[Jan Keromnes [:janx]]

Also, thanks a lot for your help Tim! :)

Comment 26

[Tim Nguyen :ntim]

Comment on attachment 8686605 [details] [diff] [review]
Add in new about:debugging icons namespaced with debugging-.

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

nit: the SVG fills should be #fbfbfb

Comment 27

[Jan Keromnes [:janx]]

Attachment: Add in new about:debugging icons namespaced with debugging-.

(In reply to Tim Nguyen [:ntim] from comment #26)
> nit: the SVG fills should be #fbfbfb

Whoops, forgot about that. Thanks!

Comment 28

[Jan Keromnes [:janx]]

Attachment: screenshot

Comment 29

[J. Ryan Stinnett [:jryans] (Use needinfo, replies may be slow)]

Comment on attachment 8686606 [details] [diff] [review]
Use the cool new about:debugging icons.

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

Yay, icons!

Comment 30

[Carsten Book [:Tomcat]]

Hi, the first patch failed to apply:

renamed 1209581 -> Bug-1209581---Use-the-cool-new-aboutdebugging-icon.patch
applying Bug-1209581---Use-the-cool-new-aboutdebugging-icon.patch
patching file devtools/client/jar.mn
Hunk #1 FAILED at 288
1 out of 1 hunks FAILED -- saving rejects to file devtools/client/jar.mn.rej

jan, could you take a look? Thanks !

Comment 31

[Jan Keromnes [:janx]]

Attachment: Add in new about:debugging icons namespaced with debugging-.

Rebased.

Comment 32

[Jan Keromnes [:janx]]

Attachment: Use the cool new about:debugging icons.

Rebased.

Comment 33

[Jan Keromnes [:janx]]

Rebased both patches, should apply properly now.

Comment 34

[Pulsebot]

https://hg.mozilla.org/integration/fx-team/rev/ddf603effb9f
https://hg.mozilla.org/integration/fx-team/rev/f92dce8d388c

Comment 35

[Carsten Book [:Tomcat]]

https://hg.mozilla.org/mozilla-central/rev/ddf603effb9f
https://hg.mozilla.org/mozilla-central/rev/f92dce8d388c