memory-profiler: Stats & start of hierarchical view

HeapsIO · Mar 27, 2024 · 11a64e2 · 11a64e2
1 parent ab27eb2
commit 11a64e2
Show file tree

Hide file tree

Showing 8 changed files with 2,364 additions and 0 deletions.
diff --git a/bin/app.html b/bin/app.html
@@ -100,6 +100,12 @@
 		<menu label="Save As..." class="saveas"></menu>
 		<menu label="Manage" class="manage" disabled="disabled"></menu>
 	</menu>
+	<menu label="Profiler" class="prof">
+		<div class="content">
+		</div>
+		<separator></separator>
+		<menu label="Show" class="show"></menu>
+	</menu>
 </xml>
 <script src="hide.js"></script>
 <script>

diff --git a/bin/style.css b/bin/style.css
@@ -2951,3 +2951,161 @@ div.gradient-box {
   width: 20;
   background: #111;
 }
+.profiler {
+  width: 100%;
+  height: 100%;
+  display: flex;
+}
+.profiler .left-panel {
+  height: 100%;
+  width: 80%;
+  display: flex;
+  flex-direction: column;
+}
+.profiler .left-panel .tree-map {
+  background-color: #4c00ff;
+  width: 100%;
+  flex-grow: 1;
+}
+.profiler .left-panel .hierarchy {
+  background-color: #303030;
+  width: 100%;
+  max-height: 1200px;
+  height: 30%;
+}
+.profiler .left-panel .hierarchy table {
+  overflow-y: scroll;
+}
+.profiler .left-panel .hierarchy table thead {
+  position: sticky;
+  top: 0;
+  background-color: #151515;
+}
+.profiler .left-panel .hierarchy table thead td {
+  font-weight: bold;
+}
+.profiler .left-panel .hierarchy table tr:hover {
+  background-color: #272727;
+}
+.profiler .left-panel .hierarchy table thead tr:hover {
+  background-color: #151515;
+}
+.profiler .left-panel .hierarchy table td:last-child {
+  width: 100%;
+}
+.profiler .left-panel .hierarchy table td:nth-child(3) {
+  width: 70%;
+  max-width: 700px;
+}
+.profiler .left-panel .hierarchy table td {
+  padding: 3px 30px 3px 1px;
+  overflow: hidden;
+  white-space: nowrap;
+}
+.profiler .left-panel .hierarchy table td .folder {
+  cursor: pointer;
+  margin-right: 10px;
+  margin-left: 5px;
+  font-size: 12pt;
+  text-align: center;
+  vertical-align: text-top;
+}
+.profiler .left-panel .hierarchy table td .outer-gauge {
+  background-color: #535353;
+  width: 100%;
+  height: 15px;
+}
+.profiler .left-panel .hierarchy table td .inner-gauge {
+  background-color: #d6d6d6;
+  height: 15px;
+}
+.profiler .left-panel .hierarchy table .inspect-row td {
+  width: 100px;
+}
+.profiler .right-panel {
+  height: 100%;
+  width: 20%;
+  padding: 10px;
+}
+.profiler .right-panel dl {
+  overflow-x: hidden;
+  margin: 0px;
+}
+.profiler .right-panel dt {
+  width: 80px;
+  text-align: right;
+  font-size: 11px;
+  color: #aaa;
+  user-select: none;
+  text-transform: capitalize;
+  cursor: pointer;
+  font-weight: normal;
+  vertical-align: middle;
+  display: inline-block;
+  text-wrap: wrap;
+  word-break: break-word;
+  margin-top: 4px;
+}
+.profiler .right-panel dd {
+  position: relative;
+  width: 200px;
+  margin-left: 10px;
+  vertical-align: middle;
+  display: inline-block;
+  text-wrap: wrap;
+  word-break: break-word;
+  margin-top: 4px;
+}
+.profiler .right-panel .outer-gauge {
+  background-color: #535353;
+  width: 100%;
+  height: 20px;
+}
+.profiler .right-panel .inner-gauge {
+  background-color: #d6d6d6;
+  height: 20px;
+}
+.profiler .right-panel h4 {
+  margin-bottom: 2px;
+}
+.profiler .right-panel .title {
+  text-align: center;
+  font-size: 9pt;
+  background-color: #151515;
+  margin-bottom: 5px;
+  margin-top: 20px;
+  vertical-align: middle;
+}
+.profiler .right-panel .title:first-child {
+  margin-top: 5px;
+}
+.profiler .right-panel .drop-zone {
+  background-color: #111111;
+  border-style: dashed;
+  border-width: 5px;
+  height: 100px;
+  padding-top: 20px;
+}
+.profiler .right-panel .drop-zone .icon {
+  text-align: center;
+  font-size: 30pt;
+  margin: 0;
+  font-weight: bold;
+  pointer-events: none;
+}
+.profiler .right-panel .drop-zone .label {
+  text-align: center;
+  pointer-events: none;
+}
+@keyframes zoomIn {
+  from {
+    transform: scale(0);
+  }
+  to {
+    transform: scale(1);
+  }
+}
+.profiler .right-panel .files-input #process-btn {
+  width: 100%;
+  margin-top: 15px;
+}
diff --git a/bin/style.less b/bin/style.less
@@ -3370,4 +3370,198 @@ div.gradient-box {
 		width : 20;
 		background : #111;
 	}
