1520191 - [remote-dbg-next] Polish style for error and warning messages

Status: RESOLVED FIXED

(DevTools :: about:debugging, enhancement, P1)

Description

[Julian Descottes [:jdescottes]]

We already display error messages when temporary addons fail to install. After Bug 1500374 we will also show warning messages if an addon has warnings (for instance unsupported properties in manifest.json).

So far, I am following the guidelines at:

• https://design.firefox.com/photon/patterns/warnings.html
• https://design.firefox.com/photon/patterns/errors.html (although I can't find the suggested icon anywhere so I am reusing the warning icon in both)

We should still check the fonts, and probably get the correct photon icon for errors.

Comment 1

[Ola Gasidlo [:ogasidlo] [:ola] OOO - please ping :ladybenko:]

To add a bit more context, here is a doc with screenshots to show a bit of the thinking process and the current state:
https://docs.google.com/document/d/1h1aPq7UrHn-NQkhFnlHcfqyOi48M38UqxzEebSXmwzI/edit#heading=h.mdjpskyqhvvh

Please feel free to reach out, if you'd like more context or have additional questions Matt!

Comment 2

[Julian Descottes [:jdescottes]]

Attachment: addon_warning_longtext.png

For reference, some warnings for addons can really have a lot of text! our options here would be either:

• crop
• make the message scrollable
• add a collapsible container to the error

Comment 3

[Ola Gasidlo [:ogasidlo] [:ola] OOO - please ping :ladybenko:]

Thanks for filing this Julian! :)

My suggestion would be to use <details>.

E.g.

<details>
    <summary>Log</summary>
    Error message details
</details>

Comment 4

[Julian Descottes [:jdescottes]]

Moving this to a regular non-ux bug and moving back to P3.

In the short term the goal of this bug should be to:

• add the appropriate icon for error messages
• handle long error messages for addon errors, see comment 3

Other improvements related to messages:

• links in warning messages should be buttons bug 1523295
• messages should have an X button to dismiss them (follow up to 1520142)

Comment 5

[Ola Gasidlo [:ogasidlo] [:ola] OOO - please ping :ladybenko:]

Attachment: Screenshot 2019-05-13 at 14.04.28.png

The icon I used is Identity Icon Hover rotated 180° that you can find here https://design.firefox.com/icons/viewer/#

Is the design shown in the screenshot what we want to achieve?

Comment 6

[Julian Descottes [:jdescottes]]

This looks good to me, thanks Ola.

Comment 7

[Ola Gasidlo [:ogasidlo] [:ola] OOO - please ping :ladybenko:]

Attachment: Bug 1520191 - Polish style for error and warning messages

Wrapped error log in <details>

Comment 8

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/28504d015b50
Polish style for error and warning messages r=jdescottes,ladybenko,flod

Comment 9

[Andreea Pavel [:apavel]]

https://hg.mozilla.org/mozilla-central/rev/28504d015b50