upgrade xterm.js to v6.0.0 (#3095)

removes lots of special case patches for IME and scrolling that were put
in to patch over 5.5.0 issues

Author: sawka

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

@@ -517,8 +517,8 @@ export class TermViewModel implements ViewModel {
         });
     }
 
-    getTermRenderer(): "webgl" | "canvas" {
-        return this.termRef.current?.getTermRenderer() ?? "canvas";
+    getTermRenderer(): "webgl" | "dom" {
+        return this.termRef.current?.getTermRenderer() ?? "dom";
     }
 
     isWebGlEnabled(): boolean {
@@ -529,7 +529,7 @@ export class TermViewModel implements ViewModel {
         if (!this.termRef.current) {
             return;
         }
-        const renderer = this.termRef.current.getTermRenderer() === "webgl" ? "canvas" : "webgl";
+        const renderer = this.termRef.current.getTermRenderer() === "webgl" ? "dom" : "webgl";
         this.termRef.current.setTermRenderer(renderer);
     }
 
@@ -698,14 +698,6 @@ export class TermViewModel implements ViewModel {
             return true;
         }
 
-        // Handle Escape key during IME composition
-        if (keyutil.checkKeyPressed(waveEvent, "Escape")) {
-            if (this.termRef.current?.isComposing) {
-                // Reset composition state when Escape is pressed during composition
-                this.termRef.current.resetCompositionState();
-            }
-        }
-
         if (this.keyDownHandler(waveEvent)) {
             event.preventDefault();
             event.stopPropagation();

frontend/app/view/term/term.scss

@@ -128,35 +128,12 @@
     .terminal {
         width: 100%;
 
-        .xterm-viewport {
-            &::-webkit-scrollbar {
-                width: 6px; /* this needs to match fitAddon.scrollbarWidth in termwrap.ts */
-                height: 6px;
-            }
-
-            &::-webkit-scrollbar-track {
-                background-color: var(--scrollbar-background-color);
-            }
-
-            &::-webkit-scrollbar-thumb {
-                background-color: transparent;
-                border-radius: 4px;
-                margin: 0 1px 0 1px;
-
-                &:hover {
-                    background-color: var(--scrollbar-thumb-hover-color) !important;
-                }
-
-                &:active {
-                    background-color: var(--scrollbar-thumb-active-color) !important;
-                }
-            }
+        .xterm-decoration-overview-ruler {
+            display: none !important;
         }
 
-        &:hover {
-            .xterm-viewport::-webkit-scrollbar-thumb {
-                background-color: var(--scrollbar-thumb-color);
-            }
+        .xterm-viewport {
+            background-color: transparent;
         }
     }
 }

frontend/app/view/term/term.tsx

@@ -300,6 +300,7 @@ const TerminalView = ({ blockId, model }: ViewComponentProps<TermViewModel>) =>
                 macOptionIsMeta: termMacOptionIsMeta,
                 cursorStyle: termCursorStyle,
                 cursorBlink: termCursorBlink,
+                overviewRuler: { width: 6 },
             },
             {
                 keydownHandler: model.handleTerminalKeydown.bind(model),
@@ -312,9 +313,6 @@ const TerminalView = ({ blockId, model }: ViewComponentProps<TermViewModel>) =>
         model.termRef.current = termWrap;
         setTermWrapInst(termWrap);
         const rszObs = new ResizeObserver(() => {
-            if (termWrap.cachedAtBottomForResize == null) {
-                termWrap.cachedAtBottomForResize = termWrap.wasRecentlyAtBottom();
-            }
             termWrap.handleResize_debounced();
         });
         rszObs.observe(connectElemRef.current);