Implement thread execution time tracking

Added execution time tracking for threads in the debugger.

Author: TheShovel

static/extensions/TheShovel/shoveldebugger.js

@@ -16,6 +16,17 @@
     oldStamp.call(this, target);
   };
 
+  const oldStepThread = vm.runtime.sequencer.stepThread;
+  let _threadExecutionTimes = {};
+  vm.runtime.sequencer.stepThread = function (e) {
+    const startTime = performance.now();
+    oldStepThread.call(this, e);
+    const endTime = performance.now();
+    const executionTime = endTime - startTime;
+    const variableName = `thread_${e.topBlock}_executionTime`;
+    _threadExecutionTimes[variableName] = executionTime;
+  };
+
   const oldSetTarget = vm.runtime.setEditingTarget;
   vm.runtime.setEditingTarget = function (editingTarget) {
     if (
@@ -124,6 +135,7 @@
 
         this._maybeSample(t1, smoothedFps, stampsPerFrame);
         stampsPerFrame = 0;
+        this._updateThreadViewer();
       };
 
       if (!this.debuggerWindow) this._createWindow();
@@ -1428,6 +1440,11 @@
                   topBlock = B.getMainWorkspace().blockDB_[thread.topBlock];
                 }
 
+                const executionTimeKey = `thread_${thread.topBlock}_executionTime`;
+                const executionTime =
+                  _threadExecutionTimes[executionTimeKey] || 0;
+                const showExecutionTime = executionTime > 0;
+
                 if (!this.performanceMode) {
                   const messageDiv = document.createElement("div");
                   Object.assign(messageDiv.style, {
@@ -1441,7 +1458,13 @@
                     marginLeft: "15px",
                     cursor: "pointer",
                   });
-                  messageDiv.textContent = `Thread ${index + 1}`;
+
+                  let labelText = `Thread ${index + 1}`;
+                  if (showExecutionTime) {
+                    labelText += ` (${executionTime.toFixed(2)}ms)`;
+                  }
+                  messageDiv.textContent = labelText;
+
                   if (!this.packaged) {
                     messageDiv.addEventListener("click", () => {
                       if (B && B.getMainWorkspace && thread.topBlock) {
@@ -1526,7 +1549,11 @@
                   container.appendChild(wrapper);
 
                   const label = document.createElement("div");
-                  label.textContent = `Thread ${index + 1}`;
+                  let labelText = `Thread ${index + 1}`;
+                  if (showExecutionTime) {
+                    labelText += ` (${executionTime.toFixed(2)}ms)`;
+                  }
+                  label.textContent = labelText;
                   Object.assign(label.style, {
                     position: "absolute",
                     top: "2px",
@@ -1698,7 +1725,12 @@
                     marginLeft: "15px",
                     cursor: "pointer",
                   });
-                  messageDiv.textContent = `Thread ${index + 1}`;
+
+                  let labelText = `Thread ${index + 1}`;
+                  if (showExecutionTime) {
+                    labelText += ` (${executionTime.toFixed(2)}ms)`;
+                  }
+                  messageDiv.textContent = labelText;
 
                   messageDiv.addEventListener("click", () => {
                     if (B && B.getMainWorkspace && thread.topBlock) {