From 50fa93a503d1ac1ed1a6b72e6390cc97067f555d Mon Sep 17 00:00:00 2001
From: Roger Barnes
Date: Thu, 6 Sep 2012 17:48:05 +1000
Subject: Add javascript timing metrics to timing panel onLoad if available

---
 .../templates/debug_toolbar/panels/timer.html      | 60 ++++++++++++++++++++++
 1 file changed, 60 insertions(+)

(limited to 'debug_toolbar/templates')

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>
-- 
cgit v1.2.3


From ea60df8f6a3973c91595bf42f6b3f0d3d288824c Mon Sep 17 00:00:00 2001
From: Roger Barnes
Date: Sun, 24 Mar 2013 22:08:08 +1100
Subject: Waterfall timeline or browser events

---
 .../templates/debug_toolbar/panels/timer.html      | 53 ++++++++++++++++------
 1 file changed, 40 insertions(+), 13 deletions(-)

(limited to 'debug_toolbar/templates')

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";
 			}
 		}
-- 
cgit v1.2.3


From 36e7a760d9c5782cee1001f3e31c209bc7fb0e22 Mon Sep 17 00:00:00 2001
From: Roger Barnes
Date: Wed, 1 May 2013 22:15:26 +1000
Subject: Moved js to toolbar.js

---
 .../templates/debug_toolbar/panels/timer.html      | 68 +---------------------
 1 file changed, 1 insertion(+), 67 deletions(-)

(limited to 'debug_toolbar/templates')

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>
-- 
cgit v1.2.3


From 076ffdf29c8345ed6a201a53cc868e7c672d6662 Mon Sep 17 00:00:00 2001
From: Roger Barnes
Date: Wed, 1 May 2013 22:36:40 +1000
Subject: Updated browser timing javascript to use jQuery, tidied up wording
 and formatting, and minified js

---
 debug_toolbar/templates/debug_toolbar/panels/timer.html | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

(limited to 'debug_toolbar/templates')

diff --git a/debug_toolbar/templates/debug_toolbar/panels/timer.html b/debug_toolbar/templates/debug_toolbar/panels/timer.html
index 0138e64..74cf0c7 100644
--- a/debug_toolbar/templates/debug_toolbar/panels/timer.html
+++ b/debug_toolbar/templates/debug_toolbar/panels/timer.html
@@ -27,13 +27,14 @@
 	<table>
 		<colgroup>
 			<col style="width:20%"/>
-			<col/>
+			<col style="width:60%"/>
+			<col style="width:20%"/>
 		</colgroup>
 		<thead>
 			<tr>
 				<th>{% trans "Timing Attribute" %}</th>
 				<th class="timeline">{% trans 'Timeline' %}</th>
-				<th class="time">{% trans "Time since navigation start (+length, msec)" %}</th>
+				<th class="time">{% trans "Milliseconds since navigation start (+length)" %}</th>
 			</tr>
 		</thead>
 		<tbody id="djDebugBrowserTimingTableBody">
-- 
cgit v1.2.3