Photonize toolbox tab icons

[fvsch]

As discussed last week, we'd like to update the tools icons (Inspector, Debugger, Console, etc.) to follow a Photon-compliant (or at least Photon-inspired) look.

Note: we have issue #26 on file for the right hand button icons.

I did a first pass using existing icons from https://design.firefox.com/icons/viewer/ for Console, Performance and Accessibility. For the other ones I tried to adapt existing icons to the Photon style. I think it might be worth trying to come up with different metaphors for Inspector and Debugger (especially if we end up merging Debugger and Style Editor).

[fvsch]

Here is the Figma document I am working on, which can be seen without logging in: https://www.figma.com/file/SvG26G5QeMmQ4iM6BMrfrmrh/Toolbox-Icons

I added 4 more icons I'd like to work on (basically closing #26 at the same time): Memory, Screenshot, Rulers and Measure.

I also tried to align the styles of the Style Editor and DOM tools.

@violasong The icons do look more balanced with Grey 90 at 80% opacity than at 100% opacity. (I translated "Grey 90 at 80% opacity" to #3b3b3c for the light theme, because using partial opacity fills and strokes in SVG can create visual artifacts if those overlap.)

[martinbalfanz]

I really like the suggestions! Only the performance icon looks a little bit off to me. I think it's because of the position of the needle 🤔

[violasong]

Awesome, this is looking great!! Especially love the console and pickers.

A couple suggestions:

Re: perf icon needle - I know this icon is based off of the photon one, but maybe if the needle is tilted a bit more upward it would be clearer at this small size?

Network looks a bit sparse - making the gray parts the same color as the rest, and changing the shape of the lines to fill a more square-shaped area could help.

I think the curly braces and angle brackets could be thicker, and maybe the curly braces could be a bit shorter as well, for a squared shape.

Inspector looks a tad heavy - maybe the cross hair lines could be 1px, though I imagine there would be alignment issues. Maybe the box part could be a tad shorter too?

[fvsch]

New round (the Figma URL is still valid):

All icons have at least one photonized variant.

• Picker icons: added variants with round extremities for the frame (it's a tiny change).
• Inspector: added variant with 1px stroke for the cross hair lines, and a second variant which uses the metaphor of a camera viewfinder overlay. As a photographer I like the camera viewfinder metaphor better than the military-ish or hunting metaphor of the crosshair, but it may be less recognizable for most users.
• Style Editor: variant with 2px stroke (instead of 1.5px), straighter and aligned curly brackets.
• DOM: variant with 2px stroke.
• Performance: nudged the needle as suggested, and I also tried a "stop watch" icon which may be a better metaphor for profiling.
• Network: aligned with the existing design; I also tried a few things with arrows, with an upward arrow for requests and downward arrow for response. When I use a stylized arrow with only one side to the tip, I get a shape that suggests a capital "N" (which is fun but not that useful for locales where it means nothing), and I can even make it look like the Netscape logo somewhat. :D (The serifs where meant to represent the browser and the server.)
• Memory: tried a simple adaptation of the existing icon, seems to work.
• Rulers, Measure: same.
• Screenshot: we have a Photon screenshot icon, but it's made for Firefox Screenshots which has a very different feature set (annotations, hosting and sharing), so I tried keeping a camera icon. I ended up doing 3 different camera icons. I like the filled one, and the second outline option (which looks more like a compact camera, rather than a beefy DSLR).

And that's about it. Feedback welcome. :)

The one I'm unhappy with is Network. The existing icon was a bit vague, and also technically incorrect (the Timeline goes from top-left to bottom right, it can't go back to the bottom left). I tried looking at other concepts, and found some existing work with request/response arrows: https://thenounproject.com/term/web-links/2074266/ https://thenounproject.com/term/requests/1284812/ https://thenounproject.com/term/requests/1284817/

But I think it's worth exploring other concepts too.

I also think there is room for improvement for the Debugger. The breakpoint metaphor may be lost on many users, maybe something else could work too?

[fvsch]

Small update, with my top choices (and a few out-of-the-box choices for Inspector and Network) in the second row:

I've also changed the Console icon to remove the inner bar and use a > _ pattern used in many Console / Terminal app icons. The goal was to remove the noisy inner bar, and to differentiate this icon from the original "Split Console" icon (so we don't use the exact same console icon for the Console tab and for the "Split Console" menu entry).

[DPX-designer]

Great iterations, top stuff! It's funny how symbols can signify different things to different people. Knowing this I'm going to give some feedback here and with that rather individual feedback I will say feel free to disregard it :)

The stopwatch while visually clear and crisp to me says "animation" more so in a developer toolbar, but I must remind myself that these icons will appear next to labels so potentially not an issue. (again, no one else might have that connotation).

Regarding the Inspector target vs viewfinder idea, it's funny I've never had a military or weapon picture in my head when seeing it but I suppose the term "target" implies aiming a device of some description. The camera viewfinder is a worthy alternative to explore but how would that effect the mini-target icon we have next to CSS properties:

A task like this can begin to raise questions beyond the scope at hand, like the realisation that we're using the same icon for the Style Editor as we are for Pretty Print 🤷 😂

I'm in favor of removing the Console icon bar for the underscore, I think the header bar reminds me more of a notepad or calendar for some reason!

The up and down arrows communicate more to me than the jagged lines for Network, you know... that jagged line icon would probably make more sense as the icon for Pretty Print!

They are looking a lot more homogenized and that accessiblity icon is fitting in perfectly with these new photonized icons.

