From 8675719c8c39b53f740fca503326eab3d3c5e051 Mon Sep 17 00:00:00 2001 From: David Grudl Date: Fri, 6 Apr 2018 06:05:30 +0200 Subject: [PATCH] refactoring: used ES6 classes --- src/Tracy/assets/Bar/bar.js | 771 +++++++++++----------- src/Tracy/assets/BlueScreen/bluescreen.js | 90 +-- src/Tracy/assets/Toggle/toggle.js | 163 ++--- 3 files changed, 517 insertions(+), 507 deletions(-) diff --git a/src/Tracy/assets/Bar/bar.js b/src/Tracy/assets/Bar/bar.js index 6aee6e858..299820889 100644 --- a/src/Tracy/assets/Bar/bar.js +++ b/src/Tracy/assets/Bar/bar.js @@ -3,470 +3,460 @@ */ (function(){ - Tracy = window.Tracy || {}; - if (document.currentScript) { - var nonce = document.currentScript.getAttribute('nonce') || document.currentScript.nonce; - var contentId = document.currentScript.dataset.id; - } + class Panel + { + constructor(id) { + this.id = id; + this.elem = document.getElementById(this.id); + this.elem.Tracy = this.elem.Tracy || {}; + } - Tracy.getAjaxHeader = () => contentId; + init() { + var elem = this.elem; + + this.init = function() {}; + elem.innerHTML = elem.dataset.tracyContent; + Tracy.Dumper.init(this.dumps, elem); + delete elem.dataset.tracyContent; + delete this.dumps; + evalScripts(elem); + + draggable(elem, { + handles: elem.querySelectorAll('h1'), + start: () => { + if (!this.is(Panel.FLOAT)) { + this.toFloat(); + } + this.focus(); + } + }); - Tracy.panelZIndex = Tracy.panelZIndex || 20000; + elem.addEventListener('mousedown', () => { + this.focus(); + }); - var Panel = Tracy.DebugPanel = function(id) { - this.id = id; - this.elem = document.getElementById(this.id); - this.elem.Tracy = this.elem.Tracy || {}; - }; + elem.addEventListener('mouseenter', () => { + clearTimeout(elem.Tracy.displayTimeout); + }); - Panel.PEEK = 'tracy-mode-peek'; - Panel.FLOAT = 'tracy-mode-float'; - Panel.WINDOW = 'tracy-mode-window'; - Panel.FOCUSED = 'tracy-focused'; - Panel.RESIZED = 'tracy-panel-resized'; - Panel.zIndexCounter = 1; + elem.addEventListener('mouseleave', () => { + this.blur(); + }); - Panel.prototype.init = function() { - var elem = this.elem; - - this.init = function() {}; - elem.innerHTML = elem.dataset.tracyContent; - Tracy.Dumper.init(this.dumps, elem); - delete elem.dataset.tracyContent; - delete this.dumps; - evalScripts(elem); - - draggable(elem, { - handles: elem.querySelectorAll('h1'), - start: () => { - if (!this.is(Panel.FLOAT)) { - this.toFloat(); + elem.addEventListener('mousemove', e => { + if (e.buttons && !this.is(Panel.RESIZED) && (elem.style.width || elem.style.height)) { + elem.classList.add(Panel.RESIZED); } - this.focus(); - } - }); - - elem.addEventListener('mousedown', () => { - this.focus(); - }); + }); - elem.addEventListener('mouseenter', () => { - clearTimeout(elem.Tracy.displayTimeout); - }); + elem.addEventListener('tracy-toggle', () => { + this.reposition(); + }); - elem.addEventListener('mouseleave', () => { - this.blur(); - }); + forEach(elem.querySelectorAll('.tracy-icons a'), link => { + link.addEventListener('click', e => { + clearTimeout(elem.Tracy.displayTimeout); + if (link.rel === 'close') { + this.toPeek(); + } else if (link.rel === 'window') { + this.toWindow(); + } + e.preventDefault(); + }); + }); - elem.addEventListener('mousemove', e => { - if (e.buttons && !this.is(Panel.RESIZED) && (elem.style.width || elem.style.height)) { - elem.classList.add(Panel.RESIZED); + if (!this.is('tracy-ajax')) { + Tracy.Toggle.persist(elem); } - }); + } - elem.addEventListener('tracy-toggle', () => { - this.reposition(); - }); + is(mode) { + return this.elem.classList.contains(mode); + } - forEach(elem.querySelectorAll('.tracy-icons a'), link => { - link.addEventListener('click', e => { + focus(callback) { + var elem = this.elem; + if (this.is(Panel.WINDOW)) { + elem.Tracy.window.focus(); + } else { clearTimeout(elem.Tracy.displayTimeout); - if (link.rel === 'close') { - this.toPeek(); - } else if (link.rel === 'window') { - this.toWindow(); - } - e.preventDefault(); - }); - }); + elem.Tracy.displayTimeout = setTimeout(() => { + elem.classList.add(Panel.FOCUSED); + elem.style.zIndex = Tracy.panelZIndex + Panel.zIndexCounter++; + if (callback) { + callback(); + } + }, 50); + } + } - if (!this.is('tracy-ajax')) { - Tracy.Toggle.persist(elem); + blur() { + var elem = this.elem; + if (this.is(Panel.PEEK)) { + clearTimeout(elem.Tracy.displayTimeout); + elem.Tracy.displayTimeout = setTimeout(() => { + elem.classList.remove(Panel.FOCUSED); + }, 50); + } } - }; - - Panel.prototype.is = function(mode) { - return this.elem.classList.contains(mode); - }; - - Panel.prototype.focus = function(callback) { - var elem = this.elem; - if (this.is(Panel.WINDOW)) { - elem.Tracy.window.focus(); - } else { - clearTimeout(elem.Tracy.displayTimeout); - elem.Tracy.displayTimeout = setTimeout(() => { - elem.classList.add(Panel.FOCUSED); - elem.style.zIndex = Tracy.panelZIndex + Panel.zIndexCounter++; - if (callback) { - callback(); - } - }, 50); + + toFloat() { + this.elem.classList.remove(Panel.WINDOW); + this.elem.classList.remove(Panel.PEEK); + this.elem.classList.add(Panel.FLOAT); + this.elem.classList.remove(Panel.RESIZED); + this.reposition(); } - }; - - Panel.prototype.blur = function() { - var elem = this.elem; - if (this.is(Panel.PEEK)) { - clearTimeout(elem.Tracy.displayTimeout); - elem.Tracy.displayTimeout = setTimeout(() => { - elem.classList.remove(Panel.FOCUSED); - }, 50); + + toPeek() { + this.elem.classList.remove(Panel.WINDOW); + this.elem.classList.remove(Panel.FLOAT); + this.elem.classList.remove(Panel.FOCUSED); + this.elem.classList.add(Panel.PEEK); + this.elem.style.width = ''; + this.elem.style.height = ''; + this.elem.classList.remove(Panel.RESIZED); } - }; - - Panel.prototype.toFloat = function() { - this.elem.classList.remove(Panel.WINDOW); - this.elem.classList.remove(Panel.PEEK); - this.elem.classList.add(Panel.FLOAT); - this.elem.classList.remove(Panel.RESIZED); - this.reposition(); - }; - - Panel.prototype.toPeek = function() { - this.elem.classList.remove(Panel.WINDOW); - this.elem.classList.remove(Panel.FLOAT); - this.elem.classList.remove(Panel.FOCUSED); - this.elem.classList.add(Panel.PEEK); - this.elem.style.width = ''; - this.elem.style.height = ''; - this.elem.classList.remove(Panel.RESIZED); - }; - - Panel.prototype.toWindow = function() { - var offset = getOffset(this.elem); - offset.left += typeof window.screenLeft === 'number' ? window.screenLeft : (window.screenX + 10); - offset.top += typeof window.screenTop === 'number' ? window.screenTop : (window.screenY + 50); - - var win = window.open('', this.id.replace(/-/g, '_'), 'left=' + offset.left + ',top=' + offset.top + + toWindow() { + var offset = getOffset(this.elem); + offset.left += typeof window.screenLeft === 'number' ? window.screenLeft : (window.screenX + 10); + offset.top += typeof window.screenTop === 'number' ? window.screenTop : (window.screenY + 50); + + var win = window.open('', this.id.replace(/-/g, '_'), 'left=' + offset.left + ',top=' + offset.top + ',width=' + this.elem.offsetWidth + ',height=' + this.elem.offsetHeight + ',resizable=yes,scrollbars=yes'); - if (!win) { - return false; - } + if (!win) { + return false; + } - var doc = win.document; - doc.write('' + var doc = win.document; + doc.write('' + '' + '' - ); - doc.body.innerHTML = '
' + this.elem.innerHTML + '
'; - evalScripts(doc.body); - if (this.elem.querySelector('h1')) { - doc.title = this.elem.querySelector('h1').textContent; - } + ); + doc.body.innerHTML = '
' + this.elem.innerHTML + '
'; + evalScripts(doc.body); + if (this.elem.querySelector('h1')) { + doc.title = this.elem.querySelector('h1').textContent; + } - win.addEventListener('beforeunload', () => { - this.toPeek(); - win.close(); // forces closing, can be invoked by F5 - }); + win.addEventListener('beforeunload', () => { + this.toPeek(); + win.close(); // forces closing, can be invoked by F5 + }); - doc.addEventListener('keyup', e => { - if (e.keyCode === 27 && !e.shiftKey && !e.altKey && !e.ctrlKey && !e.metaKey) { - win.close(); - } - }); + doc.addEventListener('keyup', e => { + if (e.keyCode === 27 && !e.shiftKey && !e.altKey && !e.ctrlKey && !e.metaKey) { + win.close(); + } + }); - this.elem.classList.remove(Panel.FLOAT); - this.elem.classList.remove(Panel.PEEK); - this.elem.classList.remove(Panel.FOCUSED); - this.elem.classList.remove(Panel.RESIZED); - this.elem.classList.add(Panel.WINDOW); - this.elem.Tracy.window = win; - return true; - }; - - Panel.prototype.reposition = function(deltaX, deltaY) { - var pos = getPosition(this.elem); - if (pos.width) { // is visible? - setPosition(this.elem, {left: pos.left + (deltaX || 0), top: pos.top + (deltaY || 0)}); - if (this.is(Panel.RESIZED)) { - var size = getWindowSize(); - this.elem.style.width = Math.min(size.width, pos.width) + 'px'; - this.elem.style.height = Math.min(size.height, pos.height) + 'px'; + this.elem.classList.remove(Panel.FLOAT); + this.elem.classList.remove(Panel.PEEK); + this.elem.classList.remove(Panel.FOCUSED); + this.elem.classList.remove(Panel.RESIZED); + this.elem.classList.add(Panel.WINDOW); + this.elem.Tracy.window = win; + return true; + } + + reposition(deltaX, deltaY) { + var pos = getPosition(this.elem); + if (pos.width) { // is visible? + setPosition(this.elem, {left: pos.left + (deltaX || 0), top: pos.top + (deltaY || 0)}); + if (this.is(Panel.RESIZED)) { + var size = getWindowSize(); + this.elem.style.width = Math.min(size.width, pos.width) + 'px'; + this.elem.style.height = Math.min(size.height, pos.height) + 'px'; + } } } - }; - - Panel.prototype.savePosition = function() { - var pos = getPosition(this.elem); - if (this.is(Panel.WINDOW)) { - localStorage.setItem(this.id, JSON.stringify({window: true})); - } else if (pos.width) { // is visible? - localStorage.setItem(this.id, JSON.stringify({right: pos.right, bottom: pos.bottom, width: pos.width, height: pos.height, zIndex: this.elem.style.zIndex - Tracy.panelZIndex, resized: this.is(Panel.RESIZED)})); - } else { - localStorage.removeItem(this.id); + + savePosition() { + var pos = getPosition(this.elem); + if (this.is(Panel.WINDOW)) { + localStorage.setItem(this.id, JSON.stringify({window: true})); + } else if (pos.width) { // is visible? + localStorage.setItem(this.id, JSON.stringify({right: pos.right, bottom: pos.bottom, width: pos.width, height: pos.height, zIndex: this.elem.style.zIndex - Tracy.panelZIndex, resized: this.is(Panel.RESIZED)})); + } else { + localStorage.removeItem(this.id); + } } - }; - Panel.prototype.restorePosition = function() { - var pos = JSON.parse(localStorage.getItem(this.id)); - if (!pos) { - this.elem.classList.add(Panel.PEEK); - } else if (pos.window) { - this.init(); - this.toWindow() || this.toFloat(); - } else if (this.elem.dataset.tracyContent) { - this.init(); - this.toFloat(); - if (pos.resized) { - this.elem.classList.add(Panel.RESIZED); - this.elem.style.width = pos.width + 'px'; - this.elem.style.height = pos.height + 'px'; + restorePosition() { + var pos = JSON.parse(localStorage.getItem(this.id)); + if (!pos) { + this.elem.classList.add(Panel.PEEK); + } else if (pos.window) { + this.init(); + this.toWindow() || this.toFloat(); + } else if (this.elem.dataset.tracyContent) { + this.init(); + this.toFloat(); + if (pos.resized) { + this.elem.classList.add(Panel.RESIZED); + this.elem.style.width = pos.width + 'px'; + this.elem.style.height = pos.height + 'px'; + } + setPosition(this.elem, pos); + this.elem.style.zIndex = Tracy.panelZIndex + (pos.zIndex || 1); + Panel.zIndexCounter = Math.max(Panel.zIndexCounter, (pos.zIndex || 1)) + 1; } - setPosition(this.elem, pos); - this.elem.style.zIndex = Tracy.panelZIndex + (pos.zIndex || 1); - Panel.zIndexCounter = Math.max(Panel.zIndexCounter, (pos.zIndex || 1)) + 1; } - }; + } + Panel.PEEK = 'tracy-mode-peek'; + Panel.FLOAT = 'tracy-mode-float'; + Panel.WINDOW = 'tracy-mode-window'; + Panel.FOCUSED = 'tracy-focused'; + Panel.RESIZED = 'tracy-panel-resized'; + Panel.zIndexCounter = 1; - var Bar = Tracy.DebugBar = function() { - }; - Bar.prototype.id = 'tracy-debug-bar'; + class Bar + { + init() { + this.id = 'tracy-debug-bar'; + this.elem = document.getElementById(this.id); - Bar.prototype.init = function() { - this.elem = document.getElementById(this.id); + draggable(this.elem, { + handles: this.elem.querySelectorAll('li:first-child'), + draggedClass: 'tracy-dragged' + }); - draggable(this.elem, { - handles: this.elem.querySelectorAll('li:first-child'), - draggedClass: 'tracy-dragged' - }); + this.elem.addEventListener('mousedown', e => { + e.preventDefault(); + }); - this.elem.addEventListener('mousedown', e => { - e.preventDefault(); - }); + this.initTabs(this.elem); + this.restorePosition(); + } - this.initTabs(this.elem); - this.restorePosition(); - }; + initTabs(elem) { + forEach(elem.getElementsByTagName('a'), link => { + link.addEventListener('click', e => { + if (link.rel === 'close') { + this.close(); - Bar.prototype.initTabs = function(elem) { - forEach(elem.getElementsByTagName('a'), link => { - link.addEventListener('click', e => { - if (link.rel === 'close') { - this.close(); + } else if (link.rel) { + var panel = Debug.panels[link.rel]; + panel.init(); - } else if (link.rel) { - var panel = Debug.panels[link.rel]; - panel.init(); + if (e.shiftKey) { + panel.toFloat(); + panel.toWindow(); - if (e.shiftKey) { - panel.toFloat(); - panel.toWindow(); + } else if (panel.is(Panel.FLOAT)) { + panel.toPeek(); - } else if (panel.is(Panel.FLOAT)) { - panel.toPeek(); + } else { + panel.toFloat(); + panel.reposition(-Math.round(Math.random() * 100) - 20, (Math.round(Math.random() * 100) + 20) * (this.isAtTop() ? 1 : -1)); + } + } + e.preventDefault(); + }); - } else { - panel.toFloat(); - panel.reposition(-Math.round(Math.random() * 100) - 20, (Math.round(Math.random() * 100) + 20) * (this.isAtTop() ? 1 : -1)); + link.addEventListener('mouseenter', e => { + if (!e.buttons && link.rel && link.rel !== 'close' && !elem.classList.contains('tracy-dragged')) { + var panel = Debug.panels[link.rel]; + panel.focus(() => { + if (panel.is(Panel.PEEK)) { + panel.init(); + + var pos = getPosition(panel.elem); + setPosition(panel.elem, { + left: getOffset(link).left + getPosition(link).width + 4 - pos.width, + top: this.isAtTop() + ? getOffset(this.elem).top + getPosition(this.elem).height + 4 + : getOffset(this.elem).top - pos.height - 4 + }); + } + }); } - } - e.preventDefault(); - }); + }); - link.addEventListener('mouseenter', e => { - if (!e.buttons && link.rel && link.rel !== 'close' && !elem.classList.contains('tracy-dragged')) { - var panel = Debug.panels[link.rel]; - panel.focus(() => { - if (panel.is(Panel.PEEK)) { - panel.init(); - - var pos = getPosition(panel.elem); - setPosition(panel.elem, { - left: getOffset(link).left + getPosition(link).width + 4 - pos.width, - top: this.isAtTop() - ? getOffset(this.elem).top + getPosition(this.elem).height + 4 - : getOffset(this.elem).top - pos.height - 4 - }); - } - }); - } + link.addEventListener('mouseleave', () => { + if (link.rel && link.rel !== 'close' && !elem.classList.contains('tracy-dragged')) { + Debug.panels[link.rel].blur(); + } + }); }); + this.autoHideLabels(); + } - link.addEventListener('mouseleave', () => { - if (link.rel && link.rel !== 'close' && !elem.classList.contains('tracy-dragged')) { - Debug.panels[link.rel].blur(); + autoHideLabels() { + forEach(this.elem.children, function (ul) { + var labels = ul.querySelectorAll('.tracy-label'); + for (var i = labels.length - 1; i >= 0 && ul.clientHeight >= 40; i--) { // row height = 1em (cca 20px) + labels.item(i).hidden = true; } }); - }); - this.autoHideLabels(); - }; - - Bar.prototype.autoHideLabels = function() { - forEach(this.elem.children, function (ul) { - var labels = ul.querySelectorAll('.tracy-label'); - for (var i = labels.length - 1; i >= 0 && ul.clientHeight >= 40; i--) { // row height = 1em (cca 20px) - labels.item(i).hidden = true; - } - }); - }; - - Bar.prototype.close = function() { - document.getElementById('tracy-debug').style.display = 'none'; - }; - - Bar.prototype.reposition = function(deltaX, deltaY) { - var pos = getPosition(this.elem); - setPosition(this.elem, {left: pos.left + (deltaX || 0), top: pos.top + (deltaY || 0)}); - }; - - Bar.prototype.savePosition = function() { - var pos = getPosition(this.elem); - localStorage.setItem(this.id, JSON.stringify(this.isAtTop() ? {right: pos.right, top: pos.top} : {right: pos.right, bottom: pos.bottom})); - }; - - Bar.prototype.restorePosition = function() { - var pos = JSON.parse(localStorage.getItem(this.id)); - setPosition(this.elem, pos || {right: 0, bottom: 0}); - }; - - Bar.prototype.isAtTop = function() { - var pos = getPosition(this.elem); - return pos.top < 100 && pos.bottom > pos.top; - }; - - - var Debug = Tracy.Debug = {}; + } - Debug.bar = new Bar; + close() { + document.getElementById('tracy-debug').style.display = 'none'; + } - Debug.panels = {}; + reposition(deltaX, deltaY) { + var pos = getPosition(this.elem); + setPosition(this.elem, {left: pos.left + (deltaX || 0), top: pos.top + (deltaY || 0)}); + } - Debug.init = function(content, dumps) { - if (!document.documentElement.dataset) { - throw new Error('Tracy requires IE 11+'); + savePosition() { + var pos = getPosition(this.elem); + localStorage.setItem(this.id, JSON.stringify(this.isAtTop() ? {right: pos.right, top: pos.top} : {right: pos.right, bottom: pos.bottom})); } - Debug.layer = document.createElement('div'); - Debug.layer.setAttribute('id', 'tracy-debug'); - Debug.layer.innerHTML = content; - document.documentElement.appendChild(Debug.layer); - evalScripts(Debug.layer); - Tracy.Dumper.init(); - Debug.layer.style.display = 'block'; - Debug.bar.init(); - - forEach(document.querySelectorAll('.tracy-panel'), panel => { - Debug.panels[panel.id] = new Panel(panel.id); - Debug.panels[panel.id].dumps = dumps; - Debug.panels[panel.id].restorePosition(); - }); + restorePosition() { + var pos = JSON.parse(localStorage.getItem(this.id)); + setPosition(this.elem, pos || {right: 0, bottom: 0}); + } - Debug.captureWindow(); - Debug.captureAjax(); - }; + isAtTop() { + var pos = getPosition(this.elem); + return pos.top < 100 && pos.bottom > pos.top; + } + } - Debug.loadAjax = function(content, dumps) { - forEach(Debug.layer.querySelectorAll('.tracy-panel.tracy-ajax'), panel => { - Debug.panels[panel.id].savePosition(); - delete Debug.panels[panel.id]; - panel.parentNode.removeChild(panel); - }); - Debug.bar.savePosition(); - var ajaxBar = document.getElementById('tracy-ajax-bar'); - if (ajaxBar) { - ajaxBar.parentNode.removeChild(ajaxBar); - } + class Debug + { + static init(content, dumps) { + if (!document.documentElement.dataset) { + throw new Error('Tracy requires IE 11+'); + } - Debug.layer.insertAdjacentHTML('beforeend', content); - evalScripts(Debug.layer); - ajaxBar = document.getElementById('tracy-ajax-bar'); - Debug.bar.elem.appendChild(ajaxBar); - Debug.bar.restorePosition(); + Debug.layer = document.createElement('div'); + Debug.layer.setAttribute('id', 'tracy-debug'); + Debug.layer.innerHTML = content; + document.documentElement.appendChild(Debug.layer); + evalScripts(Debug.layer); + Tracy.Dumper.init(); + Debug.layer.style.display = 'block'; + Debug.bar.init(); - forEach(document.querySelectorAll('.tracy-panel'), panel => { - if (!Debug.panels[panel.id]) { + forEach(document.querySelectorAll('.tracy-panel'), panel => { Debug.panels[panel.id] = new Panel(panel.id); Debug.panels[panel.id].dumps = dumps; Debug.panels[panel.id].restorePosition(); - } - }); + }); - Debug.bar.initTabs(ajaxBar); - }; + Debug.captureWindow(); + Debug.captureAjax(); + } - Debug.captureWindow = function() { - var size = getWindowSize(); + static loadAjax(content, dumps) { + forEach(Debug.layer.querySelectorAll('.tracy-panel.tracy-ajax'), panel => { + Debug.panels[panel.id].savePosition(); + delete Debug.panels[panel.id]; + panel.parentNode.removeChild(panel); + }); - window.addEventListener('resize', () => { - var newSize = getWindowSize(); + Debug.bar.savePosition(); + var ajaxBar = document.getElementById('tracy-ajax-bar'); + if (ajaxBar) { + ajaxBar.parentNode.removeChild(ajaxBar); + } + + Debug.layer.insertAdjacentHTML('beforeend', content); + evalScripts(Debug.layer); + ajaxBar = document.getElementById('tracy-ajax-bar'); + Debug.bar.elem.appendChild(ajaxBar); + Debug.bar.restorePosition(); + + forEach(document.querySelectorAll('.tracy-panel'), panel => { + if (!Debug.panels[panel.id]) { + Debug.panels[panel.id] = new Panel(panel.id); + Debug.panels[panel.id].dumps = dumps; + Debug.panels[panel.id].restorePosition(); + } + }); - Debug.bar.reposition(newSize.width - size.width, newSize.height - size.height); + Debug.bar.initTabs(ajaxBar); + } - for (var id in Debug.panels) { - Debug.panels[id].reposition(newSize.width - size.width, newSize.height - size.height); - } + static captureWindow() { + var size = getWindowSize(); - size = newSize; - }); + window.addEventListener('resize', () => { + var newSize = getWindowSize(); - window.addEventListener('unload', () => { - Debug.bar.savePosition(); - for (var id in Debug.panels) { - Debug.panels[id].savePosition(); - } - }); - }; + Debug.bar.reposition(newSize.width - size.width, newSize.height - size.height); - Debug.captureAjax = function() { - var header = Tracy.getAjaxHeader(); - if (!header) { - return; - } - var oldOpen = XMLHttpRequest.prototype.open; - - XMLHttpRequest.prototype.open = function() { - oldOpen.apply(this, arguments); - if (window.TracyAutoRefresh !== false && arguments[1].indexOf('//') <= 0 || arguments[1].indexOf(location.origin + '/') === 0) { - this.setRequestHeader('X-Tracy-Ajax', header); - this.addEventListener('load', function() { - if (this.getAllResponseHeaders().match(/^X-Tracy-Ajax: 1/mi)) { - Debug.loadScript('?_tracy_bar=content-ajax.' + header + '&XDEBUG_SESSION_STOP=1&v=' + Math.random()); - } - }); - } - }; + for (var id in Debug.panels) { + Debug.panels[id].reposition(newSize.width - size.width, newSize.height - size.height); + } - if (window.fetch) { - var oldFetch = window.fetch; - window.fetch = function(request, options) { - options = options || {}; - options.headers = new Headers(options.headers || {}); - var url = request instanceof Request ? request.url : request; + size = newSize; + }); - if (window.TracyAutoRefresh !== false && url.indexOf('//') <= 0 || url.indexOf(location.origin + '/') === 0) { - options.headers.set('X-Tracy-Ajax', header); - options.credentials = (request instanceof Request && request.credentials) || options.credentials || 'same-origin'; + window.addEventListener('unload', () => { + Debug.bar.savePosition(); + for (var id in Debug.panels) { + Debug.panels[id].savePosition(); + } + }); + } - return oldFetch(request, options).then(function (response) { - if (response.headers.has('X-Tracy-Ajax') && response.headers.get('X-Tracy-Ajax')[0] === '1') { + static captureAjax() { + var header = Tracy.getAjaxHeader(); + if (!header) { + return; + } + var oldOpen = XMLHttpRequest.prototype.open; + + XMLHttpRequest.prototype.open = function() { + oldOpen.apply(this, arguments); + if (window.TracyAutoRefresh !== false && arguments[1].indexOf('//') <= 0 || arguments[1].indexOf(location.origin + '/') === 0) { + this.setRequestHeader('X-Tracy-Ajax', header); + this.addEventListener('load', function() { + if (this.getAllResponseHeaders().match(/^X-Tracy-Ajax: 1/mi)) { Debug.loadScript('?_tracy_bar=content-ajax.' + header + '&XDEBUG_SESSION_STOP=1&v=' + Math.random()); } - - return response; }); } - - return oldFetch(request, options); }; - } - }; - Debug.loadScript = function(url) { - if (Debug.scriptElem) { - Debug.scriptElem.parentNode.removeChild(Debug.scriptElem); + if (window.fetch) { + var oldFetch = window.fetch; + window.fetch = function(request, options) { + options = options || {}; + options.headers = new Headers(options.headers || {}); + var url = request instanceof Request ? request.url : request; + + if (window.TracyAutoRefresh !== false && url.indexOf('//') <= 0 || url.indexOf(location.origin + '/') === 0) { + options.headers.set('X-Tracy-Ajax', header); + options.credentials = (request instanceof Request && request.credentials) || options.credentials || 'same-origin'; + + return oldFetch(request, options).then(function (response) { + if (response.headers.has('X-Tracy-Ajax') && response.headers.get('X-Tracy-Ajax')[0] === '1') { + Debug.loadScript('?_tracy_bar=content-ajax.' + header + '&XDEBUG_SESSION_STOP=1&v=' + Math.random()); + } + + return response; + }); + } + + return oldFetch(request, options); + }; + } } - Debug.scriptElem = document.createElement('script'); - Debug.scriptElem.src = url; - if (nonce) { - Debug.scriptElem.setAttribute('nonce', nonce); + + static loadScript(url) { + if (Debug.scriptElem) { + Debug.scriptElem.parentNode.removeChild(Debug.scriptElem); + } + Debug.scriptElem = document.createElement('script'); + Debug.scriptElem.src = url; + if (nonce) { + Debug.scriptElem.setAttribute('nonce', nonce); + } + document.documentElement.appendChild(Debug.scriptElem); } - document.documentElement.appendChild(Debug.scriptElem); - }; + } + function evalScripts(elem) { forEach(elem.getElementsByTagName('script'), script => { @@ -615,4 +605,19 @@ Array.prototype.forEach.call(arr, cb); } + + if (document.currentScript) { + var nonce = document.currentScript.getAttribute('nonce') || document.currentScript.nonce; + var contentId = document.currentScript.dataset.id; + } + + Tracy = window.Tracy || {}; + Tracy.panelZIndex = Tracy.panelZIndex || 20000; + Tracy.DebugPanel = Panel; + Tracy.DebugBar = Bar; + Tracy.Debug = Debug; + Tracy.getAjaxHeader = () => contentId; + + Debug.bar = new Bar; + Debug.panels = {}; })(); diff --git a/src/Tracy/assets/BlueScreen/bluescreen.js b/src/Tracy/assets/BlueScreen/bluescreen.js index c312adf1c..108382426 100644 --- a/src/Tracy/assets/BlueScreen/bluescreen.js +++ b/src/Tracy/assets/BlueScreen/bluescreen.js @@ -3,60 +3,62 @@ */ (function(){ - Tracy = window.Tracy || {}; + class BlueScreen + { + static init(ajax) { + var blueScreen = document.getElementById('tracy-bs'); - var BlueScreen = Tracy.BlueScreen = {}, - inited; + for (var i = 0, styles = []; i < document.styleSheets.length; i++) { + var style = document.styleSheets[i]; + if (!style.ownerNode.classList.contains('tracy-debug')) { + style.oldDisabled = style.disabled; + style.disabled = true; + styles.push(style); + } + } - BlueScreen.init = function(ajax) { - var blueScreen = document.getElementById('tracy-bs'); + document.getElementById('tracy-bs-toggle').addEventListener('tracy-toggle', function() { + var collapsed = this.classList.contains('tracy-collapsed'); + for (i = 0; i < styles.length; i++) { + styles[i].disabled = collapsed ? styles[i].oldDisabled : true; + } + }); - for (var i = 0, styles = []; i < document.styleSheets.length; i++) { - var style = document.styleSheets[i]; - if (!style.ownerNode.classList.contains('tracy-debug')) { - style.oldDisabled = style.disabled; - style.disabled = true; - styles.push(style); + if (!ajax) { + document.body.appendChild(blueScreen); + var id = location.href + document.getElementById('tracy-bs-error').textContent; + Tracy.Toggle.persist(blueScreen, sessionStorage.getItem('tracy-toggles-bskey') === id); + sessionStorage.setItem('tracy-toggles-bskey', id); } - } - document.getElementById('tracy-bs-toggle').addEventListener('tracy-toggle', function() { - var collapsed = this.classList.contains('tracy-collapsed'); - for (i = 0; i < styles.length; i++) { - styles[i].disabled = collapsed ? styles[i].oldDisabled : true; + if (inited) { + return; } - }); - - if (!ajax) { - document.body.appendChild(blueScreen); - var id = location.href + document.getElementById('tracy-bs-error').textContent; - Tracy.Toggle.persist(blueScreen, sessionStorage.getItem('tracy-toggles-bskey') === id); - sessionStorage.setItem('tracy-toggles-bskey', id); - } + inited = true; - if (inited) { - return; + // enables toggling via ESC + document.addEventListener('keyup', function(e) { + if (e.keyCode === 27 && !e.shiftKey && !e.altKey && !e.ctrlKey && !e.metaKey) { // ESC + Tracy.Toggle.toggle(document.getElementById('tracy-bs-toggle')); + } + }); } - inited = true; - // enables toggling via ESC - document.addEventListener('keyup', function(e) { - if (e.keyCode === 27 && !e.shiftKey && !e.altKey && !e.ctrlKey && !e.metaKey) { // ESC - Tracy.Toggle.toggle(document.getElementById('tracy-bs-toggle')); + static loadAjax(content, dumps) { + var ajaxBs = document.getElementById('tracy-bs'); + if (ajaxBs) { + ajaxBs.parentNode.removeChild(ajaxBs); } - }); - }; - - BlueScreen.loadAjax = function(content, dumps) { - var ajaxBs = document.getElementById('tracy-bs'); - if (ajaxBs) { - ajaxBs.parentNode.removeChild(ajaxBs); + document.body.insertAdjacentHTML('beforeend', content); + ajaxBs = document.getElementById('tracy-bs'); + Tracy.Dumper.init(dumps, ajaxBs); + BlueScreen.init(true); + window.scrollTo(0, 0); } - document.body.insertAdjacentHTML('beforeend', content); - ajaxBs = document.getElementById('tracy-bs'); - Tracy.Dumper.init(dumps, ajaxBs); - BlueScreen.init(true); - window.scrollTo(0, 0); - }; + } + var inited; + + Tracy = window.Tracy || {}; + Tracy.BlueScreen = BlueScreen; })(); diff --git a/src/Tracy/assets/Toggle/toggle.js b/src/Tracy/assets/Toggle/toggle.js index e198d24c4..c5b2d2018 100644 --- a/src/Tracy/assets/Toggle/toggle.js +++ b/src/Tracy/assets/Toggle/toggle.js @@ -3,102 +3,105 @@ */ (function() { - Tracy = window.Tracy || {}; - - Tracy.Toggle = Tracy.Toggle || {}; // enables or toggling - Tracy.Toggle.init = function() { - document.documentElement.addEventListener('click', function(e) { - var el = e.target.closest('.tracy-toggle'); - if (el && !e.shiftKey && !e.altKey && !e.ctrlKey && !e.metaKey) { - Tracy.Toggle.toggle(el); - } - }); - this.init = function() {}; - }; + class Toggle + { + static init() { + document.documentElement.addEventListener('click', function(e) { + var el = e.target.closest('.tracy-toggle'); + if (el && !e.shiftKey && !e.altKey && !e.ctrlKey && !e.metaKey) { + Toggle.toggle(el); + } + }); + this.init = function() {}; + } - // changes element visibility - Tracy.Toggle.toggle = function(el, show) { - var collapsed = el.classList.contains('tracy-collapsed'), - ref = el.getAttribute('data-tracy-ref') || el.getAttribute('href', 2), - dest = el; + // changes element visibility + static toggle(el, show) { + var collapsed = el.classList.contains('tracy-collapsed'), + ref = el.getAttribute('data-tracy-ref') || el.getAttribute('href', 2), + dest = el; - if (typeof show === 'undefined') { - show = collapsed; - } else if (!show === collapsed) { - return; - } + if (typeof show === 'undefined') { + show = collapsed; + } else if (!show === collapsed) { + return; + } - if (!ref || ref === '#') { - ref = '+'; - } else if (ref.substr(0, 1) === '#') { - dest = document; - } - ref = ref.match(/(\^\s*([^+\s]*)\s*)?(\+\s*(\S*)\s*)?(.*)/); - dest = ref[1] ? dest.parentNode : dest; - dest = ref[2] ? dest.closest(ref[2]) : dest; - dest = ref[3] ? nextElement(dest.nextElementSibling, ref[4]) : dest; - dest = ref[5] ? dest.querySelector(ref[5]) : dest; - - el.classList.toggle('tracy-collapsed', !show); - dest.classList.toggle('tracy-collapsed', !show); - - if (typeof window.Event === 'function') { - var toggleEvent = new Event('tracy-toggle', {bubbles: true}); - } else { - toggleEvent = document.createEvent('Event'); - toggleEvent.initEvent('tracy-toggle', true, false); + if (!ref || ref === '#') { + ref = '+'; + } else if (ref.substr(0, 1) === '#') { + dest = document; + } + ref = ref.match(/(\^\s*([^+\s]*)\s*)?(\+\s*(\S*)\s*)?(.*)/); + dest = ref[1] ? dest.parentNode : dest; + dest = ref[2] ? dest.closest(ref[2]) : dest; + dest = ref[3] ? Toggle.nextElement(dest.nextElementSibling, ref[4]) : dest; + dest = ref[5] ? dest.querySelector(ref[5]) : dest; + + el.classList.toggle('tracy-collapsed', !show); + dest.classList.toggle('tracy-collapsed', !show); + + if (typeof window.Event === 'function') { + var toggleEvent = new Event('tracy-toggle', {bubbles: true}); + } else { + toggleEvent = document.createEvent('Event'); + toggleEvent.initEvent('tracy-toggle', true, false); + } + el.dispatchEvent(toggleEvent); } - el.dispatchEvent(toggleEvent); - }; - // save & restore toggles - Tracy.Toggle.persist = function(baseEl, restore) { - var saved = []; - baseEl.addEventListener('tracy-toggle', function(e) { - if (saved.indexOf(e.target) < 0) { - saved.push(e.target); - } - }); - - var toggles = JSON.parse(sessionStorage.getItem('tracy-toggles-' + baseEl.id)); - if (toggles && restore !== false) { - toggles.forEach(function(item) { - var el = baseEl; - for (var i in item.path) { - if (!(el = el.children[item.path[i]])) { - return; - } - } - if (el.textContent === item.text) { - Tracy.Toggle.toggle(el, item.show); + // save & restore toggles + static persist(baseEl, restore) { + var saved = []; + baseEl.addEventListener('tracy-toggle', function(e) { + if (saved.indexOf(e.target) < 0) { + saved.push(e.target); } }); - } - window.addEventListener('unload', function() { - toggles = [].map.call(saved, function(el) { - var item = {path: [], text: el.textContent, show: !el.classList.contains('tracy-collapsed')}; - do { - item.path.unshift([].indexOf.call(el.parentNode.children, el)); - el = el.parentNode; - } while (el && el !== baseEl); - return item; + var toggles = JSON.parse(sessionStorage.getItem('tracy-toggles-' + baseEl.id)); + if (toggles && restore !== false) { + toggles.forEach(function(item) { + var el = baseEl; + for (var i in item.path) { + if (!(el = el.children[item.path[i]])) { + return; + } + } + if (el.textContent === item.text) { + Toggle.toggle(el, item.show); + } + }); + } + + window.addEventListener('unload', function() { + toggles = [].map.call(saved, function(el) { + var item = {path: [], text: el.textContent, show: !el.classList.contains('tracy-collapsed')}; + do { + item.path.unshift([].indexOf.call(el.parentNode.children, el)); + el = el.parentNode; + } while (el && el !== baseEl); + return item; + }); + sessionStorage.setItem('tracy-toggles-' + baseEl.id, JSON.stringify(toggles)); }); - sessionStorage.setItem('tracy-toggles-' + baseEl.id, JSON.stringify(toggles)); - }); - }; + } - // finds next matching element - function nextElement(el, selector) { - while (el && selector && !el.matches(selector)) { - el = el.nextElementSibling; + // finds next matching element + static nextElement(el, selector) { + while (el && selector && !el.matches(selector)) { + el = el.nextElementSibling; + } + return el; } - return el; } + + Tracy = window.Tracy || {}; + Tracy.Toggle = Toggle; })();