Use Photon icons for "more" and "clear" buttons
Categories
(DevTools :: General, enhancement, P3)
Tracking
(firefox66 fixed)
Tracking | Status | |
---|---|---|
firefox66 | --- | fixed |
People
(Reporter: fvsch, Assigned: fvsch)
Details
(Whiteboard: [qa-66b-p2])
Attachments
(4 files)
10.78 KB,
image/png
|
victoria
:
ui-review+
|
Details |
83.57 KB,
image/png
|
Details | |
47 bytes,
text/x-phabricator-request
|
Details | Review | |
195.97 KB,
image/png
|
victoria
:
ui-review+
|
Details |
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.
Assignee | ||
Comment 1•5 years ago
|
||
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
Assignee | ||
Comment 2•5 years ago
|
||
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•5 years ago
|
||
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.
Assignee | ||
Comment 4•5 years ago
|
||
> 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 | ||
Updated•5 years ago
|
Comment 5•5 years ago
|
||
Sounds like a plan!
Updated•5 years ago
|
Comment 6•5 years ago
|
||
(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
Assignee | ||
Comment 7•5 years ago
|
||
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
Assignee | ||
Comment 8•5 years ago
|
||
Assignee | ||
Comment 9•5 years ago
•
|
||
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.
Assignee | ||
Comment 10•5 years ago
|
||
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•5 years ago
|
||
Comment on attachment 9036269 [details]
devtools-add-refresh-delete-icons.png
Looks great! Thank you!
Comment 12•5 years ago
|
||
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
Comment 13•5 years ago
|
||
bugherder |
Updated•5 years ago
|
Description
•