@gjsify/adwaita-web 0.63.0 → 0.63.1-next.235

package/src/elements/adw-window.ts

@@ -1,5 +1,6 @@
-// <adw-window> — the web counterpart of Adw.Window: a freeform window with no
-// titlebar area. Adw.Window styles nothing itself — you pair it with
+// <adw-window> — the web counterpart of Adw.Window: a Gtk.Window (so <gtk-window>'s state
+// members — is-active, focus-widget, close-request, present(), maximized — are inherited)
+// with no titlebar area. Adw.Window styles nothing itself — you pair it with
 // Adw.ToolbarView and an Adw.HeaderBar (or a Gtk.HeaderBar) to get the chrome —
 // so this element owns the FRAME and the window's own state, and the chrome is
 // whatever you put in it.
@@ -38,159 +39,95 @@
 // Copyright (c) 2020-2023 Alice Mikhaylenko / Purism SPC (libadwaita). LGPLv2.1+
 // Modifications: Implemented as a Web Component for @gjsify/adwaita-web.
 
-import { AdwBreakpoint } from '@gjsify/adwaita-core';
-import { addBreakpoints } from '../breakpoints.js';
-import { bindSlottedChildren } from '../slotted-children.js';
+import type { AdwBreakpoint } from '@gjsify/adwaita-core';
+import type { AdwSlot } from '../slotted-children.js';
+import { AdwWindowFeatures } from './adw-window-features.js';
+import { GtkWindow } from './gtk-window.js';
 
