diff --git a/flask_debugtoolbar/static/css/toolbar.css b/flask_debugtoolbar/static/css/toolbar.css index d93270c..c315cdb 100644 --- a/flask_debugtoolbar/static/css/toolbar.css +++ b/flask_debugtoolbar/static/css/toolbar.css @@ -53,7 +53,7 @@ } #flDebug #flDebugToolbar li>a, -#flDebug #flDebugToolbar li>div.contentless { +#flDebug #flDebugToolbar li>div.flDebugContentless { font-weight:normal; font-style:normal; text-decoration:none; @@ -68,7 +68,7 @@ background-color:#ffc; } -#flDebug #flDebugToolbar li.active { +#flDebug #flDebugToolbar li.flDebugActive { background-image:url(../img/indicator.png); background-repeat:no-repeat; background-position:left center; @@ -76,7 +76,7 @@ padding-left:10px; } -#flDebug #flDebugToolbar li.active a:hover { +#flDebug #flDebugToolbar li.flDebugActive a:hover { color:#b36a60; background-color:transparent; } @@ -89,7 +89,7 @@ font-variant:small-caps; } -#flDebug #flDebugToolbar li .switch { +#flDebug #flDebugToolbar li .flDebugSwitch { font-size: 10px; position: absolute; display: block; @@ -101,11 +101,11 @@ right: 2px; } -#flDebug #flDebugToolbar li .switch.active { +#flDebug #flDebugToolbar li .flDebugSwitch.flDebugActive { background-image: url(../img/tick.png); } -#flDebug #flDebugToolbar li .switch.inactive { +#flDebug #flDebugToolbar li .flDebugSwitch.flDebugInactive { background-image: url(../img/tick-red.png); } @@ -120,7 +120,7 @@ opacity:0.75; } -#flDebug a#flShowToolBarButton { +#flDebug a#flDebugShowToolBarButton { display:block; height:75px; width:30px; @@ -138,7 +138,7 @@ opacity:0.5; } -#flDebug a#flShowToolBarButton:hover { +#flDebug a#flDebugShowToolBarButton:hover { background-color:#111; padding-right:6px; border-top-color:#FFE761; @@ -157,7 +157,7 @@ background-color:#f5f5f5; } -#flDebug .panelContent { +#flDebug .flDebugPanelContentParent { display:none; position:fixed; margin:0; @@ -170,7 +170,7 @@ z-index:100000000; } -#flDebug .panelContent > div { +#flDebug .flDebugPanelContentParent > div { border-bottom:1px solid #ddd; } @@ -223,7 +223,7 @@ font-size: 14px; } -#flDebug .panelContent table { +#flDebug .flDebugPanelContentParent table { border:1px solid #ccc; border-collapse:collapse; width:100%; @@ -232,29 +232,29 @@ margin-top:0.8em; overflow: auto; } -#flDebug .panelContent tbody td, -#flDebug .panelContent tbody th { +#flDebug .flDebugPanelContentParent tbody td, +#flDebug .flDebugPanelContentParent tbody th { vertical-align:top; padding:2px 3px; } -#flDebug .panelContent thead th { +#flDebug .flDebugPanelContentParent thead th { padding:1px 6px 1px 3px; text-align:left; font-weight:bold; font-size:14px; } -#flDebug .panelContent tbody th { +#flDebug .flDebugPanelContentParent tbody th { width:12em; text-align:right; color:#666; padding-right:.5em; } -#flDebug .panelContent ol li { +#flDebug .flDebugPanelContentParent ol li { margin: 0 0 1em 2em; } -#flDebug .panelContent pre { +#flDebug .flDebugPanelContentParent pre { border:1px solid #ccc; background-color:#fff; display:block; @@ -266,7 +266,7 @@ background-color:#fff; } -#flDebug .panelContent .flDebugClose { +#flDebug .flDebugPanelContentParent .flDebugClose { text-indent:-9999999px; display:block; position:absolute; @@ -277,38 +277,38 @@ background:url(../img/close.png) no-repeat center center; } -#flDebug .panelContent .flDebugClose:hover { +#flDebug .flDebugPanelContentParent .flDebugClose:hover { background-image:url(../img/close_hover.png); } -#flDebug .panelContent .flDebugClose.flDebugBack { +#flDebug .flDebugPanelContentParent .flDebugClose.flDebugBack { background-image:url(../img/back.png); } -#flDebug .panelContent .flDebugClose.flDebugBack:hover { +#flDebug .flDebugPanelContentParent .flDebugClose.flDebugBack:hover { background-image:url(../img/back_hover.png); } -#flDebug .panelContent dt, #flDebug .panelContent dd { +#flDebug .flDebugPanelContentParent dt, #flDebug .flDebugPanelContentParent dd { display:block; } -#flDebug .panelContent dt { +#flDebug .flDebugPanelContentParent dt { margin-top:0.75em; } -#flDebug .panelContent dd { +#flDebug .flDebugPanelContentParent dd { margin-left:10px; } -#flDebug a.toggleTemplate { +#flDebug a.flDebugToggleTemplate { padding:4px; background-color:#bbb; -moz-border-radius:3px; -webkit-border-radius:3px; } -#flDebug a.toggleTemplate:hover { +#flDebug a.flDebugToggleTemplate:hover { padding:4px; background-color:#444; color:#ffe761; @@ -317,11 +317,11 @@ } -#flDebug a.flTemplateShowContext, #flDebug a.flTemplateShowContext span.toggleArrow { +#flDebug a.flDebugTemplateShowContext, #flDebug a.flDebugTemplateShowContext span.flDebugToggleArrow { color:#999; } -#flDebug a.flTemplateShowContext:hover, #flDebug a.flTemplateShowContext:hover span.toggleArrow { +#flDebug a.flDebugTemplateShowContext:hover, #flDebug a.flDebugTemplateShowContext:hover span.flDebugToggleArrow { color:#000; cursor:pointer; } @@ -334,7 +334,7 @@ z-index:100000002; } -#flDebug .flSQLHideStacktraceDiv tbody th { +#flDebug .flDebugHideStacktraceDiv tbody th { text-align: left; } @@ -373,25 +373,25 @@ #flDebug .highlight .cp { color:#333 } /* Comment.Preproc */ /* tablesorted */ -#flDebug table.tablesorter { +#flDebug table.flDebugTablesorter { width: 100%; } -#flDebug table.tablesorter thead th, table.tablesorter tfoot th { +#flDebug table.flDebugTablesorter thead th, table.flDebugTablesorter tfoot th { padding-right: 20px; } -#flDebug table.tablesorter thead th { +#flDebug table.flDebugTablesorter thead th { background: url(../img/bg.gif) center right no-repeat; cursor: pointer; } -#flDebug table.tablesorter tbody tr.odd td { +#flDebug table.flDebugTablesorter tbody tr.odd td { background-color: #F0F0F6; } -#flDebug table.tablesorter thead .headerSortUp { +#flDebug table.flDebugTablesorter thead .headerSortUp { background-image: url(../img/asc.gif); } -#flDebug table.tablesorter thead .headerSortDown { +#flDebug table.flDebugTablesorter thead .headerSortDown { background-image: url(../img/desc.gif); } -#flDebug table.tablesorter thead .headerSortDown, #flDebug table.tablesorter thead .headerSortUp { +#flDebug table.flDebugTablesorter thead .headerSortDown, #flDebug table.flDebugTablesorter thead .headerSortUp { background-color: #8dbdd8; } diff --git a/flask_debugtoolbar/static/js/toolbar.js b/flask_debugtoolbar/static/js/toolbar.js index c0d7048..383ebb5 100644 --- a/flask_debugtoolbar/static/js/toolbar.js +++ b/flask_debugtoolbar/static/js/toolbar.js @@ -14,16 +14,16 @@ current = $('#flDebug #' + this.className + '-content'); if (current.is(':visible')) { $(document).trigger('close.flDebug'); - $(this).parent().removeClass('active'); + $(this).parent().removeClass('flDebugActive'); } else { - $('.panelContent').hide(); // Hide any that are already open + $('.flDebugPanelContentParent').hide(); // Hide any that are already open current.show(); - $('#flDebugToolbar li').removeClass('active'); - $(this).parent().addClass('active'); + $('#flDebugToolbar li').removeClass('flDebugActive'); + $(this).parent().addClass('flDebugActive'); } return false; }); - $('#flDebugPanelList li .switch').click(function() { + $('#flDebugPanelList li .flDebugSwitch').click(function() { var $panel = $(this).parent(); var $this = $(this); var dom_id = $panel.attr('id'); @@ -33,13 +33,13 @@ var active = (active_str) ? active_str.split(';') : []; active = $.grep(active, function(n,i) { return n != dom_id; }); - if ($this.hasClass('active')) { - $this.removeClass('active'); - $this.addClass('inactive'); + if ($this.hasClass('flDebugActive')) { + $this.removeClass('flDebugActive'); + $this.addClass('flDebugInactive'); } else { active.push(dom_id); - $this.removeClass('inactive'); - $this.addClass('active'); + $this.removeClass('flDebugInactive'); + $this.addClass('flDebugActive'); } if (active.length > 0) { @@ -54,10 +54,10 @@ }); $('#flDebug a.flDebugClose').click(function() { $(document).trigger('close.flDebug'); - $('#flDebugToolbar li').removeClass('active'); + $('#flDebugToolbar li').removeClass('flDebugActive'); return false; }); - $('#flDebug a.remoteCall').click(function() { + $('#flDebug a.flDebugRemoteCall').click(function() { $('#flDebugWindow').load(this.href, {}, function() { $('#flDebugWindow a.flDebugBack').click(function() { $(this).parent().parent().hide(); @@ -67,20 +67,20 @@ $('#flDebugWindow').show(); return false; }); - $('#flDebugTemplatePanel a.flTemplateShowContext').click(function() { - fldt.toggle_arrow($(this).children('.toggleArrow')) + $('#flDebugTemplatePanel a.flDebugTemplateShowContext').click(function() { + fldt.toggle_arrow($(this).children('.flDebugToggleArrow')) fldt.toggle_content($(this).parent().next()); return false; }); - $('#flDebugSQLPanel a.flSQLShowStacktrace').click(function() { - fldt.toggle_content($('.flSQLHideStacktraceDiv', $(this).parents('tr'))); + $('#flDebugSQLPanel a.flDebugShowStacktrace').click(function() { + fldt.toggle_content($('.flDebugHideStacktraceDiv', $(this).parents('tr'))); return false; }); - $('#flHideToolBarButton').click(function() { + $('#flDebugHideToolBarButton').click(function() { fldt.hide_toolbar(true); return false; }); - $('#flShowToolBarButton').click(function() { + $('#flDebugShowToolBarButton').click(function() { fldt.show_toolbar(); return false; }); @@ -91,8 +91,8 @@ return; } // If a panel is open, close that - if ($('.panelContent').is(':visible')) { - $('.panelContent').hide(); + if ($('.flDebugPanelContentParent').is(':visible')) { + $('.flDebugPanelContentParent').hide(); return; } // Otherwise, just minimize the toolbar @@ -106,7 +106,7 @@ } else { fldt.show_toolbar(false); } - $('#flDebug table.tablesorter').each(function() { + $('#flDebug table.flDebugTablesorter').each(function() { var headers = {}; $(this).find('thead th').each(function(idx, elem) { headers[idx] = $(elem).data(); @@ -137,8 +137,8 @@ // close any sub panels $('#flDebugWindow').hide(); // close all panels - $('.panelContent').hide(); - $('#flDebugToolbar li').removeClass('active'); + $('.flDebugPanelContentParent').hide(); + $('#flDebugToolbar li').removeClass('flDebugActive'); // finally close toolbar $('#flDebugToolbar').hide('fast'); $('#flDebugToolbarHandle').show(); diff --git a/flask_debugtoolbar/templates/base.html b/flask_debugtoolbar/templates/base.html index 59769c9..3a715b4 100644 --- a/flask_debugtoolbar/templates/base.html +++ b/flask_debugtoolbar/templates/base.html @@ -7,7 +7,7 @@ {% for panel in panels %} {% if panel.has_content %} -
+
Close

