DevTools Pane/Panel arrow icon

[DPX-designer]

This arrow svg will become the new DevTools expand/collapse arrow for all panes.
I am currently finalizing the documentation for panes and wondered whether this svg could live with the other Photon icons so that I may link to it from the docs?

Pane-arrow.svg.zip

[aminalhazwani]

@mcroud we currently have this icon https://github.com/FirefoxUX/photon-icons/blob/master/icons/desktop/arrowhead-down-12.svg (which unfortunately is not accessible on the website) that is also use on about:newtab for collapsable sections. It's a smaller 12px version of our standard 16px icon.

Can DevTools panes use the icon up here or is there a larger context for introducing a new one?

[DPX-designer]

Interesting! Well this SVG is 'new' from a scale point of view only. It is very similar to what we have currently had, only the scale and format (PNG -> SVG) has been tweaked to coincide with padding measurements we are trying to standardize.
So the filled-in, triangle style is what is there already.

[aminalhazwani]

@mcroud gotcha, thanks for the further explanation. Do you think there is space for using the same icon then?

I made a small test and replaced the icons with the Photon one, what do you think?

[DPX-designer]

The chevron style does sit well with me for panel headers, your visuals work equally well as the filled in triangle.

The snag is that the filled in triangle lives in lots and lots of other places, not just panel headers, one of which is the Inspector code view:

The code view is a jungle of < and > symbols. There is the potential that having a chevron style icon may introduce a margin of confusion here.
The alternative is to perhaps only update the panel headers, the argument against may be we're introducing a new icon to DevTools that only applies to some parts of the UI but behaviorally they have the same function? Tricky stuff!

[aminalhazwani]

Ahhhh so many arrow drops 🙂 Yeah, I agree with you that it makes sense to keep this as it is as it might get confusing with the markup.

Regarding the panel headers, I would leave the decision to you if you want to use the arrow head icon or the caret icon.

[DPX-designer]

@aminalhazwani Super, does the SVG meet the criteria for inclusion in the Photon Icon Viewer?

[aminalhazwani]

@mcroud it's looking good, only two minor things. We would need 4 separate versions of the icon (up, down, right, and left). And the icon should we wrapped in a 12x12px container.

If you need a .ai template you can find it here https://design.firefox.com/photon/resources/icons.html#icons-template 🙂

[DPX-designer]

@brassy- I have followed Amin's guidance above, please find below the icon with 4 directional variants, each within a 12px grid.

DevTools Arrow.zip

Let me know if there is anything else I need to do!

[brassy-]

Thank you! I’ll check on Monday Il giorno ven 14 dic 2018 alle 15:55 mcroud <[email protected]> ha scritto:

…

@brassy- <https://github.com/brassy-> I have followed Amin's guidance above, please find below the icon with 4 directional variants, each within a 12px grid. DevTools Arrow.zip <https://github.com/FirefoxUX/photon-icons/files/2680496/DevTools.Arrow.zip> Let me know if there is anything else I need to do! — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#43 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AGBHw2XbVi-Xd9eGNkB7l1tj3szs6agGks5u47vmgaJpZM4Ywr9c> .

[ariasuni]

Any news about this?