panel fixes

hxd/inspect/Inspector.hx

@@ -106,7 +106,7 @@ class Inspector {
 		addTool("Statistics", "bar-chart", function() {
 			if( statsPanel == null ) {
 				statsPanel = new StatsPanel();
-				statsPanel.dock(jroot, Right, 0.35);
+				statsPanel.dock(Right, 0.35);
 			}
 			statsPanel.show();
 		}, "Open statistics");
@@ -192,9 +192,9 @@ class Inspector {
 		propsPanel = new Panel("props","Properties");
 		logPanel = new Panel("log", "Log");
 
-		scenePanel.dock(jroot, Left, 0.2);
-		logPanel.dock(jroot, Down, 0.3);
-		propsPanel.dock(scenePanel.j, Down, 0.5);
+		scenePanel.dock(Left, 0.2);
+		logPanel.dock(Down, 0.3);
+		propsPanel.dock(Down, 0.5, scenePanel);
 	}
 
 	function load() {

hxd/inspect/Panel.hx

@@ -1,8 +1,18 @@
 package hxd.inspect;
 
+enum DockDirection {
+	Left;
+	Right;
+	Up;
+	Down;
+	Fill;
+}
+
 class Panel extends Node {
 
 	var inspect : Inspector;
+	var panel : cdb.jq.JQuery;
+	var saveDock : { align : DockDirection, size : Float, into : Panel };
 	public var visible(default, null) : Bool;
 	public var caption(default, set) : String;
 	public var content : cdb.jq.JQuery;
@@ -15,17 +25,41 @@ class Panel extends Node {
 			inspect.panels.push(this);
 			inspect.rootNodes.push(this);
 		}
-		if( name == null ) onClose = remove;
 	}
 
-	public function dock( to : cdb.jq.JQuery, align : cdb.jq.Message.DockDirection, ?size : Float ) {
-		j.dock(to.get(), align, size);
-		j.bind("panelclose", function(_) onClose());
+	public function dock( align : DockDirection, ?size : Float, ?into : Panel ) {
+		undock();
+		saveDock = { align : align, size : size, into : into };
+		panel = j.query("<panel>");
+		panel.appendTo(into == null || into.panel == null ? @:privateAccess inspect.jroot : into.panel);
+		if( caption != null ) panel.attr("caption", caption);
+		panel.attr("docksize", "" + size);
+		panel.attr("dock", "" + align);
+		panel.bind("paneldock", function(e) {
+			if( e.target == null ) {
+				visible = false;
+				return;
+			}
+		});
 		visible = true;
+		j.appendTo(panel);
+	}
+
+	override function dispose() {
+		undock();
+		super.dispose();
+	}
+
+	public function undock() {
+		if( panel == null ) return;
+		j.detach();
+		panel.removeAttr("dock");
+		panel.dispose();
+		panel = null;
 	}
 
 	function set_caption(c) {
-		j.attr("caption", c);
+		if( panel != null ) panel.attr("caption", c);
 		return caption = c;
 	}
 
@@ -60,14 +94,15 @@ class Panel extends Node {
 		return parent = p;
 	}
 
-	public dynamic function onClose() {
-		visible = false;
-		trace("TODO:UNDOCK");
-	}
-
 	public function show() {
-		trace("TODO:REDOCK");
-		visible = true;
+		if( visible ) return;
+		var old = saveDock;
+		if( saveDock != null && saveDock.into != null && saveDock.into.visible )
+			dock(saveDock.align, saveDock.size, saveDock.into);
+		else {
+			dock(Fill);
+			saveDock = old;
+		}
 	}
 
 	public function sync() {

hxd/inspect/inspect.css

@@ -3,6 +3,10 @@
 	-moz-user-select : none;
 	-webkit-user-select : none;
 }
+.jqpage panel, .dialog-floating panel {
+	display : block;
+	overflow : auto;
+}
 .jqpage pre, .dialog-floating pre {
 	user-select : text;
 	-moz-user-select : text;

hxd/inspect/inspect.hss

@@ -4,6 +4,11 @@
 		user-select : none;
 	}
 
+	panel {
+		display:block;
+		overflow:auto;
+	}
+
 	pre {
 		user-select : text;
 		.kwd {