Moved js to toolbar.js

2 files changed, 71 insertions, 68 deletions

diff --git a/debug_toolbar/static/debug_toolbar/js/toolbar.js b/debug_toolbar/static/debug_toolbar/js/toolbar.js
index 34fcaaf..0d1c92c 100644
--- a/debug_toolbar/static/debug_toolbar/js/toolbar.js
+++ b/debug_toolbar/static/debug_toolbar/js/toolbar.js
@@ -1,3 +1,6 @@
+// Grab jQuery for use in any of the below
+var $djdtjq = jQuery.noConflict(true);
+
 window.djdt = (function(window, document, jQuery) {
 	jQuery.cookie = function(name, value, options) { if (typeof value != 'undefined') { options = options || {}; if (value === null) { value = ''; options.expires = -1; } var expires = ''; if (options.expires && (typeof options.expires == 'number' || options.expires.toUTCString)) { var date; if (typeof options.expires == 'number') { date = new Date(); date.setTime(date.getTime() + (options.expires * 24 * 60 * 60 * 1000)); } else { date = options.expires; } expires = '; expires=' + date.toUTCString(); } var path = options.path ? '; path=' + (options.path) : ''; var domain = options.domain ? '; domain=' + (options.domain) : ''; var secure = options.secure ? '; secure' : ''; document.cookie = [name, '=', encodeURIComponent(value), expires, path, domain, secure].join(''); } else { var cookieValue = null; if (document.cookie && document.cookie != '') { var cookies = document.cookie.split(';'); for (var i = 0; i < cookies.length; i++) { var cookie = $.trim(cookies[i]); if (cookie.substring(0, name.length + 1) == (name + '=')) { cookieValue = decodeURIComponent(cookie.substring(name.length + 1)); break; } } } return cookieValue; } };
 	var $ = jQuery;
@@ -226,4 +229,70 @@ window.djdt = (function(window, document, jQuery) {
 		djdt.init();
 	});
 	return djdt;
-}(window, document, jQuery.noConflict(true)));
+}(window, document, $djdtjq));
+
+
+(function(window, document) {
+	function _renderPerf() {
+		// Browser timing remains hidden unless we can successfully access the performance object
+		var perf = window.performance || window.msPerformance ||
+					window.webkitPerformance || window.mozPerformance;
+		if (perf) {
+			var rowCount = 0,
+				timingOffset = perf.timing.navigationStart,
+				timingEnd = perf.timing.loadEventEnd;
+			var totalTime = timingEnd - timingOffset;
+			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);
+				document.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');
+			document.getElementById('djDebugBrowserTiming').style.display = "block";
+		}
+	}
+
+	function renderPerf() {
+		setTimeout(_renderPerf, 1000);
+	}
+
+	if (window.addEventListener) { window.addEventListener("load", renderPerf, false); }
+		else if (window.attachEvent) { window.attachEvent("onload", renderPerf); }
+}(window, document, $djdtjq));
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>