'use strict';
var findToolbar = function () {
return document.querySelector('#yii-debug-toolbar');
},
ajax = function (url, settings) {
var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');
settings = settings || {};
xhr.open(settings.method || 'GET', url, true);
xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
xhr.setRequestHeader('Accept', 'text/html');
xhr.onreadystatechange = function (state) {
if (xhr.readyState === 4) {
if (xhr.status === 200 && settings.success) {
settings.success(xhr);
} else if (xhr.status != 200 && settings.error) {
settings.error(xhr);
}
}
};
xhr.send(settings.data || '');
},
url,
div,
toolbarEl = findToolbar(),
toolbarAnimatingClass = 'yii-debug-toolbar_animating',
barSelector = '.yii-debug-toolbar__bar',
viewSelector = '.yii-debug-toolbar__view',
blockSelector = '.yii-debug-toolbar__block',
toggleSelector = '.yii-debug-toolbar__toggle',
externalSelector = '.yii-debug-toolbar__external',
CACHE_KEY = 'yii-debug-toolbar',
ACTIVE_STATE = 'active',
animationTime = 300,
activeClass = 'yii-debug-toolbar_active',
iframeActiveClass = 'yii-debug-toolbar_iframe_active',
iframeAnimatingClass = 'yii-debug-toolbar_iframe_animating',
titleClass = 'yii-debug-toolbar__title',
blockClass = 'yii-debug-toolbar__block',
blockActiveClass = 'yii-debug-toolbar__block_active',
requestStack = [];
if (toolbarEl) {
url = toolbarEl.getAttribute('data-url');
ajax(url, {
success: function (xhr) {
div = document.createElement('div');
div.innerHTML = xhr.responseText;
toolbarEl.parentNode && toolbarEl.parentNode.replaceChild(div, toolbarEl);
showToolbar(findToolbar());
},
error: function (xhr) {
toolbarEl.innerText = xhr.responseText;
}
});
}
function showToolbar(toolbarEl) {
var barEl = toolbarEl.querySelector(barSelector),
viewEl = toolbarEl.querySelector(viewSelector),
toggleEl = toolbarEl.querySelector(toggleSelector),
externalEl = toolbarEl.querySelector(externalSelector),
blockEls = barEl.querySelectorAll(blockSelector),
iframeEl = viewEl.querySelector('iframe'),
iframeHeight = function () {
return (window.innerHeight * 0.7) + 'px';
},
isIframeActive = function () {
return toolbarEl.classList.contains(iframeActiveClass);
},
showIframe = function (href) {
toolbarEl.classList.add(iframeAnimatingClass);
toolbarEl.classList.add(iframeActiveClass);
iframeEl.src = externalEl.href = href;
viewEl.style.height = iframeHeight();
setTimeout(function () {
toolbarEl.classList.remove(iframeAnimatingClass);
}, animationTime);
},
hideIframe = function () {
toolbarEl.classList.add(iframeAnimatingClass);
toolbarEl.classList.remove(iframeActiveClass);
removeActiveBlocksCls();
externalEl.href = '#';
viewEl.style.height = '';
setTimeout(function () {
toolbarEl.classList.remove(iframeAnimatingClass);
}, animationTime);
},
removeActiveBlocksCls = function () {
[].forEach.call(blockEls, function (el) {
el.classList.remove(blockActiveClass);
});
},
toggleToolbarClass = function (className) {
toolbarEl.classList.add(toolbarAnimatingClass);
if (toolbarEl.classList.contains(className)) {
toolbarEl.classList.remove(className);
} else {
toolbarEl.classList.add(className);
}
setTimeout(function () {
toolbarEl.classList.remove(toolbarAnimatingClass);
}, animationTime);
},
toggleStorageState = function (key, value) {
if (window.localStorage) {
var item = localStorage.getItem(key);
if (item) {
localStorage.removeItem(key);
} else {
localStorage.setItem(key, value);
}
}
},
restoreStorageState = function (key) {
if (window.localStorage) {
return localStorage.getItem(key);
}
},
togglePosition = function () {
if (isIframeActive()) {
hideIframe();
} else {
toggleToolbarClass(activeClass);
toggleStorageState(CACHE_KEY, ACTIVE_STATE);
}
};
if (restoreStorageState(CACHE_KEY) === ACTIVE_STATE) {
toolbarEl.classList.add(activeClass);
}
toolbarEl.style.display = 'block';
window.onresize = function () {
if (toolbarEl.classList.contains(iframeActiveClass)) {
viewEl.style.height = iframeHeight();
}
};
barEl.onclick = function (e) {
var target = e.target,
block = findAncestor(target, blockClass);
if (block && !block.classList.contains(titleClass)
&& e.which !== 2 && !e.ctrlKey // not mouse wheel and not ctrl+click
) {
while (target !== this) {
if (target.href) {
removeActiveBlocksCls();
block.classList.add(blockActiveClass);
showIframe(target.href);
}
target = target.parentNode;
}
e.preventDefault();
}
};
toggleEl.onclick = togglePosition;
}
function findAncestor(el, cls) {
while ((el = el.parentElement) && !el.classList.contains(cls));
return el;
}
function renderAjaxRequests() {
var requestCounter = document.getElementsByClassName('yii-debug-toolbar__ajax_counter');
if (!requestCounter.length) {
return;
}
var ajaxToolbarPanel = document.querySelector('.yii-debug-toolbar__ajax');
var tbodies = document.getElementsByClassName('yii-debug-toolbar__ajax_requests');
var state = 'ok';
if (tbodies.length) {
var tbody = tbodies[0];
var rows = document.createDocumentFragment();
if (requestStack.length) {
var firstItem = requestStack.length > 20 ? requestStack.length - 20 : 0;
for (var i = firstItem; i < requestStack.length; i++) {
var request = requestStack[i];
var row = document.createElement('tr');
rows.appendChild(row);
var methodCell = document.createElement('td');
methodCell.innerHTML = request.method;
row.appendChild(methodCell);
var statusCodeCell = document.createElement('td');
var statusCode = document.createElement('span');
if (request.statusCode < 300) {
statusCode.setAttribute('class', 'yii-debug-toolbar__ajax_request_status yii-debug-toolbar__label_success');
} else if (request.statusCode < 400) {
statusCode.setAttribute('class', 'yii-debug-toolbar__ajax_request_status yii-debug-toolbar__label_warning');
} else {
statusCode.setAttribute('class', 'yii-debug-toolbar__ajax_request_status yii-debug-toolbar__label_error');
}
statusCode.textContent = request.statusCode || '-';
statusCodeCell.appendChild(statusCode);
row.appendChild(statusCodeCell);
var pathCell = document.createElement('td');
pathCell.className = 'yii-debug-toolbar__ajax_request_url';
pathCell.innerHTML = request.url;
pathCell.setAttribute('title', request.url);
row.appendChild(pathCell);
var durationCell = document.createElement('td');
durationCell.className = 'yii-debug-toolbar__ajax_request_duration';
if (request.duration) {
durationCell.innerText = request.duration + " ms";
} else {
durationCell.innerText = '-';
}
row.appendChild(durationCell);
row.appendChild(document.createTextNode(' '));
var profilerCell = document.createElement('td');
if (request.profilerUrl) {
var profilerLink = document.createElement('a');
profilerLink.setAttribute('href', request.profilerUrl);
profilerLink.innerText = request.profile;
profilerCell.appendChild(profilerLink);
} else {
profilerCell.innerText = 'n/a';
}
row.appendChild(profilerCell);
if (request.error) {
if (state !== "loading" && i > requestStack.length - 4) {
state = 'error';
}
} else if (request.loading) {
state = 'loading'
}
row.className = 'yii-debug-toolbar__ajax_request';
}
while (tbody.firstChild) {
tbody.removeChild(tbody.firstChild);
}
tbody.appendChild(rows);
}
ajaxToolbarPanel.style.display = 'block';
}
requestCounter[0].innerText = requestStack.length;
var className = 'yii-debug-toolbar__label yii-debug-toolbar__ajax_counter';
if (state === 'ok') {
className += ' yii-debug-toolbar__label_success';
} else if (state === 'error') {
className += ' yii-debug-toolbar__label_error';
}
requestCounter[0].className = className;
};
var proxied = XMLHttpRequest.prototype.open;
XMLHttpRequest.prototype.open = function (method, url, async, user, pass) {
var self = this;
/* prevent logging AJAX calls to static and inline files, like templates */
if (url.substr(0, 1) === '/' && !url.match(new RegExp("{{ excluded_ajax_paths }}"))) {
var stackElement = {
loading: true,
error: false,
url: url,
method: method,
start: new Date()
};
requestStack.push(stackElement);
this.addEventListener("readystatechange", function () {
if (self.readyState == 4) {
stackElement.duration = self.getResponseHeader("X-Debug-Duration") || new Date() - stackElement.start;
stackElement.loading = false;
stackElement.statusCode = self.status;
stackElement.error = self.status < 200 || self.status >= 400;
stackElement.profile = self.getResponseHeader("X-Debug-Tag");
stackElement.profilerUrl = self.getResponseHeader("X-Debug-Link");
renderAjaxRequests();
}
}, false);
renderAjaxRequests();
}
proxied.apply(this, Array.prototype.slice.call(arguments));
};
// catch fetch AJAX requests
if (window.fetch) {
var originalFetch = window.fetch;
window.fetch = function (input, init) {
var method;
var url;
if (typeof input === "string") {
method = (init && init.method) || 'GET';
url = input;
} else if (window.Request && input instanceof Request) {
method = input.method;
url = input.url;
}
var promise = originalFetch(input, init);
/* prevent logging AJAX calls to static and inline files, like templates */
if (url.substr(0, 1) === '/' && !url.match(new RegExp("{{ excluded_ajax_paths }}"))) {
var stackElement = {
loading: true,
error: false,
url: url,
method: method,
start: new Date()
};
requestStack.push(stackElement);
promise.then(function (response) {
stackElement.duration = response.headers.get("X-Debug-Duration") || new Date() - stackElement.start;
stackElement.loading = false;
stackElement.statusCode = response.status;
stackElement.error = response.status < 200 || response.status >= 400;
stackElement.profile = response.headers.get("X-Debug-Tag");
stackElement.profilerUrl = response.headers.get("X-Debug-Link");
renderAjaxRequests();
return response;
}).catch(function (error) {
stackElement.loading = false;
stackElement.error = true;
renderAjaxRequests();
throw error;
});
renderAjaxRequests();
}
return promise;
};
}
