react-x11 2.15.2 → 2.16.0

package/src/nodes/scrollable.js

@@ -59,6 +59,17 @@ function replayHeld({ base, steps }, max) {
 // walked per node per hit test.
 const EMPTY_SCROLLBARS = Object.freeze([]);
 
+/** Do two answers from `_scrollbar` paint the same thumb? Neither painting
+ *  one counts. */
+const sameThumb = (a, b) =>
+  a === b ||
+  (a !== undefined &&
+    b !== undefined &&
+    a.x === b.x &&
+    a.y === b.y &&
+    a.width === b.width &&
+    a.height === b.height);
+
 /**
  * Scrolling, as a style rather than as a species of node.
  *
@@ -177,6 +188,9 @@ export const Scrollable = (Base) =>
         this._childOrigin != null &&
         !this._scrollMeasureDirty &&
         !this.yoga.hasNewLayout();
+      // The thumbs as they stand, for a bounded frame to hold the measure
+      // below against (`_claimThumbs`)
+      const thumbsWere = !clean && layoutDiff.sink ? this._scrollbars() : null;
       if (!clean) {
         const size = this.measureScrollContent();
         if (!Number.isFinite(size?.width) || !Number.isFinite(size?.height)) {
@@ -208,8 +222,13 @@ export const Scrollable = (Base) =>
       // once and scrollIntoView waits for the pass.
       this._resolveScrollTo();
       this._resolveScrollIntoView();
+      const askedX = this.scrollX;
+      const askedY = this.scrollY;
       this.scrollY = clampScroll(this.scrollY, this._maxScroll('y'));
       this.scrollX = clampScroll(this.scrollX, this._maxScroll('x'));
+      // Of those three moves the clamp's is the one no call claimed when it
+      // was asked for — the diff below claims it
+      const clamped = this.scrollX !== askedX || this.scrollY !== askedY;
       this._reportViewport();
       this._reportScrollTo(from);
       // `scrollX` is how far the content has moved **from its start**, which
@@ -271,14 +290,22 @@ export const Scrollable = (Base) =>
             }
           };
           layoutDiff.shift = { x: ox - wasOrigin.x, y: oy - wasOrigin.y };
-        } else if (shifted) {
-          layoutDiff.sink = null;
         } else {
           const vp = insetRect(this.abs, -DAMAGE_SLOP);
-          layoutDiff.sink = (rect) => {
-            const clipped = intersectRects(rect, vp);
-            if (clipped) outer(clipped);
-          };
+          if (shifted) {
+            layoutDiff.sink = null;
+            // …which holds for a scroll's shift and not for the clamp's: the
+            // content shrank, or the viewport grew, under the offset — a row
+            // collapsing at the end of a list scrolled to its end — and
+            // nothing claimed the viewport every child just moved in.
+            if (clamped) outer(vp);
+          } else {
+            layoutDiff.sink = (rect) => {
+              const clipped = intersectRects(rect, vp);
+              if (clipped) outer(clipped);
+            };
+          }
+          this._claimThumbs(thumbsWere, outer);
         }
       }
       try {
@@ -818,6 +845,26 @@ export const Scrollable = (Base) =>
       return [this._scrollbar('y'), this._scrollbar('x')].filter(Boolean);
     }
 
+    /**
+     * A bounded layout pass's claim for the thumbs it changed, where each
+     * was and where it is. The pane paints them, not a node with a rect of
+     * its own, so content growing or shrinking under a pane that stays put
+     * slides a thumb or resizes it and the layout diff sees nothing move.
+     * `was` is `_scrollbars()` from before the pass measured the content.
+     */
+    _claimThumbs(was, sink) {
+      const now = this._scrollbars();
+      for (const axis of ['y', 'x']) {
+        const before = was.find((bar) => bar.axis === axis);
+        const after = now.find((bar) => bar.axis === axis);
+        if (sameThumb(before, after)) continue;
+        // a pixel of slop for the rounded corners' antialiasing, as the
+        // blit's own thumb repair takes
+        if (before) sink(insetRect(before, -1));
+        if (after) sink(insetRect(after, -1));
+      }
+    }
+
     /**
      * The bar belongs to the scroller, not to the content under it — the same
      * rule a browser applies. Without this a press on the thumb would be

package/src/nodes/text.js

@@ -338,6 +338,8 @@ export class TextNode extends Node {
           variations: style.variations,
           textRendering: style.textRendering,
           color: style.color,
+          letterSpacing: style.letterSpacing,
+          features: style.features,
         });
       } else if (child.kind === 'text') {
         child.collectSpans(out);

package/src/nodes/textarea.js

@@ -137,7 +137,7 @@ export class TextAreaNode extends TextInputNode {
       width === undefined || direction !== 'rtl'
         ? width
         : Math.max(0, width - CARET_RESERVE * this.scale);
-    const key = `${width}|${color}|${shown}|${s.family}|${s.size}|${s.weight}|${s.style}|${direction}|${align}`;
+    const key = `${width}|${color}|${shown}|${s.family}|${s.size}|${s.weight}|${s.style}|${direction}|${align}|${s.letterSpacing}|${JSON.stringify(s.features ?? null)}`;
     if (this._valueLayoutKey !== key) {
       this._valueLayoutKey = key;
       this._valueLayoutCache = fonts.layout([{ text: shown, ...s, color }], s, {

package/src/nodes/textinput.js

@@ -302,7 +302,7 @@ export class TextInputNode extends Node {
     const text = this._displayValue();
     const s = this.resolvedTextStyle();
     const direction = this.direction;
-    const key = `${text}|${s.family}|${s.size}|${s.weight}|${s.style}|${direction}`;
+    const key = `${text}|${s.family}|${s.size}|${s.weight}|${s.style}|${direction}|${s.letterSpacing}|${JSON.stringify(s.features ?? null)}`;
     if (this._valueLayoutKey !== key) {
       this._valueLayoutKey = key;
       this._valueLayoutCache = fonts.layout(text, s, { direction });

package/src/nodes/window/anchoring.js

@@ -1,7 +1,7 @@
 // A window anchored to a rect in another (#255, #280): where it goes, and
 // following the anchor as it moves.
 
-import { anchorOffscreen, anchorRect } from '../../anchor.js';
+import { anchorOffscreen, anchorRect, anchorScreenRect } from '../../anchor.js';
 
 /** Anchoring, installed onto `WindowNode.prototype` by window.js. */
 export class WindowAnchoring {
@@ -32,18 +32,33 @@ export class WindowAnchoring {
    *  anchor to yet — a ref whose node has not been laid out. */
   _anchorPlacement(size) {
     const anchor = this.props.anchor;
-    const node = this._anchorTarget(anchor?.to);
-    if (!node) return null;
+    if (!anchor) return null;
     // `anchorRect` is public API and speaks logical pixels on both sides;
     // this caller's `size` came from `_measure` (device) and its result is
     // headed for CreateWindow (device), so both convert here.
     const s = this.scale;
-    const rect = anchorRect(node, {
-      ...anchor,
-      alignTo: this._anchorTarget(anchor.alignTo) ?? undefined,
-      width: size.width / s,
-      height: size.height / s,
-    });
+    let rect;
+    if (anchor.rect) {
+      // A rect on the screen with no node behind it — the tray item a click
+      // reported. The popup's own scale and direction stand in for the
+      // node's.
+      rect = anchorScreenRect(this.app, anchor.rect, {
+        ...anchor,
+        scale: s,
+        direction: anchor.direction ?? this.direction,
+        width: size.width / s,
+        height: size.height / s,
+      });
+    } else {
+      const node = this._anchorTarget(anchor.to);
+      if (!node) return null;
+      rect = anchorRect(node, {
+        ...anchor,
+        alignTo: this._anchorTarget(anchor.alignTo) ?? undefined,
+        width: size.width / s,
+        height: size.height / s,
+      });
+    }
     if (!rect || s === 1) return rect;
     return {
       ...rect,
@@ -76,13 +91,7 @@ export class WindowAnchoring {
    */
   _followAnchor(size = this._requestedSize) {
     if (this.destroyed || !this.window || !this.props.anchor) return;
-    const node = this._anchorTarget(this.props.anchor.to);
-    // A ref that has not attached yet counts as gone, and for the same
-    // reason: there is nowhere for the popup to be. Refs attach in the
-    // commit phase a popup realizes in, so one written *above* its own
-    // trigger in the JSX gets a frame of this — and waiting it out is
-    // better than a frame in the corner of the screen.
-    const lost = !node || anchorOffscreen(node, this.props.anchor.at);
+    const lost = this._anchorGone();
     if (lost !== Boolean(this._anchorLost)) {
       this._anchorLost = lost;
       // The grab goes with it and comes back with it. X releases a pointer
@@ -93,6 +102,7 @@ export class WindowAnchoring {
       // keeps it beside the map on every route back to the screen.
       if (lost) {
         if (this.props.grab) this.window.ungrabPointer?.();
+        if (this.props.grabKeyboard) this.window.ungrabKeyboard?.();
         this.window.unmap?.();
       } else {
         this._mapNow();
@@ -110,14 +120,31 @@ export class WindowAnchoring {
     }
   }
 
+  /**
+   * Whether there is nothing for this window to point at: the anchor's node
+   * has scrolled out of view, or is a ref that has not attached yet — which
+   * counts as gone for the same reason, since there is nowhere for the popup
+   * to be. Refs attach in the commit phase a popup realizes in, so one
+   * written *above* its own trigger in the JSX gets a frame of this, and
+   * waiting it out is better than a frame in the corner of the screen. A
+   * rect on the screen is never gone.
+   */
+  _anchorGone() {
+    const anchor = this.props.anchor;
+    if (anchor.rect) return false;
+    const node = this._anchorTarget(anchor.to);
+    return !node || anchorOffscreen(node, anchor.at);
+  }
+
   /**
    * Subscribe to whatever can move the anchor. On the **owner's** window,
    * not on this one: what moves is the trigger, and this window's own
-   * layout passes say nothing about where it sits on screen.
+   * layout passes say nothing about where it sits on screen. A rect on the
+   * screen moves only when the app hands a new one, which is a commit.
    */
   _watchAnchor() {
     this._unwatchAnchor();
-    if (!this.props.anchor) return;
+    if (!this.props.anchor || this.props.anchor.rect) return;
     // The anchor's own window where the ref has attached, and the window
     // this popup was *written into* otherwise — which is the same one in
     // every case that matters, and is what makes an unattached ref a

package/src/nodes/window/flush.js

@@ -75,8 +75,8 @@ export class WindowFlush {
 
   /**
    * The backend's half of a frame's cost, where it has one: the Cocoa
-   * present — the swapchain flip and its catch-up copy — runs after the
-   * flush returns, on the same thread, and is part of what the frame cost
+   * present — the swapchain flip — runs after the flush returns, on the
+   * same thread, and is part of what the frame cost
    * (src/cocoa/window.js reports it). An ntk window's present is one
    * request, and reports nothing.
    */
@@ -335,11 +335,12 @@ export class WindowFlush {
     // after every region: an entry drawn in one damage rect must not be
     // evicted before the next rect of the same frame asks for it
     this._paintCache?.endFrame();
-    // The swapchain seam: a backend presenting from double buffers has to
+    // The swapchain seam: a backend presenting from a swapchain has to
     // know exactly which pixels each flush touched — several flushes can
     // land between two presents, so reading only the last frame's rects
-    // would leave the flipped-in back buffer stale where an earlier flush
-    // painted. Feature-detected like presentFrame; null means everything.
+    // would leave the next buffer it draws into stale where an earlier
+    // flush painted. Feature-detected like presentFrame; null means
+    // everything.
     this.window.noteFrameDamage?.(damage ?? null);
     if (frameHook) {
       frameHook({

package/src/nodes/window/popup.js

@@ -30,15 +30,25 @@ export class PopupNode extends WindowNode {
    * from realize looked equivalent until `hidden` existed, and would have
    * left a revealed menu holding no grab: open forever behind the first
    * outside click, with nothing saying why.
+   *
+   * `grabKeyboard` is the keyboard's half, taken and dropped with the map
+   * the same way: keys come to this popup while it is up, whatever holds
+   * the focus — what a popover a tray click opened needs, since a menu-bar
+   * app has no window of its own for the keys to reach. On Cocoa it is a
+   * property of the window rather than a grab, and was decided when the
+   * window was made (src/cocoa/window.js); on Wayland a grabbing popup has
+   * the keyboard already.
    */
   _mapNow() {
     if (!super._mapNow()) return false;
     if (this.props.grab) this.window.grabPointer?.({}, () => {});
+    if (this.props.grabKeyboard) this.window.grabKeyboard?.({}, () => {});
     return true;
   }
 
   destroySubtree() {
     if (this.props.grab) this.window?.ungrabPointer?.();
+    if (this.props.grabKeyboard) this.window?.ungrabKeyboard?.();
     super.destroySubtree();
   }
 

package/src/nodes/window/size.js

@@ -398,6 +398,18 @@ export class WindowSize {
       return { width: props.width, height: props.height, hints };
     }
 
+    // **The floors on hand are the last frame's content.** A node whose
+    // content shrank still carries the minimum the old content needed — the
+    // automatic minimum size this window wrote into yoga — and a natural-size
+    // pass would read it back as content the tree cannot give up, so an
+    // `'auto'` window could only ever grow (#586). The stale ones come off
+    // first, which is exactly what `_applyContentFloors` does ahead of its
+    // own measurement: a node whose extent is stale gets the minimum its
+    // style asks for, and a node whose extent still stands keeps the floor it
+    // earned. The pass after this one measures and writes them again.
+    this._writeFloors('width');
+    this._writeFloors('height');
+
     const dir = this._rootDirection;
     const measure = () => {
       this._sweepLayoutHosts();
@@ -525,9 +537,14 @@ export class WindowSize {
     );
     if (!tracking && !bounded) return;
     const asked = this._requestedSize;
-    const next = this._measure();
-    this._sendSizeHints(props, next.hints);
+    const measured = this._measure();
+    this._sendSizeHints(props, measured.hints);
     if (!tracking) return;
+    // The size the backend will really give, compared against the last one
+    // for the same reason it is recorded: two natural sizes a third of a
+    // point apart are one window size, and asking again every frame for a
+    // size that cannot change is a configure per frame.
+    const next = this._snapSize(measured);
     if (asked && next.width === asked.width && next.height === asked.height) {
       return;
     }
@@ -553,6 +570,27 @@ export class WindowSize {
     this._followAnchor({ width: next.width, height: next.height });
   }
 
+  /**
+   * The size the backend will really take for one this window asks for.
+   *
+   * A window is not always free to be exactly the size its content wants:
+   * Cocoa puts one on the **point** grid, so a natural height of 201 device
+   * pixels at scale 2 is a window 202 tall. Every record of
+   * `_requestedSize` goes through here, because that record is what the
+   * resize echo is compared against — and an echo that does not match it
+   * reads as the user or the window manager taking the size over, which
+   * ends an `'auto'` window's tracking for good (#586). A backend that
+   * takes any size, X11's, answers with the size it was handed.
+   */
+  _snapSize(size) {
+    return (
+      this.window?.snapSize?.(size.width, size.height) ?? {
+        width: size.width,
+        height: size.height,
+      }
+    );
+  }
+
   /** One layout pass at the window's size, with the content floors it
    *  needs: fresh ones when something changed them, the ones in hand during
    *  a live resize, none when nothing moved them. */

package/src/nodes/window/window.js

@@ -11,7 +11,6 @@ import { forgetTopLevel, hasDropProps } from '../../dnd.js';
 import { clearPendingFrame } from '../../frames.js';
 import { FramePacer } from '../../pacing.js';
 import { endWindowState } from '../../windowstate.js';
-import { anchorOffscreen } from '../../anchor.js';
 import { topLevelWindows } from '../../windowid.js';
 import { WindowAnimation } from '../animation.js';
 import { WindowCascade } from '../cascade.js';
@@ -153,6 +152,12 @@ export class WindowNode extends Scrollable(Node) {
     // one flag everything reads (`_mapNow`, painting, a11y, anchoring).
     this._reactHidden = false;
     this.hidden = Boolean(props.hidden);
+    // A `<ThemeProvider>` this window takes its palette from other than its
+    // parent — one written above it at the root, or one directly inside the
+    // window it is nested in, which handed it on — and a third writer of
+    // `hidden`, since React hides the provider's node rather than the window
+    // under it (nodes/scope.js). Null everywhere else.
+    this._scope = null;
     // whether this is the tree's own top-level window rather than a nested
     // one or a popup — decided by realize(), read when it maps
     this._topLevel = false;
@@ -360,6 +365,11 @@ export class WindowNode extends Scrollable(Node) {
     attributes.eventMask = (attributes.eventMask ?? 0) | WINDOW_EVENT_MASK;
     const wnd = this.app.createWindow(attributes);
     this.window = wnd;
+    // What the window actually took, which is not always what was asked
+    // for: Cocoa puts a window on the point grid. The record is what the
+    // resize echo is compared against, so it has to be the size the echo
+    // will carry (#586, `_snapSize`).
+    this._requestedSize = { width: wnd.width, height: wnd.height };
     // Now that the visual is known: settle the capabilities, re-resolve any
     // `@supports` block against them, and start following the compositor.
     // Before the first paint, and before children realize against it.
@@ -422,8 +432,7 @@ export class WindowNode extends Scrollable(Node) {
     // and vanish.
     if (this.props.anchor) {
       this._watchAnchor();
-      const node = this._anchorTarget(this.props.anchor.to);
-      this._anchorLost = !node || anchorOffscreen(node, this.props.anchor.at);
+      this._anchorLost = this._anchorGone();
     }
     // Queued rather than mapped, when there is a commit to queue behind:
     // React hides a subtree only once it has inserted it (beginWindowMaps).
@@ -747,7 +756,7 @@ export class WindowNode extends Scrollable(Node) {
       // The flag `realize()`'s map will read — set directly, since there is
       // nothing on screen yet for the notification half of `_applyHidden`
       // to be about.
-      this.hidden = this._reactHidden || Boolean(newProps.hidden);
+      this.hidden = this._hiddenByReact() || Boolean(newProps.hidden);
       return;
     }
 
@@ -804,10 +813,10 @@ export class WindowNode extends Scrollable(Node) {
     const geo = scaleWindowGeometry(newProps, this.scale);
     if (sizeChanged) {
       this._userSized = false;
-      this._requestedSize = {
+      this._requestedSize = this._snapSize({
         width: isAutoSize(geo.width) ? wnd.width : geo.width,
         height: isAutoSize(geo.height) ? wnd.height : geo.height,
-      };
+      });
     }
     if (geometryChanged) {
       if (typeof wnd.setState === 'function') {
@@ -821,8 +830,15 @@ export class WindowNode extends Scrollable(Node) {
           height: isAutoSize(geo.height) ? undefined : geo.height,
         });
       } else {
-        if (sizeChanged && !isAutoSize(geo.width) && !isAutoSize(geo.height)) {
-          wnd.resize?.(geo.width, geo.height);
+        // A window with no `setState` — Cocoa's — is resized whole or not at
+        // all, so an axis handed back to `'auto'` goes as the size recorded
+        // for it above: the one the window has, which this change leaves
+        // alone. Skipping the call for one `'auto'` axis dropped the other
+        // axis's change on the floor: `_refit()` then found the record
+        // already matching and sent nothing either (#585). With both axes
+        // `'auto'` there is no size to send, and `_refit()` works one out.
+        if (sizeChanged && !(isAutoSize(geo.width) && isAutoSize(geo.height))) {
+          wnd.resize?.(this._requestedSize.width, this._requestedSize.height);
         }
         if (movedByProps) {
           wnd.move?.(geo.x, geo.y);
@@ -887,14 +903,25 @@ export class WindowNode extends Scrollable(Node) {
   }
 
   /**
-   * Re-derive `this.hidden` from its two writers — the reconciler's flag and
-   * the `hidden` prop — and make the window agree. Either saying "hidden"
-   * wins, so a `<Suspense>` revealing its content does not map a window the
-   * app is holding off screen, and clearing the prop does not map one React
-   * still hides.
+   * Whether React is hiding this window: its own flag, or one on the theme
+   * scope it is written under — a `<Suspense>` around a `<ThemeProvider>` at
+   * the root hides the provider's node, the topmost host instance there.
+   * Kept apart from the window's own flag so an inner boundary that still
+   * hides the window is not overruled when an outer one reveals the scope.
+   */
+  _hiddenByReact() {
+    return this._reactHidden || (this._scope?._hiddenByReact() ?? false);
+  }
+
+  /**
+   * Re-derive `this.hidden` from its writers — React, through
+   * `_hiddenByReact`, and the `hidden` prop — and make the window agree.
+   * Either saying "hidden" wins, so a `<Suspense>` revealing its content does
+   * not map a window the app is holding off screen, and clearing the prop
+   * does not map one React still hides.
    */
   _applyHidden() {
-    const hidden = this._reactHidden || Boolean(this.props.hidden);
+    const hidden = this._hiddenByReact() || Boolean(this.props.hidden);
     if (hidden === this.hidden) return;
     this.hidden = hidden;
     // An unmapped window draws nothing, so a loop inside one is frames

package/src/registry.js

@@ -28,6 +28,7 @@ import {
   DRAWN_KINDS,
   CUSTOM_SEMANTIC_NAMES,
   CUSTOM_SELF_DAMAGED,
+  THEME_SCOPE,
 } from './nodes/kinds.js';
 import { Node } from './nodes/node.js';
 import { markLayoutsHotReloadSession } from './layouts.js';
@@ -35,7 +36,7 @@ import { markLayoutsHotReloadSession } from './layouts.js';
 /** kind -> definition. Insertion-ordered, which is the order errors list. */
 const registry = new Map();
 
-const RESERVED = new Set(['textchunk', 'svgchild']);
+const RESERVED = new Set(['textchunk', 'svgchild', THEME_SCOPE]);
 
 // The re-registration policy for hot reload (issue #318). Module-scope
 // registration is the pattern the docs recommend and tree-shaking forces on