Update the design interface of the toolbar.

This includes the following:
- The newly designed logo
- Design documentation and guidelines for the documentation
- Toolbar UI colours with the new theme
- Credit to the designer for the work on docs
- Accessibility audit and fixes

Author: VeldaKiara

biome.json

@@ -1,5 +1,5 @@
 {
-    "$schema": "https://biomejs.dev/schemas/2.5.5/schema.json",
+    "$schema": "https://biomejs.dev/schemas/2.5.6/schema.json",
     "formatter": {
         "enabled": true,
         "useEditorconfig": true

debug_toolbar/panels/__init__.py

@@ -57,6 +57,13 @@ def enabled(self) -> bool:
 
     # Titles and content
 
+    nav_icon = None
+    """
+    Optional static path to an icon shown next to :attr:`nav_title` in the
+    side bar, e.g. ``"debug_toolbar/img/history.svg"``. Defaults to ``None``
+    (no icon).
+    """
+
     @property
     def nav_title(self):
         """
@@ -97,6 +104,15 @@ def title(self):
         """
         raise NotImplementedError
 
+    @property
+    def title_bar(self):
+        """
+        Optional extra HTML rendered in the panel's title bar, next to the
+        :attr:`title`. Useful for panel-specific controls such as buttons.
+        Defaults to the empty string (nothing extra).
+        """
+        return ""
+
     @property
     def template(self):
         """

debug_toolbar/panels/alerts.py

@@ -75,6 +75,7 @@ class AlertsPanel(Panel):
     }
 
     title = _("Alerts")
+    nav_icon = "debug_toolbar/img/alerts.svg"
 
     is_async = True
 

debug_toolbar/panels/cache.py

@@ -171,6 +171,7 @@ def _record_call(self, cache, alias, name, original_method, args, kwargs):
     # Implement the Panel API
 
     nav_title = _("Cache")
+    nav_icon = "debug_toolbar/img/cache.svg"
 
     @property
     def nav_subtitle(self):

debug_toolbar/panels/community.py

@@ -11,3 +11,4 @@ class CommunityPanel(Panel):
     is_async = True
     template = "debug_toolbar/panels/community.html"
     title = _("Community")
+    nav_icon = "debug_toolbar/img/community.svg"

debug_toolbar/panels/headers.py

@@ -29,6 +29,7 @@ class HeadersPanel(Panel):
     }
 
     title = _("Headers")
+    nav_icon = "debug_toolbar/img/headers.svg"
 
     is_async = True
 

debug_toolbar/panels/history/panel.py

@@ -20,6 +20,7 @@ class HistoryPanel(Panel):
     is_async = True
     title = _("History")
     nav_title = _("History")
+    nav_icon = "debug_toolbar/img/history.svg"
     template = "debug_toolbar/panels/history.html"
 
     def get_headers(self, request: HttpRequest) -> dict:
@@ -52,6 +53,21 @@ def get_urls(cls) -> list[URLPattern]:
     def nav_subtitle(self) -> str:
         return self.get_stats().get("request_url", "")
 
+    @property
+    def title_bar(self) -> str:
+        """Render the refresh control shown in the panel's title bar."""
+        return render_to_string(
+            "debug_toolbar/panels/history_title_bar.html",
+            {
+                "refresh_form": HistoryStoreForm(
+                    initial={
+                        "request_id": self.toolbar.request_id,
+                        "exclude_history": True,
+                    }
+                ),
+            },
+        )
+
     def generate_stats(self, request: HttpRequest, response: HttpResponse) -> None:
         data: QueryDict | None = None
         try:
@@ -105,12 +121,6 @@ def content(self) -> str:
             {
                 "current_request_id": self.toolbar.request_id,
                 "toolbar_history": toolbar_history,
-                "refresh_form": HistoryStoreForm(
-                    initial={
-                        "request_id": self.toolbar.request_id,
-                        "exclude_history": True,
-                    }
-                ),
             },
         )
 

debug_toolbar/panels/profiling.py

@@ -154,6 +154,7 @@ class ProfilingPanel(Panel):
 
     is_async = False
     title = _("Profiling")
+    nav_icon = "debug_toolbar/img/profiling.svg"
 
     template = "debug_toolbar/panels/profiling.html"
     capture_project_code = dt_settings.get_config()["PROFILER_CAPTURE_PROJECT_CODE"]

debug_toolbar/panels/redirects.py

@@ -17,6 +17,7 @@ class RedirectsPanel(Panel):
     is_async = True
 
     nav_title = _("Intercept redirects")
+    nav_icon = "debug_toolbar/img/redirects.svg"
 
     def _process_response(self, response):
         """

debug_toolbar/panels/request.py

@@ -14,6 +14,7 @@ class RequestPanel(Panel):
     template = "debug_toolbar/panels/request.html"
 
     title = _("Request")
+    nav_icon = "debug_toolbar/img/request.svg"
 
     @property
     def nav_subtitle(self):