passing correct delta time into devtools

The correct delta time for the frame was not being passed into the devtoolsManager.updateCompleted() call. (This apparently was a known issue since there is a comment that says "FIXME(2022-08-20): Pass the correct FPS for display."
This commit adds a variable to track a timestamp for the last completed frame update and passes the delta between this timestamp and the current frame timestamp into the updateCompleted() call.
The resulting displayed FPS is accurate, but can be choppy due to the intermittent frame delays that are caused by waiting for timeFrameStart to catch up to timeNextUpdate. So, to smooth this out, this commit also includes a change to devToolsManager to display a rolling 10 frame average FPS.

devtools/web/src/devtools-manager.ts

@@ -58,6 +58,20 @@ export class DevtoolsManager {
    */
   private _bufferedData = new BufferedRuntimeData();
 
+  private _fpsBuffer : number[] = [0,0,0,0,0,0,0,0,0,0];
+  private _fpsBufferIdx = 0;
+  //calculate an average FPS for the last 10 frames
+  private _calcAvgFPS = () => {
+    let sum = this._fpsBuffer[0];
+    for (let i = 1; i < 10; i++)
+      sum += this._fpsBuffer[i];
+    return sum / 10;
+  }
+  private _nextFPSBufferIdx = () => {
+    (this._fpsBufferIdx == 9) ? this._fpsBufferIdx = 0 : this._fpsBufferIdx++;
+    return this._fpsBufferIdx;
+  }
+
   /**
    * Notifies the devtools that the web runtime has completed an update.
    */
@@ -66,12 +80,12 @@ export class DevtoolsManager {
     deltaFrame: number
   ) => {
     if (this._enabled) {
-      const fps = Math.floor(1_000 / deltaFrame);
+      this._fpsBuffer[this._nextFPSBufferIdx()] = Math.floor(1_000 / deltaFrame);
       this._bufferedData.update(runtimeInfo.data);
       this._notifyUpdateCompleted(
         runtimeInfo.data,
         runtimeInfo.wasmBufferByteLen,
-        fps
+        this._calcAvgFPS()
       );
     }
   };

runtimes/web/src/ui/app.ts

@@ -429,6 +429,8 @@ export class App extends LitElement {
 
         // When we should perform the next update
         let timeNextUpdate = performance.now();
+        // Track the timestamp of the last frame
+        let lastTimeFrameStart = timeNextUpdate;
 
         const onFrame = (timeFrameStart: number) => {
             requestAnimationFrame(onFrame);
@@ -480,8 +482,9 @@ export class App extends LitElement {
                 runtime.composite();
 
                 if (import.meta.env.DEV) {
-                    // FIXME(2022-08-20): Pass the correct FPS for display
-                    devtoolsManager.updateCompleted(runtime, 1000/60);
+                    // FIXED(2022-12-13): Pass the correct FPS for display                    
+                    devtoolsManager.updateCompleted(runtime, timeFrameStart - lastTimeFrameStart);
+                    lastTimeFrameStart = timeFrameStart;
                 }
             }
         }