Revert "Bar: JS & CSS is cached in localStorage (#226)" [Closes #228]

JS is now loaded synchronously so Tracy is loaded before DOMContentLoaded. This reverts commit 9dd9ebf.
nette · Dec 7, 2016 · af8b40f · af8b40f
1 parent cf59d9c
commit af8b40f
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 44 deletions.
diff --git a/src/Tracy/Bar.php b/src/Tracy/Bar.php
@@ -100,7 +100,7 @@ public function render()
 		}
 
 		if (Helpers::isHtmlMode()) {
-			$baseUrl = extension_loaded('xdebug') ? '?XDEBUG_SESSION_STOP=1&' : '?';
+			$stopXdebug = extension_loaded('xdebug') ? ['XDEBUG_SESSION_STOP' => 1] : [];
 			require __DIR__ . '/assets/Bar/loader.phtml';
 		}
 	}
@@ -155,22 +155,27 @@ private function renderPanels($suffix = NULL)
 	 */
 	public function dispatchAssets()
 	{
-		if (isset($_GET['_tracy_bar']) && $_GET['_tracy_bar'] === 'assets') {
+		$asset = isset($_GET['_tracy_bar']) ? $_GET['_tracy_bar'] : NULL;
+		if ($asset === 'css') {
+			header('Content-Type: text/css; charset=utf-8');
+			header('Cache-Control: max-age=864000');
+			header_remove('Pragma');
+			header_remove('Set-Cookie');
+			readfile(__DIR__ . '/assets/Bar/bar.css');
+			readfile(__DIR__ . '/assets/Toggle/toggle.css');
+			readfile(__DIR__ . '/assets/Dumper/dumper.css');
+			readfile(__DIR__ . '/assets/BlueScreen/bluescreen.css');
+			return TRUE;
+
+		} elseif ($asset === 'js') {
 			header('Content-Type: text/javascript');
 			header('Cache-Control: max-age=864000');
 			header_remove('Pragma');
 			header_remove('Set-Cookie');
-			$css = file_get_contents(__DIR__ . '/assets/Bar/bar.css')
-				. file_get_contents(__DIR__ . '/assets/Toggle/toggle.css')
-				. file_get_contents(__DIR__ . '/assets/Dumper/dumper.css')
-				. file_get_contents(__DIR__ . '/assets/BlueScreen/bluescreen.css');
-			$js = file_get_contents(__DIR__ . '/assets/Bar/bar.js')
-				. file_get_contents(__DIR__ . '/assets/Toggle/toggle.js')
-				. file_get_contents(__DIR__ . '/assets/Dumper/dumper.js')
-				. file_get_contents(__DIR__ . '/assets/BlueScreen/bluescreen.js');
-			echo 'localStorage.setItem("tracy-style", ' . json_encode($css) . ');';
-			echo 'localStorage.setItem("tracy-script", ' . json_encode($js) . ');';
-			echo 'localStorage.setItem("tracy-version", ' . json_encode(Debugger::VERSION) . ');';
+			readfile(__DIR__ . '/assets/Bar/bar.js');
+			readfile(__DIR__ . '/assets/Toggle/toggle.js');
+			readfile(__DIR__ . '/assets/Dumper/dumper.js');
+			readfile(__DIR__ . '/assets/BlueScreen/bluescreen.js');
 			return TRUE;
 		}
 	}

diff --git a/src/Tracy/assets/Bar/bar.js b/src/Tracy/assets/Bar/bar.js
@@ -141,17 +141,16 @@
 		}
 
 		function escape(s) {
-			return s.replace(/<\//g, '<\\\/');
+			return s.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/"/g, '&quot;');
 		}
 
 		var doc = win.document;
 		doc.write('<!DOCTYPE html><meta charset="utf-8">'
-			+ '<style>' + escape(localStorage.getItem('tracy-style')) + '</style>'
-			+ '<script>' + escape(localStorage.getItem('tracy-script')) + '</script>'
+			+ '<link rel="stylesheet" href="' + escape(document.getElementById('tracy-debug-style').href) + '">'
+			+ '<script src="' + escape(document.getElementById('tracy-debug-script').src) + '" onload="Tracy.Dumper.init()" async><\/script>'
 			+ '<body id="tracy-debug">'
 		);
-		doc.body.innerHTML = '<div class="tracy-panel tracy-mode-window" id="' + this.elem.id + '">' + this.elem.innerHTML + '<\/div>'
-			+ '<script>Tracy.Dumper.init()</script>';
+		doc.body.innerHTML = '<div class="tracy-panel tracy-mode-window" id="' + this.elem.id + '">' + this.elem.innerHTML + '<\/div>';
 		evalScripts(doc.body, win);
 		if (this.elem.querySelector('h1')) {
 			doc.title = this.elem.querySelector('h1').textContent;
@@ -315,6 +314,10 @@
 	Debug.panels = {};
 
 	Debug.init = function(content, dumps) {
+		if (!document.documentElement.dataset) {
+			throw new Error('Tracy requires IE 11+');
+		}
+
 		layer.innerHTML = content;
 		evalScripts(layer);
 		Tracy.Dumper.init();

diff --git a/src/Tracy/assets/Bar/loader.phtml b/src/Tracy/assets/Bar/loader.phtml
@@ -20,32 +20,12 @@ use Tracy;
 
 <!-- Tracy Debug Bar -->
 <div id="tracy-debug" data-id="<?= htmlspecialchars($contentId) ?>"></div>
-<script>
-(function(){
-	if (!document.documentElement.dataset) {
-		throw new Error('Tracy requires IE 11+');
-	} else if (localStorage.getItem('tracy-style') && localStorage.getItem('tracy-script') && localStorage.getItem('tracy-version') === <?= json_encode(Debugger::VERSION) ?>) {
-		start();
-	} else {
-		create('script', {src: <?= json_encode($baseUrl . http_build_query(['_tracy_bar' => 'assets', 'v' => Debugger::VERSION], NULL, '&')) ?>, onload: start});
-	}
-
-	function start() {
-		create('style', {textContent: localStorage.getItem('tracy-style'), className: 'tracy-debug'});
-		create('script', {textContent: localStorage.getItem('tracy-script')});
+<link rel="stylesheet" href="?<?=http_build_query(['_tracy_bar' => 'css', 'v' => Debugger::VERSION] + $stopXdebug, NULL, '&amp;')?>" id="tracy-debug-style" class="tracy-debug" />
+<script src="?<?=http_build_query(['_tracy_bar' => 'js', 'v' => Debugger::VERSION] + $stopXdebug, NULL, '&amp;')?>" id="tracy-debug-script"></script>
 <?php if ($contentId): ?>
-		create('script', {src: <?= json_encode($baseUrl . http_build_query(['_tracy_bar' => "content.$contentId"], NULL, '&')) ?>});
+<script src="?<?=http_build_query(['_tracy_bar' => "content.$contentId"] + $stopXdebug, NULL, '&amp;')?>"></script>
 <?php else: ?>
-		Tracy.Debug.init(<?= json_encode($content) ?>, <?= json_encode($dumps) ?>);
-<?php endif ?>
-	}
-
-	function create(name, props) {
-		var el = document.createElement(name);
-		for (var id in props) {
-			el[id] = props[id];
-		}
-		document.head.appendChild(el);
-	}
-})();
+<script>
+Tracy.Debug.init(<?= json_encode($content) ?>, <?= json_encode($dumps) ?>);
 </script>
+<?php endif ?>