From 647304ce91ccecf2f148947207213780c5671d60 Mon Sep 17 00:00:00 2001
From: Ben Beecher <Ben@lightmatter.com>
Date: Sun, 16 Jan 2022 20:22:08 -0500
Subject: [PATCH 1/2] Adding a green flash to new rows in the history table on
 refresh

---
 .../static/debug_toolbar/css/toolbar.css      | 12 +++
 .../static/debug_toolbar/js/history.js        | 86 ++++++++++++++++---
 docs/changes.rst                              |  1 +
 3 files changed, 87 insertions(+), 12 deletions(-)

diff --git a/debug_toolbar/static/debug_toolbar/css/toolbar.css b/debug_toolbar/static/debug_toolbar/css/toolbar.css
index 13fbbed0a..31f4e9ce1 100644
--- a/debug_toolbar/static/debug_toolbar/css/toolbar.css
+++ b/debug_toolbar/static/debug_toolbar/css/toolbar.css
@@ -607,6 +607,18 @@
 #djDebug .djdt-highlighted {
     background-color: lightgrey;
 }
+@keyframes flash-new {
+    from {
+        background-color: green;
+    }
+    to {
+        background-color: inherit;
+    }
+}
+#djDebug .flash-new {
+    animation: flash-new 1s;
+}
+
 .djdt-hidden {
     display: none;
 }
diff --git a/debug_toolbar/static/debug_toolbar/js/history.js b/debug_toolbar/static/debug_toolbar/js/history.js
index cc14b2e4f..a356c3fcd 100644
--- a/debug_toolbar/static/debug_toolbar/js/history.js
+++ b/debug_toolbar/static/debug_toolbar/js/history.js
@@ -2,6 +2,79 @@ import { $$, ajaxForm } from "./utils.js";
 
 const djDebug = document.getElementById("djDebug");
 
+function difference(setA, setB) {
+    const _difference = new Set(setA);
+    for (const elem of setB) {
+        _difference.delete(elem);
+    }
+    return _difference;
+}
+
+/**
+ * Create an array of dataset properties from a NodeList.
+ * @param nodes
+ * @param key
+ * @returns {[]}
+ */
+function pluckData(nodes, key) {
+    const data = [];
+    nodes.forEach(function (obj) {
+        data.push(obj.dataset[key]);
+    });
+    return data;
+}
+
+function refreshHistory() {
+    const formTarget = djDebug.querySelector(".refreshHistory");
+    const container = document.getElementById("djdtHistoryRequests");
+    const oldIds = new Set(
+        pluckData(container.querySelectorAll("tr[data-store-id]"), "storeId")
+    );
+
+    return ajaxForm(formTarget)
+        .then(function (data) {
+            // Remove existing rows first then re-populate with new data
+            container
+                .querySelectorAll("tr[data-store-id]")
+                .forEach(function (node) {
+                    node.remove();
+                });
+            data.requests.forEach(function (request) {
+                container.innerHTML = request.content + container.innerHTML;
+            });
+        })
+        .then(function () {
+            const allIds = new Set(
+                pluckData(
+                    container.querySelectorAll("tr[data-store-id]"),
+                    "storeId"
+                )
+            );
+            const newIds = difference(allIds, oldIds);
+            const lastRequestId = newIds.values().next().value;
+            return {
+                allIds,
+                newIds,
+                lastRequestId,
+            };
+        })
+        .then(function (refreshInfo) {
+            refreshInfo.newIds.forEach(function (newId) {
+                const row = container.querySelector(
+                    `tr[data-store-id="${newId}"]`
+                );
+                row.classList.add("flash-new");
+            });
+            setTimeout(() => {
+                container
+                    .querySelectorAll("tr[data-store-id]")
+                    .forEach((row) => {
+                        row.classList.remove("flash-new");
+                    });
+            }, 2000);
+        });
+}
+
 $$.on(djDebug, "click", ".switchHistory", function (event) {
     event.preventDefault();
     const newStoreId = this.dataset.storeId;
@@ -36,16 +109,5 @@ $$.on(djDebug, "click", ".switchHistory", function (event) {
 
 $$.on(djDebug, "click", ".refreshHistory", function (event) {
     event.preventDefault();
-    const container = document.getElementById("djdtHistoryRequests");
-    ajaxForm(this).then(function (data) {
-        // Remove existing rows first then re-populate with new data
-        container
-            .querySelectorAll("tr[data-store-id]")
-            .forEach(function (node) {
-                node.remove();
-            });
-        data.requests.forEach(function (request) {
-            container.innerHTML = request.content + container.innerHTML;
-        });
-    });
+    refreshHistory();
 });
diff --git a/docs/changes.rst b/docs/changes.rst
index 3be8dad78..83bfb1d78 100644
--- a/docs/changes.rst
+++ b/docs/changes.rst
@@ -12,6 +12,7 @@ Next version
   django-debug-toolbar can now use Django’s test settings tools, like
   ``@override_settings``, to reconfigure the toolbar during tests.
 * Optimize rendering of SQL panel, saving about 30% of its run time.
+* New records in history panel will flash green.
 
 3.2.4 (2021-12-15)
 ------------------

From eaea56ce25e45078a195977700fd1872dbabe924 Mon Sep 17 00:00:00 2001
From: Ben Beecher <120373+gone@users.noreply.github.com>
Date: Sat, 19 Feb 2022 12:15:46 -0500
Subject: [PATCH 2/2] Update debug_toolbar/static/debug_toolbar/css/toolbar.css

Co-authored-by: Matthias Kestenholz <mk@feinheit.ch>
---
 debug_toolbar/static/debug_toolbar/css/toolbar.css | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/debug_toolbar/static/debug_toolbar/css/toolbar.css b/debug_toolbar/static/debug_toolbar/css/toolbar.css
index 31f4e9ce1..2d36049f1 100644
--- a/debug_toolbar/static/debug_toolbar/css/toolbar.css
+++ b/debug_toolbar/static/debug_toolbar/css/toolbar.css
@@ -607,7 +607,7 @@
 #djDebug .djdt-highlighted {
     background-color: lightgrey;
 }
-@keyframes flash-new {
+@keyframes djdt-flash-new {
     from {
         background-color: green;
     }
@@ -616,7 +616,7 @@
     }
 }
 #djDebug .flash-new {
-    animation: flash-new 1s;
+    animation: djdt-flash-new 1s;
 }
 
 .djdt-hidden {