1549324 - Inaccessible colors for response-error-header (for e.g. malformed JSON in Response tab)

Status: RESOLVED FIXED

(DevTools :: Netmonitor, defect, P3)

Description

[Florens Verschelde :fvsch]

1. Load a page which loads a malformed JSON resource, e.g.
   index.html:

<script>fetch('/test.json')</script>

test.json:

{foo,}

2. Select that request in Netmonitor and switch to the Response tab

Expected result:

• An SyntaxError message is shown
• The message uses usual colors for "errors", with enough contrast

Actual result:

• A SyntaxError message is shown
• It's white text on a pink/magenta background; contrast is low in the light theme, and extremely low on the dark theme

Looks like we are using a --theme-highlight-red background, but that color was set to some shades of pink or magenta for some reason a while back. Probably too much stuff depending on it (20+ results) to change it in variables.css.

So we should probably change .network-monitor .request-error-header instead.

Comment 1

[Florens Verschelde :fvsch]

Attachment: Bug 1549324 - Fix red background color of Params and Response error; r=Honza

Comment 2

[Florens Verschelde :fvsch]

Attachment: network-response-error-background.png

Tried a few things, including using the same colors as error messages from the Console, but I found the light pink background used in Console to be too subtle for a short message. (We made it very subtle because Console errors can have a lot of content and different text colors; which is not a concern here.)

So instead I kept the white text, and used:

• Red 60 background in the light theme (contrast ratio: 5.36:1)
• Red 70 background in the dark theme (contrast ratio: 8.12:1)

The Red 70 background looked too dark/de-saturated in a light context, and the Red 60 looked a bit too vibrant in a dark context, so I think that's a decent solution. Both are accessible (>=4.5:1).

Comment 4

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/40f352e2d6b8
Fix red background color of Params and Response error; r=Honza

Comment 5

[Oana Pop-Rus]

https://hg.mozilla.org/mozilla-central/rev/40f352e2d6b8