From d2a695ac36bc90db044c6ab6993ae22759912676 Mon Sep 17 00:00:00 2001
From: DeNNiiInc <dennii.inc@gmail.com>
Date: Sun, 28 Dec 2025 02:42:49 +1100
Subject: [PATCH] Add waterfall sorting controls - default slowest to fastest

---
 waterfall.html | 29 ++++++++++++++++++++++-------
 waterfall.js   | 36 ++++++++++++++++++++++++++++++++++++
 2 files changed, 58 insertions(+), 7 deletions(-)

diff --git a/waterfall.html b/waterfall.html
index 90609f9..853cfb7 100644
--- a/waterfall.html
+++ b/waterfall.html
@@ -253,13 +253,28 @@
     <div class="waterfall-container">
         <h1>Request Waterfall</h1>
         
-        <div class="filter-controls" id="filterControls">
-            <button class="filter-btn active" data-type="all">All</button>
-            <button class="filter-btn" data-type="Document">HTML</button>
-            <button class="filter-btn" data-type="Script">JS</button>
-            <button class="filter-btn" data-type="Stylesheet">CSS</button>
-            <button class="filter-btn" data-type="Image">Images</button>
-            <button class="filter-btn" data-type="Font">Fonts</button>
+        <div style="display: flex; gap: 2rem; margin-bottom: 1.5rem; align-items: center;">
+            <div class="filter-controls" id="filterControls">
+                <button class="filter-btn active" data-type="all">All</button>
+                <button class="filter-btn" data-type="Document">HTML</button>
+                <button class="filter-btn" data-type="Script">JS</button>
+                <button class="filter-btn" data-type="Stylesheet">CSS</button>
+                <button class="filter-btn" data-type="Image">Images</button>
+                <button class="filter-btn" data-type="Font">Fonts</button>
+            </div>
+            
+            <div style="display: flex; align-items: center; gap: 0.5rem;">
+                <label for="sortSelect" style="color: var(--color-text-secondary); font-size: 0.9rem;">Sort:</label>
+                <select id="sortSelect" style="padding: 0.5rem; border-radius: 6px; background: var(--color-bg-secondary); color: var(--color-text-primary); border: 2px solid var(--color-border); cursor: pointer;">
+                    <option value="time-desc">Slowest → Fastest</option>
+                    <option value="time-asc">Fastest → Slowest</option>
+                    <option value="size-desc">Largest → Smallest</option>
+                    <option value="size-asc">Smallest → Largest</option>
+                    <option value="name-asc">Name (A → Z)</option>
+                    <option value="name-desc">Name (Z → A)</option>
+                    <option value="sequence">Original Sequence</option>
+                </select>
+            </div>
         </div>
         
         <div class="waterfall-canvas" id="waterfallCanvas"></div>
diff --git a/waterfall.js b/waterfall.js
index ca5eb4c..2f80c80 100644
--- a/waterfall.js
+++ b/waterfall.js
@@ -5,6 +5,7 @@
 
 let currentHarData = null;
 let currentFilter = 'all';
+let currentSort = 'time-desc'; // Default: slowest to fastest
 
 // Load HAR data from URL parameter
 async function init() {
@@ -48,6 +49,9 @@ function renderWaterfall() {
         ? entries 
         : entries.filter(e => e.resourceType === currentFilter);
     
+    // Sort entries based on current sort
+    sortEntries(filteredEntries);
+    
     let html = '';
     
     // Add time scale header with grid lines
@@ -112,6 +116,32 @@ function getResourceTypeBadge(type) {
     return badges[type] || 'OTHER';
 }
 
+function sortEntries(entries) {
+    switch(currentSort) {
+        case 'time-desc': // Slowest to fastest
+            entries.sort((a, b) => b.timing.total - a.timing.total);
+            break;
+        case 'time-asc': // Fastest to slowest
+            entries.sort((a, b) => a.timing.total - b.timing.total);
+            break;
+        case 'size-desc': // Largest to smallest
+            entries.sort((a, b) => b.size.transferSize - a.size.transferSize);
+            break;
+        case 'size-asc': // Smallest to largest
+            entries.sort((a, b) => a.size.transferSize - b.size.transferSize);
+            break;
+        case 'name-asc': // A to Z
+            entries.sort((a, b) => a.url.localeCompare(b.url));
+            break;
+        case 'name-desc': // Z to A
+            entries.sort((a, b) => b.url.localeCompare(a.url));
+            break;
+        case 'sequence': // Original sequence
+            entries.sort((a, b) => a.requestId - b.requestId);
+            break;
+    }
+}
+
 function renderTimingBars(timing, scale) {
     let html = '';
     let currentOffset = timing.startTime * scale;
@@ -241,6 +271,12 @@ function setupEventListeners() {
         });
     });
     
+    // Sort dropdown
+    document.getElementById('sortSelect').addEventListener('change', (e) => {
+        currentSort = e.target.value;
+        renderWaterfall();
+    });
+    
     // Close dialog
     document.getElementById('closeDialog').addEventListener('click', closeDialog);
     document.getElementById('dialogOverlay').addEventListener('click', closeDialog);