Skip to content

Commit 9725f9a

Browse files
gonegone
committed
Adding initial autorefresh mode
1 parent fd786be commit 9725f9a

File tree

5 files changed

+135
-67
lines changed

5 files changed

+135
-67
lines changed

‎debug_toolbar/panels/history/panel.py

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -25,9 +25,16 @@ def process_request(self, request):
2525
response = super().process_request(request)
2626
if not self.toolbar.should_render_panels():
2727
self.toolbar.store()
28-
response["DJ-TOOLBAR-URL"] = (
29-
reverse("djdt:render_base") + f"?store_id={self.toolbar.store_id}"
28+
store_id = self.toolbar.store_id
29+
response["DJ-TOOLBAR-BASE-URL"] = (
30+
reverse("djdt:render_base") + f"?store_id={store_id}"
3031
)
32+
sig = SignedDataForm(
33+
initial=HistoryStoreForm(initial={"store_id": store_id}).initial
34+
).initial.get("signed")
35+
response["dj-history-sidebar-url"] = reverse("djdt:history_sidebar")
36+
response["DJ-TOOLBAR-STORE-ID"] = store_id
37+
response["DJ-TOOLBAR-SIGNATURE"] = sig
3138
return response
3239

3340
@property

‎debug_toolbar/panels/history/views.py

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -22,8 +22,6 @@ def history_sidebar(request, verified_data):
2222
# RESULTS_CACHE_SIZE
2323
return JsonResponse(context)
2424
for panel in toolbar.panels:
25-
if not panel.is_historical:
26-
continue
2725
panel_context = {"panel": panel}
2826
context[panel.panel_id] = {
2927
"button": render_to_string(

‎debug_toolbar/static/debug_toolbar/js/history.js

Lines changed: 7 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { $$, ajaxForm, pluckData } from "./utils.js";
1+
import { $$, ajaxForm, pluckData, replaceToolbarState } from "./utils.js";
22

33
const djDebug = document.getElementById("djDebug");
44

@@ -10,26 +10,6 @@ function difference(setA, setB) {
1010
return _difference;
1111
}
1212

13-
function replaceToolbarState(newStoreId, data) {
14-
djDebug.setAttribute("data-store-id", newStoreId);
15-
// Check if response is empty, it could be due to an expired store_id.
16-
if (Object.keys(data).length === 0) {
17-
const container = document.getElementById("djdtHistoryRequests");
18-
container.querySelector(
19-
'button[data-store-id="' + newStoreId + '"]'
20-
).innerHTML = "Switch [EXPIRED]";
21-
} else {
22-
Object.keys(data).forEach(function (panelId) {
23-
const panel = document.getElementById(panelId);
24-
if (panel) {
25-
panel.outerHTML = data[panelId].content;
26-
document.getElementById("djdt-" + panelId).outerHTML =
27-
data[panelId].button;
28-
}
29-
});
30-
}
31-
}
32-
3313
function switchHistory(newStoreId) {
3414
const formTarget = djDebug.querySelector(
3515
".switchHistory[data-store-id='" + newStoreId + "']"
@@ -43,6 +23,12 @@ function switchHistory(newStoreId) {
4323
formTarget.closest("tr").classList.add("djdt-highlighted");
4424

4525
ajaxForm(formTarget).then(function (data) {
26+
if (Object.keys(data).length === 0) {
27+
const container = document.getElementById("djdtHistoryRequests");
28+
container.querySelector(
29+
'button[data-store-id="' + newStoreId + '"]'
30+
).innerHTML = "Switch [EXPIRED]";
31+
}
4632
replaceToolbarState(newStoreId, data);
4733
});
4834
}

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

Lines changed: 75 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,10 @@
1-
import { $$, ajax, controller, resetAbortController } from "./utils.js";
1+
import {
2+
$$,
3+
ajax,
4+
controller,
5+
resetAbortController,
6+
replaceToolbarState,
7+
} from "./utils.js";
28

39
function onKeyDown(event) {
410
if (event.keyCode === 27) {
@@ -8,7 +14,7 @@ function onKeyDown(event) {
814

915
const djdt = {
1016
handleDragged: false,
11-
abort(){
17+
abort() {
1218
controller.abort();
1319
resetAbortController();
1420
},
@@ -146,19 +152,23 @@ const djdt = {
146152
});
147153
});
148154

149-
document
150-
.getElementById("djHideToolBarButton")
151-
.addEventListener("click", function (event) {
155+
document.getElementById("djHideToolBarButton").addEventListener(
156+
"click",
157+
function (event) {
152158
event.preventDefault();
153159
djdt.hide_toolbar();
154-
}, {'signal': controller.signal});
155-
document
156-
.getElementById("djShowToolBarButton")
157-
.addEventListener("click", function () {
160+
},
161+
{ signal: controller.signal }
162+
);
163+
document.getElementById("djShowToolBarButton").addEventListener(
164+
"click",
165+
function () {
158166
if (!djdt.handleDragged) {
159167
djdt.show_toolbar();
160168
}
161-
}, {'signal': controller.signal});
169+
},
170+
{ signal: controller.signal }
171+
);
162172
let startPageY, baseY;
163173
const handle = document.getElementById("djDebugToolbarHandle");
164174
function onHandleMove(event) {
@@ -178,25 +188,31 @@ const djdt = {
178188
djdt.handleDragged = true;
179189
}
180190
}
181-
document
182-
.getElementById("djShowToolBarButton")
183-
.addEventListener("mousedown", function (event) {
191+
document.getElementById("djShowToolBarButton").addEventListener(
192+
"mousedown",
193+
function (event) {
184194
event.preventDefault();
185195
startPageY = event.pageY;
186196
baseY = handle.offsetTop - startPageY;
187197
document.addEventListener("mousemove", onHandleMove);
188-
}, {'signal': controller.signal});
189-
document.addEventListener("mouseup", function (event) {
190-
document.removeEventListener("mousemove", onHandleMove);
191-
if (djdt.handleDragged) {
192-
event.preventDefault();
193-
localStorage.setItem("djdt.top", handle.offsetTop);
194-
requestAnimationFrame(function () {
195-
djdt.handleDragged = false;
196-
});
197-
djdt.ensure_handle_visibility();
198-
}
199-
}, {'signal': controller.signal});
198+
},
199+
{ signal: controller.signal }
200+
);
201+
document.addEventListener(
202+
"mouseup",
203+
function (event) {
204+
document.removeEventListener("mousemove", onHandleMove);
205+
if (djdt.handleDragged) {
206+
event.preventDefault();
207+
localStorage.setItem("djdt.top", handle.offsetTop);
208+
requestAnimationFrame(function () {
209+
djdt.handleDragged = false;
210+
});
211+
djdt.ensure_handle_visibility();
212+
}
213+
},
214+
{ signal: controller.signal }
215+
);
200216
const show =
201217
localStorage.getItem("djdt.show") || djDebug.dataset.defaultShow;
202218
if (show === "true") {
@@ -232,7 +248,9 @@ const djdt = {
232248
const handle = document.getElementById("djDebugToolbarHandle");
233249
$$.show(handle);
234250
djdt.ensure_handle_visibility();
235-
window.addEventListener("resize", djdt.ensure_handle_visibility, {'signal': controller.signal});
251+
window.addEventListener("resize", djdt.ensure_handle_visibility, {
252+
signal: controller.signal,
253+
});
236254
document.removeEventListener("keydown", onKeyDown);
237255

238256
localStorage.setItem("djdt.show", "false");
@@ -251,7 +269,9 @@ const djdt = {
251269
}
252270
},
253271
show_toolbar() {
254-
document.addEventListener("keydown", onKeyDown, {'signal': controller.signal});
272+
document.addEventListener("keydown", onKeyDown, {
273+
signal: controller.signal,
274+
});
255275
$$.hide(document.getElementById("djDebugToolbarHandle"));
256276
$$.show(document.getElementById("djDebugToolbar"));
257277
localStorage.setItem("djdt.show", "true");
@@ -299,6 +319,31 @@ const djdt = {
299319
},
300320
},
301321
};
322+
323+
const origOpen = XMLHttpRequest.prototype.open;
324+
XMLHttpRequest.prototype.open = function () {
325+
this.addEventListener("load", function () {
326+
if (
327+
this.responseURL !== "" &&
328+
this.responseURL.indexOf("__debug__") === -1
329+
) {
330+
let signed = this.getResponseHeader("dj-toolbar-signature");
331+
const store_id = this.getResponseHeader("dj-toolbar-store-id");
332+
const history_sidebar_url = this.getResponseHeader(
333+
"dj-history-sidebar-url"
334+
);
335+
if (signed !== null) {
336+
signed = encodeURIComponent(signed);
337+
const dest = `${history_sidebar_url}?signed=${signed}`;
338+
ajax(dest).then(function (data) {
339+
replaceToolbarState(store_id, data);
340+
});
341+
}
342+
}
343+
});
344+
origOpen.apply(this, arguments);
345+
};
346+
302347
window.djdt = {
303348
show_toolbar: djdt.show_toolbar,
304349
hide_toolbar: djdt.hide_toolbar,
@@ -311,5 +356,7 @@ window.djdt = {
311356
if (document.readyState !== "loading") {
312357
djdt.init();
313358
} else {
314-
document.addEventListener("DOMContentLoaded", djdt.init, {'signal': controller.signal});
359+
document.addEventListener("DOMContentLoaded", djdt.init, {
360+
signal: controller.signal,
361+
});
315362
}

‎debug_toolbar/static/debug_toolbar/js/utils.js

Lines changed: 44 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,16 @@ let controller = null;
22

33
const $$ = {
44
on(root, eventName, selector, fn) {
5-
root.addEventListener(eventName, function (event) {
6-
const target = event.target.closest(selector);
7-
if (root.contains(target)) {
8-
fn.call(target, event);
9-
}
10-
}, {'signal': controller.signal});
5+
root.addEventListener(
6+
eventName,
7+
function (event) {
8+
const target = event.target.closest(selector);
9+
if (root.contains(target)) {
10+
fn.call(target, event);
11+
}
12+
},
13+
{ signal: controller.signal }
14+
);
1115
},
1216
onPanelRender(root, panelId, fn) {
1317
/*
@@ -18,11 +22,15 @@ const $$ = {
1822
panelId: The Id of the panel.
1923
fn: A function to execute when the event is triggered.
2024
*/
21-
root.addEventListener("djdt.panel.render", function (event) {
22-
if (event.detail.panelId === panelId) {
23-
fn.call(event);
24-
}
25-
}, {'signal': controller.signal});
25+
root.addEventListener(
26+
"djdt.panel.render",
27+
function (event) {
28+
if (event.detail.panelId === panelId) {
29+
fn.call(event);
30+
}
31+
},
32+
{ signal: controller.signal }
33+
);
2634
},
2735
show(element) {
2836
element.classList.remove("djdt-hidden");
@@ -71,9 +79,9 @@ const $$ = {
7179
},
7280
};
7381

74-
function resetAbortController(){
82+
function resetAbortController() {
7583
controller = new AbortController();
76-
};
84+
}
7785
resetAbortController();
7886

7987
function ajax(url, init) {
@@ -119,4 +127,26 @@ function ajaxForm(element) {
119127
return ajax(url, ajaxData);
120128
}
121129

122-
export { $$, ajax, ajaxForm, controller, resetAbortController, pluckData };
130+
function replaceToolbarState(newStoreId, data) {
131+
const djDebug = document.getElementById("djDebug");
132+
djDebug.setAttribute("data-store-id", newStoreId);
133+
// Check if response is empty, it could be due to an expired store_id.
134+
Object.keys(data).forEach(function (panelId) {
135+
const panel = document.getElementById(panelId);
136+
if (panel) {
137+
panel.outerHTML = data[panelId].content;
138+
document.getElementById("djdt-" + panelId).outerHTML =
139+
data[panelId].button;
140+
}
141+
});
142+
}
143+
144+
export {
145+
$$,
146+
ajax,
147+
ajaxForm,
148+
controller,
149+
resetAbortController,
150+
pluckData,
151+
replaceToolbarState,
152+
};

0 commit comments

Comments
 (0)