perf: throttle oscilloscope canvas updates when minimized or backgrounded

Author: vanshika2720

js/widgets/oscilloscope.js

@@ -63,6 +63,11 @@ class Oscilloscope {
             this.close();
         };
         widgetWindow.onmaximize = this._scale.bind(this);
+        widgetWindow.onrollup = this._throttle.bind(this);
+        widgetWindow.onunroll = this._wakeUp.bind(this);
+
+        this._handleVisibilityChange = this._handleVisibilityChange.bind(this);
+        document.addEventListener("visibilitychange", this._handleVisibilityChange);
 
         // UI state
         this.zoomFactor = 40.0;
@@ -106,6 +111,7 @@ class Oscilloscope {
 
         if (this._rafId !== null) {
             cancelAnimationFrame(this._rafId);
+            clearTimeout(this._rafId);
             this._rafId = null;
         }
 
@@ -123,9 +129,34 @@ class Oscilloscope {
         this.draw();
     }
 
+    _throttle() {
+        if (!this._running || this._rafId === null) return;
+        cancelAnimationFrame(this._rafId);
+        clearTimeout(this._rafId);
+        this._rafId = setTimeout(this.draw, 1000);
+    }
+
+    _wakeUp() {
+        if (!this._running || this._rafId === null) return;
+        cancelAnimationFrame(this._rafId);
+        clearTimeout(this._rafId);
+        this._rafId = null;
+        this.draw();
+    }
+
+    _handleVisibilityChange() {
+        if (document.visibilityState === "visible") {
+            this._wakeUp();
+        } else {
+            this._throttle();
+        }
+    }
+
     close() {
         this._stopAnimation();
 
+        document.removeEventListener("visibilitychange", this._handleVisibilityChange);
+
         this.drawVisualIDs = {};
         this._canvasState = {};
         this.pitchAnalysers = {};
@@ -214,6 +245,11 @@ class Oscilloscope {
     draw() {
         if (!this._running) return;
 
+        if (document.visibilityState === "hidden" || this.widgetWindow._rolled) {
+            this._rafId = setTimeout(this.draw, 1000);
+            return;
+        }
+
         this._renderFrame();
 
         this._rafId = requestAnimationFrame(this.draw);

js/widgets/widgetWindows.js

@@ -61,6 +61,11 @@ class WidgetWindow {
         this.takeFocus();
 
         this.sendToCenter = this.sendToCenter.bind(this);
+
+        this.onclose = () => {};
+        this.onmaximize = () => {};
+        this.onrollup = () => {};
+        this.onunroll = () => {};
     }
 
     /**
@@ -620,6 +625,7 @@ class WidgetWindow {
     _rollup() {
         this._rolled = true;
         this._body.style.display = "none";
+        this.onrollup();
         return this;
     }
 
@@ -633,6 +639,7 @@ class WidgetWindow {
         if (this._rollButton && this._rollButton.classList.contains("plus")) {
             this._rollButton.classList.remove("plus");
         }
+        this.onunroll();
         return this;
     }
 }