From 18924eeacb14ce7cd5266ab4fa2d2a88b0e60fbb Mon Sep 17 00:00:00 2001 From: Federico Bond Date: Fri, 21 Nov 2025 13:56:32 +1100 Subject: [PATCH 1/3] Update toolbar panel styles --- debug_toolbar/panels/sql/utils.py | 35 ++-- .../static/debug_toolbar/css/toolbar.css | 165 ++++++++++-------- .../static/debug_toolbar/js/toolbar.js | 9 + .../templates/debug_toolbar/panels/cache.html | 12 +- .../debug_toolbar/panels/history_tr.html | 7 +- .../templates/debug_toolbar/panels/sql.html | 17 +- .../debug_toolbar/panels/staticfiles.html | 22 ++- .../debug_toolbar/panels/templates.html | 44 +++-- debug_toolbar/utils.py | 13 +- 9 files changed, 183 insertions(+), 141 deletions(-) diff --git a/debug_toolbar/panels/sql/utils.py b/debug_toolbar/panels/sql/utils.py index 305543aec..033ae658f 100644 --- a/debug_toolbar/panels/sql/utils.py +++ b/debug_toolbar/panels/sql/utils.py @@ -1,5 +1,6 @@ from functools import cache, lru_cache from html import escape +from itertools import cycle import sqlparse from django.dispatch import receiver @@ -136,27 +137,13 @@ def contrasting_color_generator(): and then vary subsequent bits systematically. """ - def rgb_to_hex(rgb): - return "#{:02x}{:02x}{:02x}".format(*tuple(rgb)) - - triples = [ - (1, 0, 0), - (0, 1, 0), - (0, 0, 1), - (1, 1, 0), - (0, 1, 1), - (1, 0, 1), - (1, 1, 1), - ] - n = 1 << 7 - so_far = [[0, 0, 0]] - while True: - if n == 0: # This happens after 2**24 colours; presumably, never - yield "#000000" # black - copy_so_far = list(so_far) - for triple in triples: - for previous in copy_so_far: - rgb = [n * triple[i] + previous[i] for i in range(3)] - so_far.append(rgb) - yield rgb_to_hex(rgb) - n >>= 1 + return cycle([ + "#0C375A", + "#21A0A0", + "#FFC300", + "#FF5733", + "#C70039", + "#900C3F", + "#581845", + "#F1C40F" + ]) diff --git a/debug_toolbar/static/debug_toolbar/css/toolbar.css b/debug_toolbar/static/debug_toolbar/css/toolbar.css index 120b8958c..a83466eb8 100644 --- a/debug_toolbar/static/debug_toolbar/css/toolbar.css +++ b/debug_toolbar/static/debug_toolbar/css/toolbar.css @@ -19,40 +19,47 @@ --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: lightgrey; + --djdt-highlighted-background-color: #ffc; --djdt-toggle-template-background-color: #bbb; --djdt-sql-font-color: #333; --djdt-pre-text-color: #555; - --djdt-path-and-locals: #777; + --djdt-path-and-locals: black; --djdt-stack-span-color: black; --djdt-template-highlight-color: #333; - --djdt-table-border-color: #ccc; - --djdt-button-border-color: var(--djdt-table-border-color); + --djdt-table-header-color: #666; + --djdt-table-header-background-color: #f8f8f8; + --djdt-table-border-color: #e8e8e8; + --djdt-button-border-color: #ccc; + --djdt-button-hover-border-color: #666; --djdt-pre-border-color: var(--djdt-table-border-color); --djdt-raw-border-color: var(--djdt-table-border-color); } #djDebug[data-theme="dark"] { --djdt-font-color: #f8f8f2; - --djdt-background-color: #1e293bff; - --djdt-panel-content-background-color: #0f1729ff; + --djdt-background-color: #121212; + --djdt-panel-content-background-color: #121212; --djdt-panel-content-table-background-color: var(--djdt-background-color); - --djdt-panel-title-background-color: #242432; + --djdt-panel-content-table-alternate-background-color: #171717; + --djdt-panel-title-background-color: #417690; --djdt-djdt-panel-content-table-strip-background-color: #324154ff; - --djdt--highlighted-background-color: #2c2a7dff; + --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-span-color: #7c8fa4; + --djdt-stack-span-color: #ccc; --djdt-template-highlight-color: var(--djdt-stack-span-color); - --djdt-table-border-color: #324154ff; + --djdt-table-header-color: #f8f8f8; + --djdt-table-header-background-color: #212121; + --djdt-table-border-color: #353535; --djdt-button-border-color: var(--djdt-table-border-color); --djdt-pre-border-color: var(--djdt-table-border-color); --djdt-raw-border-color: var(--djdt-table-border-color); @@ -146,34 +153,28 @@ transition: none; } -#djDebug button { - background-color: #eee; - background-image: linear-gradient(to bottom, #eee, #cccccc); +#djDebug button, #djDebug .djButton { + background-color: var(--djdt-background-color); border: 1px solid var(--djdt-button-border-color); - border-bottom: 1px solid #bbb; - border-radius: 3px; - color: #333; + border-radius: 4px; + color: var(--djdt-font-color); line-height: 1; - padding: 0 8px; + padding: 4px 8px; text-align: center; - text-shadow: 0 1px 0 #eee; + text-decoration: none; +} + +#djDebug[data-theme="light"] button, #djDebug[data-theme="light"] .djButton { + box-shadow: 0 -15px 20px -10px rgba(0, 0, 0, 0.15) inset; } -#djDebug button:hover { - background-color: #ddd; - background-image: linear-gradient(to bottom, #ddd, #bbb); - border-color: #bbb; - border-bottom-color: #999; +#djDebug button:hover, #djDebug .djButton:hover { + border-color: var(--djdt-button-hover-border-color); cursor: pointer; - text-shadow: 0 1px 0 #ddd; } -#djDebug button:active { +#djDebug button:active, #djDebug .djButton:active { border: 1px solid #aaa; - border-bottom: 1px solid #888; - box-shadow: - inset 0 0 5px 2px #aaa, - 0 1px 0 0 #eee; } #djDebug #djDebugToolbar { @@ -318,11 +319,10 @@ #djDebug pre { white-space: pre-wrap; color: var(--djdt-pre-text-color); - border: 1px solid var(--djdt-pre-border-color); - border-collapse: collapse; - background-color: var(--djdt-background-color); - padding: 2px 3px; - margin-bottom: 3px; +} + +#djDebug pre span { + font-family: var(--djdt-font-family-monospace); } #djDebug .djdt-panelContent { @@ -337,14 +337,11 @@ z-index: 100000000; } -#djDebug .djdt-panelContent > div { - border-bottom: 1px solid #ddd; -} - #djDebug .djDebugPanelTitle { position: absolute; background-color: var(--djdt-panel-title-background-color); - color: #666; + border-bottom: 1px solid var(--djdt-table-border-color); + color: #f5dd5d; padding-left: 20px; top: 0; right: 0; @@ -364,7 +361,7 @@ bottom: 0; left: 0; height: auto; - padding: 5px 0 0 20px; + padding: 5px 0 40px 20px; } #djDebug .djDebugPanelContent .djdt-loader { @@ -390,7 +387,7 @@ height: 100%; overflow: auto; display: block; - padding: 0 10px 0 0; + padding: 10px 10px 10px 0; } #djDebug h3 { @@ -401,7 +398,7 @@ #djDebug h4 { font-size: 20px; - font-weight: bold; + font-weight: 400; margin-top: 0.8em; } @@ -417,33 +414,59 @@ #djDebug .djdt-panelContent tbody > tr:nth-child(odd):not(.djdt-highlighted) { background-color: var(--djdt-panel-content-table-strip-background-color); } -#djDebug .djdt-panelContent tbody td, -#djDebug .djdt-panelContent tbody th { +#djDebug .djdt-panelContent th { + border-top: 1px solid var(--djdt-table-border-color); +} +#djDebug .djdt-panelContent td, +#djDebug .djdt-panelContent th { vertical-align: top; - padding: 2px 3px; + padding: 8px 10px; + border-bottom: 1px solid var(--djdt-table-border-color); } #djDebug .djdt-panelContent tbody td.djdt-time { text-align: center; } #djDebug .djdt-panelContent thead th { - padding: 1px 6px 1px 3px; + color: var(--djdt-table-header-color); + background-color: var(--djdt-table-header-background-color); text-align: left; + text-transform: uppercase; font-weight: bold; - font-size: 14px; + font-size: 11px; white-space: nowrap; + padding: 8px 10px; } #djDebug .djdt-panelContent tbody th { width: 12em; text-align: right; - color: #666; - padding-right: 0.5em; + color: #d0d0d0; + padding: 8px 10px; } #djDebug .djTemplateContext { background-color: var(--djdt-background-color); } +#djDebug .djdt-badge { + padding: 2px 4px; + border-radius: 3px; + font-size: 12px; + text-transform: uppercase; + color: var(--djdt-font-color); + background-color: var(--djdt-background-color); +} + +#djDebug .djdt-badge.djdt-badge-error { + color: #fff; + background-color: #e7000b; +} + +#djDebug .djdt-badge.djdt-badge-success { + color: #fff; + background-color: #05A53F; +} + #djDebug .djdt-panelContent .djDebugClose { position: absolute; top: 4px; @@ -480,19 +503,6 @@ margin-left: 10px; } -#djDebug a.toggleTemplate { - padding: 4px; - background-color: var(--djdt-toggle-template-background-color); - border-radius: 3px; -} - -#djDebug a.toggleTemplate:hover { - padding: 4px; - background-color: #444; - color: #ffe761; - border-radius: 3px; -} - #djDebug .djDebugCollapsed { color: var(--djdt-sql-font-color); } @@ -1073,6 +1083,10 @@ To regenerate: stroke: #94b24d; } +#djDebug .djDetailsRow { + background-color: var(--djdt-panel-content-table-alternate-background-color); +} + #djDebug .djDebugRowWarning .djdt-time { color: red; } @@ -1081,20 +1095,21 @@ To regenerate: padding-top: 3px; } #djDebug .djdt-panelContent table .djdt-actions { - min-width: 70px; + min-width: 82px; white-space: nowrap; } #djDebug .djdt-color:after { content: "\00a0"; } +#djDebug .djToggleRow { + cursor: pointer; +} #djDebug .djToggleSwitch { box-sizing: content-box; - padding: 0; - border: 1px solid #999; - border-radius: 0; + padding: 3px; width: 12px; - color: #777; - background: linear-gradient(to bottom, #fff, #dcdcdc); + color: var(--djdt-font-color); + background: var(--djdt-background-color); } #djDebug .djNoToggleSwitch { height: 14px; @@ -1106,18 +1121,26 @@ To regenerate: margin-top: 0.8em; } +#djDebug .djdt-stack { + color: var(--djdt-stack-span-color); +} + #djDebug .djdt-stack span { color: var(--djdt-stack-span-color); font-weight: bold; } -#djDebug .djdt-stack span.djdt-path, #djDebug .djdt-stack pre.djdt-locals, #djDebug .djdt-stack pre.djdt-locals span { color: var(--djdt-path-and-locals); font-weight: normal; } -#djDebug .djdt-stack span.djdt-code { +#djDebug .djdt-stack .djdt-code { 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; } #djDebug .djdt-stack pre.djdt-locals { margin: 0 27px 27px 27px; @@ -1143,7 +1166,7 @@ To regenerate: max-height: 100%; } #djDebug .djdt-highlighted { - background-color: var(--djdt--highlighted-background-color); + background-color: var(--djdt-highlighted-background-color); } #djDebug tr.djdt-highlighted.djdt-profile-row { background-color: #ffc; diff --git a/debug_toolbar/static/debug_toolbar/js/toolbar.js b/debug_toolbar/static/debug_toolbar/js/toolbar.js index 609842209..c708e9ea1 100644 --- a/debug_toolbar/static/debug_toolbar/js/toolbar.js +++ b/debug_toolbar/static/debug_toolbar/js/toolbar.js @@ -109,6 +109,15 @@ const djdt = { }); }); + $$.on(djDebug, "click", ".djToggleRow", function () { + const id = this.dataset.toggleId; + const name = this.dataset.toggleName; + const container = document.getElementById(`${name}_${id}`); + const isSelected = container.classList.contains("djSelected"); + container.classList.toggle("djSelected", !isSelected); + container.classList.toggle("djUnselected", isSelected); + }); + // Used by the cache, profiling and SQL panels $$.on(djDebug, "click", ".djToggleSwitch", function () { const id = this.dataset.toggleId; diff --git a/debug_toolbar/templates/debug_toolbar/panels/cache.html b/debug_toolbar/templates/debug_toolbar/panels/cache.html index 8ffef5917..8d2fbb40e 100644 --- a/debug_toolbar/templates/debug_toolbar/panels/cache.html +++ b/debug_toolbar/templates/debug_toolbar/panels/cache.html @@ -40,7 +40,7 @@

{% translate "Calls" %}

- + @@ -49,19 +49,15 @@

{% translate "Calls" %}

{% for call in calls %} - - + - - - + + {% endfor %} diff --git a/debug_toolbar/templates/debug_toolbar/panels/history_tr.html b/debug_toolbar/templates/debug_toolbar/panels/history_tr.html index decce3836..8acd72343 100644 --- a/debug_toolbar/templates/debug_toolbar/panels/history_tr.html +++ b/debug_toolbar/templates/debug_toolbar/panels/history_tr.html @@ -39,7 +39,12 @@ - + @@ -39,11 +39,8 @@ {% for query in queries %} - + - - - - + + - + {% 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

{% translate "Time (ms)" %}{% translate "Time (ms)" %} {% translate "Type" %} {% translate "Arguments" %} {% translate "Keyword arguments" %}
- -
{{ call.time|floatformat:"4" }} {{ call.name|escape }} {{ call.args|escape }} {{ call.kwargs|escape }} {{ call.backend }} 
{{ call.trace|safe }}
{{ call.trace|safe }}
-

{{ history_context.history_stats.status_code|escape }}

+

+ {% if history_context.history_stats.status_code >= 400 %} + {{ history_context.history_stats.status_code|escape }} + {% else %} + {{ history_context.history_stats.status_code|escape }} + {% endif %}

diff --git a/debug_toolbar/templates/debug_toolbar/panels/sql.html b/debug_toolbar/templates/debug_toolbar/panels/sql.html index 63cf293c1..d99fce989 100644 --- a/debug_toolbar/templates/debug_toolbar/panels/sql.html +++ b/debug_toolbar/templates/debug_toolbar/panels/sql.html @@ -31,7 +31,7 @@
{% translate "Query" %}{% translate "Query" %} {% translate "Timeline" %} {% translate "Time (ms)" %} {% translate "Action" %}
- -
{{ query.sql|safe }}
{% if query.similar_count %} @@ -88,11 +85,11 @@ {% endif %}
+
-

{% translate "Connection:" %} {{ query.alias }}

+

{% translate "Connection:" %} {{ query.alias }}

{% if query.iso_level %}

{% translate "Isolation level:" %} {{ query.iso_level }}

{% endif %} @@ -100,7 +97,7 @@

{% translate "Transaction status:" %} {{ query.trans_status }}

{% endif %} {% if query.stacktrace %} - 
{{ query.stacktrace }}
+
{{ query.stacktrace }}
{% endif %} {% if query.template_info %} diff --git a/debug_toolbar/templates/debug_toolbar/panels/staticfiles.html b/debug_toolbar/templates/debug_toolbar/panels/staticfiles.html index 4c32e0e41..e89d83506 100644 --- a/debug_toolbar/templates/debug_toolbar/panels/staticfiles.html +++ b/debug_toolbar/templates/debug_toolbar/panels/staticfiles.html @@ -24,12 +24,22 @@

{% blocktranslate count apps_count=staticfiles_apps|length %}Static file app

{% blocktranslate count staticfiles_count=staticfiles|length %}Static file{% plural %}Static files{% endblocktranslate %}

{% if staticfiles %} -
- {% for path, url, real_path in staticfiles %} -
{{ path }}
-
{{ real_path }}
- {% endfor %} -
+
+ + + + + + + + {% for path, url, real_path in staticfiles %} + + + + + {% endfor %} + +
{% translate 'Path' %}{% translate 'Location' %}
{{ path }}{{ real_path }}
{% else %}

{% translate "None" %}

{% endif %} diff --git a/debug_toolbar/templates/debug_toolbar/panels/templates.html b/debug_toolbar/templates/debug_toolbar/panels/templates.html index 4ceae12e7..60ed020c1 100644 --- a/debug_toolbar/templates/debug_toolbar/panels/templates.html +++ b/debug_toolbar/templates/debug_toolbar/panels/templates.html @@ -12,20 +12,36 @@

{% blocktranslate count template_count=template_dirs|length %}Template path{

{% blocktranslate count template_count=templates|length %}Template{% plural %}Templates{% endblocktranslate %}

{% if templates %} -
- {% for template in templates %} -
{{ template.template.name|addslashes }}
-
{{ template.template.origin_name|addslashes }}
- {% if template.context %} -
-
- {% translate "Toggle context" %} - {{ template.context }} -
-
- {% endif %} - {% endfor %} -
+ + + + + + + + + {% for template in templates %} + + + + + {% if template.context %} + + + + + {% endif %} + {% endfor %} + +
{% translate "Template" %}{% translate "Action" %}
+ {{ template.template.name|addslashes }} +
+ {{ template.template.origin_name|addslashes }} + 		+ {% translate "Source" %} +
+ {{ template.context }} +
{% else %}

{% translate "None" %}

{% endif %} diff --git a/debug_toolbar/utils.py b/debug_toolbar/utils.py index f4b3eac38..077eccf1f 100644 --- a/debug_toolbar/utils.py +++ b/debug_toolbar/utils.py @@ -69,6 +69,7 @@ def tidy_stacktrace(stack: list[stubs.InspectStack]) -> stubs.TidyStackTrace: return trace + def render_stacktrace(trace: stubs.TidyStackTrace) -> SafeString: show_locals = dt_settings.get_config()["ENABLE_STACKTRACES_LOCALS"] html = "" @@ -76,23 +77,21 @@ def render_stacktrace(trace: stubs.TidyStackTrace) -> SafeString: if os.path.sep in abspath: directory, filename = abspath.rsplit(os.path.sep, 1) # We want the separator to appear in the UI so add it back. - directory += os.path.sep else: # abspath could be something like "" directory = "" filename = abspath html += format_html( ( - '{}' - + '{} in' - + ' {}' - + '({})\n' - + ' {}\n' + 'File {}{},' + + ' line {},' + + ' in {}
' + + ' 
   {}
' ), directory, filename, - func, lineno, + func, code, ) if show_locals: From f49750d8e4605a93b8c3f47c7f825d3532dbbcdc Mon Sep 17 00:00:00 2001 From: Federico Bond Date: Fri, 21 Nov 2025 17:37:11 +1100 Subject: [PATCH 2/3] 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 }}
{{ template.template.name|addslashes }}
- {{ template.template.origin_name|addslashes }} + {{ template.template.origin_name|addslashes }} 		{% translate "Source" %} From 2987cd4c690565efbe9e7d3b31c41ed7375350a2 Mon Sep 17 00:00:00 2001 From: "pre-commit-ci[bot]" <66853113+pre-commit-ci[bot]@users.noreply.github.com> Date: Fri, 21 Nov 2025 07:01:51 +0000 Subject: [PATCH 3/3] [pre-commit.ci] auto fixes from pre-commit.com hooks for more information, see https://pre-commit.ci --- debug_toolbar/panels/settings.py | 5 +++-- debug_toolbar/panels/sql/utils.py | 22 ++++++++++--------- .../static/debug_toolbar/css/toolbar.css | 18 ++++++++++----- .../static/debug_toolbar/js/toolbar.js | 4 +--- debug_toolbar/utils.py | 1 - 5 files changed, 28 insertions(+), 22 deletions(-) diff --git a/debug_toolbar/panels/settings.py b/debug_toolbar/panels/settings.py index c81a41b15..ec3ba4212 100644 --- a/debug_toolbar/panels/settings.py +++ b/debug_toolbar/panels/settings.py @@ -1,8 +1,9 @@ +from pprint import pformat + 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 get_safe_settings = get_default_exception_reporter_filter().get_safe_settings diff --git a/debug_toolbar/panels/sql/utils.py b/debug_toolbar/panels/sql/utils.py index 033ae658f..2e0382f0f 100644 --- a/debug_toolbar/panels/sql/utils.py +++ b/debug_toolbar/panels/sql/utils.py @@ -137,13 +137,15 @@ def contrasting_color_generator(): and then vary subsequent bits systematically. """ - return cycle([ - "#0C375A", - "#21A0A0", - "#FFC300", - "#FF5733", - "#C70039", - "#900C3F", - "#581845", - "#F1C40F" - ]) + return cycle( + [ + "#0C375A", + "#21A0A0", + "#FFC300", + "#FF5733", + "#C70039", + "#900C3F", + "#581845", + "#F1C40F", + ] + ) diff --git a/debug_toolbar/static/debug_toolbar/css/toolbar.css b/debug_toolbar/static/debug_toolbar/css/toolbar.css index 426515b8d..90144a0d5 100644 --- a/debug_toolbar/static/debug_toolbar/css/toolbar.css +++ b/debug_toolbar/static/debug_toolbar/css/toolbar.css @@ -153,7 +153,8 @@ transition: none; } -#djDebug button, #djDebug .djButton { +#djDebug button, +#djDebug .djButton { background-color: var(--djdt-background-color); border: 1px solid var(--djdt-button-border-color); border-radius: 4px; @@ -164,16 +165,19 @@ text-decoration: none; } -#djDebug[data-theme="light"] button, #djDebug[data-theme="light"] .djButton { +#djDebug[data-theme="light"] button, +#djDebug[data-theme="light"] .djButton { box-shadow: 0 -15px 20px -10px rgba(0, 0, 0, 0.15) inset; } -#djDebug button:hover, #djDebug .djButton:hover { +#djDebug button:hover, +#djDebug .djButton:hover { border-color: var(--djdt-button-hover-border-color); cursor: pointer; } -#djDebug button:active, #djDebug .djButton:active { +#djDebug button:active, +#djDebug .djButton:active { border: 1px solid #aaa; } @@ -464,7 +468,7 @@ #djDebug .djdt-badge.djdt-badge-success { color: #fff; - background-color: #05A53F; + background-color: #05a53f; } #djDebug .djdt-panelContent .djDebugClose { @@ -1090,7 +1094,9 @@ To regenerate: } #djDebug .djDetailsRow { - background-color: var(--djdt-djdt-panel-content-table-strip-background-color); + background-color: var( + --djdt-djdt-panel-content-table-strip-background-color + ); } #djDebug .djDebugRowWarning .djdt-time { diff --git a/debug_toolbar/static/debug_toolbar/js/toolbar.js b/debug_toolbar/static/debug_toolbar/js/toolbar.js index 4a070b986..4976b6133 100644 --- a/debug_toolbar/static/debug_toolbar/js/toolbar.js +++ b/debug_toolbar/static/debug_toolbar/js/toolbar.js @@ -120,9 +120,7 @@ const djdt = { for (const el of this.querySelectorAll(".djDebugCollapsed")) { $$.toggle(el, !isSelected); } - for (const el of this.querySelectorAll( - ".djDebugUncollapsed" - )) { + for (const el of this.querySelectorAll(".djDebugUncollapsed")) { $$.toggle(el, isSelected); } }); diff --git a/debug_toolbar/utils.py b/debug_toolbar/utils.py index 077eccf1f..3340ab8a4 100644 --- a/debug_toolbar/utils.py +++ b/debug_toolbar/utils.py @@ -69,7 +69,6 @@ def tidy_stacktrace(stack: list[stubs.InspectStack]) -> stubs.TidyStackTrace: return trace - def render_stacktrace(trace: stubs.TidyStackTrace) -> SafeString: show_locals = dt_settings.get_config()["ENABLE_STACKTRACES_LOCALS"] html = ""