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

waterfall.html

@@ -83,8 +83,22 @@
             color: white;
         }
         
+        .type-badge {
+            width: 48px;
+            height: 18px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            border-radius: 3px;
+            font-size: 9px;
+            font-weight: 700;
+            background: var(--color-bg-secondary);
+            color: var(--color-text-secondary);
+            border: 1px solid var(--color-border);
+        }
+        
         .request-label {
-            width: 250px;
+            width: 220px;
             padding: 0 8px;
             font-size: 11px;
             color: var(--color-text-primary);

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;