Blurry warning icon (themes/images/alert.svg) on 1x displays

VERIFIED FIXED in Firefox 69

Status

defect
P2
normal
VERIFIED FIXED
3 months ago
2 months ago

People

(Reporter: fvsch, Assigned: fvsch)

Tracking

unspecified
Firefox 69
Points:
---

Firefox Tracking Flags

(firefox68 unaffected, firefox69 verified)

Details

Attachments

(4 attachments)

The icon's viewBox was changed in bug 1551174 to make it less blurry at the size it was used in the Inspector's Inactive CSS UI. But changing the viewBox away from 12x12 makes the icon blurry in every place that uses it at its intended 12px size, including the Console (where it also looks shifted 1px to the left, and doesn't align with other icons).

We should roll back the viewBox change and fix the icon size/bluriness in Inactive CSS in a different way.

Current style on Nightly on a 1x display.

  • icons shapes are rather blurry (though it's not too bad)
  • their overall shapes look like a 10px or maybe 11px size

My proposed fix would be to go back to the original icon and use the "info" icon from the Console. (You can see it in used by running console.info('Test').)

Differences:

  • overall it's sharper (except the bottom edge of the triangle icon, which is drawn like that on purpose to make the overall triangle shape and the "!" vertical position "just right", while being perfectly sharp at 2x)
  • the "info" icon design is a bit different, especially the "i" shape is a bit taller or stronger in Victoria's design I believe
  • icons use a 12px size, and look 12px (rather than 10-11px), which is maybe a bit bigger than we wanted

Ideally I would like to keep icons consistent where we can, and avoid having too many variants of the "error" (disc), "warning" (triangle) and "info" (circled "i") icons. Currently we have:

  • Original Photon icons at 16px
  • 12px variants used in Console, Inspector and other places
  • A tiny 9px variant of the "warning" icon I made for the Accessibility panel (used in contrast warning badges)
  • A smaller-than-12px (was it 10 or 11px) "error" for error counts in the Toolbox

Should we perhaps revise those designs and make definitive 10px, 12px and 16px variants?

Flags: needinfo?(victoria)

Patrick, here is a screenshot of the visual regression in Console.

The yellow warning icon is supposed to be the same width as the error icon, and aligned with it (currently it looks smaller and shifted to the left). The "!" part is supposed to look stronger (exactly like in the error icon) too.

We use the same icon in a handful of other places too, but the changes will be less noticeable in those contexts.

Ideally I'd like to write a small-enough fix and uplift it to beta. Does that sound alright?

Flags: needinfo?(pbrosset)

Yes uplifting a safe change early in beta is totally doable, and I think this visual regression warrants it because we don't want these tiny visual problems to accumulate as they give a bad overall impression to users. Thank you for your help on this Florens.

Flags: needinfo?(pbrosset)
Assignee: nobody → florens
OS: Unspecified → All
Priority: -- → P2
Hardware: Unspecified → All

[Tracking Requested - why for this release]:

Status: NEW → ASSIGNED
Pushed by florens@fvsch.com:
https://hg.mozilla.org/integration/autoland/rev/2bd3ac3abd63
Revert devtools warning icon size and use console info icon in Rules; r=miker
Status: ASSIGNED → RESOLVED
Closed: 3 months ago
Resolution: --- → FIXED
Target Milestone: --- → Firefox 69

Checked and we actually don't need to uplift to beta, the previous patch landed after the merge date.
Checked in 68b3 (Beta and Dev Edition).

Status: RESOLVED → VERIFIED
Flags: needinfo?(victoria)
You need to log in before you can comment on or make changes to this bug.