Closed Bug 1507715 Opened 1 year ago Closed 1 year ago

Update error icon to Photon's disc design

Categories

(DevTools :: Console, enhancement)

enhancement
Not set

Tracking

(firefox65 fixed)

RESOLVED FIXED
Firefox 65
Tracking Status
firefox65 --- fixed

People

(Reporter: fvsch, Assigned: fvsch)

Details

Attachments

(3 files, 5 obsolete files)

Attached image devtools-error-icon-sizes.svg (obsolete) —
Discussed with Victoria and she would like to use this error icon from Photon design system:
https://design.firefox.com/photon/patterns/errors.html#icon

It's a 14px icon with 2px-wide exclamation mark (the dot is a circle of 2px diameter). For the Console, we use a 10px icon. I've worked on adapting the exclamation mark to fit the 10px circle, and it looks doable.
Assignee: nobody → florens
Status: NEW → ASSIGNED
Attached image console-error-icon-size.png (obsolete) —
Here are the results @2x with 10px icons (left) and 12px icons (right).

The current icons (triangle error/warning and round info) are 10px, but this 12px option is growing on me. For context, Console rows are 20px tall.
Attachment #9025600 - Flags: ui-review?(mcroud)
The larger size and small gain in clarity does seem to help differentiate from the info icon, otherwise they look incredibly similar, together you would be forgiven for assuming it was the red equivalent of info.

Beyond the scope of your question I know, but thinking aloud perhaps there is an argument here for changing the info icon? There are some common patterns like an italic "i" with no enclosing shape which could be explored. Likely though, the info circle is more frequently seen and recognised than the icon for error.
Attached image devtools-console-icons-pixel-fitted.svg (obsolete) —
The updated or tweaked icons I've been working on in Figma.

- 12px error and info icons
- some variants for the info icon (filled vs outlined)
- "input" and "return value" icons are a tiny bit sharper on 1x displays
Attachment #9025585 - Attachment is obsolete: true
> [Victoria] I think we should keep the triangle shape for all yellow warning icons for vision impairment reasons (it’s in the design system as well). I do love the info icon being outline to set it apart from the error.

So something like:

error = filled circle
warning = triangle
info = outlined circle
Attached image Error & Warning icon options.png (obsolete) —
So this is what I have:

- Bottom line is the current 10px icons (plus a new round error icon in the middle)

- Middle line are 12px icons, with the inner elements following the pixel grid (or half-pixels for some vertical alignments). Technically correct, but it can look a bit off.

- Top line, finally, are tweaked versions of the 12px icons, with the triangle's bottom not exactly touching the bottom, the inner dots and lines a bit shifted (and even squashed for the "i"), trying to achieve a good look in high resolution but also a very readable 1x rendering. I used a "tweak it till it works at 1x" and checked on 2 different screens, so it seems we have our winners.
Attached image Error & Warning.svg (obsolete) —
Source file.
Hi Victoria. This is what I'm getting in the Console after the icon update. I've included @1x and @2x screenshots. Is this what you had in mind?
Attachment #9025600 - Attachment is obsolete: true
Attachment #9025714 - Attachment is obsolete: true
Attachment #9025746 - Attachment is obsolete: true
Attachment #9025600 - Flags: ui-review?(mcroud)
Attachment #9025772 - Flags: ui-review?(victoria)
Attached image Error & Warning.svg
(SVG source update.)
Attachment #9025747 - Attachment is obsolete: true
These icon shapes look great! 

Re: the red color, do you mind trying the Photon Red 60 #d70022? It might be a bit too dark for dark mode. (I'm having color perception issues right now due to nightime color temp, but will look at this again when it's daytime.
With the new colors (landing today), we're using:

- Red 60 (a bit dark) in the light theme
- Red 40 (a bit light) in the dark theme

The screenshot already uses Red 60, but it seems the `#d70022` translated to `#df0030` when I did the screenshots or the composite image.

For the dark theme, Red 40 can look a bit pink or washed out. It's somewhat necessary for contrast, but the more vibrant Red 50 would be an option too. Red 60 is indeed too dark for the dark theme.
- Add a new 12px round icon for Console errors.
- Update the warning (triangle) icon to use the same 12px size.
- Update the info icon to use the same 12px size,
  and differentiate its design from the error icon.
- Tweak the Console's input and return icons to be a tiny bit
  bigger (for better overall visual balance) and crisper @1x.
Pushed by florens@fvsch.com:
https://hg.mozilla.org/integration/autoland/rev/b544791562a0
Update console error, warning and info icons; r=nchevobbe
https://hg.mozilla.org/mozilla-central/rev/b544791562a0
Status: ASSIGNED → RESOLVED
Closed: 1 year ago
Resolution: --- → FIXED
Target Milestone: --- → Firefox 65
Attachment #9025772 - Flags: ui-review?(victoria)
You need to log in before you can comment on or make changes to this bug.