Skip to content

Commit fd5b797

Browse files
dgdg
committed
shadow dom for dumper [WIP]
1 parent 5569abc commit fd5b797

File tree

10 files changed

+76
-38
lines changed

10 files changed

+76
-38
lines changed

‎examples/assets/style.css‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -22,10 +22,8 @@ h2 {
2222
font-size: 140%;
2323
}
2424

25-
pre.tracy-dump {
25+
tracy-dump {
2626
border: 1px solid silver;
27-
padding: 1em;
28-
margin: 1em 0;
2927
}
3028

3129
a {

‎src/Tracy/BlueScreen/assets/bluescreen.js‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,10 +15,11 @@ class BlueScreen
1515
}
1616

1717
blueScreen.addEventListener('tracy-toggle', (e) => {
18-
if (e.target.matches('#tracy-bs-toggle')) { // blue screen toggle
18+
let target = e.composedPath()[0];
19+
if (target.matches('#tracy-bs-toggle')) { // blue screen toggle
1920
document.documentElement.classList.toggle('tracy-bs-visible', !e.detail.collapsed);
2021

21-
} else if (!e.target.matches('.tracy-dump *') && e.detail.originalEvent) { // panel toggle
22+
} else if (!target.matches('.tracy-dump *') && e.detail.originalEvent) { // panel toggle
2223
e.detail.relatedTarget.classList.toggle('tracy-panel-fadein', !e.detail.collapsed);
2324
}
2425
});

‎src/Tracy/Debugger/Debugger.php‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -495,8 +495,10 @@ public static function dump(mixed $var, bool $return = false): mixed
495495
: Helpers::capture(fn() => Dumper::dump($var, $options));
496496

497497
} elseif (!self::$productionMode) {
498-
$html = Helpers::isHtmlMode();
499-
echo $html ? '<tracy-div>' : '';
498+
if ($html = Helpers::isHtmlMode()) {
499+
Dumper::renderAssets();
500+
echo '<tracy-dump>';
501+
}
500502
Dumper::dump($var, [
501503
Dumper::DEPTH => self::$maxDepth,
502504
Dumper::TRUNCATE => self::$maxLength,
@@ -505,7 +507,7 @@ public static function dump(mixed $var, bool $return = false): mixed
505507
Dumper::THEME => self::$dumpTheme,
506508
Dumper::KEYS_TO_HIDE => self::$keysToHide,
507509
]);
508-
echo $html ? '</tracy-div>' : '';
510+
echo $html ? '</tracy-dump>' : '';
509511
}
510512

511513
return $var;

‎src/Tracy/Dumper/Dumper.php‎

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -103,7 +103,6 @@ public static function dump($var, array $options = []): mixed
103103

104104
} elseif (Helpers::isHtmlMode()) {
105105
$options[self::LOCATION] ??= true;
106-
self::renderAssets();
107106
echo self::toHtml($var, $options);
108107

109108
} else {
@@ -153,18 +152,18 @@ public static function renderAssets(): void
153152

154153
$sent = true;
155154

155+
echo '<template class=tracy-dump-template>';
156156
$nonce = Helpers::getNonce();
157157
$nonceAttr = $nonce ? ' nonce="' . Helpers::escapeHtml($nonce) . '"' : '';
158158
$s = file_get_contents(__DIR__ . '/../assets/toggle.css')
159159
. file_get_contents(__DIR__ . '/assets/dumper-light.css')
160160
. file_get_contents(__DIR__ . '/assets/dumper-dark.css');
161161
echo "<style{$nonceAttr}>", str_replace('</', '<\/', Helpers::minifyCss($s)), "</style>\n";
162+
echo "</template>\n";
162163

163-
if (!Debugger::isEnabled()) {
164-
$s = '(function(){' . file_get_contents(__DIR__ . '/../assets/toggle.js') . '})();'
165-
. '(function(){' . file_get_contents(__DIR__ . '/../Dumper/assets/dumper.js') . '})();';
166-
echo "<script{$nonceAttr}>", str_replace(['<!--', '</s'], ['<\!--', '<\/s'], Helpers::minifyJs($s)), "</script>\n";
167-
}
164+
$s = '(function(){' . file_get_contents(__DIR__ . '/../assets/toggle.js') . '})();'
165+
. '(function(){' . file_get_contents(__DIR__ . '/../Dumper/assets/dumper.js') . '})();';
166+
echo "<script{$nonceAttr}>", str_replace(['<!--', '</s'], ['<\!--', '<\/s'], Helpers::minifyJs($s)), "</script>\n";
168167
}
169168

