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

sebastianbergmann · May 7, 2024 · 3a66772 · 3a66772
1 parent cafa435
commit 3a66772
Show file tree

Hide file tree

Showing 32 changed files with 220 additions and 211 deletions.
diff --git a/src/Report/Html/Facade.php b/src/Report/Html/Facade.php
@@ -107,8 +107,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');

diff --git a/src/Report/Html/Renderer/File.php b/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-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-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-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-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-placement="top" data-bs-html="true"',
  $popoverTitle,
  htmlspecialchars($popoverContent, $this->htmlSpecialCharsFlags),
  );

diff --git a/src/Report/Html/Renderer/Template/css/bootstrap.min.css b/src/Report/Html/Renderer/Template/css/bootstrap.min.css
diff --git a/src/Report/Html/Renderer/Template/css/style.css b/src/Report/Html/Renderer/Template/css/style.css
@@ -39,28 +39,40 @@ body {
  border: 0 !important;
 }
 
-.table tbody tr.covered-by-large-tests, li.covered-by-large-tests, tr.success, td.success, li.success, span.success {
- background-color: {{success-low}};
+.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}}; */
+ /* background-color: var(--bs-success-border-subtle); */
+ background-color: rgb(from var(--bs-success) r g b / 0.25);
 }
 
-.table tbody tr.covered-by-medium-tests, li.covered-by-medium-tests {
- background-color: {{success-medium}};
+.table tbody tr.covered-by-medium-tests td, li.covered-by-medium-tests {
+ /* background-color: {{success-medium}}; */
+ /* background-color: var(--bs-success-bg-subtle); */
+ background-color: rgb(from var(--bs-success) r g b / 0.5);
 }
 
-.table tbody tr.covered-by-small-tests, li.covered-by-small-tests {
- background-color: {{success-high}};
+.table tbody tr.covered-by-small-tests td, li.covered-by-small-tests {
+ /* background-color: {{success-high}}; */
+ /* background-color: var(--bs-success-bg-subtle); */
+ background-color: rgb(from var(--bs-success) r g b / 0.75);
 }
 
-.table tbody tr.warning, .table tbody td.warning, li.warning, span.warning {
- background-color: {{warning}};
+.table tbody tr.warning td, .table tbody td.warning, li.warning, span.warning {
+ /* background-color: {{warning}}; */
+ /* background-color: var(--bs-warning-bg-subtle); */
+ background-color: rgb(from var(--bs-warning) r g b / 0.25);
 }
 
-.table tbody tr.danger, .table tbody td.danger, li.danger, span.danger {
- background-color: {{danger}};
+.table tbody tr.danger td, .table tbody td.danger, li.danger, span.danger {
+ /* background-color: {{danger}}; */
+ /* background-color: var(--bs-danger-bg-subtle); */
+ background-color: rgb(from var(--bs-danger) r g b / 0.25);
 }
 
 .table tbody td.info {
- background-color: #d9edf7;
+ /* background-color: #d9edf7; */
+ /* background-color: var(--bs-info-bg-subtle); */
+ background-color: rgb(from var(--bs-info) r g b / 0.25);
 }
 
 td.big {
@@ -72,29 +84,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 +130,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 +146,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 +159,32 @@ table + .structure-heading {
  text-align: center;
 }
 
-.covered-by-small-tests {
- background-color: {{success-high}};
+.covered-by-small-tests, tr.covered-by-small-tests td {
+ /* background-color: {{success-high}}; */
+ /* background-color: var(--bs-success-bg-subtle); */
+ background-color: rgb(from var(--bs-success) r g b / 0.75);
 }
 
-.covered-by-medium-tests {
- background-color: {{success-medium}};
+.covered-by-medium-tests, tr.covered-by-medium-tests td {
+ /* background-color: {{success-medium}}; */
+ /* background-color: var(--bs-success-bg-subtle); */
+ background-color: rgb(from var(--bs-success) r g b / 0.5);
 }
 
-.covered-by-large-tests {
- background-color: {{success-low}};
+.covered-by-large-tests, tr.covered-by-large-tests td {
+ /* background-color: {{success-low}}; */
+ /* background-color: var(--bs-success-border-subtle); */
+ background-color: rgb(from var(--bs-success) r g b / 0.25);
 }
 
-.not-covered {
- background-color: {{danger}};
+.not-covered, tr.not-covered td {
+ /* background-color: {{danger}}; */
+ /* background-color: var(--bs-danger-bg-subtle); */
+ background-color: rgb(from var(--bs-danger) r g b / 0.25);
 }
 
-.not-coverable {
- background-color: {{warning}};
+.not-coverable, tr.not-coverable td {
+ /* background-color: {{warning}}; */
+ /* background-color: var(--bs-warning-bg-subtle); */
+ background-color: rgb(from var(--bs-warning) r g b / 0.25);
 }
diff --git a/src/Report/Html/Renderer/Template/dashboard.html.dist b/src/Report/Html/Renderer/Template/dashboard.html.dist
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" data-bs-theme="dark">
  <head>
  <meta charset="UTF-8">
  <title>Dashboard for {{full_path}}</title>

diff --git a/src/Report/Html/Renderer/Template/dashboard_branch.html.dist b/src/Report/Html/Renderer/Template/dashboard_branch.html.dist
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" data-bs-theme="dark">
  <head>
  <meta charset="UTF-8">
  <title>Dashboard for {{full_path}}</title>

diff --git a/src/Report/Html/Renderer/Template/directory.html.dist b/src/Report/Html/Renderer/Template/directory.html.dist
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" data-bs-theme="dark">
  <head>
  <meta charset="UTF-8">
  <title>Code Coverage for {{full_path}}</title>

diff --git a/src/Report/Html/Renderer/Template/directory_branch.html.dist b/src/Report/Html/Renderer/Template/directory_branch.html.dist
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" data-bs-theme="dark">
  <head>
  <meta charset="UTF-8">
  <title>Code Coverage for {{full_path}}</title>

diff --git a/src/Report/Html/Renderer/Template/file.html.dist b/src/Report/Html/Renderer/Template/file.html.dist
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" data-bs-theme="dark">
  <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>
diff --git a/src/Report/Html/Renderer/Template/file_branch.html.dist b/src/Report/Html/Renderer/Template/file_branch.html.dist
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" data-bs-theme="dark">
  <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>
diff --git a/src/Report/Html/Renderer/Template/js/bootstrap.min.js b/src/Report/Html/Renderer/Template/js/bootstrap.min.js
diff --git a/src/Report/Html/Renderer/Template/js/jquery.min.js b/src/Report/Html/Renderer/Template/js/jquery.min.js
diff --git a/src/Report/Html/Renderer/Template/js/popper.min.js b/src/Report/Html/Renderer/Template/js/popper.min.js