diff options
| -rw-r--r-- | README.rst | 6 | ||||
| -rw-r--r-- | debug_toolbar/middleware.py | 4 | ||||
| -rw-r--r-- | debug_toolbar/templates/debug_toolbar/base.html | 80 | ||||
| -rw-r--r-- | debug_toolbar/templates/debug_toolbar/panels/http_vars.html | 4 |
4 files changed, 54 insertions, 40 deletions
@@ -53,14 +53,8 @@ Installation #. Add `debug_toolbar` to your `INSTALLED_APPS` setting so Django can find the the template files associated with the Debug Toolbar. -#. The UI effects of the Toolbar currently depend on jQuery to be already - included in your templates. So currently to test out the toolbar jQuery - already needs to be loaded on the page. We'll need a solution for this at - some point. - TODO ==== - Panel idea: Show some commonly used settings from settings.py - Panel idea: AJAX call to show cprofile data similar to the ?prof idea - CSS Stylings -- Remove dependency on jQuery and come up with a general workable solution. diff --git a/debug_toolbar/middleware.py b/debug_toolbar/middleware.py index 8883b37..7cfaac6 100644 --- a/debug_toolbar/middleware.py +++ b/debug_toolbar/middleware.py @@ -8,7 +8,7 @@ from debug_toolbar.toolbar.loader import DebugToolbar _HTML_TYPES = ('text/html', 'application/xhtml+xml') _END_HEAD_RE = re.compile(r'</head>', re.IGNORECASE) -_END_BODY_RE = re.compile(r'</body>', re.IGNORECASE) +_END_BODY_RE = re.compile(r'<body([^<]*)>', re.IGNORECASE) class DebugToolbarMiddleware(object): """ @@ -36,5 +36,5 @@ class DebugToolbarMiddleware(object): if response['Content-Type'].split(';')[0] in _HTML_TYPES and not request.is_ajax(): # Saving this here in case we ever need to inject into <head> #response.content = _END_HEAD_RE.sub(smart_str(self.debug_toolbar.render_styles() + "%s" % match.group()), response.content) - response.content = _END_BODY_RE.sub(smart_str(self.debug_toolbar.render_toolbar() + '</body>'), response.content) + response.content = _END_BODY_RE.sub(smart_str('<body\\1>' + self.debug_toolbar.render_toolbar()), response.content) return response diff --git a/debug_toolbar/templates/debug_toolbar/base.html b/debug_toolbar/templates/debug_toolbar/base.html index 9ebf9cc..7488b92 100644 --- a/debug_toolbar/templates/debug_toolbar/base.html +++ b/debug_toolbar/templates/debug_toolbar/base.html @@ -1,45 +1,65 @@ <script type="text/javascript"> -$(document).ready(function() { - $('.panelContent').hide(); - // Actions - $('#djDebugButton').click(function() { - $('.panelContent').hide(); - }); - $('#djDebugPanelList a').click(function() { - var panel_id = $(this).attr('class'); - visible = $('#' + panel_id).is(':visible') - - $('.panelContent').hide(); - if(visible){ - $('#' + panel_id).hide(); - } else { - $('#' + panel_id).show(); + var djDebugLastObj = null; + function djDebugToggle(obj) { + if (djDebugLastObj) djDebugLastObj.style.display = 'none'; + var obj = document.getElementById(obj); + if (!obj) return; + if (djDebugLastObj == obj) { + djDebugLastObj = null; + return; } - return false; - }); -}); + if (obj.style.display != 'block') { + obj.style.display = 'block'; + djDebugLastObj = obj; + } + } + function djDebugClose() { + if (!djDebugLastObj) return; + djDebugLastObj.style.display = 'none'; + djDebugLastObj = null; + } </script> -<div id="djDebugBlock" style="background:orange; position:absolute; top:0; right:0; height:2em;"> +<style type="text/css"> + #djDebugToolbar {height:30px; background:orange; color:#000; z-index:100000000; border:1px solid #06171D; border-width:1px 0;} + #djDebugToolbar ul {margin:0; padding:0 10px; list-style:none;} + #djDebugToolbar li {display:inline; width:auto; position:relative; float:none; margin:0 10px 0 0; padding:0; height:20px; line-height:30px; padding:8px 10px 8px 0; border-right: 1px solid #06171D;} + #djDebugToolbar #djDebugButton {color:red; font-weight:bold;} + #djDebug * {margin:0; padding:0; float:none; position:static; } + #djDebug .panelContent {display:none; position:absolute; margin:0; padding:5px; top:35px; width:auto; left:5px; right:5px; bottom:5px; background:white; color:black; border:1px solid black; z-index:1000000; overflow:auto;} + #djDebug .panelContent p {padding: 0 5px;} + #djDebug .panelContent p, #djDebug .panelContent table, #djDebug .panelContent ul, #djDebug .panelContent dl {margin:5px 0;} + #djDebug .close {float:right; font-weight:bold;} + #djDebug .panelContent dt, #djDebug .panelContent dd {display: block;} + #djDebug .panelContent dd {margin-left:10px;} + #djDebug th, #djDebug td {padding: 5px;} + #djDebug .row1 td {background:#fff;} + #djDebug .row2 td {background:#ddd;} +</style> +<div id="djDebug"> <div id="djDebugToolbar"> - <ul id="djDebugPanelList" style="list-style:none;"> - <li id="djDebugButton" style="color:red; font-weight:bold; display:inline;">DEBUG</li> + <ul id="djDebugPanelList"> + <li id="djDebugButton">DEBUG</li> {% for panel in panels %} - <li style="display:inline;"> + <li> {% if panel.content %} - <a href="{{ panel.url|default:"#" }}" title="{{ panel.title }}" class="{{ panel.dom_id }}">{{ panel.title }}</a> + <a href="{{ panel.url|default:"#" }}" onclick="djDebugToggle('{{ panel.dom_id }}')" title="{{ panel.title }}" class="{{ panel.dom_id }}">{{ panel.title }}</a> {% else %} {{ panel.title }} {% endif %} </li> {% endfor %} </ul> - {% for panel in panels %} - {% if panel.content %} - <div id="{{ panel.dom_id }}" class="panelContent" style="background-color:orange; width:50%; float:right;"> - <h1>{{ panel.title }}</h1> - {{ panel.content|safe }} + </div> + {% for panel in panels %} + {% with panel.content as content %} + {% if content %} + <div id="{{ panel.dom_id }}" class="panelContent"> + <div class="title"> + <a href="" onclick="djDebugClose()" class="close">Close</a> + </div> + {{ content|safe }} </div> {% endif %} - {% endfor %} - </div> + {% endwith %} + {% endfor %} </div> diff --git a/debug_toolbar/templates/debug_toolbar/panels/http_vars.html b/debug_toolbar/templates/debug_toolbar/panels/http_vars.html index 44f3497..8891f30 100644 --- a/debug_toolbar/templates/debug_toolbar/panels/http_vars.html +++ b/debug_toolbar/templates/debug_toolbar/panels/http_vars.html @@ -1,4 +1,4 @@ -<div class="title">GET Variables</div> +<h3>GET Variables</h3> {% if get %} <table> <thead> @@ -19,7 +19,7 @@ {% else %} <p>None</p> {% endif %} -<div class="title">POST Variables</div> +<h3>POST Variables</h3> {% if post %} <table> <thead> |