complete statistics panel

hxd/net/PropInspector.hx

@@ -186,12 +186,13 @@ class PropInspector extends cdb.jq.Client {
 		return t;
 	}
 
-	public function createPanel( name : String ) {
+	public function createPanel( name : String, ?dock : cdb.jq.Message.DockDirection, ?size) {
 		var panel = J('<div>');
 		panel.addClass("panel");
 		panel.attr("caption", ""+name);
 		panel.appendTo(j);
-		panel.dock(root, Fill);
+		if( dock == null ) dock = Fill;
+		panel.dock(root, dock, size);
 		return panel;
 	}
 

hxd/net/SceneInspector.hx

@@ -747,12 +747,14 @@ class SceneInspector {
 	}
 
 	function getStats() {
-		var p = inspect.createPanel("Statistics");
+		var p = inspect.createPanel("Statistics", Right, 0.35);
 		p.html('
 			<style>$CSS</style>
 			<div id="stats" class="panel">
-				<li>Renderer</li>
 				<table>
+					<tr>
+						<th class="title" colspan="2">Renderer</th>
+					</tr>
 					<tr>
 						<th>Framerate</th>
 						<td id="fps">0</td>
@@ -765,33 +767,118 @@ class SceneInspector {
 						<th>Drawn Triangles</th>
 						<td id="tris">0</td>
 					</tr>
-				</table>
-				<li>Memory</li>
-				<table>
-					<tr id="debugOnly">
-						<th id="bufMemTitle">Buffers</th>
+
+					<tr>
+						<th class="title" colspan="2">Memory</th>
+					</tr>
+					<tr>
+						<th>
+							<span>Total</span>
+							<div id="totMemCount"></div>
+						</th>
+						<td id="totMem"></td>
+					</tr>
+					<tr>
+						<th class="button hidden">
+							<i class="fa fa-arrow-right"/>
+							<span id="bufMemTitle">Buffers</span>
+							<div id="bufMemCount"></div>
+						</th>
 						<td id="bufMem"></td>
 					</tr>
-					<tr id="debugOnly">
-						<th id="texMemTitle">Textures</th>
+					<tr>
+						<th class="button hidden">
+							<i class="fa fa-arrow-right"/>
+							<span id="texMemTitle">Textures</span>
+							<div id="texMemCount"></div>
+						</th>
 						<td id="texMem"></td>
 					</tr>
-					<tr id="debugOnly">
-						<th>Total</th>
-						<td id="totMem"></td>
-					</tr>
 				</table>
 			</div>
 		');
+
+		for( b in p.find("th.button").elements() ) {
+			b.click(function(_) {
+				b.toggleClass("hidden");
+				var i = b.children("i");
+				i.toggleClass("fa-arrow-right");
+				i.toggleClass("fa-arrow-down");
+			});
+		}
 	}
 
+	function showMemoryDetails(button : JQuery) {
+		var id = button.find("span").getAttr("id");
+		button.parent().parent().find(".detail_" + id).remove();
+
+		#if !debug
+			if(!button.hasClass("hidden")) {
+				var newElement = J("<tr>");
+				newElement.addClass("detail_" + id);
+				newElement.html("<th class='debug' colspan='2'>(Debug mode only)</th>");
+				newElement.insertAfter(button.parent());
+			}
+		#else
+			if(!button.hasClass("hidden")) {
+				var engine = h3d.Engine.getCurrent();
+				var m = new Map();
+				@:privateAccess switch(id) {
+					case "bufMemTitle":
+						for( b in engine.mem.buffers ) {
+							var b = b;
+							while( b != null ) {
+								var buf = b.allocHead;
+								while( buf != null ) {
+									var mem = buf.buffer.stride * buf.vertices * 4;
+									var name = buf.allocPos.className + ":" + buf.allocPos.lineNumber;
+									var p = m.get(name);
+									if( p == null ) {
+										p = { count : 0, mem : 0, name : name };
+										m.set(name, p);
+									}
+									p.count++;
+									p.mem += mem;
+									buf = buf.allocNext;
+								}
+								b = b.next;
+							}
+						}
+					case "texMemTitle":
+						for( t in engine.mem.textures ) {
+							var mem = t.width * t.height * 4;
+							var name = t.allocPos.fileName + ":" + t.allocPos.lineNumber;
+							var p = m.get(name);
+							if( p == null ) {
+								p = { count : 0, mem : 0, name : name };
+								m.set(name, p);
+							}
+							p.count++;
+							p.mem += mem;
+						}
+					default: null;
+				}
+
+				var elements = [for( k in m ) k];
+				elements.sort(function(e1, e2) return e1.mem - e2.mem);
+				for( e in elements) {
+					e.mem >>= 10;
+					var newElement = J("<tr>");
+					newElement.addClass("subMem");
+					newElement.addClass("detail_" + id);
+					newElement.html("<th>" + e.name + "<div>[" + e.count + "]</div></th><td>" + (e.mem > 1024 ? Math.fmt(e.mem / 1024) + " MB" : e.mem + " KB") + "</td>");
+					newElement.insertAfter(button.parent());
+				}
+			}
+		#end
+	}
 
 	inline function numberFormat(v : Int) {
 		var tmp = Std.string(v);
 		var n = Math.ceil(tmp.length / 3);
 		var str = "";
 		for( i in 0...n) {
-			if(str != "") str = "," + str;
+			if(str != "") str = " " + str;
 			var start = tmp.length - 3 * (i + 1);
 			str = Std.string(tmp.substring(Math.imax(0, start), start + 3)) + str;
 		}
@@ -812,50 +899,28 @@ class SceneInspector {
 		var totMem = p.find("#totMem");
 		var bufMemTitle = p.find("#bufMemTitle");
 		var texMemTitle = p.find("#texMemTitle");
-
-		#if !debug
-			var debug = p.find("#debugOnly");
-			if(!debug.hasClass("debug"))
-				debug.toggleClass("debug");
-			bufMem.text("(Debug mode required)");
-			texMem.text("(Debug mode required)");
-			totMem.text("(Debug mode required)");
-		#else
-			var stats = engine.mem.stats();
-			var idx = (stats.totalMemory - (stats.textureMemory + stats.managedMemory));
-			var sum : Float = (idx + stats.managedMemory) >> 10;
-			var freeMem : Float = stats.freeManagedMemory >> 10;
-			var totTex : Float = stats.textureMemory >> 10;
-			var totalMem : Float = stats.totalMemory >> 10;
-
-			//trace(stats);
-			bufMem.text((sum > 1024 ?  Math.fmt(sum / 1024) + " MB" : totTex + " KB") + " (" + (freeMem > 1024 ?  Math.fmt(freeMem / 1024) + " MB" : freeMem + " KB") + " free)");
-			texMem.text(totTex > 1024 ?  Math.fmt(totTex / 1024) + " MB" : totTex + " KB");
-			totMem.text(totalMem > 1024 ?  Math.fmt(totalMem / 1024) + " MB" : totTex + " KB");
-			bufMemTitle.text("Buffers [" + Std.string(stats.bufferCount) + "]");
-			texMemTitle.text("Textures [" + Std.string(stats.textureCount) + "]");
-
-			//var m = new Map();
-			@:privateAccess for( b in engine.mem.buffers ) {
-				var b = b;
-				while( b != null ) {
-					var buf = b.allocHead;
-					while( buf != null ) {
-						var mem = buf.buffer.stride * buf.vertices * 4;
-						//buf.allocPos
-						buf = buf.allocNext;
-					}
-					b = b.next;
-				}
-			}
-			@:privateAccess for( t in engine.mem.textures ) {
-				// t.allocPos
-			}
-/*
-			tot >>= 10;
-			bufCount.text(Std.string(count));
-			bufMem.text(tot / 1024 > 1 ? Math.fmt(tot / 1024) + " MB" :  tot + " KB");*/
-		#end
+		var bufMemCount = p.find("#bufMemCount");
+		var texMemCount = p.find("#texMemCount");
+		var totMemCount = p.find("#totMemCount");
+
+		var stats = engine.mem.stats();
+		var idx = (stats.totalMemory - (stats.textureMemory + stats.managedMemory));
+		var sum : Float = (idx + stats.managedMemory) >> 10;
+		var freeMem : Float = stats.freeManagedMemory >> 10;
+		var totTex : Float = stats.textureMemory >> 10;
+		var totalMem : Float = stats.totalMemory >> 10;
+
+		bufMem.text((sum > 1024 ?  Math.fmt(sum / 1024) + " MB" : totTex + " KB") + " (" + (freeMem > 1024 ?  Math.fmt(freeMem / 1024) + " MB" : freeMem + " KB") + " free)");
+		texMem.text(totTex > 1024 ?  Math.fmt(totTex / 1024) + " MB" : totTex + " KB");
+		totMem.text(totalMem > 1024 ?  Math.fmt(totalMem / 1024) + " MB" : totTex + " KB");
+		bufMemTitle.text("Buffers");
+		bufMemCount.text("[" + Std.string(stats.bufferCount) + "]");
+		texMemTitle.text("Textures");
+		texMemCount.text("[" + Std.string(stats.textureCount) + "]");
+		totMemCount.text("[" + Std.string(stats.bufferCount + stats.textureCount) + "]");
+
+		for( b in p.find("th.button").elements() )
+			showMemoryDetails(b);
 	}
 
 }

hxd/net/inspect.css

@@ -170,34 +170,49 @@
 	outline : 1px solid black;
 }
 .jqpage #stats table, .dialog-floating #stats table {
+	cursor : default;
+	width : 100%;
+}
+.jqpage #stats table tr th.button, .dialog-floating #stats table tr th.button {
 	cursor : pointer;
 }
