Skip to content

Commit 9dd9ebf

Browse files
dgdg
authored
Bar: JS & CSS is cached in localStorage (#226)
1 parent 3dee30f commit 9dd9ebf

3 files changed

Lines changed: 44 additions & 32 deletions

File tree

‎src/Tracy/Bar.php‎

Lines changed: 13 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -100,7 +100,7 @@ public function render()
100100
}
101101

102102
if (Helpers::isHtmlMode()) {
103-
$stopXdebug = extension_loaded('xdebug') ? ['XDEBUG_SESSION_STOP' => 1] : [];
103+
$baseUrl = extension_loaded('xdebug') ? '?XDEBUG_SESSION_STOP=1&' : '?';
104104
require __DIR__ . '/assets/Bar/loader.phtml';
105105
}
106106
}
@@ -155,27 +155,22 @@ private function renderPanels($suffix = NULL)
155155
*/
156156
public function dispatchAssets()
157157
{
158-
$asset = isset($_GET['_tracy_bar']) ? $_GET['_tracy_bar'] : NULL;
159-
if ($asset === 'css') {
160-
header('Content-Type: text/css; charset=utf-8');
161-
header('Cache-Control: max-age=864000');
162-
header_remove('Pragma');
163-
header_remove('Set-Cookie');
164-
readfile(__DIR__ . '/assets/Bar/bar.css');
165-
readfile(__DIR__ . '/assets/Toggle/toggle.css');
166-
readfile(__DIR__ . '/assets/Dumper/dumper.css');
167-
readfile(__DIR__ . '/assets/BlueScreen/bluescreen.css');
168-
return TRUE;
169-
170-
} elseif ($asset === 'js') {
158+
if (isset($_GET['_tracy_bar']) && $_GET['_tracy_bar'] === 'assets') {
171159
header('Content-Type: text/javascript');
172160
header('Cache-Control: max-age=864000');
173161
header_remove('Pragma');
174162
header_remove('Set-Cookie');
175-
readfile(__DIR__ . '/assets/Bar/bar.js');
176-
readfile(__DIR__ . '/assets/Toggle/toggle.js');
177-
readfile(__DIR__ . '/assets/Dumper/dumper.js');
178-
readfile(__DIR__ . '/assets/BlueScreen/bluescreen.js');
163+
$css = file_get_contents(__DIR__ . '/assets/Bar/bar.css')
164+
. file_get_contents(__DIR__ . '/assets/Toggle/toggle.css')
165+
. file_get_contents(__DIR__ . '/assets/Dumper/dumper.css')
166+
. file_get_contents(__DIR__ . '/assets/BlueScreen/bluescreen.css');
167+
$js = file_get_contents(__DIR__ . '/assets/Bar/bar.js')
168+
. file_get_contents(__DIR__ . '/assets/Toggle/toggle.js')
169+
. file_get_contents(__DIR__ . '/assets/Dumper/dumper.js')
170+
. file_get_contents(__DIR__ . '/assets/BlueScreen/bluescreen.js');
171+
echo 'localStorage.setItem("tracy-style", ' . json_encode($css) . ');';
172+
echo 'localStorage.setItem("tracy-script", ' . json_encode($js) . ');';
173+
echo 'localStorage.setItem("tracy-version", ' . json_encode(Debugger::VERSION) . ');';
179174
return TRUE;
180175
}
181176
}

‎src/Tracy/assets/Bar/bar.js‎

Lines changed: 5 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -141,16 +141,17 @@
141141
}
142142

143143
function escape(s) {
144-
return s.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/"/g, '&quot;');
144+
return s.replace(/<\//g, '<\\\/');
145145
}
146146

147147
var doc = win.document;
148148
doc.write('<!DOCTYPE html><meta charset="utf-8">'
149-
+ '<link rel="stylesheet" href="' + escape(document.getElementById('tracy-debug-style').href) + '">'
150-
+ '<script src="' + escape(document.getElementById('tracy-debug-script').src) + '" onload="Tracy.Dumper.init()" async><\/script>'
149+
+ '<style>' + escape(localStorage.getItem('tracy-style')) + '</style>'
150+
+ '<script>' + escape(localStorage.getItem('tracy-script')) + '</script>'
151151
+ '<body id="tracy-debug">'
152+
+ '<div class="tracy-panel tracy-mode-window" id="' + this.elem.id + '">' + this.elem.innerHTML + '</div>'
153+
+ '<script>Tracy.Dumper.init()</script>'
152154
);
153-
doc.body.innerHTML = '<div class="tracy-panel tracy-mode-window" id="' + this.elem.id + '">' + this.elem.innerHTML + '<\/div>';
154155
evalScripts(doc.body, win);
155156
if (this.elem.querySelector('h1')) {
156157
doc.title = this.elem.querySelector('h1').textContent;
@@ -314,10 +315,6 @@
314315
Debug.panels = {};
315316

316317
Debug.init = function(content, dumps) {
317-
if (!document.documentElement.dataset) {
318-
throw new Error('Tracy requires IE 11+');
319-
}
320-
321318
layer.innerHTML = content;
322319
evalScripts(layer);
323320
Tracy.Dumper.init();

‎src/Tracy/assets/Bar/loader.phtml‎

Lines changed: 26 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -20,12 +20,32 @@ use Tracy;
2020

2121
<!-- Tracy Debug Bar -->
2222
<div id="tracy-debug" data-id="<?= htmlspecialchars($contentId) ?>"></div>
23-
<link rel="stylesheet" href="?<?=http_build_query(['_tracy_bar' => 'css', 'v' => Debugger::VERSION] + $stopXdebug, NULL, '&amp;')?>" id="tracy-debug-style" class="tracy-debug" />
24-
<script src="?<?=http_build_query(['_tracy_bar' => 'js', 'v' => Debugger::VERSION] + $stopXdebug, NULL, '&amp;')?>" id="tracy-debug-script"></script>
23+
<script>
24+
(function(){
25+
if (!document.documentElement.dataset) {
26+
throw new Error('Tracy requires IE 11+');
27+
} else if (localStorage.getItem('tracy-style') && localStorage.getItem('tracy-script') && localStorage.getItem('tracy-version') === <?= json_encode(Debugger::VERSION) ?>) {
28+
start();
29+
} else {
30+
create('script', {src: <?= json_encode($baseUrl . http_build_query(['_tracy_bar' => 'assets', 'v' => Debugger::VERSION], NULL, '&')) ?>, onload: start});
31+
}
32+
33+
function start() {
34+
create('style', {textContent: localStorage.getItem('tracy-style'), className: 'tracy-debug'});
35+
create('script', {textContent: localStorage.getItem('tracy-script')});
2536
<?php if ($contentId): ?>
26-
<script src="?<?=http_build_query(['_tracy_bar' => "content.$contentId"] + $stopXdebug, NULL, '&amp;')?>"></script>
37+
create('script', {src: <?= json_encode($baseUrl . http_build_query(['_tracy_bar' => "content.$contentId"], NULL, '&')) ?>});
2738
<?php else: ?>
28-
<script>
29-
Tracy.Debug.init(<?= json_encode($content) ?>, <?= json_encode($dumps) ?>);
30-
</script>
39+
Tracy.Debug.init(<?= json_encode($content) ?>, <?= json_encode($dumps) ?>);
3140
<?php endif ?>
41+
}
42+
43+
function create(name, props) {
44+
var el = document.createElement(name);
45+
for (var id in props) {
46+
el[id] = props[id];
47+
}
48+
document.head.appendChild(el);
49+
}
50+
})();
51+
</script>

0 commit comments

Comments
 (0)