From e1bc5e576276f668291785d66317fe72c6a4f202 Mon Sep 17 00:00:00 2001
From: David Grudl <david@grudl.com>
Date: Fri, 13 Jan 2017 04:28:25 +0100
Subject: [PATCH] bar: showing/hiding of panel is done via CSS classes

---
 src/Tracy/assets/Bar/bar.css | 15 ++++++++-------
 src/Tracy/assets/Bar/bar.js  | 14 +++++++-------
 2 files changed, 15 insertions(+), 14 deletions(-)

diff --git a/src/Tracy/assets/Bar/bar.css b/src/Tracy/assets/Bar/bar.css
index a116b1b08..34327a2a1 100644
--- a/src/Tracy/assets/Bar/bar.css
+++ b/src/Tracy/assets/Bar/bar.css
@@ -8,7 +8,7 @@
 	direction: ltr;
 }
 
-body#tracy-debug {
+body#tracy-debug { /* in popup window */
 	margin: 0;
 	display: block;
 }
@@ -193,6 +193,10 @@ body #tracy-debug {
 	z-index: 20001;
 }
 
+body#tracy-debug .tracy-panel { /* in popup window */
+	display: block;
+}
+
 #tracy-debug h1 {
 	font: normal normal 23px/1.4 Tahoma, sans-serif;
 	color: #575753;
@@ -233,21 +237,19 @@ body #tracy-debug {
 	border: 1px solid rgba(0, 0, 0, 0.1);
 }
 
-#tracy-debug .tracy-mode-peek {
-	display: none;
-}
-
 #tracy-debug .tracy-mode-peek h1 {
 	cursor: move;
 }
 
 #tracy-debug .tracy-mode-float {
+	display: block;
 	opacity: .95;
 	transition: opacity 0.2s;
 	will-change: opacity, right, bottom;
 }
 
-#tracy-debug .tracy-mode-float.tracy-focused {
+#tracy-debug .tracy-focused {
+	display: block;
 	opacity: 1;
 	transition: opacity 0.1s;
 }
@@ -266,7 +268,6 @@ body #tracy-debug {
 
 #tracy-debug .tracy-mode-window {
 	padding: 10px;
-	display: block;
 }
 
 #tracy-debug .tracy-icons a {
diff --git a/src/Tracy/assets/Bar/bar.js b/src/Tracy/assets/Bar/bar.js
index 0e5c32632..fb3484f6f 100755
--- a/src/Tracy/assets/Bar/bar.js
+++ b/src/Tracy/assets/Bar/bar.js
@@ -34,7 +34,7 @@
 
 		draggable(elem, {
 			handle: elem.querySelector('h1'),
-			stop: function() {
+			start: function() {
 				_this.toFloat();
 			}
 		});
@@ -94,7 +94,6 @@
 			clearTimeout(elem.Tracy.displayTimeout);
 			elem.Tracy.displayTimeout = setTimeout(function() {
 				elem.classList.add(Panel.FOCUSED);
-				elem.style.display = 'block';
 				elem.style.zIndex = Panel.zIndex++;
 				if (callback) {
 					callback();
@@ -105,11 +104,10 @@
 
 	Panel.prototype.blur = function() {
 		var elem = this.elem;
-		elem.classList.remove(Panel.FOCUSED);
 		if (this.is(Panel.PEEK)) {
 			clearTimeout(elem.Tracy.displayTimeout);
 			elem.Tracy.displayTimeout = setTimeout(function() {
-				elem.style.display = 'none';
+				elem.classList.remove(Panel.FOCUSED);
 			}, 50);
 		}
 	};
@@ -118,15 +116,14 @@
 		this.elem.classList.remove(Panel.WINDOW);
 		this.elem.classList.remove(Panel.PEEK);
 		this.elem.classList.add(Panel.FLOAT);
-		this.elem.style.display = 'block';
 		this.reposition();
 	};
 
 	Panel.prototype.toPeek = function() {
 		this.elem.classList.remove(Panel.WINDOW);
 		this.elem.classList.remove(Panel.FLOAT);
+		this.elem.classList.remove(Panel.FOCUSED);
 		this.elem.classList.add(Panel.PEEK);
-		this.elem.style.display = 'none';
 	};
 
 	Panel.prototype.toWindow = function() {
@@ -163,9 +160,9 @@
 			}
 		});
 
-		this.elem.style.display = 'none';
 		this.elem.classList.remove(Panel.FLOAT);
 		this.elem.classList.remove(Panel.PEEK);
+		this.elem.classList.remove(Panel.FOCUSED);
 		this.elem.classList.add(Panel.WINDOW);
 		this.elem.Tracy.window = win;
 		return true;
@@ -493,6 +490,9 @@
 			dE.addEventListener('mousemove', onmousemove);
 			dE.addEventListener('mouseup', onmouseup);
 			requestAnimationFrame(redraw);
+			if (options.start) {
+				options.start(e, elem);
+			}
 		});
 
 		(options.handle || elem).addEventListener('click', function(e) {