Feature/waterfall view phase2

Waterfall/Timeline View — Phase 2

Author: georgidhristov

DebugProbe.AspNetCore.Tests/Rendering/HtmlRendererTests.cs

@@ -111,6 +111,61 @@ public void Html_encoding_escapes_untrusted_values()
         Assert.Contains("/orders/<bad>", html);
     }
 
+    [Fact]
+    public void Details_page_renders_waterfall_section_with_ruler_and_tooltips_when_outgoing_requests_exist()
+    {
+        var entry = CreateEntry();
+        entry.DurationMs = 500;
+        
+        entry.OutgoingRequests.Add(new DebugOutgoingRequest
+        {
+            Method = "GET",
+            Url = "https://external-api.test/v1/users?id=123",
+            StatusCode = 200,
+            DurationMs = 150,
+            TimestampUtc = entry.Timestamp.UtcDateTime.AddMilliseconds(200), // starts at 50ms offset (200 - 150)
+            IsSuccessStatusCode = true
+        });
+
+        entry.OutgoingRequests.Add(new DebugOutgoingRequest
+        {
+            Method = "POST",
+            Url = "https://untrusted-api.test/v1/search?query=a&b=%3Cscript%3E",
+            StatusCode = 500,
+            DurationMs = 80,
+            TimestampUtc = entry.Timestamp.UtcDateTime.AddMilliseconds(400), // starts at 320ms offset (400 - 80)
+            IsSuccessStatusCode = false
+        });
+
+        var html = HtmlRenderer.RenderDetailsPage(
+            entry,
+            CreateEnvironment(),
+            "{}",
+            "{}");
+
+        // Verify Ruler ticks exist
+        Assert.Contains("waterfall-ruler-row", html);
+        Assert.Contains("wf-ruler-ticks", html);
+        Assert.Contains("0 ms", html);
+        Assert.Contains("125 ms", html);
+        Assert.Contains("250 ms", html);
+        Assert.Contains("375 ms", html);
+        Assert.Contains("500 ms", html);
+
+        // Verify first request attributes (success)
+        Assert.Contains("data-wf-start=\"50\"", html);
+        Assert.Contains("data-wf-duration=\"150\"", html);
+        Assert.Contains("data-wf-url=\"external-api.test/v1/users?id=123\"", html);
+        Assert.Contains("data-wf-status=\"200\"", html);
+
+        // Verify second request attributes (failure & html-encoded)
+        Assert.Contains("data-wf-start=\"320\"", html);
+        Assert.Contains("data-wf-duration=\"80\"", html);
+        Assert.Contains("data-wf-url=\"untrusted-api.test/v1/search?query=a&b=%3Cscript%3E\"", html);
+        Assert.Contains("data-wf-status=\"500\"", html);
+        Assert.Contains("wf-bar--error", html);
+    }
+
     private static DebugEntry CreateEntry()
     {
         return new DebugEntry

DebugProbe.AspNetCore/Assets/css/debugprobe.css

@@ -1211,3 +1211,82 @@ pre {
     }
 }
 
+/* Phase 2: Ruler, Gridlines & Tooltip styles */
+.waterfall-ruler-row {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    margin-bottom: 8px;
+    border-bottom: 1px solid #e5e7eb;
+    padding-bottom: 4px;
+}
+
+.wf-ruler-label-placeholder {
+    flex: 0 0 200px;
+    width: 200px;
+    min-width: 200px;
+}
+
+@media (max-width: 640px) {
+    .wf-ruler-label-placeholder {
+        flex: 0 0 100px;
+        width: 100px;
+        min-width: 100px;
+    }
+}
+
+.wf-ruler-ticks {
+    flex: 1;
+    position: relative;
+    height: 18px;
+}
+
+.wf-ruler-tick {
+    position: absolute;
+    top: 0;
+    transform: translateX(-50%);
+    font-size: 10px;
+    color: #6b7280;
+    font-weight: bold;
+    white-space: nowrap;
+}
+
+.wf-ruler-tick:first-child {
+    transform: none;
+}
+
+.wf-ruler-tick:last-child {
+    transform: translateX(-100%);
+}
+
+.wf-track {
+    background-image: linear-gradient(to right, rgba(0, 0, 0, 0.04) 1px, transparent 1px);
+    background-size: 25% 100%;
+}
+
+.wf-tooltip {
+    position: absolute;
+    background: #1e293b;
+    color: #f8fafc;
+    padding: 8px 12px;
+    border-radius: 6px;
+    font-size: 11px;
+    font-family: Inter, ui-sans-serif, system-ui, sans-serif;
+    pointer-events: none;
+    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.15), 0 2px 4px -2px rgba(0, 0, 0, 0.15);
+    z-index: 1000;
+    line-height: 1.4;
+    max-width: 300px;
+    word-break: break-all;
+    display: none;
+    border: 1px solid #334155;
+}
+
+.wf-tooltip-url {
+    font-weight: bold;
+    margin-bottom: 4px;
+    color: #38bdf8;
+    border-bottom: 1px solid #475569;
+    padding-bottom: 4px;
+}
+

DebugProbe.AspNetCore/Assets/js/debugprobe-ui.js

