Add Waterfall Chart & Request Inspector

Features Added:
- Interactive waterfall timeline visualization
- Color-coded timing bars (DNS, Connect, SSL, TTFB, Download)
- Request filtering by resource type (HTML, JS, CSS, Images, Fonts)
- Detailed request inspector dialog with timing breakdown
- HAR data extraction from Lighthouse results
- Size/compression metrics display
- Third-party resource identification
- Render-blocking resource detection

Technical Implementation:
- Created lib/har-parser.js for network data extraction
- Built waterfall.html with SVG-based timeline renderer
- Added waterfall.js with interactive controls
- Integrated HAR generation into test runner workflow
- Updated main UI with View Waterfall link
This commit is contained in:
2025-12-28 01:32:27 +11:00
parent 541f451f15
commit 4aa890da6f
12 changed files with 891 additions and 1 deletions

View File

@@ -91,6 +91,20 @@
<div class="metric-label">TBT (ms)</div>
</div>
</div>
<!-- Waterfall Link -->
<div style="margin-top: 1.5rem; display: none;" id="waterfall-link-container">
<a href="#" id="view-waterfall" class="button" style="display: inline-block; padding: 0.75rem 1.5rem; background: var(--color-accent); color: white; text-decoration: none; border-radius: 8px; font-weight: 600;">
📊 View Waterfall Chart
</a>
</div>
<!-- Content Breakdown -->
<div id="content-breakdown" style="margin-top: 2rem; display: none;">
<h3>Content Breakdown</h3>
<canvas id="breakdown-chart" style="max-width: 500px; margin: 0 auto;"></canvas>
<div id="breakdown-stats" style="margin-top: 1rem;"></div>
</div>
</div>
<!-- History -->