react-x11 2.18.3 → 2.18.5

package/src/nodes/node.js

@@ -605,6 +605,18 @@ export class Node {
     // which is what keeps a commit from widening the region to every node
     // it touched.
     if (layoutChanged) {
+      const moved = onlyInsetsChanged(style, prevStyle);
+      // An absolutely positioned box of a set size that moved and changed
+      // nothing else is out of its ancestors' flow and sized by its width
+      // and height rather than its insets, so no content floor anywhere
+      // moved with it (src/nodes/invalidate.js, `'position'`).
+      const reason =
+        moved &&
+        style.position === 'absolute' &&
+        typeof style.width === 'number' &&
+        typeof style.height === 'number'
+          ? 'position'
+          : 'props';
       // A child of a `<glarea>` that only moved (issue #644): its pixels are
       // on a pane, one shift away, and the layout pass reports the move to
       // the overlay rather than claiming it (src/glnodes.js). A claim of the
@@ -613,12 +625,12 @@ export class Node {
       // whenever the overlay cannot move the pixels.
       if (
         this.parent?.isGlArea &&
-        onlyInsetsChanged(style, prevStyle) &&
+        moved &&
         !this.paintChanged(newProps, prev)
       ) {
-        this.invalidate(true, NO_DAMAGE, 'props');
+        this.invalidate(true, NO_DAMAGE, reason);
       } else {
-        this._invalidateLayout('props');
+        this._invalidateLayout(reason);
       }
     } else {
       // The style half is asked here rather than inside `paintChanged`, and

package/src/nodes/scrollblit.js

@@ -970,12 +970,22 @@ export class WindowScrollBlit {
         if (ancestors.has(child)) {
           // on the path down: its solid background under the viewport is
           // translation-invariant, its border ring and corners are not.
-          // The widest side is conservative for a non-uniform border
+          // The widest side is conservative for a non-uniform border.
+          //
+          // Rounded, because that is where the ring ends for what is
+          // inside it: at a fractional scale a 1px border is 1.25 or 1.5
+          // device pixels, and layout puts the children at the rounded
+          // inner edge — so the column the ring reaches a quarter of the
+          // way into is a child's, painted over whole. Tested exactly, that
+          // column refused every blit under a bordered box at 125%, the
+          // scale most Windows laptops run at.
           const bw = resolveBorderWidths(
             child.style ?? EMPTY_STYLE,
             child.direction,
           );
-          const ring = Math.max(bw.top, bw.right, bw.bottom, bw.left);
+          const ring = Math.round(
+            Math.max(bw.top, bw.right, bw.bottom, bw.left),
+          );
           if (ring > 0 && !rectContains(insetRect(child.abs, ring), vp)) {
             return false;
           }

package/src/nodes/window/flush.js

@@ -326,9 +326,26 @@ export class WindowFlush {
     // list was still taken (its bookkeeping is what keeps the two paths one
     // code) and is simply not consumed; the presenter diffs at the layer.
     if (typeof this.window.presentFrame === 'function') {
-      // the panes are no presenter's: they paint from their damage either way
-      if (this._overlaid.size !== 0) this._paintOverlays(paneDamage);
-      this.window.presentFrame(this, damage);
+      // A presenter whose frame is the ordinary paint walk — a pass per
+      // damage rect into a context, the Windows window's — paints through
+      // the paint cache as an ntk window does, and says so
+      // (`usesPaintCache`). Without it every `<canvas cacheKey>` drew
+      // afresh in every pass that reached it, and a shadow, which is only
+      // ever baked into the cache (issue #413), was not drawn at all. The
+      // retained layer presenter paints nodes onto layers of their own and
+      // keeps to itself.
+      const cache = this.window.usesPaintCache
+        ? (this._paintCache ??= paintCacheFor(this.app))
+        : null;
+      cache?.beginFrame();
+      try {
+        // the panes are no presenter's: they paint from their damage either
+        // way
+        if (this._overlaid.size !== 0) this._paintOverlays(paneDamage);
+        this.window.presentFrame(this, damage);
+      } finally {
+        cache?.endFrame();
+      }
       this.app._reactX11Startup?.painted();
       return true;
     }

package/src/statusnotifier.js

@@ -101,6 +101,13 @@ const PIXMAP_SIGNATURE = 'a(iiay)';
  *  the *same* tray icon and must come back on the same path — see `stop()`. */
 let nextItemIndex = 1;
 
+/**
+ * Per slot, the moment it is free: settles once every item that has started
+ * on it so far has stopped. The next item to start on the slot waits for it —
+ * see `start()`.
+ */
+const vacancies = new Map();
+
 /** Claim a tray slot. `useTray()` takes one per hook instance, for its life. */
 export function allocateItemSlot() {
   return nextItemIndex++;
@@ -232,6 +239,11 @@ export class StatusNotifierItem {
     /** Set while withdrawing, so `Status` reads `Passive` on the way out —
      *  see `announcePassive()`. */
     this.withdrawing = false;
+    /** Settles once `stop()` has finished, which is what the next item on
+     *  this slot waits for — see `start()`. */
+    this.gone = new Promise((resolve) => {
+      this.markGone = resolve;
+    });
 
     this.ref = null;
     this.dbus = null;
@@ -252,6 +264,24 @@ export class StatusNotifierItem {
   // ------------------------------------------------------------------ setup
 
   async start() {
+    // **One item per slot at a time.** A hook switched off and on again puts
+    // its new item on the old one's path while the old one is still leaving:
+    // `announcePassive()` holds its object open for a moment, and its
+    // teardown comes after that. dbus-native's `registration.remove()`
+    // unexports whatever is at the path when it runs, whoever exported it,
+    // so a successor already there would lose its object — and its menu —
+    // while the watcher kept its registration: a dead icon. So an item starts
+    // once every item before it on the slot has stopped. Every one, not only
+    // the last: an item stopped while it was still waiting is gone at once,
+    // and the one it was waiting for may not be.
+    const before = vacancies.get(this.index);
+    const vacated = Promise.all([before, this.gone]);
+    vacancies.set(this.index, vacated);
+    void vacated.then(() => {
+      if (vacancies.get(this.index) === vacated) vacancies.delete(this.index);
+    });
+    await before;
+
     const ref = await sessionBus();
     // No bus is a first-class configuration, not a degraded one: ssh, a bare
     // startx, CI, Node 20 without the transport. There is simply no tray.
@@ -450,6 +480,8 @@ export class StatusNotifierItem {
    *
    * The pair to this is the **stable path** (`slot`): coming back re-registers
    * the same id, which a host dedupes to a reset rather than a second icon.
+   * The same path is why the item coming back waits for this hold, and the
+   * teardown after it, to finish — see `start()`.
    */
   async announcePassive() {
     if (!this.exported || !this.iface) return;
@@ -479,12 +511,18 @@ export class StatusNotifierItem {
   }
 
   async stop() {
-    // Announced **before** `stopped`, which gates `_sync()` and every other
-    // path that could tear the export out from under the signal.
-    await this.announcePassive();
-    this.stopped = true;
-    await this.syncing;
-    await this.teardown();
+    try {
+      // Announced **before** `stopped`, which gates `_sync()` and every other
+      // path that could tear the export out from under the signal.
+      await this.announcePassive();
+      this.stopped = true;
+      await this.syncing;
+      await this.teardown();
+    } finally {
+      // Whatever happened, the slot is free: the next item on it would
+      // otherwise wait for good, and the icon never come back.
+      this.markGone();
+    }
   }
 
   async teardown() {
@@ -746,7 +784,11 @@ export class StatusNotifierItem {
   }
 }
 
-/** Test seam, not public: make paths predictable across test files. */
+/** Test seam, not public: make paths predictable across test files, and
+ *  forget who held them. A previous test's items are on a bus it has closed,
+ *  so there is nothing to wait for, and one it never stopped would otherwise
+ *  hold its slot for the rest of the run. */
 export function _resetItemIndex() {
   nextItemIndex = 1;
+  vacancies.clear();
 }

package/src/svgnodes.js

@@ -51,23 +51,57 @@ function svgAttribs(props, skip) {
     const value = props[key];
     if (key === 'children' || value == null) continue;
     if (typeof value === 'function') continue;
+    // React's, not the drawing's. Since React 19 a ref arrives as an
+    // ordinary prop, and an object one — `useRef()` — was written into the
+    // document as `ref="[object Object]"`. `key` would be the same if React
+    // ever passed it on.
+    if (key === 'ref' || key === 'key') continue;
     if (skip && skip(key)) continue;
     attribs[toSvgAttrib(key)] = String(value);
   }
   return attribs;
 }
 
+/** Whether two `svgAttribs` results say the same thing. Order aside: the
+ * document reads an attribute by its name. */
+function sameAttribs(a, b) {
+  const names = Object.keys(a);
+  if (names.length !== Object.keys(b).length) return false;
+  for (const name of names) {
+    if (a[name] !== b[name]) return false;
+  }
+  return true;
+}
+
+// Props of the `<svg>` element that are react-x11's rather than the
+// drawing's: `source`, the other form of the content, and what lays the
+// element out, styles it and takes its input. `style` is one of them, an
+// object that reached the document as "[object Object]".
+const notAnAttribute = (key) =>
+  key === 'source' ||
+  key === 'style' ||
+  isLayoutProp(key) ||
+  isPaintProp(key) ||
+  key === 'cursor' ||
+  key === 'focusable' ||
+  key === 'pointerEvents';
+
 /**
  * An element inside <svg>: no yoga node, no painting of its own — it only
  * carries a tag name and props, and is serialized into the htmlparser2-style
- * DOM that SvgView consumes. Prop/child changes bubble to the owning
- * SvgNode via the _textContentChanged channel (also used by text chunks,
- * so string children of an SVG <text> invalidate the same way).
+ * DOM that SvgView consumes. A change that reaches that DOM — an attribute
+ * that serializes differently, a child added or removed — bubbles to the
+ * owning SvgNode via the _textContentChanged channel (also used by text
+ * chunks, so string children of an SVG <text> invalidate the same way).
  */
 export class SvgChildNode extends Node {
   constructor(tag, props, app) {
     super(tag, props, app, { yoga: false });
     this.isSvgChild = true;
+    /** What this element writes into the document: serialized once per
+     * change rather than once per rebuild, and what a commit is compared
+     * against. */
+    this._attribs = svgAttribs(props);
   }
 
   // <circle cx r fill>… is SVG's vocabulary, not the style channel's
@@ -81,14 +115,34 @@ export class SvgChildNode extends Node {
 
   applyProps(newProps, oldProps) {
     super.applyProps(newProps, oldProps);
+    // React commits every child of an `<svg>` it re-renders, each with a new
+    // props object and almost always with every attribute as it was — and a
+    // rebuild re-parses the whole drawing and re-measures the `<svg>`. So
+    // only a commit that serializes differently is a change.
+    const attribs = svgAttribs(newProps);
+    if (sameAttribs(attribs, this._attribs)) return;
+    this._attribs = attribs;
     this._textContentChanged();
   }
 
+  /**
+   * Nothing this node draws, whatever changed: the `<svg>` paints the whole
+   * document, and a change to it claims that element's box on the way
+   * (`SvgNode._textContentChanged`). This node has no box — its rect is an
+   * empty one at the window's origin — so core's answer, a claim of that
+   * rect whenever a prop is a new value, repainted a corner nothing here
+   * drew, on every commit that handed over an attribute rebuilt equal: a
+   * `points` or `strokeDasharray` array, say.
+   */
+  paintChanged() {
+    return false;
+  }
+
   toDom() {
     return {
       type: 'tag',
       name: this.kind,
-      attribs: svgAttribs(this.props),
+      attribs: this._attribs,
       children: this.children
         .map((c) =>
           c.kind === 'textchunk'
@@ -114,6 +168,9 @@ export class SvgNode extends Node {
     super('svg', props, app);
     this.view = null;
     this._stale = true;
+    /** This element's own attributes in children form, kept like a child's
+     * for the same comparison. */
+    this._attribs = svgAttribs(props, notAnAttribute);
     /** Bumped every time the document is rebuilt, and sampled at paint time,
      * so `paintCachePlan` can tell an animated document from a settled one.
      * See the note there. */
@@ -138,7 +195,9 @@ export class SvgNode extends Node {
     );
   }
 
-  /** Any change to the svg subtree (props, children, text) lands here. */
+  /** Any change to the document — `source`, an attribute, a child, a text
+   * chunk — lands here, and only such a change: a commit that serializes
+   * the same never calls it, so it rebuilds nothing and claims nothing. */
   _textContentChanged() {
     this._stale = true;
     this.invalidateMeasure('props');
@@ -155,17 +214,10 @@ export class SvgNode extends Node {
         (c) => c.isSvgChild || c.kind === 'textchunk',
       );
       if (children.length > 0) {
-        const skip = (key) =>
-          key === 'source' ||
-          isLayoutProp(key) ||
-          isPaintProp(key) ||
-          key === 'cursor' ||
-          key === 'focusable' ||
-          key === 'pointerEvents';
         const dom = {
           type: 'tag',
           name: 'svg',
-          attribs: svgAttribs(this.props, skip),
+          attribs: this._attribs,
           children: children.map((c) =>
             c.kind === 'textchunk' ? { type: 'text', data: c.text } : c.toDom(),
           ),
@@ -190,9 +242,18 @@ export class SvgNode extends Node {
   }
 
   applyProps(newProps, oldProps) {
+    const source = this.props.source;
     super.applyProps(newProps, oldProps);
-    // attributes live in props (children form) or in `source`; either way
-    // the SvgView is cheap to rebuild on the next measure/paint
+    // The document is `source`, or this element's attributes over its
+    // children's, whose changes arrive on their own. A commit that leaves
+    // both as they were — most of them: a parent re-rendering, a new style
+    // object, a new ref — has nothing to re-parse or re-measure. The style
+    // is core's to diff, like any element's.
+    const attribs = svgAttribs(newProps, notAnAttribute);
+    if (newProps.source === source && sameAttribs(attribs, this._attribs)) {
+      return;
+    }
+    this._attribs = attribs;
     this._textContentChanged();
   }
 

package/src/types/elements.d.ts

@@ -992,11 +992,12 @@ export type FrameLoop = 'demand' | 'always';
  * `<glarea>`: a GL surface in the layout. Its **children** are 2D content
  * drawn above the surface — laid out in its box like a `<box>`'s and cut to
  * it, painted over the GL frame, hit before it — composited on the Cocoa
- * backend and opaque on X11 (docs/elements.md); `useSupports('glOverlay')`
- * asks whether they will be. The pointer over it is the tree's, as over any
- * node: the handlers it inherits (`onMouseDown`, `onClick`, `onWheel`, …)
- * fire at the child under the pointer or the `<glarea>` and bubble, on both
- * backends, and `GlAreaNode.forwardsPointer` says so at run time.
+ * backend, opaque on X11 (docs/elements.md), and not drawn at all on
+ * XQuartz; `useSupports('glOverlay')` asks whether they will be. The
+ * pointer over it is the tree's, as over any node: the handlers it inherits
+ * (`onMouseDown`, `onClick`, `onWheel`, …) fire at the child under the
+ * pointer or the `<glarea>` and bubble, on both backends, and
+ * `GlAreaNode.forwardsPointer` says so at run time.
  */
 export interface GlAreaProps extends DrawnProps<DrawnNode> {
   /** CSS colour, or `[r, g, b, a]` floats. Default black. */

package/src/win32/a11y.js

@@ -36,6 +36,22 @@ import { onApp } from '../trace-registry.js';
 
 const TRACE = process.env.REACT_X11_TRACE_A11Y === '1';
 
+/**
+ * How often commits may push the mirror, in ms. A commit that follows a
+ * quiet spell pushes at once; a stream of them — a pan, a drag, a value
+ * ticking — pushes once per interval, the last of them catching up.
+ *
+ * UIA's clients are almost always listening on a desktop Windows (the
+ * touch keyboard, the text services and others ask for the tree), so the
+ * push is not the rare case the listening gate makes it elsewhere: a walk
+ * of the window and a marshalled diff, on every commit. For a graph pane
+ * whose every item moves on every step of a pan that was 1.6 ms of each
+ * frame. A screen reader reads positions on demand and does not need
+ * sixty of them a second; a focus change, which it is waiting on, still
+ * pushes at once (`hooks.focus`), as does an announcement.
+ */
+const COMMIT_PUSH_MS = 100;
+
 // --------------------------------------------------------------------------
 // The one translation that is Windows' own
 // --------------------------------------------------------------------------
@@ -300,6 +316,9 @@ export class Win32Accessibility {
     this._pushed = new Set();
     this._unsubscribes = [];
     this.dead = false;
+    /** When a commit last pushed, and the push a stream of commits owes. */
+    this._lastCommitPush = -Infinity;
+    this._trailing = null;
   }
 
   _idOf(node) {
@@ -388,15 +407,29 @@ export class Win32Accessibility {
    * commit and paying nothing — the same shape as the AT-SPI bridge's "no
    * bus, no work".
    *
+   * *Nobody* is asked per window where the bridge can say (`uiaActive`):
+   * whether a client has read this window's tree in the last few seconds.
+   * UIA's own answer, `UiaClientsAreListening`, is whether any client on
+   * the desktop is subscribed to anything, and on a Windows running the
+   * touch keyboard or the text services that is always yes — so every
+   * commit walked and diffed the window for a mirror nobody read. A client
+   * that comes back after a quiet spell is noticed on its first read and
+   * asks for a fresh push (`wanted`). `global` keeps the desktop-wide answer
+   * for a focus change and an announcement: a client subscribed to focus
+   * events reads the focused element the moment it hears of it, before
+   * any read of ours could say it was there.
+   *
    * With one exception, which is what makes the gate safe: **every window is
    * pushed once regardless.** A client's first `WM_GETOBJECT` has to find a
    * tree, and it arrives before anything in this process knows a client
    * exists. After that first push the mirror is live, and a client attaching
    * later asks for a fresh one (`uia-wanted`).
    */
-  flush({ force = false } = {}) {
+  flush({ force = false, global = false } = {}) {
     if (this.dead || this._dirty.size === 0) return;
-    const listening = force || this._native.uiaListening();
+    const perWindow =
+      !force && !global && typeof this._native.uiaActive === 'function';
+    const listening = force || (!perWindow && this._native.uiaListening());
     const windows = [...this._dirty];
     this._dirty.clear();
     for (const win of windows) {
@@ -409,12 +442,37 @@ export class Win32Accessibility {
         this._dirty.add(win);
         continue;
       }
-      if (!listening && this._pushed.has(wnd.id)) continue;
+      if (
+        !listening &&
+        this._pushed.has(wnd.id) &&
+        !(perWindow && this._native.uiaActive(wnd.id))
+      ) {
+        continue;
+      }
       this._pushed.add(wnd.id);
       this._push(win);
     }
   }
 
+  /** A commit's push, at most once per `COMMIT_PUSH_MS`. */
+  _commitFlush() {
+    if (this.dead || this._dirty.size === 0) return;
+    const now = performance.now();
+    const wait = this._lastCommitPush + COMMIT_PUSH_MS - now;
+    if (wait <= 0) {
+      this._lastCommitPush = now;
+      this.flush();
+      return;
+    }
+    if (this._trailing) return;
+    this._trailing = setTimeout(() => {
+      this._trailing = null;
+      this._lastCommitPush = performance.now();
+      this.flush();
+    }, wait);
+    this._trailing.unref?.();
+  }
+
   /** A window's HWND exists now, so what is owed for it can be pushed. */
   windowReady(wnd) {
     const win = this.toplevels.find((w) => w.window === wnd);
@@ -546,12 +604,12 @@ export class Win32Accessibility {
       // Pushed now rather than at the next commit: a focus change is what a
       // screen reader is waiting for, and the event has to follow an update
       // that already carries the new state or the client reads the old one.
-      this.flush();
+      this.flush({ global: true });
       const wnd = this._windowOf(win);
       if (wnd && next) this._native.uiaFocusChanged(wnd.id, this._idOf(next));
     };
     hooks.windowFocus = (win) => this._dirty.add(win);
-    hooks.commit = () => this.flush();
+    hooks.commit = () => this._commitFlush();
     hooks.announce = (text, opts) => {
       const win =
         this.toplevels.find((w) => w.events?.windowFocused) ??
@@ -562,7 +620,7 @@ export class Win32Accessibility {
       // The window must be in the mirror before anything can be announced
       // from it, which on the first announcement of a session it may not be.
       this._dirty.add(win);
-      this.flush();
+      this.flush({ global: true });
       return Boolean(
         this._native.uiaAnnounce(wnd.id, String(text), !opts?.assertive),
       );
@@ -579,6 +637,8 @@ export class Win32Accessibility {
   bury() {
     if (this.dead) return;
     this.dead = true;
+    if (this._trailing) clearTimeout(this._trailing);
+    this._trailing = null;
     for (const key of Object.keys(hooks)) hooks[key] = null;
     for (const unsubscribe of this._unsubscribes) unsubscribe();
     this._unsubscribes = [];