From 2eca2a2b3195d72206befd033605cea393570041 Mon Sep 17 00:00:00 2001
From: David Grudl <david@grudl.com>
Date: Wed, 1 Jun 2022 02:38:37 +0200
Subject: [PATCH] shadow dom for bar [WIP]

---
 src/Tracy/Bar/assets/bar.css | 421 ++++++++++++++---------------
 src/Tracy/Bar/assets/bar.js  |  38 ++-
 src/Tracy/assets/reset.css   | 503 ++++++++++-------------------------
 3 files changed, 379 insertions(+), 583 deletions(-)

diff --git a/src/Tracy/Bar/assets/bar.css b/src/Tracy/Bar/assets/bar.css
index 6a64f5b7e..70c2f70e5 100644
--- a/src/Tracy/Bar/assets/bar.css
+++ b/src/Tracy/Bar/assets/bar.css
@@ -4,76 +4,82 @@
 
 /* common styles */
 #tracy-debug {
-	--tracy-space: 10px;
 	display: none;
 	direction: ltr;
+}
 
-	&:not(body) { /* not in popup window */
-		position: absolute;
-		left: 0;
-		top: 0;
-	}
+body#tracy-debug { /* in popup window */
+	display: block;
+}
 
-	& a {
-		color: #125EAE;
-		text-decoration: none;
+:host {
+	position: absolute;
+	left: 0;
+	top: 0;
+	margin: 0;
+}
 
-		&:hover,
-		&:focus {
-			background-color: #125EAE;
-			color: white;
-		}
-	}
+a {
+	color: #125EAE;
+	text-decoration: none;
+}
 
-	& h2,
-	& h3 {
-		font-weight: bold;
-	}
+a:hover,
+a:focus {
+	background-color: #125EAE;
+	color: white;
+}
 
-	& table {
-		background: #FDF5CE;
-		width: 100%;
+h2,
+h3,
+p {
+	margin: .4em 0;
+}
 
-		.tracy-right {
-			text-align: right;
-		}
-	}
+table {
+	background: #FDF5CE;
+	width: 100%;
+}
 
-	& tr:nth-child(2n) td {
-		background: rgba(0, 0, 0, 0.02);
-	}
+tr:nth-child(2n) td {
+	background: rgba(0, 0, 0, 0.02);
+}
 
-	& td,
-	& th {
-		border: 1px solid #E6DFBF;
-		padding: 2px 5px;
-		vertical-align: top;
-		text-align: left;
-	}
+td,
+th {
+	border: 1px solid #E6DFBF;
+	padding: 2px 5px;
+	vertical-align: top;
+	text-align: left;
+}
 
-	& th {
-		background: #F4F3F1;
-		color: #655E5E;
-		font-size: 90%;
-		font-weight: bold;
-	}
+th {
+	background: #F4F3F1;
+	color: #655E5E;
+	font-size: 90%;
+	font-weight: bold;
+}
 
-	& pre,
-	& code {
-		font: 9pt/1.5 Consolas, monospace;
-	}
+pre,
+code {
+	font: 9pt/1.5 Consolas, monospace;
+}
 
-	& svg {
-		display: inline;
-	}
+table .tracy-right {
+	text-align: right;
+}
 
-	.tracy-dump {
-		margin: 0;
-		padding: 2px 5px;
-	}
+svg {
+	display: inline;
+}
+
+#tracy-debug .tracy-dump {
+	margin: 0;
+	padding: 2px 5px;
 }
 
 
+/* bar */
 #tracy-debug-bar {
 	font: normal normal 13px/1.55 Tahoma, sans-serif;
 	color: #333;
@@ -92,71 +98,69 @@
 
 	border-radius: 3px;
 	box-shadow: 1px 1px 10px rgba(0, 0, 0, .15);
+}
 
-	&:hover {
-		opacity: 1;
-		transition: opacity 0.1s;
-	}
+#tracy-debug-bar:hover {
+	opacity: 1;
+	transition: opacity 0.1s;
+}
 
-	.tracy-row {
-		list-style: none none;
-		display: flex;
-
-		&:not(:first-child) {
-			background: #d5d2c6;
-			opacity: .8;
-		}
-
-		&[data-tracy-group="ajax"] {
-			animation: tracy-row-flash .2s ease;
-		}
-
-		@keyframes tracy-row-flash {
-			0% {
-				background: #c9c0a0;
-			}
-		}
-
-		&:not(:first-child) li:first-child {
-			width: 4.1em;
-			text-align: center;
-		}
-	}
+#tracy-debug-bar .tracy-row {
+	list-style: none none;
+	display: flex;
+}
 
