Skip to content

Commit 36e7a76

Browse files
mindsocketmindsocket
committed
Moved js to toolbar.js
1 parent ea60df8 commit 36e7a76

File tree

2 files changed

+71
-68
lines changed

2 files changed

+71
-68
lines changed

‎debug_toolbar/static/debug_toolbar/js/toolbar.js

+70-1
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,6 @@
1+
// Grab jQuery for use in any of the below
2+
var $djdtjq = jQuery.noConflict(true);
3+
14
window.djdt = (function(window, document, jQuery) {
25
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; } };
36
var $ = jQuery;
@@ -226,4 +229,70 @@ window.djdt = (function(window, document, jQuery) {
226229
djdt.init();
227230
});
228231
return djdt;
229-
}(window, document, jQuery.noConflict(true)));
232+
}(window, document, $djdtjq));
233+
234+
235+
(function(window, document) {
236+
function _renderPerf() {
237+
// Browser timing remains hidden unless we can successfully access the performance object
238+
var perf = window.performance || window.msPerformance ||
239+
window.webkitPerformance || window.mozPerformance;
240+
if (perf) {
241+
var rowCount = 0,
242+
timingOffset = perf.timing.navigationStart,
243+
timingEnd = perf.timing.loadEventEnd;
244+
var totalTime = timingEnd - timingOffset;
245+
function getLeft(stat) {
246+
return ((perf.timing[stat] - timingOffset) / (totalTime)) * 100.0;
247+
}
248+
function getCSSWidth(stat, endStat) {
249+
var width = ((perf.timing[endStat] - perf.timing[stat]) / (totalTime)) * 100.0;
250+
// Calculate relative percent (same as sql panel logic)
251+
width = 100.0 * width / (100.0 - getLeft(stat));
252+
return (width < 1) ? "2px" : width + "%";
253+
}
254+
function addRow(stat, endStat) {
255+
rowCount++;
256+
var row = document.createElement('tr'),
257+
keyCell = document.createElement('td'),
258+
timelineCell = document.createElement('td'),
259+
valueCell = document.createElement('td');
260+
row.className = (rowCount % 2) ? 'djDebugOdd' : 'djDebugEven';
261+
timelineCell.className = 'timeline';
262+
if (endStat) {
263+
// Render a start through end bar
264+
keyCell.innerHTML = stat.replace('Start', '');;
265+
timelineCell.innerHTML = '<div class="djDebugTimeline"><div class="djDebugLineChart" style="left:' + getLeft(stat) + '%;"><strong style="width:' + getCSSWidth(stat, endStat) + ';">&nbsp;</strong></div></div>';
266+
valueCell.innerHTML = (perf.timing[stat] - timingOffset) + ' (+' + (perf.timing[endStat] - perf.timing[stat]) + ')';
267+
} else {
268+
// Render a point in time
269+
keyCell.innerHTML = stat;
270+
timelineCell.innerHTML = '<div class="djDebugTimeline"><div class="djDebugLineChart" style="left:' + getLeft(stat) + '%;"><strong style="width:2px;">&nbsp;</strong></div></div>';
271+
valueCell.innerHTML = (perf.timing[stat] - timingOffset);
272+
}
273+
row.appendChild(keyCell);
274+
row.appendChild(timelineCell);
275+
row.appendChild(valueCell);
276+
document.getElementById('djDebugBrowserTimingTableBody').appendChild(row);
277+
}
278+
279+
// This is a reasonably complete and ordered set of timing periods (2 params) and events (1 param)
280+
addRow('domainLookupStart', 'domainLookupEnd');
281+
addRow('connectStart', 'connectEnd');
282+
addRow('requestStart', 'responseEnd') // There is no requestStart
283+
addRow('responseStart', 'responseEnd');
284+
addRow('domLoading', 'domComplete'); // Spans the events below
285+
addRow('domInteractive');
286+
addRow('domContentLoadedEventStart', 'domContentLoadedEventEnd');
287+
addRow('loadEventStart', 'loadEventEnd');
288+
document.getElementById('djDebugBrowserTiming').style.display = "block";
289+
}
290+
}
291+
292+
function renderPerf() {
293+
setTimeout(_renderPerf, 1000);
294+
}
295+
296+
if (window.addEventListener) { window.addEventListener("load", renderPerf, false); }
297+
else if (window.attachEvent) { window.attachEvent("onload", renderPerf); }
298+
}(window, document, $djdtjq));

