5a3be3af33b76d69d1fc98ee76b9a37f96e96fc7
max
  Wed Aug 26 00:36:52 2026 -0700
Add opt-in per-phase request timing to the new hgBlat and hgSession pages, shown in a dialog with &measureTiming=1. refs #38157

New reusable perfTimer collector (lib/perfTimer.c) records labeled wall-clock intervals via clock1000() and emits them as JSON; hgBlat and hgSession attach a timing array to their payload when the existing measureTiming cart/CGI var is set. A shared gbShowTimingDialog helper in utils.js renders the server phases plus a client render-time row in a house-style modal, which opens automatically when measureTiming is on. Confirms the position band/locus annotation loop dominates hgSession, and run-BLAT plus locus lookups dominate hgBlat.

diff --git src/hg/htdocs/style/gbModern.css src/hg/htdocs/style/gbModern.css
index 163b24f5fe0..f11b1dcb5d7 100644
--- src/hg/htdocs/style/gbModern.css
+++ src/hg/htdocs/style/gbModern.css
@@ -107,15 +107,28 @@
 
 /* Generic dense results table - steel-tint header, zebra rows, navy selection bar.  Apply class
  * "gbTable" to the <table>; the tool may add its own column classes. */
 .gbTable { font-size:13px; width:100%; border-collapse:collapse; }
 .gbTable thead th { background:var(--headrow); border-bottom:1px solid var(--headrowLine);
     font-size:12px; color:var(--navy); font-weight:700; padding:8px 12px; white-space:nowrap;
     text-align:left; }
 .gbTable tbody td { padding:8px 12px; border-bottom:1px solid var(--lineSoft); white-space:nowrap;
     vertical-align:middle; }
 .gbTable tbody tr:nth-child(even) { background:var(--stripe); }
 .gbTable tbody tr:hover { background:var(--hover); }
 .gbTable tbody tr.gbSel { background:var(--sel); box-shadow:inset 3px 0 0 var(--navy); }
 .gbTable td.num, .gbTable th.num { text-align:right; font-variant-numeric:tabular-nums; }
 .gbTable a { color:var(--accent); text-decoration:none; }
 .gbTable a:hover { color:var(--accentHover); text-decoration:underline; }
+
+/* Timing dialog (gbShowTimingDialog in utils.js): a wider modal holding a gbTable whose last column
+ * is a proportional bar.  Shown when a page is loaded with &measureTiming=1. */
+.gbModal.gbTimingModal { max-width:560px; }
+.gbTimingTable td.gbTimeBarCell { width:45%; }
+/* The bar track fills the cell; the fill width is set inline as a percentage of the total time. */
+.gbTimeBar { position:relative; height:14px; background:var(--stripe); }
+.gbTimeBar > span { position:absolute; top:0; left:0; height:100%; background:var(--section); }
+.gbTimingTable tr.gbTimeTotal td { font-weight:700; border-top:2px solid var(--headrowLine); }
+.gbTimingTable tr.gbTimeTotal .gbTimeBar > span { background:var(--navy); }
+/* A subhead row separating the "server" and "client" groups. */
+.gbTimingTable tr.gbTimeGroup td { background:var(--headrow); color:var(--navy); font-weight:700;
+    font-size:12px; }