Skip to content

Split JavaScript code between the toolbar itself and each panel #461

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 1 commit into from
Closed

Split JavaScript code between the toolbar itself and each panel #461

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
100 changes: 7 additions & 93 deletions debug_toolbar/static/debug_toolbar/js/toolbar.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,7 @@
// Browser globals.
window.djdt = factory(jQuery);
}
}(function (jQuery) {
var $ = jQuery;
}(function ($) {
var djdt = {
handleDragged: false,
events: {
Expand Down Expand Up @@ -64,6 +63,7 @@
});
});

// Used by the SQL and template panels
$('#djDebug .remoteCall').live('click', function() {
var self = $(this);
var name = self[0].tagName.toLowerCase();
Expand Down Expand Up @@ -98,16 +98,14 @@
return false;
});

$('#djDebugTemplatePanel a.djTemplateShowContext').live('click', function() {
djdt.toggle_arrow($(this).children('.toggleArrow'));
djdt.toggle_content($(this).parent().next());
return false;
});
// Used by the SQL panel -- in HTML generated by Python code
$('#djDebug a.djDebugToggle').live('click', function(e) {
e.preventDefault();
$(this).parent().find('.djDebugCollapsed').toggle();
$(this).parent().find('.djDebugUncollapsed').toggle();
});

// Used by the cache, profiling and SQL panels
$('#djDebug a.djToggleSwitch').live('click', function(e) {
e.preventDefault();
var btn = $(this);
Expand Down Expand Up @@ -135,24 +133,7 @@
});
return;
});
function getSubcalls(row) {
var id = row.attr('id');
return $('.djDebugProfileRow[id^="'+id+'_"]');
}
function getDirectSubcalls(row) {
var subcalls = getSubcalls(row);
var depth = parseInt(row.attr('depth'), 10) + 1;
return subcalls.filter('[depth='+depth+']');
}
$('.djDebugProfileRow .djDebugProfileToggle').live('click', function(){
var row = $(this).closest('.djDebugProfileRow');
var subcalls = getSubcalls(row);
if (subcalls.css('display') == 'none') {
getDirectSubcalls(row).show();
} else {
subcalls.hide();
}
});

$('#djHideToolBarButton').click(function() {
djdt.hide_toolbar(true);
return false;
Expand Down Expand Up @@ -221,13 +202,6 @@
callback(djdt);
});
},
toggle_content: function(elem) {
if (elem.is(':visible')) {
elem.hide();
} else {
elem.show();
}
},
close: function() {
$(document).trigger('close.djDebug');
return false;
Expand Down Expand Up @@ -273,11 +247,6 @@
expires: -1
});
},
toggle_arrow: function(elem) {
var uarr = String.fromCharCode(0x25b6);
var darr = String.fromCharCode(0x25bc);
elem.html(elem.html() == uarr ? darr : uarr);
},
ready: function(callback){
if (djdt.isReady) {
callback(djdt);
Expand All @@ -286,61 +255,6 @@
}
}
};

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,
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 = $('<tr class="' + ((rowCount % 2) ? 'djDebugOdd' : 'djDebugEven') + '"></tr>');
if (endStat) {
// Render a start through end bar
$row.html('<td>' + stat.replace('Start', '') + '</td>' +
'<td class="timeline"><div class="djDebugTimeline"><div class="djDebugLineChart" style="left:' + getLeft(stat) + '%;"><strong style="width:' + getCSSWidth(stat, endStat) + ';">&nbsp;</strong></div></div></td>' +
'<td>' + (perf.timing[stat] - timingOffset) + ' (+' + (perf.timing[endStat] - perf.timing[stat]) + ')</td>');
} else {
// Render a point in time
$row.html('<td>' + stat + '</td>' +
'<td class="timeline"><div class="djDebugTimeline"><div class="djDebugLineChart" style="left:' + getLeft(stat) + '%;"><strong style="width:2px;">&nbsp;</strong></div></div></td>' +
'<td>' + (perf.timing[stat] - timingOffset) + '</td>');
}
$('#djDebugBrowserTimingTableBody').append($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 requestEnd
addRow('responseStart', 'responseEnd');
addRow('domLoading', 'domComplete'); // Spans the events below
addRow('domInteractive');
addRow('domContentLoadedEventStart', 'domContentLoadedEventEnd');
addRow('loadEventStart', 'loadEventEnd');
$('#djDebugBrowserTiming').css("display", "block");
}
}

$(window).bind('load', function() {
setTimeout(renderPerf, 0);
});
$(document).ready(function() {
djdt.init();
});

