fix: pty/client performance tweaks

this also fixes a long-standing minor issue where non-focused xterms had an unthemed cursor color; you will see this usually as a brief low-contrast cursor block when launching certain apps

Fixes #4397

Author: starpit

plugins/plugin-bash-like/src/pty/client.ts

@@ -51,7 +51,6 @@ const exitAltBufferPattern = /\x1b\[\??(47|1047|1049)l/
 
 import copy from './copy'
 
-import 'xterm/css/xterm.css'
 import '../../web/css/static/xterm.css'
 
 interface Size {
@@ -898,8 +897,8 @@ export const doExec = (
           }
 
           // heuristic for hiding empty rows
-          terminal.element.classList.add('xterm-empty-row-heuristic')
-          setTimeout(() => terminal.element.classList.remove('xterm-empty-row-heuristic'), 100)
+          // terminal.element.classList.add('xterm-empty-row-heuristic')
+          // setTimeout(() => terminal.element.classList.remove('xterm-empty-row-heuristic'), 100)
 
           //
           // on exit, remove event handlers and the like

plugins/plugin-bash-like/web/css/static/xterm.css

@@ -1,3 +1,5 @@
+@import "~xterm/css/xterm.css";
+
 /* Explanation for width hacks:
    see https://github.com/xtermjs/xterm.js/pull/2067
    see https://github.com/IBM/kui/issues/1518
@@ -62,6 +64,7 @@ disabled see https://github.com/IBM/kui/issues/3939
       }
       &.processing {
         padding: 0;
+        margin: 0;
         -webkit-app-region: no-drag; /* but make sure the content of the blocks are not draggable */
 
         .bx--accordion__heading {
@@ -88,9 +91,9 @@ disabled see https://github.com/IBM/kui/issues/3939
   }
 }
 
-.kui--tab-content:not(.xterm-alt-buffer-mode) .xterm.xterm-empty-row-heuristic .xterm-rows > div:empty {
+/* .kui--tab-content:not(.xterm-alt-buffer-mode) .xterm.xterm-empty-row-heuristic .xterm-rows > div:empty {
   display: none;
-}
+} */
 
 .xterm .xterm-rows .xterm-hidden-row {
   display: none;
@@ -119,6 +122,7 @@ disabled see https://github.com/IBM/kui/issues/3939
   transition-delay: 150ms; /* only show the spinner block if the command takes a bit longer */
 }
 .xterm-container .xterm-rows:not(.xterm-focus) .xterm-cursor.xterm-cursor-block {
+  background-color: var(--color-base03) !important;
   outline-color: transparent !important;
 }
 

plugins/plugin-client-common/src/components/Client/TabContent.tsx

@@ -35,7 +35,6 @@ interface WithTabUUID {
 interface WithTab {
   tab: KuiTab
   tabClassList: Record<string, boolean>
-  activateHandlers: ((isActive: boolean) => void)[]
 }
 
 export type TabContentOptions = TerminalOptions & {
@@ -75,6 +74,9 @@ type State = Partial<WithTab> & {
 export default class TabContent extends React.PureComponent<Props, State> {
   private readonly cleaners: Cleaner[] = []
 
+  /** switching back or away from this tab */
+  private activateHandlers: ((isActive: boolean) => void)[] = []
+
   /** grab a ref (below) so that we can maintain focus */
   private _terminal: ScrollableTerminal
 
@@ -236,9 +238,7 @@ export default class TabContent extends React.PureComponent<Props, State> {
   }
 
   public render() {
-    if (this.state.tab && this.state.activateHandlers) {
-      this.state.activateHandlers.forEach(handler => handler(this.props.active))
-    }
+    this.activateHandlers.forEach(handler => handler(this.props.active))
 
     return (
       <div
@@ -248,33 +248,33 @@ export default class TabContent extends React.PureComponent<Props, State> {
 
           if (tab) {
             tab.onActivate = (handler: (isActive: boolean) => void) => {
-              this.setState(curState => ({
-                activateHandlers: !curState.activateHandlers ? [handler] : curState.activateHandlers.concat([handler])
-              }))
+              this.activateHandlers.push(handler)
             }
             tab.offActivate = (handler: (isActive: boolean) => void) => {
+              const idx = this.activateHandlers.findIndex(_ => _ === handler)
+              if (idx >= 0) {
+                this.activateHandlers.splice(idx, 1)
+              }
+            }
+
+            tab.addClass = (cls: string) => {
               this.setState(curState => {
-                const idx = !curState.activateHandlers ? -1 : curState.activateHandlers.findIndex(_ => _ === handler)
-                if (idx >= 0) {
+                if (!curState.tabClassList || !curState.tabClassList[cls]) {
                   return {
-                    activateHandlers: curState.activateHandlers
-                      .slice(0, idx)
-                      .concat(curState.activateHandlers.slice(idx + 1))
+                    tabClassList: Object.assign({}, curState.tabClassList, { [cls]: true })
                   }
                 }
               })
             }
 
-            tab.addClass = (cls: string) => {
-              this.setState(curState => ({ tabClassList: Object.assign({}, curState.tabClassList, { [cls]: true }) }))
-            }
-
             tab.removeClass = (cls: string) => {
               this.setState(curState => {
-                const update = Object.assign({}, curState.tabClassList)
-                delete update[cls]
-                return {
-                  tabClassList: update
+                if (curState.tabClassList && curState.tabClassList[cls]) {
+                  const update = Object.assign({}, curState.tabClassList)
+                  delete update[cls]
+                  return {
+                    tabClassList: update
+                  }
                 }
               })
             }