Bootstrap 5 upgrade without theme feature.

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');

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

@@ -1,3 +1,15 @@
+:root {
+ --phpunit-breadcrumbs: var(--bs-gray-200);
+ --phpunit-success-bar: #28a745;
+ --phpunit-success-high: {{success-high}};
+ --phpunit-success-medium: {{success-medium}};
+ --phpunit-success-low: {{success-low}};
+ --phpunit-warning: {{warning}};
+ --phpunit-warning-bar: #ffc107;
+ --phpunit-danger: {{danger}};
+ --phpunit-danger-bar: #dc3545;
+}
+
 body {
  font-family: sans-serif;
  font-size: 1em;
@@ -7,6 +19,12 @@ body {
  padding-top: 10px;
 }
 
+nav .breadcrumb {
+ border-radius: var(--bs-border-radius);
+ background-color: var(--phpunit-breadcrumbs);
+ padding: .75rem 1rem;
+}
+
 .popover {
  max-width: none;
 }
@@ -39,28 +57,28 @@ 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, .table tbody tr.covered-by-large-tests td, li.covered-by-large-tests, tr.success, tr.success td, td.success, li.success, span.success {
+ background-color: var(--phpunit-success-low);
 }
 
-.table tbody tr.covered-by-medium-tests, li.covered-by-medium-tests {
- background-color: {{success-medium}};
+.table tbody tr.covered-by-medium-tests, .table tbody tr.covered-by-medium-tests td, li.covered-by-medium-tests {
+ background-color: var(--phpunit-success-medium);
 }
 
-.table tbody tr.covered-by-small-tests, li.covered-by-small-tests {
- background-color: {{success-high}};
+.table tbody tr.covered-by-small-tests, .table tbody tr.covered-by-small-tests td, li.covered-by-small-tests {
+ background-color: var(--phpunit-success-high);
 }
 
-.table tbody tr.warning, .table tbody td.warning, li.warning, span.warning {
- background-color: {{warning}};
+.table tbody tr.warning, .table tbody tr.warning td, .table tbody td.warning, li.warning, span.warning {
+ background-color: var(--phpunit-warning);
 }
 
-.table tbody tr.danger, .table tbody td.danger, li.danger, span.danger {
- background-color: {{danger}};
+.table tbody tr.danger, .table tbody tr.danger td, .table tbody td.danger, li.danger, span.danger {
+ background-color: var(--phpunit-danger);
 }
 
 .table tbody td.info {
- background-color: #d9edf7;
+ background-color: rgb(from var(--bs-info) r g b / 0.25);
 }
 
 td.big {
@@ -72,29 +90,29 @@ td.small {
 }
 
 td.codeLine {
- 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: var(--bs-secondary-color);
 }
 
 td span.default {
- color: #2e3436;
+ color: var(--bs-body-color);
 }
 
 td span.html {
- color: #888a85;
+ color: var(--bs-secondary-color);
 }
 
 td span.keyword {
- color: #2e3436;
+ color: var(--bs-body-color);
  font-weight: bold;
 }
 
 pre span.string {
- color: #2e3436;
+ color: var(--bs-body-color);
 }
 
 span.success, span.warning, span.danger {
@@ -112,10 +130,10 @@ span.success, span.warning, span.danger {
 }
 
 svg text {
- 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: var(--bs-gray);
+ fill: var(--bs-gray);
 }
 
 .scrollbox {
@@ -125,7 +143,7 @@ svg text {
 }
 
 table + .structure-heading {
- border-top: 1px solid lightgrey;
+ border-top: 1px solid var(--bs-gray-200);
  padding-top: 0.5em;
 }
 
@@ -138,21 +156,33 @@ table + .structure-heading {
 }
 
 .covered-by-small-tests {
- background-color: {{success-high}};
+ background-color: var(--phpunit-success-high);
 }
 
 .covered-by-medium-tests {
- background-color: {{success-medium}};
+ background-color: var(--phpunit-success-medium);
 }
 
 .covered-by-large-tests {
- background-color: {{success-low}};
+ background-color: var(--phpunit-success-low);
 }
 
 .not-covered {
- background-color: {{danger}};
+ background-color: var(--phpunit-danger);
 }
 
 .not-coverable {
- background-color: {{warning}};
+ background-color: var(--phpunit-warning);
 }
+
+.progress-bar.bg-success {
+ background-color: var(--phpunit-success-bar) !important;
+}
+
+.progress-bar.bg-warning {
+ background-color: var(--phpunit-warning-bar) !important;
+}
+
+.progress-bar.bg-danger {
+ background-color: var(--phpunit-danger-bar) !important;
+}

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

@@ -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

@@ -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>

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

@@ -1 +1 @@
- <tr class="{{class}} d-flex"><td {{popover}} class="col-1 text-right"><a id="{{lineNumber}}" href="#{{lineNumber}}">{{lineNumber}}</a></td><td class="col-11 codeLine">{{lineContent}}</td></tr>
+ <tr class="{{class}} d-flex"><td {{popover}} class="col-1 text-end"><a id="{{lineNumber}}" href="#{{lineNumber}}">{{lineNumber}}</a></td><td class="col-11 codeLine">{{lineContent}}</td></tr>