-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
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);