+#tracy-debug-bar .tracy-row:not(:first-child) {
+	background: #d5d2c6;
+	opacity: .8;
+}
 
-	& img {
-		vertical-align: bottom;
-		position: relative;
-		top: -2px;
-	}
+#tracy-debug-bar .tracy-row[data-tracy-group="ajax"] {
+	animation: tracy-row-flash .2s ease;
+}
 
-	& svg {
-		vertical-align: bottom;
-		width: 1.23em;
-		height: 1.55em;
+@keyframes tracy-row-flash {
+	0% {
+		background: #c9c0a0;
 	}
+}
 
-	.tracy-label {
-		margin-left: .2em;
-	}
+#tracy-debug-bar .tracy-row:not(:first-child) li:first-child {
+	width: 4.1em;
+	text-align: center;
+}
 
-	& li > a,
-	& li > span {
-		color: #000;
-		display: block;
-		padding: 0 .4em;
-	}
+#tracy-debug-bar img {
+	vertical-align: bottom;
+	position: relative;
+	top: -2px;
+}
 
-	& li > a:hover {
-		color: black;
-		background: #c3c1b8;
-	}
+#tracy-debug-bar svg {
+	vertical-align: bottom;
+	width: 1.23em;
+	height: 1.55em;
+}
 
-	& li:first-child {
-		cursor: move;
-	}
+#tracy-debug-bar .tracy-label {
+	margin-left: .2em;
 }
 
+#tracy-debug-bar li > a,
+#tracy-debug-bar li > span {
+	color: #000;
+	display: block;
+	padding: 0 .4em;
+}
+
+#tracy-debug-bar li > a:hover {
+	color: black;
+	background: #c3c1b8;
+}
+
+#tracy-debug-bar li:first-child {
+	cursor: move;
+}
 
 #tracy-debug-logo svg {
 	width: 3.4em;
@@ -165,135 +169,124 @@
 
 
 /* panels */
-#tracy-debug {
-	.tracy-panel {
-		display: none;
-		font: normal normal 12px/1.5 sans-serif;
-		background: white;
-		color: #333;
-		text-align: left;
-	}
-
-	& h1 {
-		font: normal normal 23px/1.4 Tahoma, sans-serif;
-		color: #575753;
-		margin: -5px -5px var(--tracy-space);
-		padding: 0 5px 0 5px;
-		word-wrap: break-word;
-	}
-
-	.tracy-inner {
-		overflow: auto;
-		flex: 1;
-	}
+.tracy-panel {
+	display: none;
+	font: normal normal 12px/1.5 sans-serif;
+	background: white;
+	color: #333;
+	text-align: left;
+}
 
-	.tracy-panel .tracy-icons {
-		display: none;
-	}
+body.tracy-panel { /* in popup window */
+	display: block;
+}
 
-	.tracy-panel-ajax h1::after,
-	.tracy-panel-redirect h1::after {
-		content: 'ajax';
-		float: right;
-		font-size: 65%;
-		margin: 0 .3em;
-	}
+h1 {
+	font: normal normal 23px/1.4 Tahoma, sans-serif;
+	color: #575753;
+	margin: -5px -5px 5px;
+	padding: 0 5px 0 5px;
+	word-wrap: break-word;
+}
 
-	.tracy-panel-redirect h1::after {
-		content: 'redirect';
-	}
+.tracy-inner {
+	overflow: auto;
+	flex: 1;
+}
 
-	.tracy-mode-peek,
-	.tracy-mode-float {
-		position: fixed;
-		flex-direction: column;
-		padding: var(--tracy-space);
-		min-width: 200px;
-		min-height: 80px;
-		border-radius: 5px;
-		box-shadow: 1px 1px 20px rgba(102, 102, 102, 0.36);
-		border: 1px solid rgba(0, 0, 0, 0.1);
-	}
+.tracy-panel .tracy-icons {
+	display: none;
+}
 
-	.tracy-mode-peek,
-	.tracy-mode-float:not(.tracy-panel-resized) {
-		max-width: 700px;
-		max-height: 500px;
+.tracy-panel-ajax h1::after,
+.tracy-panel-redirect h1::after {
+	content: 'ajax';
+	float: right;
+	font-size: 65%;
+	margin: 0 .3em;
+}
 
-		@media (max-height: 555px) {
-			max-height: 100vh;
-		}
-	}
+.tracy-panel-redirect h1::after {
+	content: 'redirect';
+}
 
