sebastianbergmannGH-1036 - Bootstrap 5 upgrade without theme feature.

src/Report/Html/Colors.php

@@ -22,7 +22,13 @@ final class Colors
 
     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.1)',
+            'rgb(from var(--bs-success) r g b / 0.33)',
+            'rgb(from var(--bs-success) r g b / 0.67)',
+            'rgb(from var(--bs-warning) r g b / 0.1)',
+            'rgb(from var(--bs-danger) r g b / 0.1)',
+        );
     }
 
     public static function from(string $successLow, string $successMedium, string $successHigh, string $warning, string $danger): self

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

@@ -39,28 +39,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 {
+.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: rgb(from var(--bs-info) r g b / 0.25);
 }
 
 td.big {
@@ -72,29 +72,31 @@ 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 +114,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 +127,7 @@ svg text {
 }
 
 table + .structure-heading {
- border-top: 1px solid lightgrey;
+ border-top: 1px solid var(--bs-gray-200);
  padding-top: 0.5em;
 }
 
@@ -137,22 +139,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/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>