fix(terminal): render terminal canvas at correct DPR when webview is zoomed

Tauri/Electron native zoom does not update window.devicePixelRatio,
causing the xterm.js WebGL canvas to render at 1x resolution regardless
of zoom level. The native zoom then upscales the bitmap, producing
blurry terminal text at zoom levels above 100%.

Fix by overriding the devicePixelRatio getter in zoomWebView() to
reflect the effective DPR (baseDPR * zoomFactor). The terminal detects
DPR changes during fit() and calls clearTextureAtlas() to rebuild
glyphs at the new resolution. Also guards _cropDataUrlToRect to use
the original base DPR so screenshot cropping is unaffected.

Author: abose

src/extensionsIntegrated/Terminal/TerminalInstance.js

@@ -105,6 +105,8 @@ define(function (require, exports, module) {
         this.$container = null;
         this._resizeTimeout = null;
         this._disposed = false;
+        this._webglAddon = null;
+        this._lastDpr = null;
 
         // Bound event handlers for cleanup
         this._onTerminalData = this._onTerminalData.bind(this);
@@ -144,11 +146,7 @@ define(function (require, exports, module) {
         this.terminal.open(this.$container[0]);
 
         // Load WebGL renderer for better performance
-        try {
-            this.terminal.loadAddon(new WebglAddon());
-        } catch (e) {
-            console.warn("Terminal: WebglAddon failed to load, using default renderer:", e);
-        }
+        this._loadWebGLAddon();
 
         // Fit to container
         this._fit();
@@ -270,6 +268,22 @@ define(function (require, exports, module) {
         return true; // Let xterm handle it
     };
 
+    /**
+     * Load (or reload) the WebGL renderer addon, recording the current DPR
+     * so we can detect changes later and recreate the addon at the correct
+     * resolution (e.g. after a zoom change).
+     */
+    TerminalInstance.prototype._loadWebGLAddon = function () {
+        try {
+            this._webglAddon = new WebglAddon();
+            this.terminal.loadAddon(this._webglAddon);
+            this._lastDpr = window.devicePixelRatio;
+        } catch (e) {
+            console.warn("Terminal: WebglAddon failed to load, using default renderer:", e);
+            this._webglAddon = null;
+        }
+    };
+
     /**
      * Fit the terminal to its container.
      *
@@ -288,6 +302,15 @@ define(function (require, exports, module) {
             return;
         }
 
+        // When the effective DPR changes (e.g. after a webview zoom change),
+        // clear the glyph texture atlas so the WebGL renderer rebuilds it at
+        // the new resolution. The subsequent fit() will resize the canvas.
+        const currentDpr = window.devicePixelRatio;
+        if (this._lastDpr !== null && this._lastDpr !== currentDpr) {
+            this._lastDpr = currentDpr;
+            this.terminal.clearTextureAtlas();
+        }
+
         try {
             // Only clear the prompt region when dimensions are actually
             // changing — i.e. a real reflow will happen.  When dimensions
@@ -416,6 +439,10 @@ define(function (require, exports, module) {
 
         // Dispose xterm
         clearTimeout(this._resizeTimeout);
+        if (this._webglAddon) {
+            this._webglAddon.dispose();
+            this._webglAddon = null;
+        }
         if (this.terminal) {
             this.terminal.dispose();
             this.terminal = null;

src/phoenix/shell.js

@@ -203,7 +203,7 @@ function _cropDataUrlToRect(dataUrl, rect) {
         const img = new Image();
         img.onload = function () {
             try {
-                const dpr = window.devicePixelRatio || 1;
+                const dpr = window._origDevicePixelRatio || window.devicePixelRatio || 1;
                 const canvas = document.createElement("canvas");
                 const sx = Math.round(rect.x * dpr);
                 const sy = Math.round(rect.y * dpr);
@@ -859,6 +859,17 @@ Phoenix.app = {
         if(scaleFactor < .1 || scaleFactor > 2) {
             throw new Error("zoomWebView scale factor should be between .1 and 2");
         }
+        // Native webview zoom (Tauri/Electron) does not update
+        // window.devicePixelRatio, causing canvas-based renderers
+        // (e.g. xterm.js WebGL) to render at the wrong resolution.
+        // Override the getter so it reflects the effective DPR.
+        if(window._origDevicePixelRatio === undefined) {
+            window._origDevicePixelRatio = window.devicePixelRatio;
+        }
+        Object.defineProperty(window, 'devicePixelRatio', {
+            get() { return window._origDevicePixelRatio * scaleFactor; },
+            configurable: true
+        });
         if(window.__TAURI__) {
             return window.__TAURI__.tauri.invoke("zoom_window", {scaleFactor: scaleFactor});
         }