+}
+
+.profiler {
+	width: 100%;
+	height: 100%;
+	display: flex;
+
+	.left-panel {
+		height: 100%;
+		width: 80%;
+		display: flex;
+		flex-direction: column;
+
+		.tree-map {
+			background-color: #4c00ff;
+			width: 100%;
+			flex-grow: 1;
+		}
+
+		.hierarchy {
+			background-color: #303030;
+			width: 100%;
+			max-height: 1200px;
+			height: 30%;
+
+			table {
+				overflow-y: scroll;
+
+				thead {
+					position: sticky;
+					top: 0;
+					background-color: #151515;
+
+					td {
+						font-weight: bold;
+					}
+				}
+
+				tr:hover{
+					background-color: #272727;
+				}
+
+				thead {
+					tr:hover {
+						background-color: #151515;
+					}
+				}
+
+				td:last-child {
+					width: 100%;
+				}
+
+				td:nth-child(3) {
+					width: 70%;
+					max-width: 700px;
+				}
+
+				td {
+					padding: 3px 30px 3px 1px;
+					overflow: hidden;
+					white-space: nowrap;
+
+					.folder {
+						cursor: pointer;
+						margin-right: 10px;
+						margin-left: 5px;
+						font-size: 12pt;
+						text-align: center;
+						vertical-align: text-top;
+					}
+
+					.outer-gauge {
+						background-color: #535353;
+						width: 100%;
+						height: 15px;
+					}
+
+					.inner-gauge {
+						background-color: #d6d6d6;
+						height: 15px;
+					}
+				}
+
+				.inspect-row {
+					td {
+						width: 100px;
+					}
+				}
+			}
+		}
+	}
+
+	.right-panel {
+		height: 100%;
+		width: 20%;
+		padding: 10px;
+
+		dl {
+			overflow-x: hidden;
+			margin: 0px;
+		}
+
+		dt {
+			width: 80px;
+			text-align: right;
+			font-size: 11px;
+			color: #aaa;
+			user-select: none;
+			text-transform: capitalize;
+			cursor: pointer;
+			font-weight: normal;
+			vertical-align: middle;
+			display: inline-block;
+			text-wrap: wrap;
+			word-break: break-word;
+			margin-top: 4px;
+		}
+
+		dd {
+			position: relative;
+			width: 200px;
+			margin-left: 10px;
+			vertical-align: middle;
+			display: inline-block;
+			text-wrap: wrap;
+			word-break: break-word;
+			margin-top: 4px;
+		}
+
+		.outer-gauge {
+			background-color: #535353;
+			width: 100%;
+			height: 20px;
+		}
+
+		.inner-gauge {
+			background-color: #d6d6d6;
+			height: 20px;
+		}
+
+		h4 {
+			margin-bottom: 2px;
+		}
+
+		.title {
+			text-align: center;
+			font-size: 9pt;
+			background-color: #151515;
+			margin-bottom: 5px;
+			margin-top: 20px;
+			vertical-align: middle;
+		}
+
+		.title:first-child {
+			margin-top: 5px;
+		}
+
+		.drop-zone {
+			background-color: #111111;
+			border-style: dashed;
+			border-width: 5px;
+			height: 100px;
+			padding-top: 20px;
+
+			.icon {
+				text-align: center;
+				font-size: 30pt;
+				margin: 0;
+				font-weight: bold;
+				pointer-events: none;
+			}
+
+			.label {
+				text-align: center;
+				pointer-events: none;
+			}
+
+			@keyframes zoomIn {
+				from {
+					transform: scale(0);
+				}
+				to {
+					transform: scale(1);
+				}
+			}
+		}
+
+		.files-input {
+			#process-btn {
+				width: 100%;
+				margin-top: 15px;
+			}
+		}
+	}
 }
diff --git a/hide/Ide.hx b/hide/Ide.hx
@@ -1114,6 +1114,12 @@ class Ide extends hide.tools.IdeData {
 			config.global.save();
 		});
 
+		// profilers
+		var profilers = menu.find(".prof");
+		profilers.find(".show").click(function(_) {
+			open("hide.view.Profiler",{});
+		});
+
 		window.menu = new hide.ui.Menu(menu).root;
 	}