From 286344144e598cd16a5b5ae36d48511e43a8d3bd Mon Sep 17 00:00:00 2001
From: David Grudl <david@grudl.com>
Date: Fri, 18 Nov 2022 03:55:40 +0100
Subject: [PATCH] shadow dom for bluescreen [WIP]

---
 src/Tracy/BlueScreen/assets/bluescreen.css | 150 ++++++++++-----------
 src/Tracy/BlueScreen/assets/bluescreen.js  |   3 +-
 src/Tracy/BlueScreen/assets/content.phtml  |   8 +-
 src/Tracy/BlueScreen/assets/page.phtml     |  23 +++-
 4 files changed, 102 insertions(+), 82 deletions(-)

diff --git a/src/Tracy/BlueScreen/assets/bluescreen.css b/src/Tracy/BlueScreen/assets/bluescreen.css
index 7e007625f..8dd5f6a96 100644
--- a/src/Tracy/BlueScreen/assets/bluescreen.css
+++ b/src/Tracy/BlueScreen/assets/bluescreen.css
@@ -2,7 +2,7 @@
  * This file is part of the Tracy (https://tracy.nette.org)
  */
 
-:root {
+:host {
 	--tracy-space: 16px;
 }
 
@@ -18,7 +18,7 @@ html.tracy-bs-visible body {
 	overflow: auto;
 }
 
-#tracy-bs {
+:host {
 	font: 9pt/1.5 Verdana, sans-serif;
 	background: white;
 	color: #333;
@@ -30,19 +30,19 @@ html.tracy-bs-visible body {
 	text-align: left;
 }
 
-#tracy-bs a {
+a {
 	text-decoration: none;
 	color: #328ADC;
 	padding: 0 4px;
 	margin: 0 -4px;
 }
 
-#tracy-bs a + a {
+a + a {
 	margin-left: 0;
 }
 
-#tracy-bs a:hover,
-#tracy-bs a:focus {
+a:hover,
+a:focus {
 	color: #085AA3;
 }
 
@@ -70,44 +70,44 @@ html.tracy-bs-visible body {
 	display: none;
 }
 
-#tracy-bs p,
-#tracy-bs table,
-#tracy-bs pre,
-#tracy-bs h1,
-#tracy-bs h2,
-#tracy-bs h3 {
+p,
+table,
+pre,
+h1,
+h2,
+h3 {
 	margin: 0 0 var(--tracy-space);
 }
 
-#tracy-bs h1 {
+h1 {
 	font-size: 15pt;
 	font-weight: normal;
 	text-shadow: 1px 1px 2px rgba(0, 0, 0, .3);
 }
 
-#tracy-bs h1 span {
+h1 span {
 	white-space: pre-wrap;
 }
 
-#tracy-bs h2 {
+h2 {
 	font-size: 14pt;
 	font-weight: normal;
 	margin-top: var(--tracy-space);
 }
 
-#tracy-bs h3 {
+h3 {
 	font-size: 10pt;
 	font-weight: bold;
 }
 
-#tracy-bs pre,
-#tracy-bs code,
-#tracy-bs table {
+pre,
+code,
+table {
 	font: 9pt/1.5 Consolas, monospace !important;
 }
 
-#tracy-bs pre,
-#tracy-bs table {
+pre,
+table {
 	background: #FDF5CE;
 	padding: .4em .7em;
 	border: 2px solid #ffffffa6;
@@ -115,46 +115,46 @@ html.tracy-bs-visible body {
 	overflow: auto;
 }
 
-#tracy-bs table pre {
+table pre {
 	padding: 0;
 	margin: 0;
 	border: none;
 	box-shadow: none;
 }
 
-#tracy-bs table {
+table {
 	border-collapse: collapse;
 	width: 100%;
 }
 
-#tracy-bs td,
-#tracy-bs th {
+td,
+th {
 	vertical-align: top;
 	text-align: left;
 	padding: 2px 6px;
 	border: 1px solid #e6dfbf;
 }
 
-#tracy-bs th {
+th {
 	font-weight: bold;
 }
 
-#tracy-bs tr > :first-child {
+tr > :first-child {
 	width: 20%;
 }
 
-#tracy-bs tr:nth-child(2n),
-#tracy-bs tr:nth-child(2n) pre {
+tr:nth-child(2n),
+tr:nth-child(2n) pre {
 	background-color: #F7F0CB;
 }
 
-#tracy-bs .tracy-footer--sticky {
+.tracy-footer--sticky {
 	position: fixed;
 	width: 100%;
 	bottom: 0;
 }
 
-#tracy-bs footer ul {
+footer ul {
 	font-size: 7pt;
 	padding: var(--tracy-space);
 	margin: var(--tracy-space) 0 0;
@@ -164,11 +164,11 @@ html.tracy-bs-visible body {
 	list-style: none;
 }
 
-#tracy-bs .tracy-footer-logo {
+.tracy-footer-logo {
 	position: relative;
 }
 
-#tracy-bs .tracy-footer-logo a {
+.tracy-footer-logo a {
 	position: absolute;
 	bottom: 0;
 	right: 0;
@@ -180,19 +180,19 @@ html.tracy-bs-visible body {
 	margin: 0;
 }
 
-#tracy-bs .tracy-footer-logo a:hover,
-#tracy-bs .tracy-footer-logo a:focus {
+.tracy-footer-logo a:hover,
+.tracy-footer-logo a:focus {
 	opacity: 1;
 	transition: opacity 0.1s;
 }
 
 
-#tracy-bs .tracy-section {
+.tracy-section {
 	padding-left: calc(1.5 * var(--tracy-space));
 	padding-right: calc(1.5 * var(--tracy-space));
 }
 
-#tracy-bs .tracy-section-panel {
+.tracy-section-panel {
 	background: #F4F3F1;
 	padding: var(--tracy-space) var(--tracy-space) 0;
 	margin: 0 0 var(--tracy-space);
@@ -201,8 +201,8 @@ html.tracy-bs-visible body {
 	overflow: hidden;
 }
 
-#tracy-bs .outer, /* deprecated */
-#tracy-bs .tracy-pane {
+.outer, /* deprecated */
+.tracy-pane {
 	overflow: auto;
 }
 
@@ -212,62 +212,62 @@ html.tracy-bs-visible body {
 
 
 /* header */
-#tracy-bs .tracy-section--error {
+.tracy-section--error {
 	background: #CD1818;
 	color: white;
 	font-size: 13pt;
 	padding-top: var(--tracy-space);
 }
 
-#tracy-bs .tracy-section--error h1 {
+.tracy-section--error h1 {
 	color: white;
 }
 
-#tracy-bs .tracy-section--error::selection,
-#tracy-bs .tracy-section--error ::selection {
+.tracy-section--error::selection,
+.tracy-section--error ::selection {
 	color: black !important;
 	background: #FDF5CE !important;
 }
 
-#tracy-bs .tracy-section--error a {
+.tracy-section--error a {
 	color: #ffefa1 !important;
 }
 
-#tracy-bs .tracy-section--error span span {
+.tracy-section--error span span {
 	font-size: 80%;
 	color: rgba(255, 255, 255, 0.5);
 	text-shadow: none;
 }
 
-#tracy-bs .tracy-section--error a.tracy-action {
+.tracy-section--error a.tracy-action {
 	color: white !important;
 	opacity: 0;
 	font-size: .7em;
 	border-bottom: none !important;
 }
 
-#tracy-bs .tracy-section--error:hover a.tracy-action {
+.tracy-section--error:hover a.tracy-action {
 	opacity: .6;
 }
 
-#tracy-bs .tracy-section--error a.tracy-action:hover {
+.tracy-section--error a.tracy-action:hover {
 	opacity: 1;
 }
 
-#tracy-bs .tracy-section--error i {
+.tracy-section--error i {
 	color: #ffefa1;
 	font-style: normal;
 }
 
 
 /* source code */
-#tracy-bs pre.tracy-code > div {
+pre.tracy-code > div {
 	min-width: 100%;
 	float: left;
 	white-space: pre;
 }
 
-#tracy-bs .tracy-line-highlight {
+.tracy-line-highlight {
 	background: #CD1818;
 	color: white;
 	font-weight: bold;
@@ -277,38 +277,38 @@ html.tracy-bs-visible body {
 	margin: 0 -1ch;
 }
 
-#tracy-bs .tracy-column-highlight {
+.tracy-column-highlight {
 	display: inline-block;
 	backdrop-filter: grayscale(1);
 	margin: 0 -1px;
 	padding: 0 1px;
 }
 
-#tracy-bs .tracy-line {
+.tracy-line {
 	color: #9F9C7F;
 	font-weight: normal;
 	font-style: normal;
 }
 
-#tracy-bs a.tracy-editor {
+a.tracy-editor {
 	color: inherit;
 	border-bottom: 1px dotted rgba(0, 0, 0, .3);
 	border-radius: 3px;
 }
 
-#tracy-bs a.tracy-editor:hover {
+a.tracy-editor:hover {
 	background: #0001;
 }
 
-#tracy-bs span[data-tracy-href] {
+span[data-tracy-href] {
 	border-bottom: 1px dotted rgba(0, 0, 0, .3);
 }
 
-#tracy-bs .tracy-dump-whitespace {
+.tracy-dump-whitespace {
 	color: #0003;
 }
 
-#tracy-bs .tracy-caused {
+.tracy-caused {
 	float: right;
 	padding: .3em calc(1.5 * var(--tracy-space));
 	background: #df8075;
@@ -316,45 +316,45 @@ html.tracy-bs-visible body {
 	white-space: nowrap;
 }
 
-#tracy-bs .tracy-caused a {
+.tracy-caused a {
 	color: white;
 }
 
-#tracy-bs .tracy-callstack {
+.tracy-callstack {
 	display: grid;
 	grid-template-columns: max-content 1fr;
 	margin-bottom: calc(.5 * var(--tracy-space));
 }
 
-#tracy-bs .tracy-callstack-file {
+.tracy-callstack-file {
 	text-align: right;
 	padding-right: var(--tracy-space);
 	white-space: nowrap;
 	height: calc(1.5 * var(--tracy-space));
 }
 
-#tracy-bs .tracy-callstack-callee {
+.tracy-callstack-callee {
 	white-space: nowrap;
 	height: calc(1.5 * var(--tracy-space));
 }
 
-#tracy-bs .tracy-callstack-additional {
+.tracy-callstack-additional {
 	grid-column-start: 1;
 	grid-column-end: 3;
 }
 
-#tracy-bs .tracy-callstack-args tr:first-child > * {
+.tracy-callstack-args tr:first-child > * {
 	position: relative;
 }
 
-#tracy-bs .tracy-callstack-args tr:first-child td:before {
+.tracy-callstack-args tr:first-child td:before {
 	position: absolute;
 	right: .3em;
 	content: 'may not be true';
 	opacity: .4;
 }
 
-#tracy-bs .tracy-panel-fadein {
+.tracy-panel-fadein {
 	animation: tracy-panel-fadein .12s ease;
 }
 
@@ -364,26 +364,26 @@ html.tracy-bs-visible body {
 	}
 }
 
-#tracy-bs .tracy-section--causedby {
+.tracy-section--causedby {
 	flex-direction: column;
 	padding: 0;
 }
 
-#tracy-bs .tracy-section--causedby:not(.tracy-collapsed) {
+.tracy-section--causedby:not(.tracy-collapsed) {
 	display: flex;
 }
 
-#tracy-bs .tracy-section--causedby .tracy-section--error {
+.tracy-section--causedby .tracy-section--error {
 	background: #cd1818a6;
 }
 
-#tracy-bs .tracy-section--error + .tracy-section--stack {
+.tracy-section--error + .tracy-section--stack {
 	margin-top: calc(1.5 * var(--tracy-space));
 }
 
 
 /* tabs */
-#tracy-bs .tracy-tab-bar {
+.tracy-tab-bar {
 	display: flex;
 	list-style: none;
 	padding-left: 0;
@@ -392,11 +392,11 @@ html.tracy-bs-visible body {
 	font-size: 110%;
 }
 
-#tracy-bs .tracy-tab-bar > *:not(:first-child) {
+.tracy-tab-bar > *:not(:first-child) {
 	margin-left: var(--tracy-space);
 }
 
-#tracy-bs .tracy-tab-bar a {
+.tracy-tab-bar a {
 	display: block;
 	padding: calc(.5 * var(--tracy-space)) var(--tracy-space);
 	margin: 0;
@@ -407,11 +407,11 @@ html.tracy-bs-visible body {
 	transition: all 0.1s;
 }
 
-#tracy-bs .tracy-tab-bar > .tracy-active a {
+.tracy-tab-bar > .tracy-active a {
 	background: white;
 }
 
-#tracy-bs .tracy-tab-panel {
+.tracy-tab-panel {
 	border-top: 2px solid white;
 	padding-top: var(--tracy-space);
 	overflow: auto;
diff --git a/src/Tracy/BlueScreen/assets/bluescreen.js b/src/Tracy/BlueScreen/assets/bluescreen.js
index 42985fad7..cb4291bec 100644
--- a/src/Tracy/BlueScreen/assets/bluescreen.js
+++ b/src/Tracy/BlueScreen/assets/bluescreen.js
@@ -31,7 +31,7 @@ class BlueScreen
 			sessionStorage.setItem('tracy-toggles-bskey', id);
 		}
 
-		(new ResizeObserver(stickyFooter)).observe(blueScreen);
+		//(new ResizeObserver(stickyFooter)).observe(blueScreen);
 
 		if (document.documentElement.classList.contains('tracy-bs-visible')) {
 			window.scrollTo(0, 0);
@@ -76,3 +76,4 @@ function stickyFooter() {
 
 let Tracy = window.Tracy = window.Tracy || {};
 Tracy.BlueScreen = Tracy.BlueScreen || BlueScreen;
+
diff --git a/src/Tracy/BlueScreen/assets/content.phtml b/src/Tracy/BlueScreen/assets/content.phtml
index 107b6a0c4..f99948c5e 100644
--- a/src/Tracy/BlueScreen/assets/content.phtml
+++ b/src/Tracy/BlueScreen/assets/content.phtml
@@ -23,7 +23,11 @@ namespace Tracy;
  * @var \Fiber[] $fibers
  */
 ?>
-<tracy-div id="tracy-bs" itemscope>
+<tracy-bs id="tracy-bs" itemscope>
+	<style class="tracy-debug">
+	<?= str_replace('</', '<\/', $css) ?>
+	</style>
+
 	<a id="tracy-bs-toggle" href="#" class="tracy-toggle">&#xfeff;</a>
 	<div class="tracy-bs-main">
 <?php $ex = $exception; $exceptions = []; ?>
@@ -70,4 +74,4 @@ namespace Tracy;
 		</footer>
 	</div>
 	<meta itemprop=tracy-snapshot content=<?= Dumper::formatSnapshotAttribute($snapshot) ?>>
-</tracy-div>
+</tracy-bs>
diff --git a/src/Tracy/BlueScreen/assets/page.phtml b/src/Tracy/BlueScreen/assets/page.phtml
index 100bd670d..1b8859cad 100644
--- a/src/Tracy/BlueScreen/assets/page.phtml
+++ b/src/Tracy/BlueScreen/assets/page.phtml
@@ -28,14 +28,29 @@ $chain = Helpers::getExceptionChain($exception);
 	echo str_replace('--', '- ', Helpers::escapeHtml("\n\tcaused by " . Helpers::getClass($ex) . ': ' . $ex->getMessage() . ($ex->getCode() ? ' #' . $ex->getCode() : '')));
 } ?> -->
 <?php endif ?>
-
-	<style class="tracy-debug">
-	<?= str_replace('</', '<\/', $css) ?>
-	</style>
 </head>
 
 
 <body>
+<script>
+class TracyBsElement extends HTMLElement {
+	constructor() {
+		super();
+		this.attachShadow({mode: 'open'});
+	}
+
+	connectedCallback() {
+		setTimeout(() => {
+			while (this.firstElementChild) {
+				this.shadowRoot.appendChild(this.firstElementChild);
+			}
+		});
+	}
+}
+
+window.customElements.define('tracy-bs', TracyBsElement);
+</script>
+
 <?php require __DIR__ . '/content.phtml' ?>
 
 <script<?= $nonceAttr ?>>