- 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>
