Waterfall Phase 1.3 - Add resource type badges (HTML, CSS, JS, IMG)

waterfall.js

@@ -60,9 +60,10 @@ function renderWaterfall() {
     html += '</div>';
     
     filteredEntries.forEach((entry, index) => {
-        const label = truncateUrl(entry.url, 35);
+        const label = truncateUrl(entry.url, 30);
         const timingBars = renderTimingBars(entry.timing, scale);
         const statusColor = getStatusColor(entry.status);
+        const typeBadge = getResourceTypeBadge(entry.resourceType);
         const sizeKB = (entry.size.transferSize / 1024).toFixed(1);
         const timeMS = entry.timing.total.toFixed(0);
         
@@ -70,6 +71,7 @@ function renderWaterfall() {
             <div class="waterfall-row" data-request-id="${entry.requestId}">
                 <div class="request-number">${entry.requestId}</div>
                 <div class="status-badge" style="background: ${statusColor}">${entry.status}</div>
+                <div class="type-badge">${typeBadge}</div>
                 <div class="request-label" title="${entry.url}">${label}</div>
                 <div class="timeline">${timingBars}</div>
                 <div class="request-size">${sizeKB} KB</div>
@@ -97,6 +99,19 @@ function getStatusColor(status) {
     return '#9E9E9E'; // Grey for others
 }
 
+function getResourceTypeBadge(type) {
+    const badges = {
+        'Document': 'HTML',
+        'Stylesheet': 'CSS',
+        'Script': 'JS',
+        'Image': 'IMG',
+        'Font': 'FONT',
+        'XHR': 'XHR',
+        'Fetch': 'API'
+    };
+    return badges[type] || 'OTHER';
+}
+
 function renderTimingBars(timing, scale) {
     let html = '';
     let currentOffset = timing.startTime * scale;