fix scrollbars, lighten scrollbars when not focused

src/main.tsx

@@ -370,7 +370,7 @@ class LineCmd extends React.Component<{sw : ScreenWindow, line : LineType, width
                     <If condition={!isFocused}>
                         <div className="term-block" onClick={this.clickTermBlock}></div>
                     </If>
-                    <div className="terminal" id={"term-" + getLineId(line)} data-cmdid={line.cmdid} style={{height: termHeight}}></div>
+                    <div className="terminal-connectelem" id={"term-" + getLineId(line)} data-cmdid={line.cmdid} style={{height: termHeight}}></div>
                     <If condition={!termLoaded}><div style={{position: "absolute", top: 60, left: 30}}>(loading)</div></If>
                 </div>
             </div>
@@ -882,7 +882,7 @@ class InfoRemoteShow extends React.Component<{}, {}> {
             return (
                 <>
                     <div key="term" className="terminal-wrapper" style={{display: "none"}}>
-                        <div key="terminal" className="terminal" id="term-remote"></div>
+                        <div key="terminal" className="terminal-connectelem" id="term-remote"></div>
                     </div>
                 </>
             );
@@ -939,7 +939,7 @@ class InfoRemoteShow extends React.Component<{}, {}> {
                     <If condition={inputModel.showNoInputMsg.get()}>
                         <div key="termtag" className="term-tag">input is only allowed while status is 'connecting'</div>
                     </If>
-                    <div key="terminal" className="terminal" id="term-remote" data-remoteid={ptyRemoteId} style={{height: termHeightFromRows(RemotePtyRows)}}></div>
+                    <div key="terminal" className="terminal-connectelem" id="term-remote" data-remoteid={ptyRemoteId} style={{height: termHeightFromRows(RemotePtyRows)}}></div>
                 </div>
             </>
         );

src/sh2.less

@@ -417,14 +417,18 @@ html, body, #main {
         margin-right: 8px;
         margin-top: 4px;
         align-self: flex-start;
-        overflow-y: hidden;
 
         &.focus {
             /* box-shadow: 0 0 3px 3px rgba(255, 255, 255, 0.3); */
         }
 
-        .terminal {
+        .terminal-connectelem {
             overflow-y: hidden;
+            overflow-x: hidden;
+        }
+
+        .terminal {
+            margin-right: 8px; /* needed to show scrollbar */
         }
     }
 }
@@ -629,7 +633,7 @@ body .xterm .xterm-viewport {
     }
 }
 
-.cmd-input-info, .xterm-viewport, .cmd-history {
+.cmd-input-info, .cmd-history {
     &::-webkit-scrollbar {
         background-color: #777;
         width: 5px;
@@ -641,6 +645,30 @@ body .xterm .xterm-viewport {
     }
 }
 
+.terminal-wrapper.focus .xterm-viewport {
+    &::-webkit-scrollbar {
+        background-color: #777;
+        width: 5px;
+        height: 5px;
+    }
+
+    &::-webkit-scrollbar-thumb {
+        background: white;
+    }
+}
+
+.terminal-wrapper .xterm-viewport {
+    &::-webkit-scrollbar {
+        background-color: #222;
+        width: 5px;
+        height: 5px;
+    }
+
+    &::-webkit-scrollbar-thumb {
+        background: #555;
+    }
+}
+
 .line.line-invalid {
     color: #000;
     margin-left: 5px;

src/term.ts

@@ -62,7 +62,10 @@ class TermWrap {
             let cols = widthToCols(winSize.width);
             this.termSize = {rows: termOpts.rows, cols: cols};
         }
-        this.terminal = new Terminal({rows: this.termSize.rows, cols: this.termSize.cols, fontSize: 12, fontFamily: "JetBrains Mono", theme: {foreground: "#d3d7cf"}});
+        let theme = {
+            foreground: "#d3d7cf",
+        };
+        this.terminal = new Terminal({rows: this.termSize.rows, cols: this.termSize.cols, fontSize: 12, fontFamily: "JetBrains Mono", theme: theme});
         this.terminal._core._inputHandler._parser.setErrorHandler((state) => {
             this.numParseErrors++;
             return state;
@@ -84,9 +87,22 @@ class TermWrap {
                 this.focusHandler(false);
             }
         });
+        elem.addEventListener("scroll", this.elemScrollHandler);
         this.reloadTerminal(0);
     }
 
+    @boundMethod
+    elemScrollHandler(e : any) {
+        // this stops a weird behavior in the terminal
+        // xterm.js renders a textarea that handles focus.  when it focuses and a space is typed the browser
+        //   will scroll to make it visible (even though our terminal element has overflow hidden)
+        // this will undo that scroll.
+        if (e.target.scrollTop == 0) {
+            return;
+        }
+        e.target.scrollTop = 0;
+    }
+
     getFontHeight() : number {
         return this.terminal._core.viewport._currentRowHeight;
     }

static/xterm.css

@@ -36,6 +36,7 @@
  */
 
 .xterm {
+    cursor: text;
     position: relative;
     user-select: none;
     -ms-user-select: none;
@@ -124,10 +125,6 @@
     line-height: normal;
 }
 
-.xterm {
-    cursor: text;
-}
-
 .xterm.enable-mouse-events {
     /* When mouse events are enabled (eg. tmux), revert to the standard pointer cursor */
     cursor: default;
@@ -166,9 +163,11 @@
     opacity: 0.5;
 }
 
-.xterm-underline {
-    text-decoration: underline;
-}
+.xterm-underline-1 { text-decoration: underline; }
+.xterm-underline-2 { text-decoration: double underline; }
+.xterm-underline-3 { text-decoration: wavy underline; }
+.xterm-underline-4 { text-decoration: dotted underline; }
+.xterm-underline-5 { text-decoration: dashed underline; }
 
 .xterm-strikethrough {
     text-decoration: line-through;
@@ -178,3 +177,16 @@
 	z-index: 6;
 	position: absolute;
 }
+
+.xterm-decoration-overview-ruler {
+    z-index: 7;
+    position: absolute;
+    top: 0;
+    right: 0;
+    pointer-events: none;
+}
+
+.xterm-decoration-top {
+    z-index: 2;
+    position: relative;
+}