-/** The default minimum size of an AdwWindow, from adw_window_init (C:344). */
-const DEFAULT_WIDTH = 360;
-const DEFAULT_HEIGHT = 200;
-
-export class AdwWindow extends HTMLElement {
-    private _initialized = false;
-    private _contentEl!: HTMLDivElement;
-    private _breakpoints: AdwBreakpoint[] = [];
-    private _disposeBreakpoints: (() => void) | null = null;
-    private _openDialogs: HTMLElement[] = [];
+export class AdwWindow extends GtkWindow {
+    private readonly _features = new AdwWindowFeatures(this);
 
     static get observedAttributes() {
-        return ['width', 'height', 'default-width', 'default-height'];
+        return [...GtkWindow.observedAttributes, 'width', 'height'];
     }
 
     /** The content area — the Adw.Window:content property. */
     get contentArea(): HTMLDivElement {
-        return this._contentEl;
+        return this._content;
     }
 
     /** The content widget — the first child of the content area. */
     get content(): HTMLElement | null {
-        return this._contentEl.firstElementChild as HTMLElement | null;
+        return this._features.content;
     }
 
     set content(value: HTMLElement | null) {
-        if (value) {
-            this._contentEl.appendChild(value);
-        }
+        this._features.content = value;
     }
 
     /** The breakpoints added to this window. */
     get breakpoints(): readonly AdwBreakpoint[] {
-        return this._breakpoints;
+        return this._features.breakpoints;
     }
 
     /** The currently applied breakpoint, or null when none is. */
     get currentBreakpoint(): AdwBreakpoint | null {
-        return this._breakpoints.find((bp) => bp.applied) ?? null;
+        return this._features.currentBreakpoint;
     }
 
     /** The open dialogs presented inside this window (Adw.Window:dialogs). */
     get dialogs(): readonly HTMLElement[] {
-        // A dialog taken out of the document never raises `notify::open` on the way
-        // out, so a dialog that was REMOVED while open would otherwise stay listed
-        // for the rest of the window's life.
-        this._openDialogs = this._openDialogs.filter((dialog) => dialog.isConnected);
-        return this._openDialogs;
+        return this._features.dialogs;
     }
 
     /** The currently visible dialog, or null when none is (Adw.Window:visible-dialog). */
     get visibleDialog(): HTMLElement | null {
-        const dialogs = this.dialogs;
-        return dialogs.length > 0 ? (dialogs[dialogs.length - 1] as HTMLElement) : null;
+        return this._features.visibleDialog;
     }
 
-    /**
-     * Add a breakpoint to this window (adw_window_add_breakpoint).
-     * The breakpoint evaluates against the window's own box and sets a
-     * `data-breakpoint` attribute when applied.
-     */
+    /** Add a breakpoint to this window (adw_window_add_breakpoint). */
     addBreakpoint(condition: string): AdwBreakpoint {
-        const bp = new AdwBreakpoint(condition, {
-            onApply: () => (this.dataset.breakpoint = condition),
-            onUnapply: () => {
-                if (this.dataset.breakpoint === condition) delete this.dataset.breakpoint;
-            },
-        });
-        this._breakpoints.push(bp);
-        // Re-evaluated against a box that may have changed since the last add.
-        this._bindBreakpoints();
-        return bp;
+        return this._features.addBreakpoint(condition);
     }
 
     connectedCallback() {
-        this._buildOnce();
-        // EVERY connect, not only the first — see `_bindBreakpoints`.
-        this._bindBreakpoints();
+        super.connectedCallback();
+        this._features.adopt(this._content);
+        // EVERY connect, not only the first — see `AdwWindowFeatures.bind`.
+        this._features.bind();
     }
 
     disconnectedCallback() {
-        this._disposeBreakpoints?.();
-        this._disposeBreakpoints = null;
+        this._features.release();
+        super.disconnectedCallback();
     }
 
     attributeChangedCallback(name: string) {
-        // The size request is read from the ATTRIBUTE, so it is applied on every
-        // change — including one that arrived before the element was connected, which
-        // is the ordinary case for markup already sitting in a document.
-        if (name === 'width' || name === 'height' || name === 'default-width' || name === 'default-height') {
-            this._applySizeRequest();
+        // The size request is read from the ATTRIBUTE, so it is applied on every change —
+        // including one that arrived before the element was connected.
+        if (name === 'width' || name === 'height') {
+            this.renderFrameSize();
+            return;
         }
+        super.attributeChangedCallback(name);
     }
 
-    private _buildOnce() {
-        if (this._initialized) return;
-        this._initialized = true;
-
-        this._applySizeRequest();
-
-        this._contentEl = document.createElement('div');
-        this._contentEl.className = 'adw-window-content';
-
-        // Children are the content — the Adw.Window buildable default, and `content` is
-        // ALSO its name, because a `.blp` writes `content:` on the window and an authored
-        // tree needs the name to route it: `refuseUnknownSlots` in
-        // `src/shared-tree-builder.ts` throws on a slot a defined element does not
-        // declare, and `showcases/gtk/effect-adw-services/src/window.blp` is rooted at
-        // one. The content area becomes the host's own child, so a child appended later
-        // lands in it too (`bindSlottedChildren` is LIVE, see `src/slotted-children.ts`).
-        bindSlottedChildren(this, [{ name: 'content', into: this._contentEl }, { into: this._contentEl }]).install(
-            this._contentEl,
-        );
-
-        // Track open dialogs presented inside this window: an AdwDialog raises
-        // `notify::open`, which bubbles to here.
-        this.addEventListener('notify::open', (e) => {
-            const dialog = e.target as HTMLElement;
-            if (dialog === this) return;
-            if (dialog.hasAttribute('open')) {
-                if (!this._openDialogs.includes(dialog)) this._openDialogs.push(dialog);
-            } else {
-                this._openDialogs = this._openDialogs.filter((d) => d !== dialog);
-            }
-        });
-    }
-
-    /**
-     * Bind the breakpoints to THIS box.
-     *
-     * NOT once per lifetime: `disconnectedCallback` releases the disposer, so a
-     * window moved between parents would come back deaf — and a window is exactly
-     * the thing a client-side route change re-parents. Re-binding is cheap and
-     * idempotent, and it re-measures the new box on the way.
-     */
-    private _bindBreakpoints() {
-        this._disposeBreakpoints?.();
-        this._disposeBreakpoints = null;
-        if (this._initialized && this._breakpoints.length > 0) {
-            this._disposeBreakpoints = addBreakpoints(this, this._breakpoints);
-        }
+    /** `Adw.Window` has no titlebar of its own: you pair it with a header bar. */
+    protected override hasTitlebar(): boolean {
+        return false;
+    }
+
+    protected override strips(): Node[] {
+        return [this._content];
+    }
+
+    protected override extraSlots(): AdwSlot[] {
+        // `content` is the content area's name too: a `.blp` writes `content:` on the window.
+        return [{ name: 'content', into: this._content }];
     }
 
-    /** The window's size request — GTK's, not CSS's, so an absent attribute means the default. */
-    private _applySizeRequest() {
-        const width = this.getAttribute('default-width') ?? this.getAttribute('width');
-        const height = this.getAttribute('default-height') ?? this.getAttribute('height');
-        this.style.width = width ? `${width}px` : `${DEFAULT_WIDTH}px`;
-        this.style.height = height ? `${height}px` : `${DEFAULT_HEIGHT}px`;
+    protected override renderFrameSize(): void {
+        this._features.applySizeRequest();
     }
 }
 

package/src/elements/gtk-application-window.ts

@@ -16,21 +16,32 @@
 //
 // THE `win.` / `app.` PREFIXES. `GtkApplicationWindow` exports window actions under `win.` and
 // application-wide ones under `app.` (:48-56), and any `GtkActionable` inside the window can
-// activate either. A page has no `GActionMap`, so nothing is exported here; what this element
-// adds over `<gtk-window>` is the strip and the property that shows it.
+// activate either. `defineWindowApplication` installs the `Gio.ActionMap` half on the prototype
+// (`add_action`, `lookup_action`, `remove_action`, the `win.` registry); the `Gio.ActionGroup`
+// half stays off because a window's `activate_action` is the widget's. Plain `<gtk-window>` has
+// no ActionMap. What this element adds over it is that map, the strip and the property that shows it.
 //
 // Reference: refs/gtk/gtk/gtkapplicationwindow.c
 // Reference: refs/libadwaita/src/stylesheet/widgets/_window.scss (GtkWindow)
 // Copyright (c) The GTK Team. LGPLv2.1+.
 // Modifications: Implemented as a Web Component for @gjsify/adwaita-web.
 
+import type { ActionLike } from '@gjsify/adwaita-core';
+import type { GtkApplication } from '../application.js';
 import type { AdwSlot } from '../slotted-children.js';
 import { GtkWindow } from './gtk-window.js';
 import { defineWindowApplication } from '../application.js';
 
 export class GtkApplicationWindow extends GtkWindow {
     /** `Gtk.Window:application`: setting it is `add_window` (ADR 0098), set by `defineWindowApplication`. */
-    declare application: object | null;
+    declare application: GtkApplication | null;
+
+    /** `Gio.ActionMap.add_action`: installed by `installActionMap`; the action is reachable as `win.<name>`. */
+    declare add_action: (action: ActionLike) => void;
+    /** `Gio.ActionMap.lookup_action`: the window's own action, or `null`. */
+    declare lookup_action: (name: string) => ActionLike | null;
+    /** `Gio.ActionMap.remove_action`: removing an unknown name does nothing. */
+    declare remove_action: (name: string) => void;
     private _menubar: HTMLDivElement | null = null;
     private _menubarObserver: MutationObserver | null = null;
 
@@ -51,7 +62,7 @@ export class GtkApplicationWindow extends GtkWindow {
      * The menubar strip, created once and reused: `strips()` and `extraSlots()` both ask for
      * it, so whichever runs first builds it and the other finds it.
      */
-    private menubarSection(): HTMLDivElement {
+    protected menubarSection(): HTMLDivElement {
         if (this._menubar === null) {
             const section = document.createElement('div');
             section.className = 'adw-gtk-application-window-menubar';
@@ -95,14 +106,14 @@ export class GtkApplicationWindow extends GtkWindow {
      * The observer is what makes the second half live: `bindSlottedChildren` adopts a
      * `slot="menubar"` child after connect, and a bar that appeared then must appear.
      */
-    private _followMenubar(): void {
+    protected _followMenubar(): void {
         this._menubarObserver?.disconnect();
         this._menubarObserver = new MutationObserver(() => this._renderMenubar());
         this._menubarObserver.observe(this.menubarSection(), { childList: true });
         this._renderMenubar();
     }
 
-    private _renderMenubar(): void {
+    protected _renderMenubar(): void {
         const menubar = this.menubarSection();
         menubar.hidden = !this.showMenubar || menubar.childElementCount === 0;
     }

package/src/elements/gtk-window.ts

@@ -233,7 +233,7 @@ export class GtkWindow extends HTMLElement {
         this._content.className = 'adw-gtk-window-content';
 
         bindSlottedChildren(this, [
-            { name: 'titlebar', into: this._titlebar },
+            ...(this.hasTitlebar() ? [{ name: 'titlebar', into: this._titlebar }] : []),
             ...this.extraSlots(),
             { into: this._content },
         ]).install(...this.strips());
@@ -308,6 +308,15 @@ export class GtkWindow extends HTMLElement {
         return [this._titlebar, this._content];
     }
 
+    /**
+     * Whether this window has a titlebar strip at all. `Adw.Window` has none (it styles nothing
+     * itself, you pair it with a header bar), so a subclass answers `false` and neither the
+     * `titlebar` slot nor the server-side decoration is built.
+     */
+    protected hasTitlebar(): boolean {
+        return true;
+    }
+
     /** The slots a subclass adds beside `titlebar`; none by default. */
     protected extraSlots(): AdwSlot[] {
         return [];
@@ -345,6 +354,19 @@ export class GtkWindow extends HTMLElement {
         this.classList.toggle('maximized', this.decorated && this.maximized);
         this.classList.toggle('fullscreen', this.decorated && this._offByDefault('fullscreened'));
 
+        this.renderFrameSize();
+
+        const title = this.getAttribute('title');
+        if (title === null) this.removeAttribute('aria-label');
+        else this.setAttribute('aria-label', title);
+        this._renderTitlebar();
+    }
+
+    /**
+     * The frame's box from `default-width` / `default-height`; an absent one clears it. A subclass
+     * with a size request of its own (`Adw.Window`'s 360×200) replaces this.
+     */
+    protected renderFrameSize(): void {
         const width = Number.parseFloat(this.getAttribute('default-width') ?? '');
         const height = Number.parseFloat(this.getAttribute('default-height') ?? '');
         for (const [axis, value] of [
@@ -354,11 +376,6 @@ export class GtkWindow extends HTMLElement {
             if (Number.isFinite(value) && value > 0) this.style.setProperty(axis, `${value}px`);
             else this.style.removeProperty(axis);
         }
-
-        const title = this.getAttribute('title');
-        if (title === null) this.removeAttribute('aria-label');
-        else this.setAttribute('aria-label', title);
-        this._renderTitlebar();
     }
 
     /**
@@ -384,7 +401,7 @@ export class GtkWindow extends HTMLElement {
             this._titleLabel = null;
             return;
         }
-        if (!this.decorated) return;
+        if (!this.decorated || !this.hasTitlebar()) return;
 
         if (this._startControls === null) {
             this._startControls = document.createElement('gtk-window-controls');

package/src/gtk-window.spec.ts

@@ -26,6 +26,58 @@ function titlebar(el: GtkWindow): HTMLElement {
     return el.querySelector('.adw-gtk-window-titlebar') as HTMLElement;
 }
 
+/** The `Gtk.Window` conformance subject for any window element (`gtk-window`, `adw-window`, …). */
+export function webWindowSubject(tag: string): { subject: WindowSubject; dispose: () => void } {
+    const windows = new Map<object, HTMLElement>();
+    const subject: WindowSubject = {
+        name: `<${tag}>`,
+        isOracle: false,
+        capabilities: { maximizable: true, observesFocus: true, hideOnClose: true },
+        create({ hideOnClose }) {
+            // Never in a page: not realized, which is GTK's state for a window before `present()`.
+            const el = document.createElement(tag) as GtkWindow;
+            if (hideOnClose) el.setAttribute('hide-on-close', 'true');
+            el.append(document.createElement('button'), document.createElement('button'));
+            return el;
+        },
+        show(w) {
+            const host = document.createElement('div');
+            document.body.appendChild(host);
+            host.appendChild(w as GtkWindow);
+            windows.set(w, host);
+            (w as GtkWindow).present();
+        },
+        connect(w, signal, handler) {
+            (w as GtkWindow).addEventListener(signal, (event) => {
+                if (signal === 'close-request') {
+                    if (event.defaultPrevented) return;
+                    if (handler()) {
+                        event.preventDefault();
+                        event.stopImmediatePropagation();
+                    }
+                    return;
+                }
+                handler();
+            });
+            return 1;
+        },
+        close: (w) => void (w as GtkWindow).close(),
+        maximize: (w) => (w as GtkWindow).maximize(),
+        unmaximize: (w) => (w as GtkWindow).unmaximize(),
+        isMaximized: (w) => (w as GtkWindow).is_maximized(),
+        isVisible: (w) => (w as GtkWindow).isConnected && !(w as GtkWindow).hidden,
+        focusables: (w) => [...(w as GtkWindow).querySelectorAll('button')] as unknown as [Element, Element],
+        setFocus: (w, widget) => (w as GtkWindow).set_focus(widget as Element | null),
+        getFocus: (w) => (w as GtkWindow).get_focus(),
+    };
+    return {
+        subject,
+        dispose: () => {
+            for (const host of windows.values()) host.remove();
+        },
+    };
+}
+
 export const GtkWindowTest = async () => {
     await describe('<gtk-window> structure', async () => {
         await it('is a titlebar strip over a content box', async () => {
@@ -206,50 +258,9 @@ export const GtkWindowTest = async () => {
     // adapter below is that mapping, and it also stops later listeners, which is what the handled
     // accumulator does. So the "third never runs" row exercises the adapter plus the element's
     // sequence, not DOM dispatch alone.
-    const windows = new Map<object, HTMLElement>();
-    const webSubject: WindowSubject = {
-        name: '<gtk-window>',
-        isOracle: false,
-        capabilities: { maximizable: true, observesFocus: true, hideOnClose: true },
-        create({ hideOnClose }) {
-            // Never in a page: not realized, which is GTK's state for a window before `present()`.
-            const el = document.createElement('gtk-window') as GtkWindow;
-            if (hideOnClose) el.setAttribute('hide-on-close', 'true');
-            el.append(document.createElement('button'), document.createElement('button'));
-            return el;
-        },
-        show(w) {
-            const host = document.createElement('div');
-            document.body.appendChild(host);
-            host.appendChild(w as GtkWindow);
-            windows.set(w, host);
-            (w as GtkWindow).present();
-        },
-        connect(w, signal, handler) {
-            (w as GtkWindow).addEventListener(signal, (event) => {
-                if (signal === 'close-request') {
-                    if (event.defaultPrevented) return;
-                    if (handler()) {
-                        event.preventDefault();
-                        event.stopImmediatePropagation();
-                    }
-                    return;
-                }
-                handler();
-            });
-            return 1;
-        },
-        close: (w) => void (w as GtkWindow).close(),
-        maximize: (w) => (w as GtkWindow).maximize(),
-        unmaximize: (w) => (w as GtkWindow).unmaximize(),
-        isMaximized: (w) => (w as GtkWindow).is_maximized(),
-        isVisible: (w) => (w as GtkWindow).isConnected && !(w as GtkWindow).hidden,
-        focusables: (w) => [...(w as GtkWindow).querySelectorAll('button')] as unknown as [Element, Element],
-        setFocus: (w, widget) => (w as GtkWindow).set_focus(widget as Element | null),
-        getFocus: (w) => (w as GtkWindow).get_focus(),
-    };
+    const { subject: webSubject, dispose } = webWindowSubject('gtk-window');
     await driveWindowVectors(webSubject, { describe, it, expect }, WINDOW_VECTORS);
-    for (const host of windows.values()) host.remove();
+    dispose();
 
     await describe('<gtk-window> state members', async () => {
         await it('a frame that was never connected is not realized: close() does nothing', async () => {