Date: Thu, 14 Nov 2013 22:23:51 +0100
Subject: [PATCH] Move some panel-specific javascript in specific files.
---
.../static/debug_toolbar/js/toolbar.js | 100 ++----------------
.../debug_toolbar/js/toolbar.profiling.js | 27 +++++
.../debug_toolbar/js/toolbar.template.js | 17 +++
.../static/debug_toolbar/js/toolbar.timer.js | 54 ++++++++++
.../debug_toolbar/panels/profiling.html | 4 +-
.../debug_toolbar/panels/templates.html | 2 +
.../templates/debug_toolbar/panels/timer.html | 3 +-
7 files changed, 112 insertions(+), 95 deletions(-)
create mode 100644 debug_toolbar/static/debug_toolbar/js/toolbar.profiling.js
create mode 100644 debug_toolbar/static/debug_toolbar/js/toolbar.template.js
create mode 100644 debug_toolbar/static/debug_toolbar/js/toolbar.timer.js
diff --git a/debug_toolbar/static/debug_toolbar/js/toolbar.js b/debug_toolbar/static/debug_toolbar/js/toolbar.js
index 3e0913b19..c5afb3122 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 = $('|
');
- if (endStat) {
- // Render a start through end bar
- $row.html('' + stat.replace('Start', '') + ' | ' +
- ' | ' +
- '' + (perf.timing[stat] - timingOffset) + ' (+' + (perf.timing[endStat] - perf.timing[stat]) + ') | ');
- } else {
- // Render a point in time
- $row.html('' + stat + ' | ' +
- ' | ' +
- '' + (perf.timing[stat] - timingOffset) + ' | ');
- }
- $('#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 000000000..172c2a6a4
--- /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 000000000..38307c1fa
--- /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 000000000..514fda7ef
--- /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 = $('|
');
+ if (endStat) {
+ // Render a start through end bar
+ $row.html('' + stat.replace('Start', '') + ' | ' +
+ ' | ' +
+ '' + (perf.timing[stat] - timingOffset) + ' (+' + (perf.timing[endStat] - perf.timing[stat]) + ') | ');
+ } else {
+ // Render a point in time
+ $row.html('' + stat + ' | ' +
+ ' | ' +
+ '' + (perf.timing[stat] - timingOffset) + ' | ');
+ }
+ $('#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 f2d43def9..34ecc8742 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 %}
-
\ No newline at end of file
+
+
+
diff --git a/debug_toolbar/templates/debug_toolbar/panels/templates.html b/debug_toolbar/templates/debug_toolbar/panels/templates.html
index 5cbb7425b..dbe93f81a 100644
--- a/debug_toolbar/templates/debug_toolbar/panels/templates.html
+++ b/debug_toolbar/templates/debug_toolbar/panels/templates.html
@@ -42,3 +42,5 @@ {% blocktrans count context_processors|length as context_processors_count %}
{% else %}
{% trans 'None' %}
{% endif %}
+
+
diff --git a/debug_toolbar/templates/debug_toolbar/panels/timer.html b/debug_toolbar/templates/debug_toolbar/panels/timer.html
index 74cf0c75f..977386d82 100644
--- a/debug_toolbar/templates/debug_toolbar/panels/timer.html
+++ b/debug_toolbar/templates/debug_toolbar/panels/timer.html
@@ -21,7 +21,7 @@ {% trans 'Resource Usage' %}
-
+
{% trans 'Browser Timing' %}
@@ -41,3 +41,4 @@ {% trans 'Browser Timing' %}
+