Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Use the same color scheme in results and interop view #423

Closed
foolip opened this issue Aug 10, 2018 · 5 comments
Closed

Use the same color scheme in results and interop view #423

foolip opened this issue Aug 10, 2018 · 5 comments
Labels
enhancement New feature or request

Comments

@foolip
Copy link
Member

foolip commented Aug 10, 2018

https://staging.wpt.fyi/results/css/css-animations looks like this:
image

https://staging.wpt.fyi/interop/css/css-animations looks like this:
image

The interop view uses a red->orange->yellow->green color scheme, where the colors are faded to white based on the proportion of the total number of tests that fall into the column.

The results view uses a red->pink->green color scheme, where total failure is red, 99% passing is pink, and 100% is green.

I'd like to suggest a more consistent color scheme for both:

  • Only 100% passing is represented as green, as before. Making 99% clearly distinct from 100% makes it easier to spot where failures are hidden.
  • The red->orange->yellow transition for 0%->99% from the interop view is used also in the results view.
  • In the interop view, we can keep fading the somewhat based on the proportion of tests falling into the bucket.
@foolip foolip added the enhancement New feature or request label Aug 17, 2018
@lukebjerring
Copy link
Contributor

Currently, we use paper colors in interop, with the alpha channel changing:
https://github.com/web-platform-tests/wpt.fyi/blob/master/webapp/components/interop.html#L209

But we use something different in wpt-results:
https://github.com/web-platform-tests/wpt.fyi/blob/master/webapp/components/wpt-results.html#L79

And, something different again in the individual files...

@foolip
Copy link
Member Author

foolip commented Sep 28, 2018

Another consideration is picking colors that work with black text. The darkest red we now use might be a tad too dark really.

@foolip foolip mentioned this issue Oct 18, 2018
@lukebjerring
Copy link
Contributor

Note that once #674 lands, badge colors will need to be consistent with these choices too.

@foolip
Copy link
Member Author

foolip commented Oct 28, 2018

In light of #674, having a discontinuity between yellow and green between 99% and 100% doesn't seem so great. In the form of a badge, it might create the incentive to defend a 100% status in a way that isn't helpful for interoperability. (This of course might happen on wpt.fyi itself as well, but seems less likely.)

https://software.hixie.ch/utilities/js/live-dom-viewer/saved/6331 is a computed red-to-green scale, which I don't find that good, in particular the yellow range is too narrow:
screen shot 2018-10-28 at 8 14 37 pm

https://software.hixie.ch/utilities/js/live-dom-viewer/saved/6332 uses a fixed palette (from paper-styles) and reserves the reddest and greenest ends for 0 / N and N / N. With that tweak and few enough colors, it's still easy to distinguish 99% from 100%:
screen shot 2018-10-28 at 8 15 50 pm

https://software.hixie.ch/utilities/js/live-dom-viewer/saved/6333 cuts out the shades between yellow and green to match my original proposal, but I don't think it's really an improvement:
screen shot 2018-10-28 at 8 13 50 pm

So, 6332 would be my updated proposal.

@foolip
Copy link
Member Author

foolip commented Oct 28, 2018

For the interop view, I think using the same colors but scaling the lightness might still work.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request
Projects
None yet
Development

No branches or pull requests

2 participants