Waterfall timeline or browser events

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) + ';">&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);
 				}
 
-				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";
 			}
 		}