Make djdt-{{ panel.panel_id }} a DOM ID instead of DOM class

This string represents a unique element on the page, therefore it should be a
DOM ID. No two panels should have the same panel_id.

This makes it a tiny bit simpler to query for a specific Django Debug Toolbar
button when using automated tools.

Author: jdufresne

debug_toolbar/templates/debug_toolbar/includes/panel_button.html

@@ -1,6 +1,6 @@
 {% load i18n %}
 
-<li class="djDebugPanelButton djdt-{{ panel.panel_id }}">
+<li id="djdt-{{ panel.panel_id }}" class="djDebugPanelButton">
   <input type="checkbox" data-cookie="djdt{{ panel.panel_id }}" {% if panel.enabled %}checked title="{% trans "Disable for next and successive requests" %}"{% else %}title="{% trans "Enable for next and successive requests" %}"{% endif %}>
   {% if panel.has_content and panel.enabled %}
     <a href="#" title="{{ panel.title }}" class="{{ panel.panel_id }}">

tests/panels/test_custom.py

@@ -19,7 +19,7 @@ def test_escapes_panel_title(self):
         self.assertContains(
             response,
             """
-            <li class="djDebugPanelButton djdt-CustomPanel">
+            <li id="djdt-CustomPanel" class="djDebugPanelButton">
             <input type="checkbox" checked title="Disable for next and successive requests" data-cookie="djdtCustomPanel">
             <a class="CustomPanel" href="#" title="Title with special chars &amp;&quot;&#39;&lt;&gt;">
             Title with special chars &amp;&quot;&#39;&lt;&gt;

tests/panels/test_settings.py

@@ -12,7 +12,7 @@ def test_panel_title(self):
         self.assertContains(
             response,
             """
-            <li class="djDebugPanelButton djdt-SettingsPanel">
+            <li id="djdt-SettingsPanel" class="djDebugPanelButton">
             <input type="checkbox" checked title="Disable for next and successive requests" data-cookie="djdtSettingsPanel">
             <a class="SettingsPanel" href="#" title="Settings from None">Settings</a>
             </li>