aboutsummaryrefslogtreecommitdiffstats
path: root/debug_toolbar/templates
diff options
context:
space:
mode:
Diffstat (limited to 'debug_toolbar/templates')
-rw-r--r--debug_toolbar/templates/debug_toolbar/panels/timer.html68
1 files changed, 1 insertions, 67 deletions
diff --git a/debug_toolbar/templates/debug_toolbar/panels/timer.html b/debug_toolbar/templates/debug_toolbar/panels/timer.html
index aae540f..0138e64 100644
--- a/debug_toolbar/templates/debug_toolbar/panels/timer.html
+++ b/debug_toolbar/templates/debug_toolbar/panels/timer.html
@@ -21,6 +21,7 @@
</tbody>
</table>
+<!-- This hidden div is populated and displayed by code in toolbar.js -->
<div id="djDebugBrowserTiming" style="display:none">
<h4>{% trans 'Browser Timing' %}</h4>
<table>
@@ -39,70 +40,3 @@
</tbody>
</table>
</div>
-<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,
- 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'),
- timelineCell = document.createElement('td'),
- valueCell = document.createElement('td');
- row.className = (rowCount % 2) ? 'djDebugOdd' : 'djDebugEven';
- 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) + ';">&nbsp;</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;">&nbsp;</strong></div></div>';
- valueCell.innerHTML = (perf.timing[stat] - timingOffset);
- }
- row.appendChild(keyCell);
- row.appendChild(timelineCell);
- row.appendChild(valueCell);
- d.getElementById('djDebugBrowserTimingTableBody').appendChild(row);
- }
-
- // 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('domContentLoadedEventStart', 'domContentLoadedEventEnd');
- addRow('loadEventStart', 'loadEventEnd');
- d.getElementById('djDebugBrowserTiming').style.display = "block";
- }
- }
-
- function renderPerf() {
- setTimeout(_renderPerf, 1000);
- }
-
- if (w.addEventListener) { w.addEventListener("load", renderPerf, false); }
- else if (w.attachEvent) { w.attachEvent("onload", renderPerf); }
- }(window, document));
-</script>