react-x11 2.18.2 → 2.18.4

package/src/nodes/window/flush.js

@@ -101,8 +101,8 @@ export class WindowFlush {
     return changed;
   }
 
-  /** …and their paint, with the frame's own damage: a claim inside a
-   * `<glarea>`'s children is in that list like any other. */
+  /** …and their paint, with the damage the panes are owed — their own
+   * list, which the claims that can reach them go to (`_paneReach`). */
   _paintOverlays(damage) {
     for (const area of this._overlaid) area._paintOverlay(damage);
   }
@@ -195,13 +195,21 @@ export class WindowFlush {
       // A bounded frame watches the walk: whatever this pass actually moved
       // claims its old and new rects through the sink, and the frame stays
       // a few rects instead of the whole window. An unbounded frame skips
-      // the bookkeeping — it repaints everything anyway.
-      if (this._damage !== FULL_DAMAGE) {
+      // the bookkeeping — it repaints everything anyway — unless the panes
+      // over a `<glarea>` are still bounded: they paint from a list of
+      // their own, and a move of the children they hold is theirs to claim.
+      const panes = this._overlaid.size !== 0;
+      if (
+        this._damage !== FULL_DAMAGE ||
+        (panes && this._paneDamage !== FULL_DAMAGE)
+      ) {
         const cap = this._damageRectCap();
         layoutDiff.sink = (rect) => {
-          if (this._damage === FULL_DAMAGE) return;
-          layoutMoved = true;
-          this._damage = addDamageRect(this._damage, rect, cap);
+          if (this._damage !== FULL_DAMAGE) {
+            layoutMoved = true;
+            this._damage = addDamageRect(this._damage, rect, cap);
+          }
+          if (panes) this._addPaneDamage(rect);
         };
       }
       try {
@@ -233,7 +241,13 @@ export class WindowFlush {
       for (const node of this._reflowed) {
         // …and the pre-mutation walk this frame reused goes with it
         node._reflowBefore = null;
-        if (node.destroyed || this._damage === FULL_DAMAGE) continue;
+        if (
+          node.destroyed ||
+          (this._damage === FULL_DAMAGE &&
+            (!panes || this._paneDamage === FULL_DAMAGE))
+        ) {
+          continue;
+        }
         // clipped to a blitting viewport above it, like every other claim
         // this frame, and written to that viewport's ledger too (issue
         // #398): the claim would otherwise coalesce into the scroll's own
@@ -245,11 +259,14 @@ export class WindowFlush {
         if (sv && !sv._recordBlitClaim(after)) {
           sv._pendingBlitFrom = BLIT_POISONED;
         }
-        this._damage = addDamageRect(
-          this._damage,
-          after,
-          this._damageRectCap(),
-        );
+        if (this._damage !== FULL_DAMAGE) {
+          this._damage = addDamageRect(
+            this._damage,
+            after,
+            this._damageRectCap(),
+          );
+        }
+        if (panes) this._addPaneDamage(after);
       }
       this._reflowed.clear();
     } else if (this._reflowed.size) {
@@ -286,6 +303,10 @@ export class WindowFlush {
     if (!this.needsPaint) return false;
     this.needsPaint = false;
     const damage = this._takeDamage(width, height);
+    // …and the panes' own, which they paint instead of the window's
+    const paneDamage =
+      this._overlaid.size !== 0 ? this._takePaneDamage(width, height) : null;
+    this._paneDamage = null;
     if (debugPaint === 'full' && !damage && width > 0 && height > 0) {
       // Silent full-window repaints are the perf bug class this renderer
       // actually has (see AGENTS.md); this is what surfaces them. The stack
@@ -305,8 +326,8 @@ 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 the damage either way
-      if (this._overlaid.size !== 0) this._paintOverlays(damage);
+      // 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);
       this.app._reactX11Startup?.painted();
       return true;
@@ -328,10 +349,11 @@ export class WindowFlush {
     for (const rect of damage ?? [null]) {
       this._paintRegion(ctx, rect, width, height);
     }
-    // …and the panes over the surfaces, with the same damage: a claim from
+    // …and the panes over the surfaces, with their own damage: a claim from
     // a `<glarea>`'s children is theirs to repaint — the window's pass under
-    // the surface is one nobody sees. Inside the cache's frame, like a pass.
-    if (this._overlaid.size !== 0) this._paintOverlays(damage);
+    // the surface is one nobody sees — and one from a node that cannot reach
+    // them is not. Inside the cache's frame, like a pass.
+    if (this._overlaid.size !== 0) this._paintOverlays(paneDamage);
     // 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();

package/src/nodes/window/window.js

@@ -205,6 +205,10 @@ export class WindowNode extends Scrollable(Node) {
     // and paints with its damage (nodes/window/flush.js, src/gloverlay.js).
     // Empty is one `size` read a frame.
     this._overlaid = new Set();
+    // …and the damage their panes repaint, a list beside the window's:
+    // each claim goes to one or both by what it can reach (`_paneReach`).
+    // Null with nothing owed.
+    this._paneDamage = null;
     this.events = new EventManager(this);
     // ids of the child windows in the order the *server* stacks them,
     // bottom to top — see _restackWindowChildren

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/styles.js

@@ -2008,6 +2008,28 @@ function samePosition(a, b) {
   return true;
 }
 
+/**
+ * Whether the only properties that differ between two resolved styles are
+ * the insets — `left`, `top` and the rest: a box that moved, and drew
+ * nothing differently (issue #644). Every other key counts, whether layout,
+ * paint or text reads it, so a style that also changed anything else
+ * answers false.
+ */
+export function onlyInsetsChanged(props, oldProps = {}) {
+  let moved = false;
+  for (const key of Object.keys(props)) {
+    if (props[key] === oldProps[key]) continue;
+    if (!INSETS.has(key)) return false;
+    moved = true;
+  }
+  for (const key of Object.keys(oldProps)) {
+    if (key in props) continue;
+    if (!INSETS.has(key)) return false;
+    moved = true;
+  }
+  return moved;
+}
+
 /** @returns true if any paint-only prop changed */
 export function paintPropsChanged(props, oldProps = {}) {
   for (const key of PAINT_PROPS) {

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. */