flexdesk 0.17.17 → 0.18.0

package/src/ui/components/managed_window.js

@@ -18,6 +18,8 @@
  */
 
 import { getSetting } from '../../core/settings.js';
+import { isInAnchoredLayer } from './anchored_layer.js';
+import { collectFocusable } from '../utils/focusable.js';
 
 /** Where window geometry lives when the embedder names no key. An embedder
  *  that saved geometry under another key keeps it by passing that key to
@@ -70,29 +72,6 @@ let _activeWindows = new Map(); // id -> ManagedWindow instance
  *  the same event reaches it — one Esc must close one window. */
 const _escAnswered = new WeakSet();
 
-/** Collect the focusable elements inside `root`, in DOM order. Used
- *  by the modal focus trap so Tab cycles within the modal frame and
- *  can't escape into the underlying tiles. */
-function _collectFocusable(root) {
-    if (!root) return [];
-    const sel = [
-        'a[href]',
-        'button:not([disabled])',
-        'input:not([disabled]):not([type="hidden"])',
-        'select:not([disabled])',
-        'textarea:not([disabled])',
-        '[tabindex]:not([tabindex="-1"])',
-    ].join(',');
-    return Array.from(root.querySelectorAll(sel)).filter((el) => {
-        // Skip hidden / zero-size elements — Tab visits only what the
-        // user can actually see.
-        if (el.hidden) return false;
-        if (el.closest('[hidden]')) return false;
-        const r = el.getBoundingClientRect();
-        return r.width > 0 || r.height > 0;
-    });
-}
-
 // Global state cache
 let _stateCache = null;
 
@@ -548,12 +527,17 @@ export class ManagedWindow {
         // taskbar can filter on receipt: an in-panel taskbar shows only the
         // windows mounted in its own panel, and the viewport taskbar shows only
         // the ones with no container.
-        window.dispatchEvent(new CustomEvent('managed-window-closed', {
-            detail: { id: this.id, container: this.container }
-        }));
+        this._announce('managed-window-closed', { id: this.id, container: this.container });
         this._release();
     }
 
