Memory profiler: Sort datas by size or count

bin/style.css

@@ -2984,6 +2984,10 @@ div.gradient-box {
 .profiler .left-panel .hierarchy table thead td {
   font-weight: bold;
 }
+.profiler .left-panel .hierarchy table thead .sort-count,
+.profiler .left-panel .hierarchy table thead .sort-size {
+  cursor: pointer;
+}
 .profiler .left-panel .hierarchy table tr:hover {
   background-color: #272727;
 }
@@ -3019,6 +3023,9 @@ div.gradient-box {
   background-color: #d6d6d6;
   height: 15px;
 }
+.profiler .left-panel .hierarchy table td .icon {
+  padding-left: 10px;
+}
 .profiler .left-panel .hierarchy table .inspect-row td {
   width: 100px;
 }

bin/style.less

@@ -3406,6 +3406,10 @@ div.gradient-box {
 					td {
 						font-weight: bold;
 					}
+
+					.sort-count, .sort-size {
+						cursor: pointer;
+					}
 				}
 
 				tr:hover{
@@ -3451,6 +3455,10 @@ div.gradient-box {
 						background-color: #d6d6d6;
 						height: 15px;
 					}
+
+					.icon {
+						padding-left:10px;
+					}
 				}
 
 				.inspect-row {

hide/view/Profiler.hx

@@ -289,7 +289,11 @@ class Profiler extends hide.ui.View<{}> {
 	}
 
 	public function refresh() {
-		// Update memory statistics on the right panel
+		refreshStats();
+		refreshHierarchicalView();
+	}
+
+	public function refreshStats() {
 		element.find('.stats').remove();
 
 		new Element ('
@@ -312,17 +316,18 @@ class Profiler extends hide.ui.View<{}> {
 			</dl>
 		</div>
 		').appendTo(element.find('.right-panel'));
+	}
 
-		// Update memory hierarchical view
+	public function refreshHierarchicalView() {
 		element.find('table').parent().remove();
 		var tab = new Element('
 		<div class="hide-scroll">
 			<table rules=none>
 				<thead>
-					<td>Count</td>
-					<td>Size</td>
+					<td class="sort-count">Count<div ${sort.match(SortType.ByCount) ? 'class="icon ico ico-caret-${sortOrderAscending ? 'up' : 'down'}"' : ''}></div></td>
+					<td class="sort-size">Size<div ${sort.match(SortType.ByMemory) ? 'class="icon ico ico-caret-${sortOrderAscending ? 'up' : 'down'}"' : ''}></div></td>
 					<td>Name</td>
-					<td>% Impact</td>
+					<td class="sort-size">% Impact<div ${sort.match(SortType.ByMemory) ? 'class="icon ico ico-caret-${sortOrderAscending ? 'up' : 'down'}"' : ''}></div></td>
 				</thead>
 				<tbody>
 				</tbody>
@@ -330,6 +335,9 @@ class Profiler extends hide.ui.View<{}> {
 		</div>'
 		).appendTo(element.find(".hierarchy"));
 
+		tab.find('.sort-count').on('click', function(e) { sortDatas(SortType.ByCount, sort.match(SortType.ByCount) ? !sortOrderAscending : false); });
+		tab.find('.sort-size').on('click', function(e) { sortDatas(SortType.ByMemory, sort.match(SortType.ByMemory) ? !sortOrderAscending : false); });
+
 		var body = tab.find('tbody');
 		for (l in lines)
 			new ProfilerElement(this, l, null, null).element.appendTo(body);
@@ -373,6 +381,16 @@ class Profiler extends hide.ui.View<{}> {
 		return children.map(c -> {v : c.p, children : getChildren(depth+1, c.p, valid), line : c.line, total : {count : c.count, mem : c.size}});
 	}
 
+	public function sortDatas(sort: SortType, isAscending : Bool) {
+		this.sort = sort;
+		this.sortOrderAscending = isAscending;
+
+		if (mainMemory == null) return;
+
+		displayTypes(sort, isAscending);
+		refreshHierarchicalView();
+	}
+
 	static var _ = hide.ui.View.register(Profiler);
 
 }