fix: eliminate use of custom <tab> tag

Fixes #3777

Author: myan9

clients/alternate/plugins/plugin-test/src/test/bottom-input/new-tab.ts

@@ -52,7 +52,7 @@ describe('core new tab from pty active tab via button click', function(this: Com
 
   it('start vi, then new tab via button click', () =>
     CLI.command('vi', this.app)
-      .then(() => this.app.client.waitForExist('tab.visible.xterm-alt-buffer-mode'))
+      .then(() => this.app.client.waitForExist(`${Selectors.CURRENT_TAB}.xterm-alt-buffer-mode`))
       .then(() => this.app.client.click(tabButtonSelector))
       .then(() => this.app.client.waitForVisible(Selectors.TAB_SELECTED_N(2)))
       .then(() => CLI.waitForSession(this)) // should have an active repl

packages/core/src/webapp/tab.ts

@@ -17,17 +17,15 @@
 import REPL from '../models/repl'
 import TabState from '../models/tab-state'
 
-export interface Tab extends HTMLElement {
+export interface Tab extends HTMLDivElement {
   REPL: REPL
   state: TabState
   queueListener: EventListener // for input queueing, see queueing.ts
   _kui_session: Promise<any>
 }
 
-const tabTagPattern = /^tab$/i
-
 export function isTab(node: Element): node is Tab {
-  return tabTagPattern.test(node.tagName)
+  return node.classList.contains('kui--tab-content')
 }
 
 /**
@@ -58,7 +56,7 @@ export const getTabFromTarget = (target: EventTarget): Tab => {
   }
 
   // fallthrough
-  return document.querySelector('tab.visible')
+  return document.querySelector('.kui--tab-content.visible')
 }
 
 export const getCurrentTab = (): Tab => {

packages/test/src/api/selectors.ts

@@ -1,11 +1,11 @@
-export const CURRENT_TAB = 'tab.visible'
-export const TAB_N = (N: number) => `tab:nth-child(${N})`
+export const CURRENT_TAB = '.kui--tab-content.visible'
+export const TAB_N = (N: number) => `.kui--tab-content:nth-child(${N})`
 export const TAB_SELECTED_N = (N: number) => `${TAB_N(N)}.visible`
 
 export const SIDECAR_BASE = `${CURRENT_TAB} .kui--sidecar`
 export const SIDECAR_FULLSCREEN = `${CURRENT_TAB} .kui--sidecar.visible.maximized:not(.minimized)`
 export const PROMPT_BLOCK = `${CURRENT_TAB} .repl .repl-block`
-export const BOTTOM_PROMPT_BLOCK = `.kui--input-stripe .repl-block`
+export const BOTTOM_PROMPT_BLOCK = `${CURRENT_TAB} .kui--input-stripe .repl-block`
 export const BOTTOM_PROMPT = `${BOTTOM_PROMPT_BLOCK} input`
 export const OOPS = `${CURRENT_TAB} .repl .repl-block .oops`
 export const SIDECAR = `${SIDECAR_BASE}.visible:not(.minimized)`

packages/test/src/api/table.ts

@@ -92,7 +92,7 @@ export class TestTable {
       try {
         await ctx.app.client.waitUntil(async () => {
           const watchableJobsRaw = await ctx.app.client.execute(() => {
-            const tab = document.querySelector('tab.visible') as Tab
+            const tab = document.querySelector('.kui--tab-content.visible') as Tab
             return tab && tab.state && tab.state.jobs
           })
           const actualJobCount = watchableJobsRaw.value

plugins/plugin-bash-like/src/test/bash-like/pty-copy-paste.ts

@@ -110,7 +110,7 @@ describe(`xterm copy paste ${process.env.MOCHA_RUN_TARGET || ''}`, function(this
 
       // wait for vi to come up in alt buffer mode
       console.error('CP8')
-      await this.app.client.waitForExist(`tab.visible.xterm-alt-buffer-mode`)
+      await this.app.client.waitForExist(`${Selectors.CURRENT_TAB}.xterm-alt-buffer-mode`)
 
       // enter insert mode, and wait for INSERT to appear at the bottom
       console.error('CP9')

plugins/plugin-bash-like/src/test/bash-like/vi.ts

@@ -40,7 +40,7 @@ describe(`xterm vi 1 ${process.env.MOCHA_RUN_TARGET || ''}`, function(this: Comm
       await this.app.client.waitForExist(rows(res.count))
 
       // wait for vi to come up in alt buffer mode
-      await this.app.client.waitForExist(`tab.visible.xterm-alt-buffer-mode`)
+      await this.app.client.waitForExist(`${Selectors.CURRENT_TAB}.xterm-alt-buffer-mode`)
 
       // enter insert mode, and wait for INSERT to appear at the bottom
       let iter = 0
@@ -102,7 +102,7 @@ describe(`xterm vi 2 ${process.env.MOCHA_RUN_TARGET || ''}`, function(this: Comm
       await this.app.client.waitForExist(rows(res.count))
 
       // wait for vi to come up in alt buffer mode
-      await this.app.client.waitForExist(`tab.visible.xterm-alt-buffer-mode`)
+      await this.app.client.waitForExist(`${Selectors.CURRENT_TAB}.xterm-alt-buffer-mode`)
 
       // :wq
       await this.app.client.keys(':wq')

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

@@ -31,12 +31,12 @@
   transition: width 10ms ease-in-out, height 10ms ease-in-out;
 }
 
-tab:not(.xterm-alt-buffer-mode) .xterm-container .xterm-screen {
+.kui--tab-content:not(.xterm-alt-buffer-mode) .xterm-container .xterm-screen {
   height: auto !important;
 }
 
 /* alt buffer mode */
-tab.xterm-alt-buffer-mode {
+.kui--tab-content.xterm-alt-buffer-mode {
   .xterm-container .xterm-rows.xterm-focus .xterm-cursor.xterm-cursor-block {
     background-color: var(--color-support-01) !important;
   }
@@ -87,7 +87,7 @@ tab.xterm-alt-buffer-mode {
   }
 }
 
-tab: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;
 }
 
@@ -240,7 +240,7 @@ tab:not(.xterm-alt-buffer-mode) .xterm.xterm-empty-row-heuristic .xterm-rows > d
  * only for line wrapping, so that we can reflow them
  * naturally. Please see `reflowLineWraps()` in `src/pty/client.ts`
  * for the logic that establishes the `.xterm-is-wrapped` property.
- * 
+ *
  */
 .xterm-terminated .xterm-rows > div {
   white-space: pre-wrap;

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

@@ -205,9 +205,9 @@ export default class TabContent extends React.PureComponent<Props, State> {
 
   public render() {
     return (
-      <tab
+      <div
         ref={c => this.setState({ tab: c as KuiTab })}
-        className={this.props.active ? 'visible' : ''}
+        className={'kui--tab-content' + (this.props.active ? ' visible' : '')}
         data-tab-id={this.props.uuid}
       >
         <div className="kui--rows">
@@ -236,7 +236,7 @@ export default class TabContent extends React.PureComponent<Props, State> {
           {this.bottom()}
         </div>
         {this.state.tab && <Confirm tab={this.state.tab} uuid={this.props.uuid} />}
-      </tab>
+      </div>
     )
   }
 }

plugins/plugin-client-common/src/components/Terminal/Block/OnKeyDown.ts

@@ -92,13 +92,13 @@ export default async function onKeyDown(this: Input, event: KeyboardEvent) {
     if (inBrowser()) {
       debug('pageup')
       const { height } = document.body.getBoundingClientRect()
-      document.querySelector('tab.visible .repl-inner').scrollBy(0, -height)
+      document.querySelector('.kui--tab-content.visible .repl-inner').scrollBy(0, -height)
     }
   } else if (char === KeyCodes.PAGEDOWN) {
     if (inBrowser()) {
       debug('pagedown')
       const { height } = document.body.getBoundingClientRect()
-      document.querySelector('tab.visible .repl-inner').scrollBy(0, +height)
+      document.querySelector('.kui--tab-content.visible .repl-inner').scrollBy(0, +height)
     }
   } else if (char === KeyCodes.C && event.ctrlKey) {
     // Ctrl+C, cancel

plugins/plugin-client-common/src/index.ts

@@ -28,16 +28,6 @@ import '../web/css/static/status-stripe.css'
 import '../web/css/static/top-tab-stripe.css'
 import '../web/css/static/vendor/balloon-css/balloon.min.css'
 
-// we use customized tags since the body view doesn't use a React Component lifecycle for now
-declare global {
-  /* eslint-disable @typescript-eslint/no-namespace */
-  namespace JSX {
-    interface IntrinsicElements {
-      tab: React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>
-    }
-  }
-}
-
 export { default as Search } from './components/Search'
 export { default as Loading } from './components/Loading'
 export { default as HTMLDom } from './components/Scalar/HTMLDom'