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

Make result tables more readable #4110

Open
wants to merge 1 commit into
base: main
Choose a base branch
from

Conversation

Psychpsyo
Copy link

@Psychpsyo Psychpsyo commented Nov 10, 2024

Description

This makes the first column in tables of test results alternate between white and light gray for the background color of its rows, making it easier to see which test scores line up with which test.
The backgrounds for the scores themselves are left unaltered, as those have actual meaning.
image

Review Information

Personally, I wrote this css into the inline stylesheet on the production site (can use this page to test) and then copy-pasted it into that same inline stylesheet in the code, using the Github web-editor.
If I were reviewing this, I'd probably just do the reverse, as that sounds more straight-forward than cloning this into a dev environment and shows the change just as well.

Changes

I added a single new CSS rule in the inline stylesheet in wpt-results.js.
The rule looks like this:

tr:nth-of-type(2n) td:first-child {
    background-color: var(--paper-grey-100);
}

2n conveniently starts selecting on the second row, so that the headers don't get styled.

Requirements

You need to be able to look at the results of any test, with this rule inserted into the stylesheet.

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

Successfully merging this pull request may close these issues.

1 participant