@gjsify/adwaita-web 0.64.11 → 0.64.12-next.280

package/src/namespace/graphene.ts

@@ -0,0 +1,26 @@
+// The Graphene half of `@gjsify/adwaita-web`'s vocabulary: `Graphene.Point`, the type
+// `Gtk.Widget.compute_point` takes and returns. The behaviour lives once in `@gjsify/adwaita-core`
+// (`graphene.ts`).
+//
+// `compute_point` is installed on `WidgetElement` HERE rather than in `widget-element.ts`: that file
+// is the helper every element sits one hop below, and a value import of core there would mark every
+// element core-backed. Loading this namespace is what puts the method on a built-in.
+//
+// A TRUE SUBSET: everything else in Graphene is absent, and the `gi://Graphene` arm refuses it by name.
+
+import { computePoint, Point } from '@gjsify/adwaita-core';
+
+import { WidgetElement } from '../widget-element.js';
+
+declare module '../widget-element.js' {
+    interface WidgetElement {
+        /** `gtk_widget_compute_point`: `[false, (0, 0)]` when the two share no tree. */
+        compute_point(target: WidgetElement, point: Point): [boolean, Point];
+    }
+}
+
+WidgetElement.prototype.compute_point = function (this: WidgetElement, target, point) {
+    return computePoint(this, target, point);
+};
+
+export { Point };

package/src/split-views.spec.ts

@@ -110,6 +110,17 @@ export const AdwSplitViewsTest = async () => {
             host.remove();
         });
 
+        await it('show_sidebar / get_show_sidebar / set_show_sidebar mirror showSidebar', () => {
+            const { view, host } = mount();
+            expect(view.get_show_sidebar()).toBe(true);
+            view.set_show_sidebar(false);
+            expect(view.showSidebar).toBe(false);
+            expect(view.show_sidebar).toBe(false);
+            view.show_sidebar = true;
+            expect(view.showSidebar).toBe(true);
+            host.remove();
+        });
+
         await it('round-trips the property setter through the attribute', () => {
             const { view, host } = mount();
             view.showSidebar = false;

package/src/style-manager.spec.ts

@@ -39,6 +39,20 @@ export const StyleManagerTest = async () => {
                     globalThis.matchMedia = real;
                 }
             });
+            await it('high_contrast follows prefers-contrast: more', () => {
+                const real = globalThis.matchMedia;
+                try {
+                    globalThis.matchMedia = ((query: string) => ({
+                        matches: query.includes('prefers-contrast'),
+                        media: query,
+                    })) as never;
+                    expect(webStyleSource.highContrast?.()).toBe(true);
+                    globalThis.matchMedia = ((query: string) => ({ matches: false, media: query })) as never;
+                    expect(webStyleSource.highContrast?.()).toBe(false);
+                } finally {
+                    globalThis.matchMedia = real;
+                }
+            });
             await it('has a vector row for every vector', () => {
                 expect(STYLE_MANAGER_VECTORS.length > 0).toBe(true);
             });

package/src/style-manager.ts

@@ -14,14 +14,19 @@ export const webStyleSource: StyleSource = {
     subscribe(changed) {
         if (typeof document === 'undefined') return () => {};
         const media = globalThis.matchMedia?.('(prefers-color-scheme: dark)');
+        const contrast = globalThis.matchMedia?.('(prefers-contrast: more)');
         media?.addEventListener('change', changed);
+        contrast?.addEventListener('change', changed);
         const observer = new MutationObserver(changed);
         observer.observe(document.documentElement, { attributes: true, attributeFilter: ['class'] });
         return () => {
             media?.removeEventListener('change', changed);
+            contrast?.removeEventListener('change', changed);
             observer.disconnect();
         };
     },
+    highContrast: () => globalThis.matchMedia?.('(prefers-contrast: more)').matches === true,
+    // A page cannot read the desktop's accent (CSS `AccentColor` is uneven, see ADR 0078): no system accent.
     supportsColorSchemes() {
         const matches = (query: string) => globalThis.matchMedia?.(query).matches === true;
         return matches('(prefers-color-scheme: dark)') || matches('(prefers-color-scheme: light)');

package/src/view-stack.spec.ts

@@ -260,4 +260,45 @@ export const AdwViewStackTest = async () => {
             host.remove();
         });
     });
