|
From 25066dd6e396ebe4a8703ffbcc981e48f8e0db61 Mon Sep 17 00:00:00 2001
From: Tobias Bengfort
Date: Wed, 5 Sep 2018 23:08:32 +0200
Subject: [PATCH 04/16] do not close debugwindow twice
this is already handled in the close.djDebug event listener
---
debug_toolbar/static/debug_toolbar/js/toolbar.js | 5 -----
1 file changed, 5 deletions(-)
diff --git a/debug_toolbar/static/debug_toolbar/js/toolbar.js b/debug_toolbar/static/debug_toolbar/js/toolbar.js
index 7a158deef..3cdb5b269 100644
--- a/debug_toolbar/static/debug_toolbar/js/toolbar.js
+++ b/debug_toolbar/static/debug_toolbar/js/toolbar.js
@@ -82,11 +82,6 @@
var message = ''+xhr.status+': '+xhr.statusText+'|
');
+ var row = document.createElement('tr');
+ row.className = (rowCount % 2) ? 'djDebugOdd' : 'djDebugEven';
if (endStat) {
// Render a start through end bar
- $row.html('' + stat.replace('Start', '') + ' | ' +
- ' | ' +
- '' + (perf.timing[stat] - timingOffset) + ' (+' + (perf.timing[endStat] - perf.timing[stat]) + ') | ');
- $row.find('strong').css({width: getCSSWidth(stat, endStat)});
+ row.innerHTML = '' + stat.replace('Start', '') + ' | ' +
+ ' | ' +
+ '' + (perf.timing[stat] - timingOffset) + ' (+' + (perf.timing[endStat] - perf.timing[stat]) + ') | ';
+ row.querySelector('strong').style.width = getCSSWidth(stat, endStat);
} else {
// Render a point in time
- $row.html('' + stat + ' | ' +
- ' | ' +
- '' + (perf.timing[stat] - timingOffset) + ' | ');
- $row.find('strong').css({width: 2});
+ row.innerHTML = '' + stat + ' | ' +
+ ' | ' +
+ '' + (perf.timing[stat] - timingOffset) + ' | ';
+ row.querySelector('strong').style.width = '2px';
}
- $row.find('.djDebugLineChart').css({left: getLeft(stat) + '%'});
- $('#djDebugBrowserTimingTableBody').append($row);
+ row.querySelector('.djDebugLineChart').style.left = getLeft(stat) + '%';
+ document.querySelector('#djDebugBrowserTimingTableBody').appendChild(row);
}
// This is a reasonably complete and ordered set of timing periods (2 params) and events (1 param)
@@ -47,5 +48,5 @@
addRow('domInteractive');
addRow('domContentLoadedEventStart', 'domContentLoadedEventEnd');
addRow('loadEventStart', 'loadEventEnd');
- $('#djDebugBrowserTiming').show();
-})(djdt.jQuery);
+ document.querySelector('#djDebugBrowserTiming').classList.remove('djdt-hidden');
+})();
From 6e71e03a94c72e663a992d8653c938b9117da380 Mon Sep 17 00:00:00 2001
From: Tobias Bengfort
Date: Wed, 5 Sep 2018 23:08:32 +0200
Subject: [PATCH 08/16] split onMouseMove
---
.../static/debug_toolbar/js/toolbar.js | 42 ++++++++++---------
1 file changed, 22 insertions(+), 20 deletions(-)
diff --git a/debug_toolbar/static/debug_toolbar/js/toolbar.js b/debug_toolbar/static/debug_toolbar/js/toolbar.js
index 296e1b4bc..11b66fb53 100644
--- a/debug_toolbar/static/debug_toolbar/js/toolbar.js
+++ b/debug_toolbar/static/debug_toolbar/js/toolbar.js
@@ -121,29 +121,31 @@
djdt.show_toolbar();
}
});
+ var startPageY, baseY, windowHeight;
var handle = $('#djDebugToolbarHandle');
- $('#djShowToolBarButton').on('mousedown', function (event) {
- event.preventDefault();
- var startPageY = event.pageY;
- var baseY = handle.offset().top - startPageY;
- var windowHeight = $(window).height();
- $(document).on('mousemove.djDebug', function (event) {
- // Chrome can send spurious mousemove events, so don't do anything unless the
- // cursor really moved. Otherwise, it will be impossible to expand the toolbar
- // due to djdt.handleDragged being set to true.
- if (djdt.handleDragged || event.pageY != startPageY) {
- var top = baseY + event.clientY;
+ var onMouseMove = function(event) {
+ // Chrome can send spurious mousemove events, so don't do anything unless the
+ // cursor really moved. Otherwise, it will be impossible to expand the toolbar
+ // due to djdt.handleDragged being set to true.
+ if (djdt.handleDragged || event.pageY != startPageY) {
+ var top = baseY + event.clientY;
- if (top < 0) {
- top = 0;
- } else if (top + handle.height() > windowHeight) {
- top = windowHeight - handle.height();
- }
-
- handle.css({top: top});
- djdt.handleDragged = true;
+ if (top < 0) {
+ top = 0;
+ } else if (top + handle.height() > windowHeight) {
+ top = windowHeight - handle.height();
}
- });
+
+ handle.css({top: top});
+ djdt.handleDragged = true;
+ }
+ };
+ $('#djShowToolBarButton').on('mousedown', function (event) {
+ event.preventDefault();
+ startPageY = event.pageY;
+ baseY = handle.offset().top - startPageY;
+ windowHeight = $(window).height();
+ $(document).on('mousemove.djDebug', onMouseMove);
});
$(document).on('mouseup', function (event) {
$(document).off('mousemove.djDebug');
From 663238299dab97a92098015a59ed790393720088 Mon Sep 17 00:00:00 2001
From: Tobias Bengfort
Date: Wed, 5 Sep 2018 23:08:32 +0200
Subject: [PATCH 09/16] split out onKeyDown
---
debug_toolbar/static/debug_toolbar/js/toolbar.js | 12 +++++++-----
1 file changed, 7 insertions(+), 5 deletions(-)
diff --git a/debug_toolbar/static/debug_toolbar/js/toolbar.js b/debug_toolbar/static/debug_toolbar/js/toolbar.js
index 11b66fb53..1d0b86a23 100644
--- a/debug_toolbar/static/debug_toolbar/js/toolbar.js
+++ b/debug_toolbar/static/debug_toolbar/js/toolbar.js
@@ -1,4 +1,10 @@
(function ($, publicAPI) {
+ var onKeyDown = function(event) {
+ if (event.keyCode == 27) {
+ djdt.hide_one_level();
+ }
+ };
+
var djdt = {
handleDragged: false,
events: {
@@ -213,11 +219,7 @@
},
show_toolbar: function(animate) {
// Set up keybindings
- $(document).on('keydown.djDebug', function(e) {
- if (e.keyCode == 27) {
- djdt.hide_one_level();
- }
- });
+ $(document).on('keydown.djDebug', onKeyDown);
$('#djDebugToolbarHandle').hide();
if (animate) {
$('#djDebugToolbar').show('fast');
From 7162816568c3b17c9b664fb6d0b734d82c8a04b6 Mon Sep 17 00:00:00 2001
From: Tobias Bengfort
Date: Wed, 5 Sep 2018 23:08:32 +0200
Subject: [PATCH 10/16] port event handling
NOTE: removes custom event
---
.../static/debug_toolbar/js/toolbar.js | 43 +++++++++++--------
1 file changed, 26 insertions(+), 17 deletions(-)
diff --git a/debug_toolbar/static/debug_toolbar/js/toolbar.js b/debug_toolbar/static/debug_toolbar/js/toolbar.js
index 1d0b86a23..b424da9b3 100644
--- a/debug_toolbar/static/debug_toolbar/js/toolbar.js
+++ b/debug_toolbar/static/debug_toolbar/js/toolbar.js
@@ -1,4 +1,15 @@
(function ($, publicAPI) {
+ var $$ = {
+ on: function(root, eventName, selector, fn) {
+ root.addEventListener(eventName, function(event) {
+ var target = event.target.closest(selector);
+ if (root.contains(target)) {
+ fn.call(target, event);
+ }
+ });
+ },
+ };
+
var onKeyDown = function(event) {
if (event.keyCode == 27) {
djdt.hide_one_level();
@@ -12,8 +23,9 @@
},
isReady: false,
init: function() {
- $('#djDebug').show();
- $('#djDebugPanelList').on('click', 'li a', function(event) {
+ var djDebug = document.querySelector('#djDebug');
+ djDebug.classList.remove('djdt-hidden');
+ $$.on(djDebug.querySelector('#djDebugPanelList'), 'click', 'li a', function(event) {
event.preventDefault();
if (!this.className) {
return;
@@ -48,11 +60,11 @@
}
}
});
- $('#djDebug').on('click', 'a.djDebugClose', function(event) {
+ $$.on(djDebug, 'click', 'a.djDebugClose', function(event) {
event.preventDefault();
djdt.hide_one_level();
});
- $('#djDebug').on('click', '.djDebugPanelButton input[type=checkbox]', function() {
+ $$.on(djDebug, 'click', '.djDebugPanelButton input[type=checkbox]', function() {
djdt.cookie.set($(this).attr('data-cookie'), $(this).prop('checked') ? 'on' : 'off', {
path: '/',
expires: 10
@@ -60,7 +72,7 @@
});
// Used by the SQL and template panels
- $('#djDebug').on('click', '.remoteCall', function(event) {
+ $$.on(djDebug, 'click', '.remoteCall', function(event) {
event.preventDefault();
var self = $(this);
@@ -90,7 +102,7 @@
});
// Used by the cache, profiling and SQL panels
- $('#djDebug').on('click', 'a.djToggleSwitch', function(event) {
+ $$.on(djDebug, 'click', 'a.djToggleSwitch', function(event) {
event.preventDefault();
var btn = $(this);
var id = btn.attr('data-toggle-id');
@@ -117,11 +129,11 @@
});
});
- $('#djHideToolBarButton').on('click', function(event) {
+ djDebug.querySelector('#djHideToolBarButton').addEventListener('click', function(event) {
event.preventDefault();
djdt.hide_toolbar(true);
});
- $('#djShowToolBarButton').on('click', function(event) {
+ djDebug.querySelector('#djShowToolBarButton').addEventListener('click', function(event) {
event.preventDefault();
if (!djdt.handleDragged) {
djdt.show_toolbar();
@@ -146,15 +158,15 @@
djdt.handleDragged = true;
}
};
- $('#djShowToolBarButton').on('mousedown', function (event) {
+ djDebug.querySelector('#djShowToolBarButton').addEventListener('mousedown', function(event) {
event.preventDefault();
startPageY = event.pageY;
baseY = handle.offset().top - startPageY;
windowHeight = $(window).height();
- $(document).on('mousemove.djDebug', onMouseMove);
+ document.addEventListener('mousemove', onMouseMove);
});
- $(document).on('mouseup', function (event) {
- $(document).off('mousemove.djDebug');
+ document.addEventListener('mouseup', function(event) {
+ document.removeEventListener('mousemove', onMouseMove);
if (djdt.handleDragged) {
event.preventDefault();
var top = handle.offset().top - window.pageYOffset;
@@ -167,9 +179,6 @@
}, 10);
}
});
- $(document).on('close.djDebug', function() {
- djdt.hide_one_level();
- });
if (djdt.cookie.get('djdt') == 'hide') {
djdt.hide_toolbar(false);
} else {
@@ -199,7 +208,7 @@
}
// Unbind keydown
- $(document).off('keydown.djDebug');
+ document.removeEventListener('keydown', onKeyDown);
if (setCookie) {
djdt.cookie.set('djdt', 'hide', {
@@ -219,7 +228,7 @@
},
show_toolbar: function(animate) {
// Set up keybindings
- $(document).on('keydown.djDebug', onKeyDown);
+ document.addEventListener('keydown', onKeyDown);
$('#djDebugToolbarHandle').hide();
if (animate) {
$('#djDebugToolbar').show('fast');
From 1ed21d56aae41b92edf9630e1e4860acf6673525 Mon Sep 17 00:00:00 2001
From: Tobias Bengfort
Date: Wed, 5 Sep 2018 23:08:33 +0200
Subject: [PATCH 11/16] port applyStyle
---
debug_toolbar/static/debug_toolbar/js/toolbar.js | 7 +++----
1 file changed, 3 insertions(+), 4 deletions(-)
diff --git a/debug_toolbar/static/debug_toolbar/js/toolbar.js b/debug_toolbar/static/debug_toolbar/js/toolbar.js
index b424da9b3..852b45573 100644
--- a/debug_toolbar/static/debug_toolbar/js/toolbar.js
+++ b/debug_toolbar/static/debug_toolbar/js/toolbar.js
@@ -281,10 +281,9 @@
}
},
applyStyle: function(name) {
- $('#djDebug [data-' + name + ']').each(function() {
- var css = {};
- css[name] = $(this).data(name);
- $(this).css(css);
+ var selector = '#djDebug [data-' + name + ']';
+ document.querySelectorAll(selector).forEach(function(element) {
+ element.style[name] = element.getAttribute('data-' + name);
});
}
};
From c78e474bd79af6ac12bb824b9e97aca5e0cda9b7 Mon Sep 17 00:00:00 2001
From: Tobias Bengfort
Date: Wed, 5 Sep 2018 23:08:33 +0200
Subject: [PATCH 12/16] port handle movement
---
.../static/debug_toolbar/js/toolbar.js | 34 +++++++++----------
1 file changed, 16 insertions(+), 18 deletions(-)
diff --git a/debug_toolbar/static/debug_toolbar/js/toolbar.js b/debug_toolbar/static/debug_toolbar/js/toolbar.js
index 852b45573..81d94b6bf 100644
--- a/debug_toolbar/static/debug_toolbar/js/toolbar.js
+++ b/debug_toolbar/static/debug_toolbar/js/toolbar.js
@@ -139,38 +139,36 @@
djdt.show_toolbar();
}
});
- var startPageY, baseY, windowHeight;
- var handle = $('#djDebugToolbarHandle');
- var onMouseMove = function(event) {
+ var startPageY, baseY;
+ var handle = document.querySelector('#djDebugToolbarHandle');
+ var onHandleMove = function(event) {
// Chrome can send spurious mousemove events, so don't do anything unless the
// cursor really moved. Otherwise, it will be impossible to expand the toolbar
// due to djdt.handleDragged being set to true.
if (djdt.handleDragged || event.pageY != startPageY) {
- var top = baseY + event.clientY;
+ var top = baseY + event.pageY;
if (top < 0) {
top = 0;
- } else if (top + handle.height() > windowHeight) {
- top = windowHeight - handle.height();
+ } else if (top + handle.offsetHeight > window.innerHeight) {
+ top = window.innerHeight - handle.offsetHeight;
}
- handle.css({top: top});
+ handle.style.top = top + 'px';
djdt.handleDragged = true;
}
};
djDebug.querySelector('#djShowToolBarButton').addEventListener('mousedown', function(event) {
event.preventDefault();
startPageY = event.pageY;
- baseY = handle.offset().top - startPageY;
- windowHeight = $(window).height();
- document.addEventListener('mousemove', onMouseMove);
+ baseY = handle.offsetTop - startPageY;
+ document.addEventListener('mousemove', onHandleMove);
});
- document.addEventListener('mouseup', function(event) {
- document.removeEventListener('mousemove', onMouseMove);
+ document.addEventListener('mouseup', function (event) {
+ document.removeEventListener('mousemove', onHandleMove);
if (djdt.handleDragged) {
event.preventDefault();
- var top = handle.offset().top - window.pageYOffset;
- djdt.cookie.set('djdttop', top, {
+ djdt.cookie.set('djdttop', handle.offsetTop, {
path: '/',
expires: 10
});
@@ -198,13 +196,13 @@
djdt.hide_panels();
$('#djDebugToolbar').hide('fast');
- var handle = $('#djDebugToolbarHandle');
- handle.show();
+ var handle = document.querySelector('#djDebugToolbarHandle');
+ $(handle).show();
// set handle position
var handleTop = djdt.cookie.get('djdttop');
if (handleTop) {
- handleTop = Math.min(handleTop, window.innerHeight - handle.outerHeight() - 10);
- handle.css({top: handleTop + 'px'});
+ handleTop = Math.min(handleTop, window.innerHeight - handle.offsetHeight);
+ handle.style.top = handleTop + 'px';
}
// Unbind keydown
From 1e511e0c02d35d175bf4b5ddae2c8ba9aee5d2de Mon Sep 17 00:00:00 2001
From: Tobias Bengfort
Date: Wed, 5 Sep 2018 23:08:33 +0200
Subject: [PATCH 13/16] port most code
Note: removes animations
---
.../static/debug_toolbar/js/toolbar.js | 154 +++++++++++-------
1 file changed, 92 insertions(+), 62 deletions(-)
diff --git a/debug_toolbar/static/debug_toolbar/js/toolbar.js b/debug_toolbar/static/debug_toolbar/js/toolbar.js
index 81d94b6bf..84f92a326 100644
--- a/debug_toolbar/static/debug_toolbar/js/toolbar.js
+++ b/debug_toolbar/static/debug_toolbar/js/toolbar.js
@@ -8,6 +8,30 @@
}
});
},
+ show: function(element) {
+ element.style.display = 'block';
+ },
+ hide: function(element) {
+ element.style.display = 'none';
+ },
+ toggle: function(element, value) {
+ if (value) {
+ $$.show(element);
+ } else {
+ $$.hide(element);
+ }
+ },
+ visible: function(element) {
+ style = getComputedStyle(element);
+ return style.display !== 'none';
+ },
+ executeScripts: function(root) {
+ root.querySelectorAll('script').forEach(function(e) {
+ var clone = document.createElement('script');
+ clone.src = e.src;
+ root.appendChild(clone);
+ });
+ },
};
var onKeyDown = function(event) {
@@ -24,38 +48,40 @@
isReady: false,
init: function() {
var djDebug = document.querySelector('#djDebug');
- djDebug.classList.remove('djdt-hidden');
+ $$.show(djDebug);
$$.on(djDebug.querySelector('#djDebugPanelList'), 'click', 'li a', function(event) {
event.preventDefault();
if (!this.className) {
return;
}
- var current = $('#djDebug #' + this.className);
- if (current.is(':visible')) {
+ var current = djDebug.querySelector('#' + this.className);
+ if ($$.visible(current)) {
djdt.hide_panels();
} else {
djdt.hide_panels();
- current.show();
- $(this).parent().addClass('djdt-active');
+ $$.show(current);
+ this.parentElement.classList.add('djdt-active');
- var inner = current.find('.djDebugPanelContent .djdt-scroll'),
- store_id = $('#djDebug').data('store-id');
- if (store_id && inner.children().length === 0) {
+ var inner = current.querySelector('.djDebugPanelContent .djdt-scroll'),
+ store_id = djDebug.getAttribute('data-store-id');
+ if (store_id && inner.children.length === 0) {
var ajax_data = {
data: {
store_id: store_id,
panel_id: this.className
},
type: 'GET',
- url: $('#djDebug').data('render-panel-url')
+ url: djDebug.getAttribute('data-render-panel-url')
};
$.ajax(ajax_data).done(function(data){
- inner.prev().remove(); // Remove AJAX loader
- inner.html(data);
+ inner.previousElementSibling.remove(); // Remove AJAX loader
+ inner.innerHTML = body;
+ $$.executeScripts(inner);
}).fail(function(xhr){
- var message = ''+xhr.status+': '+xhr.statusText+''+xhr.status+': '+xhr.statusText+''+xhr.status+': '+xhr.statusText+''+xhr.status+': '+xhr.statusText+''+response.status+': '+response.statusText+''+xhr.status+': '+xhr.statusText+''+xhr.status+': '+xhr.statusText+' |