Introduces new breakdown page that provides detailed statistics and visualizations for HTTP request data analysis across multiple dimensions.
Features:
- Overall statistics dashboard (total requests, size, success rate, cache hit rate)
- Resource type breakdown with visual progress bars
- Status code analysis by HTTP status categories
- Hostname breakdown showing top 10 domains
- Total and average response time metrics
- Responsive design with mobile-friendly layouts
- Added to main navigation as "Request Breakdown" tab
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
Corrects CSV export to properly include timing data by accessing nested timing properties and calculating derived values like DNS time, connection time, and data rate. Headers now include units (μs, bytes, bytes/sec) for clarity.
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
Enables users to download filtered HTTP request data as CSV files with comprehensive data including timing, sizes, CDN analysis, and queue analysis.
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Replace getTotalResponseTimeColor() inline styles with getTotalResponseTimeClass() CSS classes
- Add CSS overrides in RequestRowDetails.module.css to remove background colors from status classes
- Ensure danger, warning, and success indicators only affect text color, not background
- Maintain consistent component background styling throughout expanded details
- Use \!important declarations to override inherited status class background properties
- Preserve semantic color meanings (green=success, orange=warning, red=danger) for text only
Technical changes:
- Import getTotalResponseTimeClass instead of getTotalResponseTimeColor in RequestRowDetails.tsx
- Add CSS rules targeting .detailListItem and .timingHighlighted with status classes
- Set background-color: transparent \!important for all status class combinations
- Apply color variables (--color-success, --color-warning, --color-danger) to text only
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Create ColumnSettings component with collapsible panel and organized column groups
- Implement localStorage persistence for column visibility preferences across sessions
- Add default visible columns: expand, url, start time, total response time, data rate, content-length
- Group columns by category: Basic, Connection, Timing, Performance, Advanced
- Provide bulk actions: Show All, Hide All, Reset to Defaults
- Add conditional rendering for all table headers and cells based on visibility state
- Update RequestRowDetails to dynamically calculate colSpan based on visible columns
- Create responsive grid layout for column settings with hover effects
- Use CSS modules with App.css variables for consistent theming
- Implement type-safe column management with proper TypeScript interfaces
Features:
- 🎛️ Gear icon toggle button for easy access to column settings
- 📁 Logical grouping of related columns for better organization
- 💾 Automatic persistence of user preferences in localStorage
- 🎯 Clean default view showing only essential columns
- 🔧 Flexible customization allowing users to show exactly what they need
- 📱 Responsive design that adapts to different screen sizes
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Extract connectionId from Chrome DevTools trace data in ResourceSendRequest and ResourceReceiveResponse events
- Create connectionUtils to assign sequential connection numbers (1, 2, 3...) based on chronological first-seen order
- Add Connection # and Request # columns between URL and Start Time in requests table
- Implement request numbering within each connection ordered by start time
- Add comprehensive tooltips explaining connection behavior across HTTP versions:
* HTTP/1.1: Traditional connections with 6-connection limit per domain
* HTTP/2: Single connection with multiplexing capability
* HTTP/3: QUIC stream groupings instead of TCP connections
- Update HTTPRequest interface with connectionId, connectionNumber, and requestNumberOnConnection fields
- Integrate connection processing into HTTPRequestViewer pipeline
- Update RequestRowDetails colSpan to accommodate new columns
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Add CSS rules to disable filter brightness effects on expanded request rows
- Prevent RequestRowDetails from inheriting tbody tr:hover lightening behavior
- Maintain intended background color and remove unwanted border changes on hover
- Apply hover overrides to both row and cell elements for complete coverage
- Ensure expanded row details maintain consistent appearance during interaction
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Add comprehensive header layout with appHeader, headerLeft, and backButton classes
- Implement prominent navigation buttons with hover effects and active state indicators
- Add app title with proper typography styling using CSS variables
- Create navButton class with blue primary color scheme, transitions, and shadow effects
- Add active state visual feedback with bottom border triangle indicator
- Use CSS variables from App.css for consistent theming and maintainability
- Improve responsive layout with flexbox positioning and proper spacing
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Add getPriorityIcon() function with visual priority indicators:
🔥 VeryHigh, 🔺 High, 🟡 Medium, 🔹 Low, 🐢 VeryLow
- Display priority icons in both table rows and detail view
- Add priorityCell CSS class with fixed width and no-wrap styling
- Update tooltip to show icon legend for all priority levels
- Enhance table hover effects with brightness filter and dashed borders
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Add dark theme variables and standardized status classes to App.module.css
- Convert RequestRowSummary to use CSS modules with success/warning/danger classes
- Replace inline styles with class-based styling for better theme compatibility
- Enhance RequestRowDetails header display with monospace font and hover tooltips
- Implement proper header name/value layout with grid system and overflow handling
- Remove deprecated CSS files and consolidate styling approach
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Add Data Rate column between Duration and Size in HTTP requests table
- Implement formatDataRate function that prefers content-length over transfer size
- Add color coding for data rate: green (≥1 MB/s), yellow (100 KB/s - 1 MB/s), red (<100 KB/s)
- Add comprehensive tooltip definition for data rate column
- Reorder columns: Server Latency → Duration → Total Response Time → Data Rate → Size
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Reorder table headers: URL now appears after Priority, before Start Time
- Update RequestRowSummary component to match new column order
- Improved table layout with URL positioned earlier for better visibility
- Maintains all existing functionality and styling
New column order:
Expand | Method | Status | Type | Priority | URL | Start Time | Queue Time | DNS | Connection | Server Latency | Duration | Total Response Time | Size | Content-Length | Protocol | CDN | Cache
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Change Duration from network transfer time to client-side time
- Duration = Total Response Time - Server Latency
- This includes queuing, DNS, connection, SSL, and download time
- Excludes server processing time, giving clearer client-side optimization insights
- Add downloadTime field for pure response body transfer time
- Update tooltip definition to reflect new calculation meaning
Mathematical verification:
- Total Response Time = Queue + DNS + Connection + SSL + Server + Download
- Server Latency = Server processing time only
- Duration = Total - Server = Queue + DNS + Connection + SSL + Download
This provides more meaningful client-side performance metrics for optimization.
Duration now represents time the browser spends vs. time the server spends.
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Change calculation from lastDataTimestamp - sendRequest.ts to lastDataTimestamp - timing.start
- timing.start includes the earliest request event (ResourceWillSendRequest) with queuing
- sendRequest.ts only starts from ResourceSendRequest which skips queuing time
- Total response time now correctly represents wall clock time from request initiation to completion
- Fixes issue where total response time was incorrectly shorter than individual request duration
- Maintains fallback to sendRequest timestamp if timing.start unavailable
This resolves the discrepancy where total response time (3.4ms) was impossibly faster
than request duration (87.2ms) for request ID CFE45B40FA39328019033E8AC78DB909.
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Use React.lazy() and Suspense for BabylonViewer and BabylonTimelineViewer
- Reduce main bundle size from 7.4MB to 336KB (95% reduction)
- Split Babylon.js into separate chunk loaded only when 3D views are selected
- Add ThreeDViewerLoading component with spinner for better UX
- Babylon.js libraries now load on-demand when user clicks 3D view toggles
Bundle optimization results:
- Main bundle: 336KB (was 7.4MB)
- Babylon chunk: 7MB (lazy-loaded)
- BabylonViewer: 3.6KB (lazy-loaded)
- BabylonTimelineViewer: 6.6KB (lazy-loaded)
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Extend path routing to support /[traceid]/[view]/[3dview] format
- Add 'network' and 'timeline' as 3D view parameters in URL
- Update HTTPRequestViewer to sync 3D view state with URL
- Handle browser back/forward navigation for 3D views
- Ensure only one 3D view is active at a time
- URLs now reflect selected 3D visualization state for sharing
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Create centralized tooltip definitions with TooltipType enum
- Add comprehensive tooltip content for 31 different field types
- Include Lighthouse relationships, calculations, and documentation links
- Implement click-to-open modal system with rich content display
- Refactor Tooltip component to use enum-based content lookup
- Update RequestsTable and RequestDebugger to use simplified enum syntax
- Add Modal component with keyboard shortcuts and backdrop dismiss
- Maintain type safety with proper TypeScript interfaces
- Clean up component props by centralizing all tooltip content
Benefits:
- Single source of truth for all tooltip definitions
- Improved maintainability and consistency
- Type-safe enum usage prevents errors
- Reduced code duplication across components
- Enhanced UX with detailed modal explanations
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Create new BabylonTimelineViewer with swimlane-based layout
- Add dual-box system: gray server time (50% opacity) + blue network time boxes
- Implement yellow queue time visualization with 25% opacity
- Add host-based swimlanes with alternating left/right positioning sorted by earliest request time
- Create timeline grid lines with adaptive time labels (microseconds/milliseconds/seconds)
- Add UniversalCamera with WASD keyboard navigation from behind timeline (z: -10)
- Implement vertical gradient coloring for stacked overlapping requests
- Extract reusable timeline label creation function
- Position hostname labels below ground level (y: -1) for cleaner visualization
- Support both 3D Network View (radial) and 3D Timeline View (swimlanes) as modal overlays
- Add SSIM.js integration for intelligent screenshot similarity analysis
- Enhance CDN detection with comprehensive Akamai patterns and improved accuracy
- Add server latency calculation and color-coded display
- Add content-length header extraction and color-coded display
- Move 3D viewer from main nav to HTTP requests page with modal interface
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
