@atlaskit/editor-plugin-interactivity 1.0.0 → 1.2.0

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

@@ -1,21 +1,54 @@
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 import _createClass from "@babel/runtime/helpers/createClass";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-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; }
+import { BoundedList } from '../collections/bounded-list';
+import { BoundedMap } from '../collections/bounded-map';
 import { interactionEventKind } from './interaction-events';
 
 /**
- * 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.
  */
 
 /**
@@ -24,11 +57,17 @@ import { interactionEventKind } from './interaction-events';
  * 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
@@ -54,6 +93,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`.
  */
 export var InteractionTracker = /*#__PURE__*/function () {
   /**
@@ -66,8 +108,9 @@ export var InteractionTracker = /*#__PURE__*/function () {
   function InteractionTracker() {
     var startsAfterInteractionId = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
     _classCallCheck(this, InteractionTracker);
-    _defineProperty(this, "interactions", new Map());
-    _defineProperty(this, "groupByEvent", new Map());
+    _defineProperty(this, "interactions", new BoundedMap(MAX_TRACKED));
+    _defineProperty(this, "groupByEvent", new BoundedMap(MAX_TRACKED));
+    _defineProperty(this, "recentPaints", new BoundedList(MAX_RECENT_PAINTS));
     _defineProperty(this, "highestInteractionId", 0);
     this.startsAfterInteractionId = startsAfterInteractionId;
   }
@@ -82,58 +125,67 @@ export var 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(_toConsumableArray(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(_toConsumableArray(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(_toConsumableArray(remeasuredOthers));
+    }
   }, {
     key: "recordEditorEvent",
     value: function recordEditorEvent(event) {
@@ -145,35 +197,125 @@ export var 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
+      };
     }
   }]);
 }();

package/dist/esm/collector/interactivity-collector.js

@@ -1,15 +1,19 @@
 import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 import _createClass from "@babel/runtime/helpers/createClass";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 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; }
 import { getDocument } from '@atlaskit/browser-apis';
+import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
 import { EditorEventObserver } from './editor-event-observer';
 import { InteractionObserver } from './interaction-observer';
 import { InteractivitySession } from './interactivity-session';
 import { SCHEMA_VERSION } from './bucket-boundaries';
 import { LifecycleObserver } from './lifecycle-observer';
