@atlaskit/editor-plugin-interactivity 1.0.0 → 1.2.0

package/CHANGELOG.md

@@ -1,5 +1,32 @@
 # @atlaskit/editor-plugin-interactivity
 
+## 1.2.0
+
+### Minor Changes
+
+- [`1b78d9e80b1bd`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/1b78d9e80b1bd) -
+  Say where the latency of the slowest interactions went in the `editor interactivity` event, from
+  the Long Animation Frames they ran in and the way `web-vitals` attributes INP. `longestScriptMs`,
+  `functionName`, `scriptName`, `invokerType` and `scriptSubpart` describe the script that ran the
+  longest while the user waited, and `totalScriptDurationMs`, `totalStyleAndLayoutDurationMs`,
+  `totalPaintDurationMs` and `totalUnattributedDurationMs` divide the latency between script, style
+  and layout, paint, and what the frames explain nothing about. Behind the
+  platform_editor_editor_interactivity_slowest experiment.
+
+### Patch Changes
+
+- Updated dependencies
+
+## 1.1.0
+
+### Minor Changes
+
+- [`ccd1b52723728`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/ccd1b52723728) -
+  Report the slowest interactions of the session in the `editor interactivity` event — their group,
+  event type, latency, timing phases and a sanitised target — so a regression the histograms show
+  can be traced to what was interacted with. Behind the platform_editor_editor_interactivity_slowest
+  experiment.
+
 ## 1.0.0
 
 ### Patch Changes

package/README.md

@@ -31,6 +31,85 @@ interactions were slow, so this plugin keeps bucketed counts instead.
   bucket means zero. The boundaries are versioned by `schema`.
 - Snapshots are session-to-date, so a cohort query takes the highest `seq` per
   `interactivitySessionId` and then sums bucket counts.
