From 96823b2bd5f9ba64b4b4535f28c9d5ca989e7534 Mon Sep 17 00:00:00 2001 From: Jon Dufresne Date: Mon, 21 Sep 2020 21:05:08 -0700 Subject: [PATCH] Unify show/hide JS logic through the djdt-hidden class Using a class -- rather than manipulating inline CSS -- is more robust as it doesn't assume the hidden object is styled as 'display: block;'. The djdt-hidden class already existed, so use it for all hide/show code. --- debug_toolbar/panels/sql/utils.py | 2 +- debug_toolbar/static/debug_toolbar/css/toolbar.css | 2 -- debug_toolbar/static/debug_toolbar/js/toolbar.js | 7 +++---- debug_toolbar/templates/debug_toolbar/base.html | 2 +- .../templates/debug_toolbar/includes/panel_content.html | 2 +- tests/panels/test_custom.py | 2 +- tests/panels/test_settings.py | 2 +- 7 files changed, 8 insertions(+), 11 deletions(-) diff --git a/debug_toolbar/panels/sql/utils.py b/debug_toolbar/panels/sql/utils.py index 3e41fee5d..a5645f6da 100644 --- a/debug_toolbar/panels/sql/utils.py +++ b/debug_toolbar/panels/sql/utils.py @@ -25,7 +25,7 @@ def reformat_sql(sql, with_toggle=False): return formatted simple = simplify(parse_sql(sql, aligned_indent=False)) uncollapsed = '{}'.format(simple) - collapsed = '{}'.format(formatted) + collapsed = '{}'.format(formatted) return collapsed + uncollapsed diff --git a/debug_toolbar/static/debug_toolbar/css/toolbar.css b/debug_toolbar/static/debug_toolbar/css/toolbar.css index 439ad433d..805edada2 100644 --- a/debug_toolbar/static/debug_toolbar/css/toolbar.css +++ b/debug_toolbar/static/debug_toolbar/css/toolbar.css @@ -191,7 +191,6 @@ } #djDebug .djdt-panelContent { - display: none; position: fixed; margin: 0; top: 0; @@ -351,7 +350,6 @@ } #djDebug .djDebugCollapsed { - display: none; color: #333; } diff --git a/debug_toolbar/static/debug_toolbar/js/toolbar.js b/debug_toolbar/static/debug_toolbar/js/toolbar.js index 6628a1271..edc37646d 100644 --- a/debug_toolbar/static/debug_toolbar/js/toolbar.js +++ b/debug_toolbar/static/debug_toolbar/js/toolbar.js @@ -8,10 +8,10 @@ const $$ = { }); }, show: function(element) { - element.style.display = 'block'; + element.classList.remove('djdt-hidden'); }, hide: function(element) { - element.style.display = 'none'; + element.classList.add('djdt-hidden'); }, toggle: function(element, value) { if (value) { @@ -21,8 +21,7 @@ const $$ = { } }, visible: function(element) { - const style = getComputedStyle(element); - return style.display !== 'none'; + element.classList.contains('djdt-hidden'); }, executeScripts: function(scripts) { scripts.forEach(function(script) { diff --git a/debug_toolbar/templates/debug_toolbar/base.html b/debug_toolbar/templates/debug_toolbar/base.html index 7424706e8..610229a3f 100644 --- a/debug_toolbar/templates/debug_toolbar/base.html +++ b/debug_toolbar/templates/debug_toolbar/base.html @@ -27,5 +27,5 @@ {% for panel in toolbar.panels %} {% include "debug_toolbar/includes/panel_content.html" %} {% endfor %} -
+
diff --git a/debug_toolbar/templates/debug_toolbar/includes/panel_content.html b/debug_toolbar/templates/debug_toolbar/includes/panel_content.html index 81d9bd36c..917552169 100644 --- a/debug_toolbar/templates/debug_toolbar/includes/panel_content.html +++ b/debug_toolbar/templates/debug_toolbar/includes/panel_content.html @@ -1,7 +1,7 @@ {% load static %} {% if panel.has_content and panel.enabled %} -
+
×

{{ panel.title }}

diff --git a/tests/panels/test_custom.py b/tests/panels/test_custom.py index 347199bc4..ec7bdc7f4 100644 --- a/tests/panels/test_custom.py +++ b/tests/panels/test_custom.py @@ -31,7 +31,7 @@ def test_escapes_panel_title(self): self.assertContains( response, """ -
+
×

Title with special chars &"'<>

diff --git a/tests/panels/test_settings.py b/tests/panels/test_settings.py index 596cce096..aabd2194a 100644 --- a/tests/panels/test_settings.py +++ b/tests/panels/test_settings.py @@ -22,7 +22,7 @@ def test_panel_title(self): self.assertContains( response, """ -
+
×

Settings from None