Simplify HTML coverage report styling to use minimal default styles
Remove fancy styling (rounded corners, shadows, progress bars, colors) and use simple, clean HTML with basic tables and minimal CSS. Changes: - Use simple sans-serif font instead of Segoe UI - Remove container divs, shadows, and rounded corners - Replace progress bars with plain percentage text - Simplify color scheme (light green/red for branch coverage) - Remove emoji and decorative elements - Clean up table styling to basic borders The report is now much cleaner and follows standard HTML conventions.
This commit is contained in:
Claude
@@ -14,136 +14,19 @@ cat > "$OUTPUT_DIR/index.html" <<'HTMLHEADER'
|
||||
<meta charset="UTF-8">
|
||||
<title>Branch Coverage Report</title>
|
||||
<style>
|
||||
body {
|
||||
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||||
margin: 20px;
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
.container {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
background-color: white;
|
||||
padding: 30px;
|
||||
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
||||
border-radius: 8px;
|
||||
}
|
||||
h1 {
|
||||
color: #333;
|
||||
border-bottom: 3px solid #4CAF50;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
h2 {
|
||||
color: #555;
|
||||
margin-top: 30px;
|
||||
}
|
||||
table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
margin: 20px 0;
|
||||
}
|
||||
th, td {
|
||||
padding: 12px;
|
||||
text-align: left;
|
||||
border-bottom: 1px solid #ddd;
|
||||
}
|
||||
th {
|
||||
background-color: #4CAF50;
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
}
|
||||
tr:hover {
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
.file-link {
|
||||
color: #2196F3;
|
||||
text-decoration: none;
|
||||
font-weight: 500;
|
||||
}
|
||||
.file-link:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
.coverage-bar {
|
||||
height: 20px;
|
||||
background-color: #e0e0e0;
|
||||
border-radius: 10px;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
.coverage-fill {
|
||||
height: 100%;
|
||||
background-color: #4CAF50;
|
||||
transition: width 0.3s ease;
|
||||
}
|
||||
.coverage-low { background-color: #f44336; }
|
||||
.coverage-medium { background-color: #ff9800; }
|
||||
.coverage-high { background-color: #4CAF50; }
|
||||
.coverage-text {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
line-height: 20px;
|
||||
font-size: 12px;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
}
|
||||
.summary {
|
||||
background-color: #e8f5e9;
|
||||
padding: 20px;
|
||||
border-radius: 5px;
|
||||
margin: 20px 0;
|
||||
}
|
||||
.summary h3 {
|
||||
margin-top: 0;
|
||||
color: #2e7d32;
|
||||
}
|
||||
.stat {
|
||||
font-size: 18px;
|
||||
margin: 10px 0;
|
||||
}
|
||||
code {
|
||||
background-color: #f5f5f5;
|
||||
padding: 2px 6px;
|
||||
border-radius: 3px;
|
||||
font-family: 'Courier New', monospace;
|
||||
}
|
||||
.source-code {
|
||||
background-color: #f8f8f8;
|
||||
padding: 15px;
|
||||
border-radius: 5px;
|
||||
overflow-x: auto;
|
||||
font-family: 'Courier New', monospace;
|
||||
font-size: 13px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
.line-number {
|
||||
color: #999;
|
||||
display: inline-block;
|
||||
width: 50px;
|
||||
text-align: right;
|
||||
margin-right: 15px;
|
||||
user-select: none;
|
||||
}
|
||||
.branch-taken {
|
||||
background-color: #c8e6c9;
|
||||
}
|
||||
.branch-not-taken {
|
||||
background-color: #ffcdd2;
|
||||
}
|
||||
.branch-info {
|
||||
color: #666;
|
||||
font-size: 11px;
|
||||
margin-left: 10px;
|
||||
font-style: italic;
|
||||
}
|
||||
body { font-family: sans-serif; margin: 20px; }
|
||||
table { border-collapse: collapse; width: 100%; }
|
||||
th, td { border: 1px solid #ddd; padding: 8px; text-align: left; }
|
||||
th { background-color: #f0f0f0; }
|
||||
.branch-taken { background-color: #d4edda; }
|
||||
.branch-not-taken { background-color: #f8d7da; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<h1>🎯 Branch Coverage Report</h1>
|
||||
<p>Generated from random simulation coverage analysis</p>
|
||||
<h1>Branch Coverage Report</h1>
|
||||
<p>Generated from random simulation coverage analysis</p>
|
||||
|
||||
<div class="summary">
|
||||
<h3>Overall Coverage Summary</h3>
|
||||
<h2>Overall Coverage Summary</h2>
|
||||
HTMLHEADER
|
||||
|
||||
# Calculate totals
|
||||
@@ -167,36 +50,21 @@ done
|
||||
if [ "$TOTAL_BRANCHES" -gt 0 ]; then
|
||||
COVERAGE_PERCENT=$((TAKEN_BRANCHES * 100 / TOTAL_BRANCHES))
|
||||
|
||||
# Determine coverage class
|
||||
if [ "$COVERAGE_PERCENT" -lt 30 ]; then
|
||||
COVERAGE_CLASS="coverage-low"
|
||||
elif [ "$COVERAGE_PERCENT" -lt 70 ]; then
|
||||
COVERAGE_CLASS="coverage-medium"
|
||||
else
|
||||
COVERAGE_CLASS="coverage-high"
|
||||
fi
|
||||
|
||||
cat >> "$OUTPUT_DIR/index.html" <<HTMLSUMMARY
|
||||
<div class="stat">
|
||||
<strong>Total Branches:</strong> $TOTAL_BRANCHES<br>
|
||||
<strong>Branches Taken:</strong> $TAKEN_BRANCHES<br>
|
||||
<strong>Coverage:</strong> ${COVERAGE_PERCENT}%
|
||||
</div>
|
||||
<div class="coverage-bar">
|
||||
<div class="coverage-fill $COVERAGE_CLASS" style="width: ${COVERAGE_PERCENT}%"></div>
|
||||
<div class="coverage-text">${COVERAGE_PERCENT}%</div>
|
||||
</div>
|
||||
</div>
|
||||
<p>
|
||||
<strong>Total Branches:</strong> $TOTAL_BRANCHES<br>
|
||||
<strong>Branches Taken:</strong> $TAKEN_BRANCHES<br>
|
||||
<strong>Coverage:</strong> ${COVERAGE_PERCENT}%
|
||||
</p>
|
||||
|
||||
<h2>Coverage by File</h2>
|
||||
<table>
|
||||
<tr>
|
||||
<th>File</th>
|
||||
<th>Branches Taken</th>
|
||||
<th>Total Branches</th>
|
||||
<th>Coverage</th>
|
||||
<th>Visual</th>
|
||||
</tr>
|
||||
<h2>Coverage by File</h2>
|
||||
<table>
|
||||
<tr>
|
||||
<th>File</th>
|
||||
<th>Branches Taken</th>
|
||||
<th>Total Branches</th>
|
||||
<th>Coverage %</th>
|
||||
</tr>
|
||||
HTMLSUMMARY
|
||||
|
||||
# Generate table rows for each file
|
||||
@@ -212,14 +80,6 @@ HTMLSUMMARY
|
||||
|
||||
percentage=$((taken * 100 / branches))
|
||||
|
||||
if [ "$percentage" -lt 30 ]; then
|
||||
bar_class="coverage-low"
|
||||
elif [ "$percentage" -lt 70 ]; then
|
||||
bar_class="coverage-medium"
|
||||
else
|
||||
bar_class="coverage-high"
|
||||
fi
|
||||
|
||||
# Generate individual file report
|
||||
file_html="${filename}.html"
|
||||
echo "Generating report for $filename..."
|
||||
@@ -231,30 +91,21 @@ HTMLSUMMARY
|
||||
<meta charset="UTF-8">
|
||||
<title>Coverage: $filename</title>
|
||||
<style>
|
||||
body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; margin: 20px; background-color: #f5f5f5; }
|
||||
.container { max-width: 1400px; margin: 0 auto; background-color: white; padding: 30px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); border-radius: 8px; }
|
||||
h1 { color: #333; border-bottom: 3px solid #4CAF50; padding-bottom: 10px; }
|
||||
.back-link { display: inline-block; margin-bottom: 20px; color: #2196F3; text-decoration: none; }
|
||||
.back-link:hover { text-decoration: underline; }
|
||||
pre { background-color: #f8f8f8; padding: 15px; border-radius: 5px; overflow-x: auto; font-family: 'Courier New', monospace; font-size: 13px; line-height: 1.8; margin: 0; }
|
||||
body { font-family: sans-serif; margin: 20px; }
|
||||
pre { background-color: #f5f5f5; padding: 10px; overflow-x: auto; font-family: monospace; font-size: 12px; }
|
||||
.line { display: block; }
|
||||
.line-number { color: #999; display: inline-block; width: 60px; text-align: right; margin-right: 20px; user-select: none; border-right: 2px solid #ddd; padding-right: 10px; }
|
||||
.exec-count { color: #666; display: inline-block; width: 60px; text-align: right; margin-right: 15px; font-size: 11px; }
|
||||
.branch-taken { background-color: #c8e6c9; }
|
||||
.branch-not-taken { background-color: #ffcdd2; }
|
||||
.branch-partial { background-color: #fff9c4; }
|
||||
.branch-info { color: #1565c0; font-weight: bold; margin-left: 5px; }
|
||||
.summary { background-color: #e8f5e9; padding: 15px; border-radius: 5px; margin-bottom: 20px; }
|
||||
.line-number { color: #666; display: inline-block; width: 50px; text-align: right; margin-right: 10px; }
|
||||
.exec-count { color: #666; display: inline-block; width: 50px; text-align: right; margin-right: 10px; }
|
||||
.branch-taken { background-color: #d4edda; }
|
||||
.branch-not-taken { background-color: #f8d7da; }
|
||||
.branch-info { color: #666; font-size: 10px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<a href="index.html" class="back-link">← Back to Summary</a>
|
||||
<h1>Coverage Report: $filename</h1>
|
||||
<div class="summary">
|
||||
<strong>Branches Taken:</strong> $taken / $branches ($percentage%)<br>
|
||||
</div>
|
||||
<pre>
|
||||
<p><a href="index.html">← Back to Summary</a></p>
|
||||
<h1>Coverage: $filename</h1>
|
||||
<p><strong>Branches Taken:</strong> $taken / $branches ($percentage%)</p>
|
||||
<pre>
|
||||
FILEHEADER
|
||||
|
||||
# Process the gcov file and add source code with branch info
|
||||
@@ -308,25 +159,18 @@ FILEHEADER
|
||||
|
||||
cat >> "$OUTPUT_DIR/$file_html" <<'FILEFOOTER'
|
||||
</pre>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
FILEFOOTER
|
||||
|
||||
# Add row to main index
|
||||
cat >> "$OUTPUT_DIR/index.html" <<TABLEROW
|
||||
<tr>
|
||||
<td><a href="$file_html" class="file-link">$filename</a></td>
|
||||
<td>$taken</td>
|
||||
<td>$branches</td>
|
||||
<td>${percentage}%</td>
|
||||
<td>
|
||||
<div class="coverage-bar">
|
||||
<div class="coverage-fill $bar_class" style="width: ${percentage}%"></div>
|
||||
<div class="coverage-text">${percentage}%</div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><a href="$file_html">$filename</a></td>
|
||||
<td>$taken</td>
|
||||
<td>$branches</td>
|
||||
<td>${percentage}%</td>
|
||||
</tr>
|
||||
TABLEROW
|
||||
fi
|
||||
fi
|
||||
@@ -334,17 +178,14 @@ TABLEROW
|
||||
|
||||
# Close HTML
|
||||
cat >> "$OUTPUT_DIR/index.html" <<'HTMLFOOTER'
|
||||
</table>
|
||||
</div>
|
||||
</table>
|
||||
</body>
|
||||
</html>
|
||||
HTMLFOOTER
|
||||
|
||||
else
|
||||
cat >> "$OUTPUT_DIR/index.html" <<'HTMLFOOTER'
|
||||
<p>No branch coverage data found.</p>
|
||||
</div>
|
||||
</div>
|
||||
<p>No branch coverage data found.</p>
|
||||
</body>
|
||||
</html>
|
||||
HTMLFOOTER
|
||||
|
||||
Reference in New Issue
Block a user