+
+    await describe('<adw-view-stack> GIR method names', async () => {
+        await it('add_titled_with_icon, add_titled and add_named add pages in order', () => {
+            const { stack, host } = mountStack([]);
+            const [a, b, c] = [1, 2, 3].map(() => document.createElement('div'));
+            stack.add_titled_with_icon(a!, 'a', 'A', 'folder-symbolic');
+            stack.add_titled(b!, 'b', 'B');
+            stack.add_named(c!, 'c');
+            expect(stack.pages.map((page) => page.name)).toStrictEqual(['a', 'b', 'c']);
+            expect(stack.pages[0]!.icon).toBe('folder');
+            expect(stack.pages[1]!.title).toBe('B');
+            expect(stack.get_visible_child_name()).toBe('a');
+            host.remove();
+        });
+
+        await it('remove(child) takes the CHILD, and no argument is still ChildNode.remove()', () => {
+            const { stack, host } = mountStack([]);
+            const [a, b] = [1, 2].map(() => document.createElement('div'));
+            stack.add_titled(a!, 'a', 'A');
+            stack.add_titled(b!, 'b', 'B');
+            stack.remove(b!);
+            expect(stack.pages.map((page) => page.name)).toStrictEqual(['a']);
+            expect(b!.parentElement).toBe(null);
+            stack.remove();
+            expect(stack.parentElement).toBe(null);
+            host.remove();
+        });
+
+        await it('get/set_visible_child(_name) select, and get_visible_child_name is null for none', () => {
+            const { stack, host } = mountStack([]);
+            expect(stack.get_visible_child_name()).toBe(null);
+            const [a, b] = [1, 2].map(() => document.createElement('div'));
+            stack.add_titled(a!, 'a', 'A');
+            stack.add_titled(b!, 'b', 'B');
+            stack.set_visible_child_name('b');
+            expect(stack.get_visible_child()).toBe(b!);
+            stack.set_visible_child(a!);
+            expect(stack.get_visible_child_name()).toBe('a');
+            host.remove();
+        });
+    });
 };

package/src/widget-element.ts

@@ -16,7 +16,7 @@
 // Reference: GTK gtk/gtkwidget.c (gtk_widget_set_visible, gtk_widget_set_tooltip_text)
 // Copyright (c) GNOME contributors (GTK). LGPLv2.1+.
 
-import { WIDGET_VISIBLE_GETTERS, notifyElement } from './gobject-elements.js';
+import { WIDGET_VISIBLE_GETTERS, installElementApi, markLazyElementApi, notifyElement } from './gobject-elements.js';
 import { dispatchedSignalsOf, type DispatchedSignals } from './signals.js';
 import { isMapped } from './widget-mapping.js';
 
@@ -41,12 +41,64 @@ export class WidgetElement extends HTMLElement {
     set_visible(visible: boolean): void {
         this.visible = visible;
     }
+    /** `gtk_widget_get_first_child`: the first child element, `null` for a leaf. */
+    get_first_child(): Element | null {
+        return this.firstElementChild;
+    }
+    /** `gtk_widget_get_last_child`. */
+    get_last_child(): Element | null {
+        return this.lastElementChild;
+    }
+    /** `gtk_widget_get_next_sibling`. */
+    get_next_sibling(): Element | null {
+        return this.nextElementSibling;
+    }
+    /** `gtk_widget_get_prev_sibling`. */
+    get_prev_sibling(): Element | null {
+        return this.previousElementSibling;
+    }
+    /** `gtk_widget_get_parent`. */
+    get_parent(): Element | null {
+        return this.parentElement;
+    }
+    /** `gtk_widget_get_width`: the layout box in CSS px; 0 until the widget is rendered. */
+    get_width(): number {
+        return this.offsetWidth;
+    }
+    /** `gtk_widget_get_height`: the layout box in CSS px; 0 until the widget is rendered. */
+    get_height(): number {
+        return this.offsetHeight;
+    }
+    /**
+     * The GObject signal API (ADR 0096 § 3), over the events the element declares in `static signals`:
+     * `connect` refuses a signal it does not declare, `disconnect` throws for an id that is not
+     * connected. Each of the four installs the real ones on the instance and repeats itself there
+     * (`installElementApi`), so a bare `document.createElement()` answers like a template's child
+     * and an element nobody connects to pays nothing.
+     */
+    connect(signal: string, handler: (emitter: this, ...args: any[]) => unknown): number {
+        installElementApi(this);
+        return this.connect(signal, handler);
+    }
+    disconnect(id: number): void {
+        installElementApi(this);
+        this.disconnect(id);
+    }
+    emit(signal: string, ...args: unknown[]): void {
+        installElementApi(this);
+        this.emit(signal, ...args);
+    }
+    notify(name: string): void {
+        installElementApi(this);
+        this.notify(name);
+    }
     /** `gtk_widget_get_mapped`: on screen, which is in the document and rendered. */
     get_mapped(): boolean {
         return isMapped(this);
     }
 }
 
+markLazyElementApi(WidgetElement.prototype);
 WIDGET_VISIBLE_GETTERS.add(Object.getOwnPropertyDescriptor(WidgetElement.prototype, 'visible')!.get!);
 
 export class TooltipElement extends WidgetElement {

package/src/widget-members.spec.ts

@@ -3,6 +3,8 @@
 
 import { describe, expect, it } from '@gjsify/unit';
 
+import * as Graphene from './namespace/graphene.js';
+import * as Gtk from './namespace/gtk.js';
 import * as GObject from './namespace/gobject.js';
 import * as Gio from './namespace/gio.js';
 import { writeProp } from './shared-tree-builder.js';
@@ -16,6 +18,9 @@ interface WidgetLike extends HTMLElement {
     get_next_sibling(): Element | null;
     get_prev_sibling(): Element | null;
     get_parent(): Element | null;
+    get_width(): number;
+    get_height(): number;
+    compute_point(target: Element, point: Graphene.Point): [boolean, Graphene.Point];
     insert_action_group(name: string, group: unknown): void;
 }
 
@@ -68,6 +73,21 @@ export const WidgetMembersTest = async () => {
             expect(parent.get_parent()).toBe(null);
         });
 
