Skip to content

Commit 9037a38

Browse files
federicobondfedericobond
committed
Update toolbar panel styles
1 parent 7c0b02b commit 9037a38

File tree

7 files changed

+142
-97
lines changed

7 files changed

+142
-97
lines changed

‎debug_toolbar/panels/sql/utils.py‎

Lines changed: 11 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
from functools import cache, lru_cache
22
from html import escape
3+
from itertools import cycle
34

45
import sqlparse
56
from django.dispatch import receiver
@@ -136,27 +137,13 @@ def contrasting_color_generator():
136137
and then vary subsequent bits systematically.
137138
"""
138139

139-
def rgb_to_hex(rgb):
140-
return "#{:02x}{:02x}{:02x}".format(*tuple(rgb))
141-
142-
triples = [
143-
(1, 0, 0),
144-
(0, 1, 0),
145-
(0, 0, 1),
146-
(1, 1, 0),
147-
(0, 1, 1),
148-
(1, 0, 1),
149-
(1, 1, 1),
150-
]
151-
n = 1 << 7
152-
so_far = [[0, 0, 0]]
153-
while True:
154-
if n == 0: # This happens after 2**24 colours; presumably, never
155-
yield "#000000" # black
156-
copy_so_far = list(so_far)
157-
for triple in triples:
158-
for previous in copy_so_far:
159-
rgb = [n * triple[i] + previous[i] for i in range(3)]
160-
so_far.append(rgb)
161-
yield rgb_to_hex(rgb)
162-
n >>= 1
140+
return cycle([
141+
"#0C375A",
142+
"#21A0A0",
143+
"#FFC300",
144+
"#FF5733",
145+
"#C70039",
146+
"#900C3F",
147+
"#581845",
148+
"#F1C40F"
149+
])

‎debug_toolbar/static/debug_toolbar/css/toolbar.css‎

Lines changed: 79 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@
2121
--djdt-panel-content-table-background-color: var(--djdt-background-color);
2222
--djdt-panel-title-background-color: #ffc;
2323
--djdt-djdt-panel-content-table-strip-background-color: #f5f5f5;
24-
--djdt--highlighted-background-color: lightgrey;
24+
--djdt-highlighted-background-color: #ffc;
2525
--djdt-toggle-template-background-color: #bbb;
2626

2727
--djdt-sql-font-color: #333;
@@ -30,20 +30,23 @@
3030
--djdt-stack-span-color: black;
3131
--djdt-template-highlight-color: #333;
3232

33-
--djdt-table-border-color: #ccc;
34-
--djdt-button-border-color: var(--djdt-table-border-color);
33+
--djdt-table-header-color: #666;
34+
--djdt-table-header-background-color: #f8f8f8;
35+
--djdt-table-border-color: #e8e8e8;
36+
--djdt-button-border-color: #ccc;
37+
--djdt-button-hover-border-color: #666;
3538
--djdt-pre-border-color: var(--djdt-table-border-color);
3639
--djdt-raw-border-color: var(--djdt-table-border-color);
3740
}
3841

3942
#djDebug[data-theme="dark"] {
4043
--djdt-font-color: #f8f8f2;
41-
--djdt-background-color: #1e293bff;
42-
--djdt-panel-content-background-color: #0f1729ff;
44+
--djdt-background-color: #121212;
45+
--djdt-panel-content-background-color: #121212;
4346
--djdt-panel-content-table-background-color: var(--djdt-background-color);
44-
--djdt-panel-title-background-color: #242432;
47+
--djdt-panel-title-background-color: #417690;
4548
--djdt-djdt-panel-content-table-strip-background-color: #324154ff;
46-
--djdt--highlighted-background-color: #2c2a7dff;
49+
--djdt-highlighted-background-color: #00363a;
4750
--djdt-toggle-template-background-color: #282755;
4851

4952
--djdt-sql-font-color: var(--djdt-font-color);
@@ -52,7 +55,9 @@
5255
--djdt-stack-span-color: #7c8fa4;
5356
--djdt-template-highlight-color: var(--djdt-stack-span-color);
5457

55-
--djdt-table-border-color: #324154ff;
58+
--djdt-table-header-color: #f8f8f8;
59+
--djdt-table-header-background-color: #212121;
60+
--djdt-table-border-color: #353535;
5661
--djdt-button-border-color: var(--djdt-table-border-color);
5762
--djdt-pre-border-color: var(--djdt-table-border-color);
5863
--djdt-raw-border-color: var(--djdt-table-border-color);
@@ -147,33 +152,26 @@
147152
}
148153

149154
#djDebug button {
150-
background-color: #eee;
151-
background-image: linear-gradient(to bottom, #eee, #cccccc);
155+
background-color: var(--djdt-background-color);
152156
border: 1px solid var(--djdt-button-border-color);
153-
border-bottom: 1px solid #bbb;
154-
border-radius: 3px;
155-
color: #333;
157+
border-radius: 4px;
158+
color: var(--djdt-font-color);
156159
line-height: 1;
157-
padding: 0 8px;
160+
padding: 4px 8px;
158161
text-align: center;
159-
text-shadow: 0 1px 0 #eee;
162+
}
163+
164+
#djDebug[data-theme="light"] button {
165+
box-shadow: 0 -15px 20px -10px rgba(0, 0, 0, 0.15) inset;
160166
}
161167

162168
#djDebug button:hover {
163-
background-color: #ddd;
164-
background-image: linear-gradient(to bottom, #ddd, #bbb);
165-
border-color: #bbb;
166-
border-bottom-color: #999;
169+
border-color: var(--djdt-button-hover-border-color);
167170
cursor: pointer;
168-
text-shadow: 0 1px 0 #ddd;
169171
}
170172

171173
#djDebug button:active {
172174
border: 1px solid #aaa;
173-
border-bottom: 1px solid #888;
174-
box-shadow:
175-
inset 0 0 5px 2px #aaa,
176-
0 1px 0 0 #eee;
177175
}
178176

179177
#djDebug #djDebugToolbar {
@@ -318,11 +316,15 @@
318316
#djDebug pre {
319317
white-space: pre-wrap;
320318
color: var(--djdt-pre-text-color);
321-
border: 1px solid var(--djdt-pre-border-color);
319+
/* border: 1px solid var(--djdt-pre-border-color);
322320
border-collapse: collapse;
323-
background-color: var(--djdt-background-color);
324-
padding: 2px 3px;
325-
margin-bottom: 3px;
321+
background-color: var(--djdt-background-color); */
322+
/* padding: 2px 3px;
323+
margin-bottom: 3px; */
324+
}
325+
326+
#djDebug pre span {
327+
font-family: var(--djdt-font-family-monospace);
326328
}
327329

328330
#djDebug .djdt-panelContent {
@@ -337,14 +339,11 @@
337339
z-index: 100000000;
338340
}
339341

340-
#djDebug .djdt-panelContent > div {
341-
border-bottom: 1px solid #ddd;
342-
}
343-
344342
#djDebug .djDebugPanelTitle {
345343
position: absolute;
346344
background-color: var(--djdt-panel-title-background-color);
347-
color: #666;
345+
border-bottom: 1px solid var(--djdt-table-border-color);
346+
color: #f5dd5d;
348347
padding-left: 20px;
349348
top: 0;
350349
right: 0;
@@ -390,7 +389,7 @@
390389
height: 100%;
391390
overflow: auto;
392391
display: block;
393-
padding: 0 10px 0 0;
392+
padding: 10px 10px 10px 0;
394393
}
395394

396395
#djDebug h3 {
@@ -401,7 +400,7 @@
401400

402401
#djDebug h4 {
403402
font-size: 20px;
404-
font-weight: bold;
403+
font-weight: 400;
405404
margin-top: 0.8em;
406405
}
407406

@@ -417,33 +416,59 @@
417416
#djDebug .djdt-panelContent tbody > tr:nth-child(odd):not(.djdt-highlighted) {
418417
background-color: var(--djdt-panel-content-table-strip-background-color);
419418
}
420-
#djDebug .djdt-panelContent tbody td,
421-
#djDebug .djdt-panelContent tbody th {
419+
#djDebug .djdt-panelContent th {
420+
border-top: 1px solid var(--djdt-table-border-color);
421+
}
422+
#djDebug .djdt-panelContent td,
423+
#djDebug .djdt-panelContent th {
422424
vertical-align: top;
423-
padding: 2px 3px;
425+
padding: 8px 10px;
426+
border-bottom: 1px solid var(--djdt-table-border-color);
424427
}
425428
#djDebug .djdt-panelContent tbody td.djdt-time {
426429
text-align: center;
427430
}
428431

429432
#djDebug .djdt-panelContent thead th {
430-
padding: 1px 6px 1px 3px;
433+
color: var(--djdt-table-header-color);
434+
background-color: var(--djdt-table-header-background-color);
431435
text-align: left;
436+
text-transform: uppercase;
432437
font-weight: bold;
433-
font-size: 14px;
438+
font-size: 11px;
434439
white-space: nowrap;
440+
padding: 8px 10px;
435441
}
436442
#djDebug .djdt-panelContent tbody th {
437443
width: 12em;
438444
text-align: right;
439-
color: #666;
440-
padding-right: 0.5em;
445+
color: #d0d0d0;
446+
padding: 8px 10px;
441447
}
442448

443449
#djDebug .djTemplateContext {
444450
background-color: var(--djdt-background-color);
445451
}
446452

453+
#djDebug .djdt-badge {
454+
padding: 2px 4px;
455+
border-radius: 3px;
456+
font-size: 12px;
457+
text-transform: uppercase;
458+
color: var(--djdt-font-color);
459+
background-color: var(--djdt-background-color);
460+
}
461+
462+
#djDebug .djdt-badge.djdt-badge-error {
463+
color: #fff;
464+
background-color: #e7000b;
465+
}
466+
467+
#djDebug .djdt-badge.djdt-badge-success {
468+
color: #fff;
469+
background-color: #05A53F;
470+
}
471+
447472
#djDebug .djdt-panelContent .djDebugClose {
448473
position: absolute;
449474
top: 4px;
@@ -1073,6 +1098,10 @@ To regenerate:
10731098
stroke: #94b24d;
10741099
}
10751100

1101+
#djDebug .djDetailsRow {
1102+
background-color: #f6f6f6;
1103+
}
1104+
10761105
#djDebug .djDebugRowWarning .djdt-time {
10771106
color: red;
10781107
}
@@ -1081,20 +1110,21 @@ To regenerate:
10811110
padding-top: 3px;
10821111
}
10831112
#djDebug .djdt-panelContent table .djdt-actions {
1084-
min-width: 70px;
1113+
min-width: 82px;
10851114
white-space: nowrap;
10861115
}
10871116
#djDebug .djdt-color:after {
10881117
content: "\00a0";
10891118
}
1119+
#djDebug .djToggleRow {
1120+
cursor: pointer;
1121+
}
10901122
#djDebug .djToggleSwitch {
10911123
box-sizing: content-box;
1092-
padding: 0;
1093-
border: 1px solid #999;
1094-
border-radius: 0;
1124+
padding: 3px;
10951125
width: 12px;
1096-
color: #777;
1097-
background: linear-gradient(to bottom, #fff, #dcdcdc);
1126+
color: var(--djdt-font-color);
1127+
background: var(--djdt-background-color);
10981128
}
10991129
#djDebug .djNoToggleSwitch {
11001130
height: 14px;
@@ -1143,7 +1173,7 @@ To regenerate:
11431173
max-height: 100%;
11441174
}
11451175
#djDebug .djdt-highlighted {
1146-
background-color: var(--djdt--highlighted-background-color);
1176+
background-color: var(--djdt-highlighted-background-color);
11471177
}
11481178
#djDebug tr.djdt-highlighted.djdt-profile-row {
11491179
background-color: #ffc;

‎debug_toolbar/static/debug_toolbar/js/toolbar.js‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -109,6 +109,15 @@ const djdt = {
109109
});
110110
});
111111

112+
$$.on(djDebug, "click", ".djToggleRow", function () {
113+
const id = this.dataset.toggleId;
114+
const name = this.dataset.toggleName;
115+
const container = document.getElementById(`${name}_${id}`);
116+
const isSelected = container.classList.contains("djSelected");
117+
container.classList.toggle("djSelected", !isSelected);
118+
container.classList.toggle("djUnselected", isSelected);
119+
});
120+
112121
// Used by the cache, profiling and SQL panels
113122
$$.on(djDebug, "click", ".djToggleSwitch", function () {
114123
const id = this.dataset.toggleId;

‎debug_toolbar/templates/debug_toolbar/panels/cache.html‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,8 @@ <h4>{% translate "Calls" %}</h4>
4040
<table>
4141
<thead>
4242
<tr>
43-
<th colspan="2">{% translate "Time (ms)" %}</th>
43+
<th></th>
44+
<th>{% translate "Time (ms)" %}</th>
4445
<th>{% translate "Type" %}</th>
4546
<th>{% translate "Arguments" %}</th>
4647
<th>{% translate "Keyword arguments" %}</th>
@@ -59,7 +60,7 @@ <h4>{% translate "Calls" %}</h4>
5960
<td>{{ call.kwargs|escape }}</td>
6061
<td>{{ call.backend }}</td>
6162
</tr>
62-
<tr class="djUnselected djToggleDetails_{{ forloop.counter }}" id="cacheDetails_{{ forloop.counter }}">
63+
<tr class="djDetailsRow djUnselected djToggleDetails_{{ forloop.counter }}" id="cacheDetails_{{ forloop.counter }}">
6364
<td colspan="1"></td>
6465
<td colspan="5"><pre class="djdt-stack">{{ call.trace|safe }}</pre></td>
6566
</tr>

‎debug_toolbar/templates/debug_toolbar/panels/history_tr.html‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,12 @@
3939
</div>
4040
</td>
4141
<td>
42-
<p>{{ history_context.history_stats.status_code|escape }}</p>
42+
<p>
43+
{% if history_context.history_stats.status_code >= 400 %}
44+
<span class="djdt-badge djdt-badge-error">{{ history_context.history_stats.status_code|escape }}</span>
45+
{% else %}
46+
<span class="djdt-badge djdt-badge-success">{{ history_context.history_stats.status_code|escape }}</span>
47+
{% endif %}
4348
</td>
4449
<td class="djdt-actions">
4550
<form method="get" action="{% url 'djdt:history_sidebar' %}">

‎debug_toolbar/templates/debug_toolbar/panels/sql.html‎

Lines changed: 4 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -31,19 +31,16 @@
3131
<thead>
3232
<tr>
3333
<th></th>
34-
<th colspan="2">{% translate "Query" %}</th>
34+
<th>{% translate "Query" %}</th>
3535
<th>{% translate "Timeline" %}</th>
3636
<th>{% translate "Time (ms)" %}</th>
3737
<th>{% translate "Action" %}</th>
3838
</tr>
3939
</thead>
4040
<tbody>
4141
{% for query in queries %}
42-
<tr class="{% if query.is_slow %} djDebugRowWarning{% endif %}" id="sqlMain_{{ forloop.counter }}">
42+
<tr class="djToggleRow {% if query.is_slow %} djDebugRowWarning{% endif %}" id="sqlMain_{{ forloop.counter }}" data-toggle-name="sqlDetails" data-toggle-id="{{ forloop.counter }}">
4343
<td><span class="djdt-color" data-djdt-styles="backgroundColor:rgb({{ query.rgb_color|join:', ' }})"></span></td>
44-
<td class="djdt-toggle">
45-
<button type="button" class="djToggleSwitch" data-toggle-name="sqlMain" data-toggle-id="{{ forloop.counter }}">+</button>
46-
</td>
4744
<td>
4845
<div class="djDebugSql">{{ query.sql|safe }}</div>
4946
{% if query.similar_count %}
@@ -89,8 +86,8 @@
8986
</td>
9087
</tr>
9188
<tr class="djUnselected {% if query.is_slow %} djDebugRowWarning{% endif %} djToggleDetails_{{ forloop.counter }}" id="sqlDetails_{{ forloop.counter }}">
92-
<td colspan="2"></td>
93-
<td colspan="4">
89+
<td colspan="1"></td>
90+
<td colspan="5">
9491
<div class="djSQLDetailsDiv">
9592
<p><strong>{% translate "Connection:" %}</strong> {{ query.alias }}</p>
9693
{% if query.iso_level %}

0 commit comments

Comments
 (0)