react-x11 2.47.1 → 2.47.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-x11",
-  "version": "2.47.1",
+  "version": "2.47.3",
   "description": "react renderer with X11 as a target",
   "main": "./src/index.js",
   "files": [

package/src/nodes/window/flush.js

@@ -175,6 +175,11 @@ export class WindowFlush {
       // so a frame whose first pass is the floors' own collects once.
       this._floorsCollectOwed = true;
       this._refit();
+      // An `'auto'` window waiting for the size its content just asked for
+      // lays out when the echo brings it, not at the size it still has
+      // (`_holdForRefit`). Nothing here is cleared, so that frame owes
+      // everything this one did.
+      if (this._refitHolding()) return false;
     }
     const width = this.window.width ?? this._requestedSize?.width ?? 0;
     const height = this.window.height ?? this._requestedSize?.height ?? 0;

package/src/nodes/window/listeners.js

@@ -41,13 +41,16 @@ export class WindowListeners {
       // is theirs. Growing it back under a user who has just made it smaller
       // is the one behaviour worse than not fitting the content.
       //
-      // Checked against `_requestedSize` rather than ntk's `ev.resized`
-      // because our own configures come back as echoes, and every one of
-      // them would otherwise read as the user taking over on the first
-      // re-fit.
-      const asked = this._requestedSize;
-      if (asked && (ev.width !== asked.width || ev.height !== asked.height)) {
-        this._userSized = true;
+      // Checked against the sizes we asked for rather than ntk's
+      // `ev.resized`, because our own configures come back as echoes, and
+      // every one of them would otherwise read as the user taking over on
+      // the first re-fit — and against all of them still in flight, not
+      // only the latest, because a move echo or an earlier re-fit's can land
+      // after the record moved on (#929, `_ownSize`).
+      if (this._requestedSize) {
+        const own = this._ownSize(ev);
+        if (!own) this._userSized = true;
+        this._settleRefitHold(ev, own);
       }
       // Where the window sits on screen decides where popups anchored to it
       // belong — and finding that out is a server round trip

package/src/nodes/window/size.js

@@ -46,6 +46,20 @@ const NO_SCOPED_FLOORS = process.env.REACT_X11_NO_SCOPED_FLOORS === '1';
 // …and for the width pass reading only the extents a floor is written from
 // (`markUnreadLeaves`): with it set, every leaf is shaped at no width again.
 const NO_UNREAD_WIDTHS = process.env.REACT_X11_NO_UNREAD_WIDTHS === '1';
+// How many sizes an `'auto'` window keeps as asked for and not yet echoed
+// (`_askSize`). Echoes come back within a round trip, so a re-fit a frame
+// is a handful at most.
+const SIZES_IN_FLIGHT = 8;
+
+// How long an `'auto'` window's frames wait for the size a re-fit asked for
+// (`_holdForRefit`). A round trip is well under it locally and on a LAN; a
+// slower link runs past it into the frame at the old size, which is the
+// behaviour without the hold. The bound is there for a request answered
+// with no new size at all — a window manager refusing it — where the
+// content would otherwise wait for good.
+const REFIT_HOLD_MS = 150;
+// …and off, for A/B measurement and as first aid.
+const NO_REFIT_HOLD = process.env.REACT_X11_NO_REFIT_HOLD === '1';
 
 /** Take a node's extents off, as `collectFloorStale` does a dirty child's:
  *  both are measured again, and the minimum yoga holds may no longer be
@@ -875,6 +889,20 @@ export class WindowSize {
       // tree holding the max-content one would hand `flush()` a stale
       // arrangement.
       yoga.calculateLayout(width, needH ? undefined : props.height, dir);
+      // **A height floor is a height for a width**, and the ones on hand
+      // were measured at the width the window was last laid out at — which
+      // is not this one whenever the content asked for a new width. A label
+      // that wrapped at the old width carries the two-line floor it earned
+      // there, and read back here it is a window two lines tall at a width
+      // that fits it on one: the window grew, and shrank again a frame
+      // later once the real pass had re-measured (#929). The same probe the
+      // real pass asks (`_applyContentFloors`): whether any leaf's height at
+      // this width differs from the one its floor was taken at, and only
+      // then the measurement and one more pass.
+      if (needH && this._probeHeightFloors().owed) {
+        measuringExactly(() => this._measureHeightFloors(width, false));
+        yoga.calculateLayout(width, undefined, dir);
+      }
       const naturalH = needH
         ? clampExtent(yoga.getComputedHeight(), undefined, availH)
         : undefined;
@@ -995,20 +1023,28 @@ export class WindowSize {
     if (asked && next.width === asked.width && next.height === asked.height) {
       return;
     }
-    this._requestedSize = { width: next.width, height: next.height };
+    this._askSize({ width: next.width, height: next.height });
     // Asked for, not assumed. `window.width` stays what the server last said
-    // until the ConfigureNotify lands, and this frame lays out against that
-    // — the echo brings `needsLayout` and an unbounded repaint with it (see
-    // the 'resize' listener), which is the same one-frame settle a
-    // controlled `width` prop change has always had. Writing the new size
-    // onto the window here would be worse than the wait: ntk allocates the
-    // backing pixmap from the resize event, so a frame painted at a size the
-    // pixmap has not reached yet is a frame clipped to the old one.
+    // until the ConfigureNotify lands — on X11; Cocoa takes a size on the
+    // call — and writing the new size onto the window here would be worse
+    // than waiting: ntk allocates the backing pixmap from the resize event,
+    // so a frame painted at a size the pixmap has not reached yet is a frame
+    // clipped to the old one.
     if (typeof wnd.setState === 'function') {
       wnd.setState({ width: next.width, height: next.height });
     } else {
       wnd.resize?.(next.width, next.height);
     }
+    // …and laying this frame out at the size the window still has would be
+    // worse again: content that changed *because* it needs more room is
+    // content that does not fit the old size — a label one word longer
+    // wraps, and is cut off at the bottom of a window one line tall — and
+    // that frame went up, for a round trip, before the echo laid it out
+    // again (#929). So the frame waits for the echo (`_holdForRefit`); the
+    // old pixels stay up meanwhile, which is the last thing that was right.
+    if (wnd.width !== next.width || wnd.height !== next.height) {
+      this._holdForRefit(next);
+    }
     // A window that grew is a window whose *placement* moved with it, and
     // the anchored ones have to be told: a completion list that gains a row
     // near the bottom of the screen is one that now flips above the caret.
@@ -1038,6 +1074,116 @@ export class WindowSize {
     );
   }
 
+  /**
+   * Hold this window's frames until the backend reports the size `_refit`
+   * just asked for, so the content that asked for it is laid out once, at
+   * that size, and never at the old one. The echo releases the hold (the
+   * 'resize' listener, `_settleRefitHold`), and so does somebody else's size
+   * arriving instead — the user's or a window manager's. A request that is
+   * never answered with a new size is the one case left: a window manager
+   * may refuse it, and its answer then carries the old size, which a move
+   * echo also does. So a timer ends the hold too, and the frame goes up at
+   * whatever size the window has — what every frame did before the hold.
+   */
+  _holdForRefit(size) {
+    if (NO_REFIT_HOLD) return;
+    clearTimeout(this._refitHeld?.timer);
+    const timer = setTimeout(() => {
+      if (this._refitHeld?.timer !== timer) return;
+      this._releaseRefitHold();
+    }, REFIT_HOLD_MS);
+    timer.unref?.();
+    this._refitHeld = { width: size.width, height: size.height, timer };
+  }
+
+  /** Whether this frame waits for the size `_refit` asked for: held, and
+   *  the window not that size yet. */
+  _refitHolding() {
+    const held = this._refitHeld;
+    if (!held) return false;
+    const wnd = this.window;
+    if (wnd && (wnd.width !== held.width || wnd.height !== held.height)) {
+      return true;
+    }
+    this._releaseRefitHold(false);
+    return false;
+  }
+
+  /**
+   * What a resize event does to a hold: the size it was waiting for, or a
+   * size that is not ours (`own` false), ends it. A move echo at the old
+   * size, or the echo of an earlier re-fit still in flight, does not —
+   * those are exactly the frames the hold is there to skip.
+   */
+  _settleRefitHold(ev, own) {
+    const held = this._refitHeld;
+    if (!held) return;
+    if (!own || (ev.width === held.width && ev.height === held.height)) {
+      this._releaseRefitHold();
+    }
+  }
+
+  /** End a hold, and run the frame it held back unless that is the caller's
+   *  own (`schedule` false). */
+  _releaseRefitHold(schedule = true) {
+    const held = this._refitHeld;
+    if (!held) return;
+    clearTimeout(held.timer);
+    this._refitHeld = null;
+    if (schedule && !this.destroyed && this.needsLayout) this._scheduleFrame();
+  }
+
+  /**
+   * Record a size this window has asked the backend for. `_requestedSize`
+   * is the latest, which `_refit()` compares against to ask only once; the
+   * echoes still to come are kept beside it, because every one of them is
+   * ours and none has to be the latest (`_ownSize`).
+   */
+  _askSize(size) {
+    this._requestedSize = size;
+    const flight = (this._sizesInFlight ??= []);
+    flight.push(size);
+    // A backend that never echoes — a mock — would grow this for ever, and
+    // a size asked for this many re-fits ago is not coming back.
+    if (flight.length > SIZES_IN_FLIGHT) flight.shift();
+  }
+
+  /**
+   * Whether a resize event's size is one this window chose, as opposed to
+   * the user or the window manager choosing it — the question that ends an
+   * `'auto'` window's tracking for good. Settles the record either way.
+   *
+   * Not "is it the latest size asked for" (#929). Two kinds of echo are ours
+   * and carry another size. A **move** reports the size the window has, and
+   * when it reached the server before a resize that was already asked for —
+   * a popup re-anchored by the same re-fit, an `x` prop moving with the
+   * content — it lands after the record moved on. And a re-fit asked for
+   * before the last one was answered has its echo arrive with the size it
+   * asked for, not the one asked for since. So an event is ours when its
+   * size is the one the server last reported (nothing was resized at all:
+   * a move, or a request the manager refused), or one still in flight —
+   * which spends it, and every one asked for before it, since the server
+   * answers in order. Anything else is somebody else's size: the user and
+   * a window manager can only ever *change* it.
+   */
+  _ownSize(ev) {
+    const is = (size) =>
+      size && size.width === ev.width && size.height === ev.height;
+    const confirmed = this._confirmedSize;
+    this._confirmedSize = { width: ev.width, height: ev.height };
+    // the confirmed size first: a size that came round again (A → B → A)
+    // is in flight too, and spending it there would spend B with it
+    if (is(confirmed)) return true;
+    const flight = this._sizesInFlight ?? [];
+    const at = flight.findIndex(is);
+    if (at < 0) {
+      flight.length = 0;
+      return false;
+    }
+    flight.splice(0, at + 1);
+    return true;
+  }
+
   /** 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

@@ -271,6 +271,13 @@ export class WindowNode extends Scrollable(Node) {
     // the only thing that ever does is the user dragging an edge.
     this._requestedSize = null;
     this._userSized = false;
+    // what the server last reported, and the sizes asked for since that it
+    // has not echoed yet: both are ours when an echo carries them (_ownSize)
+    this._confirmedSize = null;
+    this._sizesInFlight = [];
+    // the size `_refit` is waiting for before it lays out again, and the
+    // timer that gives up on it (_holdForRefit)
+    this._refitHeld = null;
     // the last `WM_NORMAL_HINTS` struct written and the size it was written
     // at, so that a bound measured every frame is only *sent* on the frames
     // it moves (see _sendSizeHints for why the size is part of it)
@@ -409,6 +416,7 @@ export class WindowNode extends Scrollable(Node) {
     // 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 };
+    this._confirmedSize = this._requestedSize;
     // 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.
@@ -862,10 +870,12 @@ export class WindowNode extends Scrollable(Node) {
     const geo = scaleWindowGeometry(newProps, this.scale);
     if (sizeChanged) {
       this._userSized = false;
-      this._requestedSize = this._snapSize({
-        width: isAutoSize(geo.width) ? wnd.width : geo.width,
-        height: isAutoSize(geo.height) ? wnd.height : geo.height,
-      });
+      this._askSize(
+        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') {