Skip to content

Commit

Permalink
Add basic expand/collapse all to coverage reports
Browse files Browse the repository at this point in the history
  • Loading branch information
@Xenomega
Xenomega committed Feb 20, 2024
1 parent 9b279aa commit 4235db3
Showing 1 changed file with 88 additions and 55 deletions.
143 changes: 88 additions & 55 deletions fuzzing/coverage/report_template.gohtml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,6 +42,9 @@
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.button-sort {

}
.collapsible {
background-color: #777;
Expand Down Expand Up @@ -141,6 +144,15 @@
<progress class="progress-coverage" value="{{percentageStr $totalLinesCovered $totalLinesActive 0}}" max="100" style="accent-color: hsl({{$totalPercentCoverageInt}}, 100%, 60%)"></progress>
</td>
</tr>
<tr>
<th>Actions: </th>
<td>
<button class="button button-sort" onclick="setAllSourceFilesCollapsed(false)">Expand All</button>
<button class="button button-sort" onclick="setAllSourceFilesCollapsed(true)">Collapse All</button> /
<button class="button button-sort" onclick="setEmptySourceFilesCollapsed(false)">Expand Empty</button>
<button class="button button-sort" onclick="setEmptySourceFilesCollapsed(true)">Collapse Empty</button>
</td>
</tr>
</table>
</header>
<hr />
Expand All @@ -152,68 +164,61 @@
{{$linesActive := $sourceFile.ActiveLineCount}}
{{$linesCoveredPercentInt := percentageInt $linesCovered $linesActive}}

{{/* Output a collapsible header/container for each source*/}}
{{if not $linesCoveredPercentInt}}
{{/* Output a container for each source file, with a collapsible header and source container.*/}}
<div class="source-file" data-lines-active="{{$linesActive}}" data-lines-covered="{{$linesCovered}}">
<button class="collapsible">
{{/*The progress bar's color is set from HSL values (hue 0-100 is red->orange->yellow->green)*/}}
<span><progress class="progress-coverage" value="{{percentageStr $linesCovered $linesActive 0}}" max="100" style="accent-color: hsl({{$linesCoveredPercentInt}}, 100%, 60%)"></progress></span>
<span>[{{percentageStr $linesCovered $linesActive 0}}%]</span>
<span>{{relativePath $sourceFile.Path}}</span>
</button>
{{else}}
<button class="collapsible collapsible-active">
{{/*The progress bar's color is set from HSL values (hue 0-100 is red->orange->yellow->green)*/}}
<span><progress class="progress-coverage" value="{{percentageStr $linesCovered $linesActive 0}}" max="100" style="accent-color: hsl({{$linesCoveredPercentInt}}, 100%, 60%)"></progress></span>
<span>[{{percentageStr $linesCovered $linesActive 0}}%]</span>
<span>{{relativePath $sourceFile.Path}}</span>
</button>
{{end}}
<div class="collapsible-container">
<div class="collapsible-container-content">
<hr />
{{/* Output the total line coverage statistics*/}}
<table>
<tr>
<th>Lines covered: </th>
<td>{{$linesCovered}} / {{$linesActive}} ({{percentageStr $linesCovered $linesActive 1}}%)</td>
</tr>
</table>
<hr />
{{/* Output a tables with a row for each source line*/}}
<table class="code-coverage-table">
{{range $lineIndex, $line := $sourceFile.Lines}}
{{/* Create a row for this source line */}}
<div class="collapsible-container">
<div class="collapsible-container-content">
<hr />
{{/* Output the total line coverage statistics*/}}
<table>
<tr>
{{/* Output a cell for the line number */}}
<td class="row-line-number unselectable">{{add $lineIndex 1}}</td>
<th>Lines covered: </th>
<td>{{$linesCovered}} / {{$linesActive}} ({{percentageStr $linesCovered $linesActive 1}}%)</td>
</tr>
</table>
<hr />
{{/* Output a tables with a row for each source line*/}}
<table class="code-coverage-table">
{{range $lineIndex, $line := $sourceFile.Lines}}
{{/* Create a row for this source line */}}
<tr>
{{/* Output a cell for the line number */}}
<td class="row-line-number unselectable">{{add $lineIndex 1}}</td>

{{/* Output two cells for the reverted/non-reverted execution status */}}
<td class="row-reverted-status unselectable">
{{if $line.IsCovered}}
<div title="The source line executed without reverting.">√</div>
{{end}}
</td>
<td class="row-reverted-status unselectable">
{{if $line.IsCoveredReverted}}
<div title="The source line executed, but was reverted.">⟳</div>
{{end}}
</td>
{{/* Output two cells for the reverted/non-reverted execution status */}}
<td class="row-reverted-status unselectable">
{{if $line.IsCovered}}
<div title="The source line executed without reverting.">√</div>
{{end}}
</td>
<td class="row-reverted-status unselectable">
{{if $line.IsCoveredReverted}}
<div title="The source line executed, but was reverted.">⟳</div>
{{end}}
</td>

{{/* Output a cell for the source line */}}
{{/* If a source line is "active", it has a source mapping so we mark it green/red */}}
{{/* If a source line is "covered", it is green, otherwise it is red. */}}
<td class="row-source">
{{if not $line.IsActive}}
<pre>{{printf "%s" $line.Contents}}</pre>
{{else if or $line.IsCovered $line.IsCoveredReverted}}
<pre class="row-line-covered">{{printf "%s" $line.Contents}}</pre>
{{else}}
<pre class="row-line-uncovered">{{printf "%s" $line.Contents}}</pre>
{{end}}
</td>
</tr>
{{end}}
</table>
{{/* Output a cell for the source line */}}
{{/* If a source line is "active", it has a source mapping so we mark it green/red */}}
{{/* If a source line is "covered", it is green, otherwise it is red. */}}
<td class="row-source">
{{if not $line.IsActive}}
<pre>{{printf "%s" $line.Contents}}</pre>
{{else if or $line.IsCovered $line.IsCoveredReverted}}
<pre class="row-line-covered">{{printf "%s" $line.Contents}}</pre>
{{else}}
<pre class="row-line-uncovered">{{printf "%s" $line.Contents}}</pre>
{{end}}
</td>
</tr>
{{end}}
</table>
</div>
</div>
</div>
{{end}}
Expand All @@ -226,11 +231,39 @@
for (i = 0; i < collapsibleHeaders.length; i++) {
collapsibleHeaders[i].addEventListener("click", function() {
this.classList.toggle("collapsible-active");

});
}

// If there's only one item and that item has 0% coverage, expand it by default.
// Button click event handler for expanding/collapsing all files.
function setAllSourceFilesCollapsed(collapsed) {
let i;
for (i = 0; i < collapsibleHeaders.length; i++) {
if (collapsed) {
collapsibleHeaders[i].classList.remove("collapsible-active");
} else {
collapsibleHeaders[i].classList.add("collapsible-active");
}
}
}

// Button click event handler for expanding/collapsing empty files.
function setEmptySourceFilesCollapsed(collapsed) {
const sourceFiles = document.getElementsByClassName("source-file");
let i;
for (i = 0; i < sourceFiles.length; i++) {
// Verify the item is an empty source file.
if (sourceFiles[i].dataset.linesActive <= 0) {
let collapsibleHeader = sourceFiles[i].querySelector('.collapsible')
if (collapsed) {
collapsibleHeader.classList.remove("collapsible-active");
} else {
collapsibleHeader.classList.add("collapsible-active");
}
}
}
}

// If there's only one item, expand it by default.
if (collapsibleHeaders.length === 1 && !collapsibleHeaders.className.contains("collapsible-active")) {
collapsibleHeaders[0].click();
}
Expand Down

0 comments on commit 4235db3

Please sign in to comment.