Redesign test coverage: matrix only, show all platforms

- Remove test catalog detail (too verbose for the landing page)
- Show full 9-row matrix: Linux/macOS/Windows x None/Wireless/Lite
- Rename WebKit column to Safari with footnote explaining the engine
- Use distinct symbols: checkmark (passing), cross (failing), dash (not yet tested)
- Add legend and contribution CTA linking to TESTING.md

index.html

@@ -386,57 +386,10 @@
       margin-bottom: 1.75rem;
     }
 
-    .tc-badges {
-      display: flex;
-      flex-wrap: wrap;
-      gap: 0.5rem;
-      margin-bottom: 1.5rem;
-    }
-
-    .tc-badge {
-      display: inline-flex;
-      align-items: center;
-      padding: 0.25rem 0.75rem;
-      font-size: 0.75rem;
-      font-weight: 600;
-      border-radius: 9999px;
-      letter-spacing: 0.02em;
-    }
-
-    .tc-badge-pass {
-      background-color: hsla(160, 84%, 39%, 0.15);
-      color: hsl(160, 84%, 55%);
-      border: 1px solid hsla(160, 84%, 39%, 0.3);
-    }
-
-    .tc-badge-fail {
-      background-color: hsla(0, 84%, 60%, 0.15);
-      color: hsl(0, 84%, 70%);
-      border: 1px solid hsla(0, 84%, 60%, 0.3);
-    }
-
-    .tc-badge-neutral {
-      background-color: hsla(220, 13%, 50%, 0.12);
-      color: var(--muted-foreground);
-      border: 1px solid var(--border);
-    }
-
-    .tc-columns {
-      display: grid;
-      grid-template-columns: 1fr;
-      gap: 2rem;
-    }
-
-    @media (min-width: 768px) {
-      .tc-columns {
-        grid-template-columns: auto 1fr;
-      }
-    }
-
-    /* Matrix table */
     .tc-table-wrap {
       overflow-x: auto;
       -webkit-overflow-scrolling: touch;
+      margin-bottom: 1rem;
     }
 
     .tc-table {
@@ -490,8 +443,9 @@
       font-weight: 600;
     }
 
