Update bootstrap for HTML coverage to version 4

sebastianbergmann · Oct 14, 2018 · 20d38b8 · 20d38b8
1 parent daeb271
commit 20d38b8
Show file tree

Hide file tree

Showing 36 changed files with 621 additions and 1,262 deletions.
diff --git a/src/Report/Html/Facade.php b/src/Report/Html/Facade.php
@@ -120,35 +120,22 @@ private function copyFiles(string $target): void
     {
         $dir = $this->getDirectory($target . '.css');
 
-        \file_put_contents(
-            $dir . 'bootstrap.min.css',
-            \str_replace(
-                'url(../fonts/',
-                'url(../.fonts/',
-                \file_get_contents($this->templatePath . 'css/bootstrap.min.css')
-            )
-
-        );
-
+        \copy($this->templatePath . 'css/bootstrap.min.css', $dir . 'bootstrap.min.css');
         \copy($this->templatePath . 'css/nv.d3.min.css', $dir . 'nv.d3.min.css');
         \copy($this->templatePath . 'css/style.css', $dir . 'style.css');
         \copy($this->templatePath . 'css/custom.css', $dir . 'custom.css');
+        \copy($this->templatePath . 'css/octicons.css', $dir . 'octicons.css');
 
-        $dir = $this->getDirectory($target . '.fonts');
-        \copy($this->templatePath . 'fonts/glyphicons-halflings-regular.eot', $dir . 'glyphicons-halflings-regular.eot');
-        \copy($this->templatePath . 'fonts/glyphicons-halflings-regular.svg', $dir . 'glyphicons-halflings-regular.svg');
-        \copy($this->templatePath . 'fonts/glyphicons-halflings-regular.ttf', $dir . 'glyphicons-halflings-regular.ttf');
-        \copy($this->templatePath . 'fonts/glyphicons-halflings-regular.woff', $dir . 'glyphicons-halflings-regular.woff');
-        \copy($this->templatePath . 'fonts/glyphicons-halflings-regular.woff2', $dir . 'glyphicons-halflings-regular.woff2');
+        $dir = $this->getDirectory($target . '.icons');
+        \copy($this->templatePath . 'icons/file-code.svg', $dir . 'file-code.svg');
+        \copy($this->templatePath . 'icons/file-directory.svg', $dir . 'file-directory.svg');
 
         $dir = $this->getDirectory($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/d3.min.js', $dir . 'd3.min.js');
-        \copy($this->templatePath . 'js/holder.min.js', $dir . 'holder.min.js');
-        \copy($this->templatePath . 'js/html5shiv.min.js', $dir . 'html5shiv.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');
-        \copy($this->templatePath . 'js/respond.min.js', $dir . 'respond.min.js');
         \copy($this->templatePath . 'js/file.js', $dir . 'file.js');
     }
 

diff --git a/src/Report/Html/Renderer.php b/src/Report/Html/Renderer.php
@@ -185,12 +185,12 @@ protected function getBreadcrumbs(AbstractNode $node): string
     protected function getActiveBreadcrumb(AbstractNode $node): string
     {
         $buffer = \sprintf(
-            '        <li class="active">%s</li>' . "\n",
+            '         <li class="breadcrumb-item active">%s</li>' . "\n",
             $node->getName()
         );
 
         if ($node instanceof DirectoryNode) {
-            $buffer .= '        <li>(<a href="dashboard.html">Dashboard</a>)</li>' . "\n";
+            $buffer .= '         <li class="breadcrumb-item">(<a href="dashboard.html">Dashboard</a>)</li>' . "\n";
         }
 
         return $buffer;
@@ -199,7 +199,7 @@ protected function getActiveBreadcrumb(AbstractNode $node): string
     protected function getInactiveBreadcrumb(AbstractNode $node, string $pathToRoot): string
     {
         return \sprintf(
-            '        <li><a href="%sindex.html">%s</a></li>' . "\n",
+            '         <li class="breadcrumb-item"><a href="%sindex.html">%s</a></li>' . "\n",
             $pathToRoot,
             $node->getName()
         );

diff --git a/src/Report/Html/Renderer/Dashboard.php b/src/Report/Html/Renderer/Dashboard.php
@@ -273,8 +273,8 @@ protected function projectRisks(array $classes, string $baseLink): array
     protected function getActiveBreadcrumb(AbstractNode $node): string
     {
         return \sprintf(
-            '        <li><a href="index.html">%s</a></li>' . "\n" .
-            '        <li class="active">(Dashboard)</li>' . "\n",
+            '         <li class="breadcrumb-item"><a href="index.html">%s</a></li>' . "\n" .
+            '         <li class="breadcrumb-item active">(Dashboard)</li>' . "\n",
             $node->getName()
         );
     }

diff --git a/src/Report/Html/Renderer/Directory.php b/src/Report/Html/Renderer/Directory.php
@@ -74,15 +74,19 @@ protected function renderItem(Node $node, bool $total = false): string
                     $node->getName()
                 );
 
-                $data['icon'] = '<span class="glyphicon glyphicon-folder-open"></span> ';
+                $up = \str_repeat('../', \count($node->getPathAsArray()) - 2);
+
+                $data['icon'] = \sprintf('<img src="%s.icons/file-directory.svg" class="octicon" />', $up);
             } else {
                 $data['name'] = \sprintf(
                     '<a href="%s.html">%s</a>',
                     $node->getName(),
                     $node->getName()
                 );
 
-                $data['icon'] = '<span class="glyphicon glyphicon-file"></span> ';
+                $up = str_repeat('../', \count($node->getPathAsArray()) - 2);
+
+                $data['icon'] = \sprintf('<img src="%s.icons/file-code.svg" class="octicon" />', $up);
             }
         }
 

