1319136 - Make security messages visually distinct from other warnings / errors

Status: NEW

(DevTools :: Console, enhancement, P3)

Description

[Brian Grinstead [:bgrins]]

In the old frontend you could distinguish between security errors/warnings and other errors caused on the page.  We should do the same with the new UI.

Comment 1

[Brian Grinstead [:bgrins]]

Attachment: old-ui.png

Comment 2

[Brian Grinstead [:bgrins]]

Attachment: new-ui.png

Comment 3

[Brian Grinstead [:bgrins]]

Helen, in the old UI (attachment 8812841 [details]) we had a different treatment for security errors (i.e. "Blocked loading mixed active content") and normal JS errors (i.e. "asdf is not defined").  In the new UI they all look the same (attachment 8812842 [details]).  Any ideas on how to distinguish these messages for the new UI?

Test page: https://people.mozilla.org/~tvyas/mixedboth.html.  Load and dismiss the prompt to see the errors.

Comment 4

[Nicolas Chevobbe [:nchevobbe]]

We might want to have something a bit different in a new frontend than the old look.
In the old console, we always have the filters visible, and each of them has a circle of the color used in the border and icon of the message item (for security, it is red, blue for css, ...).

In the new console, we don't show the filters, and even if shown, they don't have the color circle (and we removed the security filter). IMO, we should find something more explicit than just colors.

I wonder if we could have better icons on each message. In the new ui, background colors and icon serve the same purpose :
 - error : red background, cross icon
 - warning: yellow background, warning sign icon
 - log: no background, no icon (except evaluation command and result)

So I guess we could have icons based on their categories, and not by log level (which would be indicated by the background-color).

Asking Helen to see what's her thoughts on this

Comment 6

[Brian Grinstead [:bgrins]]

Victoria, we were hoping to revisit this UX for the new console. Do comments 3 and 4 explain the situation well enough?

Comment 7

[Victoria Wang [:victoria]]

Hi! Some thoughts:

- I like the idea of using a different icon to communicate "blocked" state. I'd avoid an X icon because X is so associated with being a close button (I would actually try to click the one that was showing in the Style Editor error banner). How about this one from Photon? https://design.firefox.com/icons/viewer/#forbidden

- Now that I'm seeing different icons for error and warning in this photon icon site, I feel we should follow their pattern and use this round icon for error: https://design.firefox.com/icons/viewer/#error (keeping the triangle icon for warning)

- To the message more clear, we could add the text "Security Error:" before the message (if there isn't already some other title at the beginning like "Content Security Policy:".) Could bold this text if it needs to be more emphasized than the JS errors like ReferenceError.

Are there non-security/non-blocked platform errors that need some other type of styling?

(Polish issue I'm adding to my Photon Polish doc to resolve later - in dark mode the warning messages look a lot brighter than the error messages, but errors should have more visual priority.)

Comment 8

[alex_mayorga]

¡Hola!

Ended up here because a colleague showed me the other day that Chrome developer tools have their own tab for "Security" whereas Firefox does not.

I'm not a fan of Chrome parity bugs, but I do think this is a legit bug.

Would it be possible to get a "Security" tab in Firefox developer tools?

Shall I file a separate bug?

¡Gracias!
Alex

Comment 9

[Nicolas Chevobbe [:nchevobbe]]

Hola Alex,

It would be better if you could file another bug with the specific needs you have for such panel so we can see if we should create one/enhance what we have in different panels in the toolbox.

Muchas gracias :)