1507715 - Update error icon to Photon's disc design

Status: RESOLVED FIXED

(DevTools :: Console, enhancement)

Description

[Florens Verschelde :fvsch]

Attachment: devtools-error-icon-sizes.svg

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.

Comment 1

[Florens Verschelde :fvsch]

Attachment: console-error-icon-size.png

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.

Comment 2

[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.

Comment 3

[Florens Verschelde :fvsch]

Attachment: devtools-console-icons-pixel-fitted.svg

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

Comment 4

[Florens Verschelde :fvsch]

> [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

Comment 5

[Florens Verschelde :fvsch]

Attachment: Error & Warning icon options.png

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.

Comment 6

[Florens Verschelde :fvsch]

Attachment: Error & Warning.svg

Source file.

Comment 7

[Florens Verschelde :fvsch]

Attachment: console-error-icon-design.png

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?

Comment 8

[Florens Verschelde :fvsch]

Attachment: Error & Warning.svg

(SVG source update.)

Comment 9

[Victoria Wang [:victoria]]

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.

Comment 10

[Florens Verschelde :fvsch]

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.

Comment 11

[Florens Verschelde :fvsch]

Attachment: Bug 1507715 - Update console error, warning and info icons; r=nchevobbe

- 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.

Comment 12

[Florens Verschelde :fvsch]

Try: https://treeherder.mozilla.org/#/jobs?repo=try&revision=ad703e81aa6a8cfce7ac352e06c4133fa55a70a7

Comment 13

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/b544791562a0
Update console error, warning and info icons; r=nchevobbe

Comment 14

[Arthur Iakab [arthur_iakab]]

https://hg.mozilla.org/mozilla-central/rev/b544791562a0

Comment 15

[Arthur Iakab [arthur_iakab]]

https://hg.mozilla.org/mozilla-central/rev/b544791562a0