1400297 - Too low contrast for netInfoHeadersGroup in JSON Viewer

Status: RESOLVED FIXED

(DevTools :: JSON Viewer, defect)

Description

[Oriol Brufau [:Oriol]]

Load data:application/json,[1,2,3]
Go to Headers tab

Result: "Response Headers" and "Request Headers" have awful contrast.

Currently, for light theme, http://webaim.org/resources/contrastchecker/?fcolor=B1B1B3&bcolor=FFFFFF
 - Foreground: #B1B1B3
 - Background: #FFFFFF
 - Contrast ratio: 2.14:1

Previously, for light theme, http://webaim.org/resources/contrastchecker/?fcolor=585959&bcolor=FFFFFF
 - Foreground: #585959
 - Background: #FFFFFF
 - Contrast ratio: 7.03:1

Currently, for dark theme, http://webaim.org/resources/contrastchecker/?fcolor=737373&bcolor=0C0C0D
 - Foreground: #737373
 - Background: #0C0C0D
 - Contrast ratio: 4.12:1

Previously, for dark theme, http://webaim.org/resources/contrastchecker/?fcolor=B6BABF&bcolor=393F4C
 - Foreground: #B6BABF
 - Background: #393F4C
 - Contrast ratio: 5.41:1

Comment 1

[Oriol Brufau [:Oriol]]

Gabriel, were these new --theme-body-color-alt colors intentional? Should JSON Viewer and Network devtools be using some other color variable instead of --theme-body-color-alt?

Comment 2

[Gabriel Luong [:gl] (ΦωΦ)]

Forwarding this to Honza to fix. This basically comes down to either using the Accordion component or applying the same styles as the Accordion component.

Comment 3

[Jan Honza Odvarko [:Honza] (always need-info? me)]

@Oriol: Can you please look at this?

Here is the accordion component styles Gabriel mentioned:
http://searchfox.org/mozilla-central/source/devtools/client/inspector/layout/components/Accordion.css

We should style Net monitor and JSON Viewer the same way.

Honza

Comment 4

[Oriol Brufau [:Oriol]]

But just the color? Also the background? All accordion styles? cursor:pointer and a different color for :hover can be confusing since the JSON headers are not clickable.

Comment 5

[Gabriel Luong [:gl] (ΦωΦ)]

Instead of styling it, I think we should just do this right and use the Accordion component.

Comment 6

[Jan Honza Odvarko [:Honza] (always need-info? me)]

(In reply to Gabriel [:gl] (ΦωΦ) from comment #5)
> Instead of styling it, I think we should just do this right and use the
> Accordion component.
Gabriel, I agree that it would be better, but this might take time since JSON Viewer is still based on AMD (asynchronous modules). Using the Accordion component would force us to turn that component into AMD.
Would that be ok for you?

I believe that the proper solution would be to use Webpack for JSONViewer. Before that happens we can just fix the colors here for the time being.

Honza

Comment 7

[Gabriel Luong [:gl] (ΦωΦ)]

(In reply to Jan Honza Odvarko [:Honza] from comment #6)
> (In reply to Gabriel [:gl] (ΦωΦ) from comment #5)
> > Instead of styling it, I think we should just do this right and use the
> > Accordion component.
> Gabriel, I agree that it would be better, but this might take time since
> JSON Viewer is still based on AMD (asynchronous modules). Using the
> Accordion component would force us to turn that component into AMD.
> Would that be ok for you?
> 
> I believe that the proper solution would be to use Webpack for JSONViewer.
> Before that happens we can just fix the colors here for the time being.
> 
> Honza

Ah, I made a huge mistake of not fully reading this bug. For the longest time, I thought this was for the network monitor instead of the JSON viewer. 

If this is the case, we should just fix the color css for now.

Comment 8

[Liz Henry (:lizzard) (relman/hg->git project)]

Contrast can be an a11y issue so I'm hoping we can keep it on the radar as a regression (maybe to fix for 58)

Comment 9

[Oriol Brufau [:Oriol]]

Attachment: Bug 1400297 - Increase color contrast for JSON Viewer and Netmonitor headers.

Review commit: https://reviewboard.mozilla.org/r/185644/diff/#index_header
See other reviews: https://reviewboard.mozilla.org/r/185644/

Comment 10

[Oriol Brufau [:Oriol]]

Just a small color fix.

Comment 11

[Jan Honza Odvarko [:Honza] (always need-info? me)]

Comment on attachment 8914370 [details]
Bug 1400297 - Increase color contrast for JSON Viewer and Netmonitor headers.

https://reviewboard.mozilla.org/r/185644/#review190936

Yes, this is nice improvement, thanks!

R+

Honza

Comment 12

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/08b8284f7cb7
Increase color contrast for JSON Viewer and Netmonitor headers. r=Honza

Comment 13

[Wes Kocher (:KWierso) (Not reading bugmail; email directly if needed)]

https://hg.mozilla.org/mozilla-central/rev/08b8284f7cb7

Comment 14

[Ryan VanderMeulen [:RyanVM]]

Should we consider uplifting this to Beta for the sake of our DevEdition users?

Comment 15

[Oriol Brufau [:Oriol]]

Comment on attachment 8914370 [details]
Bug 1400297 - Increase color contrast for JSON Viewer and Netmonitor headers.

Approval Request Comment
[Feature/Bug causing the regression]: Regression from bug 1398880
[User impact if declined]: Accessibility problems (WCAG-AA failures). People with color vision deficiency may not be able to read the affected text.
[Is this code covered by automated tests?]: No.
[Has the fix been verified in Nightly?]: I have manually verified this in Nightly.
[Needs manual test from QE? If yes, steps to reproduce]: See comment 0.
[List of other uplifts needed for the feature/fix]: None.
[Is the change risky?]: Very low risk.
[Why is the change risky/not risky?]: Just a small CSS color change.
[String changes made/needed]: None

Comment 16

[Ritu Kothari (:ritu) (Inactive, please n-i to RyanVM, jcristau, or pascal)]

Comment on attachment 8914370 [details]
Bug 1400297 - Increase color contrast for JSON Viewer and Netmonitor headers.

Extremely low risk polish fix, Beta57+

Comment 17

[Ryan VanderMeulen [:RyanVM]]

https://hg.mozilla.org/releases/mozilla-beta/rev/4905b457c84c

Comment 18

[Mohammad Maruf Rahman]

I have reproduced this bug with Nightly 57.0a1 (2017-09-15) on Windows 7, 64 Bit!

This bug's fix is Verified with latest Beta & latest Nightly!

Build   ID    20171102181127
User Agent    Mozilla/5.0 (Windows NT 6.1; Win64; x64; rv:57.0) Gecko/20100101 Firefox/57.0

Build   ID    20171106100122
User Agent    Mozilla/5.0 (Windows NT 6.1; Win64; x64; rv:58.0) Gecko/20100101 Firefox/58.0