Add double-click panel rollup feature, thanks to @rolandtoth

Author: adrianbj

TracyDebugger.module

@@ -32,7 +32,7 @@ class TracyDebugger extends WireData implements Module, ConfigurableModule {
             'summary' => __('Tracy debugger from Nette with several PW specific custom tools.', __FILE__),
             'author' => 'Adrian Jones',
             'href' => 'https://processwire.com/talk/topic/12208-tracy-debugger/',
-            'version' => '4.10.7',
+            'version' => '4.10.8',
             'autoload' => true,
             'singular' => true,
             'requires'  => 'ProcessWire>=2.7.2, PHP>=5.4.4',
@@ -783,7 +783,7 @@ class TracyDebugger extends WireData implements Module, ConfigurableModule {
                     $this->wire('config')->paths->TracyDebugger.'styles.css'
                 );
 
-                Debugger::$customJsFiles[] = $this->wire('config')->paths->TracyDebugger.'scripts/panel-resizer.js';
+                Debugger::$customJsFiles[] = $this->wire('config')->paths->TracyDebugger.'scripts/main.js';
 
                 if(in_array('fileEditor', static::$showPanels)) {
                     // these need to be loaded here (not just in File Editor panel) so that File Editor links

scripts/main.js

@@ -0,0 +1,55 @@
+function tracyResizePanel(panel, type) {
+    panel = document.getElementById("tracy-debug-panel-"+panel);
+    panel.style.left = '0px';
+    if(type == 'fullscreen') {
+        panel.style.top = '0px';
+        panel.style.height = '100vh';
+        panel.style.width = '100vw';
+    }
+    else {
+        panel.style.top = 'calc(50vh - 22px)';
+        panel.style.height = '50vh';
+        panel.style.width = '100vw';
+    }
+}
+
+// panel rollup thanks to @tpr / @rolandtoth
+// jQuery .on() equivalent
+var filterEventHandler = function (selector, callback) {
+    return (!callback || !callback.call) ? null : function (e) {
+        var target = e.target || e.srcElement || null;
+        while (target && target.parentElement && target.parentElement.querySelectorAll) {
+            var elms = target.parentElement.querySelectorAll(selector);
+            for (var i = 0; i < elms.length; i++) {
+                if (elms[i] === target) {
+                    e.filterdTarget = elms[i];
+                    callback.call(elms[i], e);
+                    return;
+                }
+            }
+            target = target.parentElement;
+        }
+    };
+};
+
+// toggle rollup state on double click
+document.addEventListener("dblclick", filterEventHandler(".tracy-panel h1", function (e) {
+    e.filterdTarget.parentElement.classList.toggle("tracy-mode-rollup");
+}));
+
+// remove rolled up state on closing the panel
+document.addEventListener("mouseup", filterEventHandler(".tracy-panel.tracy-mode-rollup [rel=\'close\']", function (e) {
+    e.filterdTarget.parentElement.parentElement.classList.remove("tracy-mode-rollup");
+}));
+
+// hide rolled up panels to allow Tracy save their position correctly
+window.addEventListener("beforeunload", function () {
+    var $rollupPanels = document.querySelectorAll(".tracy-mode-rollup");
+
+    if($rollupPanels.length) {
+        for(var i = 0; i < $rollupPanels.length; i++) {
+            $rollupPanels[i].style.visibility = "hidden";
+            $rollupPanels[i].classList.remove("tracy-mode-rollup");
+        }
+    }
+ });

scripts/panel-resizer.js

@@ -108,6 +108,7 @@ body.tracyHidden:before {
     padding-right: 35px !important;
     color: #444444 !important;
     text-transform: none !important;
+    user-select: none;
 }
 
 #tracy-debug input:not(.ace_search_field) {
@@ -1203,4 +1204,25 @@ ul.pw-info-links {
 
 .ace_editor, .ace_editor * {
     font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', monospace !important;
+}
+
+/*panel rollup*/
+#tracy-debug .tracy-panel.tracy-mode-rollup {
+    min-height: 0 !important;
+    resize: none !important;
+    max-height: 47px !important;
+    width: auto !important;
+    min-width: unset !important;
+}
+#tracy-debug .tracy-panel.tracy-mode-rollup .tracy-inner,
+#tracy-debug .tracy-panel.tracy-mode-rollup .resizeIcons,
+#tracy-debug .tracy-panel.tracy-mode-rollup a[rel="window"] {
+    display: none;
+}
+#tracy-debug .tracy-panel.tracy-mode-rollup h1 {
+    border-bottom: none !important;
+    border-right: 1rem solid transparent;
+}
+#tracy-debug .tracy-panel.tracy-mode-rollup h1 a {
+    pointer-events: none;
 }