Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Commit beb3fe1

Browse files
fabpotfabpot
committed
bug #24281 [TwigBundle] Remove profiler related scripting (ro0NL, javiereguiluz)
This PR was merged into the 3.3 branch. Discussion ---------- [TwigBundle] Remove profiler related scripting | Q | A | ------------- | --- | Branch? | 3.3 | Bug fix? | yes | New feature? | no | BC breaks? | no | Deprecations? | no | Tests pass? | yes | Fixed tickets | #... <!-- #-prefixed issue number(s), if any --> | License | MIT | Doc PR | symfony/symfony-docs#... <!--highly recommended for new features--> For sanity. Also in case of an exception page we conflict with the profiler scripting/css. ``` Uncaught TypeError: Cannot set property 'className' of null ``` Happens because `Sfjs.createTabs` from the profiler tries to process tabs again, which twig has already done. The code doesnt handle this gracefully. In case of ajax request (edgy yes) we see the CSS conflicting; ![image](https://user-images.githubusercontent.com/1047696/30712781-7680c8d2-9f0d-11e7-8a6c-27f460c1e780.png) Note the table borders. Not sure how and if we want to solve this nor what it might affect otherwise; open for now. Commits ------- eb520e1 Minor reword 02dcdca [TwigBundle] Remove profiler related scripting
2 parents acbb2ab + eb520e1 commit beb3fe1

File tree

2 files changed

+6
-364
lines changed

2 files changed

+6
-364
lines changed

‎src/Symfony/Bundle/TwigBundle/Resources/views/base_js.html.twig