+- `slowest` — up to five of the slowest interactions of the session, slowest first. See below.
+
+## The slowest interactions
+
+The histograms count how many interactions were slow. They cannot say what was interacted with, so
+a regression they show cannot be diagnosed from telemetry alone. Each record carries the group and
+the event type, the latency, the phases it divides into — input delay, processing, presentation
+delay — a name for the target, and what the frame it ran in says about it.
+
+Only interactions above 200 ms, the Google INP "good" threshold, are candidates, and `slowest` is
+left out of the event when none crossed it, which is the common case. That is also what keeps the
+cost down: a target is named only for the few interactions slow enough to be recorded, never for
+every one the browser reports.
+
+Records are kept per interaction, because an interaction's latency grows as later entries arrive:
+one that is already recorded is replaced by its slower self instead of taking a second place. Its
+attribution comes from the entry that measured it at its slowest, read as that entry arrives —
+`entry.target` is `null` once the element has left the document, so there is no reading it later.
+
+The target is a short path of tag names plus the first allow-listed attribute above it, such as
+`div[data-vc="editor"] > p > span`. Nothing in it is document content: a tag name comes from the
+schema, and the only attributes read are ones we put there ourselves. Ids, roles, class names, text
+and accessibility labels are all left out, and the path is bounded in both depth and length.
+
+The rest of a record comes from the Long Animation Frames of the interaction, attributed the way
+[`web-vitals` attributes INP](https://github.com/GoogleChrome/web-vitals/blob/main/src/attribution/onINP.ts):
+every frame overlapping the interaction counts, and the script that counts is the one with the
+longest part inside it.
+
+- `longestScriptMs`, `functionName`, `scriptName`, `invokerType` and `scriptSubpart` describe that one
+  script — how much of it fell inside the interaction, the function it ran in, the file it came from
+  as the browser named it without its origin or query, what ran it, and which phase of the
+  interaction it ran in. The phase is what keeps a script named for an interaction that waited on the
+  main thread from being mistaken for one its handlers ran.
+- `totalScriptDurationMs`, `totalStyleAndLayoutDurationMs`, `totalPaintDurationMs` and
+  `totalUnattributedDurationMs` divide the latency itself across every frame of the interaction. The
+  time a script forced into style and layout counts as style and layout rather than as script, the
+  same split DevTools shows. `totalUnattributedDurationMs` is what the frames explain nothing about,
+  and it is not idle time: the browser reports no frame under 50 ms, so the work of those lands here
+  as well.
+
+A record is attributed as soon as a frame of it is known, and worked out again on every batch of
+frames after that. The browser reports a frame in no fixed order — it can deliver one after the entry
+measuring the interaction that ran in it, and the frames of one interaction in several batches — so a
+record can go out without these fields, or with what one frame said, and be corrected in a later
+snapshot of the same session. That is another reason a query takes the highest `seq`. All of them are
+absent when the browser reported no frame at all, which it does for frames under 50 ms and outside
+Chromium, and the fields describing one script are absent when no script of those frames overlapped
+the interaction.
+
+The phases are the gaps between four moments: the user acted, the interaction's handlers started
+running, they finished, the screen updated. The first and the last come from the entry that measured
+the interaction at its slowest. The two in between come from the paint that presented that entry,
+which is every event whose `startTime + duration` agrees within 8 ms — the rounding Event Timing
+applies to `duration`, and the only thing it says about which paint presented an event. So a
+`pointerover` handler that was still running when the user clicked reads as processing of the click
+rather than as time the click waited for nothing, which is also the split `web-vitals` reports. The
+four are clamped as it clamps them, so they stay in order whatever the browser reported.
+
+A paint keeps growing while the browser reports the rest of the events it presented, so an
+interaction is reported again whenever its paint grew — including when what grew it was another
+interaction presented by the same paint, or an event that is no interaction at all. The last handlers
+of a paint are usually reported after the event that measured the interaction, so the phases of a
+record are corrected in a later snapshot of the same session.
+
+One thing we do not copy: their style and layout total takes the frame's render phase unguarded; we
+report zero for a frame the browser said did none, which their formula would otherwise turn into an
+absolute timestamp.
+
+An interaction that is not the editor's is recorded as `group: 'outsideEditor'`, so the records also
+answer whether the slow interactions of a session were the editor's at all. That group is not the
+`page` histogram: `page` counts the editor's interactions as well, `outsideEditor` counts only the
+ones that are not.
+
+Collecting them is its own experiment, `platform_editor_editor_interactivity_slowest`, read where a
+session decides whether to keep them rather than where the plugin is added to a preset: the plugin
+only exists when the experiment reporting the histograms is on, so the exposure lands on the
+sessions that already send the event, and the cost of the records stays separable from the cost of
+the event carrying them. Nothing is collected, named or sent when it is off.
 
 ## The editor groups
 

package/afm-cc/tsconfig.json

@@ -30,6 +30,9 @@
 		{
 			"path": "../../editor-plugin-editor-viewmode/afm-cc/tsconfig.json"
 		},
+		{
+			"path": "../../../platform/feature-experiments/afm-cc/tsconfig.json"
+		},
 		{
 			"path": "../../editor-common/afm-cc/tsconfig.json"
 		}

package/afm-products/tsconfig.json

@@ -30,6 +30,9 @@
 		{
 			"path": "../../editor-plugin-editor-viewmode/afm-products/tsconfig.json"
 		},
+		{
+			"path": "../../../platform/feature-experiments/afm-products/tsconfig.json"
+		},
 		{
 			"path": "../../editor-common/afm-products/tsconfig.json"
 		}

package/dist/cjs/collections/bounded-list.js

@@ -0,0 +1,42 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.BoundedList = void 0;
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+/** An array that forgets its oldest item once it holds more than `limit`. */
+var BoundedList = exports.BoundedList = /*#__PURE__*/function () {
+  function BoundedList(limit) {
+    (0, _classCallCheck2.default)(this, BoundedList);
+    (0, _defineProperty2.default)(this, "items", []);
+    this.limit = limit;
+  }
+  return (0, _createClass2.default)(BoundedList, [{
+    key: "push",
+    value: function push() {
+      var _this$items;
+      (_this$items = this.items).push.apply(_this$items, arguments);
+      // Negative when there is still room, and `splice` then removes nothing.
+      this.items.splice(0, this.items.length - this.limit);
+    }
+  }, {
+    key: Symbol.iterator,
+    value: function value() {
+      return this.items[Symbol.iterator]();
+    }
+  }, {
+    key: "findLast",
+    value: function findLast(matches) {
+      for (var index = this.items.length - 1; index >= 0; index -= 1) {
+        if (matches(this.items[index])) {
+          return this.items[index];
+        }
+      }
+      return undefined;
+    }
+  }]);
+}();

package/dist/cjs/collections/bounded-map.js

@@ -0,0 +1,42 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.BoundedMap = void 0;
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+/** A `Map` that forgets its oldest entry once it holds more than `limit`. */
+var BoundedMap = exports.BoundedMap = /*#__PURE__*/function () {
+  function BoundedMap(limit) {
+    (0, _classCallCheck2.default)(this, BoundedMap);
+    (0, _defineProperty2.default)(this, "entries", new Map());
+    this.limit = limit;
+  }
+  return (0, _createClass2.default)(BoundedMap, [{
+    key: "get",
+    value: function get(key) {
+      return this.entries.get(key);
+    }
+  }, {
+    key: "forEach",
+    value: function forEach(visit) {
+      this.entries.forEach(visit);
+    }
+  }, {
+    key: "set",
+    value: function set(key, value) {
+      this.entries.delete(key);
+      this.entries.set(key, value);
+      if (this.entries.size <= this.limit) {
+        return;
+      }
+      var oldest = this.entries.keys().next();
+      if (!oldest.done) {
+        this.entries.delete(oldest.value);
+      }
+    }
+  }]);
+}();

package/dist/cjs/collector/interaction-events.js

@@ -5,13 +5,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.INTERACTION_EVENT_TYPES = void 0;
 exports.interactionEventKind = interactionEventKind;
-/**
- * The editor group an interaction belongs to, which is also the field the event reports it in.
- *
- * `editorOther` is the remainder — an interaction the browser counts that is neither typing nor
- * pointing — so the three groups together cover whatever the browser calls an interaction.
- */
-
 /**
  * The events an interaction is made of, and the group they belong to. Both sides of the collector
  * read this, so counting and grouping cannot disagree.

package/dist/cjs/collector/interaction-group.js

@@ -31,10 +31,10 @@ var REPORTED_QUANTILES = [0.9, 0.98];
  * count, the sum, the maximum and the percentiles — is derived from that map when a snapshot
  * is taken. Nothing is computed while interactions arrive.
  *
- * The two counters count different populations: `add` takes the interactions Event Timing
- * measured, `countTotal` takes all of them, including the ones below the 16 ms reporting threshold
- * it never delivers. So `totalCount >= observedCount`, and the difference is how many were too
- * fast to be measured.
+ * The two counters count different populations: `trackInteractionUpdate` takes the interactions
+ * Event Timing measured, `countTotal` takes all of them, including the ones below the 16 ms
+ * reporting threshold it never delivers. So `totalCount >= observedCount`, and the difference is how
+ * many were too fast to be measured.
  */
 var InteractionGroup = exports.InteractionGroup = /*#__PURE__*/function () {
   function InteractionGroup() {
@@ -43,6 +43,22 @@ var InteractionGroup = exports.InteractionGroup = /*#__PURE__*/function () {
     (0, _defineProperty2.default)(this, "totalCount", 0);
   }
   return (0, _createClass2.default)(InteractionGroup, [{
+    key: "trackInteractionUpdate",
+    value:
+    /**
+     * Takes in what the tracker now says about an interaction: a new one is counted, and one measured
+     * again moves the count it already has.
+     *
+     * @returns whether the group changed.
+     */
+    function trackInteractionUpdate(update) {
+      if (update.type === 'new') {
+        this.add(update.latencyMs);
+        return true;
+      }
+      return this.remeasure(update.previousLatencyMs, update.latencyMs);
+    }
+  }, {
     key: "add",
     value: function add(latencyMs) {
       this.increment(latencyMs);
@@ -57,12 +73,23 @@ var InteractionGroup = exports.InteractionGroup = /*#__PURE__*/function () {
     value: function countTotal() {
       this.totalCount += 1;
     }
+
+    /**
+     * @returns whether the count moved, which is `false` when both latencies fall in the step the
+     * interaction is already counted in — including when the interaction was measured no slower at
+     * all and only its boundaries moved.
+     */
   }, {
     key: "remeasure",
     value: function remeasure(previousLatencyMs, latencyMs) {
+      if (this.roundLatencyUp(previousLatencyMs) === this.roundLatencyUp(latencyMs)) {
+        return false;
+      }
+
       // Moved rather than counted again: the count belongs to the same interaction.
       this.decrement(previousLatencyMs);
       this.increment(latencyMs);
+      return true;
     }
 
     /**

package/dist/cjs/collector/interaction-tracker.js

@@ -5,23 +5,56 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.InteractionTracker = void 0;
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _boundedList = require("../collections/bounded-list");
+var _boundedMap = require("../collections/bounded-map");
 var _interactionEvents = require("./interaction-events");
-function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t.return || t.return(); } finally { if (u) throw o; } } }; }
-function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
-function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
 /**
- * The Event Timing fields this package reads. `interactionId` is missing from the DOM
- * typings' `PerformanceEventTiming`, so it is declared here as optional, which also makes
- * a `PerformanceEntry` from `getEntries()` assignable without a cast.
+ * The Event Timing fields this package reads, declared optional so that a `PerformanceEntry` from
+ * `getEntries()` is assignable without a cast — `interactionId` is missing from the DOM typings'
+ * `PerformanceEventTiming` altogether, and the rest are only on it.
+ */
+
+/**
+ * One paint, and the processing of every event it presented.
+ *
+ * One paint can present several events, and the handlers of all of them ran before it: a
+ * `pointerover` handler that was still running when the user clicked held up the paint that showed
+ * the click. So an interaction's processing is the processing of its whole paint, not of its own
+ * events only — otherwise a handler that is not its own reads as time the user waited for nothing.
+ *
+ * Event Timing gives a paint no identity. The only thing an entry says about it is
+ * `startTime + duration`, the moment it happened, so that is what identifies it.
+ */
+
+/**
+ * The paint an entry was presented by, and whether the entry moved the processing that paint covers.
+ * An entry whose handlers ran inside what the paint already covered changes nothing for any
+ * interaction reading its boundaries from it.
+ */
+
+/**
+ * The four moments an interaction's latency divides at, in order: the user acted, its handlers
+ * started running, they finished, the screen updated.
  */
 
 /**
  * What an entry did to the interaction it belongs to: either it is the first entry of a new
- * interaction, or it measured an interaction that was already counted as slower than it was
- * known to be. Both carry the editor group of the interaction, if it is one of the editor's.
+ * interaction, or it changed an interaction already known. Both carry the editor group of the
+ * interaction, if it is one of the editor's, and the boundaries it now has.
+ *
+ * A `remeasured` where `previousLatencyMs` equals `latencyMs` is an interaction whose latency stayed
+ * as it was and whose boundaries moved: the entry ran in the same paint without being the slowest
+ * of them.
+ */
+
+/**
+ * What is kept per interaction. The boundaries are not among these: they are derived from the paint
+ * whenever the interaction is reported, because the paint keeps growing as the browser reports the
+ * remaining events it presented.
  */
 
 /**
@@ -30,11 +63,17 @@ function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length)
  * anything older than the last few hundred is not needed.
  */
 var MAX_TRACKED = 256;
+
+/**
+ * How many paints entries can still be placed in. The entries of a paint arrive within a batch or
+ * two of each other, so this only has to cover the paints in flight; it is what `web-vitals` keeps.
+ */
+var MAX_RECENT_PAINTS = 10;
 /**
- * How many are dropped per cleanup. Dropping one at a time would run a cleanup on every new
- * interaction once the limit is reached; a batch makes it one cleanup per 64 of them.
+ * Event Timing rounds `duration` down to 8 ms, so two events presented by one paint report that
+ * paint up to this far apart — and nothing else in Event Timing says they share it.
  */
-var PRUNE_BATCH = 64;
+var PRESENTATION_ROUNDING_MS = 8;
 
 /**
  * Identifies the event an entry measured: an entry's `startTime` is that event's timestamp and its
@@ -60,6 +99,9 @@ function eventKey(type, timeStamp) {
  *
  * The editor's events answer what an entry cannot: which interactions were with the editor, and
  * how many there were, including the ones below the Event Timing reporting threshold.
+ *
+ * Every entry is also placed in the paint that presented it, which is what says how an
+ * interaction's latency divides into waiting, processing and presentation. See `Paint`.
  */
 var InteractionTracker = exports.InteractionTracker = /*#__PURE__*/function () {
   /**
@@ -72,8 +114,9 @@ var InteractionTracker = exports.InteractionTracker = /*#__PURE__*/function () {
   function InteractionTracker() {
     var startsAfterInteractionId = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
     (0, _classCallCheck2.default)(this, InteractionTracker);
-    (0, _defineProperty2.default)(this, "interactions", new Map());
-    (0, _defineProperty2.default)(this, "groupByEvent", new Map());
+    (0, _defineProperty2.default)(this, "interactions", new _boundedMap.BoundedMap(MAX_TRACKED));
+    (0, _defineProperty2.default)(this, "groupByEvent", new _boundedMap.BoundedMap(MAX_TRACKED));
+    (0, _defineProperty2.default)(this, "recentPaints", new _boundedList.BoundedList(MAX_RECENT_PAINTS));
     (0, _defineProperty2.default)(this, "highestInteractionId", 0);
     this.startsAfterInteractionId = startsAfterInteractionId;
   }
@@ -88,58 +131,67 @@ var InteractionTracker = exports.InteractionTracker = /*#__PURE__*/function () {
     /**
      * Merges an entry into the interaction it belongs to.
      *
-     * @returns what that did to the interaction's latency, or nothing when the entry is not
-     * part of an interaction, belongs to a previous tracker, or does not change one.
+     * @returns what that changed about the interactions this tracker knows, the entry's own first.
+     * More than one of them when the paint the entry ran in presented several.
      */
   }, {
     key: "merge",
     value: function merge(entry) {
+      if (!Number.isFinite(entry.duration) || entry.duration < 0) {
+        return [];
+      }
+      var placement = this.paintOf(entry);
+      var paint = placement === null || placement === void 0 ? void 0 : placement.paint;
       var interactionId = entry.interactionId;
-      // `first-input` and non-interaction events report `interactionId` 0.
+
+      // Reported only when the entry grew the paint, because otherwise nothing an interaction reads
+      // from it moved. Every interaction the paint presented is here, not only the entry's own: a
+      // `first-input` or non-interaction event reports `interactionId` 0 and has none of its own,
+      // and a second press of the same paint moved where the first one spent its latency.
+      //
+      // The check below is neither reached with a `0` nor needed: the interactions reported are the
+      // ones this tracker holds, and the only way into that map is past the check.
+      var remeasuredOthers = placement !== null && placement !== void 0 && placement.grew ? this.remeasuredUpdatesIn(placement.paint, {
+        except: interactionId
+      }) : [];
       if (!interactionId) {
-        return undefined;
+        return remeasuredOthers;
       }
       if (interactionId <= this.startsAfterInteractionId) {
-        return undefined;
+        // The entry belongs to the session before this one, but its handlers still ran before a
+        // paint of this one.
+        return remeasuredOthers;
       }
       this.highestInteractionId = Math.max(this.highestInteractionId, interactionId);
-
-      // Every latency is counted through here, so this is where one that cannot be measured
-      // is rejected: a `NaN` getting through becomes a `NaN` bucket key and a `NaN` `sumMs`
-      // for the rest of the session.
-      if (!Number.isFinite(entry.duration) || entry.duration < 0) {
-        return undefined;
-      }
       var tracked = this.interactions.get(interactionId);
       if (tracked === undefined) {
         // Taken once: an entry that only makes the interaction slower has to move its count
         // within the group it was counted in, not into another one.
         var group = this.groupByEvent.get(eventKey(entry.name, entry.startTime));
-        this.interactions.set(interactionId, {
+        var interaction = {
+          group: group,
           latencyMs: entry.duration,
-          group: group
-        });
-        this.prune(this.interactions);
-        return {
-          type: 'new',
-          latencyMs: entry.duration,
-          group: group
+          presentedIn: paint,
+          startedAt: entry.startTime
         };
+        this.interactions.set(interactionId, interaction);
+        return [this.newUpdate(interactionId, interaction)].concat((0, _toConsumableArray2.default)(remeasuredOthers));
       }
-      if (entry.duration <= tracked.latencyMs) {
-        return undefined;
+      if (entry.duration > tracked.latencyMs) {
+        var previousLatencyMs = tracked.latencyMs;
+        tracked.latencyMs = entry.duration;
+        tracked.presentedIn = paint;
+        tracked.startedAt = entry.startTime;
+        return [this.remeasuredUpdate(interactionId, tracked, previousLatencyMs)].concat((0, _toConsumableArray2.default)(remeasuredOthers));
       }
-      var fromMs = tracked.latencyMs;
-      tracked.latencyMs = entry.duration;
-      return {
-        type: 'remeasured',
-        fromMs: fromMs,
-        toMs: entry.duration,
-        group: tracked.group
-      };
-    }
 
-    /** @returns the group of an interaction to count, when this is the event its group counts on. */
+      // Not the slowest entry of the interaction, so its latency stands. Its handlers still ran
+      // before the same paint, if this is that paint, and so moved where that latency went.
+      if (!(placement !== null && placement !== void 0 && placement.grew) || paint !== tracked.presentedIn) {
+        return remeasuredOthers;
+      }
+      return [this.remeasuredUpdate(interactionId, tracked, tracked.latencyMs)].concat((0, _toConsumableArray2.default)(remeasuredOthers));
+    }
   }, {
     key: "recordEditorEvent",
     value: function recordEditorEvent(event) {
@@ -151,35 +203,125 @@ var InteractionTracker = exports.InteractionTracker = /*#__PURE__*/function () {
       // Every event of the interaction, because any of them can be the one Event Timing reports
       // as the slowest: for a pointer press that is usually the click.
       this.groupByEvent.set(eventKey(event.type, event.timeStamp), kind.group);
-      this.prune(this.groupByEvent);
       return kind.counts ? kind.group : undefined;
     }
+
+    /**
+     * Every interaction whose boundaries are read from this paint, reported as measured again at the
+     * latency it already had.
+     *
+     * @param except the interaction the entry measured, which the caller reports itself. `0` or
+     * nothing when the entry measured none, and then no interaction is left out.
+     */
+  }, {
+    key: "remeasuredUpdatesIn",
+    value: function remeasuredUpdatesIn(paint, _ref) {
+      var _this = this;
+      var except = _ref.except;
+      var remeasured = [];
+      this.interactions.forEach(function (interaction, interactionId) {
+        if (interaction.presentedIn === paint && interactionId !== except) {
+          remeasured.push(_this.remeasuredUpdate(interactionId, interaction, interaction.latencyMs));
+        }
+      });
+      return remeasured;
+    }
+  }, {
+    key: "newUpdate",
+    value: function newUpdate(interactionId, tracked) {
+      return {
+        type: 'new',
+        interactionId: interactionId,
+        latencyMs: tracked.latencyMs,
+        group: tracked.group,
+        boundaries: this.boundariesOf(tracked)
+      };
+    }
   }, {
-    key: "prune",
-    value: function prune(entries) {
-      if (entries.size <= MAX_TRACKED) {
-        return;
+    key: "remeasuredUpdate",
+    value: function remeasuredUpdate(interactionId, tracked, previousLatencyMs) {
+      return {
+        type: 'remeasured',
+        interactionId: interactionId,
+        previousLatencyMs: previousLatencyMs,
+        latencyMs: tracked.latencyMs,
+        group: tracked.group,
+        boundaries: this.boundariesOf(tracked)
+      };
+    }
+
+    /**
+     * The four moments of an interaction, read from the paint as it stands now.
+     *
+     * Limited the way `web-vitals` limits its INP attribution, so the four stay in order: the paint's
+     * handlers can have started before the event arrived, and can have finished after the paint the
+     * event's rounded-down `duration` points at.
+     *
+     * @returns nothing when the browser reported no processing timestamps for the interaction, which
+     * leaves it in no paint.
+     */
+  }, {
+    key: "boundariesOf",
+    value: function boundariesOf(_ref2) {
+      var latencyMs = _ref2.latencyMs,
+        presentedIn = _ref2.presentedIn,
+        startedAt = _ref2.startedAt;
+      if (!presentedIn) {
+        return undefined;
       }
+      var processingStartedAt = Math.max(presentedIn.processingStartedAt, startedAt);
+      var presentedAt = Math.max(startedAt + latencyMs, processingStartedAt);
+      var processingEndedAt = Math.min(presentedIn.processingEndedAt, presentedAt);
+      return {
+        startedAt: startedAt,
+        processingStartedAt: processingStartedAt,
+        processingEndedAt: processingEndedAt,
+        presentedAt: presentedAt
+      };
+    }
 
-      // `Map` preserves insertion order, so the entries inserted first are the least likely to
-      // see another entry or another event.
-      var remaining = PRUNE_BATCH;
-      var _iterator = _createForOfIteratorHelper(entries.keys()),
-        _step;
-      try {
-        for (_iterator.s(); !(_step = _iterator.n()).done;) {
-          var key = _step.value;
-          entries.delete(key);
-          remaining -= 1;
-          if (remaining === 0) {
-            return;
-          }
-        }
-      } catch (err) {
-        _iterator.e(err);
-      } finally {
-        _iterator.f();
+    /**
+     * The paint that presented this entry, grown to cover this entry's own processing.
+     *
+     * The moment being matched is always the one the first entry of the paint reported, so that a
+     * run of entries 8 ms apart cannot walk one paint across the next.
+     *
+     * @returns nothing when the browser reported no processing timestamps for the entry, which
+     * leaves nothing to place it by.
+     */
+  }, {
+    key: "paintOf",
+    value: function paintOf(entry) {
+      var startTime = entry.startTime,
+        duration = entry.duration,
+        processingStart = entry.processingStart,
+        processingEnd = entry.processingEnd;
+      if (typeof processingStart !== 'number' || typeof processingEnd !== 'number') {
+        return undefined;
       }
+      var presentedAt = startTime + duration;
+      var knownPaint = this.recentPaints.findLast(function (paint) {
+        return Math.abs(presentedAt - paint.presentedAt) <= PRESENTATION_ROUNDING_MS;
+      });
+      if (knownPaint) {
+        var grew = processingStart < knownPaint.processingStartedAt || processingEnd > knownPaint.processingEndedAt;
+        knownPaint.processingStartedAt = Math.min(processingStart, knownPaint.processingStartedAt);
+        knownPaint.processingEndedAt = Math.max(processingEnd, knownPaint.processingEndedAt);
+        return {
+          grew: grew,
+          paint: knownPaint
+        };
+      }
+      var newPaint = {
+        presentedAt: presentedAt,
+        processingStartedAt: processingStart,
+        processingEndedAt: processingEnd
+      };
+      this.recentPaints.push(newPaint);
+      return {
+        grew: true,
+        paint: newPaint
+      };
     }
   }]);
 }();