@@ -1,4 +1,4 @@
-function copyText(btn) {
+function copyText(btn) {
     const pre = btn.closest(".code-block").querySelector("pre");
 
     const text = pre.dataset.copy ?? pre.innerText;
@@ -69,3 +69,83 @@ resetFiltersBtn?.addEventListener("click", () => {
     applyRequestFilters();
     requestSearch?.focus();
 });
+
+// Phase 2: Waterfall Timeline Interactivity
+document.addEventListener("DOMContentLoaded", () => {
+    let tooltip = document.getElementById("wfTooltip");
+    if (!tooltip) {
+        tooltip = document.createElement("div");
+        tooltip.id = "wfTooltip";
+        tooltip.className = "wf-tooltip";
+        document.body.appendChild(tooltip);
+    }
+
+    const bars = document.querySelectorAll(".wf-bar");
+    bars.forEach(bar => {
+        bar.addEventListener("mouseenter", () => {
+            const start = bar.getAttribute("data-wf-start");
+            const duration = bar.getAttribute("data-wf-duration");
+            const url = bar.getAttribute("data-wf-url");
+            const status = bar.getAttribute("data-wf-status") || "N/A";
+            const isError = bar.classList.contains("wf-bar--error");
+            
+            tooltip.innerHTML = "";
+            
+            const urlEl = document.createElement("div");
+            urlEl.className = "wf-tooltip-url";
+            urlEl.textContent = url;
+            
+            const startEl = document.createElement("div");
+            startEl.innerHTML = "<strong>Start:</strong> +" + escapeHtml(start) + " ms";
+            
+            const durationEl = document.createElement("div");
+            durationEl.innerHTML = "<strong>Duration:</strong> " + escapeHtml(duration) + " ms";
+            
+            const statusEl = document.createElement("div");
+            const statusSpan = document.createElement("span");
+            statusSpan.style.color = isError ? "#f87171" : "#4ade80";
+            statusSpan.style.fontWeight = "bold";
+            statusSpan.textContent = status;
+            statusEl.innerHTML = "<strong>Status:</strong> ";
+            statusEl.appendChild(statusSpan);
+            
+            tooltip.appendChild(urlEl);
+            tooltip.appendChild(startEl);
+            tooltip.appendChild(durationEl);
+            tooltip.appendChild(statusEl);
+
+            tooltip.style.display = "block";
+        });
+
+        bar.addEventListener("mousemove", (e) => {
+            const tooltipWidth = tooltip.offsetWidth;
+            const tooltipHeight = tooltip.offsetHeight;
+            let left = e.pageX + 10;
+            let top = e.pageY + 10;
+
+            if (left + tooltipWidth > window.innerWidth + window.pageXOffset) {
+                left = e.pageX - tooltipWidth - 10;
+            }
+            if (top + tooltipHeight > window.innerHeight + window.pageYOffset) {
+                top = e.pageY - tooltipHeight - 10;
+            }
+
+            tooltip.style.left = left + "px";
+            tooltip.style.top = top + "px";
+        });
+
+        bar.addEventListener("mouseleave", () => {
+            tooltip.style.display = "none";
+        });
+    });
+
+    function escapeHtml(str) {
+        if (!str) return "";
+        return str
+            .replace(/&/g, "&amp;")
+            .replace(/</g, "&lt;")
+            .replace(/>/g, "&gt;")
+            .replace(/"/g, "&quot;")
+            .replace(/'/g, "&#039;");
+    }
+});

DebugProbe.AspNetCore/Internal/Rendering/HtmlRenderer.cs

@@ -208,6 +208,23 @@ private static string BuildWaterfallSection(DebugEntry entry)
             totalSpan = 1.0;
         }
 
+        var ticksHtml = new List<string>();
+        for (int i = 0; i <= 4; i++)
+        {
+            var tickVal = (totalSpan * i) / 4.0;
+            var tickLeft = i * 25;
+            var tickValStr = tickVal.ToString("0", System.Globalization.CultureInfo.InvariantCulture);
+            ticksHtml.Add($@"<div class=""wf-ruler-tick"" style=""left: {tickLeft}%;"">{tickValStr} ms</div>");
+        }
+
+        var rulerHtml = $@"
+                <div class=""waterfall-ruler-row"">
+                    <div class=""wf-ruler-label-placeholder""></div>
+                    <div class=""wf-ruler-ticks"">
+                        {string.Join("", ticksHtml)}
+                    </div>
+                </div>";
+
         var rowsHtml = new List<string>();
 
         foreach (var outgoing in entry.OutgoingRequests)
@@ -228,11 +245,20 @@ private static string BuildWaterfallSection(DebugEntry entry)
 
             var displayLabel = GetDisplayTarget(outgoing.Url);
 
+            var dataStart = Encode(Math.Max(0, startOffsetMs).ToString("0", System.Globalization.CultureInfo.InvariantCulture));
+            var dataDuration = Encode(outgoing.DurationMs.ToString(System.Globalization.CultureInfo.InvariantCulture));
+            var dataUrl = Encode(displayLabel);
+            var dataStatus = Encode(outgoing.StatusCode.HasValue ? outgoing.StatusCode.Value.ToString(System.Globalization.CultureInfo.InvariantCulture) : "Failed");
+
             rowsHtml.Add($@"
                 <div class=""waterfall-row"">
                     <span class=""wf-label"" title=""{Encode(outgoing.Url)}"">{Encode(displayLabel)}</span>
                     <div class=""wf-track"">
-                        <div class=""{barClass}"" style=""left: {leftStr}%; width: {widthStr}%;"">{outgoing.DurationMs} ms</div>
+                        <div class=""{barClass}"" style=""left: {leftStr}%; width: {widthStr}%;""
+                             data-wf-start=""{dataStart}""
+                             data-wf-duration=""{dataDuration}""
+                             data-wf-url=""{dataUrl}""
+                             data-wf-status=""{dataStatus}"">{outgoing.DurationMs} ms</div>
                     </div>
                 </div>");
         }
@@ -247,6 +273,7 @@ private static string BuildWaterfallSection(DebugEntry entry)
                     </div>
                 </div>
                 <div class=""trace-details"">
+                    {rulerHtml}
                     {string.Join("", rowsHtml)}
                 </div>
             </div>