+    /** Every window event goes out on the page's window, and a window takes only
+     *  an event built by its own `CustomEvent`: Node's global one is refused
+     *  under jsdom, in the middle of the close that fired it. */
+    _announce(name, detail) {
+        window.dispatchEvent(new window.CustomEvent(name, { detail }));
+    }
+
     /** BUG-0053. A closed window leaves the registry and lets go of what it
      *  held: its content, its DOM and every consumer callback (an `onClose`
      *  typically captures its owner). Until now the registry kept all of it
@@ -607,12 +591,10 @@ export class ManagedWindow {
         }
 
         // Dispatch event first so the taskbar button is created synchronously
-        window.dispatchEvent(new CustomEvent('managed-window-minimized', {
-            detail: {
-                id: this.id, title: this.title, icon: this.icon,
-                container: this.container,
-            }
-        }));
+        this._announce('managed-window-minimized', {
+            id: this.id, title: this.title, icon: this.icon,
+            container: this.container,
+        });
 
         if (!this.element) return;
 
@@ -744,9 +726,7 @@ export class ManagedWindow {
         this.bringToFront();
 
         // Notify taskbar (removes the taskbar button)
-        window.dispatchEvent(new CustomEvent('managed-window-restored', {
-            detail: { id: this.id, container: this.container }
-        }));
+        this._announce('managed-window-restored', { id: this.id, container: this.container });
     }
 
     /**
@@ -825,7 +805,7 @@ export class ManagedWindow {
 
         // A CLASS THE STYLESHEET HAS ALWAYS KNOWN AND NOTHING EVER SET.
         // `.twm-managed-window--maximized .twm-managed-window__resize
-        // { display: none }` is in `css/base.css` — "a maximised window is not
+        // { display: none }` is in `css/flexdesk.css` — "a maximised window is not
         // resized by dragging its edges" — and it has never matched anything,
         // because no code path adds the modifier. So a maximised window keeps
         // eight live resize handles hanging 3px outside its edges. Exactly the
@@ -841,9 +821,7 @@ export class ManagedWindow {
         // tiles — had no edge to hang the rule on and would have had to poll.
         // Same detail shape as the other three window events, `container`
         // included, so a per-region consumer can filter on receipt.
-        window.dispatchEvent(new CustomEvent('managed-window-maximized', {
-            detail: { id: this.id, maximized: this.isMaximized, container: this.container },
-        }));
+        this._announce('managed-window-maximized', { id: this.id, maximized: this.isMaximized, container: this.container });
     }
 
     /**
@@ -965,7 +943,7 @@ export class ManagedWindow {
         }
         this.element.setAttribute('data-window-id', this.id);
         // BUG-0053. Focusable by script and by a press, never by Tab (the
-        // modal trap's `_collectFocusable` skips tabindex -1): a press on the
+        // modal trap's `collectFocusable` skips tabindex -1): a press on the
         // title bar or on empty content keeps focus in the window, where a
         // non-modal window's Esc looks for it.
         this.element.tabIndex = -1;
@@ -1274,9 +1252,7 @@ export class ManagedWindow {
             this.width = bounds.width; this.height = bounds.height;
         }
         this._applyPosition();
-        window.dispatchEvent(new CustomEvent('managed-window-moved', {
-            detail: { id: this.id, container },
-        }));
+        this._announce('managed-window-moved', { id: this.id, container });
         return true;
     }
 
@@ -1736,9 +1712,7 @@ export class ManagedWindow {
         this.height = rect.height;
         this._applyPosition();
         this.element?.classList.add('twm-managed-window--snapped');
-        window.dispatchEvent(new CustomEvent('managed-window-snapped', {
-            detail: { id: this.id, zone, container: this.container },
-        }));
+        this._announce('managed-window-snapped', { id: this.id, zone, container: this.container });
     }
 
     /** Restore the geometry a snap replaced. Called when a snapped window is
@@ -1850,7 +1824,10 @@ export class ManagedWindow {
         // active element into the background — bad UX, and a
         // genuine WCAG focus-trap violation for accessibility tools.
         if (e.key === 'Tab' && this.modal && this.element) {
-            const focusables = _collectFocusable(this.element);
+            // A popover opened from this modal is over it but outside its frame,
+            // and sees to its own Tab.
+            if (isInAnchoredLayer(document.activeElement)) return;
+            const focusables = collectFocusable(this.element);
             if (focusables.length === 0) {
                 e.preventDefault();
                 return;

package/src/ui/components/menu_bar.js

@@ -62,6 +62,15 @@
  * shortcut, context, action }`), so the palette and the bar list identical
  * verbs.
  *
+ * ── Two styles: a bar, or one hamburger button (STORY-0133) ───────────
+ * `style: 'bar'` (the default) draws a title per menu: File  Edit  Help.
+ * `style: 'hamburger'` draws ONE icon button (`icon`, 'menu' by default,
+ * named by `label`) whose menu lists the menus, each flying out its items:
+ * ☰ › File › Open…. It is the same model, so `commands()`, `setEnabled`,
+ * `setChecked` and `onAction` do not change; `open(menuId)` opens the
+ * hamburger with that menu flown out. `setStyle(style)` switches at run
+ * time (a setting, a narrow window), closing whatever is open.
+ *
  * ── Roles ─────────────────────────────────────────────────────────────
  * The WAI-ARIA menubar pattern: `role="menubar"` on the element you pass,
  * a `role="menuitem"` title per menu inside a `role="none"` wrapper, each
@@ -77,6 +86,9 @@
 const SEL_TITLE = '.twm-menubar__title';
 const SEL_ITEM = '.twm-menubar__item';
 const SEL_MENU = '.twm-menubar__menu';
+const STYLES = ['bar', 'hamburger'];
+/** The hamburger's own model ids. A menu's row in it is `${HAMBURGER}:${menu.id}`. */
+const HAMBURGER = 'twm-menubar:hamburger';
 
 /** @returns {MenuBar} */
 export function createMenuBar(el, opts) {
@@ -91,16 +103,22 @@ export class MenuBar {
      * @param {Function} [opts.onAction]  `(id, { item, checked }) => void`
      * @param {string}  [opts.label]      the bar's accessible name ('Menu')
      * @param {string}  [opts.emptyLabel] the disabled row an empty submenu shows ('Empty')
+     * @param {string}  [opts.style]      'bar' (a title per menu, the default) or 'hamburger' (one button)
+     * @param {string}  [opts.icon]       the hamburger's Material Symbols icon ('menu')
      */
-    constructor(el, { menus, onAction = null, label = 'Menu', emptyLabel = 'Empty' } = {}) {
+    constructor(el, { menus, onAction = null, label = 'Menu', emptyLabel = 'Empty', style = 'bar', icon = 'menu' } = {}) {
         if (!el || typeof el.appendChild !== 'function') {
             throw new TypeError('createMenuBar: `el` must be an element');
         }
         _validateMenus(menus);
+        _validateStyle(style);
         this.el = el;
         this.menus = menus;
         this._onAction = typeof onAction === 'function' ? onAction : null;
         this._emptyLabel = emptyLabel;
+        this._label = label;
+        this._icon = icon;
+        this._style = style;
         this._doc = el.ownerDocument;
         this._disabled = new Map();     // id -> boolean (override)
         this._checked = new Map();      // id -> boolean (override, check items)
@@ -112,26 +130,10 @@ export class MenuBar {
         this._returnTo = null;          // what had focus before the bar did
         this._altArmed = false;
 
-        el.innerHTML = '';
         el.classList.add('twm-menubar');
         el.setAttribute('role', 'menubar');
         el.setAttribute('aria-label', label);
-        this._titles = menus.map((m, i) => {
-            const entry = this._doc.createElement('div');
-            entry.className = 'twm-menubar__entry';
-            entry.setAttribute('role', 'none');
-            const btn = this._doc.createElement('button');
-            btn.type = 'button';
-            btn.className = 'twm-menubar__title';
-            btn.setAttribute('role', 'menuitem');
-            btn.setAttribute('aria-haspopup', 'menu');
-            btn.setAttribute('aria-expanded', 'false');
-            btn.tabIndex = i === 0 ? 0 : -1;
-            btn.textContent = m.label;
-            entry.appendChild(btn);
-            el.appendChild(entry);
-            return btn;
-        });
+        this._renderTitles();
 
         this._h = {
             mousedown: (e) => this._onMouseDown(e),
@@ -163,12 +165,35 @@ export class MenuBar {
     /** Whether a menu is open. */
     isOpen() { return this._openIdx >= 0; }
 
-    /** Open the menu with this id (focus on its title, or on its first item). */
+    /** Open the menu with this id (focus on its title, or on its first item).
+     *  A hamburger opens with that menu flown out (focus on its row, or on
+     *  the menu's first item). */
     open(menuId, { focusItem = false } = {}) {
         const i = this.menus.findIndex((m) => m.id === menuId);
         if (i < 0) return;
         this._enter();
-        this._open(i, focusItem ? 'first' : null);
+        if (this._style !== 'hamburger') { this._open(i, focusItem ? 'first' : null); return; }
+        this._open(0, null);
+        const row = this._itemsIn(this._stack[0].menu)
+            .find((b) => this._models.get(b)?.id === `${HAMBURGER}:${menuId}`);
+        if (!row) return;
+        row.focus({ preventScroll: true });
+        this._openSub(row, focusItem ? 'first' : null);
+    }
+
+    /** 'bar' or 'hamburger'. */
+    get style() { return this._style; }
+
+    /** Draw the menus as a bar or as one hamburger button. Whatever is open
+     *  closes; the model and every setEnabled / setChecked stay. */
+    setStyle(style) {
+        _validateStyle(style);
+        if (style === this._style) return;
+        const hadFocus = this.el.contains(this._doc.activeElement);
+        this._deactivate();
+        this._style = style;
+        this._renderTitles();
+        if (hadFocus) this._focusTitle(0);
     }
 
     /** Close every open menu. Focus stays in the bar if it was there. */
@@ -239,7 +264,7 @@ export class MenuBar {
         this._doc.removeEventListener('mousedown', this._h.docMousedown, true);
         this._doc.defaultView?.removeEventListener('blur', this._h.winBlur);
         this.el.innerHTML = '';
-        this.el.classList.remove('twm-menubar');
+        this.el.classList.remove('twm-menubar', 'twm-menubar--hamburger');
         this.el.removeAttribute('role');
         this.el.removeAttribute('aria-label');
     }
@@ -317,6 +342,50 @@ export class MenuBar {
         }
     }
 
+    // ── titles ────────────────────────────────────────────────────────
+
+    /** The titles for the current style. `_top` is what they open: the
+     *  menus themselves, or the hamburger's one menu that lists them. */
+    _renderTitles() {
+        const d = this._doc;
+        const burger = this._style === 'hamburger';
+        this.el.innerHTML = '';
+        this.el.classList.toggle('twm-menubar--hamburger', burger);
+        this._top = burger
+            ? [{ id: HAMBURGER, label: this._label, items: this.menus.map((m) => ({
+                id: `${HAMBURGER}:${m.id}`, label: m.label, submenu: m.items,
+            })) }]
+            : this.menus;
+        this._titles = this._top.map((m, i) => {
+            const entry = d.createElement('div');
+            entry.className = 'twm-menubar__entry';
+            entry.setAttribute('role', 'none');
+            const btn = d.createElement('button');
+            btn.type = 'button';
+            btn.className = 'twm-menubar__title';
+            btn.setAttribute('role', 'menuitem');
+            btn.setAttribute('aria-haspopup', 'menu');
+            btn.setAttribute('aria-expanded', 'false');
+            btn.tabIndex = i === 0 ? 0 : -1;
+            if (burger) {
+                btn.classList.add('twm-menubar__title--icon', 'twm-has-tooltip');
+                btn.setAttribute('aria-label', m.label);
+                btn.dataset.tooltip = m.label;
+                btn.dataset.tooltipPlacement = 'bottom';
+                const icon = d.createElement('span');
+                icon.className = 'material-symbols-outlined';
+                icon.setAttribute('aria-hidden', 'true');
+                icon.textContent = this._icon;
+                btn.appendChild(icon);
+            } else {
+                btn.textContent = m.label;
+            }
+            entry.appendChild(btn);
+            this.el.appendChild(entry);
+            return btn;
+        });
+    }
+
     // ── open / close ──────────────────────────────────────────────────
 
     _setRoving(i) {
@@ -359,7 +428,7 @@ export class MenuBar {
         // being removed never holds focus.
         this._focusTitle(i);
         this._closeAll();
-        const m = this.menus[i];
+        const m = this._top[i];
         const title = this._titles[i];
         const menu = this._buildMenu(m.items, m.label);
         title.parentElement.appendChild(menu);
@@ -596,6 +665,8 @@ export class MenuBar {
     _titleKey(key, i) {
         const n = this._titles.length;
         const open = this._openIdx >= 0;
+        // One title (a hamburger): there is no next or previous menu.
+        if (n === 1 && (key === 'ArrowRight' || key === 'ArrowLeft' || key === 'Home' || key === 'End')) return true;
         switch (key) {
             case 'ArrowRight': open ? this._open(i + 1, null) : this._focusTitle((i + 1) % n); return true;
             case 'ArrowLeft':  open ? this._open(i - 1, null) : this._focusTitle((i - 1 + n) % n); return true;
@@ -642,11 +713,11 @@ export class MenuBar {
             case 'End':  this._focusIn(menu, 'last'); return true;
             case 'ArrowRight':
                 if (item?.submenu != null && !this._isDisabled(item)) this._openSub(btn, 'first');
-                else this._open(this._openIdx + 1, 'first');
+                else if (this._titles.length > 1) this._open(this._openIdx + 1, 'first');
                 return true;
             case 'ArrowLeft':
                 if (level > 0) this._closeFrom(level);
-                else this._open(this._openIdx - 1, 'first');
+                else if (this._titles.length > 1) this._open(this._openIdx - 1, 'first');
                 return true;
             case 'Enter': case ' ':
                 this._activate(btn);
@@ -706,6 +777,12 @@ function _kind(item) {
     return 'menuitem';
 }
 
+function _validateStyle(style) {
+    if (!STYLES.includes(style)) {
+        throw new TypeError(`createMenuBar: \`style\` must be ${STYLES.map((s) => `'${s}'`).join(' or ')}`);
+    }
+}
+
 /** A bad model is a boot error, not a menu that silently lacks a row. */
 function _validateMenus(menus) {
     if (!Array.isArray(menus) || !menus.length) {