diff options
7 files changed, 112 insertions, 95 deletions
diff --git a/debug_toolbar/static/debug_toolbar/js/toolbar.js b/debug_toolbar/static/debug_toolbar/js/toolbar.js index 3e0913b..c5afb31 100644 --- a/debug_toolbar/static/debug_toolbar/js/toolbar.js +++ b/debug_toolbar/static/debug_toolbar/js/toolbar.js @@ -6,8 +6,7 @@ // Browser globals. window.djdt = factory(jQuery); } -}(function (jQuery) { - var $ = jQuery; +}(function ($) { var djdt = { handleDragged: false, events: { @@ -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(); @@ -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); @@ -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; @@ -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; @@ -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); @@ -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) + ';"> </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;"> </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; })); diff --git a/debug_toolbar/static/debug_toolbar/js/toolbar.profiling.js b/debug_toolbar/static/debug_toolbar/js/toolbar.profiling.js new file mode 100644 index 0000000..172c2a6 --- /dev/null +++ b/debug_toolbar/static/debug_toolbar/js/toolbar.profiling.js @@ -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(); + } + }); + +})); diff --git a/debug_toolbar/static/debug_toolbar/js/toolbar.template.js b/debug_toolbar/static/debug_toolbar/js/toolbar.template.js new file mode 100644 index 0000000..38307c1 --- /dev/null +++ b/debug_toolbar/static/debug_toolbar/js/toolbar.template.js @@ -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; + }); +})); diff --git a/debug_toolbar/static/debug_toolbar/js/toolbar.timer.js b/debug_toolbar/static/debug_toolbar/js/toolbar.timer.js new file mode 100644 index 0000000..514fda7 --- /dev/null +++ b/debug_toolbar/static/debug_toolbar/js/toolbar.timer.js @@ -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) + ';"> </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;"> </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"); +})); diff --git a/debug_toolbar/templates/debug_toolbar/panels/profiling.html b/debug_toolbar/templates/debug_toolbar/panels/profiling.html index f2d43de..34ecc87 100644 --- a/debug_toolbar/templates/debug_toolbar/panels/profiling.html +++ b/debug_toolbar/templates/debug_toolbar/panels/profiling.html @@ -40,4 +40,6 @@ {% endif %} {% endfor %} </tbody> -</table>
\ No newline at end of file +</table> + +<script src="{{ STATIC_URL }}debug_toolbar/js/toolbar.profiling.js"></script> diff --git a/debug_toolbar/templates/debug_toolbar/panels/templates.html b/debug_toolbar/templates/debug_toolbar/panels/templates.html index 5cbb742..dbe93f8 100644 --- a/debug_toolbar/templates/debug_toolbar/panels/templates.html +++ b/debug_toolbar/templates/debug_toolbar/panels/templates.html @@ -42,3 +42,5 @@ {% else %} <p>{% trans 'None' %}</p> {% endif %} + +<script src="{{ STATIC_URL }}debug_toolbar/js/toolbar.template.js"></script> diff --git a/debug_toolbar/templates/debug_toolbar/panels/timer.html b/debug_toolbar/templates/debug_toolbar/panels/timer.html index 74cf0c7..977386d 100644 --- a/debug_toolbar/templates/debug_toolbar/panels/timer.html +++ b/debug_toolbar/templates/debug_toolbar/panels/timer.html @@ -21,7 +21,7 @@ </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> @@ -41,3 +41,4 @@ </tbody> </table> </div> +<script src="{{ STATIC_URL }}debug_toolbar/js/toolbar.timer.js"></script> |