170169

‎src/Tracy/Dumper/assets/dumper-dark.css‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,13 +2,18 @@
22
* This file is part of the Tracy (https://tracy.nette.org)
33
*/
44

5+
:host {
6+
display: block;
7+
margin: 1em 0;
8+
border-radius: 4px;
9+
}
10+
511
.tracy-dump.tracy-dark {
612
text-align: left;
713
color: #f8f8f2;
814
background: #29292e;
9-
border-radius: 4px;
15+
margin: 0;
1016
padding: 1em;
11-
margin: 1em 0;
1217
word-break: break-all;
1318
white-space: pre-wrap;
1419
}

‎src/Tracy/Dumper/assets/dumper-light.css‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,13 +2,18 @@
22
* This file is part of the Tracy (https://tracy.nette.org)
33
*/
44

5+
:host {
6+
display: block;
7+
margin: 1em 0;
8+
border-radius: 4px;
9+
}
10+
511
.tracy-dump.tracy-light {
612
text-align: left;
713
color: #444;
814
background: #fdf9e2;
9-
border-radius: 4px;
15+
margin: 0;
1016
padding: 1em;
11-
margin: 1em 0;
1217
word-break: break-all;
1318
white-space: pre-wrap;
1419
}

‎src/Tracy/Dumper/assets/dumper.js‎

Lines changed: 36 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -48,8 +48,9 @@ class Dumper
4848

4949
document.documentElement.addEventListener('click', (e) => {
5050
let el;
51+
let target = e.composedPath()[0];
5152
// enables <span data-tracy-href=""> & ctrl key
52-
if (e.ctrlKey && (el = e.target.closest('[data-tracy-href]'))) {
53+
if (e.ctrlKey && (el = target.closest('[data-tracy-href]'))) {
5354
location.href = el.getAttribute('data-tracy-href');
5455
return false;
5556
}
@@ -59,7 +60,7 @@ class Dumper
5960
document.documentElement.addEventListener('tracy-beforetoggle', (e) => {
6061
let el;
6162
// initializes lazy <span data-tracy-dump> inside <pre data-tracy-snapshot>
62-
if ((el = e.target.closest('[data-tracy-snapshot]'))) {
63+
if ((el = target.closest('[data-tracy-snapshot]'))) {
6364
let snapshot = JSON.parse(el.getAttribute('data-tracy-snapshot'));
6465
el.removeAttribute('data-tracy-snapshot');
6566
el.querySelectorAll('[data-tracy-dump]').forEach((toggler) => {
@@ -73,7 +74,8 @@ class Dumper
7374
});
7475

7576
document.documentElement.addEventListener('tracy-toggle', (e) => {
76-
if (!e.target.matches('.tracy-dump *')) {
77+
let target = e.composedPath()[0];
78+
if (!target.matches('.tracy-dump *')) {
7779
return;
7880
}
7981

@@ -86,12 +88,12 @@ class Dumper
8688

8789
} else if (origE && origE.altKey && cont.querySelector('.tracy-toggle')) { // triggered by alt key
8890
if (e.detail.collapsed) { // reopen
89-
e.target.classList.toggle('tracy-collapsed', false);
91+
target.classList.toggle('tracy-collapsed', false);
9092
cont.classList.toggle('tracy-collapsed', false);
9193
e.detail.collapsed = false;
9294
}
9395

94-
let expand = e.target.tracyAltExpand = !e.target.tracyAltExpand;
96+
let expand = target.tracyAltExpand = !target.tracyAltExpand;
9597
toggleChildren(cont, expand ? {} : false);
9698
}
9799

@@ -100,33 +102,36 @@ class Dumper
100102

101103
document.documentElement.addEventListener('animationend', (e) => {
102104
if (e.animationName === 'tracy-dump-flash') {
103-
e.target.classList.toggle('tracy-dump-flash', false);
105+
let target = e.composedPath()[0];
106+
target.classList.toggle('tracy-dump-flash', false);
104107
}
105108
});
106109

107110
document.addEventListener('mouseover', (e) => {
108-
if (!e.target.matches('.tracy-dump *')) {
111+
let target = e.composedPath()[0];
112+
if (!target.matches('.tracy-dump *')) {
109113
return;
110114
}
111115

112116
let el;
113117

114-
if (e.target.matches('.tracy-dump-hash') && (el = e.target.closest('tracy-div'))) {
118+
if (target.matches('.tracy-dump-hash') && (el = target.closest('tracy-div'))) {
115119
el.querySelectorAll('.tracy-dump-hash').forEach((el) => {
116-
if (el.textContent === e.target.textContent) {
120+
if (el.textContent === target.textContent) {
117121
el.classList.add('tracy-dump-highlight');
118122
}
119123
});
120124
return;
121125
}
122126

123-
if ((el = e.target.closest('.tracy-toggle')) && !el.title) {
127+
if ((el = target.closest('.tracy-toggle')) && !el.title) {
124128
el.title = HINT_ALT;
125129
}
126130
});
127131

128132
document.addEventListener('mouseout', (e) => {
129-
if (e.target.matches('.tracy-dump-hash')) {
133+
let target = e.composedPath()[0];
134+
if (target.matches('.tracy-dump-hash')) {
130135
document.querySelectorAll('.tracy-dump-hash.tracy-dump-highlight').forEach((el) => {
131136
el.classList.remove('tracy-dump-highlight');
132137
});
@@ -379,6 +384,26 @@ function toggleChildren(cont, usedIds) {
379384
function UnknownEntityException() {}
380385

381386

387+
class TracyDumpElement extends HTMLElement {
388+
constructor() {
389+
super();
390+
let templateContent = document.querySelector('.tracy-dump-template').content;
391+
this.attachShadow({mode: 'open'});
392+
this.shadowRoot.appendChild(templateContent.cloneNode(true));
393+
}
394+
395+
connectedCallback() {
396+
setTimeout(() => {
397+
while (this.firstElementChild) {
398+
this.shadowRoot.appendChild(this.firstElementChild);
399+
}
400+
});
401+
}
402+
}
403+
404+
window.customElements.define('tracy-dump', TracyDumpElement);
405+
406+
382407
let Tracy = window.Tracy = window.Tracy || {};
383408
Tracy.Dumper = Tracy.Dumper || Dumper;
384409

‎src/Tracy/assets/table-sort.js‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,9 @@ class TableSort
77
{
88
static init() {
99
document.documentElement.addEventListener('click', (e) => {
10-
if (e.target.matches('.tracy-sortable > :first-child > tr:first-child *')) {
11-
TableSort.sort(e.target.closest('td,th'));
10+
let target = e.composedPath()[0];
11+
if (target.matches('.tracy-sortable > :first-child > tr:first-child *')) {
12+
TableSort.sort(target.closest('td,th'));
1213
}
1314
});
1415

‎src/Tracy/assets/tabs.js‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,10 +8,11 @@ class Tabs
88
static init() {
99
document.documentElement.addEventListener('click', (e) => {
1010
let label, context;
11+
let target = e.composedPath()[0];
1112
if (
1213
!e.shiftKey && !e.ctrlKey && !e.metaKey
13-
&& (label = e.target.closest('.tracy-tab-label'))
14-
&& (context = e.target.closest('.tracy-tabs'))
14+
&& (label = target.closest('.tracy-tab-label'))
15+
&& (context = target.closest('.tracy-tabs'))
1516
) {
1617
Tabs.toggle(context, label);
1718
e.preventDefault();

‎src/Tracy/assets/toggle.js‎

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -14,10 +14,10 @@ class Toggle
1414
});
1515

1616
document.documentElement.addEventListener('click', (e) => {
17-
let el;
17+
let target = e.composedPath()[0];
18+
let el = target.closest('.tracy-toggle');
1819
if (
19-
!e.shiftKey && !e.ctrlKey && !e.metaKey
20-
&& (el = e.target.closest('.tracy-toggle'))
20+
el && !e.shiftKey && !e.ctrlKey && !e.metaKey
2121
&& Math.pow(start[0] - e.clientX, 2) + Math.pow(start[1] - e.clientY, 2) < MOVE_THRESHOLD
2222
) {
2323
Toggle.toggle(el, undefined, e);
@@ -69,8 +69,9 @@ class Toggle
6969
static persist(baseEl, restore) {
7070
let saved = [];
7171
baseEl.addEventListener('tracy-toggle', (e) => {
72-
if (saved.indexOf(e.target) < 0) {
73-
saved.push(e.target);
72+
let target = e.composedPath()[0];
73+
if (saved.indexOf(target) < 0) {
74+
saved.push(target);
7475
}
7576
});
7677

0 commit comments

Comments
 (0)