shadow dom for bar [WIP]

Author: dg

src/Tracy/Bar/assets/bar.css

@@ -12,63 +12,64 @@ body#tracy-debug { /* in popup window */
 	display: block;
 }
 
-#tracy-debug:not(body) {
+:host {
 	position: absolute;
 	left: 0;
 	top: 0;
+	margin: 0;
 }
 
-#tracy-debug a {
+a {
 	color: #125EAE;
 	text-decoration: none;
 }
 
-#tracy-debug a:hover,
-#tracy-debug a:focus {
+a:hover,
+a:focus {
 	background-color: #125EAE;
 	color: white;
 }
 
-#tracy-debug h2,
-#tracy-debug h3,
-#tracy-debug p {
+h2,
+h3,
+p {
 	margin: .4em 0;
 }
 
-#tracy-debug table {
+table {
 	background: #FDF5CE;
 	width: 100%;
 }
 
-#tracy-debug tr:nth-child(2n) td {
+tr:nth-child(2n) td {
 	background: rgba(0, 0, 0, 0.02);
 }
 
-#tracy-debug td,
-#tracy-debug th {
+td,
+th {
 	border: 1px solid #E6DFBF;
 	padding: 2px 5px;
 	vertical-align: top;
 	text-align: left;
 }
 
-#tracy-debug th {
+th {
 	background: #F4F3F1;
 	color: #655E5E;
 	font-size: 90%;
 	font-weight: bold;
 }
 
-#tracy-debug pre,
-#tracy-debug code {
+pre,
+code {
 	font: 9pt/1.5 Consolas, monospace;
 }
 
-#tracy-debug table .tracy-right {
+table .tracy-right {
 	text-align: right;
 }
 
-#tracy-debug svg {
+svg {
 	display: inline;
 }
 
@@ -168,49 +169,49 @@ body#tracy-debug { /* in popup window */
 
 
 /* panels */
-#tracy-debug .tracy-panel {
+.tracy-panel {
 	display: none;
 	font: normal normal 12px/1.5 sans-serif;
 	background: white;
 	color: #333;
 	text-align: left;
 }
 
-body#tracy-debug .tracy-panel { /* in popup window */
+body.tracy-panel { /* in popup window */
 	display: block;
 }
 
-#tracy-debug h1 {
+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-debug .tracy-inner {
+.tracy-inner {
 	overflow: auto;
 	flex: 1;
 }
 
-#tracy-debug .tracy-panel .tracy-icons {
+.tracy-panel .tracy-icons {
 	display: none;
 }
 
-#tracy-debug .tracy-panel-ajax h1::after,
-#tracy-debug .tracy-panel-redirect h1::after {
+.tracy-panel-ajax h1::after,
+.tracy-panel-redirect h1::after {
 	content: 'ajax';
 	float: right;
 	font-size: 65%;
 	margin: 0 .3em;
 }
 
-#tracy-debug .tracy-panel-redirect h1::after {
+.tracy-panel-redirect h1::after {
 	content: 'redirect';
 }
 
-#tracy-debug .tracy-mode-peek,
-#tracy-debug .tracy-mode-float {
+.tracy-mode-peek,
+.tracy-mode-float {
 	position: fixed;
 	flex-direction: column;
 	padding: 10px;
@@ -221,24 +222,24 @@ body#tracy-debug .tracy-panel { /* in popup window */
 	border: 1px solid rgba(0, 0, 0, 0.1);
 }
 
-#tracy-debug .tracy-mode-peek,
-#tracy-debug .tracy-mode-float:not(.tracy-panel-resized) {
+.tracy-mode-peek,
+.tracy-mode-float:not(.tracy-panel-resized) {
 	max-width: 700px;
 	max-height: 500px;
 }
 
 @media (max-height: 555px) {
-	#tracy-debug .tracy-mode-peek,
-	#tracy-debug .tracy-mode-float:not(.tracy-panel-resized) {
+	.tracy-mode-peek,
+	.tracy-mode-float:not(.tracy-panel-resized) {
 		max-height: 100vh;
 	}
 }
 
-#tracy-debug .tracy-mode-peek h1 {
+.tracy-mode-peek h1 {
 	cursor: move;
 }
 
-#tracy-debug .tracy-mode-float {
+.tracy-mode-float {
 	display: flex;
 	opacity: .95;
 	transition: opacity 0.2s;
@@ -247,45 +248,45 @@ body#tracy-debug .tracy-panel { /* in popup window */
 	resize: both;
 }
 
-#tracy-debug .tracy-focused {
+.tracy-focused {
 	display: flex;
 	opacity: 1;
 	transition: opacity 0.1s;
 }
 
-#tracy-debug .tracy-mode-float h1 {
+.tracy-mode-float h1 {
 	cursor: move;
 	padding-right: 25px;
 }
 
-#tracy-debug .tracy-mode-float .tracy-icons {
+.tracy-mode-float .tracy-icons {
 	display: block;
 	position: absolute;
 	top: 0;
 	right: 5px;
 	font-size: 18px;
 }
 
-#tracy-debug .tracy-mode-window {
+.tracy-mode-window {
 	padding: 10px;
 }
 
-#tracy-debug .tracy-icons a {
+.tracy-icons a {
 	color: #575753;
 }
 
-#tracy-debug .tracy-icons a:hover {
+.tracy-icons a:hover {
 	color: white;
 }
 
 
-#tracy-debug .tracy-inner-container {
+.tracy-inner-container {
 	min-width: 100%;
 	float: left;
 }
 
 @media print {
-	#tracy-debug * {
+	* {
 		display: none;
 	}
 }

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;