Update toolbar panel styles

Author: federicobond

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"
+    ])

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;

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;