webgl status icon/toggle for debugging

Author: sawka

frontend/app/view/term/term-model.ts

@@ -41,7 +41,7 @@ import * as jotai from "jotai";
 import * as React from "react";
 import { getBlockingCommand } from "./shellblocking";
 import { computeTheme, DefaultTermTheme } from "./termutil";
-import { TermWrap } from "./termwrap";
+import { TermWrap, WebGLSupported } from "./termwrap";
 
 export class TermViewModel implements ViewModel {
     viewType: string;
@@ -293,6 +293,13 @@ export class TermViewModel implements ViewModel {
                 }
             }
 
+            if (get(getSettingsKeyAtom("debug:webglstatus"))) {
+                const webglButton = this.getWebGlIconButton(get);
+                if (webglButton) {
+                    rtn.push(webglButton);
+                }
+            }
+
             if (blockData?.meta?.["controller"] != "cmd" && shellProcStatus != "done") {
                 return rtn;
             }
@@ -438,6 +445,38 @@ export class TermViewModel implements ViewModel {
         return null;
     }
 
+    getWebGlIconButton(get: jotai.Getter): IconButtonDecl | null {
+        if (!WebGLSupported) {
+            return {
+                elemtype: "iconbutton",
+                icon: "microchip",
+                iconColor: "var(--error-color)",
+                title: "WebGL not supported",
+                noAction: true,
+            };
+        }
+        if (!this.termRef.current?.webglEnabledAtom) {
+            return null;
+        }
+        const webglEnabled = get(this.termRef.current.webglEnabledAtom);
+        if (webglEnabled) {
+            return {
+                elemtype: "iconbutton",
+                icon: "microchip",
+                iconColor: "var(--success-color)",
+                title: "WebGL enabled (click to disable)",
+                click: () => this.toggleWebGl(),
+            };
+        }
+        return {
+            elemtype: "iconbutton",
+            icon: "microchip",
+            iconColor: "var(--secondary-text-color)",
+            title: "WebGL disabled (click to enable)",
+            click: () => this.toggleWebGl(),
+        };
+    }
+
     get viewComponent(): ViewComponent {
         return TerminalView as ViewComponent;
     }
@@ -478,6 +517,21 @@ export class TermViewModel implements ViewModel {
         });
     }
 
