@atlaskit/editor-plugin-interactivity 1.1.0 → 1.2.1

package/dist/es2019/collector/slow-interaction-list.js

@@ -1,4 +1,5 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import { BoundedList } from '../collections/bounded-list';
 /** Fixed by the schema, so the event stays a bounded size. */
 const MAX_RECORDS = 5;
 
@@ -8,6 +9,12 @@ const MAX_RECORDS = 5;
  */
 const MIN_LATENCY_MS = 200;
 
+/**
+ * How many frames are kept to attribute records from. An interaction spans one paint, so a few dozen
+ * cover even a second of a janky page.
+ */
+const MAX_FRAMES = 64;
+
 /**
  * The attributes a target may be named by, all of them ours: `data-vc` for visual completion, the
  * test ids for tests. Ids, roles, class names, text and accessibility labels are left out because
@@ -18,13 +25,40 @@ const MAX_TARGET_ELEMENTS = 4;
 const MAX_ATTRIBUTE_VALUE_LENGTH = 32;
 const MAX_TARGET_LENGTH = 120;
 
-/** The id identifies an interaction across the entries measuring it. It is not reported. */
+/** How long a reported script or function name may be. */
+const MAX_NAME_LENGTH = 64;
+const QUERY_OR_HASH = /[?#]/u;
+
+/** The part of a record that only the frames the interaction ran in can fill in. */
 
-/** An interaction as the collector's two observers saw it. */
+/**
+ * Whether two attributions say the same thing. Shallow, because every field of one is a number or a
+ * string; by the field names of both, so that a field going missing counts as a change rather than
+ * as nothing to see.
+ */
+function sameAttribution(one, other) {
+  const fields = Object.keys(one);
+  return fields.length === Object.keys(other).length && fields.every(field => one[field] === other[field]);
+}
+
+/**
+ * One recorded interaction. The reported phases are not among its fields: they are the gaps between
+ * the boundaries, worked out when the record is reported, which is also where the latency is
+ * rounded into the `durationMs` the event carries.
+ *
+ * The attribution is kept whole rather than spread across the record, so that a record can never
+ * hold half of what one set of frames said and half of what another did.
+ *
+ * `interactionId` identifies the interaction across the entries measuring it, and `boundaries` is
+ * also what its frames are matched to it by. Neither is reported.
+ */
 
 /**
  * The slowest interactions of one session, which is what the event's `slowest` records are.
  *
+ * Interactions arrive from the tracker and frames from the Long Animation Frame observer, and this
+ * is where the two meet: a record says both how long the user waited and where that time went.
+ *
  * A record is built from the entry that measured the interaction, as that entry arrives:
  * `entry.target` is `null` once the element has left the document.
  */
@@ -32,84 +66,244 @@ export class SlowInteractionList {
   constructor() {
     /** Slowest first. */
     _defineProperty(this, "records", []);
+    _defineProperty(this, "frames", new BoundedList(MAX_FRAMES));
   }
-  track(interaction) {
+  /**
+   * Takes in what the tracker now says about an interaction, keeping it when it is one of the
+   * slowest of the session.
+   *
+   * @returns whether that changed what a snapshot would carry.
+   */
+  trackInteractionUpdate(entry, update) {
     const {
+      boundaries,
       interactionId,
       latencyMs
-    } = interaction;
-    const previousIndex = this.records.findIndex(existing => existing.interactionId === interactionId);
-    let toBeatMs = MIN_LATENCY_MS;
-    if (previousIndex !== -1) {
-      // An interaction's latency grows as later entries arrive, and it replaces itself rather
-      // than taking a second place.
-      toBeatMs = this.records[previousIndex].durationMs;
-    } else if (this.records.length === MAX_RECORDS) {
-      toBeatMs = this.records[MAX_RECORDS - 1].durationMs;
-    }
-    if (latencyMs <= toBeatMs) {
-      return;
+    } = update;
+    const index = this.records.findIndex(record => record.interactionId === interactionId);
+    const knownRecord = index === -1 ? undefined : this.records[index];
+    if (knownRecord && latencyMs <= knownRecord.latencyMs) {
+      var _knownRecord$boundari, _knownRecord$boundari2;
+      // The interaction at the latency it already had, so its name and target still come from
+      // the entry that measured it at its slowest — and so do `startedAt` and `presentedAt`,
+      // which leaves the processing as the only pair that can have moved.
+      if (((_knownRecord$boundari = knownRecord.boundaries) === null || _knownRecord$boundari === void 0 ? void 0 : _knownRecord$boundari.processingStartedAt) === (boundaries === null || boundaries === void 0 ? void 0 : boundaries.processingStartedAt) && ((_knownRecord$boundari2 = knownRecord.boundaries) === null || _knownRecord$boundari2 === void 0 ? void 0 : _knownRecord$boundari2.processingEndedAt) === (boundaries === null || boundaries === void 0 ? void 0 : boundaries.processingEndedAt)) {
+        return false;
+      }
+      knownRecord.boundaries = boundaries;
+      this.attribute(knownRecord);
+      return true;
     }
 
-    // Read only once the interaction has earned a place: naming its target walks the DOM, and
-    // this runs while the page is already slow.
-    const record = this.toRecord(interaction);
-    if (previousIndex === -1) {
-      this.records.push(record);
+    // Everything below builds a record out of `entry`, so it has to be an entry of this
+    // interaction. The tracker also reports an interaction whose boundaries moved because of an
+    // event that is no interaction of its own, and that event names something else entirely.
+    if (entry.interactionId !== interactionId) {
+      return false;
+    }
+    if (knownRecord) {
+      // An interaction measured as slower replaces itself rather than taking a second place.
+      this.records[index] = this.toRecord(entry, update);
     } else {
-      this.records[previousIndex] = record;
+      const toBeatMs = this.records.length === MAX_RECORDS ? this.records[MAX_RECORDS - 1].latencyMs : MIN_LATENCY_MS;
+      if (latencyMs <= toBeatMs) {
+        return false;
+      }
+      this.records.push(this.toRecord(entry, update));
     }
-    this.records.sort((a, b) => b.durationMs - a.durationMs);
+    this.records.sort((a, b) => b.latencyMs - a.latencyMs);
     this.records.splice(MAX_RECORDS);
+    return true;
   }
 
-  /** @returns the records, slowest first, or nothing when no interaction was slow enough. */
+  /**
+   * Takes in the frames the browser has just reported and works out again what the frames say about
+   * every record — again, because the frames of one interaction can be reported in several batches
+   * and the first of them may hold neither its longest script nor all of its style and layout.
+   *
+   * @returns whether that changed what a snapshot would carry.
+   */
+  trackLongAnimationFrames(frames) {
+    this.frames.push(...frames);
+    let changed = false;
+    for (const record of this.records) {
+      changed = this.attribute(record) || changed;
+    }
+    return changed;
+  }
   snapshot() {
     if (this.records.length === 0) {
       return undefined;
     }
-    return this.records.map(record => ({
-      group: record.group,
-      name: record.name,
-      durationMs: record.durationMs,
-      inputDelayMs: record.inputDelayMs,
-      processingMs: record.processingMs,
-      presentationDelayMs: record.presentationDelayMs,
-      target: record.target
-    }));
+    return this.records.map(record => {
+      var _record$attribution, _record$attribution2, _record$attribution3, _record$attribution4, _record$attribution5, _record$attribution6, _record$attribution7, _record$attribution8, _record$attribution9;
+      const boundaries = record.boundaries;
+      return {
+        group: record.group,
+        name: record.name,
+        durationMs: Math.round(record.latencyMs),
+        inputDelayMs: boundaries && Math.round(boundaries.processingStartedAt - boundaries.startedAt),
+        processingMs: boundaries && Math.round(boundaries.processingEndedAt - boundaries.processingStartedAt),
+        presentationDelayMs: boundaries && Math.round(boundaries.presentedAt - boundaries.processingEndedAt),
+        target: record.target,
+        functionName: (_record$attribution = record.attribution) === null || _record$attribution === void 0 ? void 0 : _record$attribution.functionName,
+        invokerType: (_record$attribution2 = record.attribution) === null || _record$attribution2 === void 0 ? void 0 : _record$attribution2.invokerType,
+        longestScriptMs: (_record$attribution3 = record.attribution) === null || _record$attribution3 === void 0 ? void 0 : _record$attribution3.longestScriptMs,
+        scriptName: (_record$attribution4 = record.attribution) === null || _record$attribution4 === void 0 ? void 0 : _record$attribution4.scriptName,
+        scriptSubpart: (_record$attribution5 = record.attribution) === null || _record$attribution5 === void 0 ? void 0 : _record$attribution5.scriptSubpart,
+        totalPaintDurationMs: (_record$attribution6 = record.attribution) === null || _record$attribution6 === void 0 ? void 0 : _record$attribution6.totalPaintDurationMs,
+        totalScriptDurationMs: (_record$attribution7 = record.attribution) === null || _record$attribution7 === void 0 ? void 0 : _record$attribution7.totalScriptDurationMs,
+        totalStyleAndLayoutDurationMs: (_record$attribution8 = record.attribution) === null || _record$attribution8 === void 0 ? void 0 : _record$attribution8.totalStyleAndLayoutDurationMs,
+        totalUnattributedDurationMs: (_record$attribution9 = record.attribution) === null || _record$attribution9 === void 0 ? void 0 : _record$attribution9.totalUnattributedDurationMs
+      };
+    });
+  }
+  toRecord(entry, update) {
+    var _update$group;
+    // The target is read only once the interaction has earned a place: naming it walks the DOM,
+    // and this runs while the page is already slow.
+    const record = {
+      attribution: undefined,
+      boundaries: update.boundaries,
+      interactionId: update.interactionId,
+      // An interaction the editor never reported an event for is not the editor's as far as we
+      // know.
+      group: (_update$group = update.group) !== null && _update$group !== void 0 ? _update$group : 'outsideEditor',
+      name: entry.name,
+      latencyMs: update.latencyMs,
+      target: this.describeTarget(entry.target)
+    };
+
+    // Frames reported before this entry already answer for it.
+    this.attribute(record);
+    return record;
+  }
+  attribute(record) {
+    const attribution = record.boundaries && this.attributionFor(record.boundaries);
+    if (!attribution) {
+      return false;
+    }
+    if (record.attribution && sameAttribution(record.attribution, attribution)) {
+      return false;
+    }
+    record.attribution = attribution;
+    return true;
   }
 
   /**
-   * The phases are reported together or not at all: a browser that reports one reports all three,
-   * and zeroes standing in for values we never had would read as an interaction that spent no time
-   * anywhere. Each is clamped, because they come from timestamps the browser coarsens
-   * independently, so a phase can come out just below zero.
+   * What the frames say about an interaction, attributed the way `web-vitals` attributes INP: every
+   * frame overlapping the interaction counts, the script that counts is the one with the longest
+   * part inside it, and style and layout is summed across those frames.
+   *
+   * @returns nothing when no frame overlaps the interaction — the browser reports frames above
+   * 50 ms only.
    */
-  toRecord({
-    entry,
-    group,
-    interactionId,
-    latencyMs
-  }) {
-    const {
-      processingStart,
-      processingEnd,
-      startTime
-    } = entry;
-    const measured = typeof processingStart === 'number' && typeof processingEnd === 'number';
-    const phaseMs = durationMs => Math.max(0, Math.round(durationMs));
+  attributionFor(boundaries) {
+    var _longestScript, _longestScript2, _longestScript3;
+    let overlapped = false;
+    let lastFrameEndTime = 0;
+    let totalScriptDurationMs = 0;
+    let totalStyleAndLayoutDurationMs = 0;
+    let longestScript;
+    let longestScriptMs = 0;
+    for (const frame of this.frames) {
+      // Frames come in the order they were rendered, so once one starts after the interaction,
+      // so does every frame after it.
+      if (frame.startTime > boundaries.processingEndedAt) {
+        break;
+      }
+      const frameEndTime = frame.startTime + frame.duration;
+      if (frameEndTime < boundaries.startedAt) {
+        continue;
+      }
+      overlapped = true;
+      lastFrameEndTime = frameEndTime;
+      totalStyleAndLayoutDurationMs += this.styleAndLayoutOf(frame);
+      for (const script of (_frame$scripts = frame.scripts) !== null && _frame$scripts !== void 0 ? _frame$scripts : []) {
+        var _frame$scripts, _script$forcedStyleAn;
+        const scriptEndTime = script.startTime + script.duration;
+        if (scriptEndTime < boundaries.startedAt) {
+          continue;
+        }
+        const insideInteractionMs = scriptEndTime - Math.max(boundaries.startedAt, script.startTime);
+        // `forcedStyleAndLayoutDuration` carries no timestamps, so the part of it inside the
+        // interaction is apportioned. It counts as style and layout rather than script time,
+        // the same split DevTools shows.
+        const forcedInsideMs = script.duration ? insideInteractionMs / script.duration * ((_script$forcedStyleAn = script.forcedStyleAndLayoutDuration) !== null && _script$forcedStyleAn !== void 0 ? _script$forcedStyleAn : 0) : 0;
+        totalScriptDurationMs += insideInteractionMs - forcedInsideMs;
+        totalStyleAndLayoutDurationMs += forcedInsideMs;
+        if (insideInteractionMs > longestScriptMs) {
+          longestScript = script;
+          longestScriptMs = insideInteractionMs;
+        }
+      }
+    }
+    if (!overlapped) {
+      return undefined;
+    }
+
+    // What the browser did after the last frame of the interaction, so it only counts when that
+    // frame ended no earlier than the handlers did.
+    const totalPaintDurationMs = lastFrameEndTime >= boundaries.processingEndedAt ? Math.max(0, boundaries.presentedAt - lastFrameEndTime) : 0;
+    // Every total is brought to what it is reported as before this subtraction, so that the four
+    // of them add up to the latency rather than to more than it: a frame whose render phase runs
+    // past the interaction would otherwise leave a negative here to be counted twice.
+    totalScriptDurationMs = Math.max(0, totalScriptDurationMs);
+    totalStyleAndLayoutDurationMs = Math.max(0, totalStyleAndLayoutDurationMs);
+    // Whatever is left of the latency: the thread was busy with something the frames attributed
+    // to no script, to no style and layout, and to no paint.
+    const totalUnattributedDurationMs = Math.max(0, boundaries.presentedAt - boundaries.startedAt - totalScriptDurationMs - totalStyleAndLayoutDurationMs - totalPaintDurationMs);
     return {
-      interactionId,
-      group,
-      name: entry.name,
-      durationMs: Math.round(latencyMs),
-      inputDelayMs: measured ? phaseMs(processingStart - startTime) : undefined,
-      processingMs: measured ? phaseMs(processingEnd - processingStart) : undefined,
-      presentationDelayMs: measured ? phaseMs(startTime + latencyMs - processingEnd) : undefined,
-      target: this.describeTarget(entry.target)
+      functionName: this.truncated((_longestScript = longestScript) === null || _longestScript === void 0 ? void 0 : _longestScript.sourceFunctionName),
+      invokerType: this.truncated((_longestScript2 = longestScript) === null || _longestScript2 === void 0 ? void 0 : _longestScript2.invokerType),
+      longestScriptMs: longestScript && Math.round(longestScriptMs),
+      scriptName: this.truncated(this.fileName((_longestScript3 = longestScript) === null || _longestScript3 === void 0 ? void 0 : _longestScript3.sourceURL)),
+      scriptSubpart: longestScript && this.subpartOf(longestScript, boundaries),
+      totalPaintDurationMs: Math.round(totalPaintDurationMs),
+      totalScriptDurationMs: Math.round(totalScriptDurationMs),
+      totalStyleAndLayoutDurationMs: Math.round(totalStyleAndLayoutDurationMs),
+      totalUnattributedDurationMs: Math.round(totalUnattributedDurationMs)
     };
   }
 
+  /**
+   * Style, layout and paint of the frame, which the browser reports as starting at 0 when the
+   * frame did none.
+   */
+  styleAndLayoutOf(frame) {
+    const {
+      styleAndLayoutStart
+    } = frame;
+    if (typeof styleAndLayoutStart !== 'number' || styleAndLayoutStart === 0) {
+      return 0;
+    }
+    const frameEndTime = frame.startTime + frame.duration;
+    return Math.max(0, frameEndTime - styleAndLayoutStart);
+  }
+
+  /** Which phase of the interaction the script ran in, by where it started. */
+  subpartOf(script, boundaries) {
+    if (script.startTime < boundaries.processingStartedAt) {
+      return 'inputDelay';
+    }
+    return script.startTime >= boundaries.processingEndedAt ? 'presentationDelay' : 'processing';
+  }
+  truncated(name) {
+    return name ? name.slice(0, MAX_NAME_LENGTH) : undefined;
+  }
+
+  /**
+   * The file as the browser named it, content hash and all: that is what identifies the artefact
+   * and its source map, and a query can be grouped away downstream.
+   */
+  fileName(sourceURL) {
+    if (!sourceURL) {
+      return undefined;
+    }
+    const path = sourceURL.split(QUERY_OR_HASH)[0];
+    return path.slice(path.lastIndexOf('/') + 1);
+  }
+
   /**
    * Names the element an interaction happened on — `div[data-vc="x"] > p > span`, outermost first.
    * The path climbs until an element carries an allow-listed attribute, because that is what says

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

@@ -0,0 +1,35 @@
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+/** An array that forgets its oldest item once it holds more than `limit`. */
+export var BoundedList = /*#__PURE__*/function () {
+  function BoundedList(limit) {
+    _classCallCheck(this, BoundedList);
+    _defineProperty(this, "items", []);
+    this.limit = limit;
+  }
+  return _createClass(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/esm/collections/bounded-map.js

@@ -0,0 +1,35 @@
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+/** A `Map` that forgets its oldest entry once it holds more than `limit`. */
+export var BoundedMap = /*#__PURE__*/function () {
+  function BoundedMap(limit) {
+    _classCallCheck(this, BoundedMap);
+    _defineProperty(this, "entries", new Map());
+    this.limit = limit;
+  }
+  return _createClass(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/esm/collector/interaction-events.js

@@ -11,6 +11,10 @@
  * every repeat of a held key, and nothing cancels a key press. Pointing is counted on `pointerup`,
  * since a press cannot repeat but can be taken over by a scroll — which the browser does not count
  * either, and in that case `pointerup` never arrives.
+ *
+ * Counting events is also why an editor group's `totalCount` is not comparable with `page`'s, which
+ * is told `performance.interactionCount`: when an event is counted the collector cannot know whether
+ * the browser will open an interaction for it.
  */
 var INTERACTION_EVENTS = {
   keydown: {

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

@@ -5,7 +5,6 @@ function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol
 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 { bucketKeyForMs } from './bucket-boundaries';
-
 /**
  * Latencies are counted per 8 ms, the resolution Event Timing reports durations at. Every
  * latency is rounded up to this step on the way in, which caps the number of distinct values
@@ -25,10 +24,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.
  */
 export var InteractionGroup = /*#__PURE__*/function () {
   function InteractionGroup() {
@@ -37,6 +36,22 @@ export var InteractionGroup = /*#__PURE__*/function () {
     _defineProperty(this, "totalCount", 0);
   }
   return _createClass(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);
@@ -51,12 +66,23 @@ export var 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;
     }
 
     /**