1513516 - Use Photon icons for "more" and "clear" buttons

Status: RESOLVED FIXED

(DevTools :: General, enhancement, P3)

Description

[Florens Verschelde :fvsch]

We are using a "+" symbol and a trash can symbol for "add..." and "clear" actions in a few tools (Inspector, Console, Style Editor, Performance, Memory, Network).

Since we already have Photon icons for those in the icon library (https://design.firefox.com/icons/viewer/), let's update them.

Note: this means that we will end up with some Photon and some non-Photon icons in panels, but I'm planning to update 90% of non-Photon icons during the Firefox 66 cycle, so this should be fixed soonish.

Comment 1

[Florens Verschelde :fvsch]

Attachment: devtools-clear-add-refresh-icons.png

Turns out most of those icons in Photon are 20px, and we need 16px icons.

I tried to adapt them to 16px, you can find my attempt at:
https://www.figma.com/file/0dZnEAI4l22zbnevSPmyg7lc/Add-Delete-Refresh-icons

Comment 2

[Florens Verschelde :fvsch]

Attachment: Screenshot of result in Storage tool

Here are the icons together in the Storage tool. (I added the "Clear" icon, which is not used there, though we do have a "Delete All" option in the context menu.)

My impression after updating these icons is that they can appear too strong when used on their own (e.g. the inspector "+" icons), but with the right icon color and after updating most icons to this style, it seems to be working well.

Comment 3

[Victoria Wang [:victoria]]

Comment on attachment 9030724 [details]
devtools-clear-add-refresh-icons.png

Your 16px versions look great! Only thing is I find I want a bit more vertical spacing in the toolbar (is that the 24px size?) - maybe it looks better in the ui than in the screenshot.

Comment 4

[Florens Verschelde :fvsch]

> Only thing is I find I want a bit more vertical spacing in the toolbar (is that the 24px size?)

Yep it's a 24px toolbar.
Indeed with the 14-16px thick icons (instead of the current 12-14px thin icons), the 24px toolbars can look a bit cramped. Maybe that will provide the impetus for moving to 28px toolbars everywhere. I wouldn't worry about Storage and other legacy-ish tools, but for Inspector that's something that will be worth trying.

Comment 5

[Victoria Wang [:victoria]]

Sounds like a plan!

Comment 6

[Tim Nguyen :ntim]

(In reply to Florens Verschelde [:fvsch] from comment #1)
> Created attachment 9030724 [details]
> devtools-clear-add-refresh-icons.png
> 
> Turns out most of those icons in Photon are 20px, and we need 16px icons.
> 
> I tried to adapt them to 16px, you can find my attempt at:
> https://www.figma.com/file/0dZnEAI4l22zbnevSPmyg7lc/Add-Delete-Refresh-icons

Note that they're 24px because the icon site has a bug where it downloads the android icons by default.

If you want desktop icons, this should be the source of truth: https://github.com/FirefoxUX/photon-icons/tree/master/icons/desktop

Comment 7

[Florens Verschelde :fvsch]

Now that makes more sense!
So we can use the Refresh, New and Delete icons from https://github.com/FirefoxUX/photon-icons/tree/master/icons/desktop

Comment 8

[Florens Verschelde :fvsch]

Attachment: Bug 1513516 - Use Photon icons for New, Delete, Refresh, Import and Profile; r=gl

Comment 9

[Florens Verschelde :fvsch]

Attachment: devtools-add-refresh-delete-icons.png

I've pushed a patch which updates 5 icons:

• Plus icon (add/new)
• Trash icon (delete/clear)
• Reload icon (used in Storage)
• Import icon
• And the "profiler stopwatch" icon used in Memory, Performance and Network

The first 4 are straight out from existing Photon icons library.

The "profiler stopwatch" icon is the one I drew as an alternative icon for the "Performance" tool. Turns out the existing icon was a stopwatch, and not a spinning hard drive like I had thought, so I think this updated stopwatch is fitting.

Victoria, are those icons okay for you? (Not showing the refresh one here, but it's a straightforward change.) Especially the stopwatch icon.

Final note: for the toolbars looking too small, fixing bug 1512513 will improve it a bit.

Comment 10

[Florens Verschelde :fvsch]

Tim pointed out that there is a stopwatch icon in the Photon Principles page:
https://design.firefox.com/photon/introduction/principles.html

It doesn't scale down to 16px well (especially at 1x resolution).
I was wondering if the left-pointing hand was a feature of stop watches to imitate, but it looks like on mechanical stopwatches that would be the 55 seconds mark. So I would keep the design in attachment 9036269 [details].

Comment 11

[Victoria Wang [:victoria]]

Comment on attachment 9036269 [details]
devtools-add-refresh-delete-icons.png

Looks great! Thank you!

Comment 12

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/1ea9c437d417
Use Photon icons for New, Delete, Refresh, Import and Profile; r=gl

Comment 13

[Daniel Varga [:dvarga]]

https://hg.mozilla.org/mozilla-central/rev/1ea9c437d417