sebastianbergmann
Adds theme support to code coverage.
Requirements and Specifications
php-code-coverage currently uses Bootstrap 4 to render HTML code coverage reports.
Bootstrap 5 introduces CSS Variables and adds Color Modes for Themes.
Bootstrap sets the color mode (theme) in the top level html tag.
<html lang="en" data-bs-theme="">
<html lang="en" data-bs-theme="light">
<html lang="en" data-bs-theme="dark">
<html lang="en" data-bs-theme="wheat">
- With the php-code-coverage PR-1036, you can manually edit the theme to see the example screenshots provided in this proposal.
- NOTE:
wheatis an example forcustomCssFileand does not come with Bootstrap 5.
Changes
Requires: https://github.com/sebastianbergmann/php-code-coverage/pull/1036
- This pull request is required before the changes may be implemented in this branch.
phpunit.xsd
Proposed changes:
<xs:complexType name="coverageReportHtmlType">
<xs:attribute name="outputDirectory" type="xs:anyURI" use="required"/>
<xs:attribute name="lowUpperBound" type="xs:integer" default="50"/>
<xs:attribute name="highLowerBound" type="xs:integer" default="90"/>
<xs:attribute name="colorSuccessLow" type="xs:string"/>
<xs:attribute name="colorSuccessMedium" type="xs:string"/>
<xs:attribute name="colorSuccessHigh" type="xs:string"/>
<xs:attribute name="colorWarning" type="xs:string"/>
<xs:attribute name="colorDanger" type="xs:string"/>
<xs:attribute name="customCssFile" type="xs:string"/>
<xs:attribute name="theme" type="xs:string"/>
</xs:complexType>
- Add the theme option in code coverage.
- The default colors have changed to align with Bootstrap 5 theme compatibility, including the Bootstrap 5 Progress Bars and Bootstrap 5 Popovers.
- The default colors no longer need to be specified in the
phpunit.xsdschema. - This should work for backwards compatibility.
Default Color Modes
Bootstrap 5 comes with two color modes (themes), dark and the default: light.
Theme: `default` (light)
<html
outputDirectory="output/html"
lowUpperBound="50"
highLowerBound="90" />
<html
outputDirectory="output/html"
lowUpperBound="50"
highLowerBound="90"
theme="light" />
Theme: `dark`
<html
outputDirectory="output/html"
lowUpperBound="50"
highLowerBound="90"
theme="dark" />
Theme: `dark` - with color override options from phpunit.xml
<html
outputDirectory="output/html"
lowUpperBound="50"
highLowerBound="90"
colorSuccessLow="rgb(from var(--bs-purple) r g b / 0.75)"
colorSuccessMedium="rgb(from var(--bs-blue) r g b / 0.55)"
colorSuccessHigh="rgb(from var(--bs-teal) r g b / 0.25)"
colorWarning="rgb(from var(--bs-warning) r g b / 0.25)"
colorDanger="rgb(from var(--bs-danger) r g b / 0.25)"
theme="dark" />
Theme: `light` - with color override options from phpunit.xml
<html
outputDirectory="output/html"
lowUpperBound="50"
highLowerBound="90"
customCssFile="./phpunit-themes.css"
colorSuccessLow="rgb(from var(--bs-purple) r g b / 0.75)"
colorSuccessMedium="rgb(from var(--bs-blue) r g b / 0.55)"
colorSuccessHigh="rgb(from var(--bs-teal) r g b / 0.25)"
colorWarning="rgb(from var(--bs-warning) r g b / 0.25)"
colorDanger="rgb(from var(--bs-danger) r g b / 0.25)" />
Custom Theme: `wheat` - with color override options from phpunit.xml
<html
outputDirectory="output/html"
lowUpperBound="50"
highLowerBound="90"
customCssFile="./phpunit-themes.css"
colorSuccessLow="rgb(from var(--bs-purple) r g b / 0.75)"
colorSuccessMedium="rgb(from var(--bs-blue) r g b / 0.55)"
colorSuccessHigh="rgb(from var(--bs-teal) r g b / 0.25)"
colorWarning="rgb(from var(--bs-warning) r g b / 0.25)"
colorDanger="rgb(from var(--bs-danger) r g b / 0.25)"
theme="wheat" />
Multiple themes may be put in the customCssFile option.
Here is an example custom theme called wheat.
[data-bs-theme="wheat"] {
color-scheme: wheat;
--bs-body-color: #2f4f4f;
--bs-body-color-rgb: 47, 79, 79;
--bs-border-color: #2f4f4f;
--bs-border-color-translucent: rgba(47, 79, 79, 0.175);
--bs-body-bg: #f5deb3;
--bs-body-bg-rgb: rgba(245, 222, 179, 50);
--bs-emphasis-color: #3f2f4f;
--bs-emphasis-color-rgb: 63, 47, 79;
--bs-secondary-color: rgba(63, 79, 47, 0.75);
--bs-secondary-color-rgb: 63, 79, 47;
--bs-secondary-bg: #f5b3eb;
--bs-secondary-bg-rgb: 245, 179, 235;
--bs-tertiary-color: rgba(222, 226, 230, 0.5);
--bs-tertiary-color-rgb: 222, 226, 230;
--bs-tertiary-bg: #b3f5bd;
--bs-tertiary-bg-rgb: 179, 245, 189;
}
Dev Notes
- Maybe setting the theme value should have some type of regex sanitation for a valid slug name?
Codecov Report
Attention: Patch coverage is 50.00000% with 6 lines in your changes are missing coverage. Please review.
Project coverage is 91.86%. Comparing base (
3dd4455) to head (8dccbc7).
:exclamation: Current head 8dccbc7 differs from pull request most recent head d88c33c. Consider uploading reports for the commit d88c33c to get more accurate results
| Files | Patch % | Lines |
|---|---|---|
| ...tUI/Configuration/Xml/CodeCoverage/Report/Html.php | 0.00% | 4 Missing :warning: |
| src/TextUI/Configuration/Configuration.php | 50.00% | 2 Missing :warning: |
Additional details and impacted files
@@ Coverage Diff @@
## main #5833 +/- ##
============================================
- Coverage 91.87% 91.86% -0.02%
+ Complexity 6568 6567 -1
============================================
Files 700 698 -2
Lines 19848 19851 +3
============================================
Hits 18236 18236
- Misses 1612 1615 +3
:umbrella: View full report in Codecov by Sentry.
:loudspeaker: Have feedback on the report? Share it here.
![codecov[bot] avatar](https://avatars.githubusercontent.com/in/254?v=4 "Published by a pub.dev verified publisher"){kind=small}
Now that GH-1037 was merged, I will update this branch. I will need to read up what changed to cause conflicts.