1476536 - Photonize toolbar icons

Status: RESOLVED DUPLICATE of bug 1517189

(DevTools :: General, enhancement, P3)

Description

[Jens]

Attachment: new_icons_vs_existing_devtools.png

Here's some feedback that subjective. Please close the report if you think it is not appropriate :)

Two issues with the icons as shown in the screenshot:

1. The DevTools icons are slim (1px) and have corners. The new meatball doorhanger icons are thick and round. I felt it look 'foreign'/inconsistent when first clicking it. FWIW, these icons fit with the main firefox doorhanger icons which are also thick and round, but in the context of DevTools they do not. 


This is especially noticable when comparing the new Split screen icon the the old one (sorry, just googled a few images, since Firefox stable has already removed it): 
https://mdn.mozillademos.org/files/11873/browser-toolbox.png
https://mdn.mozillademos.org/files/11873/browser-toolbox.png

2. Minor nitpicking: The top 3 icons (dock to bottom/right/left) are in particular not as good as they could be. The thick line is the outer window line and the inner line is thin. This puts an emphasis on the outer lines, but the important think here is actually the inner line. I'd propose to make the other way around for these 3: Make the outer line thin (1px or less color) and emphasize the inner line (thicker or brighter). Just an idea. This would make it more obvious immediately what the icons mean.

Comment 1

[Brian Birtles (:birtles, Feb 26~ parental leave)]

(In reply to Jens from comment #0)
> Two issues with the icons as shown in the screenshot:
> 
> 1. The DevTools icons are slim (1px) and have corners. The new meatball
> doorhanger icons are thick and round. I felt it look 'foreign'/inconsistent
> when first clicking it. FWIW, these icons fit with the main firefox
> doorhanger icons which are also thick and round, but in the context of
> DevTools they do not. 

Right. However, I think we want to move DevTools to align with the Photon guidelines where possible. Victoria can correct me if I am wrong.

What that in mind, if you don't mind, I'd like to repurpose this bug in terms of updating the DevTools toolbar icons.

I might get a chance to work on some of those icons if no one else does. Simple ones I can probably photonize, but more complex ones will need someone like Victoria to look at.

> 2. Minor nitpicking: The top 3 icons (dock to bottom/right/left) are in
> particular not as good as they could be. The thick line is the outer window
> line and the inner line is thin. This puts an emphasis on the outer lines,
> but the important think here is actually the inner line. I'd propose to make
> the other way around for these 3: Make the outer line thin (1px or less
> color) and emphasize the inner line (thicker or brighter). Just an idea.
> This would make it more obvious immediately what the icons mean.

I based this on the Photon iconography guidelines which seem to favor a strong outer border:

  https://design.firefox.com/photon/visuals/iconography.html

I understand what you're saying about the inner line being more important, however. I wonder if that would look odd though?

If I get a chance, I might try that in bug 1474224 where I need to update one of those icons anyway.

Comment 3

[Florens Verschelde :fvsch]

For anyone interested, our tracking issue for updating DevTools icons to a Photon style is:
https://github.com/firefox-devtools/ux/issues/47