@gjsify/adwaita-web 0.64.2-next.252 → 0.64.2-next.254

package/src/compute-expand.spec.ts

@@ -0,0 +1,186 @@
+// `gtk_widget_compute_expand` in a box (gtkwidget.c:8387-8423, gtkboxlayout.c:793): a widget
+// that authored no `hexpand` grows when a descendant does, an explicit value stops the walk, and
+// the answer follows the tree as it changes. Plus the two size facts the same app layout broke
+// on: a scrolled window requests 0 on a scrolling axis (gtkscrolledwindow.c:1821-1960), and a
+// page leaving a view stack takes none of the stack's marks with it (adw-view-stack.c:1184-1205).
+import { describe, expect, it } from '@gjsify/unit';
+
+import type { AdwViewStack } from './elements/adw-view-stack.js';
+
+function mount(html: string, width = 600, height = 600): { host: HTMLElement; box: (sel: string) => DOMRect } {
+    const host = document.createElement('div');
+    host.style.cssText = `width:${width}px;height:${height}px;display:flex;flex-direction:column`;
+    host.innerHTML = html;
+    document.body.appendChild(host);
+    const box = (sel: string) => (host.querySelector(sel) as HTMLElement).getBoundingClientRect();
+    return { host, box };
+}
+
+/** The box writes its computed values from a MutationObserver: one microtask, then a frame. */
+const settle = () => new Promise((resolve) => requestAnimationFrame(resolve));
+
+export const ComputeExpandTest = async () => {
+    await describe('computed expand in a <gtk-box>', async () => {
+        await it('a bin with an hexpand descendant fills a horizontal box', async () => {
+            const { host, box } = mount(
+                `<gtk-box id="row" style="width:600px">
+                   <div id="fixed" style="width:100px"></div>
+                   <adw-bin id="bin"><gtk-box><div id="leaf" hexpand></div></gtk-box></adw-bin>
+                 </gtk-box>`,
+            );
+            await settle();
+            expect(host.querySelector('#bin')!.hasAttribute('data-computed-hexpand')).toBe(true);
+            expect(box('#bin').width).toBe(500);
+            host.remove();
+        });
+
+        await it('an explicit hexpand=false on an intermediate stops propagation', async () => {
+            const { host, box } = mount(
+                `<gtk-box style="width:600px">
+                   <adw-bin id="bin"><gtk-box hexpand="false"><div style="width:10px" hexpand></div></gtk-box></adw-bin>
+                 </gtk-box>`,
+            );
+            await settle();
+            expect(host.querySelector('#bin')!.hasAttribute('data-computed-hexpand')).toBe(false);
+            expect(box('#bin').width).toBe(10);
+            host.remove();
+        });
+
+        await it('a leaf widget does not propagate, and a hidden one never expands', async () => {
+            const { host } = mount(
+                `<gtk-box>
+                   <gtk-label id="label"><div hexpand></div></gtk-label>
+                   <adw-bin id="bin"><gtk-box hidden><div hexpand></div></gtk-box></adw-bin>
+                 </gtk-box>`,
+            );
+            await settle();
+            expect(host.querySelector('#label')!.hasAttribute('data-computed-hexpand')).toBe(false);
+            expect(host.querySelector('#bin')!.hasAttribute('data-computed-hexpand')).toBe(false);
+            host.remove();
+        });
+
+        await it('propagation updates after a runtime reparent', async () => {
+            const { host, box } = mount(
+                `<gtk-box style="width:600px">
+                   <div style="width:100px"></div>
+                   <adw-bin id="bin"><div style="width:20px"></div></adw-bin>
+                 </gtk-box>
+                 <div id="parking"><div id="editor" hexpand></div></div>`,
+            );
+            await settle();
+            expect(box('#bin').width).toBe(20);
+            const bin = host.querySelector('#bin')!;
+            bin.replaceChildren(host.querySelector('#editor')!);
+            await settle();
+            expect(bin.hasAttribute('data-computed-hexpand')).toBe(true);
+            expect(box('#bin').width).toBe(500);
+            host.querySelector('#parking')!.append(host.querySelector('#editor')!);
+            await settle();
+            expect(bin.hasAttribute('data-computed-hexpand')).toBe(false);
+            host.remove();
+        });
+
+        await it('rewriting a label text does not recompute, adding a widget does', async () => {
+            const { host } = mount(
+                `<gtk-box>
+                   <adw-bin id="bin"><gtk-box id="inner"><gtk-label id="label">0000</gtk-label><div hexpand></div></gtk-box></adw-bin>
+                 </gtk-box>`,
+            );
+            await settle();
+            const bin = host.querySelector('#bin')!;
+            expect(bin.hasAttribute('data-computed-hexpand')).toBe(true);
+            // Drop the mark by hand: only a recompute would write it back.
+            bin.removeAttribute('data-computed-hexpand');
+            host.querySelector('#label')!.textContent = 'FFFF';
+            await settle();
+            expect(bin.hasAttribute('data-computed-hexpand')).toBe(false);
+            host.querySelector('#inner')!.append(document.createElement('gtk-label'));
+            await settle();
+            expect(bin.hasAttribute('data-computed-hexpand')).toBe(true);
+            host.remove();
+        });
+
+        await it('a registered subclass of a bin propagates as its base does', async () => {
+            const Bin = customElements.get('adw-bin')!;
+            const tag = 'compute-expand-test-bin';
+            if (!customElements.get(tag)) customElements.define(tag, class extends Bin {});
+            const { host, box } = mount(
+                `<gtk-box style="width:600px">
+                   <div style="width:100px"></div>
+                   <${tag} id="sub"><div hexpand></div></${tag}>
+                 </gtk-box>`,
+            );
+            await settle();
+            expect(box('#sub').width).toBe(500);
+            host.remove();
+        });
+    });
+
+    await describe('<gtk-scrolled-window> requests no content size on a scrolling axis', async () => {
+        await it('in a horizontal box inside a 600px-high box it stays 600 and scrolls', async () => {
+            const { host, box } = mount(
+                `<gtk-box orientation="vertical" style="height:600px">
+                   <gtk-box id="row" vexpand>
+                     <gtk-scrolled-window id="sw" hexpand>
+                       <div style="height:2000px;width:50px"></div>
+                     </gtk-scrolled-window>
+                   </gtk-box>
+                 </gtk-box>`,
+            );
+            await settle();
+            expect(box('#row').height).toBe(600);
+            expect(box('#sw').height).toBe(600);
+            const viewport = host.querySelector('#sw gtk-viewport') as HTMLElement;
+            expect(viewport.getBoundingClientRect().height).toBe(600);
+            expect(viewport.scrollHeight > 600).toBe(true);
+            host.remove();
+        });
+
+        await it('sizes the measured chain: split-view content fills, the editor bin gets width', async () => {
+            const { host, box } = mount(
+                `<adw-overlay-split-view id="osv" style="height:600px">
+                   <div slot="sidebar" style="width:100px"></div>
+                   <gtk-box id="centerRight">
+                     <adw-bin id="editor"><div hexpand style="height:10px"></div></adw-bin>
+                     <gtk-scrolled-window id="right" hscrollbar-policy="never" style="flex:0 1 auto">
+                       <div style="width:150px;height:3000px"></div>
+                     </gtk-scrolled-window>
+                   </gtk-box>
+                 </adw-overlay-split-view>`,
+                800,
+                600,
+            );
+            await settle();
+            expect(box('#centerRight').height).toBe(box('#osv').height);
+            expect(box('#editor').width > 0).toBe(true);
+            expect(box('#right').height).toBe(box('#centerRight').height);
+            host.remove();
+        });
+    });
+
+    await describe('<adw-view-stack> page removal', async () => {
+        await it('a child removed from a view stack loses the stack classes', async () => {
+            const { host } = mount('<adw-view-stack id="s"></adw-view-stack><div id="elsewhere"></div>');
+            const stack = host.querySelector('#s') as AdwViewStack;
+            const a = document.createElement('div');
+            const b = document.createElement('div');
+            stack.add(a, 'a');
+            stack.add(b, 'b');
+            expect(a.classList.contains('active-view')).toBe(true);
+            expect(b.hidden).toBe(true);
+
+            stack.removePage('a');
+            expect(a.classList.contains('adw-view-stack-child')).toBe(false);
+            expect(a.classList.contains('active-view')).toBe(false);
+            expect(a.dataset.name).toBe(undefined);
+
+            // A plain DOM reparent is `gtk_widget_unparent` reaching the stack too.
+            host.querySelector('#elsewhere')!.append(b);
+            await settle();
+            expect(b.classList.contains('adw-view-stack-child')).toBe(false);
+            expect(b.hidden).toBe(false);
+            expect(stack.pages.length).toBe(0);
+            host.remove();
+        });
+    });
+};

