From b6b926a659fcf41d850e37add28b10fda9f08ca8 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Thu, 13 Nov 2025 20:24:04 +0000
Subject: [PATCH] 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.
---
 scripts/generate_coverage_html.sh | 241 +++++-------------------------
 1 file changed, 41 insertions(+), 200 deletions(-)

diff --git a/scripts/generate_coverage_html.sh b/scripts/generate_coverage_html.sh
index 1eec3ae..423790d 100755
--- a/scripts/generate_coverage_html.sh
+++ b/scripts/generate_coverage_html.sh
@@ -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