Unify show/hide JS logic through the djdt-hidden class (#1340)

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.

Author: jdufresne

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 = '<span class="djDebugUncollapsed">{}</span>'.format(simple)
-    collapsed = '<span class="djDebugCollapsed">{}</span>'.format(formatted)
+    collapsed = '<span class="djDebugCollapsed djdt-hidden">{}</span>'.format(formatted)
     return collapsed + uncollapsed
 
 

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;
 }
 

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) {

debug_toolbar/templates/debug_toolbar/base.html

@@ -27,5 +27,5 @@
   {% for panel in toolbar.panels %}
     {% include "debug_toolbar/includes/panel_content.html" %}
   {% endfor %}
-  <div id="djDebugWindow" class="djdt-panelContent"></div>
+  <div id="djDebugWindow" class="djdt-panelContent djdt-hidden"></div>
 </div>

debug_toolbar/templates/debug_toolbar/includes/panel_content.html

@@ -1,7 +1,7 @@
 {% load static %}
 
 {% if panel.has_content and panel.enabled %}
-  <div id="{{ panel.panel_id }}" class="djdt-panelContent">
+  <div id="{{ panel.panel_id }}" class="djdt-panelContent djdt-hidden">
     <div class="djDebugPanelTitle">
       <a href="" class="djDebugClose">×</a>
       <h3>{{ panel.title }}</h3>

tests/panels/test_custom.py

@@ -31,7 +31,7 @@ def test_escapes_panel_title(self):
         self.assertContains(
             response,
             """
-            <div id="CustomPanel" class="djdt-panelContent">
+            <div id="CustomPanel" class="djdt-panelContent djdt-hidden">
             <div class="djDebugPanelTitle">
             <a href="" class="djDebugClose">×</a>
             <h3>Title with special chars &amp;&quot;&#39;&lt;&gt;</h3>

tests/panels/test_settings.py

@@ -22,7 +22,7 @@ def test_panel_title(self):
         self.assertContains(
             response,
             """
-            <div id="SettingsPanel" class="djdt-panelContent">
+            <div id="SettingsPanel" class="djdt-panelContent djdt-hidden">
             <div class="djDebugPanelTitle">
             <a href="" class="djDebugClose">×</a>
             <h3>Settings from None</h3>