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

RESOLVED FIXED in Firefox 68

Status

defect
P3
normal
RESOLVED FIXED
2 months ago
21 days ago

People

(Reporter: fvsch, Assigned: fvsch)

Tracking

({access})

unspecified
Firefox 68

Firefox Tracking Flags

(firefox68 fixed)

Details

(Whiteboard: [qa-68b-p2])

Attachments

(2 attachments)

Assignee

Description

2 months ago
  1. Load a page which loads a malformed JSON resource, e.g.
    index.html:
<script>fetch('/test.json')</script>

test.json:

{foo,}
  1. 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.

Assignee

Updated

2 months ago
Assignee: nobody → florens
Status: NEW → ASSIGNED
Assignee

Comment 2

2 months ago

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

Assignee

Updated

2 months ago
Duplicate of this bug: 1549314
Assignee

Updated

2 months ago
Priority: -- → P3

Comment 4

Last month
Pushed by florens@fvsch.com:
https://hg.mozilla.org/integration/autoland/rev/40f352e2d6b8
Fix red background color of Params and Response error; r=Honza

Comment 5

Last month
bugherder
Status: ASSIGNED → RESOLVED
Closed: Last month
Resolution: --- → FIXED
Target Milestone: --- → Firefox 68
Whiteboard: [qa-68b-p2]
You need to log in before you can comment on or make changes to this bug.