From 0dbf0e0899750a6120f273881587cd1b87d6c5c8 Mon Sep 17 00:00:00 2001
From: Gronod <gordon@i3omb.com>
Date: Sun, 17 May 2026 08:59:21 +0100
Subject: [PATCH] fix: set timing bar widths via JS DOM assignment after
 innerHTML

All previous attempts (inline style=, CSS custom property via style=)
were ineffective. Setting element.style.width directly in JS after
panel.innerHTML is assigned is the only approach that cannot be
interfered with by CSP or attribute sanitisation.

Width is stored as data-w attribute in the HTML string and applied
by querySelectorAll('.timing-bar[data-w]') post-render.
---
 public/app.js    | 6 +++++-
 public/style.css | 1 -
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/public/app.js b/public/app.js
index 7015d26..ebe60bb 100644
--- a/public/app.js
+++ b/public/app.js
@@ -710,7 +710,7 @@ function renderStatusPanel(data, panel) {
       html += `
           <div class="timing-row">
             <span class="timing-label">${escapeHtml(t.label)}</span>
-            <div class="timing-bar-bg"><div class="timing-bar" style="--bar-w:${barWidth.toFixed(1)}%"></div></div>
+            <div class="timing-bar-bg"><div class="timing-bar" data-w="${barWidth.toFixed(1)}"></div></div>
             <span class="timing-value">${t.ms}ms</span>
           </div>`;
     }
@@ -734,6 +734,10 @@ function renderStatusPanel(data, panel) {
 
   html += `</tbody></table></div></div>`;
   panel.innerHTML = html;
+  // Set bar widths via JS DOM assignment — immune to CSP style-src restrictions
+  panel.querySelectorAll('.timing-bar[data-w]').forEach(el => {
+    el.style.width = el.dataset.w + '%';
+  });
 }
 
 function formatSize(size) {
diff --git a/public/style.css b/public/style.css
index 4f71711..8e8220b 100644
--- a/public/style.css
+++ b/public/style.css
@@ -952,7 +952,6 @@ body {
 
 .timing-bar {
   height: 100%;
-  width: var(--bar-w, 100%);
   background: var(--accent);
   border-radius: 4px;
   min-width: 2px;