package/src/compute-expand.ts

@@ -0,0 +1,134 @@
+// compute-expand.ts — `gtk_widget_compute_expand`: does a widget tree rooted here want spare space?
+//
+// GTK does not only read a widget's OWN `hexpand`: a widget that set none expands when one of
+// its children does (gtkwidget.c:8387-8423, `gtk_widget_update_computed_expand`). An AdwBin
+// whose child is an hexpand editor therefore grows in a horizontal box, where the `[hexpand]`
+// rules in `_widget.scss` gave it nothing and the editor came out 0px wide.
+//
+// THREE RULES, all in the C:
+//
+//   · a widget that is not visible never expands (gtkwidget.c:8508-8509);
+//   · an EXPLICIT value wins and stops the walk — `hexpand_set` is checked before the vfunc
+//     runs, so an intermediate `hexpand: false` hides every expanding descendant;
+//   · otherwise only a class with a `compute_expand` vfunc looks at its children at all. The
+//     base GtkWidget has none, so a leaf (a label, a button's icon) never propagates.
+//
+// WHY JS AND NOT `:has()`: a selector cannot say "and no widget between here and there set
+// hexpand" at arbitrary depth, it cannot tell a container with the vfunc from a leaf without
+// one, and a registered subclass (`GObject.registerClass` over AdwBin) is a NEW tag that only
+// the prototype chain links back to its base. So the value is computed here, and the box that
+// needs it writes it as `data-computed-hexpand` / `data-computed-vexpand` on its children
+// (gtk-box.ts) — internal state, never an authored attribute.
+//
+// The DOM has wrapper elements GTK has no widget for (`.adw-overlay-child`, a view stack's
+// page `div`): those are transparent, the walk goes through them to the widgets inside.
+//
+// Reference: refs/gtk/gtk/gtkwidget.c (gtk_widget_compute_expand, update_computed_expand)
+// Reference: refs/gtk/gtk/gtkbox.c:181-194 (every child, OR-ed)
+// Reference: refs/gtk/gtk/gtkstack.c:2342-2373 (every page, visible or not)
+// Reference: refs/gtk/gtk/gtkoverlay.c:292-301 (the main child only)
+// Reference: refs/gtk/gtk/gtkscrolledwindow.c:544-554, gtkviewport.c:211-220 (the child only)
+// Reference: refs/libadwaita/src/adw-widget-utils.c:501-536 (adw_widget_compute_expand)
+// Copyright (c) The GTK Team. LGPLv2.1+. Copyright (c) The libadwaita authors. LGPLv2.1+.
+
+export type ExpandOrientation = 'horizontal' | 'vertical';
+
+/**
+ * Per tag that has a `compute_expand` vfunc: the subtrees of its own that are NOT the children
+ * the vfunc reads, and whether it answers on one axis only. A tag missing here behaves as the
+ * base GtkWidget — it does not propagate.
+ */
+interface ExpandVfunc {
+    readonly skip?: string;
+    readonly horizontalOnly?: boolean;
+}
+
+/** `adw_widget_compute_expand` (adw-widget-utils.c:501), by the class_init that installs it. */
+const ADW_WIDGET: ExpandVfunc = {};
+
+const VFUNCS: ReadonlyMap<string, ExpandVfunc> = new Map<string, ExpandVfunc>([
+    ['gtk-box', {}],
+    ['gtk-stack', {}],
+    // The overlay children are its children too, but `gtk_overlay_compute_expand` reads only `child`.
+    ['gtk-overlay', { skip: '.adw-overlay-layer' }],
+    // The scrollbars are children the vfunc skips; they are leaves, so skipping them is exact.
+    ['gtk-scrolled-window', { skip: 'gtk-scrollbar' }],
+    ['gtk-viewport', {}],
+    ['adw-bin', ADW_WIDGET], // adw-bin.c:108
+    ['adw-bottom-sheet', ADW_WIDGET], // adw-bottom-sheet.c:795
+    ['adw-breakpoint-bin', ADW_WIDGET], // adw-breakpoint-bin.c:623
+    ['adw-clamp', ADW_WIDGET], // adw-clamp.c:174
+    ['adw-clamp-scrollable', ADW_WIDGET], // adw-clamp-scrollable.c:244
+    ['adw-layout-slot', ADW_WIDGET], // adw-layout-slot.c:128
+    ['adw-multi-layout-view', ADW_WIDGET], // adw-multi-layout-view.c:354
+    ['adw-navigation-view', ADW_WIDGET], // adw-navigation-view.c:1900
+    ['adw-overlay-split-view', ADW_WIDGET], // adw-overlay-split-view.c:909
+    ['adw-status-page', ADW_WIDGET], // adw-status-page.c:213
+    ['adw-toast-overlay', ADW_WIDGET], // adw-toast-overlay.c:543
+    ['adw-toolbar-view', ADW_WIDGET], // adw-toolbar-view.c:525
+    ['adw-view-stack', ADW_WIDGET], // adw-view-stack.c:1520
+    ['adw-header-bar', { horizontalOnly: true }], // adw-header-bar.c:853
+]);
+
+const ATTRIBUTE: Record<ExpandOrientation, string> = { horizontal: 'hexpand', vertical: 'vexpand' };
+
+/** The base tag whose vfunc `el` inherits — its own tag, or the one a registered subclass extends. */
+function vfuncOf(el: Element): ExpandVfunc | undefined {
+    const own = VFUNCS.get(el.localName);
+    if (own !== undefined) return own;
+    if (typeof customElements.getName !== 'function') return undefined;
+    for (let proto = Object.getPrototypeOf(el); proto && proto !== HTMLElement.prototype;) {
+        const tag = customElements.getName(proto.constructor as CustomElementConstructor);
+        const found = tag === null ? undefined : VFUNCS.get(tag);
+        if (found !== undefined) return found;
+        proto = Object.getPrototypeOf(proto);
+    }
+    return undefined;
+}
+
+/**
+ * A GTK widget, as opposed to a wrapper this renderer added: every element is a custom element,
+ * and a plain element an author gave an expand value stands in for one.
+ */
+function isWidget(el: Element): boolean {
+    return el.localName.includes('-') || el.hasAttribute('hexpand') || el.hasAttribute('vexpand');
+}
+
+/**
+ * A view stack writes `hidden` on every page but the selected one. That is
+ * `gtk_widget_set_child_visible` (adw-view-stack.c:1016-1023), not `GtkWidget:visible`, and
+ * `gtk_widget_compute_expand` reads only the latter — so a background page still counts.
+ */
+function isStackPage(el: Element): boolean {
+    return el.classList.contains('adw-view-stack-child') && el.parentElement?.localName === 'adw-view-stack';
+}
+
+/** The value of an authored `hexpand` / `vexpand`: `""` is true, `"false"` false, absent unset. */
+export function explicitExpand(el: Element, orientation: ExpandOrientation): boolean | undefined {
+    const raw = el.getAttribute(ATTRIBUTE[orientation]);
+    return raw === null ? undefined : raw !== 'false';
+}
+
+/** `gtk_widget_compute_expand (el, orientation)`. */
+export function computeExpand(el: Element, orientation: ExpandOrientation): boolean {
+    if (el.hasAttribute('hidden') && !isStackPage(el)) return false;
+    const explicit = explicitExpand(el, orientation);
+    if (explicit !== undefined) return explicit;
+    const vfunc = vfuncOf(el);
+    if (vfunc === undefined) return false;
+    if (vfunc.horizontalOnly && orientation === 'vertical') return false;
+    return anyChildExpands(el, orientation, vfunc.skip);
+}
+
+/** The OR over the widget children of `parent`, reached through any wrapper that is not one. */
+function anyChildExpands(parent: Element, orientation: ExpandOrientation, skip: string | undefined): boolean {
+    for (const child of parent.children) {
+        if (skip !== undefined && child.matches(skip)) continue;
+        if (isWidget(child)) {
+            if (computeExpand(child, orientation)) return true;
+        } else if (anyChildExpands(child, orientation, undefined)) {
+            return true;
+        }
+    }
+    return false;
+}