+import { LongAnimationFrameObserver } from './long-animation-frame-observer';
 import { SnapshotScheduler } from './snapshot-scheduler';
 /**
  * Collects interaction latencies for one editor mount and emits session-to-date snapshots.
@@ -36,6 +40,9 @@ export var InteractivityCollector = /*#__PURE__*/function () {
     this.interactionObserver = new InteractionObserver(function (entries) {
       return _this.recordEntries(entries);
     });
+    this.longAnimationFrameObserver = isExperimentEnabled('platform_editor_editor_interactivity_slowest') ? new LongAnimationFrameObserver(function (frames) {
+      return _this.recordFrames(frames);
+    }) : undefined;
     this.editorEvents = new EditorEventObserver(function (event) {
       return _this.recordEditorEvent(event);
     });
@@ -68,6 +75,7 @@ export var InteractivityCollector = /*#__PURE__*/function () {
   return _createClass(InteractivityCollector, [{
     key: "start",
     value: function start() {
+      var _this$longAnimationFr;
       // Collecting is over for good once stopped: the session it covered has been reported.
       if (this.stopped) {
         return false;
@@ -83,6 +91,7 @@ export var InteractivityCollector = /*#__PURE__*/function () {
       // this object was constructed.
       this.session = this.createSession(0);
       this.interactionObserver.start();
+      (_this$longAnimationFr = this.longAnimationFrameObserver) === null || _this$longAnimationFr === void 0 || _this$longAnimationFr.start();
       this.editorEvents.observe(this.editorRoot);
       this.snapshotScheduler.start();
       this.lifecycleObserver.start();
@@ -94,12 +103,14 @@ export var InteractivityCollector = /*#__PURE__*/function () {
   }, {
     key: "stop",
     value: function stop() {
+      var _this$longAnimationFr2;
       if (this.stopped) {
         return;
       }
       this.takeSnapshot('unmount');
       this.stopped = true;
       this.interactionObserver.stop();
+      (_this$longAnimationFr2 = this.longAnimationFrameObserver) === null || _this$longAnimationFr2 === void 0 || _this$longAnimationFr2.stop();
       this.editorEvents.stop();
       this.snapshotScheduler.stop();
       this.lifecycleObserver.stop();
@@ -247,33 +258,47 @@ export var InteractivityCollector = /*#__PURE__*/function () {
       this.session[group].countTotal();
       this.session.revision += 1;
     }
+
+    /** Long Animation Frames say where the latency of a slow interaction went. */
+  }, {
+    key: "recordFrames",
+    value: function recordFrames(frames) {
+      var _this$session$slowest;
+      if (this.stopped) {
+        return;
+      }
+      if ((_this$session$slowest = this.session.slowest) !== null && _this$session$slowest !== void 0 && _this$session$slowest.trackLongAnimationFrames(frames)) {
+        this.session.revision += 1;
+      }
+    }
   }, {
     key: "recordEntries",
     value: function recordEntries(entries) {
-      var _this$session = this.session,
-        tracker = _this$session.tracker,
-        page = _this$session.page;
       var _iterator = _createForOfIteratorHelper(entries),
         _step;
       try {
         for (_iterator.s(); !(_step = _iterator.n()).done;) {
           var entry = _step.value;
-          var update = tracker.merge(entry);
-          if (!update) {
-            continue;
-          }
-          if (update.type === 'new') {
-            page.add(update.latencyMs);
-            if (update.group) {
-              this.session[update.group].add(update.latencyMs);
-            }
-          } else {
-            page.remeasure(update.fromMs, update.toMs);
-            if (update.group) {
-              this.session[update.group].remeasure(update.fromMs, update.toMs);
+          var _iterator2 = _createForOfIteratorHelper(this.session.tracker.merge(entry)),
+            _step2;
+          try {
+            for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
+              var _this$session$slowest2;
+              var update = _step2.value;
+              var groupsChanged = this.session.page.trackInteractionUpdate(update);
+              if (update.group) {
+                groupsChanged = this.session[update.group].trackInteractionUpdate(update) || groupsChanged;
+              }
+              var slowestChanged = (_this$session$slowest2 = this.session.slowest) === null || _this$session$slowest2 === void 0 ? void 0 : _this$session$slowest2.trackInteractionUpdate(entry, update);
+              if (groupsChanged || slowestChanged) {
+                this.session.revision += 1;
+              }
             }
+          } catch (err) {
+            _iterator2.e(err);
+          } finally {
+            _iterator2.f();
           }
-          this.session.revision += 1;
         }
       } catch (err) {
         _iterator.e(err);
@@ -284,6 +309,7 @@ export var InteractivityCollector = /*#__PURE__*/function () {
   }, {
     key: "takeSnapshot",
     value: function takeSnapshot(reason) {
+      var _this$longAnimationFr3, _session$slowest;
       if (this.stopped) {
         return;
       }
@@ -297,10 +323,11 @@ export var InteractivityCollector = /*#__PURE__*/function () {
         return;
       }
 
-      // Must run before the change check: the browser may be holding entries that have not
-      // reached the observer callback yet, and on `pagehide` there is no later chance to
-      // pick them up.
+      // Must run before the change check: the browser may be holding entries and frames that have
+      // not reached the observer callbacks yet, and on `pagehide` there is no later chance to
+      // pick them up. Entries first, so a record the frames answer for exists by then.
       this.interactionObserver.drain();
+      (_this$longAnimationFr3 = this.longAnimationFrameObserver) === null || _this$longAnimationFr3 === void 0 || _this$longAnimationFr3.drain();
       if (session.revision === session.emittedRevision) {
         return;
       }
@@ -312,7 +339,8 @@ export var InteractivityCollector = /*#__PURE__*/function () {
       var now = performance.now();
       var hiddenMs = session.hiddenMs + (session.hiddenSince === undefined ? 0 : now - session.hiddenSince);
       var pageTotalCount = InteractionObserver.readPageInteractionCount() - session.interactionCountAtStart;
-      this.emit({
+      var slowest = (_session$slowest = session.slowest) === null || _session$slowest === void 0 ? void 0 : _session$slowest.snapshot();
+      this.emit(_objectSpread({
         schema: SCHEMA_VERSION,
         interactivitySessionId: session.id,
         objectId: session.objectId,
@@ -328,7 +356,9 @@ export var InteractivityCollector = /*#__PURE__*/function () {
         editorTyping: session.editorTyping.snapshot(),
         editorPointer: session.editorPointer.snapshot(),
         editorOther: session.editorOther.snapshot()
-      });
+      }, slowest && {
+        slowest: slowest
+      }));
     }
   }]);
 }();

package/dist/esm/collector/interactivity-session.js

@@ -1,9 +1,11 @@
 import _createClass from "@babel/runtime/helpers/createClass";
 import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
 import { InteractionObserver } from './interaction-observer';
 import { InteractionTracker } from './interaction-tracker';
 import { InteractionGroup } from './interaction-group';
+import { SlowInteractionList } from './slow-interaction-list';
 function createSessionId() {
   if (typeof crypto.randomUUID === 'function') {
     return crypto.randomUUID();
@@ -30,6 +32,7 @@ export var InteractivitySession = /*#__PURE__*/_createClass(function Interactivi
   _defineProperty(this, "editorTyping", new InteractionGroup());
   _defineProperty(this, "editorPointer", new InteractionGroup());
   _defineProperty(this, "editorOther", new InteractionGroup());
+  _defineProperty(this, "slowest", isExperimentEnabled('platform_editor_editor_interactivity_slowest') ? new SlowInteractionList() : undefined);
   /** Increments per snapshot; a query takes the highest one per session. */
   _defineProperty(this, "seq", 0);
   _defineProperty(this, "hiddenMs", 0);

package/dist/esm/collector/long-animation-frame-observer.js

@@ -0,0 +1,55 @@
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
+/**
+ * Reports the frames the browser took longer than 50 ms to render to `onFrames`. They are what says
+ * where the time of a slow interaction went — which script ran the longest while the user waited,
+ * and how much of the wait was style and layout — which Event Timing cannot answer.
+ *
+ * What they say about an interaction is `SlowInteractionList`'s to work out; this only observes.
+ */
+export var LongAnimationFrameObserver = /*#__PURE__*/function () {
+  function LongAnimationFrameObserver(onFrames) {
+    _classCallCheck(this, LongAnimationFrameObserver);
+    this.onFrames = onFrames;
+  }
+  return _createClass(LongAnimationFrameObserver, [{
+    key: "start",
+    value: function start() {
+      var _this = this;
+      if (this.observer || !LongAnimationFrameObserver.isSupported()) {
+        return;
+      }
+      this.observer = new PerformanceObserver(function (list) {
+        _this.onFrames(list.getEntries());
+      });
+
+      // Buffered, as `web-vitals` observes them: a frame reported before the editor mounted can
+      // still be the one an interaction right after it ran in.
+      this.observer.observe({
+        type: 'long-animation-frame',
+        buffered: true
+      });
+    }
+  }, {
+    key: "drain",
+    value: function drain() {
+      var _this$observer;
+      var frames = (_this$observer = this.observer) === null || _this$observer === void 0 ? void 0 : _this$observer.takeRecords();
+      if (frames) {
+        this.onFrames(frames);
+      }
+    }
+  }, {
+    key: "stop",
+    value: function stop() {
+      var _this$observer2;
+      (_this$observer2 = this.observer) === null || _this$observer2 === void 0 || _this$observer2.disconnect();
+      this.observer = undefined;
+    }
+  }], [{
+    key: "isSupported",
+    value: function isSupported() {
+      return typeof PerformanceObserver !== 'undefined' && PerformanceObserver.supportedEntryTypes.includes('long-animation-frame');
+    }
+  }]);
+}();