Updates to Bootstrap 5 and adds theme support for code coverage.

.psalm/baseline.xml

@@ -104,6 +104,7 @@
                 'generator'        => $this->generator,
                 'low_upper_bound'  => $this->thresholds->lowUpperBound(),
                 'high_lower_bound' => $this->thresholds->highLowerBound(),
+                'theme'            => $this->theme,
             ]]]></code>
     </InvalidArgument>
     <PossiblyUndefinedArrayOffset>

src/Report/Html/Colors.php

@@ -19,24 +19,33 @@ final class Colors
     private readonly string $successHigh;
     private readonly string $warning;
     private readonly string $danger;
+    private readonly string $theme;
 
     public static function default(): self
     {
-        return new self('#dff0d8', '#c3e3b5', '#99cb84', '#fcf8e3', '#f2dede');
+        return new self(
+            'rgb(from var(--bs-success) r g b / 0.25)',
+            'rgb(from var(--bs-success) r g b / 0.5)',
+            'rgb(from var(--bs-success) r g b / 0.75)',
+            'rgb(from var(--bs-warning) r g b / 0.25)',
+            'rgb(from var(--bs-danger) r g b / 0.25)',
+            // 'dark', // or any other theme name defined in customCssFile
+        );
     }
 
-    public static function from(string $successLow, string $successMedium, string $successHigh, string $warning, string $danger): self
+    public static function from(string $successLow, string $successMedium, string $successHigh, string $warning, string $danger, string $theme = ''): self
     {
-        return new self($successLow, $successMedium, $successHigh, $warning, $danger);
+        return new self($successLow, $successMedium, $successHigh, $warning, $danger, $theme);
     }
 
-    private function __construct(string $successLow, string $successMedium, string $successHigh, string $warning, string $danger)
+    private function __construct(string $successLow, string $successMedium, string $successHigh, string $warning, string $danger, string $theme = '')
     {
         $this->successLow    = $successLow;
         $this->successMedium = $successMedium;
         $this->successHigh   = $successHigh;
         $this->warning       = $warning;
         $this->danger        = $danger;
+        $this->theme         = $theme;
     }
 
     public function successLow(): string
@@ -63,4 +72,9 @@ public function danger(): string
     {
         return $this->danger;
     }
+
+    public function theme(): string
+    {
+        return $this->theme;
+    }
 }

src/Report/Html/Facade.php

@@ -51,6 +51,7 @@ public function process(CodeCoverage $coverage, string $target): void
             $date,
             $this->thresholds,
             $coverage->collectsBranchAndPathCoverage(),
+            $this->colors->theme(),
         );
 
         $directory = new Directory(
@@ -59,6 +60,7 @@ public function process(CodeCoverage $coverage, string $target): void
             $date,
             $this->thresholds,
             $coverage->collectsBranchAndPathCoverage(),
+            $this->colors->theme(),
         );
 
         $file = new File(
@@ -67,6 +69,7 @@ public function process(CodeCoverage $coverage, string $target): void
             $date,
             $this->thresholds,
             $coverage->collectsBranchAndPathCoverage(),
+            $this->colors->theme(),
         );
 
         $directory->render($report, $target . 'index.html');
@@ -107,8 +110,7 @@ private function copyFiles(string $target): void
         copy($this->templatePath . 'icons/file-directory.svg', $dir . 'file-directory.svg');
 
         $dir = $this->directory($target . '_js');
-        copy($this->templatePath . 'js/bootstrap.min.js', $dir . 'bootstrap.min.js');
-        copy($this->templatePath . 'js/popper.min.js', $dir . 'popper.min.js');
+        copy($this->templatePath . 'js/bootstrap.bundle.min.js', $dir . 'bootstrap.bundle.min.js');
         copy($this->templatePath . 'js/d3.min.js', $dir . 'd3.min.js');
         copy($this->templatePath . 'js/jquery.min.js', $dir . 'jquery.min.js');
         copy($this->templatePath . 'js/nv.d3.min.js', $dir . 'nv.d3.min.js');