‎debug_toolbar/templates/debug_toolbar/panels/timer.html

+1-67
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@ <h4>{% trans 'Resource Usage' %}</h4>
2121
</tbody>
2222
</table>
2323

24+
<!-- This hidden div is populated and displayed by code in toolbar.js -->
2425
<div id="djDebugBrowserTiming" style="display:none">
2526
<h4>{% trans 'Browser Timing' %}</h4>
2627
<table>
@@ -39,70 +40,3 @@ <h4>{% trans 'Browser Timing' %}</h4>
3940
</tbody>
4041
</table>
4142
</div>
42-
<script>
43-
(function(w, d) {
44-
function _renderPerf() {
45-
// Browser timing is hidden unless we can successfully access the performance object
46-
var perf = w.performance || w.msPerformance ||
47-
w.webkitPerformance || w.mozPerformance;
48-
if (perf) {
49-
var rowCount = 0,
50-
timingOffset = perf.timing.navigationStart,
51-
timingEnd = perf.timing.loadEventEnd;
52-
var totalTime = timingEnd - timingOffset;
53-
console.log(timingOffset, timingEnd, totalTime);
54-
function getLeft(stat) {
55-
return ((perf.timing[stat] - timingOffset) / (totalTime)) * 100.0;
56-
}
57-
function getCSSWidth(stat, endStat) {
58-
var width = ((perf.timing[endStat] - perf.timing[stat]) / (totalTime)) * 100.0;
59-
// Calculate relative percent (same as sql panel logic)
60-
width = 100.0 * width / (100.0 - getLeft(stat));
61-
return (width < 1) ? "2px" : width + "%";
62-
}
63-
function addRow(stat, endStat) {
64-
rowCount++;
65-
var row = document.createElement('tr'),
66-
keyCell = document.createElement('td'),
67-
timelineCell = document.createElement('td'),
68-
valueCell = document.createElement('td');
69-
row.className = (rowCount % 2) ? 'djDebugOdd' : 'djDebugEven';
70-
timelineCell.className = 'timeline';
71-
if (endStat) {
72-
// Render a start through end bar
73-
keyCell.innerHTML = stat.replace('Start', '');;
74-
timelineCell.innerHTML = '<div class="djDebugTimeline"><div class="djDebugLineChart" style="left:' + getLeft(stat) + '%;"><strong style="width:' + getCSSWidth(stat, endStat) + ';">&nbsp;</strong></div></div>';
75-
valueCell.innerHTML = (perf.timing[stat] - timingOffset) + ' (+' + (perf.timing[endStat] - perf.timing[stat]) + ')';
76-
} else {
77-
// Render a point in time
78-
keyCell.innerHTML = stat;
79-
timelineCell.innerHTML = '<div class="djDebugTimeline"><div class="djDebugLineChart" style="left:' + getLeft(stat) + '%;"><strong style="width:2px;">&nbsp;</strong></div></div>';
80-
valueCell.innerHTML = (perf.timing[stat] - timingOffset);
81-
}
82-
row.appendChild(keyCell);
83-
row.appendChild(timelineCell);
84-
row.appendChild(valueCell);
85-
d.getElementById('djDebugBrowserTimingTableBody').appendChild(row);
86-
}
87-
88-
// This is a reasonably complete and ordered set of timing periods (2 params) and events (1 param)
89-
addRow('domainLookupStart', 'domainLookupEnd');
90-
addRow('connectStart', 'connectEnd');
91-
addRow('requestStart', 'responseEnd') // There is no requestStart
92-
addRow('responseStart', 'responseEnd');
93-
addRow('domLoading', 'domComplete'); // Spans the events below
94-
addRow('domInteractive');
95-
addRow('domContentLoadedEventStart', 'domContentLoadedEventEnd');
96-
addRow('loadEventStart', 'loadEventEnd');
97-
d.getElementById('djDebugBrowserTiming').style.display = "block";
98-
}
99-
}
100-
101-
function renderPerf() {
102-
setTimeout(_renderPerf, 1000);
103-
}
104-
105-
if (w.addEventListener) { w.addEventListener("load", renderPerf, false); }
106-
else if (w.attachEvent) { w.attachEvent("onload", renderPerf); }
107-
}(window, document));
108-
</script>

0 commit comments

Comments
 (0)