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.

Sign up for GitHub

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

Jump to bottom

Adds theme support to code coverage. #5833

Open
wants to merge 3 commits into
base: main
Choose a base branch
from
Open

Adds theme support to code coverage. #5833

wants to merge 3 commits into from

Conversation

gammamatrix
Copy link

@gammamatrix gammamatrix commented May 8, 2024 •
edited
Loading

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: wheat is an example for customCssFile and does not come with Bootstrap 5.
     

Changes

Requires: sebastianbergmann/php-code-coverage#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.xsd schema.
  • 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" />

bootstrap-theme-default

Theme: `dark` 
<html
    outputDirectory="output/html"
    lowUpperBound="50"
    highLowerBound="90"
    theme="dark" />

bootstrap-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" />

bootstrap-theme-dark-with-color-options

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)" />

bootstrap-theme-light-with-color-options

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" />

bootstrap-custom-theme-wheat-with-color-options

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?

@gammamatrix gammamatrix mentioned this pull request May 8, 2024
Open
@codecov Codecov
Copy link

codecov bot commented May 11, 2024 •
edited
Loading

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).

❗ 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 ⚠️
src/TextUI/Configuration/Configuration.php 50.00% 2 Missing ⚠️
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

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

@gammamatrix gammamatrix mentioned this pull request May 13, 2024
Merged
@gammamatrix
Copy link
Author

Now that GH-1037 was merged, I will update this branch. I will need to read up what changed to cause conflicts.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers
No reviews
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
1 participant
@gammamatrix