Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update bootstrap for HTML coverage to version 4 #644

Merged
merged 1 commit into from
Oct 14, 2018
Merged

Update bootstrap for HTML coverage to version 4 #644

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
25 changes: 6 additions & 19 deletions src/Report/Html/Facade.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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');
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Glyphicons is no longer part of bootstrap, so I opted for octicons from Github instead because:

  1. It's smaller, just some small SVG files instead of large font files
  2. The icons are a bit nicer and most programmers should be familiar with them as GitHub uses them as well


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

Expand Down
6 changes: 3 additions & 3 deletions src/Report/Html/Renderer.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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()
);
Expand Down
4 changes: 2 additions & 2 deletions src/Report/Html/Renderer/Dashboard.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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()
);
}
Expand Down
8 changes: 6 additions & 2 deletions src/Report/Html/Renderer/Directory.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}
}

Expand Down
2 changes: 1 addition & 1 deletion src/Report/Html/Renderer/Template/coverage_bar.html.dist
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
9 changes: 5 additions & 4 deletions src/Report/Html/Renderer/Template/css/bootstrap.min.css
View file
Open in desktop

Large diffs are not rendered by default.

5 changes: 5 additions & 0 deletions src/Report/Html/Renderer/Template/css/octicons.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
.octicon {
display: inline-block;
vertical-align: text-top;
fill: currentColor;
}
2 changes: 1 addition & 1 deletion src/Report/Html/Renderer/Template/css/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ body {
max-width: none;
}

.glyphicon {
.octicon {
margin-right:.25em;
}

Expand Down
16 changes: 6 additions & 10 deletions src/Report/Html/Renderer/Template/dashboard.html.dist
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The ?v= everywhere are used for cache bursting in case people serve this from a web server that's caching (too) aggressively.

Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I would rather not have ?v=, to be honest.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What would you like instead? Getting the new HTML with the old CSS / JS is not going to work.

Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I trust people to be smart enough to force-reload in case the rendered report looks broken.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Okay fair enough. I'll remove it.

<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>
Expand Down Expand Up @@ -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">
Expand Down
50 changes: 24 additions & 26 deletions src/Report/Html/Renderer/Template/directory.html.dist
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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>
24 changes: 12 additions & 12 deletions src/Report/Html/Renderer/Template/directory_item.html.dist
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>

57 changes: 30 additions & 27 deletions src/Report/Html/Renderer/Template/file.html.dist
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}}
Expand All @@ -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>
26 changes: 13 additions & 13 deletions src/Report/Html/Renderer/Template/file_item.html.dist
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>

Binary file removed src/Report/Html/Renderer/Template/fonts/glyphicons-halflings-regular.eot
View file
Open in desktop
Binary file not shown.
Loading