package/src/construct-vectors.spec.ts

@@ -106,6 +106,13 @@ function observe(vector: ConstructVector): unknown {
     }
     const { root, unmount } = mountSharedTree(vector.tree);
     try {
+        if (vector.kind === 'accessibility') {
+            // Read off the inner `<button>`, the one that carries the role and is announced.
+            const control = (root.querySelector('#described') as unknown as { button: HTMLButtonElement }).button;
+            return [
+                { label: control.getAttribute('aria-label'), description: control.getAttribute('aria-description') },
+            ];
+        }
         if (vector.kind === 'strings') {
             return [...root.querySelectorAll('option, .adw-drop-down-item-label')].map((node) => node.textContent);
         }
@@ -152,7 +159,9 @@ export const AdwConstructVectorsTest = async () => {
                 children: [{ tag: 'GtkButton', signals: [signal] }],
             });
             const scope = { onX: () => {} };
-            expect(() => mountSharedTree(on({ name: 'map', handler: 'onX' }), { scope })).toThrow("no signal 'map'");
+            expect(() => mountSharedTree(on({ name: 'toggled', handler: 'onX' }), { scope })).toThrow(
+                "no signal 'toggled'",
+            );
             expect(() => mountSharedTree(on({ name: 'clicked', handler: 'onX', flags: ['after'] }), { scope })).toThrow(
                 'plain handlers only',
             );