+        await it('walks the element tree of a built-in widget with the GTK link names', () => {
+            const box = new Gtk.Box() as unknown as WidgetLike;
+            const a = new Gtk.Label() as unknown as WidgetLike;
+            const b = new Gtk.Label() as unknown as WidgetLike;
+            expect(box.get_first_child()).toBe(null);
+            box.append(a, b);
+            expect(box.get_first_child()).toBe(a);
+            expect(box.get_last_child()).toBe(b);
+            expect(a.get_next_sibling()).toBe(b);
+            expect(b.get_prev_sibling()).toBe(a);
+            expect(b.get_next_sibling()).toBe(null);
+            expect(a.get_parent()).toBe(box);
+            expect(box.get_parent()).toBe(null);
+        });
+
         await it('adds, tests and removes a CSS class with the GTK names', () => {
             const widget = make('WidgetMembersCss') as unknown as {
                 add_css_class(c: string): void;
@@ -80,6 +100,81 @@ export const WidgetMembersTest = async () => {
             expect(widget.has_css_class('dim-label')).toBe(false);
         });
 
+        await it('computes a point from the bounding boxes, on a registered class and a built-in element', () => {
+            const placed = <T extends Element>(element: T, left: number, top: number): T => {
+                element.getBoundingClientRect = () => ({ left, top }) as DOMRect;
+                return element;
+            };
+            const scrolled = placed(new Gtk.ScrolledWindow(), 10, 100);
+            const registered = placed(make('WidgetMembersPoint'), 14, 130);
+            const builtIn = placed(new Gtk.Label(), 11, 105);
+            scrolled.append(registered, builtIn);
+            document.body.append(scrolled);
+
+            const [ok, point] = registered.compute_point(scrolled, Graphene.Point.zero());
+            expect(ok).toBe(true);
+            expect(point.x).toBe(4);
+            expect(point.y).toBe(30);
+            const [okBuiltIn, shifted] = builtIn.compute_point(scrolled, new Graphene.Point({ x: 2, y: 3 }));
+            expect(okBuiltIn).toBe(true);
+            expect(shifted.x).toBe(3);
+            expect(shifted.y).toBe(8);
+            scrolled.remove();
+        });
+
+        await it('measures a real layout: size, offset inside a scrolled window, and the offset after scrolling', async () => {
+            const host = document.createElement('div');
+            host.style.width = '200px';
+            host.style.height = '100px';
+            document.body.append(host);
+            const scrolled = new Gtk.ScrolledWindow();
+            scrolled.style.height = '100px';
+            host.append(scrolled);
+            const labels: Gtk.Label[] = [];
+            for (let i = 0; i < 10; i++) {
+                const label = new Gtk.Label();
+                // An empty label has no content for the viewport to overflow, so Firefox does not scroll it.
+                label.setAttribute('label', `Row ${i}`);
+                label.style.height = '40px';
+                scrolled.append(label);
+                labels.push(label);
+            }
+            await new Promise((resolve) => requestAnimationFrame(() => requestAnimationFrame(resolve)));
+
+            expect(scrolled.get_height()).toBe(100);
+            expect(scrolled.get_width()).toBe(200);
+            expect(labels[0].get_height()).toBe(40);
+
+            const label = labels[5];
+            const [ok, before] = label.compute_point(scrolled, Graphene.Point.zero());
+            expect(ok).toBe(true);
+            scrolled.viewport.scrollAxis('vertical', 80);
+            const [okAfter, after] = label.compute_point(scrolled, Graphene.Point.zero());
+            expect(okAfter).toBe(true);
+            expect(before.y - after.y).toBe(80);
+            host.remove();
+        });
+
+        await it('reports 0 for width and height while a widget is not rendered', () => {
+            const loose = new Gtk.Label();
+            expect(loose.get_width()).toBe(0);
+            expect(loose.get_height()).toBe(0);
+            const registered = make('WidgetMembersSize');
+            expect(registered.get_width()).toBe(0);
+            expect(registered.get_height()).toBe(0);
+        });
+
+        await it('computes no point between widgets that share no tree', () => {
+            const attached = make('WidgetMembersPointAttached');
+            const loose = make('WidgetMembersPointLoose');
+            document.body.append(attached);
+            const [ok, point] = loose.compute_point(attached, new Graphene.Point({ x: 5, y: 5 }));
+            expect(ok).toBe(false);
+            expect(point.x).toBe(0);
+            expect(point.y).toBe(0);
+            attached.remove();
+        });
+
         await it('takes an action group and drops it again with null', () => {
             const widget = make('WidgetMembersActions');
             const group = new Gio.SimpleActionGroup();