From f49750d8e4605a93b8c3f47c7f825d3532dbbcdc Mon Sep 17 00:00:00 2001 From: Federico Bond Date: Fri, 21 Nov 2025 17:37:11 +1100 Subject: [PATCH] Update more styles --- debug_toolbar/panels/settings.py | 4 +-- .../static/debug_toolbar/css/toolbar.css | 36 ++++++++++--------- .../static/debug_toolbar/js/toolbar.js | 9 +++++ .../debug_toolbar/panels/history_tr.html | 28 +-------------- .../debug_toolbar/panels/settings.html | 2 +- .../debug_toolbar/panels/templates.html | 2 +- 6 files changed, 34 insertions(+), 47 deletions(-) diff --git a/debug_toolbar/panels/settings.py b/debug_toolbar/panels/settings.py index 4f91e39fa..c81a41b15 100644 --- a/debug_toolbar/panels/settings.py +++ b/debug_toolbar/panels/settings.py @@ -1,6 +1,6 @@ from django.utils.translation import gettext_lazy as _ from django.views.debug import get_default_exception_reporter_filter - +from pprint import pformat from debug_toolbar.panels import Panel from debug_toolbar.sanitize import force_str @@ -27,7 +27,7 @@ def generate_stats(self, request, response): self.record_stats( { "settings": { - key: force_str(value) + key: pformat(value) for key, value in sorted(get_safe_settings().items()) } } diff --git a/debug_toolbar/static/debug_toolbar/css/toolbar.css b/debug_toolbar/static/debug_toolbar/css/toolbar.css index a83466eb8..426515b8d 100644 --- a/debug_toolbar/static/debug_toolbar/css/toolbar.css +++ b/debug_toolbar/static/debug_toolbar/css/toolbar.css @@ -19,21 +19,21 @@ --djdt-background-color: white; --djdt-panel-content-background-color: #eee; --djdt-panel-content-table-background-color: var(--djdt-background-color); - --djdt-panel-content-table-alternate-background-color: #fafafa; --djdt-panel-title-background-color: #ffc; --djdt-djdt-panel-content-table-strip-background-color: #f5f5f5; --djdt-highlighted-background-color: #ffc; --djdt-toggle-template-background-color: #bbb; --djdt-sql-font-color: #333; - --djdt-pre-text-color: #555; + --djdt-pre-text-color: #666; --djdt-path-and-locals: black; + --djdt-stack-color: #666; --djdt-stack-span-color: black; --djdt-template-highlight-color: #333; --djdt-table-header-color: #666; --djdt-table-header-background-color: #f8f8f8; - --djdt-table-border-color: #e8e8e8; + --djdt-table-border-color: #ddd; --djdt-button-border-color: #ccc; --djdt-button-hover-border-color: #666; --djdt-pre-border-color: var(--djdt-table-border-color); @@ -45,15 +45,15 @@ --djdt-background-color: #121212; --djdt-panel-content-background-color: #121212; --djdt-panel-content-table-background-color: var(--djdt-background-color); - --djdt-panel-content-table-alternate-background-color: #171717; --djdt-panel-title-background-color: #417690; - --djdt-djdt-panel-content-table-strip-background-color: #324154ff; + --djdt-djdt-panel-content-table-strip-background-color: #171717; --djdt-highlighted-background-color: #00363a; --djdt-toggle-template-background-color: #282755; --djdt-sql-font-color: var(--djdt-font-color); --djdt-pre-text-color: var(--djdt-font-color); --djdt-path-and-locals: #65758cff; + --djdt-stack-color: #888; --djdt-stack-span-color: #ccc; --djdt-template-highlight-color: var(--djdt-stack-span-color); @@ -472,12 +472,13 @@ top: 4px; right: 15px; line-height: 16px; - border: 6px solid #ddd; + border: 3px solid #ddd; border-radius: 50%; - background: #fff; + background: transparent; + box-shadow: none; color: #ddd; - font-weight: 900; - font-size: 20px; + font-weight: 400; + font-size: 26px; height: 36px; width: 36px; padding: 0 0 5px; @@ -543,6 +544,8 @@ #djDebug .highlight { color: var(--djdt-font-color); + padding: 10px 13px; + border: 1px solid var(--djdt-table-border-color); } #djDebug .highlight .err { color: var(--djdt-font-color); @@ -561,6 +564,9 @@ To regenerate: from pygments.formatters import HtmlFormatter print(HtmlFormatter(wrapcode=True).get_style_defs()) */ +#djDebug[data-theme="light"] .highlight { + background: #fff; +} #djDebug[data-theme="light"] .highlight pre { line-height: 125%; } @@ -1084,7 +1090,7 @@ To regenerate: } #djDebug .djDetailsRow { - background-color: var(--djdt-panel-content-table-alternate-background-color); + background-color: var(--djdt-djdt-panel-content-table-strip-background-color); } #djDebug .djDebugRowWarning .djdt-time { @@ -1122,12 +1128,12 @@ To regenerate: } #djDebug .djdt-stack { - color: var(--djdt-stack-span-color); + color: var(--djdt-stack-color); } #djDebug .djdt-stack span { color: var(--djdt-stack-span-color); - font-weight: bold; + font-weight: 500; } #djDebug .djdt-stack pre.djdt-locals, #djDebug .djdt-stack pre.djdt-locals span { @@ -1135,12 +1141,10 @@ To regenerate: font-weight: normal; } #djDebug .djdt-stack .djdt-code { + font-size: 14px; font-weight: normal; margin: 5px 0 10px; - border: 1px solid var(--djdt-pre-border-color); - border-collapse: collapse; - background-color: var(--djdt-background-color); - padding: 5px; + color: var(--djdt-stack-color); } #djDebug .djdt-stack pre.djdt-locals { margin: 0 27px 27px 27px; diff --git a/debug_toolbar/static/debug_toolbar/js/toolbar.js b/debug_toolbar/static/debug_toolbar/js/toolbar.js index c708e9ea1..4a070b986 100644 --- a/debug_toolbar/static/debug_toolbar/js/toolbar.js +++ b/debug_toolbar/static/debug_toolbar/js/toolbar.js @@ -116,6 +116,15 @@ const djdt = { const isSelected = container.classList.contains("djSelected"); container.classList.toggle("djSelected", !isSelected); container.classList.toggle("djUnselected", isSelected); + + for (const el of this.querySelectorAll(".djDebugCollapsed")) { + $$.toggle(el, !isSelected); + } + for (const el of this.querySelectorAll( + ".djDebugUncollapsed" + )) { + $$.toggle(el, isSelected); + } }); // Used by the cache, profiling and SQL panels diff --git a/debug_toolbar/templates/debug_toolbar/panels/history_tr.html b/debug_toolbar/templates/debug_toolbar/panels/history_tr.html index 8acd72343..45343ba6d 100644 --- a/debug_toolbar/templates/debug_toolbar/panels/history_tr.html +++ b/debug_toolbar/templates/debug_toolbar/panels/history_tr.html @@ -10,33 +10,7 @@

{{ history_context.history_stats.request_url|truncatechars:100|escape }}

- -
- - - - - - - - - - - - - {% for key, value in history_context.history_stats.data.items %} - - - - - {% empty %} - - - - {% endfor %} - -
{% translate "Variable" %}{% translate "Value" %}
{{ key|pprint }}{{ value|pprint }}
No data
-
+ {% if history_context.history_stats.data %}{{ history_context.history_stats.data }}{% endif %}

diff --git a/debug_toolbar/templates/debug_toolbar/panels/settings.html b/debug_toolbar/templates/debug_toolbar/panels/settings.html index 5214c1b42..67449d345 100644 --- a/debug_toolbar/templates/debug_toolbar/panels/settings.html +++ b/debug_toolbar/templates/debug_toolbar/panels/settings.html @@ -10,7 +10,7 @@ {% for name, value in settings.items %} {{ name }} - {{ value|pprint }} + {{ value }} {% endfor %} diff --git a/debug_toolbar/templates/debug_toolbar/panels/templates.html b/debug_toolbar/templates/debug_toolbar/panels/templates.html index 60ed020c1..f85b43855 100644 --- a/debug_toolbar/templates/debug_toolbar/panels/templates.html +++ b/debug_toolbar/templates/debug_toolbar/panels/templates.html @@ -25,7 +25,7 @@

{% blocktranslate count template_count=templates|length %}Template{% plural {{ template.template.name|addslashes }}
- {{ template.template.origin_name|addslashes }} + {{ template.template.origin_name|addslashes }} {% translate "Source" %}