tabby-rdp 0.5.0 → 0.5.2

package/dist/osd.js

@@ -1,6 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.OSD_STYLE = exports.OSD_DEFAULTS = exports.OSD_POSITIONS = exports.OSD_SIZES = exports.OSD_FONTS = void 0;
+exports.osdColor = osdColor;
+exports.configNumber = configNumber;
 exports.osdSettings = osdSettings;
 exports.renderOsd = renderOsd;
 /** Font stacks: macOS's, then Windows' (Bahnschrift) and common Linux ones, then any sans-serif. */
@@ -15,16 +17,35 @@ exports.OSD_FONTS = {
 exports.OSD_SIZES = { small: 28, medium: 44, large: 60, huge: 80 };
 exports.OSD_POSITIONS = ['top-left', 'top-center', 'top-right', 'middle', 'bottom-left', 'bottom-center', 'bottom-right'];
 exports.OSD_DEFAULTS = { show: 'auto', font: 'condensed', size: 'medium', position: 'top-right', color: '', seconds: 2.5 };
+/** Whether `key` is one of the table's own entries: 'constructor' or '__proto__' from the config are no font or size. */
+function isOwn(table, key) {
+    return typeof key === 'string' && Object.prototype.hasOwnProperty.call(table, key);
+}
+/**
+ * A color from the config, or '' for the default. Only plain colors: a name, #hex, or a color function of numbers.
+ * CSS.supports alone isn't enough: a value with var() passes it whatever follows (`var(--x, red)"><img …>`).
+ */
+function osdColor(value) {
+    const plain = typeof value === 'string' && /^(#[0-9a-f]{3,8}|[a-z]+|(rgba?|hsla?|hwb|lab|lch|oklab|oklch|color)\([\w\s.,%/+-]*\))$/i.test(value);
+    return plain && CSS.supports('color', value) ? value : '';
+}
+/**
+ * A number from the config, or NaN: only from a number or a string. Number() of an object calls its own conversions,
+ * and a config can hold an object whose `valueOf` and `toString` aren't functions, which makes it throw.
+ */
+function configNumber(value) {
+    return typeof value === 'number' || typeof value === 'string' ? Number(value) : NaN;
+}
 /** The config value, with anything missing or unknown replaced by the default. */
 function osdSettings(value) {
     const v = value && typeof value === 'object' ? value : {};
-    const seconds = Number(v.seconds);
+    const seconds = configNumber(v.seconds);
     return {
         show: ['auto', 'always', 'off'].includes(v.show) ? v.show : exports.OSD_DEFAULTS.show,
-        font: v.font in exports.OSD_FONTS ? v.font : exports.OSD_DEFAULTS.font,
-        size: v.size in exports.OSD_SIZES ? v.size : exports.OSD_DEFAULTS.size,
+        font: isOwn(exports.OSD_FONTS, v.font) ? v.font : exports.OSD_DEFAULTS.font,
+        size: isOwn(exports.OSD_SIZES, v.size) ? v.size : exports.OSD_DEFAULTS.size,
         position: exports.OSD_POSITIONS.includes(v.position) ? v.position : exports.OSD_DEFAULTS.position,
-        color: typeof v.color === 'string' && CSS.supports('color', v.color) ? v.color : '',
+        color: osdColor(v.color),
         seconds: Number.isFinite(seconds) && seconds >= 0.5 && seconds <= 30 ? seconds : exports.OSD_DEFAULTS.seconds,
     };
 }
@@ -57,23 +78,43 @@ function place(position) {
     ].join('; ');
     return { box, glow, align: h === 'left' ? 'flex-start' : h === 'right' ? 'flex-end' : 'center' };
 }
-/** Fills `el` (a .trd-osd) with `name` and an optional second line, as the settings say. */
+/**
+ * Fills `el` (a .trd-osd) with `name` and an optional second line, as the settings say. The settings are checked
+ * again, whoever passes them, and the overlay is built node by node with its styles set through the CSSOM: nothing
+ * from the config is ever parsed as markup, which in Tabby's window (Node integration) would run as code.
+ */
 function renderOsd(el, name, sub, settings) {
-    const font = exports.OSD_FONTS[settings.font];
-    const { box, glow, align } = place(settings.position);
+    const checked = osdSettings(settings);
+    const font = exports.OSD_FONTS[checked.font];
+    const { box, glow, align } = place(checked.position);
     // Smaller in a narrow pane: a name should fit in about two thirds of it.
     const width = el.offsetWidth || 800; // layout width: the settings preview is a scaled-down desktop
-    const size = Math.max(18, Math.min(exports.OSD_SIZES[settings.size], width / Math.max(4, name.length) * 1.1));
-    el.innerHTML = `<div class="trd-osd-glow" style="${glow}"></div>
-        <div class="trd-osd-box" style="${box}; align-items: ${align}; font-family: ${font.family.replace(/"/g, '&quot;')};
-            font-weight: ${font.weight}; font-stretch: ${font.stretch}; font-size: ${size}px${settings.color ? `; color: ${settings.color}` : ''}">
-            <div class="trd-osd-name"></div><div class="trd-osd-sub"></div></div>`;
-    el.querySelector('.trd-osd-name').textContent = name;
-    const subEl = el.querySelector('.trd-osd-sub');
+    const size = Math.max(18, Math.min(exports.OSD_SIZES[checked.size], width / Math.max(4, name.length) * 1.1));
+    const part = (className) => {
+        const div = document.createElement('div');
+        div.className = className;
+        return div;
+    };
+    const glowEl = part('trd-osd-glow');
+    glowEl.style.cssText = glow;
+    const boxEl = part('trd-osd-box');
+    boxEl.style.cssText = box;
+    boxEl.style.setProperty('align-items', align);
+    boxEl.style.setProperty('font-family', font.family);
+    boxEl.style.setProperty('font-weight', String(font.weight));
+    boxEl.style.setProperty('font-stretch', font.stretch);
+    boxEl.style.setProperty('font-size', `${size}px`);
+    if (checked.color) {
+        boxEl.style.setProperty('color', checked.color);
+    }
+    const nameEl = part('trd-osd-name');
+    nameEl.textContent = name;
+    const subEl = part('trd-osd-sub');
     if (sub) {
         const bar = document.createElement('span');
         bar.className = 'trd-osd-bar';
         subEl.append(bar, document.createTextNode(sub));
     }
+    boxEl.append(nameEl, subEl);
+    el.replaceChildren(glowEl, boxEl);
 }
-//# sourceMappingURL=osd.js.map

package/dist/packageChangeDialog.js

@@ -0,0 +1,186 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PackageChangeDialog = void 0;
+const STYLE = `
+.trd-package-dialog { width: min(460px, calc(100vw - 40px)); padding: 24px; border-radius: 8px; outline: none;
+    border: 1px solid rgba(128,128,128,.35); background: var(--bs-body-bg, #1b1b1b); color: var(--bs-body-color, #ddd);
+    box-shadow: 0 16px 60px rgba(0,0,0,.45); }
+.trd-package-dialog::backdrop { background: rgba(0,0,0,.55); }
+.trd-package-dialog h4 { font-size: 18px; margin: 0 0 16px; }
+.trd-package-dialog p { white-space: pre-line; overflow-wrap: anywhere; }
+.trd-package-dialog [data-detail] { font-size: 13px; opacity: .8; }
+.trd-package-dialog p:empty { display: none; }
+.trd-package-dialog progress { display: block; width: 100%; height: 8px; margin: 18px 0 8px; accent-color: #589cf0; }
+.trd-package-dialog [hidden] { display: none !important; }
+.trd-package-dialog [data-elapsed] { font-size: 12px; opacity: .7; }
+.trd-package-dialog [data-phase=error] { color: var(--bs-danger, #f08080); }
+.trd-package-dialog [data-phase=success] { color: var(--bs-success, #79c99b); }
+.trd-package-dialog .trd-package-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 22px; }
+`;
+/** One modal remains open from confirmation through the installer's verified result. */
+class PackageChangeDialog {
+    constructor() {
+        this.dialog = null;
+        this.previousFocus = null;
+        this.started = 0;
+    }
+    update(state) {
+        if (state.phase === 'cancelled') {
+            this.close();
+            return;
+        }
+        this.open();
+        this.field('[data-title]').textContent = state.action === 'install'
+            ? `Install tabby-rdp ${state.version}` : 'Uninstall tabby-rdp';
+        const result = this.field('[data-result]');
+        result.dataset.phase = state.phase;
+        result.setAttribute('role', state.phase === 'error' ? 'alert' : 'status');
+        const complete = state.phase === 'success' || state.phase === 'error';
+        this.field('progress').hidden = complete;
+        this.field('[data-elapsed]').hidden = complete;
+        this.field('[data-cancel]').hidden = true;
+        this.field('[data-confirm]').hidden = true;
+        this.field('[data-close]').hidden = !complete;
+        this.field('[data-detail]').textContent = '';
+        let message = state.message ?? '';
+        if (state.phase === 'preparing') {
+            message = state.action === 'install' ? 'Checking compatibility…' : 'Checking installation…';
+        }
+        if (state.phase === 'installing') {
+            message = `Installing tabby-rdp ${state.version}…`;
+        }
+        if (state.phase === 'uninstalling') {
+            message = 'Uninstalling tabby-rdp…';
+        }
+        if (state.phase === 'verifying') {
+            message = state.action === 'install' ? 'Verifying installation…' : 'Verifying removal…';
+        }
+        if (state.phase === 'success') {
+            this.field('[data-title]').textContent = state.action === 'install' ? 'Installation complete' : 'Uninstall complete';
+            if (!state.message) {
+                message = state.action === 'install' ? `tabby-rdp ${state.version} is installed.` : 'tabby-rdp is uninstalled.';
+                this.field('[data-detail]').textContent = 'Close remote desktops, then restart Tabby.';
+            }
+        }
+        if (state.phase === 'error') {
+            this.field('[data-title]').textContent = state.action === 'install' ? 'Installation failed' : 'Uninstall failed';
+        }
+        this.field('[data-message]').textContent = message;
+        if (complete) {
+            this.stopTimer();
+            this.field('[data-close]').focus();
+        }
+        else {
+            this.dialog.focus();
+        }
+    }
+    confirm(message, detail, action) {
+        this.open();
+        this.stopTimer();
+        this.field('[data-title]').textContent = message;
+        this.field('[data-message]').textContent = detail;
+        this.field('[data-detail]').textContent = '';
+        this.field('progress').hidden = true;
+        this.field('[data-elapsed]').hidden = true;
+        this.field('[data-close]').hidden = true;
+        const cancel = this.field('[data-cancel]');
+        const accept = this.field('[data-confirm]');
+        cancel.hidden = false;
+        accept.hidden = false;
+        accept.textContent = action;
+        this.field('[data-result]').dataset.phase = 'confirming';
+        cancel.focus();
+        return new Promise(resolve => { this.confirmation = resolve; });
+    }
+    field(selector) { return this.dialog.querySelector(selector); }
+    open() {
+        if (this.dialog) {
+            if (!this.dialog.open) {
+                this.dialog.showModal();
+            }
+            if (!this.timer) {
+                this.startTimer();
+            }
+            return;
+        }
+        if (!document.getElementById('trd-package-dialog-style')) {
+            const style = document.createElement('style');
+            style.id = 'trd-package-dialog-style';
+            style.textContent = STYLE;
+            document.head.appendChild(style);
+        }
+        this.previousFocus = document.activeElement instanceof HTMLElement ? document.activeElement : null;
+        const dialog = document.createElement('dialog');
+        this.dialog = dialog;
+        dialog.className = 'trd-package-dialog';
+        dialog.setAttribute('aria-labelledby', 'trd-package-dialog-title');
+        dialog.setAttribute('tabindex', '-1');
+        dialog.setAttribute('closedby', 'none');
+        dialog.innerHTML = `<h4 id="trd-package-dialog-title" data-title></h4>
+            <div data-result role="status" aria-live="polite"><p data-message></p><p data-detail></p></div>
+            <progress aria-label="Package change progress"></progress><div data-elapsed></div>
+            <div class="trd-package-actions"><button class="btn btn-secondary" data-cancel hidden>Cancel</button>
+                <button class="btn btn-primary" data-confirm hidden></button><button class="btn btn-primary" data-close hidden>Close</button></div>`;
+        this.field('[data-confirm]').addEventListener('click', () => this.decide(true));
+        this.field('[data-cancel]').addEventListener('click', () => this.decide(false));
+        this.field('[data-close]').addEventListener('click', () => this.close());
+        dialog.addEventListener('cancel', event => {
+            event.preventDefault();
+            this.dismiss();
+        });
+        // Keep package-dialog keystrokes out of Tabby's terminal and shortcut handlers.
+        dialog.addEventListener('keydown', event => {
+            event.stopPropagation();
+            if (event.key === 'Escape') {
+                event.preventDefault();
+                this.dismiss();
+            }
+        });
+        dialog.addEventListener('keyup', event => event.stopPropagation());
+        document.body.appendChild(dialog);
+        dialog.showModal();
+        this.startTimer();
+    }
+    decide(accepted) {
+        const resolve = this.confirmation;
+        if (!resolve) {
+            return;
+        }
+        this.confirmation = undefined;
+        this.field('[data-confirm]').hidden = true;
+        this.field('[data-cancel]').hidden = true;
+        resolve(accepted);
+        if (!accepted) {
+            this.close();
+        }
+    }
+    dismiss() {
+        if (this.confirmation) {
+            this.decide(false);
+        }
+        else if (!this.field('[data-close]').hidden) {
+            this.close();
+        }
+    }
+    startTimer() {
+        this.started = Date.now();
+        const tick = () => {
+            const seconds = Math.floor((Date.now() - this.started) / 1000);
+            this.field('[data-elapsed]').textContent = `Elapsed ${Math.floor(seconds / 60)}:${String(seconds % 60).padStart(2, '0')}`;
+        };
+        tick();
+        this.timer = setInterval(tick, 1000);
+    }
+    stopTimer() { clearInterval(this.timer); this.timer = undefined; }
+    close() {
+        this.stopTimer();
+        this.dialog?.close();
+        this.dialog?.remove();
+        this.dialog = null;
+        if (this.previousFocus?.isConnected) {
+            this.previousFocus.focus();
+        }
+        this.previousFocus = null;
+    }
+}
+exports.PackageChangeDialog = PackageChangeDialog;

package/dist/probe.js

@@ -1,5 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.MAX_PROBES = void 0;
 exports.probeArrived = probeArrived;
 exports.probesIn = probesIn;
 /**
@@ -8,15 +9,27 @@ exports.probesIn = probesIn;
  * in, so nothing shows). Exact where a split's panes share a host, and even their size.
  */
 const listeners = new Set();
+/**
+ * How many probes probesIn keeps at most. A pane gets one for each `ssh` in the foreground of its terminal there (two
+ * with a jump host's); the host, which is given the prefix, could print any number more while its command runs (up to
+ * a minute), each one kept until then.
+ */
+exports.MAX_PROBES = 64;
+/** What follows a probe's prefix and its dash: the number the script gives each `ssh` it finds, from 1. */
+const PROBE_NUMBER = /^[1-9][0-9]{0,2}$/;
 /** Called by desk.ts for each probe in a pane's output. */
 function probeArrived(id, pane) {
     listeners.forEach(f => f(id, pane));
 }
-/** Collects the probes (ids starting with `prefix`) that arrive in `pane` while `during` runs, and briefly after. */
+/**
+ * Collects the probes that arrive in `pane` while `during` runs, and briefly after: ids of the form `<prefix>-<n>`, n
+ * from 1 to 999, the first MAX_PROBES of them.
+ */
 async function probesIn(pane, prefix, during, settleMs = 400) {
     const ids = new Set();
+    const start = `${prefix}-`;
     const listener = (id, where) => {
-        if (where === pane && id.startsWith(prefix)) {
+        if (where === pane && ids.size < exports.MAX_PROBES && id.startsWith(start) && PROBE_NUMBER.test(id.slice(start.length))) {
             ids.add(id);
         }
     };
@@ -30,4 +43,3 @@ async function probesIn(pane, prefix, during, settleMs = 400) {
         listeners.delete(listener);
     }
 }
-//# sourceMappingURL=probe.js.map