Fix proposeDimensions error by checking terminal readiness first

Add isTerminalReady() check before calling fitAddon.proposeDimensions() in the initial fit loop to prevent 'viewport.scrollBarWidth' TypeError when terminal is not fully initialized.
2026-01-28 00:39:37 +00:00
parent a3b0d46fa8
commit 8ee6f2d605
6 changed files with 505 additions and 14775 deletions
@@ -0,0 +1,110 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Terminal Resize Test</title>
+    <style>
+        html, body {
+            height: 100%;
+            width: 100%;
+            margin: 0;
+            padding: 0;
+            overflow: hidden;
+        }
+        
+        #terminal-container {
+            width: 100%;
+            height: 100%;
+            border: 2px solid #444;
+            box-sizing: border-box;
+        }
+        
+        .controls {
+            position: absolute;
+            top: 10px;
+            right: 10px;
+            background: rgba(0,0,0,0.7);
+            color: white;
+            padding: 10px;
+            border-radius: 5px;
+            z-index: 1000;
+        }
+        
+        button {
+            margin: 5px;
+            padding: 8px 12px;
+            cursor: pointer;
+        }
+    </style>
+</head>
+<body>
+    <div class="controls">
+        <h3>Resize Test Controls</h3>
+        <button onclick="resizeTerminal(800, 600)">800x600</button>
+        <button onclick="resizeTerminal(1200, 800)">1200x800</button>
+        <button onclick="resizeTerminal(500, 400)">500x400</button>
+        <button onclick="resizeTerminal(300, 200)">300x200 (small)</button>
+        <button onclick="toggleFullscreen()">Toggle Fullscreen</button>
+        <div id="status">Ready</div>
+    </div>
+    
+    <div id="terminal-container" class="textual-terminal" 
+         data-session-websocket-url="ws://localhost:8080/test">
+    </div>
+    
+    <script type="module" src="/static/js/terminal.js"></script>
+    
+    <script>
+        // Mock WebSocket for testing
+        class MockWebSocket {
+            constructor(url) {
+                this.url = url;
+                this.readyState = WebSocket.OPEN;
+                this.onopen = () => {};
+                this.onclose = () => {};
+                this.onmessage = () => {};
+                this.onerror = () => {};
+                
+                setTimeout(() => this.onopen(), 100);
+            }
+            
+            send(data) {
+                console.log("WS SEND:", data);
+                const message = JSON.parse(data);
+                if (message[0] === "resize") {
+                    document.getElementById('status').textContent = 
+                        `Resize sent: ${message[1].width}x${message[1].height}`;
+                }
+            }
+            
+            close() {}
+        }
+        
+        // Override WebSocket for testing
+        window.WebSocket = MockWebSocket;
+        
+        function resizeTerminal(width, height) {
+            const container = document.getElementById('terminal-container');
+            container.style.width = width + 'px';
+            container.style.height = height + 'px';
+            document.getElementById('status').textContent = 
+                `Container resized to: ${width}x${height}`;
+        }
+        
+        function toggleFullscreen() {
+            const container = document.getElementById('terminal-container');
+            if (!document.fullscreenElement) {
+                container.requestFullscreen().catch(err => {
+                    console.error('Fullscreen error:', err);
+                });
+            } else {
+                document.exitFullscreen();
+            }
+        }
+        
+        // Initialize terminal
+        document.addEventListener('DOMContentLoaded', () => {
+            console.log('DOM loaded, initializing terminal...');
+        });
+    </script>
+</body>
+</html>