Add javascript timing metrics to timing panel onLoad if available

2 files changed, 61 insertions, 1 deletions

diff --git a/debug_toolbar/panels/timer.py b/debug_toolbar/panels/timer.py
index bc7f87d..fa23617 100644
--- a/debug_toolbar/panels/timer.py
+++ b/debug_toolbar/panels/timer.py
@@ -71,7 +71,7 @@ class TimerDebugPanel(DebugPanel):
             return _('TOTAL: %0.2fms') % stats['total_time']
 
     def title(self):
-        return _('Resource Usage')
+        return _('Time')
 
     def url(self):
         return ''
diff --git a/debug_toolbar/templates/debug_toolbar/panels/timer.html b/debug_toolbar/templates/debug_toolbar/panels/timer.html
index f267de1..d30bbf4 100644
--- a/debug_toolbar/templates/debug_toolbar/panels/timer.html
+++ b/debug_toolbar/templates/debug_toolbar/panels/timer.html
@@ -1,4 +1,5 @@
 {% load i18n %}
+<h4>{% trans 'Resource Usage' %}</h4>
 <table>
 	<colgroup>
 		<col style="width:20%"/>
@@ -19,3 +20,62 @@
 		{% endfor %}
 	</tbody>
 </table>
+
+<div id="djDebugBrowserTiming" style="display:none">
+	<h4>{% trans 'Browser Timing' %}</h4>
+	<table>
+		<colgroup>
+			<col style="width:20%"/>
+			<col/>
+		</colgroup>
+		<thead>
+			<tr>
+				<th>{% trans "Timing Attribute" %}</th>
+				<th>{% trans "Value" %}</th>
+			</tr>
+		</thead>
+		<tbody id="djDebugBrowserTimingTableBody">
+		</tbody>
+	</table>
+</div>
+<script>
+	(function(w, d) {
+		function _renderPerf() {
+			var perf = w.performance || w.msPerformance ||
+						w.webkitPerformance || w.mozPerformance;
+			if (perf) {
+				var rowCount = 0,
+					timingOffset = perf.timing.navigationStart;
+				function addRow(stat) {
+					rowCount++;
+					var row = document.createElement('tr'),
+					    keyCell = document.createElement('td'),
+						valueCell = document.createElement('td');
+					row.className = (rowCount % 2) ? 'djDebugOdd' : 'djDebugEven';
+					keyCell.innerHTML = stat;
+					valueCell.innerHTML = (perf.timing[stat] - timingOffset) + " msec";
+					row.appendChild(keyCell);
+					row.appendChild(valueCell);
+					d.getElementById('djDebugBrowserTimingTableBody').appendChild(row);
+				}
+
+				addRow('requestStart');
+				addRow('responseStart');
+				addRow('responseEnd');
+				addRow('domLoading');
+				addRow('domInteractive');
+				addRow('domComplete');
+				addRow('loadEventStart');
+				addRow('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>