Toggle bar panels: added functionality for toggling bar panels

readme.md

@@ -271,6 +271,34 @@ bdump([1, 3, 5, 7, 9], 'odd numbers up to ten');
 ![bar dump](https://nette.github.io/tracy/images/tracy-bardump.png)
 
 
+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
 ------
 

src/Bridges/Nette/TracyExtension.php

@@ -36,6 +36,7 @@ class TracyExtension extends Nette\DI\CompilerExtension
 		'blueScreen' => [], // of callback
 		'editorMapping' => [],
 		'netteMailer' => true,
+		'toggleBarPanels' => [],
 	];
 
 	/** @var bool */

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;

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;

src/Tracy/Bar/assets/bar.phtml

@@ -32,6 +32,17 @@ namespace Tracy;
 <?php } endforeach ?>
 
 <?php if ($type === 'main'): ?>
+	<?php if (Debugger::$toggleBarPanels && isset(Debugger::$toggleBarPanels['show']) && Debugger::$toggleBarPanels['show']): ?>
+		<li class="tracy-bar-toggler">
+			<a
+				href="#"
+				rel="toggle"
+				data-title-maximize="maximize debug bar"
+				data-title-minimize="minimize debug bar"
+				data-excluded-panels="<?= htmlspecialchars(json_encode(Debugger::$toggleBarPanels['exclude'] ?? [])) ?>"
+			></a>
+		</li>
+	<?php endif ?>
 	<li><a href="#" rel="close" title="close debug bar">&times;</a></li>
 <?php endif ?>
 </ul>

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 */