$(document).ready(djdt.init);
return djdt;
}));
27 changes: 27 additions & 0 deletions debug_toolbar/static/debug_toolbar/js/toolbar.profiling.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
(function (factory) {
if (typeof define === 'function' && define.amd) {
define(['jquery'], factory);
} else {
factory(jQuery);
}
}(function ($) {
function getSubcalls(row) {
var id = row.attr('id');
return $('.djDebugProfileRow[id^="'+id+'_"]');
}
function getDirectSubcalls(row) {
var subcalls = getSubcalls(row);
var depth = parseInt(row.attr('depth'), 10) + 1;
return subcalls.filter('[depth='+depth+']');
}
$('.djDebugProfileRow .djDebugProfileToggle').on('click', function(){
var row = $(this).closest('.djDebugProfileRow');
var subcalls = getSubcalls(row);
if (subcalls.css('display') == 'none') {
getDirectSubcalls(row).show();
} else {
subcalls.hide();
}
});

}));
17 changes: 17 additions & 0 deletions debug_toolbar/static/debug_toolbar/js/toolbar.template.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
(function (factory) {
if (typeof define === 'function' && define.amd) {
define(['jquery'], factory);
} else {
factory(jQuery);
}
}(function ($) {
var uarr = String.fromCharCode(0x25b6),
darr = String.fromCharCode(0x25bc);

$('#djDebugTemplatePanel a.djTemplateShowContext').on('click', function() {
var arrow = $(this).children('.toggleArrow');
arrow.html(arrow.html() == uarr ? darr : uarr);
$(this).parent().next().toggle();
return false;
});
}));
54 changes: 54 additions & 0 deletions debug_toolbar/static/debug_toolbar/js/toolbar.timer.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,54 @@
(function (factory) {
if (typeof define === 'function' && define.amd) {
define(['jquery'], factory);
} else {
factory(jQuery);
}
}(function ($) {
// Browser timing remains hidden unless we can successfully access the performance object
var perf = window.performance || window.msPerformance ||
window.webkitPerformance || window.mozPerformance;
if (!perf)
return;

var rowCount = 0,
timingOffset = perf.timing.navigationStart,
timingEnd = perf.timing.loadEventEnd,
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 = $('<tr class="' + ((rowCount % 2) ? 'djDebugOdd' : 'djDebugEven') + '"></tr>');
if (endStat) {
// Render a start through end bar
$row.html('<td>' + stat.replace('Start', '') + '</td>' +
'<td class="timeline"><div class="djDebugTimeline"><div class="djDebugLineChart" style="left:' + getLeft(stat) + '%;"><strong style="width:' + getCSSWidth(stat, endStat) + ';">&nbsp;</strong></div></div></td>' +
'<td>' + (perf.timing[stat] - timingOffset) + ' (+' + (perf.timing[endStat] - perf.timing[stat]) + ')</td>');
} else {
// Render a point in time
$row.html('<td>' + stat + '</td>' +
'<td class="timeline"><div class="djDebugTimeline"><div class="djDebugLineChart" style="left:' + getLeft(stat) + '%;"><strong style="width:2px;">&nbsp;</strong></div></div></td>' +
'<td>' + (perf.timing[stat] - timingOffset) + '</td>');
}
$('#djDebugBrowserTimingTableBody').append($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 requestEnd
addRow('responseStart', 'responseEnd');
addRow('domLoading', 'domComplete'); // Spans the events below
addRow('domInteractive');
addRow('domContentLoadedEventStart', 'domContentLoadedEventEnd');
addRow('loadEventStart', 'loadEventEnd');
$('#djDebugBrowserTiming').css("display", "block");
}));
4 changes: 3 additions & 1 deletion debug_toolbar/templates/debug_toolbar/panels/profiling.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,4 +40,6 @@
{% endif %}
{% endfor %}
</tbody>
</table>
</table>

<script src="{{ STATIC_URL }}debug_toolbar/js/toolbar.profiling.js"></script>
2 changes: 2 additions & 0 deletions debug_toolbar/templates/debug_toolbar/panels/templates.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,3 +42,5 @@ <h4>{% blocktrans count context_processors|length as context_processors_count %}
{% else %}
<p>{% trans 'None' %}</p>
{% endif %}

<script src="{{ STATIC_URL }}debug_toolbar/js/toolbar.template.js"></script>
3 changes: 2 additions & 1 deletion debug_toolbar/templates/debug_toolbar/panels/timer.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ <h4>{% trans 'Resource Usage' %}</h4>
</tbody>
</table>

<!-- This hidden div is populated and displayed by code in toolbar.js -->
<!-- This hidden div is populated and displayed by code in toolbar.timer.js -->
<div id="djDebugBrowserTiming" style="display:none">
<h4>{% trans 'Browser Timing' %}</h4>
<table>
Expand All @@ -41,3 +41,4 @@ <h4>{% trans 'Browser Timing' %}</h4>
</tbody>
</table>
</div>
<script src="{{ STATIC_URL }}debug_toolbar/js/toolbar.timer.js"></script>