element <div id=tracy-debug> is created by JS (in this case BODY may …

…not exist)
kratkyzobak · Feb 19, 2017 · d28e65e · d28e65e
1 parent a8489ba
commit d28e65e
Show file tree

Hide file tree

Showing 5 changed files with 21 additions and 17 deletions.
diff --git a/src/Tracy/assets/Bar/bar.css b/src/Tracy/assets/Bar/bar.css
@@ -14,7 +14,7 @@ body#tracy-debug { /* in popup window */
 	display: block;
 }
 
-body #tracy-debug {
+#tracy-debug:not(body) {
 	position: absolute;
 	bottom: 0;
 	right: 0;

diff --git a/src/Tracy/assets/Bar/bar.js b/src/Tracy/assets/Bar/bar.js
@@ -5,10 +5,13 @@
 (function(){
 	Tracy = window.Tracy || {};
 
-	var layer = document.getElementById('tracy-debug');
+	if (document.currentScript) {
+		var nonce = document.currentScript.getAttribute('nonce');
+		var contentId = document.currentScript.dataset.id;
+	}
 
 	Tracy.getAjaxHeader = function() {
-		return layer.dataset.id;
+		return contentId;
 	};
 
 	var Panel = Tracy.DebugPanel = function(id) {
@@ -310,11 +313,13 @@
 			throw new Error('Tracy requires IE 11+');
 		}
 
-		document.body.appendChild(layer);
-		layer.innerHTML = content;
-		evalScripts(layer);
+		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();
-		layer.style.display = 'block';
+		Debug.layer.style.display = 'block';
 		Debug.bar.init();
 
 		forEach(document.querySelectorAll('.tracy-panel'), function(panel) {
@@ -328,7 +333,7 @@
 	};
 
 	Debug.loadAjax = function(content, dumps) {
-		forEach(layer.querySelectorAll('.tracy-panel.tracy-ajax'), function(panel) {
+		forEach(Debug.layer.querySelectorAll('.tracy-panel.tracy-ajax'), function(panel) {
 			Debug.panels[panel.id].savePosition();
 			delete Debug.panels[panel.id];
 			panel.parentNode.removeChild(panel);
@@ -339,8 +344,8 @@
 			ajaxBar.parentNode.removeChild(ajaxBar);
 		}
 
-		layer.insertAdjacentHTML('beforeend', content);
-		evalScripts(layer);
+		Debug.layer.insertAdjacentHTML('beforeend', content);
+		evalScripts(Debug.layer);
 		ajaxBar = document.getElementById('tracy-ajax-bar');
 		document.getElementById(Bar.prototype.id).appendChild(ajaxBar);
 
@@ -398,7 +403,7 @@
 		}
 		Debug.scriptElem = document.createElement('script');
 		Debug.scriptElem.src = url;
-		Debug.scriptElem.setAttribute('nonce', layer.dataset.nonce);
+		Debug.scriptElem.setAttribute('nonce', nonce);
 		document.documentElement.appendChild(Debug.scriptElem);
 	};
 
@@ -407,8 +412,8 @@
 			if ((!script.hasAttribute('type') || script.type === 'text/javascript' || script.type === 'application/javascript') && !script.tracyEvaluated) {
 				var dolly = script.ownerDocument.createElement('script');
 				dolly.textContent = script.textContent;
-				dolly.setAttribute('nonce', layer.dataset.nonce);
-				script.ownerDocument.body.appendChild(dolly);
+				dolly.setAttribute('nonce', nonce);
+				script.ownerDocument.documentElement.appendChild(dolly);
 				script.tracyEvaluated = true;
 			}
 		});

diff --git a/src/Tracy/assets/Bar/loader.phtml b/src/Tracy/assets/Bar/loader.phtml
@@ -20,9 +20,8 @@ $nonceAttr = $nonce ? ' nonce="' . Helpers::escapeHtml($nonce) . '"' : '';
 
 
 <!-- Tracy Debug Bar -->
-<div id="tracy-debug" data-id="<?= Helpers::escapeHtml($contentId) ?>" data-nonce="<?= $nonce ?>"></div>
 <?php if ($contentId): ?>
-<script src="?_tracy_bar=<?= urlencode("content.$contentId") ?>&amp;XDEBUG_SESSION_STOP=1"<?= $nonceAttr ?>></script>
+<script src="?_tracy_bar=<?= urlencode("content.$contentId") ?>&amp;XDEBUG_SESSION_STOP=1" data-id="<?= Helpers::escapeHtml($contentId) ?>"<?= $nonceAttr ?>></script>
 <?php else: ?>
 <script src="?_tracy_bar=js&amp;v=<?= urlencode(Debugger::VERSION) ?>&amp;XDEBUG_SESSION_STOP=1"<?= $nonceAttr ?>></script>
 <script<?= $nonceAttr ?>>

diff --git a/src/Tracy/assets/Dumper/dumper.js b/src/Tracy/assets/Dumper/dumper.js
@@ -31,7 +31,7 @@
 		this.inited = true;
 
 		// enables <span data-tracy-href=""> & ctrl key
-		document.body.addEventListener('click', function(e) {
+		document.documentElement.addEventListener('click', function(e) {
 			var el;
 			if (e.ctrlKey && (el = Tracy.closest(e.target, '[data-tracy-href]'))) {
 				location.href = el.getAttribute('data-tracy-href');

diff --git a/src/Tracy/assets/Toggle/toggle.js b/src/Tracy/assets/Toggle/toggle.js
@@ -9,7 +9,7 @@
 
 	// enables <a class="tracy-toggle" href="#"> or <span data-tracy-ref="#"> toggling
 	Tracy.Toggle.init = function() {
-		document.body.addEventListener('click', function(e) {
+		document.documentElement.addEventListener('click', function(e) {
 			var el = Tracy.closest(e.target, '.tracy-toggle');
 			if (el && !e.shiftKey && !e.altKey && !e.ctrlKey && !e.metaKey) {
 				Tracy.Toggle.toggle(el);