[fvsch]

Question: "is the stylized N formed with arrows comprehensible for users", I've looked at translations of "Network" in a few languages which use latin scripts. There are 4 camps:

• Network and related words starting with N: Germanic and North European countries.
• Latin countries: words starting in R (Rete, Red, Réseau, etc.)
• A few countries: words starting in S (not sure if it's the same base).
• Then a handful of exceptions (words in M or W).

[violasong]

Awesome work! I'm so excited to see this whole set landed asap :).

Inspector: Yeah, the reticle is kind of weird, but at least it's also part of general use telescopes. (I would almost see a magnifying glass as the right icon here if it wasn't tied to search.) The viewfinder icon looks very nice, but for some reason I interpret it as viewing a larger rectangular view, rather than pinpointing an element. So I think for now I'd suggest we stick with the latest reticle with 1px lines that you created.

Simple console looks great!

For Debugger, I'd suggest we stick with the latest larger icon you made for now.

Love the bolder Style and DOM icons.

Performance - I think I still like the photon one (with improved needle :)) because it makes me think immediately of internet speed tests.

Network - I love the idea of the N, but I think the two arrows icon is the most clear. I like moving away from the 4 lines which just look like a code editor to me.

For Screenshot, my favorite is the latest compact camera style. Memory and rulers look lovely!

[fvsch]

Aligning with this feedback, this is what we have:

A word about size: the previous icons were drawn on a 16px canvas, and often using only 14px. The new icons are drawn on a 18px canvas; most take up only the central 16px, with only 2-3 exceptions. The rectangular ones like Picker, Inspector, Console, etc. use a 16x14 pixel rectangle.

So there is a small risk that these icons can look cramped in the 28px tabs (especially the active tab with its 2px border), or that they might look a bit big next to the 12px text. If that turns out to be an issue, solutions include:

1. Redrawing all icons to be smaller -> impractical because it's hard making a 14px icon when you use 2px Photon strokes.
2. Making the text bigger (e.g. 13px) -> we can end up with space issues.
3. Making the toolbar bigger (e.g. 30px) -> that one might be doable.

There's also a chance it will feel alright after getting used to it, no change needed. :)

[violasong]

I'd love to see how these icons look next to the text. I'm open to making the toolbar a tad taller (especially if we can expect to implement my ideas for simplifying the Inspector/Console toolbars which will remove an entire row from those UIs)

[fvsch]

Progress report, folks.

Design update

Figma: https://www.figma.com/file/SvG26G5QeMmQ4iM6BMrfrmrh/Toolbox-Icons

So "Option 1" is what I’m going for, and "Option 2" has some different icons, some alternatives we didn't pick (Performance) and some that we did pick but I wanted to try a small variation (Pick an element). If there is something in "Option 2" that works better than its "Option 1" sibling, please say so!

Implementation in progress

Dark theme @2x:

Dark theme @1x (just to check that it renders crispily):

Light theme @2x (no 1x screenshot for this one, see the dark theme 1x screenshot):

When playing with the DevTools, I think that this style and these icons work well. It takes a short while to get used to them, but after that they seem to fit in just right.

Other small changes

1. Made sure that all icons fit in a 16x16 canvas. I tweaked the few icons that were using more than that (Inspector, Measure, Network).
2. Now that we have bigger icons, I restored the "meatballs menu" icon to its original size. The current one is scaled down at 85% and a bit blurry on 1x displays. The Firefox meatballs menu icon (shown in Option 2) uses 4px circles, which can appear a bit square and cramped at 1x, so I tried something in-between with 3.6px circles that are correctly aligned to the pixel grid.
3. I also restored the overflow menu icon (chevrons icon) to its original size. We were using it at 75%, but with the new icons I think we can afford to use it at 100% size.

[fvsch]

Implementation: bugzilla 1517189.

[fvsch]

The only icons I did not update are for optional and rarely used tools:

• Web Audio: to be removed soon(ish).
• Canvas & Shader Editor: should be removed in 2019 too, and the current icons do not feel too out of place with the new ones so I’m okay with keeping them as-is.

[violasong]

This is awesome! I love the icons in Option 1. The only thing I would suggest is the Style Editor icon does seem a tad light/narrow next to the other icons in the toolbar - it could possibly still be a bit wider (maybe with slightly more exaggerated curly/pointy bits?

For the implementation, it seems a tiny bit more spacing between the icons and tab text could be nice.

Meatball and overflow icon changes sound great to me!

[fvsch]

• Updated the Pick an element icon to be more balanced
• Updated the Style Editor icon as suggested
• Increased the space between icon and label from 8px to 10px

I'm pretty happy with the result. @violasong do we want to collect feedback from more people or are we good to go? (We can always land in Nightly and use that to collect feedback.)

Screenshots at 1x and 2x (Light theme, on Linux). I'm pretty happy with the results.

[violasong]

New icons look great! I think we're good to go for Nightly. Really excited to try this out.

[fvsch]

• Tweaked the "Measure" height (+1px)
• Tweaked the "Console" chevron (1px stroke like Photon says, instead of the 1.5px one that looked a bit blurry on 1x)
• Added a "Paint Flashing" photonized icon because it was easy to redraw.

Now the only old icons are Web Audio, Shader Editor and Canvas, but they don't look too out of place and should be removed soonish.

I think we're good to go for Nightly.

I'm running tests, fingers crossed that I didn't break anything.

[fvsch]

Landing today in Nightly. I’m going to close this issue, and we can reopen it or create new issues if we want to do further changes.