diff --git a/src/Report/Html/Renderer/Template/coverage_bar.html.dist b/src/Report/Html/Renderer/Template/coverage_bar.html.dist
@@ -1,5 +1,5 @@
        <div class="progress">
-         <div class="progress-bar progress-bar-{{level}}" role="progressbar" aria-valuenow="{{percent}}" aria-valuemin="0" aria-valuemax="100" style="width: {{percent}}%">
+         <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>
          </div>
        </div>
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/octicons.css b/src/Report/Html/Renderer/Template/css/octicons.css
@@ -0,0 +1,5 @@
+.octicon {
+  display: inline-block;
+  vertical-align: text-top;
+  fill: currentColor;
+}
diff --git a/src/Report/Html/Renderer/Template/css/style.css b/src/Report/Html/Renderer/Template/css/style.css
@@ -6,7 +6,7 @@ body {
  max-width: none;
 }
 
-.glyphicon {
+.octicon {
  margin-right:.25em;
 }
 

diff --git a/src/Report/Html/Renderer/Template/dashboard.html.dist b/src/Report/Html/Renderer/Template/dashboard.html.dist
@@ -4,23 +4,21 @@
   <meta charset="UTF-8">
   <title>Dashboard for {{full_path}}</title>
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <link href="{{path_to_root}}.css/bootstrap.min.css" rel="stylesheet" type="text/css">
+  <link href="{{path_to_root}}.css/bootstrap.min.css?v=4.1.3" rel="stylesheet" type="text/css">
   <link href="{{path_to_root}}.css/nv.d3.min.css" rel="stylesheet" type="text/css">
   <link href="{{path_to_root}}.css/style.css" rel="stylesheet" type="text/css">
   <link href="{{path_to_root}}.css/custom.css" rel="stylesheet" type="text/css">
-  <!--[if lt IE 9]>
-  <script src="{{path_to_root}}.js/html5shiv.min.js"></script>
-  <script src="{{path_to_root}}.js/respond.min.js"></script>
-  <![endif]-->
  </head>
  <body>
   <header>
    <div class="container">
     <div class="row">
      <div class="col-md-12">
-      <ol class="breadcrumb">
+      <nav aria-label="breadcrumb">
+       <ol class="breadcrumb">
 {{breadcrumbs}}
-      </ol>
+       </ol>
+      </nav>
      </div>
     </div>
    </div>
@@ -139,9 +137,7 @@
     </p>
    </footer>
   </div>
-  <script src="{{path_to_root}}.js/jquery.min.js" type="text/javascript"></script>
-  <script src="{{path_to_root}}.js/bootstrap.min.js" type="text/javascript"></script>
-  <script src="{{path_to_root}}.js/holder.min.js" type="text/javascript"></script>
+  <script src="{{path_to_root}}.js/jquery.min.js?v=3.3.1" type="text/javascript"></script>
   <script src="{{path_to_root}}.js/d3.min.js" type="text/javascript"></script>
   <script src="{{path_to_root}}.js/nv.d3.min.js" type="text/javascript"></script>
   <script type="text/javascript">

diff --git a/src/Report/Html/Renderer/Template/directory.html.dist b/src/Report/Html/Renderer/Template/directory.html.dist
@@ -4,44 +4,45 @@
   <meta charset="UTF-8">
   <title>Code Coverage for {{full_path}}</title>
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <link href="{{path_to_root}}.css/bootstrap.min.css" rel="stylesheet" type="text/css">
+  <link href="{{path_to_root}}.css/bootstrap.min.css?v=4.1.3" rel="stylesheet" type="text/css">
+  <link href="{{path_to_root}}.css/octicons.css?v=8.1.0" rel="stylesheet" type="text/css">
   <link href="{{path_to_root}}.css/style.css" rel="stylesheet" type="text/css">
   <link href="{{path_to_root}}.css/custom.css" rel="stylesheet" type="text/css">
-  <!--[if lt IE 9]>
-  <script src="{{path_to_root}}.js/html5shiv.min.js"></script>
-  <script src="{{path_to_root}}.js/respond.min.js"></script>
-  <![endif]-->
  </head>
  <body>
   <header>
    <div class="container">
     <div class="row">
      <div class="col-md-12">
-      <ol class="breadcrumb">
+      <nav aria-label="breadcrumb">
+       <ol class="breadcrumb">
 {{breadcrumbs}}
-      </ol>
+       </ol>
+      </nav>
      </div>
     </div>
    </div>
   </header>
   <div class="container">
-   <table class="table table-bordered">
-    <thead>
-     <tr>
-      <td>&nbsp;</td>
-      <td colspan="9"><div align="center"><strong>Code Coverage</strong></div></td>
-     </tr>
-     <tr>
-      <td>&nbsp;</td>
-      <td colspan="3"><div align="center"><strong>Lines</strong></div></td>
-      <td colspan="3"><div align="center"><strong>Functions and Methods</strong></div></td>
-      <td colspan="3"><div align="center"><strong>Classes and Traits</strong></div></td>
-     </tr>
-    </thead>
-    <tbody>
+   <div class="table-responsive-md">
+    <table class="table table-bordered">
+     <thead>
+      <tr>
+       <td>&nbsp;</td>
+       <td colspan="9"><div align="center"><strong>Code Coverage</strong></div></td>
+      </tr>
+      <tr>
+       <td>&nbsp;</td>
+       <td colspan="3"><div align="center"><strong>Lines</strong></div></td>
+       <td colspan="3"><div align="center"><strong>Functions and Methods</strong></div></td>
+       <td colspan="3"><div align="center"><strong>Classes and Traits</strong></div></td>
+      </tr>
+     </thead>
+     <tbody>
 {{items}}
-    </tbody>
-   </table>
+     </tbody>
+    </table>
+   </div>
    <footer>
     <hr/>
     <h4>Legend</h4>
@@ -55,8 +56,5 @@
     </p>
    </footer>
   </div>
-  <script src="{{path_to_root}}.js/jquery.min.js" type="text/javascript"></script>
-  <script src="{{path_to_root}}.js/bootstrap.min.js" type="text/javascript"></script>
-  <script src="{{path_to_root}}.js/holder.min.js" type="text/javascript"></script>
  </body>
 </html>
diff --git a/src/Report/Html/Renderer/Template/directory_item.html.dist b/src/Report/Html/Renderer/Template/directory_item.html.dist
@@ -1,13 +1,13 @@
-     <tr>
-      <td class="{{lines_level}}">{{icon}}{{name}}</td>
-      <td class="{{lines_level}} big">{{lines_bar}}</td>
-      <td class="{{lines_level}} small"><div align="right">{{lines_executed_percent}}</div></td>
-      <td class="{{lines_level}} small"><div align="right">{{lines_number}}</div></td>
-      <td class="{{methods_level}} big">{{methods_bar}}</td>
-      <td class="{{methods_level}} small"><div align="right">{{methods_tested_percent}}</div></td>
-      <td class="{{methods_level}} small"><div align="right">{{methods_number}}</div></td>
-      <td class="{{classes_level}} big">{{classes_bar}}</td>
-      <td class="{{classes_level}} small"><div align="right">{{classes_tested_percent}}</div></td>
-      <td class="{{classes_level}} small"><div align="right">{{classes_number}}</div></td>
-     </tr>
+      <tr>
+       <td class="{{lines_level}}">{{icon}}{{name}}</td>
+       <td class="{{lines_level}} big">{{lines_bar}}</td>
+       <td class="{{lines_level}} small"><div align="right">{{lines_executed_percent}}</div></td>
+       <td class="{{lines_level}} small"><div align="right">{{lines_number}}</div></td>
+       <td class="{{methods_level}} big">{{methods_bar}}</td>
+       <td class="{{methods_level}} small"><div align="right">{{methods_tested_percent}}</div></td>
+       <td class="{{methods_level}} small"><div align="right">{{methods_number}}</div></td>
+       <td class="{{classes_level}} big">{{classes_bar}}</td>
+       <td class="{{classes_level}} small"><div align="right">{{classes_tested_percent}}</div></td>
+       <td class="{{classes_level}} small"><div align="right">{{classes_number}}</div></td>
+      </tr>
 
diff --git a/src/Report/Html/Renderer/Template/file.html.dist b/src/Report/Html/Renderer/Template/file.html.dist
@@ -4,44 +4,45 @@
   <meta charset="UTF-8">
   <title>Code Coverage for {{full_path}}</title>
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <link href="{{path_to_root}}.css/bootstrap.min.css" rel="stylesheet" type="text/css">
+  <link href="{{path_to_root}}.css/bootstrap.min.css?v=4.1.3" rel="stylesheet" type="text/css">
+  <link href="{{path_to_root}}.css/octicons.css?v=8.1.0" rel="stylesheet" type="text/css">
   <link href="{{path_to_root}}.css/style.css" rel="stylesheet" type="text/css">
   <link href="{{path_to_root}}.css/custom.css" rel="stylesheet" type="text/css">
-  <!--[if lt IE 9]>
-  <script src="{{path_to_root}}.js/html5shiv.min.js"></script>
-  <script src="{{path_to_root}}.js/respond.min.js"></script>
-  <![endif]-->
  </head>
  <body>
   <header>
    <div class="container">
     <div class="row">
      <div class="col-md-12">
-      <ol class="breadcrumb">
+      <nav aria-label="breadcrumb">
+       <ol class="breadcrumb">
 {{breadcrumbs}}
-      </ol>
+       </ol>
+      </nav>
      </div>
     </div>
    </div>
   </header>
   <div class="container">
-   <table class="table table-bordered">
-    <thead>
-     <tr>
-      <td>&nbsp;</td>
-      <td colspan="10"><div align="center"><strong>Code Coverage</strong></div></td>
-     </tr>
-     <tr>
-      <td>&nbsp;</td>
-      <td colspan="3"><div align="center"><strong>Classes and Traits</strong></div></td>
-      <td colspan="4"><div align="center"><strong>Functions and Methods</strong></div></td>
-      <td colspan="3"><div align="center"><strong>Lines</strong></div></td>
-     </tr>
-    </thead>
-    <tbody>
+   <div class="table-responsive-md">
+    <table class="table table-bordered">
+     <thead>
+      <tr>
+       <td>&nbsp;</td>
+       <td colspan="10"><div align="center"><strong>Code Coverage</strong></div></td>
+      </tr>
+      <tr>
+       <td>&nbsp;</td>
+       <td colspan="3"><div align="center"><strong>Classes and Traits</strong></div></td>
+       <td colspan="4"><div align="center"><strong>Functions and Methods</strong></div></td>
+       <td colspan="3"><div align="center"><strong>Lines</strong></div></td>
+      </tr>
+     </thead>
+     <tbody>
 {{items}}
-    </tbody>
-   </table>
+     </tbody>
+    </table>
+   </div>
    <table id="code" class="table table-borderless table-condensed">
     <tbody>
 {{lines}}
@@ -58,12 +59,14 @@
     <p>
      <small>Generated by <a href="https://github.com/sebastianbergmann/php-code-coverage" target="_top">php-code-coverage {{version}}</a> using {{runtime}}{{generator}} at {{date}}.</small>
     </p>
-    <a title="Back to the top" id="toplink" href="#"><span class="glyphicon glyphicon-arrow-up"></span></a>
+    <a title="Back to the top" id="toplink" href="#">
+        <svg xmlns="http://www.w3.org/2000/svg" width="12" height="16" viewBox="0 0 12 16"><path fill-rule="evenodd" d="M12 11L6 5l-6 6h12z"/></svg>
+    </a>
    </footer>
   </div>
-  <script src="{{path_to_root}}.js/jquery.min.js" type="text/javascript"></script>
-  <script src="{{path_to_root}}.js/bootstrap.min.js" type="text/javascript"></script>
-  <script src="{{path_to_root}}.js/holder.min.js" type="text/javascript"></script>
+  <script src="{{path_to_root}}.js/jquery.min.js?v=3.3.1" type="text/javascript"></script>
+  <script src="{{path_to_root}}.js/popper.min.js?v=1.14.3" type="text/javascript"></script>
+  <script src="{{path_to_root}}.js/bootstrap.min.js?v=4.1.3" type="text/javascript"></script>
   <script src="{{path_to_root}}.js/file.js" type="text/javascript"></script>
  </body>
 </html>
diff --git a/src/Report/Html/Renderer/Template/file_item.html.dist b/src/Report/Html/Renderer/Template/file_item.html.dist
@@ -1,14 +1,14 @@
-     <tr>
-      <td class="{{classes_level}}">{{name}}</td>
-      <td class="{{classes_level}} big">{{classes_bar}}</td>
-      <td class="{{classes_level}} small"><div align="right">{{classes_tested_percent}}</div></td>
-      <td class="{{classes_level}} small"><div align="right">{{classes_number}}</div></td>
-      <td class="{{methods_level}} big">{{methods_bar}}</td>
-      <td class="{{methods_level}} small"><div align="right">{{methods_tested_percent}}</div></td>
-      <td class="{{methods_level}} small"><div align="right">{{methods_number}}</div></td>
-      <td class="{{methods_level}} small">{{crap}}</td>
-      <td class="{{lines_level}} big">{{lines_bar}}</td>
-      <td class="{{lines_level}} small"><div align="right">{{lines_executed_percent}}</div></td>
-      <td class="{{lines_level}} small"><div align="right">{{lines_number}}</div></td>
-     </tr>
+      <tr>
+       <td class="{{classes_level}}">{{name}}</td>
+       <td class="{{classes_level}} big">{{classes_bar}}</td>
+       <td class="{{classes_level}} small"><div align="right">{{classes_tested_percent}}</div></td>
+       <td class="{{classes_level}} small"><div align="right">{{classes_number}}</div></td>
+       <td class="{{methods_level}} big">{{methods_bar}}</td>
+       <td class="{{methods_level}} small"><div align="right">{{methods_tested_percent}}</div></td>
+       <td class="{{methods_level}} small"><div align="right">{{methods_number}}</div></td>
+       <td class="{{methods_level}} small">{{crap}}</td>
+       <td class="{{lines_level}} big">{{lines_bar}}</td>
+       <td class="{{lines_level}} small"><div align="right">{{lines_executed_percent}}</div></td>
+       <td class="{{lines_level}} small"><div align="right">{{lines_number}}</div></td>
+      </tr>
 
diff --git a/src/Report/Html/Renderer/Template/fonts/glyphicons-halflings-regular.eot b/src/Report/Html/Renderer/Template/fonts/glyphicons-halflings-regular.eot