cozis/ToastyFS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Simplify HTML coverage report styling to use minimal default styles

Browse Source 
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
2025-11-13 20:24:04 +00:00
parent 4c0b3429f0
commit b6b926a659
1 changed files with 41 additions and 200 deletions
Download Patch File Download Diff File Expand all files Collapse all files
scripts/generate_coverage_html.sh
+41 -200
View File
@@ -14,136 +14,19 @@ cat > "$OUTPUT_DIR/index.html" <<'HTMLHEADER'
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>Branch Coverage Report</title> <title>Branch Coverage Report</title>
<style> <style>
body { body { font-family: sans-serif; margin: 20px; }
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; table { border-collapse: collapse; width: 100%; }
margin: 20px; th, td { border: 1px solid #ddd; padding: 8px; text-align: left; }
background-color: #f5f5f5; th { background-color: #f0f0f0; }
} .branch-taken { background-color: #d4edda; }
.container { .branch-not-taken { background-color: #f8d7da; }
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;
}
</style> </style>
</head> </head>
<body> <body>
<div class="container"> <h1>Branch Coverage Report</h1>
<h1>🎯 Branch Coverage Report</h1> <p>Generated from random simulation coverage analysis</p>
<p>Generated from random simulation coverage analysis</p>
<div class="summary"> <h2>Overall Coverage Summary</h2>
<h3>Overall Coverage Summary</h3>
HTMLHEADER HTMLHEADER
# Calculate totals # Calculate totals
@@ -167,36 +50,21 @@ done
if [ "$TOTAL_BRANCHES" -gt 0 ]; then if [ "$TOTAL_BRANCHES" -gt 0 ]; then
COVERAGE_PERCENT=$((TAKEN_BRANCHES * 100 / TOTAL_BRANCHES)) 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 cat >> "$OUTPUT_DIR/index.html" <<HTMLSUMMARY
<div class="stat"> <p>
<strong>Total Branches:</strong> $TOTAL_BRANCHES<br> <strong>Total Branches:</strong> $TOTAL_BRANCHES<br>
<strong>Branches Taken:</strong> $TAKEN_BRANCHES<br> <strong>Branches Taken:</strong> $TAKEN_BRANCHES<br>
<strong>Coverage:</strong> ${COVERAGE_PERCENT}% <strong>Coverage:</strong> ${COVERAGE_PERCENT}%
</div> </p>
<div class="coverage-bar">
<div class="coverage-fill $COVERAGE_CLASS" style="width: ${COVERAGE_PERCENT}%"></div>
<div class="coverage-text">${COVERAGE_PERCENT}%</div>
</div>
</div>
<h2>Coverage by File</h2> <h2>Coverage by File</h2>
<table> <table>
<tr> <tr>
<th>File</th> <th>File</th>
<th>Branches Taken</th> <th>Branches Taken</th>
<th>Total Branches</th> <th>Total Branches</th>
<th>Coverage</th> <th>Coverage %</th>
<th>Visual</th> </tr>
</tr>
HTMLSUMMARY HTMLSUMMARY
# Generate table rows for each file # Generate table rows for each file
@@ -212,14 +80,6 @@ HTMLSUMMARY
percentage=$((taken * 100 / branches)) 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 # Generate individual file report
file_html="${filename}.html" file_html="${filename}.html"
echo "Generating report for $filename..." echo "Generating report for $filename..."
@@ -231,30 +91,21 @@ HTMLSUMMARY
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>Coverage: $filename</title> <title>Coverage: $filename</title>
<style> <style>
body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; margin: 20px; background-color: #f5f5f5; } body { font-family: sans-serif; margin: 20px; }
.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; } pre { background-color: #f5f5f5; padding: 10px; overflow-x: auto; font-family: monospace; font-size: 12px; }
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; }
.line { display: block; } .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; } .line-number { color: #666; display: inline-block; width: 50px; text-align: right; margin-right: 10px; }
.exec-count { color: #666; display: inline-block; width: 60px; text-align: right; margin-right: 15px; font-size: 11px; } .exec-count { color: #666; display: inline-block; width: 50px; text-align: right; margin-right: 10px; }
.branch-taken { background-color: #c8e6c9; } .branch-taken { background-color: #d4edda; }
.branch-not-taken { background-color: #ffcdd2; } .branch-not-taken { background-color: #f8d7da; }
.branch-partial { background-color: #fff9c4; } .branch-info { color: #666; font-size: 10px; }
.branch-info { color: #1565c0; font-weight: bold; margin-left: 5px; }
.summary { background-color: #e8f5e9; padding: 15px; border-radius: 5px; margin-bottom: 20px; }
</style> </style>
</head> </head>
<body> <body>
<div class="container"> <p><a href="index.html">← Back to Summary</a></p>
<a href="index.html" class="back-link">← Back to Summary</a> <h1>Coverage: $filename</h1>
<h1>Coverage Report: $filename</h1> <p><strong>Branches Taken:</strong> $taken / $branches ($percentage%)</p>
<div class="summary"> <pre>
<strong>Branches Taken:</strong> $taken / $branches ($percentage%)<br>
</div>
<pre>
FILEHEADER FILEHEADER
# Process the gcov file and add source code with branch info # Process the gcov file and add source code with branch info
@@ -308,25 +159,18 @@ FILEHEADER
cat >> "$OUTPUT_DIR/$file_html" <<'FILEFOOTER' cat >> "$OUTPUT_DIR/$file_html" <<'FILEFOOTER'
</pre> </pre>
</div>
</body> </body>
</html> </html>
FILEFOOTER FILEFOOTER
# Add row to main index # Add row to main index
cat >> "$OUTPUT_DIR/index.html" <<TABLEROW cat >> "$OUTPUT_DIR/index.html" <<TABLEROW
<tr> <tr>
<td><a href="$file_html" class="file-link">$filename</a></td> <td><a href="$file_html">$filename</a></td>
<td>$taken</td> <td>$taken</td>
<td>$branches</td> <td>$branches</td>
<td>${percentage}%</td> <td>${percentage}%</td>
<td> </tr>
<div class="coverage-bar">
<div class="coverage-fill $bar_class" style="width: ${percentage}%"></div>
<div class="coverage-text">${percentage}%</div>
</div>
</td>
</tr>
TABLEROW TABLEROW
fi fi
fi fi
@@ -334,17 +178,14 @@ TABLEROW
# Close HTML # Close HTML
cat >> "$OUTPUT_DIR/index.html" <<'HTMLFOOTER' cat >> "$OUTPUT_DIR/index.html" <<'HTMLFOOTER'
</table> </table>
</div>
</body> </body>
</html> </html>
HTMLFOOTER HTMLFOOTER
else else
cat >> "$OUTPUT_DIR/index.html" <<'HTMLFOOTER' cat >> "$OUTPUT_DIR/index.html" <<'HTMLFOOTER'
<p>No branch coverage data found.</p> <p>No branch coverage data found.</p>
</div>
</div>
</body> </body>
</html> </html>
HTMLFOOTER HTMLFOOTER