web: pass saved widths to makeResizableHeaders to skip the measuring reflow

makeResizableHeaders now takes an optional widths array; when given
(e.g. widths saved from the previous render) it applies them directly
instead of resetting to auto layout and reading offsetWidth, avoiding
a forced reflow on every timing table re-render.

Signed-off-by: Matt Liberty <mliberty@precisioninno.com>

Author: maliberty

src/web/src/timing-widget.js

@@ -367,14 +367,9 @@ export class TimingWidget {
 
         this._pathTable.appendChild(tbody);
 
-        // Install resize grips, then restore previous widths if available.
-        makeResizableHeaders(this._pathTable);
-        if (savedWidths.length > 0 && savedWidths[0]) {
-            const newHeaders = this._pathTable.querySelectorAll('thead th');
-            newHeaders.forEach((th, i) => {
-                if (i < savedWidths.length) th.style.width = savedWidths[i];
-            });
-        }
+        // Install resize grips, reusing any previously saved widths to
+        // avoid a measuring reflow.
+        makeResizableHeaders(this._pathTable, savedWidths);
     }
 
     _selectDetailRow(idx) {
@@ -449,14 +444,10 @@ export class TimingWidget {
         });
         this._detailTable.appendChild(tbody);
 
-        // Install resize grips, then restore previous widths if available.
-        makeResizableHeaders(this._detailTable);
-        if (savedWidths.length > 0 && savedWidths[0]) {
-            const newHeaders = this._detailTable.querySelectorAll('thead th');
-            newHeaders.forEach((th, i) => {
-                if (i < savedWidths.length) th.style.width = savedWidths[i];
-            });
-        } else {
+        // Install resize grips, reusing any previously saved widths to
+        // avoid a measuring reflow.
+        makeResizableHeaders(this._detailTable, savedWidths);
+        if (!savedWidths[0]) {
             // Pin column: set initial width to 30 characters
             const pinTh = this._detailTable.querySelector('thead th');
             if (pinTh) {

src/web/src/ui-utils.js

@@ -10,15 +10,20 @@ export function isStaticMode(app) {
 }
 
 // Make table column headers resizable by dragging.
-export function makeResizableHeaders(table) {
-    // Reset to auto layout so browser computes natural column widths
-    table.style.tableLayout = 'auto';
+// widths is an optional array of CSS width strings (e.g. saved from a
+// previous render); when given, it is applied directly instead of
+// measuring natural widths, avoiding a forced reflow.
+export function makeResizableHeaders(table, widths) {
     const headers = table.querySelectorAll('thead th');
-    headers.forEach((th) => th.style.width = '');
-    // Force reflow to get natural widths
-    const widths = Array.from(headers, (th) => th.offsetWidth);
-    // Now lock in widths and switch to fixed layout
-    headers.forEach((th, i) => th.style.width = widths[i] + 'px');
+    if (!widths || !widths[0]) {
+        // Reset to auto layout so browser computes natural column widths;
+        // reading offsetWidth forces a reflow.
+        table.style.tableLayout = 'auto';
+        headers.forEach((th) => th.style.width = '');
+        widths = Array.from(headers, (th) => th.offsetWidth + 'px');
+    }
+    // Lock in widths and switch to fixed layout
+    headers.forEach((th, i) => th.style.width = widths[i] || '');
     table.style.tableLayout = 'fixed';
 
     headers.forEach((th, idx) => {