dennii/Web-Page-Performance-Test
1
0
Fork 0
mirror of https://github.com/DeNNiiInc/Web-Page-Performance-Test.git synced 2026-04-17 20:05:58 +00:00
Code Issues Packages Projects Releases Wiki Activity

Waterfall Phase 1.2 - Add vertical grid lines for time visualization

Browse Source
This commit is contained in:
DeNNiiInc
2025-12-28 02:32:38 +11:00
parent 50fee336c1
commit 600d231e7c
2 changed files with 11 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
waterfall.html
View File

@@ -40,6 +40,15 @@
transform: translateX(-50%); transform: translateX(-50%);
} }
.grid-line {
position: absolute;
top: 25px;
bottom: 0;
width: 1px;
background: rgba(119, 119, 119, 0.15);
pointer-events: none;
}
.waterfall-row { .waterfall-row {
display: flex; display: flex;
align-items: center; align-items: center;

3
waterfall.js
View File

@@ -50,11 +50,12 @@ function renderWaterfall() {
let html = ''; let html = '';
// Add time scale header // Add time scale header with grid lines
html += '<div class="waterfall-timescale">'; html += '<div class="waterfall-timescale">';
for (let sec = 0; sec <= Math.ceil(maxTime); sec++) { for (let sec = 0; sec <= Math.ceil(maxTime); sec++) {
const pos = sec * scale; const pos = sec * scale;
html += `<div class="time-marker" style="left: ${300 + pos}px">${sec}s</div>`; html += `<div class="time-marker" style="left: ${300 + pos}px">${sec}s</div>`;
html += `<div class="grid-line" style="left: ${300 + pos}px"></div>`;
} }
html += '</div>'; html += '</div>';