Photonize DevTools icons

[fvsch]

Our update-icons-to-Photon-style issues:

• [x] RDM button and Frames button #18
• [x] Other toolbox button icons #26
• [x] Toolbox tab icons #36
• [x] Search and filter icons + color picker icon bug 1522041
• [x] Rule state (:hover etc.) icon -> to be replaced with a text label, similar to Chrome
• [x] RDM toolbar icons #28 (in progress)
• [ ] Debugger pretty-print icon #44
• [ ] Debugger control flow icons #49
• [ ] Debugger Sources tree icons https://github.com/firefox-devtools/debugger/issues/8061
• [ ] Item toggle (eye) icon

Let's do a pass for the remaining icons, especially those used in different tool's toolbars. We can focus on the most visible first, but it would great to group work on a bunch of icons to help achieve a consistent look. Ideally we can land an update in Firefox 66 beta (merge date 2019-01-28).

I'll try to take the lead on this, but any help is welcome. There are existing 16px Firefox for desktop icons we can reuse: https://github.com/FirefoxUX/photon-icons/tree/master/icons/desktop

[fvsch]

I started a Figma document for updating a few remaining icons from Inspector and other tools. https://www.figma.com/file/gZ2qwGfvs35fbvYtrb2uL41m/DevTools-Misc-Icons Not including Debugger play/pause/step icons alone for now.

[fvsch]

We can do a first round of review on those icons:

/cc @violasong @mcroud

1. Eye icon. This is used in the Style Editor to disable a stylesheet, and in the Debugger for "black boxing" a source (which is a somewhat obscure action: I think it means that this source file will not appear in call stacks, and it may disable its breakpoints too but I'm not sure). I went for Photon strokes (2px for the outer stroke, 4px circle for pupil; instead of 1px and 3px). There's a 'wide open' option and a thinner one (let's call it 'normal'). Finally, I tried creating an 'eye closed' variant which we could use to signify the "disabled/blackboxed" state visually and not only through color. I think the closed variant can work with both 'wide open' and 'normal' eyes.

2. Profiling icon. For the profiler tab, we used a speedometer icon. But the old speedometer icon picture here (which looks more like a spinning disk to me, but that could be just me) was also used in the Memory tool and in the Network tool as the button for "Take a snapshot of this page" actions. I think it can create confusion: will Network or Memory run the Performance tool? Nope, they won't. So in a recent bug we changed the icon for those buttons to a photonized "Stopwatch" icon. You can already see the result in Nightly (look in the Memory, Network and Performance tools). This is already landed, but we can always change it later if we think there is a better solution.

3. Search icon: this one comes from the Photon icon gallery. The current icon is also used in the search inputs in Inspector at a 11px size (downscaled from 16px). I'm planning to use a 12px downscaled size (pictured here), which gives us 1.5px strokes and a nice rendering at 1px.

4. Filter icon (currently used both at 16px and downscaled to 11px, with some bluriness on 1x displays). So I tried a simpler design that I've seen in a few apps (triangle shape, oblique end). I don't find the 16px version very convincing, but I did a 12px version with a 1px stroke and it looks pretty good IMO. I also explored a more conceptual design with 3 lines, which I've seen in a few places too. Not sure what works or if we could try other concepts (or better execution).

5. Eyedropper (color picker) icon. I got feedback from both @mcroud and someone who saw me working on it that the current icon and its thicker adaptations look like a sword or dagger. So I looked for alternatives. The first one in the third row is strongly inspired by Figma's eyedropper icon (just a tad bigger). That's my favorite option for now, it's not very Photon-like but IMO it works best. The second one in the third row is inspired by some designs I've seen on The Noun Project, that I tried to adapt to 16px and to a Photon style. Its downside is that if you look at it at the final size, it gets a bit busy and hard to read, and the eyedropper itself is quite small.

[violasong]

• I like eye wide open, and would just suggest a large iris so that it's friendlier looking.
• The eye closed is clever and does seem like a really good idea for accessibility. I have to admit though, increasing the metaphor here does strike me as a tad creepy - I don't really want to think of little blinkable cyclops eyes in my UI. Maybe Sketch's solution of a crossed-out eye would be better.
• Stopwatch looks great.
• Love the small/bold search icon.
• Simple filter icon looks great! (I prefer it to the 3 lines)
• Eyedropper: beautiful examples. The figma one totally looks better due to the squeeze part actually looking squeezable. The photonic one on the second row could probably also be modified to be more similarly realistic, but I'm happy to go with the figma one for now.

[fvsch]

A crossed-out eye could be good, and follows conventions used for several Photon icons too.

Let's start with implementing search, filter and the color picker icon. Filed bug 1522041 for that.

[DPX-designer]

These are super.

Both the wide-open and normal eye feel like improvements to me, I would be happy with either. Doing a Google image search for "Hide icon" falls in favor of Victoria's suggestion of using a crossed-out eye. Another pattern is placing the eye within a box and having the alternative hidden state being just the box (removing the eye), like a checkbox. Adobe do this with layers, so it might appeal to the Style Editor but maybe not much else. The profiler stopwatch requires much less guesswork on the users part than the current offering, definately a winner for me. Search icons look more appealing with a thicker, Photonised handle, Good good. I must say I do like the 16px oblique-end filter, my only question is if we go with the Figma style pipet are there any other icons which use a semi-transparent fill? Funny, when I saw the three line filter here I thought to myself "I've never seen that in the wild before?" Then yesterday afternoon I saw that Airtable were using it for their filter button 😆 The three lines could grow on me but the traditional filter feels more in place beside the other, more physical representative icons.
For the eyedropper, again I'll echo what Victoria has said here, the Figma style pipet looks much more solid, friendlier and feels right next to the other icons.

[fvsch]

Search, Filter and Eyedropper icons landing later today. :)