+    isWebGlEnabled(): boolean {
+        return this.termRef.current?.isWebGlEnabled() ?? false;
+    }
+
+    toggleWebGl() {
+        if (!this.termRef.current) {
+            return;
+        }
+        if (this.termRef.current.isWebGlEnabled()) {
+            this.termRef.current.disableWebGl();
+        } else {
+            this.termRef.current.enableWebGl();
+        }
+    }
+
     triggerRestartAtom() {
         globalStore.set(this.isRestarting, true);
         setTimeout(() => {

frontend/app/view/term/termwrap.ts

@@ -56,7 +56,7 @@ function detectWebGLSupport(): boolean {
     }
 }
 
-const WebGLSupported = detectWebGLSupport();
+export const WebGLSupported = detectWebGLSupport();
 let loggedWebGL = false;
 
 type TermWrapOptions = {
@@ -85,6 +85,8 @@ export class TermWrap {
     sendDataHandler: (data: string) => void;
     onSearchResultsDidChange?: (result: { resultIndex: number; resultCount: number }) => void;
     private toDispose: TermTypes.IDisposable[] = [];
+    webglAddon: WebglAddon | null = null;
+    webglEnabledAtom: jotai.PrimitiveAtom<boolean>;
     pasteActive: boolean = false;
     lastUpdated: number;
     promptMarkers: TermTypes.IMarker[] = [];
@@ -142,6 +144,7 @@ export class TermWrap {
         this.promptMarkers = [];
         this.shellIntegrationStatusAtom = jotai.atom(null) as jotai.PrimitiveAtom<ShellIntegrationStatus | null>;
         this.lastCommandAtom = jotai.atom(null) as jotai.PrimitiveAtom<string | null>;
+        this.webglEnabledAtom = jotai.atom(false) as jotai.PrimitiveAtom<boolean>;
         this.terminal = new Terminal(options);
         this.fitAddon = new FitAddon();
         this.fitAddon.scrollbarWidth = 6; // this needs to match scrollbar width in term.scss
@@ -180,17 +183,7 @@ export class TermWrap {
             )
         );
         if (WebGLSupported && waveOptions.useWebGl) {
-            const webglAddon = new WebglAddon();
-            this.toDispose.push(
-                webglAddon.onContextLoss(() => {
-                    webglAddon.dispose();
-                })
-            );
-            this.terminal.loadAddon(webglAddon);
-            if (!loggedWebGL) {
-                console.log("loaded webgl!");
-                loggedWebGL = true;
-            }
+            this.loadWebGlAddon();
         }
         // Register OSC handlers
         this.terminal.parser.registerOscHandler(7, (data: string) => {
@@ -307,6 +300,44 @@ export class TermWrap {
         this.terminal.options.cursorBlink = cursorBlink ?? false;
     }
 
+    loadWebGlAddon() {
+        const addon = new WebglAddon();
+        this.toDispose.push(
+            addon.onContextLoss(() => {
+                if (addon === this.webglAddon) {
+                    this.disableWebGl();
+                }
+            })
+        );
+        this.terminal.loadAddon(addon);
+        this.webglAddon = addon;
+        globalStore.set(this.webglEnabledAtom, true);
+        if (!loggedWebGL) {
+            console.log("loaded webgl!");
+            loggedWebGL = true;
+        }
+    }
+
+    isWebGlEnabled(): boolean {
+        return this.webglAddon != null;
+    }
+
+    enableWebGl() {
+        if (!WebGLSupported || this.webglAddon != null) {
+            return;
+        }
+        this.loadWebGlAddon();
+    }
+
+    disableWebGl() {
+        if (this.webglAddon == null) {
+            return;
+        }
+        this.webglAddon.dispose();
+        this.webglAddon = null;
+        globalStore.set(this.webglEnabledAtom, false);
+    }
+
     resetCompositionState() {
         this.isComposing = false;
         this.composingData = "";

frontend/types/gotypes.d.ts

@@ -1395,6 +1395,7 @@ declare global {
         "debug:*"?: boolean;
         "debug:pprofport"?: number;
         "debug:pprofmemprofilerate"?: number;
+        "debug:webglstatus"?: boolean;
         "tsunami:*"?: boolean;
         "tsunami:scaffoldpath"?: string;
         "tsunami:sdkreplacepath"?: string;

pkg/wconfig/metaconsts.go

@@ -121,6 +121,7 @@ const (
 	ConfigKey_DebugClear                     = "debug:*"
 	ConfigKey_DebugPprofPort                 = "debug:pprofport"
 	ConfigKey_DebugPprofMemProfileRate       = "debug:pprofmemprofilerate"
+	ConfigKey_DebugWebGlStatus               = "debug:webglstatus"
 
 	ConfigKey_TsunamiClear                   = "tsunami:*"
 	ConfigKey_TsunamiScaffoldPath            = "tsunami:scaffoldpath"

pkg/wconfig/settingsconfig.go

@@ -172,6 +172,7 @@ type SettingsType struct {
 	DebugClear               bool `json:"debug:*,omitempty"`
 	DebugPprofPort           *int `json:"debug:pprofport,omitempty"`
 	DebugPprofMemProfileRate *int `json:"debug:pprofmemprofilerate,omitempty"`
+	DebugWebGlStatus         bool `json:"debug:webglstatus,omitempty"`
 
 	TsunamiClear          bool   `json:"tsunami:*,omitempty"`
 	TsunamiScaffoldPath   string `json:"tsunami:scaffoldpath,omitempty"`

schema/settings.json

@@ -325,6 +325,9 @@
         "debug:pprofmemprofilerate": {
           "type": "integer"
         },
+        "debug:webglstatus": {
+          "type": "boolean"
+        },
         "tsunami:*": {
           "type": "boolean"
         },