Skip to content

Commit

Permalink
shadow dom for bar [WIP]
Browse files Browse the repository at this point in the history
  • Loading branch information
@dg
dg committed Feb 27, 2023
1 parent bfd1e8a commit 7153e6f
Show file tree
Hide file tree
Showing 3 changed files with 136 additions and 322 deletions.
81 changes: 41 additions & 40 deletions src/Tracy/Bar/assets/bar.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}

Expand Down Expand Up @@ -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;
Expand All @@ -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;
Expand All @@ -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;
}
}
38 changes: 25 additions & 13 deletions src/Tracy/Bar/assets/bar.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 ? '?' : '&');

Expand All @@ -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 || {};
}

Expand All @@ -34,7 +35,7 @@ class Panel

this.init = function() {};
elem.innerHTML = elem.dataset.tracyContent;
Tracy.Dumper.init(Debug.layer);
Tracy.Dumper.init(root);
delete elem.dataset.tracyContent;
evalScripts(elem);

Expand Down Expand Up @@ -244,7 +245,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'),
Expand Down Expand Up @@ -348,7 +349,7 @@ class Bar


close() {
document.getElementById('tracy-debug').style.display = 'none';
root.getElementById('tracy-debug').style.display = 'none';
}


Expand Down Expand Up @@ -388,15 +389,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();
});
Expand Down Expand Up @@ -433,12 +435,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();
Expand Down Expand Up @@ -671,6 +673,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;
Expand Down

0 comments on commit 7153e6f

Please sign in to comment.