From 140fc3f9d6e94098d6d1256c3e6777c0e51b4491 Mon Sep 17 00:00:00 2001 From: marek Date: Thu, 30 Apr 2020 09:25:37 +0200 Subject: [PATCH 1/2] Toggle bar panels: added functionality for toggling bar panels --- readme.md | 28 ++++++++ src/Bridges/Nette/TracyExtension.php | 1 + src/Tracy/Bar/assets/bar.css | 1 - src/Tracy/Bar/assets/bar.js | 97 +++++++++++++++++++++++++++- src/Tracy/Bar/assets/bar.phtml | 11 ++++ src/Tracy/Debugger/Debugger.php | 6 ++ 6 files changed, 140 insertions(+), 4 deletions(-) diff --git a/readme.md b/readme.md index 938324787..933402902 100644 --- a/readme.md +++ b/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 ------ 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..05ca18521 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(function(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 */ From 99d1d467fdb3e7c8d18e69ab6b38140fb27e2637 Mon Sep 17 00:00:00 2001 From: marek Date: Wed, 6 May 2020 10:51:53 +0200 Subject: [PATCH 2/2] fix: CS --- readme.md | 2 +- src/Tracy/Bar/assets/bar.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/readme.md b/readme.md index 933402902..8746c0b66 100644 --- a/readme.md +++ b/readme.md @@ -295,7 +295,7 @@ tracy: - Nette-Bridges-DatabaseTracy-ConnectionPanel ``` -Items in exclude array matches part of the `rel` attribute value in the panel. +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-...' diff --git a/src/Tracy/Bar/assets/bar.js b/src/Tracy/Bar/assets/bar.js index 05ca18521..bd23499ab 100644 --- a/src/Tracy/Bar/assets/bar.js +++ b/src/Tracy/Bar/assets/bar.js @@ -684,7 +684,7 @@ function isPanelExcluded(currentRel, excludedPanels) { - return excludedPanels.some(function(exception) { + return excludedPanels.some((exception) => { return currentRel.match(new RegExp(exception.replace(/[.*+\-?^${}()|[\]\\]/g, '\\$&') + '(-|$)')); }); }