New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Photonize toolbox tab icons #36
Comments
Here is the Figma document I am working on, which can be seen without logging in: 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 |
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 🤔 |
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? |
New round (the Figma URL is still valid): All icons have at least one photonized variant.
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: 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? |
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 |
Great iterations, top stuff! 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. 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. |
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:
|
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! |
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. 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:
There's also a chance it will feel alright after getting used to it, no change needed. :) |
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) |
Progress report, folks. Design updateFigma: 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 progressDark 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
|
Implementation: bugzilla 1517189. |
The only icons I did not update are for optional and rarely used tools:
|
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! |
I'm pretty happy with the result. Screenshots at 1x and 2x (Light theme, on Linux). |
New icons look great! I think we're good to go for Nightly. Really excited to try this out. |
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'm running tests, fingers crossed that I didn't break anything. |
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. |
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).
The text was updated successfully, but these errors were encountered: