diff options
| -rw-r--r-- | debug_toolbar/templates/debug_toolbar/panels/timer.html | 53 |
1 files changed, 40 insertions, 13 deletions
diff --git a/debug_toolbar/templates/debug_toolbar/panels/timer.html b/debug_toolbar/templates/debug_toolbar/panels/timer.html index d30bbf4..aae540f 100644 --- a/debug_toolbar/templates/debug_toolbar/panels/timer.html +++ b/debug_toolbar/templates/debug_toolbar/panels/timer.html @@ -31,7 +31,8 @@ <thead> <tr> <th>{% trans "Timing Attribute" %}</th> - <th>{% trans "Value" %}</th> + <th class="timeline">{% trans 'Timeline' %}</th> + <th class="time">{% trans "Time since navigation start (+length, msec)" %}</th> </tr> </thead> <tbody id="djDebugBrowserTimingTableBody"> @@ -41,32 +42,58 @@ <script> (function(w, d) { function _renderPerf() { + // Browser timing is hidden unless we can successfully access the performance object var perf = w.performance || w.msPerformance || w.webkitPerformance || w.mozPerformance; if (perf) { var rowCount = 0, - timingOffset = perf.timing.navigationStart; - function addRow(stat) { + timingOffset = perf.timing.navigationStart, + timingEnd = perf.timing.loadEventEnd; + var totalTime = timingEnd - timingOffset; + console.log(timingOffset, timingEnd, totalTime); + function getLeft(stat) { + return ((perf.timing[stat] - timingOffset) / (totalTime)) * 100.0; + } + function getCSSWidth(stat, endStat) { + var width = ((perf.timing[endStat] - perf.timing[stat]) / (totalTime)) * 100.0; + // Calculate relative percent (same as sql panel logic) + width = 100.0 * width / (100.0 - getLeft(stat)); + return (width < 1) ? "2px" : width + "%"; + } + function addRow(stat, endStat) { rowCount++; var row = document.createElement('tr'), - keyCell = document.createElement('td'), + keyCell = document.createElement('td'), + timelineCell = document.createElement('td'), valueCell = document.createElement('td'); row.className = (rowCount % 2) ? 'djDebugOdd' : 'djDebugEven'; - keyCell.innerHTML = stat; - valueCell.innerHTML = (perf.timing[stat] - timingOffset) + " msec"; + timelineCell.className = 'timeline'; + if (endStat) { + // Render a start through end bar + keyCell.innerHTML = stat.replace('Start', '');; + timelineCell.innerHTML = '<div class="djDebugTimeline"><div class="djDebugLineChart" style="left:' + getLeft(stat) + '%;"><strong style="width:' + getCSSWidth(stat, endStat) + ';"> </strong></div></div>'; + valueCell.innerHTML = (perf.timing[stat] - timingOffset) + ' (+' + (perf.timing[endStat] - perf.timing[stat]) + ')'; + } else { + // Render a point in time + keyCell.innerHTML = stat; + timelineCell.innerHTML = '<div class="djDebugTimeline"><div class="djDebugLineChart" style="left:' + getLeft(stat) + '%;"><strong style="width:2px;"> </strong></div></div>'; + valueCell.innerHTML = (perf.timing[stat] - timingOffset); + } row.appendChild(keyCell); + row.appendChild(timelineCell); row.appendChild(valueCell); d.getElementById('djDebugBrowserTimingTableBody').appendChild(row); } - addRow('requestStart'); - addRow('responseStart'); - addRow('responseEnd'); - addRow('domLoading'); + // This is a reasonably complete and ordered set of timing periods (2 params) and events (1 param) + addRow('domainLookupStart', 'domainLookupEnd'); + addRow('connectStart', 'connectEnd'); + addRow('requestStart', 'responseEnd') // There is no requestStart + addRow('responseStart', 'responseEnd'); + addRow('domLoading', 'domComplete'); // Spans the events below addRow('domInteractive'); - addRow('domComplete'); - addRow('loadEventStart'); - addRow('loadEventEnd'); + addRow('domContentLoadedEventStart', 'domContentLoadedEventEnd'); + addRow('loadEventStart', 'loadEventEnd'); d.getElementById('djDebugBrowserTiming').style.display = "block"; } } |