Skip to content

Commit afca3f9

Browse files
dgdg
committed
removed inner containers and ID-based CSS scoping from Bar and BlueScreen
1 parent 8383822 commit afca3f9

14 files changed

Lines changed: 202 additions & 183 deletions

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

Lines changed: 57 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -4,44 +4,49 @@
44

55
/* shadow DOM host */
66
:host {
7-
display: contents;
8-
}
9-
10-
/* common styles */
11-
#tracy-debug {
127
--tracy-space: 10px;
13-
display: none;
148
direction: ltr;
9+
display: none;
1510
}
1611

17-
body#tracy-debug { /* in popup window */
12+
body.tracy-debug { /* in popup window */
1813
display: block;
1914
}
2015

21-
#tracy-debug:not(body) {
22-
position: absolute;
23-
left: 0;
24-
top: 0;
25-
}
16+
/* popup window overrides (higher specificity to beat bluescreen bare selectors) */
17+
body.tracy-debug a { color: #125EAE; text-decoration: none; padding: 0; margin: 0; }
18+
body.tracy-debug a:hover,
19+
body.tracy-debug a:focus { background-color: #125EAE; color: white; }
20+
body.tracy-debug h1 { font: normal normal 23px/1.4 Tahoma, sans-serif; line-height: 1; color: #575753; margin: 0; }
21+
body.tracy-debug h2,
22+
body.tracy-debug h3 { font-size: inherit; font-weight: bold; }
23+
body.tracy-debug table { background: #FDF5CE; width: 100%; }
24+
body.tracy-debug td,
25+
body.tracy-debug th { border: 1px solid #E6DFBF; padding: 2px 5px; vertical-align: top; text-align: left; }
26+
body.tracy-debug th { background: #F4F3F1; color: #655E5E; font-size: 90%; font-weight: bold; }
27+
body.tracy-debug pre,
28+
body.tracy-debug code { font: 9pt/1.5 Consolas, monospace; }
29+
body.tracy-debug svg { display: inline; }
2630

27-
#tracy-debug a {
31+
/* common styles */
32+
a {
2833
color: #125EAE;
2934
text-decoration: none;
3035
}
3136

32-
#tracy-debug a:hover,
33-
#tracy-debug a:focus {
37+
a:hover,
38+
a:focus {
3439
background-color: #125EAE;
3540
color: white;
3641
}
3742

38-
#tracy-debug h2,
39-
#tracy-debug h3 {
43+
h2,
44+
h3 {
4045
font-size: inherit;
4146
font-weight: bold;
4247
}
4348

44-
#tracy-debug :where(:is(
49+
:where(:is(
4550
h1, h2, h3, h4, h5, h6,
4651
p,
4752
ol, ul, dl,
@@ -53,44 +58,44 @@ body#tracy-debug { /* in popup window */
5358
margin-top: var(--tracy-space);
5459
}
5560

56-
#tracy-debug table {
61+
table {
5762
background: #FDF5CE;
5863
width: 100%;
5964
}
6065

61-
#tracy-debug tr:nth-child(2n) td {
66+
tr:nth-child(2n) td {
6267
background: rgba(0, 0, 0, 0.02);
6368
}
6469

65-
#tracy-debug td,
66-
#tracy-debug th {
70+
td,
71+
th {
6772
border: 1px solid #E6DFBF;
6873
padding: 2px 5px;
6974
vertical-align: top;
7075
text-align: left;
7176
}
7277

73-
#tracy-debug th {
78+
th {
7479
background: #F4F3F1;
7580
color: #655E5E;
7681
font-size: 90%;
7782
font-weight: bold;
7883
}
7984

80-
#tracy-debug pre,
81-
#tracy-debug code {
85+
pre,
86+
code {
8287
font: 9pt/1.5 Consolas, monospace;
8388
}
8489

85-
#tracy-debug table .tracy-right {
90+
table .tracy-right {
8691
text-align: right;
8792
}
8893

89-
#tracy-debug svg {
94+
svg {
9095
display: inline;
9196
}
9297

93-
#tracy-debug .tracy-dump {
98+
.tracy-dump {
9499
margin: 0;
95100
padding: 2px 5px;
96101
}
@@ -188,49 +193,49 @@ body#tracy-debug { /* in popup window */
188193

189194

190195
/* panels */
191-
#tracy-debug .tracy-panel {
196+
.tracy-panel {
192197
display: none;
193198
font: normal normal 12px/1.5 sans-serif;
194199
background: white;
195200
color: #333;
196201
text-align: left;
197202
}
198203

199-
body#tracy-debug .tracy-panel { /* in popup window */
204+
body.tracy-debug .tracy-panel { /* in popup window */
200205
display: block;
201206
}
202207

203-
#tracy-debug h1 {
208+
h1 {
204209
font: normal normal 23px/1.4 Tahoma, sans-serif;
205210
line-height: 1;
206211
color: #575753;
207212
margin: 0;
208213
word-wrap: break-word;
209214
}
210215

211-
#tracy-debug .tracy-inner {
216+
.tracy-inner {
212217
overflow: auto;
213218
flex: 1;
214219
}
215220

216-
#tracy-debug .tracy-panel .tracy-icons {
221+
.tracy-panel .tracy-icons {
217222
display: none;
218223
}
219224

220-
#tracy-debug .tracy-panel-ajax h1::after,
221-
#tracy-debug .tracy-panel-redirect h1::after {
225+
.tracy-panel-ajax h1::after,
226+
.tracy-panel-redirect h1::after {
222227
content: 'ajax';
223228
float: right;
224229
font-size: 65%;
225230
margin: 0 .3em;
226231
}
227232

228-
#tracy-debug .tracy-panel-redirect h1::after {
233+
.tracy-panel-redirect h1::after {
229234
content: 'redirect';
230235
}
231236

232-
#tracy-debug .tracy-mode-peek,
233-
#tracy-debug .tracy-mode-float {
237+
.tracy-mode-peek,
238+
.tracy-mode-float {
234239
position: fixed;
235240
flex-direction: column;
236241
padding: var(--tracy-space);
@@ -241,24 +246,24 @@ body#tracy-debug .tracy-panel { /* in popup window */
241246
border: 1px solid rgba(0, 0, 0, 0.1);
242247
}
243248

244-
#tracy-debug .tracy-mode-peek,
245-
#tracy-debug .tracy-mode-float:not(.tracy-panel-resized) {
249+
.tracy-mode-peek,
250+
.tracy-mode-float:not(.tracy-panel-resized) {
246251
max-width: 700px;
247252
max-height: 500px;
248253
}
249254

250255
@media (max-height: 555px) {
251-
#tracy-debug .tracy-mode-peek,
252-
#tracy-debug .tracy-mode-float:not(.tracy-panel-resized) {
256+
.tracy-mode-peek,
257+
.tracy-mode-float:not(.tracy-panel-resized) {
253258
max-height: 100vh;
254259
}
255260
}
256261

257-
#tracy-debug .tracy-mode-peek h1 {
262+
.tracy-mode-peek h1 {
258263
cursor: move;
259264
}
260265

261-
#tracy-debug .tracy-mode-float {
266+
.tracy-mode-float {
262267
display: flex;
263268
opacity: .95;
264269
transition: opacity 0.2s;
@@ -267,44 +272,44 @@ body#tracy-debug .tracy-panel { /* in popup window */
267272
resize: both;
268273
}
269274

270-
#tracy-debug .tracy-focused {
275+
.tracy-focused {
271276
display: flex;
272277
opacity: 1;
273278
transition: opacity 0.1s;
274279
}
275280

276-
#tracy-debug .tracy-mode-float h1 {
281+
.tracy-mode-float h1 {
277282
cursor: move;
278283
padding-right: 25px;
279284
}
280285

281-
#tracy-debug .tracy-mode-float .tracy-icons {
286+
.tracy-mode-float .tracy-icons {
282287
display: block;
283288
position: absolute;
284289
top: 0;
285290
right: 5px;
286291
font-size: 18px;
287292
}
288293

289-
#tracy-debug .tracy-mode-window {
294+
.tracy-mode-window {
290295
padding: var(--tracy-space);
291296
}
292297

293-
#tracy-debug .tracy-icons a {
298+
.tracy-icons a {
294299
color: #575753;
295300
}
296301

297-
#tracy-debug .tracy-icons a:hover {
302+
.tracy-icons a:hover {
298303
color: white;
299304
}
300305

301306

302-
#tracy-debug .tracy-inner-container {
307+
.tracy-inner-container {
303308
min-width: fit-content;
304309
}
305310

306311
@media print {
307-
#tracy-debug * {
312+
* {
308313
display: none;
309314
}
310315
}

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

Lines changed: 26 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ function getOption(key) {
2626
class Panel {
2727
constructor(id) {
2828
this.id = id;
29-
this.elem = Debug.layer.querySelector('#' + CSS.escape(this.id));
29+
this.elem = Debug.shadow.querySelector('#' + CSS.escape(this.id));
3030
this.elem.Tracy = this.elem.Tracy || {};
3131
}
3232

@@ -37,7 +37,7 @@ class Panel {
3737
this.init = function () {};
3838
elem.innerHTML = elem.tracyContent = elem.dataset.tracyContent;
3939
delete elem.dataset.tracyContent;
40-
Tracy.Dumper.init(Debug.layer);
40+
Tracy.Dumper.init(Debug.shadow);
4141
evalScripts(elem);
4242

4343
draggable(elem, {
@@ -154,7 +154,7 @@ class Panel {
154154
}
155155

156156
let doc = win.document;
157-
doc.write('<!DOCTYPE html><meta charset="utf-8"><body id="tracy-debug">');
157+
doc.write('<!DOCTYPE html><meta charset="utf-8"><body class="tracy-debug">');
158158

159159
let script = doc.createElement('script');
160160
script.src = baseUrl + '_tracy_bar=js&XDEBUG_SESSION_STOP=1';
@@ -163,10 +163,10 @@ class Panel {
163163
doc.head.appendChild(script);
164164

165165
let meta = this.elem.parentElement.lastElementChild;
166-
doc.body.innerHTML = '<tracy-div itemscope>'
166+
doc.body.innerHTML = '<div itemscope>'
167167
+ '<div class="tracy-panel tracy-mode-window" id="' + this.elem.id + '">' + this.elem.tracyContent + '</div>'
168168
+ meta.outerHTML
169-
+ '</tracy-div>';
169+
+ '</div>';
170170
evalScripts(doc.body);
171171
if (this.elem.querySelector('h1')) {
172172
doc.title = this.elem.querySelector('h1').textContent;
@@ -253,7 +253,7 @@ Panel.zIndexCounter = 1;
253253
class Bar {
254254
init() {
255255
this.id = 'tracy-debug-bar';
256-
this.elem = Debug.layer.querySelector('#' + this.id);
256+
this.elem = Debug.shadow.querySelector('#' + this.id);
257257

258258
draggable(this.elem, {
259259
handles: this.elem.querySelectorAll('li:first-child'),
@@ -357,7 +357,7 @@ class Bar {
357357

358358

359359
close() {
360-
Debug.layer.style.display = 'none';
360+
Debug.host.style.display = 'none';
361361
}
362362

363363

@@ -399,25 +399,28 @@ class Debug {
399399

400400
// Shadow DOM for CSS isolation
401401
let host = document.createElement('tracy-bar');
402+
Debug.host = host;
402403
let shadow = host.attachShadow({ mode: 'open' });
403404
Debug.shadow = shadow;
404405

405-
// Clone CSS from document.head into shadow root
406-
document.querySelectorAll('style.tracy-debug').forEach((s) => {
406+
// Clone CSS from document.head into shadow root (exclude BlueScreen CSS)
407+
document.querySelectorAll('style.tracy-debug:not(.tracy-bs-css)').forEach((s) => {
407408
shadow.appendChild(s.cloneNode(true));
408409
});
409410

410-
Debug.layer = document.createElement('tracy-div');
411-
Debug.layer.setAttribute('id', 'tracy-debug');
412-
Debug.layer.innerHTML = content;
413-
shadow.appendChild(Debug.layer);
411+
// Insert content directly into shadow root
412+
let temp = document.createElement('div');
413+
temp.innerHTML = content;
414+
while (temp.firstChild) {
415+
shadow.appendChild(temp.firstChild);
416+
}
414417

415418
(document.body || document.documentElement).appendChild(host);
416-
evalScripts(Debug.layer);
417-
Debug.layer.style.display = 'block';
419+
evalScripts(shadow);
420+
host.style.display = 'block';
418421
Debug.bar.init();
419422

420-
Debug.layer.querySelectorAll('.tracy-panel').forEach((panel) => {
423+
Debug.shadow.querySelectorAll('.tracy-panel').forEach((panel) => {
421424
Debug.panels[panel.id] = new Panel(panel.id);
422425
Debug.panels[panel.id].restorePosition();
423426
});
@@ -455,12 +458,16 @@ class Debug {
455458
});
456459
}
457460

458-
Debug.layer.insertAdjacentHTML('beforeend', content.panels);
459-
evalScripts(Debug.layer);
461+
let temp = document.createElement('div');
462+
temp.innerHTML = content.panels;
463+
while (temp.firstChild) {
464+
Debug.shadow.appendChild(temp.firstChild);
465+
}
466+
evalScripts(Debug.shadow);
460467
Debug.bar.elem.insertAdjacentHTML('beforeend', content.bar);
461468
let ajaxBar = Debug.bar.elem.querySelector('.tracy-row:last-child');
462469

463-
Debug.layer.querySelectorAll('.tracy-panel').forEach((panel) => {
470+
Debug.shadow.querySelectorAll('.tracy-panel').forEach((panel) => {
464471
if (!Debug.panels[panel.id]) {
465472
Debug.panels[panel.id] = new Panel(panel.id);
466473
Debug.panels[panel.id].restorePosition();

0 commit comments

Comments
 (0)