@electerm/electerm-react 5.5.35 → 5.5.66

package/client/components/terminal/mixins/term-init.js

@@ -27,6 +27,7 @@ export const initMixin = {
       allowProposedApi: true,
       scrollback: config.scrollback,
       rightClickSelectsWord: config.rightClickSelectsWord || false,
+      mouseEventsRequireAlt: config.mouseEventsRequireAlt || false,
       fontFamily: tab.fontFamily || config.fontFamily,
       theme: tc,
       allowTransparency: true,

package/client/components/terminal/mixins/term-touch.js

@@ -41,6 +41,10 @@
  *    `stopPropagation()` is enough to veto xterm's scroll for the duration of
  *    the drag. `preventDefault()` is not an option: React listens to
  *    `touchmove` passively, so it is ignored (with a console warning).
+ *
+ * A long press is not the only way in: the toolbar shows a touch-only menu
+ * icon next to the three-dot toggle (see session-control.jsx), which opens the
+ * same menu through openContextMenuAtPoint() below.
  */
 
 const DEFAULT_WORD_SEPARATOR = './\\()"\'-:,.;<>~!@#$%^&*|+=[]{}`~ ?'
@@ -505,6 +509,20 @@ export const touchMixin = {
     target.dispatchEvent(event)
   },
 
+  /**
+   * Opens the menu from the toolbar icon, which lives outside the antd
+   * dropdown's trigger element — so the event is dispatched on the terminal's
+   * own node and bubbles up to it. The icon's corner is passed in as the point
+   * to drop the menu from, rather than the finger that tapped it.
+   */
+  openContextMenuAtPoint (clientX, clientY) {
+    this.openContextMenuAt(
+      clientX,
+      clientY,
+      this.domRef?.current || this.term?.element
+    )
+  },
+
   cancelLongPress () {
     clearTimeout(this.longPressTimer)
     this.longPressTimer = null

package/client/components/terminal/shell.js

@@ -79,13 +79,21 @@ function getShInlineIntegration () {
   return [
     'if [ -z "$ELECTERM_SHELL_INTEGRATION" ]',
     'then export ELECTERM_SHELL_INTEGRATION=1',
-    '__e_esc() { printf \'%s\' "$1" | sed \'s/\\\\/\\\\\\\\/g; s/;/\\\\x3b/g\'; }',
     // sh/dash/ash re-evaluate $(...) inside PS1 every time the prompt is
     // shown, but only if the $() stays literal — so PS1 must be assigned
     // single-quoted. printf interprets \033/\a, unlike PS1 backslash
     // escapes which dash does not expand.
-    '__e_ps1() { printf \'\\033]633;P;Cwd=%s\\a\\033]633;A\\a\' "$(__e_esc "$PWD")"; }',
-    'PS1=\'$(__e_ps1)\'"${PS1:-# }"',
+    //
+    // The prompt is deliberately self-contained: it must never call a shell
+    // function. On OpenWrt /etc/profile does `export PS1=...`, so PS1 is an
+    // environment variable and every child shell inherits it — while shell
+    // functions are not inherited. A `PS1='$(__e_ps1)'...` prompt therefore
+    // dies with "ash: __e_ps1: not found" on every prompt of any nested shell
+    // (ash, su, login, ...), and the exported ELECTERM_SHELL_INTEGRATION
+    // guard stops the child from ever defining the missing function.
+    // Inlining keeps it working there too, and printf is an ash builtin so
+    // this is cheaper than the old function + sed pair.
+    'PS1=\'$(printf "\\033]633;P;Cwd=%s\\a\\033]633;A\\a" "$PWD")\'"${PS1:-# }"',
     'fi'
   ].join('; ')
 }

package/client/components/terminal/shortcut-bar-press.js

@@ -0,0 +1,192 @@
+/**
+ * press-and-hold auto-repeat for the touch shortcut bar.
+ *
+ * Why: the bar's buttons sent their key from `click` alone, so a touch user
+ * had to tap over and over for anything that repeats — holding Bksp to erase
+ * a word, holding ↓ to walk back through the scrollback. A physical key
+ * repeats while it is held, so the bar does the same: press, wait out the
+ * initial delay, then send the key at a steady interval until the finger (or
+ * mouse button) lifts.
+ *
+ * Deliberately free of React and of the DOM — shortcut-bar.jsx owns the
+ * wiring, this owns the timing, so the timing can be unit-tested on its own
+ * (src/test/unit-ci/shortcut-bar-press.spec.js).
+ *
+ * Two movement tolerances, because the two phases want opposite things:
+ *   - before the repeat begins, ANY movement means the finger is scrolling
+ *     the bar rather than pressing a key, so a tight tolerance cancels —
+ *     a press that slides off must never send a repeat;
+ *   - once the key is repeating, a held finger always drifts a little, so it
+ *     has to travel much further before it counts as a scroll. With one
+ *     tolerance, holding Bksp for two seconds would either stop halfway (too
+ *     tight) or keep erasing while the bar slides sideways (too loose).
+ *
+ * Only one press is ever in flight. A second pointerdown takes over (a second
+ * finger on another key is a deliberate change of target, and two repeating
+ * keys at once helps nobody), and any event from a different pointerId is
+ * ignored, so a stray move from a finger already lifted cannot stop or
+ * corrupt the live repeat.
+ *
+ * `up()` / `cancel()` report whether the gesture had become a long press, and
+ * both report the same value — a release can be caught by the component's own
+ * handler or by the window-level safety net (the pointer may be released
+ * anywhere, even outside the window), so the answer must not depend on which
+ * one runs first. The caller uses it to swallow the `click` the browser
+ * synthesizes after a long press, which would otherwise send one extra key.
+ */
+
+export const longPressDelay = 400
+
+// ~16 sends/sec once repeating: fast enough to clear a long line or scroll
+// back through history, slow enough that the remote end can keep up.
+export const repeatInterval = 60
+
+// pre-repeat: a press that moves this much is a scroll, not a tap
+export const moveTolerance = 10
+
+// while repeating: how far a held finger may drift before it is a scroll
+export const repeatMoveTolerance = 32
+
+export function createKeyRepeat (opts = {}) {
+  const {
+    send = () => {},
+    onRepeatChange = () => {},
+    delay = longPressDelay,
+    interval = repeatInterval,
+    tolerance = moveTolerance,
+    repeatTolerance = repeatMoveTolerance
+  } = opts
+
+  let holdTimer = null
+  let tickTimer = null
+  let payload = null
+  let startX = 0
+  let startY = 0
+  let pointerId = null
+  let inFlight = false
+  let repeating = false
+  // sticky for the whole gesture: set when the long press begins, cleared only
+  // by the next press, so it survives any release path
+  let longFired = false
+
+  function stopTimers () {
+    if (holdTimer) {
+      clearTimeout(holdTimer)
+      holdTimer = null
+    }
+    if (tickTimer) {
+      clearInterval(tickTimer)
+      tickTimer = null
+    }
+  }
+
+  function setRepeating (on) {
+    if (repeating === on) {
+      return
+    }
+    repeating = on
+    onRepeatChange(on ? payload : null)
+  }
+
+  // leave the gesture, keeping `longFired` for the caller's click decision
+  function release () {
+    stopTimers()
+    if (inFlight) {
+      setRepeating(false)
+    }
+    inFlight = false
+    payload = null
+    pointerId = null
+    return longFired
+  }
+
+  function beginRepeat () {
+    holdTimer = null
+    longFired = true
+    setRepeating(true)
+    // send the first repeat immediately: holding a key should not wait out
+    // the delay twice
+    send(payload)
+    tickTimer = setInterval(() => send(payload), interval)
+  }
+
+  // an event only counts while it belongs to the press in flight. Events
+  // synthesized in tests (or by a browser that omits pointerId) always match.
+  function owns (ev) {
+    return inFlight &&
+      (pointerId === null || !ev || ev.pointerId == null || ev.pointerId === pointerId)
+  }
+
+  return {
+    get repeating () {
+      return repeating
+    },
+
+    get longFired () {
+      return longFired
+    },
+
+    /**
+     * A press starts. `p` is whatever should be handed back to `send` — the
+     * bar passes the whole button so it can also read the id for its visual
+     * state. A second press cancels the first.
+     */
+    down (p, ev) {
+      release()
+      payload = p
+      pointerId = ev && ev.pointerId != null ? ev.pointerId : null
+      startX = ev ? ev.clientX || 0 : 0
+      startY = ev ? ev.clientY || 0 : 0
+      longFired = false
+      inFlight = true
+      holdTimer = setTimeout(beginRepeat, delay)
+    },
+
+    move (ev) {
+      if (!owns(ev)) {
+        return
+      }
+      const x = ev ? ev.clientX || 0 : 0
+      const y = ev ? ev.clientY || 0 : 0
+      const dx = x - startX
+      const dy = y - startY
+      const moved = Math.sqrt(dx * dx + dy * dy)
+      if (repeating) {
+        if (moved > repeatTolerance) {
+          release()
+        }
+      } else if (moved > tolerance) {
+        // the press turned into a scroll of the bar: drop it before it can
+        // fire, and let the scroll happen
+        release()
+      }
+    },
+
+    /** the pointer lifted. Returns true if this gesture was a long press. */
+    up (ev) {
+      if (!owns(ev)) {
+        return false
+      }
+      return release()
+    },
+
+    /**
+     * The gesture was aborted (pointercancel, a second finger, the bar being
+     * hidden, unmount). Never sends anything, so a scroll that turns into a
+     * cancel cannot leak a key.
+     */
+    cancel (ev) {
+      if (ev && !owns(ev)) {
+        return false
+      }
+      const wasLong = inFlight ? longFired : false
+      release()
+      return wasLong
+    },
+
+    dispose () {
+      release()
+      longFired = false
+    }
+  }
+}

package/client/components/terminal/shortcut-bar.jsx

@@ -10,6 +10,10 @@
  *   - first (fixed) button collapses the bar
  *   - second (fixed) button opens the edit modal (shortcut-bar-edit.jsx)
  *   - tapping a shortcut sends it to the active terminal via runQuickCommand
+ *   - pressing AND holding one repeats it, like a physical key: a tap has to
+ *     send exactly one key, but holding Bksp to erase a word or ↓ to walk
+ *     back through the scrollback is impossible without auto-repeat. The
+ *     timing lives in shortcut-bar-press.js
  *   - while the system input panel overlays the page without resizing the
  *     layout viewport (iOS / HarmonyOS do this, Android resizes instead), the
  *     bar lifts itself above the panel — see the visualViewport effect below
@@ -27,6 +31,7 @@ import { shortcutBarHeight } from '../../common/constants'
 import ShortcutBarEdit from './shortcut-bar-edit'
 import { KEYBOARD_MIN } from './shortcut-bar-entry'
 import { candidates, loadActive, saveActive, ESC } from './shortcut-bar-defs'
+import { createKeyRepeat } from './shortcut-bar-press'
 import './shortcut-bar.styl'
 
 const e = window.translate
@@ -47,15 +52,57 @@ const appCursorMap = {
   [ESC + '[F']: ESC + 'OF' // End
 }
 
-function sendToTerminal (data) {
+function activeTerm () {
   const { store } = window
-  const term = refs.get('term-' + store.activeTabId)
+  return refs.get('term-' + store.activeTabId)
+}
+
+function sendToTerminal (data) {
+  const term = activeTerm()
   if (term && typeof term.runQuickCommand === 'function') {
     const resolved = resolveCursorMode(data, term)
     term.runQuickCommand(resolved, true)
   }
 }
 
+// Put focus back on the terminal's helper textarea, which is the element that
+// owns the soft keyboard.
+//
+// A press on a bar button focuses that button instead, and the OS then
+// dismisses the input panel — which also drops the bar, since it rides above
+// the panel, so the hold visibly breaks.
+//
+// Preventing the default on mousedown covers the mouse path, but Chromium only
+// synthesizes those compatibility mouse events after touchend, so on touch the
+// theft happens after any reclaim made during pointerdown. Hence this is also
+// driven from the focusin listener in the effect below, which is timing
+// independent. Called from pointerdown it still helps: it puts focus back
+// before the platform has any chance to act on the button.
+//
+// The call is synchronous inside the user gesture, which is what a
+// keyboard-showing focus() requires, and it is idempotent.
+let reclaiming = false
+
+function reclaimTerminalFocus () {
+  // focus() re-raises focusin, so guard against recursing: a press that
+  // repeatedly reclaims would otherwise spin.
+  if (reclaiming) {
+    return
+  }
+  const term = activeTerm()
+  if (!term || !term.term || typeof term.term.focus !== 'function') {
+    return
+  }
+  reclaiming = true
+  try {
+    term.term.focus()
+  } finally {
+    // released synchronously, once the focus() call has returned — the
+    // focusin it triggers has already been dispatched by then
+    reclaiming = false
+  }
+}
+
 // honor the active terminal's DECCKM state for the cursor / Home / End keys.
 // custom combos can be multi-key sequences (Ctrl+A then ↑), so match the
 // trailing key too — not only the whole payload.
@@ -177,13 +224,142 @@ function ShortcutBar (props) {
     saveActive(next)
   }
 
+  // ---- press-and-hold auto-repeat ----
+  // A tap is a plain click, so it stays one key. On top of that, a press that
+  // is held repeats its key (see shortcut-bar-press.js) — the only way to hold
+  // Bksp or an arrow key without a physical keyboard.
+  const repeatRef = useRef(null)
+  // id of the button currently repeating, so only it shows the pressed state
+  const [repeatingId, setRepeatingId] = useState(null)
+  // a long press has already sent its key(s); the click the browser fires on
+  // release must not add one more. Set by the repeat, cleared once consumed.
+  const swallowClickRef = useRef(false)
+
+  if (!repeatRef.current) {
+    repeatRef.current = createKeyRepeat({
+      send: b => {
+        if (b) {
+          sendToTerminal(b.data)
+        }
+      },
+      onRepeatChange: b => setRepeatingId(b ? b.id : null)
+    })
+  }
+
+  // The gesture can end anywhere — the finger can slide off the bar, lift
+  // outside the window, or the system can steal it (a callout, an incoming
+  // call). A window-level release is the only net that catches all of those;
+  // the per-button handler below is what keeps the common case responsive.
+  useEffect(() => {
+    function onGlobalRelease (ev) {
+      if (repeatRef.current.up(ev)) {
+        swallowClickRef.current = true
+      }
+    }
+    function onGlobalCancel (ev) {
+      // a cancelled gesture is not a long press: nothing was sent that the
+      // user needs to "not double", so no click has to be swallowed
+      repeatRef.current.cancel(ev)
+    }
+    // Catch-all for focus theft, and the reliable half of the fix.
+    //
+    // Reclaiming focus at pointerdown is too early to be trustworthy: Chromium
+    // only synthesizes the compatibility mouse events (mousedown/mouseup/click)
+    // AFTER touchend, so on the touch path the button takes focus *after* the
+    // press has already reclaimed it. Timing the reclaim per-event cannot cover
+    // that; reacting to focus itself can, and it covers every path — mouse,
+    // touch, the compatibility mousedown, and the context-menu focus grab.
+    //
+    // focusin rather than focus: it bubbles, so one listener on the window sees
+    // the bar's buttons from outside the portal.
+    //
+    // The guard is what keeps this from looping: only focus landing inside this
+    // bar is reclaimed, and not when it is the reclaim's own doing.
+    function onFocusIn (ev) {
+      const el = ev.target
+      if (!el || !el.closest || !el.closest('.shortcut-bar')) {
+        return
+      }
+      if (reclaiming) {
+        return
+      }
+      reclaimTerminalFocus()
+    }
+    window.addEventListener('pointerup', onGlobalRelease)
+    window.addEventListener('pointercancel', onGlobalCancel)
+    window.addEventListener('focusin', onFocusIn)
+    return () => {
+      window.removeEventListener('pointerup', onGlobalRelease)
+      window.removeEventListener('pointercancel', onGlobalCancel)
+      window.removeEventListener('focusin', onFocusIn)
+      // unmount (or the bar going away) must not leave a timer running
+      repeatRef.current.dispose()
+    }
+  }, [])
+
+  // the bar hiding mid-hold is a cancel, not a release: the keys already sent
+  // stand, and no stale click may be swallowed by the next one
+  useEffect(() => {
+    if (!store.shortcutBarVisible) {
+      repeatRef.current.cancel()
+      swallowClickRef.current = false
+    }
+  }, [store.shortcutBarVisible])
+
+  function handleClick (b) {
+    if (swallowClickRef.current) {
+      swallowClickRef.current = false
+      return
+    }
+    sendToTerminal(b.data)
+  }
+
+  function handlePointerDown (ev, b) {
+    // a right / middle click is not a key press
+    if (ev.button != null && ev.button > 0) {
+      return
+    }
+    // The flag only has to survive from the release to the click the browser
+    // synthesizes right after it. A release that lands OFF the button
+    // synthesizes no click at all, so without this the flag would still be
+    // armed on the next press and eat a legitimate key. Any new press starts
+    // strictly after the previous click, so clearing here is safe.
+    swallowClickRef.current = false
+    // Only a mouse: capturing a touch pointer makes the browser scroll the
+    // button row no more, and dragging the row by a button is exactly how the
+    // bar is scrolled. Touch instead relies on pointercancel (fired when the
+    // browser takes over for a scroll) plus the move tolerance below.
+    if (ev.pointerType === 'mouse') {
+      try {
+        ev.currentTarget.setPointerCapture(ev.pointerId)
+      } catch (e) {
+        // capture is an optimisation for cancel-on-slide-off; without it the
+        // hold still stops on pointerup, just via the window-level net
+      }
+    }
+    // before anything can steal it — see reclaimTerminalFocus()
+    reclaimTerminalFocus()
+    repeatRef.current.down(b, ev)
+  }
+
+  function handlePointerUp (ev) {
+    if (repeatRef.current.up(ev)) {
+      swallowClickRef.current = true
+    }
+  }
+
   function renderButton (b, i) {
     return (
       <button
         type='button'
         key={b.id + '-' + i}
-        className='shortcut-bar-btn'
-        onClick={() => sendToTerminal(b.data)}
+        className={
+          'shortcut-bar-btn' + (repeatingId === b.id ? ' repeating' : '')
+        }
+        onPointerDown={ev => handlePointerDown(ev, b)}
+        onPointerMove={ev => repeatRef.current.move(ev)}
+        onPointerUp={handlePointerUp}
+        onClick={() => handleClick(b)}
       >
         {b.label}
       </button>
@@ -199,6 +375,25 @@ function ShortcutBar (props) {
       className='shortcut-bar'
       role='toolbar'
       style={kbOffset ? { bottom: kbOffset + 'px' } : undefined}
+      // Keep the press from moving DOM focus in the first place.
+      //
+      // A button is focusable, and on a real press the browser focuses it
+      // (measured: focus lands on .shortcut-bar-btn, not on the terminal's
+      // helper textarea). That helper textarea is what owns the soft keyboard,
+      // so on Android Chrome focus moving to a non-editable element makes the
+      // OS dismiss the input panel — and the bar, which rides above the
+      // panel, drops with it, so the hold visibly breaks.
+      //
+      // This is the preventive half (it still delivers the click, also
+      // measured) and it covers the mouse path plus the compatibility mousedown
+      // on the container, so the two icon buttons get it too. It cannot cover
+      // the touch path on its own — those compatibility events are synthesized
+      // after touchend — which is why the focusin listener above exists as the
+      // reliable half.
+      //
+      // pointerdown is deliberately NOT prevented: that would stop the browser
+      // scrolling the button row.
+      onMouseDown={e => e.preventDefault()}
     >
       <div className='shortcut-bar-fixed'>
         <button

package/client/components/terminal/shortcut-bar.styl

@@ -17,6 +17,41 @@
   user-select none
   -webkit-user-select none
 
+// A held button now means "keep sending this key", so the platform must not
+// treat the hold as its own gesture:
+//   - the iOS callout (Copy/Look Up) and Android's text-selection handles
+//     would swallow it — same reason .term-wrap suppresses them;
+//   - touch-action keeps the hold from turning into a scroll of the page; the
+//     bar's own horizontal scroll lives on .shortcut-bar-scroll, which is a
+//     separate element, so this only affects the button itself.
+.shortcut-bar-btn
+  -webkit-touch-callout none
+  touch-action manipulation
+  flex-shrink 0
+  height 32px
+  min-width 32px
+  padding 0 10px
+  display inline-flex
+  align-items center
+  justify-content center
+  border-radius 6px
+  border 1px solid var(--main-lighter)
+  background var(--main-light)
+  color var(--text)
+  font-size 13px
+  cursor pointer
+  white-space nowrap
+  &:active
+    background var(--primary)
+    color var(--primary-contrast)
+  &:hover
+    color var(--text-light)
+  // held down and repeating: keep the :active look for as long as the key is
+  // being re-sent, so the user can see the auto-repeat is running
+  &.repeating
+    background var(--primary)
+    color var(--primary-contrast)
+
 .shortcut-bar-fixed
   display flex
   align-items stretch
@@ -33,6 +68,8 @@
   color var(--text)
   cursor pointer
   font-size 16px
+  -webkit-touch-callout none
+  touch-action manipulation
   &:active
     background var(--main-lighter)
   &:hover
@@ -48,30 +85,12 @@
   overflow-y hidden
   scrollbar-width none
   -webkit-overflow-scrolling touch
+  // a press that turns into a drag is a scroll of the button row, which is
+  // exactly what this container does — the hold itself is handled in JS
+  touch-action pan-x
   &::-webkit-scrollbar
     display none
 
-.shortcut-bar-btn
-  flex-shrink 0
-  height 32px
-  min-width 32px
-  padding 0 10px
-  display inline-flex
-  align-items center
-  justify-content center
-  border-radius 6px
-  border 1px solid var(--main-lighter)
-  background var(--main-light)
-  color var(--text)
-  font-size 13px
-  cursor pointer
-  white-space nowrap
-  &:active
-    background var(--primary)
-    color var(--primary-contrast)
-  &:hover
-    color var(--text-light)
-
 // while the bar is visible, lift the footer + reserve space so nothing is
 // covered (terminal area is shrunk by layout.jsx via store.shortcutBarVisible;
 // --shortcut-bar-kb-offset raises both bar + footer above a page-overlaying

package/client/components/terminal/terminal.jsx

@@ -103,6 +103,10 @@ class Term extends Component {
       name: 'rightClickSelectsWord',
       type: 'glob'
     },
+    {
+      name: 'mouseEventsRequireAlt',
+      type: 'glob'
+    },
     {
       name: 'fontSize',
       type: 'glob_local'

package/client/components/widgets/widget-control.jsx

@@ -46,9 +46,11 @@ export default function WidgetControl ({ formData, widgetInstancesLength }) {
         title: `${widget.info.name} (${result.instanceId})`,
         widgetId: result.widgetId,
         serverInfo: result.serverInfo,
-        config
+        config,
+        startedAt: Date.now()
       }
-      window.store.widgetInstances.push(instance)
+      // assigned, not pushed: see deleteWidgetInstance in store/widgets.js
+      window.store.widgetInstances = [...window.store.widgetInstances, instance]
       if (config.autoRun) {
         window.store.toggleAutoRunWidget(instance)
       }