Make colors in HTML report configurable

[sebastienbarre]

Q	A
php-code-coverage version	4.0.8
PHP version	7.0.24
Driver	Xdebug
Xdebug version (if used)	2.5.5
Installation Method	Composer
Usage Method	PHPUnit
PHPUnit version (if used)	5.7.23

Hello.
Is there an easy way to customize the colors in style.css? My variant of colorblindness make it pretty difficult to differentiate between high coverage (#dff0d8) and low coverage (#f2dede) as they both have very low saturation (8% to 10%). Thank you.

[sebastianbergmann]

The easiest way to do this would be to have a custom style.css that you copy to the target directory, for instance in the test target of your build automation.

[sebastienbarre]

I mostly do coverage manually, e.g. ./Vendor/bin/phpunit --coverage-html coverage Test/Case. Is there a configurable hook there where I could sneak a cp or something?

[sebastianbergmann]

I will look into making the colors configurable.

[sebastienbarre]

Thank you, @sebastianbergmann

[sebastianbergmann]

I just realized that my knowledge about CSS in general and Bootstrap in particular is insufficient to figure out the "right way" to change the colors of all elements affected by success, warning, and danger in style.css. In order to implement this I need someone to tell me how to do this.

[kelunik]

@sebastianbergmann Maybe we can just have better defaults instead of making it configurable? How about going with black (low) → green (high), @sebastienbarre does that work?

[matthewtrask]

I think darker reds and greens would be good? It still holds the same sumbolization but easier to see.

[kelunik]

@matthewtrask Changing the saturation / shade of both might lead to the same issues again for color blind people.

[sebastianbergmann]

I would like to keep the current colors as default.

[kelunik]

In that case I'd introduce a color mode instead of making the colors completely configurable for usability purposes.

[sebastianbergmann]

Of course. All I need is an answer to #556 (comment).

[sebastienbarre]

The current hues are standard enough (green = ok/success, yellow = warning, red = danger). It's the saturation that is a problem for me, but there are too many variations of color-blindness to make every colorblind person happy, hence my suggestion to make them customizable. PHPStorm's "Color-Deficiency Adjustment" doesn't do anything for me, for example.

@sebastianbergmann can you please clarify? The color is actually defined in one and only one place, in style.css. For insufficient/dangerous coverage (#f2dede) this is:

.table tbody tr.danger, .table tbody td.danger, li.danger, span.danger {
 background-color: #f2dede;
}

That's all there is to it. I'd just replace #f2dede with the customized color property when you copy over style.css to the destination directory.

The color should be a string and most people will use an hexadecimal representation with the # symbol included. CSS also supports things like rgb(255, 99, 71) or hsl(9, 100%, 64%) (without the #), hence the string type.

Same goes with medium coverage:

.table tbody td.warning, li.warning, span.warning {
 background-color: #fcf8e3;
}

Now for successful coverage, there are a few paths, the simple one is the same approach:

.table tbody tr.covered-by-large-tests, li.covered-by-large-tests, tr.success, td.success, li.success, span.success {
 background-color: #dff0d8;
}

where you would replace #dff0d8 with the user color when copying style.css over.

However, there are two more style definitions that "seem" to be using the same hue (green).

.table tbody tr.covered-by-medium-tests, li.covered-by-medium-tests {
 background-color: #c3e3b5;
}
.table tbody tr.covered-by-small-tests, li.covered-by-small-tests {
 background-color: #99cb84;
}

I'm not sure what they are used for (I can guess), but they are essentially darker, more saturated variations of the same hue (green):

• #dff0d8 is 102° hue (green), 10% saturation, 94% brightness (e.g. bright, low saturated)
• #c3e3b5 is 102° hue (green), 20% saturation, 89% brightness (e.g. less bright, more saturated)
• #c3e3b5 is 102° hue (green), 35% saturation, 80% brightness (e.g. even darker, even more saturated)

You can either make them configurable as well, which leaves the burden of creating the variations to the user (should it be the case, I would just use the same color for all 3 to make my life easier, but that's just me). Or you can do the math for them, by taking the base color meant to replace #dff0d8, computing the hue, and creating the two other colors by plugging that hue and using the saturation and brightness listed above (mexitek/phpColor to the rescue). However, you would potentially face the same issues, since these two colors could be problematic for some colorblind people.

Hope this helps

[saschanowak]

I would suggest to refactor the css to use css variables (https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables). The browser support is quit good today (https://caniuse.com/#feat=css-variables).

The implementation could look like this:

.table tbody tr.covered-by-large-tests, li.covered-by-large-tests, tr.success, td.success, li.success, span.success {
 background-color: #dff0d8;
 background-color: var(--color-success, #dff0d8); // IE11 should ignore this line and use the fallback 
}

Then we need to define a place where the user can configure the colors and render inline css:

<style>
:root {
  --color-success: #c3e3b5;
}
</style>

I can give it a try if someone could give me a hint where to configure the colors.