From 0b182cb7d6585512aa745d42973c86bb651a3d6b Mon Sep 17 00:00:00 2001
From: Peter Hedenskog <phedenskog@wikimedia.org>
Date: Tue, 12 May 2026 06:20:09 +0200
Subject: [PATCH] Page-x-ray: per-section colors and round CLS to 3 decimals
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

  The section headers all shared a single grey background, so six
  identical bars stacked down the table looked off — felt more like
  visual noise than visual grouping. Give each section its own quiet
  pastel/text pair (Content blue, Render blocking amber, Visual
  metrics lavender, Core Web Vitals mint, CPU peach, Captures grey)
  so the eye can find the right group at a glance.

  While in there, format Cumulative Layout Shift to 3 decimals
  instead of dumping the raw float (was rendering as
  0.05641193152186011, now 0.056) — that's the granularity that
  matters for comparison and matches the sitespeed.io HTML report.

  Co-authored-by: Claude Opus 4.7 (1M context) noreply@anthropic.com
---
 public/js/compare/templates.js | 30 +++++++++++++++++++-----------
 src/css/page-xray.css          | 32 ++++++++++++++++++++++++--------
 2 files changed, 43 insertions(+), 19 deletions(-)

diff --git a/public/js/compare/templates.js b/public/js/compare/templates.js
index fe5e8bc..a566c14 100644
--- a/public/js/compare/templates.js
+++ b/public/js/compare/templates.js
@@ -66,8 +66,9 @@ function pageXrayTemplate(d) {
   const p1 = d.p1, p2 = d.p2, config = d.config;
   const showRuns = d.runs1.length > 1 || d.runs2.length > 1;
 
-  function section(title) {
-    return '<tr class="pageXraySection"><th colspan="3">' + h(title) + '</th></tr>';
+  function section(title, kind) {
+    const cls = 'pageXraySection' + (kind ? ' pageXraySection--' + kind : '');
+    return '<tr class="' + cls + '"><th colspan="3">' + h(title) + '</th></tr>';
   }
 
   let html = '';
@@ -123,7 +124,7 @@ function pageXrayTemplate(d) {
             '<td>' + h(p2.meta.connectivity) + '</td></tr>';
   }
 
-  html += section('Content');
+  html += section('Content', 'content');
   html += '<tr><td class="tabletext">Total</td>' +
           '<td>' + p1.requests + ' (' + formatBytes(p1.transferSize) + ' / ' + formatBytes(p1.contentSize) + ')</td>' +
           '<td>' + p2.requests + ' (' + formatBytes(p2.transferSize) + ' / ' + formatBytes(p2.contentSize) + ')</td></tr>';
@@ -144,7 +145,7 @@ function pageXrayTemplate(d) {
           '<td>' + img2.requests + ' (' + formatBytes(img2.transferSize) + ')</td></tr>';
 
   if (p1.renderBlocking && p2.renderBlocking) {
-    html += section('Render blocking');
+    html += section('Render blocking', 'blocking');
     html += '<tr><td class="tabletext">Render blocking</td>' +
             '<td>' + p1.renderBlocking.blocking + '</td>' +
             '<td>' + p2.renderBlocking.blocking + '</td></tr>';
@@ -176,11 +177,18 @@ function pageXrayTemplate(d) {
                   '<td>' + formatTime(p2.visualMetrics[key]) + '</td></tr>';
       }
     });
-    if (vmHtml) html += section('Visual metrics') + vmHtml;
+    if (vmHtml) html += section('Visual metrics', 'visual') + vmHtml;
   }
 
   if (p1.googleWebVitals && p2.googleWebVitals) {
-    html += section('Core Web Vitals');
+    // CLS is a unitless float that browsers report at full precision
+    // (e.g. 0.05641193152186011). Round to three decimals — that's
+    // the granularity that matters for comparison and matches the
+    // convention used in the sitespeed.io HTML report.
+    function fmtCLS(v) {
+      return typeof v === 'number' ? v.toFixed(3) : (v == null ? '' : v);
+    }
+    html += section('Core Web Vitals', 'cwv');
     html += '<tr><td class="tabletext">First Contentful Paint</td>' +
             '<td>' + formatTime(p1.googleWebVitals.firstContentfulPaint) + '</td>' +
             '<td>' + formatTime(p2.googleWebVitals.firstContentfulPaint) + '</td></tr>';
@@ -191,8 +199,8 @@ function pageXrayTemplate(d) {
             '<td>' + formatTime(p1.googleWebVitals.totalBlockingTime) + '</td>' +
             '<td>' + formatTime(p2.googleWebVitals.totalBlockingTime) + '</td></tr>';
     html += '<tr><td class="tabletext">Cumulative Layout Shift</td>' +
-            '<td>' + p1.googleWebVitals.cumulativeLayoutShift + '</td>' +
-            '<td>' + p2.googleWebVitals.cumulativeLayoutShift + '</td></tr>';
+            '<td>' + fmtCLS(p1.googleWebVitals.cumulativeLayoutShift) + '</td>' +
+            '<td>' + fmtCLS(p2.googleWebVitals.cumulativeLayoutShift) + '</td></tr>';
   }
 
   if (p1.cpu && p2.cpu && p1.cpu.longTasks && p2.cpu.longTasks) {
@@ -212,7 +220,7 @@ function pageXrayTemplate(d) {
                  '<td>' + p1.cpu.longTasks.tasks + '</td>' +
                  '<td>' + p2.cpu.longTasks.tasks + '</td></tr>';
     }
-    if (cpuHtml) html += section('CPU') + cpuHtml;
+    if (cpuHtml) html += section('CPU', 'cpu') + cpuHtml;
   }
 
   if (d.cpuCategories1 && d.cpuCategories2) {
@@ -221,7 +229,7 @@ function pageXrayTemplate(d) {
     // CPU has no long-task data but we still want the disclosure rows
     // visually under a heading).
     if (!(p1.cpu && p2.cpu && p1.cpu.longTasks && p2.cpu.longTasks)) {
-      html += section('CPU');
+      html += section('CPU', 'cpu');
     }
     html += '<tr><td class="tabletext" colspan="3"> CPU time spent by category ' +
               '<button onclick="toggleRow(this, \'cpuCategoryInfo\', this.childNodes[0]);" class="submit submit-smaller">' +
@@ -273,7 +281,7 @@ function pageXrayTemplate(d) {
             '<td><a href="' + h(p1.meta.result) + '" target="_blank" rel="noopener noreferrer">Result page</a></td>' +
             '<td><a href="' + h(p2.meta.result) + '" target="_blank" rel="noopener noreferrer">Result page</a></td></tr>';
   }
-  if (capturesHtml) html += section('Captures') + capturesHtml;
+  if (capturesHtml) html += section('Captures', 'captures') + capturesHtml;
 
   html += '</tbody></table></div>';
   return html;
diff --git a/src/css/page-xray.css b/src/css/page-xray.css
index f20a32a..cc7fab0 100644
--- a/src/css/page-xray.css
+++ b/src/css/page-xray.css
@@ -16,11 +16,12 @@
 
 /*
  * Section divider rows — full-width header cells inserted between
- * groups of related metrics ("Content", "Visual metrics", "Core Web
- * Vitals", "CPU", "Captures"). Reads as a quiet, scannable label
- * rather than competing with the data rows: small caps, secondary
- * text colour, extra top padding to separate it from the previous
- * group, and no hover treatment.
+ * groups of related metrics ("Content", "Render blocking", "Visual
+ * metrics", "Core Web Vitals", "CPU", "Captures"). Each kind gets
+ * its own quiet pastel/text pair so the eye can tell sections apart
+ * at a glance instead of seeing identical bars stacked down the
+ * table. Hover is suppressed so they stay visually distinct from
+ * data rows.
  */
 .pageXrayTable .pageXraySection th {
   text-align: left;
@@ -28,15 +29,30 @@
   font-weight: var(--font-weight-semibold);
   letter-spacing: 0.08em;
   text-transform: uppercase;
-  color: var(--color-text-muted);
-  background: var(--color-surface);
   padding: 14px 12px 6px;
   border-bottom: 1px solid var(--color-border);
 }
 .pageXrayTable .pageXraySection:hover th {
-  background: var(--color-surface);
+  /* Keep the section's own background on hover — re-set in each
+     modifier below; this rule just disables the default row-hover
+     tint that the .pageXrayTable tr:hover rule would otherwise paint. */
 }
 
+.pageXrayTable .pageXraySection--content th  { background: var(--color-info-bg);    color: var(--color-info); }
+.pageXrayTable .pageXraySection--blocking th { background: var(--color-warning-bg); color: var(--color-warning); }
+.pageXrayTable .pageXraySection--visual th   { background: #f3e8ff;                  color: #6b21a8; }
+.pageXrayTable .pageXraySection--cwv th      { background: var(--color-ok-bg);      color: var(--color-ok); }
+.pageXrayTable .pageXraySection--cpu th      { background: #ffedd5;                  color: #9a3412; }
+.pageXrayTable .pageXraySection--captures th { background: var(--color-surface);    color: var(--color-text-muted); }
+
+/* Repeat for hover so the bg doesn't snap to the row-hover tint. */
+.pageXrayTable .pageXraySection--content:hover th  { background: var(--color-info-bg); }
+.pageXrayTable .pageXraySection--blocking:hover th { background: var(--color-warning-bg); }
+.pageXrayTable .pageXraySection--visual:hover th   { background: #f3e8ff; }
+.pageXrayTable .pageXraySection--cwv:hover th      { background: var(--color-ok-bg); }
+.pageXrayTable .pageXraySection--cpu:hover th      { background: #ffedd5; }
+.pageXrayTable .pageXraySection--captures:hover th { background: var(--color-surface); }
+
 .pageXrayTable {
   table-layout: fixed;