diff --git a/readme.md b/readme.md
index 938324787..8746c0b66 100644
--- a/readme.md
+++ b/readme.md
@@ -271,6 +271,34 @@ bdump([1, 3, 5, 7, 9], 'odd numbers up to ten');
+Toggling
+------
+
+Tracy can sometimes overlap bottom of modals where the submit buttons are often located. This can occur e.g. when displaying the developer console, which reduces the height of the window and moves the dialog to the bottom of the page where Tracy has the default position. By enabling `toggleBarPanels` you can minimize Tracy bar instead of closing it what can be handy often.
+
+Configuration example for enable toggling:
+
+```neon
+tracy:
+ toggleBarPanels:
+ show: true
+```
+
+We can add exceptions for hiding panels:
+
+```neon
+tracy:
+ toggleBarPanels:
+ show: true
+ exclude:
+ - Tracy-dumps
+ - Nette-Bridges-DatabaseTracy-ConnectionPanel
+```
+
+Items in exclude array matches part of the `rel` attribute value in the panel.
+E.g. string 'Tracy-dumps' activates an exception for the panel with the `rel` attribute value 'tracy-debug-panel-Tracy-dumps' in the main bar. For the others (ajax, redirect) it matches 'tracy-debug-panel-Tracy-dumps-...'
+
+
Timing
------
diff --git a/src/Bridges/Nette/TracyExtension.php b/src/Bridges/Nette/TracyExtension.php
index 6b82df021..fdf4facbd 100644
--- a/src/Bridges/Nette/TracyExtension.php
+++ b/src/Bridges/Nette/TracyExtension.php
@@ -36,6 +36,7 @@ class TracyExtension extends Nette\DI\CompilerExtension
'blueScreen' => [], // of callback
'editorMapping' => [],
'netteMailer' => true,
+ 'toggleBarPanels' => [],
];
/** @var bool */
diff --git a/src/Tracy/Bar/assets/bar.css b/src/Tracy/Bar/assets/bar.css
index b95cffe4e..e98952848 100644
--- a/src/Tracy/Bar/assets/bar.css
+++ b/src/Tracy/Bar/assets/bar.css
@@ -232,7 +232,6 @@ body#tracy-debug { /* in popup window */
margin: 0 .2em 0 .5em;
}
-
/* panels */
#tracy-debug .tracy-panel {
display: none;
diff --git a/src/Tracy/Bar/assets/bar.js b/src/Tracy/Bar/assets/bar.js
index aa2c9d860..bd23499ab 100644
--- a/src/Tracy/Bar/assets/bar.js
+++ b/src/Tracy/Bar/assets/bar.js
@@ -257,11 +257,18 @@
initTabs(elem) {
+ if (this.elem.querySelectorAll('.tracy-row li a[rel=toggle]').length) {
+ this.restoreToggleState();
+ }
+
elem.querySelectorAll('a').forEach((link) => {
link.addEventListener('click', (e) => {
if (link.rel === 'close') {
this.close();
-
+ } else if (link.rel === 'toggle') {
+ toggleBar(elem, !getToggleState(elem), getExcludedPanels(this.elem));
+ this.saveToggleState();
+ this.restorePosition();
} else if (link.rel) {
let panel = Debug.panels[link.rel];
panel.init();
@@ -286,7 +293,7 @@
});
link.addEventListener('mouseenter', (e) => {
- if (e.buttons || !link.rel || link.rel === 'close' || elem.classList.contains('tracy-dragged')) {
+ if (e.buttons || !link.rel || link.rel === 'close' || link.rel === 'toggle' || elem.classList.contains('tracy-dragged')) {
return;
}
@@ -313,7 +320,7 @@
link.addEventListener('mouseleave', () => {
clearTimeout(this.displayTimeout);
- if (link.rel && link.rel !== 'close' && !elem.classList.contains('tracy-dragged')) {
+ if (link.rel && link.rel !== 'close' && link.rel !== 'toggle' && !elem.classList.contains('tracy-dragged')) {
Debug.panels[link.rel].blur();
}
});
@@ -365,6 +372,21 @@
}
+ saveToggleState() {
+ let state = getToggleState(this.elem);
+ if (getPosition(this.elem).width) { // is visible?
+ localStorage.setItem(this.id + '-toggle', state ? 'true' : 'false');
+ }
+ }
+
+
+ restoreToggleState() {
+ let state = localStorage.getItem(this.id + '-toggle') !== 'false';
+ toggleBar(this.elem, state, getExcludedPanels(this.elem));
+ this.saveToggleState();
+ }
+
+
isAtTop() {
let pos = getPosition(this.elem);
return pos.top < 100 && pos.bottom > pos.top;
@@ -661,6 +683,75 @@
}
+ function isPanelExcluded(currentRel, excludedPanels) {
+ return excludedPanels.some((exception) => {
+ return currentRel.match(new RegExp(exception.replace(/[.*+\-?^${}()|[\]\\]/g, '\\$&') + '(-|$)'));
+ });
+ }
+
+
+ function getExcludedPanels(elem) {
+ let dataset = JSON.parse(elem.querySelectorAll('.tracy-row li a[rel=toggle]')[0].dataset.excludedPanels), i;
+ for (i = 0; i < dataset.length; i++) {
+ dataset[i] = 'tracy-debug-panel-' + dataset[i];
+ }
+
+ return dataset;
+ }
+
+
+ function toggleBar(elem, state, excludedPanels) {
+ elem.querySelectorAll('.tracy-row').forEach((row) => {
+ let listItems = row.querySelectorAll('li'), i;
+
+ for (i = 0; i < listItems.length; ++i) {
+ let a = listItems[i].querySelectorAll('a');
+
+ if (row.dataset.tracyGroup === 'main') {
+ // skip tracy-debug-logo and close
+ if (i === 0 || i === listItems.length -1) {
+ continue;
+ }
+
+ if (a.length) {
+ if (isPanelExcluded(a[0].rel, excludedPanels)) {
+ continue;
+ }
+
+ if (a[0].rel === 'toggle') {
+ a[0].title = state ? a[0].dataset.titleMinimize : a[0].dataset.titleMaximize;
+ a[0].innerText = state ? '\u2212' : '\u002B';
+
+ continue;
+ }
+ }
+ } else {
+ if ((i === 0 && state === false) || (a.length && isPanelExcluded(a[0].rel, excludedPanels))) {
+ continue;
+ }
+ }
+
+ listItems[i].toggleAttribute('hidden', !state);
+ }
+
+ if (row.dataset.tracyGroup !== 'main') {
+ let visibleItems = row.querySelectorAll('li:not([hidden=""])');
+
+ // some panels are visible occasionally, e.g. Tracy-dumps
+ // hide tracy-debug-logo when there is no other visible panel
+ if (visibleItems.length === 1 && state === false) {
+ visibleItems[0].toggleAttribute('hidden', !state);
+ }
+ }
+ });
+ }
+
+
+ function getToggleState(elem) {
+ return elem.querySelectorAll('.tracy-row[data-tracy-group=main] .tracy-bar-toggler a')[0].innerHTML !== '\u002B'; // plus sign
+ }
+
+
function addNonces(html) {
let el = document.createElement('div');
el.innerHTML = html;
diff --git a/src/Tracy/Bar/assets/bar.phtml b/src/Tracy/Bar/assets/bar.phtml
index baac001ba..47cd34024 100644
--- a/src/Tracy/Bar/assets/bar.phtml
+++ b/src/Tracy/Bar/assets/bar.phtml
@@ -32,6 +32,17 @@ namespace Tracy;
+
+
+
+
+
×
diff --git a/src/Tracy/Debugger/Debugger.php b/src/Tracy/Debugger/Debugger.php
index f9e095536..2c45d2b50 100644
--- a/src/Tracy/Debugger/Debugger.php
+++ b/src/Tracy/Debugger/Debugger.php
@@ -119,6 +119,12 @@ class Debugger
/** @var array|null */
private static $cpuUsage;
+ /** @var array */
+ public static $toggleBarPanels = [
+ 'show' => false, // bool, whether to display plus/minus icons
+ 'exclude' => [], // string[], which bar panels should be ignored while toggle
+ ];
+
/********************* services ****************d*g**/
/** @var BlueScreen */