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

RESOLVED FIXED in Firefox 66

Status

enhancement
P3
normal
RESOLVED FIXED
7 months ago
6 months ago

People

(Reporter: fvsch, Assigned: fvsch)

Tracking

unspecified
Firefox 66

Firefox Tracking Flags

(firefox66 fixed)

Details

(Whiteboard: [qa-66b-p2])

Attachments

(4 attachments)

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.
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
Attachment #9030724 - Flags: ui-review?(victoria)
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 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.
Attachment #9030724 - Flags: ui-review?(victoria) → ui-review+
> 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.
Assignee: nobody → florens
Status: NEW → ASSIGNED
Sounds like a plan!
Severity: normal → enhancement
Priority: -- → P3
(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
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

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.

Attachment #9036269 - Flags: ui-review?(victoria)

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 on attachment 9036269 [details]
devtools-add-refresh-delete-icons.png

Looks great! Thank you!

Attachment #9036269 - Flags: ui-review?(victoria) → ui-review+
Pushed by florens@fvsch.com:
https://hg.mozilla.org/integration/autoland/rev/1ea9c437d417
Use Photon icons for New, Delete, Refresh, Import and Profile; r=gl
Status: ASSIGNED → RESOLVED
Closed: 6 months ago
Resolution: --- → FIXED
Target Milestone: --- → Firefox 66
Whiteboard: [qa-66b-p2]
You need to log in before you can comment on or make changes to this bug.