-.jqpage #stats table th, .dialog-floating #stats table th {
+.jqpage #stats table tr th.title, .dialog-floating #stats table tr th.title {
+	font-size : 14px;
 	text-align : left;
-	background-color : #333;
-	color : #AAA;
+	background-color : #555;
+	color : #bbb;
 	font-weight : bold;
 	padding : 2px 4px;
-	width : 140px;
-	height : 24px;
-}
-.jqpage #stats table tr.debug th, .dialog-floating #stats table tr.debug th {
-	opacity : 0.5;
-	filter : alpha(opacity=50);
-	zoom : 1;
-}
-.jqpage #stats table tr.debug td, .dialog-floating #stats table tr.debug td {
-	opacity : 0.5;
-	filter : alpha(opacity=50);
-	zoom : 1;
-	font-style : italic;
+	border-bottom : 1px solid #888;
 }
-.jqpage #stats>li, .dialog-floating #stats>li {
+.jqpage #stats table tr th, .dialog-floating #stats table tr th {
 	text-align : left;
-	background-color : #555;
+	background-color : #333;
 	color : #eee;
 	font-weight : bold;
 	padding : 2px 4px;
-	cursor : pointer;
-	border-bottom : 1px solid #888;
+	height : 24px;
+}
+.jqpage #stats table tr th i, .dialog-floating #stats table tr th i {
+	color : #eee;
+}
+.jqpage #stats table tr th div, .dialog-floating #stats table tr th div {
+	float : right;
+}
+.jqpage #stats table tr.subMem th, .dialog-floating #stats table tr.subMem th {
+	font-weight : normal;
+	overflow : hidden;
+	background-color : #eee;
+	color : black;
+	border-bottom : 1px solid #ccc;
+}
+.jqpage #stats table tr.subMem th div, .dialog-floating #stats table tr.subMem th div {
+	float : right;
+}
+.jqpage #stats table th.debug, .dialog-floating #stats table th.debug {
+	background-color : white;
+	font-weight : normal;
+	color : #333;
+	font-style : italic;
+	border : none;
 }