Lines changed: 3 additions & 359 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
{# This file is duplicated in WebProfilerBundle/Resources/views/Profiler/base_js.html.twig.
2-
If you make any change in this file, do the same change in the other file. #}
1+
{# This file is based on WebProfilerBundle/Resources/views/Profiler/base_js.html.twig.
2+
If you make any change in this file, verify the same change is needed in the other file. #}
33
<script{% if csp_script_nonce is defined and csp_script_nonce %} nonce={{ csp_script_nonce }}{% endif %}>/*<![CDATA[*/
44
{# Caution: the contents of this file are processed by Twig before loading
55
them as JavaScript source code. Always use '/*' comments instead
@@ -8,9 +8,7 @@
88
Sfjs = (function() {
99
"use strict";
1010
11-
var classListIsSupported = 'classList' in document.documentElement;
12-
13-
if (classListIsSupported) {
11+
if ('classList' in document.documentElement) {
1412
var hasClass = function (el, cssClass) { return el.classList.contains(cssClass); };
1513
var removeClass = function(el, cssClass) { el.classList.remove(cssClass); };
1614
var addClass = function(el, cssClass) { el.classList.add(cssClass); };
@@ -22,206 +20,6 @@
2220
var toggleClass = function(el, cssClass) { hasClass(el, cssClass) ? removeClass(el, cssClass) : addClass(el, cssClass); };
2321
}
2422
25-
var noop = function() {};
26-
27-
var profilerStorageKey = 'sf2/profiler/';
28-
29-
var request = function(url, onSuccess, onError, payload, options) {
30-
var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');
31-
options = options || {};
32-
options.maxTries = options.maxTries || 0;
33-
xhr.open(options.method || 'GET', url, true);
34-
xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
35-
xhr.onreadystatechange = function(state) {
36-
if (4 !== xhr.readyState) {
37-
return null;
38-
}
39-
40-
if (xhr.status == 404 && options.maxTries > 1) {
41-
setTimeout(function(){
42-
options.maxTries--;
43-
request(url, onSuccess, onError, payload, options);
44-
}, 500);
45-
46-
return null;
47-
}
48-
49-
if (200 === xhr.status) {
50-
(onSuccess || noop)(xhr);
51-
} else {
52-
(onError || noop)(xhr);
53-
}
54-
};
55-
xhr.send(payload || '');
56-
};
57-
58-
var getPreference = function(name) {
59-
if (!window.localStorage) {
60-
return null;
61-
}
62-
63-
return localStorage.getItem(profilerStorageKey + name);
64-
};
65-
66-
var setPreference = function(name, value) {
67-
if (!window.localStorage) {
68-
return null;
69-
}
70-
71-
localStorage.setItem(profilerStorageKey + name, value);
72-
};
73-
74-
var requestStack = [];
75-
76-
var extractHeaders = function(xhr, stackElement) {
77-
/* Here we avoid to call xhr.getResponseHeader in order to */
78-
/* prevent polluting the console with CORS security errors */
79-
var allHeaders = xhr.getAllResponseHeaders();
80-
var ret;
81-
82-
if (ret = allHeaders.match(/^x-debug-token:\s+(.*)$/im)) {
83-
stackElement.profile = ret[1];
84-
}
85-
if (ret = allHeaders.match(/^x-debug-token-link:\s+(.*)$/im)) {
86-
stackElement.profilerUrl = ret[1];
87-
}
88-
};
89-
90-
var successStreak = 4;
91-
var pendingRequests = 0;
92-
var renderAjaxRequests = function() {
93-
var requestCounter = document.querySelector('.sf-toolbar-ajax-request-counter');
94-
if (!requestCounter) {
95-
return;
96-
}
97-
requestCounter.textContent = requestStack.length;
98-
99-
var infoSpan = document.querySelector(".sf-toolbar-ajax-info");
100-
if (infoSpan) {
101-
infoSpan.textContent = requestStack.length + ' AJAX request' + (requestStack.length !== 1 ? 's' : '');
102-
}
103-
104-
var ajaxToolbarPanel = document.querySelector('.sf-toolbar-block-ajax');
105-
if (requestStack.length) {
106-
ajaxToolbarPanel.style.display = 'block';
107-
} else {
108-
ajaxToolbarPanel.style.display = 'none';
109-
}
110-
if (pendingRequests > 0) {
111-
addClass(ajaxToolbarPanel, 'sf-ajax-request-loading');
112-
} else if (successStreak < 4) {
113-
addClass(ajaxToolbarPanel, 'sf-toolbar-status-red');
114-
removeClass(ajaxToolbarPanel, 'sf-ajax-request-loading');
115-
} else {
116-
removeClass(ajaxToolbarPanel, 'sf-ajax-request-loading');
117-
removeClass(ajaxToolbarPanel, 'sf-toolbar-status-red');
118-
}
119-
};
120-
121-
var startAjaxRequest = function(index) {
122-
var tbody = document.querySelector('.sf-toolbar-ajax-request-list');
123-
if (!tbody) {
124-
return;
125-
}
126-
127-
var request = requestStack[index];
128-
pendingRequests++;
129-
var row = document.createElement('tr');
130-
request.DOMNode = row;
131-
132-
var methodCell = document.createElement('td');
133-
methodCell.textContent = request.method;
134-
row.appendChild(methodCell);
135-
136-
var typeCell = document.createElement('td');
137-
typeCell.textContent = request.type;
138-
row.appendChild(typeCell);
139-
140-
var statusCodeCell = document.createElement('td');
141-
var statusCode = document.createElement('span');
142-
statusCode.textContent = 'n/a';
143-
statusCodeCell.appendChild(statusCode);
144-
row.appendChild(statusCodeCell);
145-
146-
var pathCell = document.createElement('td');
147-
pathCell.className = 'sf-ajax-request-url';
148-
if ('GET' === request.method) {
149-
var pathLink = document.createElement('a');
150-
pathLink.setAttribute('href', request.url);
151-
pathLink.textContent = request.url;
152-
pathCell.appendChild(pathLink);
153-
} else {
154-
pathCell.textContent = request.url;
155-
}
156-
pathCell.setAttribute('title', request.url);
157-
row.appendChild(pathCell);
158-
159-
var durationCell = document.createElement('td');
160-
durationCell.className = 'sf-ajax-request-duration';
161-
durationCell.textContent = 'n/a';
162-
row.appendChild(durationCell);
163-
164-
var profilerCell = document.createElement('td');
165-
profilerCell.textContent = 'n/a';
166-
row.appendChild(profilerCell);
167-
168-
row.className = 'sf-ajax-request sf-ajax-request-loading';
169-
tbody.insertBefore(row, tbody.firstChild);
170-
171-
renderAjaxRequests();
172-
};
173-
174-
var finishAjaxRequest = function(index) {
175-
var request = requestStack[index];
176-
if (!request.DOMNode) {
177-
return;
178-
}
179-
pendingRequests--;
180-
var row = request.DOMNode;
181-
/* Unpack the children from the row */
182-
var methodCell = row.children[0];
183-
var statusCodeCell = row.children[2];
184-
var statusCodeElem = statusCodeCell.children[0];
185-
var durationCell = row.children[4];
186-
var profilerCell = row.children[5];
187-
188-
if (request.error) {
189-
row.className = 'sf-ajax-request sf-ajax-request-error';
190-
methodCell.className = 'sf-ajax-request-error';
191-
successStreak = 0;
192-
} else {
193-
row.className = 'sf-ajax-request sf-ajax-request-ok';
194-
successStreak++;
195-
}
196-
197-
if (request.statusCode) {
198-
if (request.statusCode < 300) {
199-
statusCodeElem.setAttribute('class', 'sf-toolbar-status');
200-
} else if (request.statusCode < 400) {
201-
statusCodeElem.setAttribute('class', 'sf-toolbar-status sf-toolbar-status-yellow');
202-
} else {
203-
statusCodeElem.setAttribute('class', 'sf-toolbar-status sf-toolbar-status-red');
204-
}
205-
statusCodeElem.textContent = request.statusCode;
206-
} else {
207-
statusCodeElem.setAttribute('class', 'sf-toolbar-status sf-toolbar-status-red');
208-
}
209-
210-
if (request.duration) {
211-
durationCell.textContent = request.duration + 'ms';
212-
}
213-
214-
if (request.profilerUrl) {
215-
profilerCell.textContent = '';
216-
var profilerLink = document.createElement('a');
217-
profilerLink.setAttribute('href', request.profilerUrl);
218-
profilerLink.textContent = request.profile;
219-
profilerCell.appendChild(profilerLink);
220-
}
221-
222-
renderAjaxRequests();
223-
};
224-
22523
var addEventListener;
22624
22725
var el = document.createElement('div');
@@ -235,163 +33,9 @@
23533
};
23634
}
23735
238-
{% if excluded_ajax_paths is defined %}
239-
if (window.fetch && window.fetch.polyfill === undefined) {
240-
var oldFetch = window.fetch;
241-
window.fetch = function () {
242-
var promise = oldFetch.apply(this, arguments);
243-
var url = arguments[0];
244-
var params = arguments[1];
245-
var paramType = Object.prototype.toString.call(arguments[0]);
246-
if (paramType === '[object Request]') {
247-
url = arguments[0].url;
248-
params = {
249-
method: arguments[0].method,
250-
credentials: arguments[0].credentials,
251-
headers: arguments[0].headers,
252-
mode: arguments[0].mode,
253-
redirect: arguments[0].redirect
254-
};
255-
}
256-
if (!url.match(new RegExp({{ excluded_ajax_paths|json_encode|raw }}))) {
257-
var method = 'GET';
258-
if (params && params.method !== undefined) {
259-
method = params.method;
260-
}
261-
262-
var stackElement = {
263-
error: false,
264-
url: url,
265-
method: method,
266-
type: 'fetch',
267-
start: new Date()
268-
};
269-
270-
var idx = requestStack.push(stackElement) - 1;
271-
promise.then(function (r) {
272-
stackElement.duration = new Date() - stackElement.start;
273-
stackElement.error = r.status < 200 || r.status >= 400;
274-
stackElement.statusCode = r.status;
275-
stackElement.profile = r.headers.get('x-debug-token');
276-
stackElement.profilerUrl = r.headers.get('x-debug-token-link');
277-
finishAjaxRequest(idx);
278-
}, function (e){
279-
stackElement.error = true;
280-
finishAjaxRequest(idx);
281-
});
282-
startAjaxRequest(idx);
283-
}
284-
285-
return promise;
286-
};
287-
}
288-
if (window.XMLHttpRequest && XMLHttpRequest.prototype.addEventListener) {
289-
var proxied = XMLHttpRequest.prototype.open;
290-
291-
XMLHttpRequest.prototype.open = function(method, url, async, user, pass) {
292-
var self = this;
293-
294-
/* prevent logging AJAX calls to static and inline files, like templates */
295-
var path = url;
296-
if (url.substr(0, 1) === '/') {
297-
if (0 === url.indexOf('{{ request.basePath|e('js') }}')) {
298-
path = url.substr({{ request.basePath|length }});
299-
}
300-
}
301-
else if (0 === url.indexOf('{{ (request.schemeAndHttpHost ~ request.basePath)|e('js') }}')) {
302-
path = url.substr({{ (request.schemeAndHttpHost ~ request.basePath)|length }});
303-
}
304-
305-
if (!path.match(new RegExp({{ excluded_ajax_paths|json_encode|raw }}))) {
306-
var stackElement = {
307-
error: false,
308-
url: url,
309-
method: method,
310-
type: 'xhr',
311-
start: new Date()
312-
};
313-
314-
var idx = requestStack.push(stackElement) - 1;
315-
316-
this.addEventListener('readystatechange', function() {
317-
if (self.readyState == 4) {
318-
stackElement.duration = new Date() - stackElement.start;
319-
stackElement.error = self.status < 200 || self.status >= 400;
320-
stackElement.statusCode = self.status;
321-
extractHeaders(self, stackElement);
322-
323-
finishAjaxRequest(idx);
324-
}
325-
}, false);
326-
327-
startAjaxRequest(idx);
328-
}
329-
330-
proxied.apply(this, Array.prototype.slice.call(arguments));
331-
};
332-
}
333-
{% endif %}
334-
33536
return {
336-
hasClass: hasClass,
337-
338-
removeClass: removeClass,
339-
340-
addClass: addClass,
341-
342-
toggleClass: toggleClass,
343-
344-
getPreference: getPreference,
345-
346-
setPreference: setPreference,
347-
34837
addEventListener: addEventListener,
34938
350-
request: request,
351-
352-
renderAjaxRequests: renderAjaxRequests,
353-
354-
load: function(selector, url, onSuccess, onError, options) {
355-
var el = document.getElementById(selector);
356-
357-
if (el && el.getAttribute('data-sfurl') !== url) {
358-
request(
359-
url,
360-
function(xhr) {
361-
el.innerHTML = xhr.responseText;
362-
el.setAttribute('data-sfurl', url);
363-
removeClass(el, 'loading');
364-
for (var i = 0; i < requestStack.length; i++) {
365-
startAjaxRequest(i);
366-
if (requestStack[i].duration) {
367-
finishAjaxRequest(i);
368-
}
369-
}
370-
(onSuccess || noop)(xhr, el);
371-
},
372-
function(xhr) { (onError || noop)(xhr, el); },
373-
'',
374-
options
375-
);
376-
}
377-
378-
return this;
379-
},
380-
381-
toggle: function(selector, elOn, elOff) {
382-
var tmp = elOn.style.display,
383-
el = document.getElementById(selector);
384-
385-
elOn.style.display = elOff.style.display;
386-
elOff.style.display = tmp;
387-
388-
if (el) {
389-
el.style.display = 'none' === tmp ? 'none' : 'block';
390-
}
391-
392-
return this;
393-
},
394-
39539
createTabs: function() {
39640
var tabGroups = document.querySelectorAll('.sf-tabs');
39741

0 commit comments

Comments
 (0)