-	.tracy-mode-peek h1 {
-		cursor: move;
-	}
+.tracy-mode-peek,
+.tracy-mode-float {
+	position: fixed;
+	flex-direction: column;
+	padding: 10px;
+	min-width: 200px;
+	min-height: 80px;
+	border-radius: 5px;
+	box-shadow: 1px 1px 20px rgba(102, 102, 102, 0.36);
+	border: 1px solid rgba(0, 0, 0, 0.1);
+}
 
-	.tracy-mode-float {
-		display: flex;
-		opacity: .95;
-		transition: opacity 0.2s;
-		will-change: opacity, top, left;
-		overflow: auto;
-		resize: both;
-	}
+.tracy-mode-peek,
+.tracy-mode-float:not(.tracy-panel-resized) {
+	max-width: 700px;
+	max-height: 500px;
+}
 
-	.tracy-focused {
-		display: flex;
-		opacity: 1;
-		transition: opacity 0.1s;
+@media (max-height: 555px) {
+	.tracy-mode-peek,
+	.tracy-mode-float:not(.tracy-panel-resized) {
+		max-height: 100vh;
 	}
+}
 
-	.tracy-mode-float h1 {
-		cursor: move;
-		padding-right: 25px;
-	}
+.tracy-mode-peek h1 {
+	cursor: move;
+}
 
-	.tracy-mode-float .tracy-icons {
-		display: block;
-		position: absolute;
-		top: 0;
-		right: 5px;
-		font-size: 18px;
-	}
+.tracy-mode-float {
+	display: flex;
+	opacity: .95;
+	transition: opacity 0.2s;
+	will-change: opacity, top, left;
+	overflow: auto;
+	resize: both;
+}
 
-	.tracy-mode-window {
-		padding: var(--tracy-space);
-	}
+.tracy-focused {
+	display: flex;
+	opacity: 1;
+	transition: opacity 0.1s;
+}
 
-	.tracy-icons a {
-		color: #575753;
+.tracy-mode-float h1 {
+	cursor: move;
+	padding-right: 25px;
+}
 
-		&:hover {
-			color: white;
-		}
-	}
+.tracy-mode-float .tracy-icons {
+	display: block;
+	position: absolute;
+	top: 0;
+	right: 5px;
+	font-size: 18px;
+}
 
+.tracy-mode-window {
+	padding: 10px;
+}
 
-	.tracy-inner-container {
-		min-width: 100%;
-		float: left;
-		/* explicit gaps: */
-		display: flex;
-		flex-direction: column;
-		gap: var(--tracy-space);
+.tracy-icons a {
+	color: #575753;
+}
 
-		& > * {
-			margin-bottom: 0; /* disable implicit gaps */
-		}
+.tracy-icons a:hover {
+	color: white;
+}
 
-		&:not(:last-child) {
-			margin-bottom: var(--tracy-space);
-		}
-	}
 
+.tracy-inner-container {
+	min-width: 100%;
+	float: left;
+}
 
-	@media print {
+@media print {
+	* {
 		display: none;
 	}
 }
-
-
-body#tracy-debug { /* in popup window */
-	display: block;
-}
diff --git a/src/Tracy/Bar/assets/bar.js b/src/Tracy/Bar/assets/bar.js
index c37a48809..b11c2fa14 100644
--- a/src/Tracy/Bar/assets/bar.js
+++ b/src/Tracy/Bar/assets/bar.js
@@ -4,7 +4,8 @@
 
 let requestId = document.currentScript.dataset.id,
 	ajaxCounter = 1,
-	baseUrl = location.href.split('#')[0];
+	baseUrl = location.href.split('#')[0],
+	root;
 
 baseUrl += (baseUrl.indexOf('?') < 0 ? '?' : '&');
 
@@ -24,7 +25,7 @@ class Panel
 {
 	constructor(id) {
 		this.id = id;
-		this.elem = document.getElementById(this.id);
+		this.elem = root.getElementById(this.id);
 		this.elem.Tracy = this.elem.Tracy || {};
 	}
 
@@ -34,7 +35,7 @@ class Panel
 
 		this.init = function() {};
 		elem.innerHTML = elem.dataset.tracyContent;
-		Tracy.Dumper.init(Debug.layer);
+		Tracy.Dumper.init(root);
 		evalScripts(elem);
 
 		draggable(elem, {
@@ -248,7 +249,7 @@ class Bar
 {
 	init() {
 		this.id = 'tracy-debug-bar';
-		this.elem = document.getElementById(this.id);
+		this.elem = root.getElementById(this.id);
 
 		draggable(this.elem, {
 			handles: this.elem.querySelectorAll('li:first-child'),
@@ -352,7 +353,7 @@ class Bar
 
 
 	close() {
-		document.getElementById('tracy-debug').style.display = 'none';
+		root.getElementById('tracy-debug').style.display = 'none';
 	}
 
 
@@ -392,15 +393,16 @@ class Debug
 	static init(content) {
 		Debug.bar = new Bar;
 		Debug.panels = {};
-		Debug.layer = document.createElement('tracy-div');
-		Debug.layer.setAttribute('id', 'tracy-debug');
-		Debug.layer.innerHTML = content;
+		Debug.layer = document.createElement('tracy-debug');
+		root = Debug.layer.shadowRoot;
+		root.innerHTML = content;
+		root.appendChild(document.querySelector('style.tracy-debug'));
 		(document.body || document.documentElement).appendChild(Debug.layer);
-		evalScripts(Debug.layer);
+		evalScripts(root);
 		Debug.layer.style.display = 'block';
 		Debug.bar.init();
 
-		Debug.layer.querySelectorAll('.tracy-panel').forEach((panel) => {
+		root.querySelectorAll('.tracy-panel').forEach((panel) => {
 			Debug.panels[panel.id] = new Panel(panel.id);
 			Debug.panels[panel.id].restorePosition();
 		});
@@ -437,12 +439,12 @@ class Debug
 			});
 		}
 
-		Debug.layer.insertAdjacentHTML('beforeend', content.panels);
-		evalScripts(Debug.layer);
+		root.insertAdjacentHTML('beforeend', content.panels);
+		evalScripts(root);
 		Debug.bar.elem.insertAdjacentHTML('beforeend', content.bar);
 		let ajaxBar = Debug.bar.elem.querySelector('.tracy-row:last-child');
 
-		Debug.layer.querySelectorAll('.tracy-panel').forEach((panel) => {
+		root.querySelectorAll('.tracy-panel').forEach((panel) => {
 			if (!Debug.panels[panel.id]) {
 				Debug.panels[panel.id] = new Panel(panel.id);
 				Debug.panels[panel.id].restorePosition();
@@ -675,6 +677,16 @@ function getPosition(elem) {
 }
 
 
+class TracyDebugElement extends HTMLElement {
+	constructor() {
+		super();
+		this.attachShadow({mode: 'open'});
+	}
+}
+
+window.customElements.define('tracy-debug', TracyDebugElement);
+
+
 let Tracy = window.Tracy = window.Tracy || {};
 Tracy.DebugPanel = Panel;
 Tracy.DebugBar = Bar;
diff --git a/src/Tracy/assets/reset.css b/src/Tracy/assets/reset.css
index a31a6846c..c34442a2c 100644
--- a/src/Tracy/assets/reset.css
+++ b/src/Tracy/assets/reset.css
@@ -2,385 +2,176 @@
  * This file is part of the Tracy (https://tracy.nette.org)
  */
 
-tracy-div:not(a b) {
-	:is(&, & *) {
-		font: inherit;
-		line-height: inherit;
-		color: inherit;
-		background: transparent;
-		margin: 0;
-		padding: 0;
-		border: none;
-		text-align: inherit;
-		list-style: inherit;
-		opacity: 1;
-		border-radius: 0;
-		box-shadow: none;
-		text-shadow: none;
-		box-sizing: border-box;
-		text-decoration: none;
-		text-transform: inherit;
-		white-space: inherit;
-		float: none;
-		clear: none;
-		max-width: initial;
-		min-width: initial;
-		max-height: initial;
-		min-height: initial;
-	}
-
-	*:hover {
-		color: inherit;
-		background: transparent;
-	}
-
-	*:not(svg):not(img):not(table) {
-		width: initial;
-		height: initial;
-	}
-
-	&:before,
-	&:after,
-	*:before,
-	*:after {
-		all: unset;
-	}
-
-	:is(
-		h1, h2, h3, h4, h5, h6,
-		p,
-		ol, ul, dl,
-		pre, table, hr,
-	):where(:not(:last-child)) {
-		margin-bottom: var(--tracy-space);
-	}
-
-	& b,
-	& strong {
-		font-weight: bold;
-	}
-
-	& small {
-		font-size: smaller;
-	}
-
-	& i,
-	& em {
-		font-style: italic;
-	}
-
-	& big {
-		font-size: larger;
-	}
-
-	& small,
-	& sub,
-	& sup {
-		font-size: smaller;
-	}
-
-	& ins {
-		text-decoration: underline;
-	}
-
-	& del {
-		text-decoration: line-through;
-	}
-
-	& table {
-		border-collapse: collapse;
-	}
-
-	& pre {
-		font-family: monospace;
-		white-space: pre;
-	}
-
-	& code,
-	& kbd,
-	& samp {
-		font-family: monospace;
-	}
-
-	& input {
-		background-color: white;
-		padding: 1px;
-		border: 1px solid;
-	}
-
-	& textarea {
-		background-color: white;
-		border: 1px solid;
-		padding: 2px;
-		white-space: pre-wrap;
-	}
-
-	& select {
-		border: 1px solid;
-		white-space: pre;
-	}
-
-	& article,
-	& aside,
-	& details,
-	& div,
-	& figcaption,
-	& footer,
-	& form,
-	& header,
-	& hgroup,
-	& main,
-	& nav,
-	& section,
-	& summary,
-	& pre,
-	& p,
-	& dl,
-	& dd,
-	& dt,
-	& blockquote,
-	& figure,
-	& address,
-	& h1,
-	& h2,
-	& h3,
-	& h4,
-	& h5,
-	& h6,
-	& ul,
-	& ol,
-	& li,
-	& hr {
-		display: block;
-	}
-
-	& a,
-	& b,
-	& big,
-	& code,
-	& em,
-	& i,
-	& small,
-	& span,
-	& strong {
-		display: inline;
-	}
-
-	& table {
-		display: table;
-	}
-
-	& tr {
-		display: table-row;
-	}
-
-	& col {
-		display: table-column;
-	}
-
-	& colgroup {
-		display: table-column-group;
-	}
-
-	& tbody {
-		display: table-row-group;
-	}
-
-	& thead {
-		display: table-header-group;
-	}
-
-	& tfoot {
-		display: table-footer-group;
-	}
-
-	& td {
-		display: table-cell;
-	}
-
-	& th {
-		display: table-cell;
-	}
-
-
-
-	/* TableSort */
-	.tracy-sortable > :first-child > tr:first-child > * {
-		position: relative;
-	}
-
-	.tracy-sortable > :first-child > tr:first-child > *:hover:before {
-		position: absolute;
-		right: .3em;
-		content: "\21C5";
-		opacity: .4;
-		font-weight: normal;
-	}
-
-
-	/* dump */
-	.tracy-dump div {
-		padding-left: 3ex;
-	}
-
-	.tracy-dump div div {
-		border-left: 1px solid rgba(0, 0, 0, .1);
-		margin-left: .5ex;
-	}
-
-	.tracy-dump div div:hover {
-		border-left-color: rgba(0, 0, 0, .25);
-	}
-
-	.tracy-dump {
-		background: #FDF5CE;
-		padding: .4em .7em;
-		border: 1px dotted silver;
-		overflow: auto;
-	}
-
-	& table .tracy-dump.tracy-dump { /* overwrite .tracy-dump.tracy-light etc. */
-		padding: 0;
-		margin: 0;
-		border: none;
-	}
+* {
+	font: inherit;
+	line-height: inherit;
+	color: inherit;
+	background: transparent;
+	margin: 0;
+	padding: 0;
+	border: none;
+	text-align: inherit;
+	list-style: inherit;
+	opacity: 1;
+	border-radius: 0;
+	box-shadow: none;
+	text-shadow: none;
+	box-sizing: border-box;
+	text-decoration: none;
+	text-transform: inherit;
+	white-space: inherit;
+	float: none;
+	clear: none;
+}
 
-	.tracy-dump-location {
-		color: gray;
-		font-size: 80%;
-		text-decoration: none;
-		background: none;
-		opacity: .5;
-		float: right;
-		cursor: pointer;
-	}
+*:hover {
+	color: inherit;
+	background: transparent;
+}
 
-	.tracy-dump-location:hover,
-	.tracy-dump-location:focus {
-		color: gray;
-		background: none;
-		opacity: 1;
-	}
+b,
+strong {
+	font-weight: bold;
+}
 
-	.tracy-dump-array,
-	.tracy-dump-object {
-		color: #C22;
-	}
+small {
+	font-size: smaller;
+}
 
-	.tracy-dump-string {
-		color: #35D;
-		white-space: break-spaces;
-	}
+i,
+em {
+	font-style: italic;
+}
 
-	& div.tracy-dump-string {
-		position: relative;
-		padding-left: 3.5ex;
-	}
+big {
+	font-size: larger;
+}
 
-	.tracy-dump-lq {
-		margin-left: calc(-1ex - 1px);
-	}
+small,
+sub,
+sup {
+	font-size: smaller;
+}
 
-	& div.tracy-dump-string:before {
-		content: '';
-		position: absolute;
-		left: calc(3ex - 1px);
-		top: 1.5em;
-		bottom: 0;
-		border-left: 1px solid rgba(0, 0, 0, .1);
-	}
+ins {
+	text-decoration: underline;
+}
 
-	.tracy-dump-virtual span,
-	.tracy-dump-dynamic span,
-	.tracy-dump-string span {
-		color: rgba(0, 0, 0, 0.5);
-	}
+del {
+	text-decoration: line-through;
+}
 
-	.tracy-dump-virtual i,
-	.tracy-dump-dynamic i,
-	.tracy-dump-string i {
-		font-size: 80%;
-		font-style: normal;
-		color: rgba(0, 0, 0, 0.5);
-		user-select: none;
-	}
+table {
+	border-collapse: collapse;
+}
 
-	.tracy-dump-number {
-		color: #090;
-	}
+pre {
+	font-family: monospace;
+	white-space: pre;
+}
 
-	.tracy-dump-null,
-	.tracy-dump-bool {
-		color: #850;
-	}
+code,
+kbd,
+samp {
+	font-family: monospace;
+}
 
-	.tracy-dump-virtual {
-		font-style: italic;
-	}
+input {
+	background-color: white;
+	padding: 1px;
+	border: 1px solid;
+}
 
-	.tracy-dump-public::after {
-		content: ' pub';
-	}
+textarea {
+	background-color: white;
+	border: 1px solid;
+	padding: 2px;
+	white-space: pre-wrap;
+}
 
-	.tracy-dump-protected::after {
-		content: ' pro';
-	}
+select {
+	border: 1px solid;
+	white-space: pre;
+}
 
-	.tracy-dump-private::after {
-		content: ' pri';
-	}
+article,
+aside,
+details,
+div,
+figcaption,
+footer,
+form,
+header,
+hgroup,
+main,
+nav,
+section,
+summary,
+pre,
+p,
+dl,
+dd,
+dt,
+blockquote,
+figure,
+address,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+ul,
+ol,
+li,
+hr {
+	display: block;
+}
 
-	.tracy-dump-public::after,
-	.tracy-dump-protected::after,
-	.tracy-dump-private::after,
-	.tracy-dump-hash {
-		font-size: 85%;
-		color: rgba(0, 0, 0, 0.5);
-	}
+a,
+b,
+big,
+code,
+em,
+i,
+small,
+span,
+strong {
+	display: inline;
+}
 
-	.tracy-dump-indent {
-		display: none;
-	}
+table {
+	display: table;
+}
 
-	.tracy-dump-highlight {
-		background: #C22;
-		color: white;
-		border-radius: 2px;
-		padding: 0 2px;
-		margin: 0 -2px;
-	}
+tr {
+	display: table-row;
+}
 
-	& span[data-tracy-href] {
-		border-bottom: 1px dotted rgba(0, 0, 0, .2);
-	}
+col {
+	display: table-column;
+}
 
+colgroup {
+	display: table-column-group;
+}
 
-	/* toggle */
-	.tracy-toggle:after {
-		content: '';
-		display: inline-block;
-		vertical-align: middle;
-		line-height: 0;
-		border-top: .6ex solid;
-		border-right: .6ex solid transparent;
-		border-left: .6ex solid transparent;
-		transform: scale(1, 1.5);
-		margin: 0 .2ex 0 .7ex;
-		transition: .1s transform;
-		opacity: .5;
-	}
+tbody {
+	display: table-row-group;
+}
 
-	.tracy-toggle.tracy-collapsed:after {
-		transform: rotate(-90deg) scale(1, 1.5) translate(.1ex, 0);
-	}
+thead {
+	display: table-header-group;
+}
 
+tfoot {
+	display: table-footer-group;
+}
 
-	/* tabs */
-	.tracy-tab-label {
-		user-select: none;
-	}
+td {
+	display: table-cell;
+}
 
-	.tracy-tab-panel:not(.tracy-active) {
-		display: none;
-	}
+th {
+	display: table-cell;
 }