hxd/net/inspect.hss

@@ -184,36 +184,57 @@
 
 	#stats {
 		table {
-			cursor : pointer;
-			th {
-				text-align : left;
-				background-color : #333;
-				color : #AAA;
-				font-weight : bold;
-				padding : 2px 4px;
-				width : 140px;
-				height : 24px;
-			}
-			tr.debug {
+			cursor : default;
+			width: 100%;
+
+			tr {
+				th.button {
+					cursor : pointer;
+				}
+				th.title {
+					font-size: 14px;
+					text-align: left;
+					background-color: #555;
+					color: #bbb;
+					font-weight: bold;
+					padding: 2px 4px;
+					border-bottom : 1px solid #888;
+				}
 				th {
-					opacity : 0.5;
+					text-align : left;
+					background-color : #333;
+					color : #eee;
+					font-weight : bold;
+					padding : 2px 4px;
+					height : 24px;
+					i {
+						color : #eee;
+					}
+					div {
+						float: right;
+					}
 				}
-				td {
-					opacity : 0.5;
-					font-style: italic;
+			}
+
+			tr.subMem th {
+				font-weight : normal;
+				overflow : hidden;
+				background-color : #eee;
+				color: black;
+				border-bottom : 1px solid #ccc;
+				div {
+					float: right;
 				}
 			}
-		}
-	}
 
-	#stats > li {
-		text-align: left;
-		background-color: #555;
-		color: #eee;
-		font-weight: bold;
-		padding: 2px 4px;
-		cursor: pointer;
-		border-bottom : 1px solid #888;
+			th.debug {
+				background-color : white;
+				font-weight : normal;
+				color : #333;
+				font-style: italic;
+				border: none;
+			}
+		}
 	}
 
 }