Skip to content

Navigation Menu

Sign in

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Appearance settings

Commit e4e591b

Browse filesBrowse files
jeffreymbnicolas-grekas
jeffreymb
authored and
nicolas-grekas
committed
[WebProfilerBundle] Make WDT follow ajax requests if header set
1 parent 5acc51f commit e4e591b
Copy full SHA for e4e591b

File tree

3 files changed

+141
-110
lines changed
Filter options

3 files changed

+141
-110
lines changed

‎src/Symfony/Bundle/WebProfilerBundle/CHANGELOG.md

Copy file name to clipboardExpand all lines: src/Symfony/Bundle/WebProfilerBundle/CHANGELOG.md
+2
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,8 @@ CHANGELOG
55
-----
66

77
* added information about orphaned events
8+
* made the toolbar auto-update with info from ajax reponses when they set the
9+
`Symfony-Debug-Toolbar-Replace header` to `1`
810

911
4.0.0
1012
-----

‎src/Symfony/Bundle/WebProfilerBundle/Resources/views/Profiler/base_js.html.twig

Copy file name to clipboardExpand all lines: src/Symfony/Bundle/WebProfilerBundle/Resources/views/Profiler/base_js.html.twig
+138
Original file line numberDiff line numberDiff line change
@@ -83,6 +83,10 @@
8383
if (ret = allHeaders.match(/^x-debug-token-link:\s+(.*)$/im)) {
8484
stackElement.profilerUrl = ret[1];
8585
}
86+
if (ret = allHeaders.match(/^Symfony-Debug-Toolbar-Replace:\s+(.*)$/im)) {
87+
stackElement.toolbarReplaceFinished = false;
88+
stackElement.toolbarReplace = '1' === ret[1];
89+
}
8690
};
8791
8892
var successStreak = 4;
@@ -179,6 +183,19 @@
179183
if (!request.DOMNode) {
180184
return;
181185
}
186+
187+
if (request.toolbarReplace && !request.toolbarReplaceFinished && request.profile) {
188+
/* Flag as complete because finishAjaxRequest can be called multiple times. */
189+
request.toolbarReplaceFinished = true;
190+
/* Search up through the DOM to find the toolbar's container ID. */
191+
for (var elem = request.DOMNode; elem && elem !== document; elem = elem.parentNode) {
192+
if (elem.id.match(/^sfwdt/)) {
193+
Sfjs.loadToolbar(elem.id.replace(/^sfwdt/, ''), request.profile);
194+
break;
195+
}
196+
}
197+
}
198+
182199
pendingRequests--;
183200
var row = request.DOMNode;
184201
/* Unpack the children from the row */
@@ -279,6 +296,8 @@
279296
stackElement.statusCode = r.status;
280297
stackElement.profile = r.headers.get('x-debug-token');
281298
stackElement.profilerUrl = r.headers.get('x-debug-token-link');
299+
stackElement.toolbarReplaceFinished = false;
300+
stackElement.toolbarReplace = '1' === r.headers.get('Symfony-Debug-Toolbar-Replace');
282301
finishAjaxRequest(idx);
283302
}, function (e){
284303
stackElement.error = true;
@@ -366,12 +385,15 @@
366385
el.innerHTML = xhr.responseText;
367386
el.setAttribute('data-sfurl', url);
368387
removeClass(el, 'loading');
388+
var pending = pendingRequests;
369389
for (var i = 0; i < requestStack.length; i++) {
370390
startAjaxRequest(i);
371391
if (requestStack[i].duration) {
372392
finishAjaxRequest(i);
373393
}
374394
}
395+
/* Revert the pending state in case there was a start called without a finish above. */
396+
pendingRequests = pending;
375397
(onSuccess || noop)(xhr, el);
376398
},
377399
function(xhr) { (onError || noop)(xhr, el); },
@@ -383,6 +405,122 @@
383405
return this;
384406
},
385407
408+
loadToolbar: function(token, newToken) {
409+
newToken = (newToken || token);
410+
this.load(
411+
'sfwdt' + token,
412+
'{{ path("_wdt", { "token": "xxxxxx" }) }}'.replace(/xxxxxx/, newToken),
413+
function(xhr, el) {
414+
415+
/* Evaluate embedded scripts inside the toolbar */
416+
var i, scripts = [].slice.call(el.querySelectorAll('script'));
417+
418+
for (i = 0; i < scripts.length; ++i) {
419+
eval(scripts[i].firstChild.nodeValue);
420+
}
421+
422+
el.style.display = -1 !== xhr.responseText.indexOf('sf-toolbarreset') ? 'block' : 'none';
423+
424+
if (el.style.display == 'none') {
425+
return;
426+
}
427+
428+
if (getPreference('toolbar/displayState') == 'none') {
429+
document.getElementById('sfToolbarMainContent-' + newToken).style.display = 'none';
430+
document.getElementById('sfToolbarClearer-' + newToken).style.display = 'none';
431+
document.getElementById('sfMiniToolbar-' + newToken).style.display = 'block';
432+
} else {
433+
document.getElementById('sfToolbarMainContent-' + newToken).style.display = 'block';
434+
document.getElementById('sfToolbarClearer-' + newToken).style.display = 'block';
435+
document.getElementById('sfMiniToolbar-' + newToken).style.display = 'none';
436+
}
437+
438+
/* Handle toolbar-info position */
439+
var toolbarBlocks = [].slice.call(el.querySelectorAll('.sf-toolbar-block'));
440+
for (i = 0; i < toolbarBlocks.length; ++i) {
441+
toolbarBlocks[i].onmouseover = function () {
442+
var toolbarInfo = this.querySelectorAll('.sf-toolbar-info')[0];
443+
var pageWidth = document.body.clientWidth;
444+
var elementWidth = toolbarInfo.offsetWidth;
445+
var leftValue = (elementWidth + this.offsetLeft) - pageWidth;
446+
var rightValue = (elementWidth + (pageWidth - this.offsetLeft)) - pageWidth;
447+
448+
/* Reset right and left value, useful on window resize */
449+
toolbarInfo.style.right = '';
450+
toolbarInfo.style.left = '';
451+
452+
if (elementWidth > pageWidth) {
453+
toolbarInfo.style.left = 0;
454+
}
455+
else if (leftValue > 0 && rightValue > 0) {
456+
toolbarInfo.style.right = (rightValue * -1) + 'px';
457+
} else if (leftValue < 0) {
458+
toolbarInfo.style.left = 0;
459+
} else {
460+
toolbarInfo.style.right = '0px';
461+
}
462+
};
463+
}
464+
addEventListener(document.getElementById('sfToolbarHideButton-' + newToken), 'click', function (event) {
465+
event.preventDefault();
466+
467+
var p = this.parentNode;
468+
p.style.display = 'none';
469+
(p.previousElementSibling || p.previousSibling).style.display = 'none';
470+
document.getElementById('sfMiniToolbar-' + newToken).style.display = 'block';
471+
setPreference('toolbar/displayState', 'none');
472+
});
473+
addEventListener(document.getElementById('sfToolbarMiniToggler-' + newToken), 'click', function (event) {
474+
event.preventDefault();
475+
476+
var elem = this.parentNode;
477+
if (elem.style.display == 'none') {
478+
document.getElementById('sfToolbarMainContent-' + newToken).style.display = 'none';
479+
document.getElementById('sfToolbarClearer-' + newToken).style.display = 'none';
480+
elem.style.display = 'block';
481+
} else {
482+
document.getElementById('sfToolbarMainContent-' + newToken).style.display = 'block';
483+
document.getElementById('sfToolbarClearer-' + newToken).style.display = 'block';
484+
elem.style.display = 'none'
485+
}
486+
487+
setPreference('toolbar/displayState', 'block');
488+
});
489+
renderAjaxRequests();
490+
addEventListener(document.querySelector('.sf-toolbar-block-ajax > .sf-toolbar-icon'), 'click', function (event) {
491+
event.preventDefault();
492+
493+
toggleClass(this.parentNode, 'hover');
494+
});
495+
496+
var dumpInfo = document.querySelector('.sf-toolbar-block-dump .sf-toolbar-info');
497+
if (null !== dumpInfo) {
498+
addEventListener(dumpInfo, 'sfbeforedumpcollapse', function () {
499+
dumpInfo.style.minHeight = dumpInfo.getBoundingClientRect().height+'px';
500+
});
501+
addEventListener(dumpInfo, 'mouseleave', function () {
502+
dumpInfo.style.minHeight = '';
503+
});
504+
}
505+
},
506+
function(xhr) {
507+
if (xhr.status !== 0) {
508+
var sfwdt = document.getElementById('sfwdt' + token);
509+
sfwdt.innerHTML = '\
510+
<div class="sf-toolbarreset">\
511+
<div class="sf-toolbar-icon"><svg width="26" height="28" xmlns="http://www.w3.org/2000/svg" version="1.1" x="0px" y="0px" viewBox="0 0 26 28" enable-background="new 0 0 26 28" xml:space="preserve"><path fill="#FFFFFF" d="M13 0C5.8 0 0 5.8 0 13c0 7.2 5.8 13 13 13c7.2 0 13-5.8 13-13C26 5.8 20.2 0 13 0z M20 7.5 c-0.6 0-1-0.3-1-0.9c0-0.2 0-0.4 0.2-0.6c0.1-0.3 0.2-0.3 0.2-0.4c0-0.3-0.5-0.4-0.7-0.4c-2 0.1-2.5 2.7-2.9 4.8l-0.2 1.1 c1.1 0.2 1.9 0 2.4-0.3c0.6-0.4-0.2-0.8-0.1-1.3C18 9.2 18.4 9 18.7 8.9c0.5 0 0.8 0.5 0.8 1c0 0.8-1.1 2-3.3 1.9 c-0.3 0-0.5 0-0.7-0.1L15 14.1c-0.4 1.7-0.9 4.1-2.6 6.2c-1.5 1.8-3.1 2.1-3.8 2.1c-1.3 0-2.1-0.6-2.2-1.6c0-0.9 0.8-1.4 1.3-1.4 c0.7 0 1.2 0.5 1.2 1.1c0 0.5-0.2 0.6-0.4 0.7c-0.1 0.1-0.3 0.2-0.3 0.4c0 0.1 0.1 0.3 0.4 0.3c0.5 0 0.9-0.3 1.2-0.5 c1.3-1 1.7-2.9 2.4-6.2l0.1-0.8c0.2-1.1 0.5-2.3 0.8-3.5c-0.9-0.7-1.4-1.5-2.6-1.8c-0.8-0.2-1.3 0-1.7 0.4C8.4 10 8.6 10.7 9 11.1 l0.7 0.7c0.8 0.9 1.3 1.7 1.1 2.7c-0.3 1.6-2.1 2.8-4.3 2.1c-1.9-0.6-2.2-1.9-2-2.7c0.2-0.6 0.7-0.8 1.2-0.6 c0.5 0.2 0.7 0.8 0.6 1.3c0 0.1 0 0.1-0.1 0.3C6 15 5.9 15.2 5.9 15.3c-0.1 0.4 0.4 0.7 0.8 0.8c0.8 0.3 1.7-0.2 1.9-0.9 c0.2-0.6-0.2-1.1-0.4-1.2l-0.8-0.9c-0.4-0.4-1.2-1.5-0.8-2.8c0.2-0.5 0.5-1 0.9-1.4c1-0.7 2-0.8 3-0.6c1.3 0.4 1.9 1.2 2.8 1.9 c0.5-1.3 1.1-2.6 2-3.8c0.9-1 2-1.7 3.3-1.8C20 4.8 21 5.4 21 6.3C21 6.7 20.8 7.5 20 7.5z"/></svg></div>\
512+
An error occurred while loading the web debug toolbar. <a href="{{ path("_profiler_home") }}' + newToken + '>Open the web profiler.</a>\
513+
</div>\
514+
';
515+
sfwdt.setAttribute('class', 'sf-toolbar sf-error-toolbar');
516+
}
517+
},
518+
{ maxTries: 5 }
519+
);
520+
521+
return this;
522+
},
523+
386524
toggle: function(selector, elOn, elOff) {
387525
var tmp = elOn.style.display,
388526
el = document.getElementById(selector);

‎src/Symfony/Bundle/WebProfilerBundle/Resources/views/Profiler/toolbar_js.html.twig

Copy file name to clipboardExpand all lines: src/Symfony/Bundle/WebProfilerBundle/Resources/views/Profiler/toolbar_js.html.twig
+1-110
Original file line numberDiff line numberDiff line change
@@ -5,115 +5,6 @@
55
</style>
66
<script{% if csp_script_nonce %} nonce="{{ csp_script_nonce }}"{% endif %}>/*<![CDATA[*/
77
(function () {
8-
Sfjs.load(
9-
'sfwdt{{ token }}',
10-
'{{ path("_wdt", { "token": token }) }}',
11-
function(xhr, el) {
12-
13-
/* Evaluate embedded scripts inside the toolbar */
14-
var i, scripts = [].slice.call(el.querySelectorAll('script'));
15-
16-
for (i = 0; i < scripts.length; ++i) {
17-
eval(scripts[i].firstChild.nodeValue);
18-
}
19-
20-
el.style.display = -1 !== xhr.responseText.indexOf('sf-toolbarreset') ? 'block' : 'none';
21-
22-
if (el.style.display == 'none') {
23-
return;
24-
}
25-
26-
if (Sfjs.getPreference('toolbar/displayState') == 'none') {
27-
document.getElementById('sfToolbarMainContent-{{ token }}').style.display = 'none';
28-
document.getElementById('sfToolbarClearer-{{ token }}').style.display = 'none';
29-
document.getElementById('sfMiniToolbar-{{ token }}').style.display = 'block';
30-
} else {
31-
document.getElementById('sfToolbarMainContent-{{ token }}').style.display = 'block';
32-
document.getElementById('sfToolbarClearer-{{ token }}').style.display = 'block';
33-
document.getElementById('sfMiniToolbar-{{ token }}').style.display = 'none';
34-
}
35-
36-
/* Handle toolbar-info position */
37-
var toolbarBlocks = [].slice.call(el.querySelectorAll('.sf-toolbar-block'));
38-
for (i = 0; i < toolbarBlocks.length; ++i) {
39-
toolbarBlocks[i].onmouseover = function () {
40-
var toolbarInfo = this.querySelectorAll('.sf-toolbar-info')[0];
41-
var pageWidth = document.body.clientWidth;
42-
var elementWidth = toolbarInfo.offsetWidth;
43-
var leftValue = (elementWidth + this.offsetLeft) - pageWidth;
44-
var rightValue = (elementWidth + (pageWidth - this.offsetLeft)) - pageWidth;
45-
46-
/* Reset right and left value, useful on window resize */
47-
toolbarInfo.style.right = '';
48-
toolbarInfo.style.left = '';
49-
50-
if (elementWidth > pageWidth) {
51-
toolbarInfo.style.left = 0;
52-
}
53-
else if (leftValue > 0 && rightValue > 0) {
54-
toolbarInfo.style.right = (rightValue * -1) + 'px';
55-
} else if (leftValue < 0) {
56-
toolbarInfo.style.left = 0;
57-
} else {
58-
toolbarInfo.style.right = '0px';
59-
}
60-
};
61-
}
62-
Sfjs.addEventListener(document.getElementById('sfToolbarHideButton-{{ token }}'), 'click', function (event) {
63-
event.preventDefault();
64-
65-
var p = this.parentNode;
66-
p.style.display = 'none';
67-
(p.previousElementSibling || p.previousSibling).style.display = 'none';
68-
document.getElementById('sfMiniToolbar-{{ token }}').style.display = 'block';
69-
Sfjs.setPreference('toolbar/displayState', 'none');
70-
});
71-
Sfjs.addEventListener(document.getElementById('sfToolbarMiniToggler-{{ token }}'), 'click', function (event) {
72-
event.preventDefault();
73-
74-
var elem = this.parentNode;
75-
if (elem.style.display == 'none') {
76-
document.getElementById('sfToolbarMainContent-{{ token }}').style.display = 'none';
77-
document.getElementById('sfToolbarClearer-{{ token }}').style.display = 'none';
78-
elem.style.display = 'block';
79-
} else {
80-
document.getElementById('sfToolbarMainContent-{{ token }}').style.display = 'block';
81-
document.getElementById('sfToolbarClearer-{{ token }}').style.display = 'block';
82-
elem.style.display = 'none'
83-
}
84-
85-
Sfjs.setPreference('toolbar/displayState', 'block');
86-
});
87-
Sfjs.renderAjaxRequests();
88-
Sfjs.addEventListener(document.querySelector('.sf-toolbar-block-ajax > .sf-toolbar-icon'), 'click', function (event) {
89-
event.preventDefault();
90-
91-
Sfjs.toggleClass(this.parentNode, 'hover');
92-
});
93-
94-
var dumpInfo = document.querySelector('.sf-toolbar-block-dump .sf-toolbar-info');
95-
if (null !== dumpInfo) {
96-
Sfjs.addEventListener(dumpInfo, 'sfbeforedumpcollapse', function () {
97-
dumpInfo.style.minHeight = dumpInfo.getBoundingClientRect().height+'px';
98-
});
99-
Sfjs.addEventListener(dumpInfo, 'mouseleave', function () {
100-
dumpInfo.style.minHeight = '';
101-
});
102-
}
103-
},
104-
function(xhr) {
105-
if (xhr.status !== 0) {
106-
var sfwdt = document.getElementById('sfwdt{{ token }}');
107-
sfwdt.innerHTML = '\
108-
<div class="sf-toolbarreset">\
109-
<div class="sf-toolbar-icon"><svg width="26" height="28" xmlns="http://www.w3.org/2000/svg" version="1.1" x="0px" y="0px" viewBox="0 0 26 28" enable-background="new 0 0 26 28" xml:space="preserve"><path fill="#FFFFFF" d="M13 0C5.8 0 0 5.8 0 13c0 7.2 5.8 13 13 13c7.2 0 13-5.8 13-13C26 5.8 20.2 0 13 0z M20 7.5 c-0.6 0-1-0.3-1-0.9c0-0.2 0-0.4 0.2-0.6c0.1-0.3 0.2-0.3 0.2-0.4c0-0.3-0.5-0.4-0.7-0.4c-2 0.1-2.5 2.7-2.9 4.8l-0.2 1.1 c1.1 0.2 1.9 0 2.4-0.3c0.6-0.4-0.2-0.8-0.1-1.3C18 9.2 18.4 9 18.7 8.9c0.5 0 0.8 0.5 0.8 1c0 0.8-1.1 2-3.3 1.9 c-0.3 0-0.5 0-0.7-0.1L15 14.1c-0.4 1.7-0.9 4.1-2.6 6.2c-1.5 1.8-3.1 2.1-3.8 2.1c-1.3 0-2.1-0.6-2.2-1.6c0-0.9 0.8-1.4 1.3-1.4 c0.7 0 1.2 0.5 1.2 1.1c0 0.5-0.2 0.6-0.4 0.7c-0.1 0.1-0.3 0.2-0.3 0.4c0 0.1 0.1 0.3 0.4 0.3c0.5 0 0.9-0.3 1.2-0.5 c1.3-1 1.7-2.9 2.4-6.2l0.1-0.8c0.2-1.1 0.5-2.3 0.8-3.5c-0.9-0.7-1.4-1.5-2.6-1.8c-0.8-0.2-1.3 0-1.7 0.4C8.4 10 8.6 10.7 9 11.1 l0.7 0.7c0.8 0.9 1.3 1.7 1.1 2.7c-0.3 1.6-2.1 2.8-4.3 2.1c-1.9-0.6-2.2-1.9-2-2.7c0.2-0.6 0.7-0.8 1.2-0.6 c0.5 0.2 0.7 0.8 0.6 1.3c0 0.1 0 0.1-0.1 0.3C6 15 5.9 15.2 5.9 15.3c-0.1 0.4 0.4 0.7 0.8 0.8c0.8 0.3 1.7-0.2 1.9-0.9 c0.2-0.6-0.2-1.1-0.4-1.2l-0.8-0.9c-0.4-0.4-1.2-1.5-0.8-2.8c0.2-0.5 0.5-1 0.9-1.4c1-0.7 2-0.8 3-0.6c1.3 0.4 1.9 1.2 2.8 1.9 c0.5-1.3 1.1-2.6 2-3.8c0.9-1 2-1.7 3.3-1.8C20 4.8 21 5.4 21 6.3C21 6.7 20.8 7.5 20 7.5z"/></svg></div>\
110-
An error occurred while loading the web debug toolbar. <a href="{{ path("_profiler", { "token": token }) }}">Open the web profiler.</a>\
111-
</div>\
112-
';
113-
sfwdt.setAttribute('class', 'sf-toolbar sf-error-toolbar');
114-
}
115-
},
116-
{ maxTries: 5 }
117-
);
8+
Sfjs.loadToolbar('{{ token }}');
1189
})();
11910
/*]]>*/</script>

0 commit comments

Comments
0 (0)
Morty Proxy This is a proxified and sanitized view of the page, visit original site.