GitHub Copilot
8ee6f2d605
Add isTerminalReady() check before calling fitAddon.proposeDimensions() in the initial fit loop to prevent 'viewport.scrollBarWidth' TypeError when terminal is not fully initialized.
110 lines
3.4 KiB
HTML
110 lines
3.4 KiB
HTML
<!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> |