Feature/waterfall view phase2

[DevSars24]

Waterfall/Timeline View — Phase 2

What

Adds interactivity to the Phase 1 waterfall bars: hover tooltips showing
per-call metadata, and a time-axis ruler with millisecond gridlines scaled
to the parent request's total duration.

Why

Phase 1 shipped static, non-interactive bars. Users could see proportional
duration visually, but not exact timestamps, exact durations, or the target
URL/status without scrolling down to the matching outgoing-request card.
This phase closes that gap with hover-based detail, without adding zoom/pan
complexity (explicitly deferred to Phase 3).

Scope

• Hover tooltip per .wf-bar: start offset, duration, target URL, status.
• Time-axis ruler row above the waterfall track: 0%, 25%, 50%, 75%, 100%
  tick marks in milliseconds (InvariantCulture formatted).
• No zoom/pan, no new dependencies, no JS libraries — plain vanilla JS,
  matching the existing debugprobe-ui.js conventions (same pattern as
  copy buttons / row filtering).

Files changed

• HtmlRenderer.cs — extended BuildWaterfallSection(DebugEntry entry)
  to render the ruler row and embed data-wf-start, data-wf-duration,
  data-wf-url, data-wf-status attributes on each .wf-bar.
• debugprobe.css — added .waterfall-ruler-row, .wf-ruler-label-placeholder,
  .wf-ruler-ticks, .wf-ruler-tick, gridline styling on .wf-track, and
  .wf-tooltip / .wf-tooltip-url styles.
• debugprobe-ui.js — added tooltip creation + mouseenter / mousemove
  / mouseleave event bindings on .wf-bar elements, with viewport-bounds
  checking to avoid tooltip clipping off-screen.
• HtmlRendererTests.cs — added
  Details_page_renders_waterfall_section_with_ruler_and_tooltips_when_outgoing_requests_exist,
  verifying the ruler markup, data-wf-* attributes, and correct HTML-encoding.

Security

• data-wf-url uses the existing GetDisplayTarget() redaction output —
  never the raw request URL — so redacted/sensitive URL data is never
  leaked into the tooltip.
• All data-wf-* attribute values are HTML-encoded server-side before
  rendering, and the client-side tooltip script escapes values again before
  inserting into the DOM (defense in depth against XSS).

Testing

• dotnet test: all tests passing, no regressions.
• Manual verification on ShopApi/SampleApi:
  • Hit /demo/ExecuteExternalRequests (POST), opened /debug/{id}.
  • Ruler renders correct tick values scaled to total request duration.
  • Hovering a bar shows tooltip with correct start offset, duration,
    target URL, and status (verified on both success (201/200) calls).
  • Tooltip follows mouse via mousemove and stays within viewport bounds.