-    .tc-empty {
-      color: hsla(220, 13%, 50%, 0.35);
+    .tc-untested {
+      color: hsla(220, 13%, 50%, 0.4);
+      font-size: 0.7rem;
     }
 
     .tc-date {
@@ -501,74 +455,46 @@
       margin-top: 1px;
     }
 
-    /* Test catalog */
-    .tc-catalog {
+    .tc-legend {
       display: flex;
-      flex-direction: column;
-      gap: 1.5rem;
-    }
-
-    .tc-tier-title {
+      gap: 1.25rem;
       font-size: 0.7rem;
-      font-weight: 700;
-      text-transform: uppercase;
-      letter-spacing: 0.1em;
       color: var(--muted-foreground);
-      padding-bottom: 0.4rem;
-      border-bottom: 1px solid var(--border);
-      margin-bottom: 0.25rem;
+      margin-bottom: 1rem;
     }
 
-    .tc-tier-total {
-      display: inline-block;
-      background-color: hsla(220, 13%, 50%, 0.12);
-      padding: 0.05rem 0.4rem;
-      border-radius: 4px;
-      font-size: 0.65rem;
-      margin-left: 0.25rem;
-      vertical-align: middle;
+    .tc-legend span {
+      display: inline-flex;
+      align-items: center;
+      gap: 0.3rem;
     }
 
-    .tc-items {
-      display: flex;
-      flex-direction: column;
-      gap: 0.15rem;
+    .tc-cta {
+      font-size: 0.8rem;
+      color: var(--muted-foreground);
+      line-height: 1.5;
+      max-width: 44rem;
     }
 
-    .tc-item {
-      display: flex;
-      align-items: baseline;
-      gap: 0.4rem;
-      font-size: 0.75rem;
-      padding: 0.15rem 0;
+    .tc-cta a {
+      color: var(--primary);
+      text-decoration: none;
     }
 
-    .tc-class {
-      font-family: 'SF Mono', 'Cascadia Code', 'Fira Code', 'Consolas', monospace;
-      font-size: 0.7rem;
-      font-weight: 600;
-      flex-shrink: 0;
+    .tc-cta a:hover {
+      text-decoration: underline;
     }
 
-    .tc-count {
+    .tc-footnote {
       font-size: 0.65rem;
-      font-weight: 700;
-      color: var(--muted-foreground);
-      background-color: hsla(220, 13%, 50%, 0.12);
-      padding: 0 0.3rem;
-      border-radius: 3px;
-      flex-shrink: 0;
-    }
-
-    .tc-desc {
-      color: var(--muted-foreground);
-      font-size: 0.7rem;
+      color: hsla(215, 16%, 60%, 0.5);
+      margin-top: 0.75rem;
     }
 
     .tc-updated {
       font-size: 0.7rem;
       color: hsla(215, 16%, 60%, 0.6);
-      margin-top: 1rem;
+      margin-top: 0.5rem;
     }
   </style>
 </head>
@@ -652,119 +578,107 @@
     <section class="test-coverage" id="test-coverage-section" style="display:none">
       <div class="container">
         <h2>Test Coverage</h2>
-        <p class="section-subtitle">Automated tests run across platforms and browsers before every release.</p>
-        <div class="tc-badges" id="tc-badges"></div>
-        <div class="tc-columns">
-          <div class="tc-table-wrap" id="tc-matrix"></div>
-          <div class="tc-catalog" id="tc-catalog"></div>
-        </div>
+        <p class="section-subtitle" id="tc-subtitle"></p>
+        <div class="tc-table-wrap" id="tc-matrix"></div>
+        <div class="tc-legend" id="tc-legend"></div>
+        <p class="tc-cta">
+          Help us expand coverage! Run the test suite on your setup and submit a PR with the results.
+          See <a href="https://huggingface.co/spaces/RemiFabre/marionette/blob/main/marionette/TESTING.md" target="_blank" rel="noopener noreferrer">TESTING.md</a> for instructions.
+        </p>
+        <p class="tc-footnote">Safari tested via Playwright's WebKit engine. Chromium covers Chrome, Edge, Brave, and similar browsers.</p>
         <p class="tc-updated" id="tc-updated"></p>
       </div>
     </section>
 
     <script>
     (function() {
-      var jsonPath = 'marionette/static/test_coverage.json';
-      fetch(jsonPath, { cache: 'no-store' })
+      var ALL_PLATFORMS = [
+        { os: 'Linux', robot: 'None' },
+        { os: 'Linux', robot: 'Wireless' },
+        { os: 'Linux', robot: 'Lite' },
+        { os: 'macOS', robot: 'None' },
+        { os: 'macOS', robot: 'Wireless' },
+        { os: 'macOS', robot: 'Lite' },
+        { os: 'Windows', robot: 'None' },
+        { os: 'Windows', robot: 'Wireless' },
+        { os: 'Windows', robot: 'Lite' }
+      ];
+
+      var COLUMNS = [
+        { suite: 'unit', browser: null, label: 'Unit' },
+        { suite: 'e2e', browser: 'chromium', label: 'Chromium' },
+        { suite: 'e2e', browser: 'firefox', label: 'Firefox' },
+        { suite: 'e2e', browser: 'webkit', label: 'Safari' }
+      ];
+
+      var ROBOT_LABELS = { 'None': 'no robot', 'Wireless': 'Wireless', 'Lite': 'Lite' };
+
+      fetch('marionette/static/test_coverage.json', { cache: 'no-store' })
         .then(function(r) { return r.ok ? r.json() : Promise.reject(); })
         .then(render)
         .catch(function() {});
 
       function render(data) {
         var matrix = data.matrix || [];
-        var catalog = data.test_catalog || [];
         if (!matrix.length) return;
 
         document.getElementById('test-coverage-section').style.display = '';
 
-        // Badges
-        var tierTotals = {};
-        catalog.forEach(function(c) { tierTotals[c.tier] = (tierTotals[c.tier] || 0) + c.count; });
-        var totalTests = Object.keys(tierTotals).reduce(function(s, k) { return s + tierTotals[k]; }, 0);
-        var allPass = matrix.every(function(m) { return m.status === 'pass'; });
-        var platforms = [];
-        var seenP = {};
-        matrix.forEach(function(m) {
-          var k = m.os + '/' + m.robot;
-          if (!seenP[k]) { seenP[k] = true; platforms.push(k); }
-        });
-
-        var bh = '';
-        bh += '<span class="tc-badge ' + (allPass ? 'tc-badge-pass' : 'tc-badge-fail') + '">' + (allPass ? 'All passing' : 'Some failures') + '</span>';
-        bh += '<span class="tc-badge tc-badge-neutral">' + totalTests + ' tests</span>';
-        bh += '<span class="tc-badge tc-badge-neutral">' + platforms.length + ' platform' + (platforms.length !== 1 ? 's' : '') + '</span>';
-        document.getElementById('tc-badges').innerHTML = bh;
-
-        // Matrix table
-        var suiteKeys = [];
-        var seenS = {};
-        matrix.forEach(function(m) {
-          var k = m.suite + (m.browser ? '-' + m.browser : '');
-          if (!seenS[k]) { seenS[k] = true; suiteKeys.push({ suite: m.suite, browser: m.browser, key: k }); }
-        });
-
-        function suiteLabel(s) {
-          if (s.suite === 'unit') return 'Unit';
-          if (s.suite === 'hardware') return 'HW';
-          if (s.browser) return s.browser.charAt(0).toUpperCase() + s.browser.slice(1);
-          return s.suite;
-        }
-
+        // Build lookup from actual results
         var lookup = {};
         matrix.forEach(function(m) {
           lookup[m.os + '|' + m.robot + '|' + m.suite + '|' + (m.browser || '')] = m;
         });
 
-        var combos = [];
-        var seenC = {};
-        matrix.forEach(function(m) {
-          var ck = m.os + '|' + m.robot;
-          if (!seenC[ck]) { seenC[ck] = true; combos.push({ os: m.os, robot: m.robot }); }
+        // Count tested vs total platforms
+        var testedCount = 0;
+        ALL_PLATFORMS.forEach(function(p) {
+          var hasAny = COLUMNS.some(function(c) {
+            return !!lookup[p.os + '|' + p.robot + '|' + c.suite + '|' + (c.browser || '')];
+          });
+          if (hasAny) testedCount++;
         });
 
-        var th = '<table class="tc-table"><thead><tr><th></th>';
-        suiteKeys.forEach(function(s) { th += '<th>' + suiteLabel(s) + '</th>'; });
-        th += '</tr></thead><tbody>';
+        var catalog = data.test_catalog || [];
+        var totalTests = catalog.reduce(function(s, c) { return s + c.count; }, 0);
+
+        document.getElementById('tc-subtitle').textContent =
+          totalTests + ' automated tests \u2014 ' + testedCount + ' of ' + ALL_PLATFORMS.length + ' platform combinations verified so far.';
 
-        combos.forEach(function(c) {
-          var rl = c.robot === 'None' ? 'no robot' : c.robot;
-          th += '<tr><td class="tc-platform">' + c.os + ' <span class="tc-robot-label">' + rl + '</span></td>';
-          suiteKeys.forEach(function(s) {
-            var m = lookup[c.os + '|' + c.robot + '|' + s.suite + '|' + (s.browser || '')];
+        // Build table
+        var h = '<table class="tc-table"><thead><tr><th>Platform</th>';
+        COLUMNS.forEach(function(c) { h += '<th>' + c.label + '</th>'; });
+        h += '</tr></thead><tbody>';
+
+        ALL_PLATFORMS.forEach(function(p) {
+          h += '<tr><td class="tc-platform">' + p.os + ' <span class="tc-robot-label">' + ROBOT_LABELS[p.robot] + '</span></td>';
+          COLUMNS.forEach(function(c) {
+            var m = lookup[p.os + '|' + p.robot + '|' + c.suite + '|' + (c.browser || '')];
             if (m) {
               var ok = m.status === 'pass';
-              th += '<td><span class="' + (ok ? 'tc-ok' : 'tc-fail') + '">' + (ok ? '\u2713' : '\u2717') + ' ' + m.passed + '/' + m.total + '</span><span class="tc-date">' + m.date + '</span></td>';
+              h += '<td><span class="' + (ok ? 'tc-ok' : 'tc-fail') + '">';
+              h += (ok ? '\u2713' : '\u2717') + ' ' + m.passed + '/' + m.total;
+              h += '</span><span class="tc-date">' + m.date + '</span></td>';
             } else {
-              th += '<td class="tc-empty">\u2014</td>';
+              h += '<td class="tc-untested">\u2014</td>';
             }
           });
-          th += '</tr>';
-        });
-        th += '</tbody></table>';
-        document.getElementById('tc-matrix').innerHTML = th;
-
-        // Catalog
-        var tiers = {};
-        catalog.forEach(function(c) { if (!tiers[c.tier]) tiers[c.tier] = []; tiers[c.tier].push(c); });
-        var tierOrder = ['unit', 'e2e', 'hardware'];
-        var tierLabels = { unit: 'Unit', e2e: 'E2E', hardware: 'Hardware' };
-
-        var ch = '';
-        tierOrder.forEach(function(tier) {
-          var entries = tiers[tier];
-          if (!entries) return;
-          var total = entries.reduce(function(s, e) { return s + e.count; }, 0);
-          ch += '<div><div class="tc-tier-title">' + (tierLabels[tier] || tier) + ' <span class="tc-tier-total">' + total + '</span></div><div class="tc-items">';
-          entries.forEach(function(e) {
-            ch += '<div class="tc-item"><span class="tc-class">' + e['class'] + '</span><span class="tc-count">' + e.count + '</span><span class="tc-desc">' + e.description + '</span></div>';
-          });
-          ch += '</div></div>';
+          h += '</tr>';
         });
-        document.getElementById('tc-catalog').innerHTML = ch;
+
+        h += '</tbody></table>';
+        document.getElementById('tc-matrix').innerHTML = h;
+
+        // Legend
+        document.getElementById('tc-legend').innerHTML =
+          '<span><span class="tc-ok">\u2713</span> Passing</span>' +
+          '<span><span class="tc-fail">\u2717</span> Failing</span>' +
+          '<span><span class="tc-untested">\u2014</span> Not yet tested</span>';
 
         if (data.generated_at) {
           var d = new Date(data.generated_at);
-          document.getElementById('tc-updated').textContent = 'Updated ' + d.toLocaleDateString(undefined, { month: 'short', day: 'numeric', year: 'numeric' });
+          document.getElementById('tc-updated').textContent =
+            'Last run: ' + d.toLocaleDateString(undefined, { month: 'short', day: 'numeric', year: 'numeric' });
         }
       }
     })();