{{ panel.title()|safe }}

-
+
{{ panel.content()|safe }}
{% endif %} {% endfor %} -
+
diff --git a/flask_debugtoolbar/templates/panels/profiler.html b/flask_debugtoolbar/templates/panels/profiler.html index f9711ae..33e130c 100644 --- a/flask_debugtoolbar/templates/panels/profiler.html +++ b/flask_debugtoolbar/templates/panels/profiler.html @@ -1,4 +1,4 @@ - +
diff --git a/flask_debugtoolbar/templates/panels/sqlalchemy.html b/flask_debugtoolbar/templates/panels/sqlalchemy.html index ab6d5fb..e6bce87 100644 --- a/flask_debugtoolbar/templates/panels/sqlalchemy.html +++ b/flask_debugtoolbar/templates/panels/sqlalchemy.html @@ -1,4 +1,4 @@ -
Calls
+
@@ -13,14 +13,14 @@ -
 (ms){{ '%.4f'|format(query.duration * 1000) }} {% if query.signed_query %} - SELECT
- EXPLAIN
+ SELECT
+ EXPLAIN
{% endif %} 		{{ query.context }} +
{{ query.sql }}
diff --git a/flask_debugtoolbar/templates/panels/sqlalchemy_select.html b/flask_debugtoolbar/templates/panels/sqlalchemy_select.html index 8bacad2..8d52672 100644 --- a/flask_debugtoolbar/templates/panels/sqlalchemy_select.html +++ b/flask_debugtoolbar/templates/panels/sqlalchemy_select.html @@ -11,7 +11,7 @@
{{ '%.4f'|format(duration * 1000) }} ms
{% if result %} - +
{% for h in headers %} diff --git a/flask_debugtoolbar/templates/panels/template_editor.html b/flask_debugtoolbar/templates/panels/template_editor.html index f654aa6..52c52e2 100644 --- a/flask_debugtoolbar/templates/panels/template_editor.html +++ b/flask_debugtoolbar/templates/panels/template_editor.html @@ -18,46 +18,46 @@ {% set toolbar_height = 25 %} {% set editor_width = request.cookies.get('fldt_editor_size')|int(40) %} - #panel, #editor, #preview, #splitter, #toolbar { + #flDebugPanel, #flDebugEditor, #flDebugPreview, #flDebugSplitter, #flDebugToolbar { box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; border: none; } - #panel, #preview { position: fixed; } - #panel > div { position: absolute; } + #flDebugPanel, #flDebugPreview { position: fixed; } + #flDebugPanel > div { position: absolute; } - #panel { width: {{ editor_width }}%; height: 100%; top: 0; left: 0; bottom: 0; } - #toolbar { top: 0; width: 100%; height: {{ toolbar_height }}px; border-bottom: 1px solid black; padding: 2px 4px; } - #editor { top: {{ toolbar_height }}px; bottom: 0; width: 100%; } - #preview { top: 0; bottom: 0; right: 0; height: 100%; width: {{ 100 - editor_width }}%; } + #flDebugPanel { width: {{ editor_width }}%; height: 100%; top: 0; left: 0; bottom: 0; } + #flDebugToolbar { top: 0; width: 100%; height: {{ toolbar_height }}px; border-bottom: 1px solid black; padding: 2px 4px; } + #flDebugEditor { top: {{ toolbar_height }}px; bottom: 0; width: 100%; } + #flDebugPreview { top: 0; bottom: 0; right: 0; height: 100%; width: {{ 100 - editor_width }}%; } /* need a dummy element over the page so that drag events don't get captured by the preview iframe */ - #drag-handler { display: none; position: fixed; width: 100%; height: 100%; z-index: 1000; } - #splitter { width: 8px; height: 100%; top: 0; bottom: 0; right: -1px; z-index: 999; cursor: e-resize; border-right: 1px solid black; } + #flDebugDragHandler { display: none; position: fixed; width: 100%; height: 100%; z-index: 1000; } + #flDebugSplitter { width: 8px; height: 100%; top: 0; bottom: 0; right: -1px; z-index: 999; cursor: e-resize; border-right: 1px solid black; } .CodeMirror, .CodeMirror-scroll { height: 100%; } .syntax-error { background: red !important; } - #toolbar button { margin: 0; } - #save { float: left; } - #close { float: right; } + #flDebugToolbar button { margin: 0; } + #flDebugSave { float: left; } + #flDebugClose { float: right; } {% endwith %} -
-
-
- - +
+
+
+ +
-
+
-
+
- + @@ -68,11 +68,11 @@