Include panel scripts in content when RENDER_PANELS=True (#1689)

* Include panel scripts in content when RENDER_PANELS=True

* Make the panel scripts async module scripts.

Without marking them as modules, they weren't being loaded in as expected.

Co-authored-by: Tim Schilling <[email protected]>

Author: matthiask

debug_toolbar/templates/debug_toolbar/includes/panel_content.html

@@ -8,6 +8,7 @@ <h3>{{ panel.title }}</h3>
     </div>
     <div class="djDebugPanelContent">
       {% if toolbar.should_render_panels %}
+        {% for script in panel.scripts %}<script type="module" src="{{ script }}" async></script>{% endfor %}
         <div class="djdt-scroll">{{ panel.content }}</div>
       {% else %}
         <div class="djdt-loader"></div>

tests/test_integration.py

@@ -34,6 +34,15 @@
 rf = RequestFactory()
 
 
+def toolbar_store_id():
+    def get_response(request):
+        return HttpResponse()
+
+    toolbar = DebugToolbar(rf.get("/"), get_response)
+    toolbar.store()
+    return toolbar.store_id
+
+
 class BuggyPanel(Panel):
     def title(self):
         return "BuggyPanel"
@@ -213,13 +222,8 @@ def test_html5_validation(self):
             raise self.failureException(msg)
 
     def test_render_panel_checks_show_toolbar(self):
-        def get_response(request):
-            return HttpResponse()
-
-        toolbar = DebugToolbar(rf.get("/"), get_response)
-        toolbar.store()
         url = "/__debug__/render_panel/"
-        data = {"store_id": toolbar.store_id, "panel_id": "VersionsPanel"}
+        data = {"store_id": toolbar_store_id(), "panel_id": "VersionsPanel"}
 
         response = self.client.get(url, data)
         self.assertEqual(response.status_code, 200)
@@ -444,7 +448,7 @@ def test_view_returns_template_response(self):
         self.assertEqual(response.status_code, 200)
 
     @override_settings(DEBUG_TOOLBAR_CONFIG={"DISABLE_PANELS": set()})
-    def test_intcercept_redirects(self):
+    def test_intercept_redirects(self):
         response = self.client.get("/redirect/")
         self.assertEqual(response.status_code, 200)
         # Link to LOCATION header.
@@ -464,6 +468,15 @@ def test_server_timing_headers(self):
         for expected in expected_partials:
             self.assertTrue(re.compile(expected).search(server_timing))
 
+    @override_settings(DEBUG_TOOLBAR_CONFIG={"RENDER_PANELS": True})
+    def test_timer_panel(self):
+        response = self.client.get("/regular/basic/")
+        self.assertEqual(response.status_code, 200)
+        self.assertContains(
+            response,
+            '<script type="module" src="/static/debug_toolbar/js/timer.js" async>',
+        )
+
     def test_auth_login_view_without_redirect(self):
         response = self.client.get("/login_without_redirect/")
         self.assertEqual(response.status_code, 200)