@@ -376,6 +385,42 @@ export const AdwConstructVectorsTest = async () => {
         await it('refuses a breakpoint setter that names a sibling the tree does not carry', () => {
             expect(() => buildWithSiblings({ ...vector('sibling-object'), siblings: [] })).toThrow("id 'beside'");
         });
+        await it('names a check button on its input, and lets an authored name beat the icon fallback', () => {
+            const { root, unmount } = mountSharedTree({
+                tag: 'GtkBox',
+                children: [
+                    { tag: 'GtkCheckButton', id: 'check', accessibility: { label: { value: 'Dark' } } },
+                    {
+                        tag: 'GtkButton',
+                        id: 'icon',
+                        props: { 'icon-name': 'edit-copy-symbolic', 'tooltip-text': 'Copy' },
+                        accessibility: { label: { value: 'Copy the link' } },
+                    },
+                ],
+            });
+            try {
+                const check = root.querySelector('#check')!;
+                const input = check.querySelector('.adw-check-input')!;
+                expect(input.getAttribute('aria-label')).toBe('Dark');
+                expect(input.hasAttribute('aria-description')).toBe(false);
+                check.removeAttribute('aria-label');
+                expect(input.hasAttribute('aria-label')).toBe(false);
+                const icon = root.querySelector('#icon') as unknown as HTMLElement & { button: HTMLButtonElement };
+                expect(icon.button.getAttribute('aria-label')).toBe('Copy the link');
+                icon.removeAttribute('aria-label');
+                expect(icon.button.getAttribute('aria-label')).toBe('Copy');
+            } finally {
+                unmount();
+            }
+        });
+        await it('refuses an accessibility name it has no door for, naming it', () => {
+            const tree: SharedTreeNode = {
+                tag: 'GtkBox',
+                children: [{ tag: 'GtkCheckButton', accessibility: { checked: { value: true } } }],
+            };
+            expect(() => buildSharedTree(tree)).toThrow("'checked'");
+            expect(() => mountSharedTree(tree)).toThrow('cannot be rendered by adwaita-web');
+        });
         await it('does not read a registered name for a node that is not extern', () => {
             const el = buildSharedTree({ tag: 'GtkBox', children: [{ tag: 'GtkLabel' }] });
             expect(el.children[0]!.localName).toBe('gtk-label');