Load the content of panels dynamically.

This should drastically reduce the overhead of the browser toolbar when
a page has a complex template structure or many SQL queries.

This change is backwards-incompatible for third-party panels because it
changes the signature of __init__.

The JavaScript could probably be improved; I'm outside my comfort zone.

1 files changed, 17 insertions, 0 deletions

diff --git a/debug_toolbar/static/debug_toolbar/js/toolbar.js b/debug_toolbar/static/debug_toolbar/js/toolbar.js
index 094c3ac..0b7d1ec 100644
--- a/debug_toolbar/static/debug_toolbar/js/toolbar.js
+++ b/debug_toolbar/static/debug_toolbar/js/toolbar.js
@@ -28,6 +28,23 @@
                     $(this).parent().removeClass('active');
                 } else {
                     $('.panelContent').hide(); // Hide any that are already open
+                    var inner = current.find('.djDebugPanelContent .scroll').first();
+                    if ($(inner).empty()) {
+                        var ajax_data = {
+                            data: {
+                                toolbar_id: $('#djDebug').data('toolbar-id'),
+                                panel_id: this.className
+                            },
+                            type: 'GET',
+                            url: $('#djDebug').data('render-panel-url')
+                        };
+                        $.ajax(ajax_data).done(function(data){
+                            inner.html(data);
+                        }).fail(function(xhr){
+                            var message = '<div class="djDebugPanelTitle"><a class="djDebugClose djDebugBack" href="">Back</a><h3>'+xhr.status+': '+xhr.statusText+'</h3></div>';
+                            $('#djDebugWindow').html(message).show();
+                        });
+                    }
                     current.show();
                     $('#djDebugToolbar li').removeClass('active');
                     $(this).parent().addClass('active');