src/Report/Html/Renderer.php

@@ -33,15 +33,17 @@ abstract class Renderer
     protected Thresholds $thresholds;
     protected bool $hasBranchCoverage;
     protected string $version;
+    protected string $theme;
 
-    public function __construct(string $templatePath, string $generator, string $date, Thresholds $thresholds, bool $hasBranchCoverage)
+    public function __construct(string $templatePath, string $generator, string $date, Thresholds $thresholds, bool $hasBranchCoverage, string $theme)
     {
         $this->templatePath      = $templatePath;
         $this->generator         = $generator;
         $this->date              = $date;
         $this->thresholds        = $thresholds;
         $this->version           = Version::id();
         $this->hasBranchCoverage = $hasBranchCoverage;
+        $this->theme             = $theme;
     }
 
     protected function renderItemTemplate(Template $template, array $data): string
@@ -173,6 +175,7 @@ protected function setCommonTemplateVariables(Template $template, AbstractNode $
                 'generator'        => $this->generator,
                 'low_upper_bound'  => $this->thresholds->lowUpperBound(),
                 'high_lower_bound' => $this->thresholds->highLowerBound(),
+                'theme'            => $this->theme,
             ],
         );
     }

src/Report/Html/Renderer/File.php

@@ -548,7 +548,7 @@ private function renderSourceWithLineCoverage(FileNode $node): string
 
             if (!empty($popoverTitle)) {
                 $popover = sprintf(
-                    ' data-title="%s" data-content="%s" data-placement="top" data-html="true"',
+                    ' data-bs-title="%s" data-bs-content="%s" data-bs-placement="top" data-bs-html="true"',
                     $popoverTitle,
                     htmlspecialchars($popoverContent, $this->htmlSpecialCharsFlags),
                 );
@@ -635,7 +635,7 @@ private function renderSourceWithBranchCoverage(FileNode $node): string
                 $trClass = $lineCss . ' popin';
 
                 $popover = sprintf(
-                    ' data-title="%s" data-content="%s" data-placement="top" data-html="true"',
+                    ' data-bs-title="%s" data-bs-content="%s" data-bs-placement="top" data-bs-html="true"',
                     $popoverTitle,
                     htmlspecialchars($popoverContent, $this->htmlSpecialCharsFlags),
                 );
@@ -725,7 +725,7 @@ private function renderSourceWithPathCoverage(FileNode $node): string
                 $trClass = $lineCss . ' popin';
 
                 $popover = sprintf(
-                    ' data-title="%s" data-content="%s" data-placement="top" data-html="true"',
+                    ' data-bs-title="%s" data-bs-content="%s" data-bs-placement="top" data-bs-html="true"',
                     $popoverTitle,
                     htmlspecialchars($popoverContent, $this->htmlSpecialCharsFlags),
                 );
@@ -823,7 +823,7 @@ private function renderBranchLines(array $branch, array $codeLines, array $testD
 
             if (!empty($popoverTitle)) {
                 $popover = sprintf(
-                    ' data-title="%s" data-content="%s" data-placement="top" data-html="true"',
+                    ' data-bs-title="%s" data-bs-content="%s" data-bs-placement="top" data-bs-html="true"',
                     $popoverTitle,
                     htmlspecialchars($popoverContent, $this->htmlSpecialCharsFlags),
                 );
@@ -938,7 +938,7 @@ private function renderPathLines(array $path, array $branches, array $codeLines,
 
                 if (!empty($popoverTitle)) {
                     $popover = sprintf(
-                        ' data-title="%s" data-content="%s" data-placement="top" data-html="true"',
+                        ' data-bs-title="%s" data-bs-content="%s" data-bs-placement="top" data-bs-html="true"',
                         $popoverTitle,
                         htmlspecialchars($popoverContent, $this->htmlSpecialCharsFlags),
                     );

src/Report/Html/Renderer/Template/coverage_bar.html.dist

@@ -1,5 +1,5 @@
        <div class="progress">
          <div class="progress-bar bg-{{level}}" role="progressbar" aria-valuenow="{{percent}}" aria-valuemin="0" aria-valuemax="100" style="width: {{percent}}%">
-           <span class="sr-only">{{percent}}% covered ({{level}})</span>
+           <span class="visually-hidden">{{percent}}% covered ({{level}})</span>
          </div>
        </div>

src/Report/Html/Renderer/Template/coverage_bar_branch.html.dist

@@ -1,5 +1,5 @@
        <div class="progress">
          <div class="progress-bar bg-{{level}}" role="progressbar" aria-valuenow="{{percent}}" aria-valuemin="0" aria-valuemax="100" style="width: {{percent}}%">
-           <span class="sr-only">{{percent}}% covered ({{level}})</span>
+           <span class="visually-hidden">{{percent}}% covered ({{level}})</span>
          </div>
        </div>

src/Report/Html/Renderer/Template/css/style.css

@@ -39,28 +39,29 @@ body {
  border: 0 !important;
 }
 
-.table tbody tr.covered-by-large-tests, li.covered-by-large-tests, tr.success, td.success, li.success, span.success {
+.table tbody tr.covered-by-large-tests td, li.covered-by-large-tests, tr.success, td.success, li.success, span.success {
  background-color: {{success-low}};
 }
 
-.table tbody tr.covered-by-medium-tests, li.covered-by-medium-tests {
+.table tbody tr.covered-by-medium-tests td, li.covered-by-medium-tests {
  background-color: {{success-medium}};
 }
 
-.table tbody tr.covered-by-small-tests, li.covered-by-small-tests {
+.table tbody tr.covered-by-small-tests td, li.covered-by-small-tests {
  background-color: {{success-high}};
 }
 
-.table tbody tr.warning, .table tbody td.warning, li.warning, span.warning {
+.table tbody tr.warning td, .table tbody td.warning, li.warning, span.warning {
  background-color: {{warning}};
 }
 
-.table tbody tr.danger, .table tbody td.danger, li.danger, span.danger {
+.table tbody tr.danger td, .table tbody td.danger, li.danger, span.danger {
  background-color: {{danger}};
 }
 
 .table tbody td.info {
- background-color: #d9edf7;
+ /* background-color: #d9edf7; */
+ background-color: rgb(from var(--bs-info) r g b / 0.25);
 }
 
 td.big {
@@ -72,29 +73,35 @@ td.small {
 }
 
 td.codeLine {
- font-family: "Source Code Pro", "SFMono-Regular", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+ /* font-family: "Source Code Pro", "SFMono-Regular", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; */
+ font-family: "Source Code Pro", var(--bs-font-monospace);
  white-space: pre-wrap;
 }
 
 td span.comment {
- color: #888a85;
+ /* color: #888a85; */
+ color: var(--bs-secondary-color);
 }
 
 td span.default {
- color: #2e3436;
+ /* color: #2e3436; */
+ color: var(--bs-body-color);
 }
 
 td span.html {
- color: #888a85;
+ /* color: #888a85; */
+ color: var(--bs-secondary-color);
 }
 
 td span.keyword {
- color: #2e3436;
+ /* color: #2e3436; */
+ color: var(--bs-body-color);
  font-weight: bold;
 }
 
 pre span.string {
- color: #2e3436;
+ /* color: #2e3436; */
+ color: var(--bs-body-color);
 }
 
 span.success, span.warning, span.danger {
@@ -112,10 +119,13 @@ span.success, span.warning, span.danger {
 }
 
 svg text {
- font-family: "Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif;
+ /* font-family: "Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif; */
+ font-family: var(--bs-font-sans-serif);
  font-size: 11px;
- color: #666;
- fill: #666;
+ /* color: #666; */
+ color: var(--bs-gray);
+ /* fill: #666; */
+ fill: var(--bs-gray);
 }
 
 .scrollbox {
@@ -125,7 +135,8 @@ svg text {
 }
 
 table + .structure-heading {
- border-top: 1px solid lightgrey;
+ /* border-top: 1px solid lightgrey; */
+ border-top: 1px solid var(--bs-gray-200);
  padding-top: 0.5em;
 }
 
@@ -137,22 +148,22 @@ table + .structure-heading {
  text-align: center;
 }
 
-.covered-by-small-tests {
+.covered-by-small-tests, tr.covered-by-small-tests td {
  background-color: {{success-high}};
 }
 
-.covered-by-medium-tests {
+.covered-by-medium-tests, tr.covered-by-medium-tests td {
  background-color: {{success-medium}};
 }
 
-.covered-by-large-tests {
+.covered-by-large-tests, tr.covered-by-large-tests td {
  background-color: {{success-low}};
 }
 
-.not-covered {
+.not-covered, tr.not-covered td {
  background-color: {{danger}};
 }
 
-.not-coverable {
+.not-coverable, tr.not-coverable td {
  background-color: {{warning}};
 }

src/Report/Html/Renderer/Template/dashboard.html.dist

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" data-bs-theme="{{theme}}">
  <head>
   <meta charset="UTF-8">
   <title>Dashboard for {{full_path}}</title>

src/Report/Html/Renderer/Template/dashboard_branch.html.dist

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" data-bs-theme="{{theme}}">
  <head>
   <meta charset="UTF-8">
   <title>Dashboard for {{full_path}}</title>

src/Report/Html/Renderer/Template/directory.html.dist

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" data-bs-theme="{{theme}}">
  <head>
   <meta charset="UTF-8">
   <title>Code Coverage for {{full_path}}</title>

src/Report/Html/Renderer/Template/directory_branch.html.dist

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" data-bs-theme="{{theme}}">
  <head>
   <meta charset="UTF-8">
   <title>Code Coverage for {{full_path}}</title>

src/Report/Html/Renderer/Template/file.html.dist

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" data-bs-theme="{{theme}}">
  <head>
   <meta charset="UTF-8">
   <title>Code Coverage for {{full_path}}</title>
@@ -58,8 +58,7 @@
    </footer>
   </div>
   <script src="{{path_to_root}}_js/jquery.min.js?v={{version}}" type="text/javascript"></script>
-  <script src="{{path_to_root}}_js/popper.min.js?v={{version}}" type="text/javascript"></script>
-  <script src="{{path_to_root}}_js/bootstrap.min.js?v={{version}}" type="text/javascript"></script>
+  <script src="{{path_to_root}}_js/bootstrap.bundle.min.js?v={{version}}" type="text/javascript"></script>
   <script src="{{path_to_root}}_js/file.js?v={{version}}" type="text/javascript"></script>
  </body>
 </html>

src/Report/Html/Renderer/Template/file_branch.html.dist

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" data-bs-theme="{{theme}}">
  <head>
   <meta charset="UTF-8">
   <title>Code Coverage for {{full_path}}</title>
@@ -60,8 +60,7 @@
    </footer>
   </div>
   <script src="{{path_to_root}}_js/jquery.min.js?v={{version}}" type="text/javascript"></script>
-  <script src="{{path_to_root}}_js/popper.min.js?v={{version}}" type="text/javascript"></script>
-  <script src="{{path_to_root}}_js/bootstrap.min.js?v={{version}}" type="text/javascript"></script>
+  <script src="{{path_to_root}}_js/bootstrap.bundle.min.js?v={{version}}" type="text/javascript"></script>
   <script src="{{path_to_root}}_js/file.js?v={{version}}" type="text/javascript"></script>
  </body>
 </html>