@atlaskit/react-ufo 3.6.7 → 3.7.0

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @atlaskit/ufo-interaction-ignore
 
+## 3.7.0
+
+### Minor Changes
+
+- [#144155](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/144155)
+  [`328fc686d8e34`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/328fc686d8e34) -
+  Added inp and input delay to React UFO press interactions
+
 ## 3.6.7
 
 ### Patch Changes

package/dist/cjs/create-payload/index.js

@@ -705,7 +705,7 @@ function createInteractionMetricsPayload(_x3, _x4, _x5) {
 function _createInteractionMetricsPayload() {
   _createInteractionMetricsPayload = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2(interaction, interactionId, experimental) {
     var _window$location, _config$additionalPay;
-    var interactionPayloadStart, config, end, start, ufoName, knownSegments, rate, type, abortReason, routeName, featureFlags, previousInteractionName, isPreviousInteractionAborted, abortedByInteractionName, pageVisibilityAtTTI, pageVisibilityAtTTAI, segments, segmentTree, isDetailedPayload, isPageLoad, calculatePageVisibilityFromTheStartOfPageLoad, moreAccuratePageVisibilityAtTTI, moreAccuratePageVisibilityAtTTAI, labelStack, getInitialPageLoadSSRMetrics, pageLoadInteractionMetrics, getDetailedInteractionMetrics, getPageLoadDetailedInteractionMetrics, newUFOName, resourceTimings, _yield$Promise$all, _yield$Promise$all2, vcMetrics, experimentalMetrics, paintMetrics, payload;
+    var interactionPayloadStart, config, end, start, ufoName, knownSegments, rate, type, abortReason, routeName, featureFlags, previousInteractionName, isPreviousInteractionAborted, abortedByInteractionName, responsiveness, pageVisibilityAtTTI, pageVisibilityAtTTAI, segments, segmentTree, isDetailedPayload, isPageLoad, calculatePageVisibilityFromTheStartOfPageLoad, moreAccuratePageVisibilityAtTTI, moreAccuratePageVisibilityAtTTAI, labelStack, getInitialPageLoadSSRMetrics, pageLoadInteractionMetrics, getDetailedInteractionMetrics, getPageLoadDetailedInteractionMetrics, newUFOName, resourceTimings, _yield$Promise$all, _yield$Promise$all2, vcMetrics, experimentalMetrics, paintMetrics, payload;
     return _regenerator.default.wrap(function _callee2$(_context2) {
       while (1) switch (_context2.prev = _context2.next) {
         case 0:
@@ -717,7 +717,7 @@ function _createInteractionMetricsPayload() {
           }
           throw Error('UFO Configuration not provided');
         case 4:
-          end = interaction.end, start = interaction.start, ufoName = interaction.ufoName, knownSegments = interaction.knownSegments, rate = interaction.rate, type = interaction.type, abortReason = interaction.abortReason, routeName = interaction.routeName, featureFlags = interaction.featureFlags, previousInteractionName = interaction.previousInteractionName, isPreviousInteractionAborted = interaction.isPreviousInteractionAborted, abortedByInteractionName = interaction.abortedByInteractionName;
+          end = interaction.end, start = interaction.start, ufoName = interaction.ufoName, knownSegments = interaction.knownSegments, rate = interaction.rate, type = interaction.type, abortReason = interaction.abortReason, routeName = interaction.routeName, featureFlags = interaction.featureFlags, previousInteractionName = interaction.previousInteractionName, isPreviousInteractionAborted = interaction.isPreviousInteractionAborted, abortedByInteractionName = interaction.abortedByInteractionName, responsiveness = interaction.responsiveness;
           pageVisibilityAtTTI = getPageVisibilityUpToTTI(interaction);
           pageVisibilityAtTTAI = (0, _getPageVisibilityUpToTtai.default)(interaction);
           segments = config.killswitchNestedSegments ? [] : knownSegments;
@@ -819,7 +819,7 @@ function _createInteractionMetricsPayload() {
                 'experience:key': experimental ? 'custom.experimental-interaction-metrics' : 'custom.interaction-metrics',
                 'experience:name': newUFOName
               }, getBrowserMetadata()), getSSRProperties(type)), getAssetsMetrics(interaction, pageLoadInteractionMetrics === null || pageLoadInteractionMetrics === void 0 ? void 0 : pageLoadInteractionMetrics.SSRDoneTime)), getPPSMetrics(interaction)), paintMetrics), getNavigationMetrics(type)), vcMetrics), experimentalMetrics), (_config$additionalPay = config.additionalPayloadData) === null || _config$additionalPay === void 0 ? void 0 : _config$additionalPay.call(config, interaction)), getTracingContextData(interaction)), getStylesheetMetrics()), getErrorCounts(interaction)), {}, {
-                interactionMetrics: _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({
+                interactionMetrics: _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({
                   namePrefix: config.namePrefix || '',
                   segmentPrefix: config.segmentPrefix || '',
                   interactionId: interactionId,
@@ -850,7 +850,9 @@ function _createInteractionMetricsPayload() {
                   marks: optimizeMarks(interaction.marks, (0, _getReactUfoPayloadVersion.getReactUFOPayloadVersion)(interaction.type)),
                   customData: optimizeCustomData(interaction),
                   reactProfilerTimings: optimizeReactProfilerTimings(interaction.reactProfilerTimings, start, (0, _getReactUfoPayloadVersion.getReactUFOPayloadVersion)(interaction.type))
-                }, labelStack), pageLoadInteractionMetrics), getDetailedInteractionMetrics(resourceTimings)), getPageLoadDetailedInteractionMetrics()), getBm3TrackerTimings(interaction)), {}, {
+                }, responsiveness ? {
+                  responsiveness: responsiveness
+                } : {}), labelStack), pageLoadInteractionMetrics), getDetailedInteractionMetrics(resourceTimings)), getPageLoadDetailedInteractionMetrics()), getBm3TrackerTimings(interaction)), {}, {
                   'metric:ttai': experimental ? regularTTAI || expTTAI : undefined,
                   'metric:experimental:ttai': expTTAI
                 }),

package/dist/cjs/interaction-metrics/index.js

@@ -34,10 +34,11 @@ exports.addSpanToAll = addSpanToAll;
 exports.extractModuleName = extractModuleName;
 exports.getActiveInteraction = getActiveInteraction;
 exports.getCurrentInteractionType = getCurrentInteractionType;
-exports.postInteractionLog = exports.interactionSpans = void 0;
+exports.postInteractionLog = exports.interactionSpans = exports.getPerformanceObserver = void 0;
 exports.remove = remove;
 exports.removeHoldByID = removeHoldByID;
 exports.removeSegment = removeSegment;
+exports.setInteractionPerformanceEvent = void 0;
 exports.sinkInteractionHandler = sinkInteractionHandler;
 exports.sinkPostInteractionLogHandler = sinkPostInteractionLogHandler;
 exports.tryComplete = tryComplete;
@@ -83,6 +84,45 @@ function isPerformanceTracingEnabled() {
   var _getConfig;
   return ((_getConfig = (0, _config.getConfig)()) === null || _getConfig === void 0 ? void 0 : _getConfig.enableAdditionalPerformanceMarks) || window.__REACT_UFO_ENABLE_PERF_TRACING || process.env.NODE_ENV !== 'production';
 }
+var performanceEventObserver;
+var getPerformanceObserver = exports.getPerformanceObserver = function getPerformanceObserver() {
+  performanceEventObserver = performanceEventObserver || new PerformanceObserver(function (entries) {
+    var list = entries.getEntries();
+    var _iterator = _createForOfIteratorHelper(list),
+      _step;
+    try {
+      for (_iterator.s(); !(_step = _iterator.n()).done;) {
+        var entry = _step.value;
+        if (entry.name === 'click') {
+          setInteractionPerformanceEvent(entry);
+        }
+      }
+    } catch (err) {
+      _iterator.e(err);
+    } finally {
+      _iterator.f();
+    }
+  });
+  return performanceEventObserver;
+};
+var setInteractionPerformanceEvent = exports.setInteractionPerformanceEvent = function setInteractionPerformanceEvent(entry) {
+  var interaction = getActiveInteraction();
+  if ((interaction === null || interaction === void 0 ? void 0 : interaction.type) === 'press') {
+    var responsiveness = interaction.responsiveness || {};
+    // if happens there is another event interaction that has started after
+    // the initial one, we don't want to replace the values if they have already
+    // been set up
+    responsiveness.experimentalInputToNextPaint = responsiveness.experimentalInputToNextPaint || entry.duration;
+    responsiveness.inputDelay = responsiveness.experimentalInputToNextPaint || entry.processingStart - entry.startTime;
+    interaction.responsiveness = responsiveness;
+    // if the entry start time is lower than the one in the interaction
+    // it means the interaction start time is not accurate, we assign
+    // this value which will match the timestamp in the event
+    if (entry.startTime < interaction.start) {
+      interaction.start = entry.startTime;
+    }
+  }
+};
 function labelStackToString(labelStack, name) {
   var _stack$map;
   var stack = (0, _toConsumableArray2.default)(labelStack !== null && labelStack !== void 0 ? labelStack : []);
@@ -103,17 +143,17 @@ function labelStackToIdString(labelStack) {
 }
 function addSegmentObserver(observer) {
   segmentObservers.push(observer);
-  var _iterator = _createForOfIteratorHelper(segmentCache.values()),
-    _step;
+  var _iterator2 = _createForOfIteratorHelper(segmentCache.values()),
+    _step2;
   try {
-    for (_iterator.s(); !(_step = _iterator.n()).done;) {
-      var segmentInfo = _step.value;
+    for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
+      var segmentInfo = _step2.value;
       observer.onAdd(segmentInfo);
     }
   } catch (err) {
-    _iterator.e(err);
+    _iterator2.e(err);
   } finally {
-    _iterator.f();
+    _iterator2.f();
   }
 }
 function removeSegmentObserver(observer) {
@@ -530,24 +570,24 @@ function finishInteraction(id, data) {
     });
     try {
       // for Firefox 102 and older
-      var _iterator2 = _createForOfIteratorHelper(profilerTimingMap.entries()),
-        _step2;
+      var _iterator3 = _createForOfIteratorHelper(profilerTimingMap.entries()),
+        _step3;
       try {
-        for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
-          var _step2$value = (0, _slicedToArray2.default)(_step2.value, 2),
-            _step2$value$ = _step2$value[1],
-            labelStack = _step2$value$.labelStack,
-            start = _step2$value$.start,
-            end = _step2$value$.end;
+        for (_iterator3.s(); !(_step3 = _iterator3.n()).done;) {
+          var _step3$value = (0, _slicedToArray2.default)(_step3.value, 2),
+            _step3$value$ = _step3$value[1],
+            labelStack = _step3$value$.labelStack,
+            start = _step3$value$.start,
+            end = _step3$value$.end;
           performance.measure("\uD83D\uDEF8 ".concat(labelStackToString(labelStack), " [segment_ttai]"), {
             start: start,
             end: end
           });
         }
       } catch (err) {
-        _iterator2.e(err);
+        _iterator3.e(err);
       } finally {
-        _iterator2.f();
+        _iterator3.f();
       }
     } catch (e) {
       // do nothing

package/dist/cjs/interaction-metrics-init/index.js

@@ -13,6 +13,7 @@ var _config = require("../config");
 var _createExperimentalInteractionMetricsPayload = require("../create-experimental-interaction-metrics-payload");
 var _hiddenTiming = require("../hidden-timing");
 var _interactionMetrics = require("../interaction-metrics");
+var _interactionsPerformanceObserver = require("../interactions-performance-observer");
 var _vc = require("../vc");
 var _scheduleIdleCallback = _interopRequireDefault(require("./schedule-idle-callback"));
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
@@ -108,6 +109,16 @@ function init(analyticsWebClientAsync, config) {
   (0, _hiddenTiming.setupHiddenTimingCapture)();
   (0, _additionalPayload.startLighthouseObserver)();
   initialized = true;
+  if ((0, _platformFeatureFlags.fg)('platform_ufo_enable_events_observer')) {
+    if (typeof PerformanceObserver !== 'undefined') {
+      var observer = (0, _interactionsPerformanceObserver.getPerformanceObserver)();
+      observer.observe({
+        type: 'event',
+        buffered: true,
+        durationThreshold: 16
+      });
+    }
+  }
   Promise.all([analyticsWebClientAsync, Promise.resolve().then(function () {
     return _interopRequireWildcard(require( /* webpackChunkName: "create-payloads" */'../create-payload'));
   }), Promise.resolve().then(function () {

package/dist/cjs/interactions-performance-observer/index.js

@@ -0,0 +1,51 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.setInteractionPerformanceEvent = exports.getPerformanceObserver = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _interactionMetrics = require("../interaction-metrics");
+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) { (0, _defineProperty2.default)(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; }
+var performanceEventObserver;
+var getPerformanceObserver = exports.getPerformanceObserver = function getPerformanceObserver() {
+  performanceEventObserver = performanceEventObserver || new PerformanceObserver(function (entries) {
+    var list = entries.getEntries();
+    var _iterator = _createForOfIteratorHelper(list),
+      _step;
+    try {
+      for (_iterator.s(); !(_step = _iterator.n()).done;) {
+        var entry = _step.value;
+        if (entry.name === 'click') {
+          setInteractionPerformanceEvent(entry);
+        }
+      }
+    } catch (err) {
+      _iterator.e(err);
+    } finally {
+      _iterator.f();
+    }
+  });
+  return performanceEventObserver;
+};
+var setInteractionPerformanceEvent = exports.setInteractionPerformanceEvent = function setInteractionPerformanceEvent(entry) {
+  var interaction = (0, _interactionMetrics.getActiveInteraction)();
+  if ((interaction === null || interaction === void 0 ? void 0 : interaction.type) === 'press') {
+    var _interaction$responsi, _interaction$responsi2;
+    // if happens there is another event interaction that has started after
+    // the initial one, we don't want to replace the values if they have already been set up
+    interaction.responsiveness = _objectSpread(_objectSpread({}, interaction.responsiveness), {}, {
+      experimentalInputToNextPaint: ((_interaction$responsi = interaction.responsiveness) === null || _interaction$responsi === void 0 ? void 0 : _interaction$responsi.experimentalInputToNextPaint) || entry.duration,
+      inputDelay: ((_interaction$responsi2 = interaction.responsiveness) === null || _interaction$responsi2 === void 0 ? void 0 : _interaction$responsi2.inputDelay) || entry.processingStart - entry.startTime
+    });
+    // if the entry start time is lower than the one in the interaction
+    // it means the interaction start time is not accurate, we assign
+    // this value which will match the timestamp in the event
+    interaction.start = Math.min(interaction.start, entry.startTime);
+  }
+};

package/dist/cjs/segment/segment.js

@@ -35,7 +35,6 @@ var AsyncSegmentHighlight = /*#__PURE__*/(0, _react.lazy)(function () {
     };
   });
 });
-var noopIdMap = new Map();
 
 // KARL TODO: finish self profiling
 /** A portion of the page we apply measurement to */
@@ -47,19 +46,12 @@ function UFOSegment(_ref) {
     mode = _ref$mode === void 0 ? 'single' : _ref$mode;
   var parentContext = (0, _react.useContext)(_interactionContext.default);
   var segmentIdMap = (0, _react.useMemo)(function () {
-    if (!(0, _platformFeatureFlags.fg)('platform_ufo_segment_list_mode')) {
-      // just in case we cause rerender issues, use noop map
-      return noopIdMap;
-    }
     if (!(parentContext !== null && parentContext !== void 0 && parentContext.segmentIdMap)) {
       return new Map();
     }
     return parentContext.segmentIdMap;
   }, [parentContext]);
   var segmentId = (0, _react.useMemo)(function () {
-    if (!(0, _platformFeatureFlags.fg)('platform_ufo_segment_list_mode')) {
-      return (0, _shortId.default)();
-    }
     if (mode === 'single') {
       return (0, _shortId.default)();
     }

package/dist/es2019/create-payload/index.js

@@ -692,7 +692,8 @@ async function createInteractionMetricsPayload(interaction, interactionId, exper
     featureFlags,
     previousInteractionName,
     isPreviousInteractionAborted,
-    abortedByInteractionName
+    abortedByInteractionName,
+    responsiveness
   } = interaction;
   const pageVisibilityAtTTI = getPageVisibilityUpToTTI(interaction);
   const pageVisibilityAtTTAI = getPageVisibilityUpToTTAI(interaction);
@@ -834,6 +835,9 @@ async function createInteractionMetricsPayload(interaction, interactionId, exper
           marks: optimizeMarks(interaction.marks, getReactUFOPayloadVersion(interaction.type)),
           customData: optimizeCustomData(interaction),
           reactProfilerTimings: optimizeReactProfilerTimings(interaction.reactProfilerTimings, start, getReactUFOPayloadVersion(interaction.type)),
+          ...(responsiveness ? {
+            responsiveness
+          } : {}),
           ...labelStack,
           ...pageLoadInteractionMetrics,
           ...getDetailedInteractionMetrics(resourceTimings),

package/dist/es2019/interaction-metrics/index.js

@@ -29,6 +29,36 @@ function isPerformanceTracingEnabled() {
   var _getConfig;
   return ((_getConfig = getConfig()) === null || _getConfig === void 0 ? void 0 : _getConfig.enableAdditionalPerformanceMarks) || window.__REACT_UFO_ENABLE_PERF_TRACING || process.env.NODE_ENV !== 'production';
 }
+let performanceEventObserver;
+export const getPerformanceObserver = () => {
+  performanceEventObserver = performanceEventObserver || new PerformanceObserver(entries => {
+    const list = entries.getEntries();
+    for (let entry of list) {
+      if (entry.name === 'click') {
+        setInteractionPerformanceEvent(entry);
+      }
+    }
+  });
+  return performanceEventObserver;
+};
+export const setInteractionPerformanceEvent = entry => {
+  const interaction = getActiveInteraction();
+  if ((interaction === null || interaction === void 0 ? void 0 : interaction.type) === 'press') {
+    const responsiveness = interaction.responsiveness || {};
+    // if happens there is another event interaction that has started after
+    // the initial one, we don't want to replace the values if they have already
+    // been set up
+    responsiveness.experimentalInputToNextPaint = responsiveness.experimentalInputToNextPaint || entry.duration;
+    responsiveness.inputDelay = responsiveness.experimentalInputToNextPaint || entry.processingStart - entry.startTime;
+    interaction.responsiveness = responsiveness;
+    // if the entry start time is lower than the one in the interaction
+    // it means the interaction start time is not accurate, we assign
+    // this value which will match the timestamp in the event
+    if (entry.startTime < interaction.start) {
+      interaction.start = entry.startTime;
+    }
+  }
+};
 function labelStackToString(labelStack, name) {
   var _stack$map;
   const stack = [...(labelStack !== null && labelStack !== void 0 ? labelStack : [])];

package/dist/es2019/interaction-metrics-init/index.js

@@ -4,6 +4,7 @@ import { setUFOConfig } from '../config';
 import { experimentalVC, sinkExperimentalHandler } from '../create-experimental-interaction-metrics-payload';
 import { setupHiddenTimingCapture } from '../hidden-timing';
 import { postInteractionLog, sinkInteractionHandler, sinkPostInteractionLogHandler } from '../interaction-metrics';
+import { getPerformanceObserver } from '../interactions-performance-observer';
 import { getVCObserver } from '../vc';
 import scheduleIdleCallback from './schedule-idle-callback';
 let initialized = false;
@@ -97,6 +98,16 @@ export function init(analyticsWebClientAsync, config) {
   setupHiddenTimingCapture();
   startLighthouseObserver();
   initialized = true;
+  if (fg('platform_ufo_enable_events_observer')) {
+    if (typeof PerformanceObserver !== 'undefined') {
+      const observer = getPerformanceObserver();
+      observer.observe({
+        type: 'event',
+        buffered: true,
+        durationThreshold: 16
+      });
+    }
+  }
   Promise.all([analyticsWebClientAsync, import( /* webpackChunkName: "create-payloads" */'../create-payload'), import( /* webpackChunkName: "create-post-interaction-log-payload" */'../create-post-interaction-log-payload')]).then(([awc, payloadPackage, createPostInteractionLogPayloadPackage]) => {
     if (awc.getAnalyticsWebClientPromise) {
       awc.getAnalyticsWebClientPromise().then(client => {

package/dist/es2019/interactions-performance-observer/index.js

@@ -0,0 +1,30 @@
+import { getActiveInteraction } from '../interaction-metrics';
+let performanceEventObserver;
+export const getPerformanceObserver = () => {
+  performanceEventObserver = performanceEventObserver || new PerformanceObserver(entries => {
+    const list = entries.getEntries();
+    for (let entry of list) {
+      if (entry.name === 'click') {
+        setInteractionPerformanceEvent(entry);
+      }
+    }
+  });
+  return performanceEventObserver;
+};
+export const setInteractionPerformanceEvent = entry => {
+  const interaction = getActiveInteraction();
+  if ((interaction === null || interaction === void 0 ? void 0 : interaction.type) === 'press') {
+    var _interaction$responsi, _interaction$responsi2;
+    // if happens there is another event interaction that has started after
+    // the initial one, we don't want to replace the values if they have already been set up
+    interaction.responsiveness = {
+      ...interaction.responsiveness,
+      experimentalInputToNextPaint: ((_interaction$responsi = interaction.responsiveness) === null || _interaction$responsi === void 0 ? void 0 : _interaction$responsi.experimentalInputToNextPaint) || entry.duration,
+      inputDelay: ((_interaction$responsi2 = interaction.responsiveness) === null || _interaction$responsi2 === void 0 ? void 0 : _interaction$responsi2.inputDelay) || entry.processingStart - entry.startTime
+    };
+    // if the entry start time is lower than the one in the interaction
+    // it means the interaction start time is not accurate, we assign
+    // this value which will match the timestamp in the event
+    interaction.start = Math.min(interaction.start, entry.startTime);
+  }
+};

package/dist/es2019/segment/segment.js

@@ -15,7 +15,6 @@ let tryCompleteHandle;
 const AsyncSegmentHighlight = /*#__PURE__*/lazy(() => import( /* webpackChunkName: "@atlaskit-internal_ufo-segment-highlight" */'./segment-highlight').then(module => ({
   default: module.SegmentHighlight
 })));
-const noopIdMap = new Map();
 
 // KARL TODO: finish self profiling
 /** A portion of the page we apply measurement to */
@@ -27,19 +26,12 @@ export default function UFOSegment({
   var _getConfig2;
   const parentContext = useContext(UFOInteractionContext);
   const segmentIdMap = useMemo(() => {
-    if (!fg('platform_ufo_segment_list_mode')) {
-      // just in case we cause rerender issues, use noop map
-      return noopIdMap;
-    }
     if (!(parentContext !== null && parentContext !== void 0 && parentContext.segmentIdMap)) {
       return new Map();
     }
     return parentContext.segmentIdMap;
   }, [parentContext]);
   const segmentId = useMemo(() => {
-    if (!fg('platform_ufo_segment_list_mode')) {
-      return generateId();
-    }
     if (mode === 'single') {
       return generateId();
     }

package/dist/esm/create-payload/index.js

@@ -694,7 +694,7 @@ function createInteractionMetricsPayload(_x3, _x4, _x5) {
 function _createInteractionMetricsPayload() {
   _createInteractionMetricsPayload = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2(interaction, interactionId, experimental) {
     var _window$location, _config$additionalPay;
-    var interactionPayloadStart, config, end, start, ufoName, knownSegments, rate, type, abortReason, routeName, featureFlags, previousInteractionName, isPreviousInteractionAborted, abortedByInteractionName, pageVisibilityAtTTI, pageVisibilityAtTTAI, segments, segmentTree, isDetailedPayload, isPageLoad, calculatePageVisibilityFromTheStartOfPageLoad, moreAccuratePageVisibilityAtTTI, moreAccuratePageVisibilityAtTTAI, labelStack, getInitialPageLoadSSRMetrics, pageLoadInteractionMetrics, getDetailedInteractionMetrics, getPageLoadDetailedInteractionMetrics, newUFOName, resourceTimings, _yield$Promise$all, _yield$Promise$all2, vcMetrics, experimentalMetrics, paintMetrics, payload;
+    var interactionPayloadStart, config, end, start, ufoName, knownSegments, rate, type, abortReason, routeName, featureFlags, previousInteractionName, isPreviousInteractionAborted, abortedByInteractionName, responsiveness, pageVisibilityAtTTI, pageVisibilityAtTTAI, segments, segmentTree, isDetailedPayload, isPageLoad, calculatePageVisibilityFromTheStartOfPageLoad, moreAccuratePageVisibilityAtTTI, moreAccuratePageVisibilityAtTTAI, labelStack, getInitialPageLoadSSRMetrics, pageLoadInteractionMetrics, getDetailedInteractionMetrics, getPageLoadDetailedInteractionMetrics, newUFOName, resourceTimings, _yield$Promise$all, _yield$Promise$all2, vcMetrics, experimentalMetrics, paintMetrics, payload;
     return _regeneratorRuntime.wrap(function _callee2$(_context2) {
       while (1) switch (_context2.prev = _context2.next) {
         case 0:
@@ -706,7 +706,7 @@ function _createInteractionMetricsPayload() {
           }
           throw Error('UFO Configuration not provided');
         case 4:
-          end = interaction.end, start = interaction.start, ufoName = interaction.ufoName, knownSegments = interaction.knownSegments, rate = interaction.rate, type = interaction.type, abortReason = interaction.abortReason, routeName = interaction.routeName, featureFlags = interaction.featureFlags, previousInteractionName = interaction.previousInteractionName, isPreviousInteractionAborted = interaction.isPreviousInteractionAborted, abortedByInteractionName = interaction.abortedByInteractionName;
+          end = interaction.end, start = interaction.start, ufoName = interaction.ufoName, knownSegments = interaction.knownSegments, rate = interaction.rate, type = interaction.type, abortReason = interaction.abortReason, routeName = interaction.routeName, featureFlags = interaction.featureFlags, previousInteractionName = interaction.previousInteractionName, isPreviousInteractionAborted = interaction.isPreviousInteractionAborted, abortedByInteractionName = interaction.abortedByInteractionName, responsiveness = interaction.responsiveness;
           pageVisibilityAtTTI = getPageVisibilityUpToTTI(interaction);
           pageVisibilityAtTTAI = getPageVisibilityUpToTTAI(interaction);
           segments = config.killswitchNestedSegments ? [] : knownSegments;
@@ -808,7 +808,7 @@ function _createInteractionMetricsPayload() {
                 'experience:key': experimental ? 'custom.experimental-interaction-metrics' : 'custom.interaction-metrics',
                 'experience:name': newUFOName
               }, getBrowserMetadata()), getSSRProperties(type)), getAssetsMetrics(interaction, pageLoadInteractionMetrics === null || pageLoadInteractionMetrics === void 0 ? void 0 : pageLoadInteractionMetrics.SSRDoneTime)), getPPSMetrics(interaction)), paintMetrics), getNavigationMetrics(type)), vcMetrics), experimentalMetrics), (_config$additionalPay = config.additionalPayloadData) === null || _config$additionalPay === void 0 ? void 0 : _config$additionalPay.call(config, interaction)), getTracingContextData(interaction)), getStylesheetMetrics()), getErrorCounts(interaction)), {}, {
-                interactionMetrics: _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({
+                interactionMetrics: _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({
                   namePrefix: config.namePrefix || '',
                   segmentPrefix: config.segmentPrefix || '',
                   interactionId: interactionId,
@@ -839,7 +839,9 @@ function _createInteractionMetricsPayload() {
                   marks: optimizeMarks(interaction.marks, getReactUFOPayloadVersion(interaction.type)),
                   customData: optimizeCustomData(interaction),
                   reactProfilerTimings: optimizeReactProfilerTimings(interaction.reactProfilerTimings, start, getReactUFOPayloadVersion(interaction.type))
-                }, labelStack), pageLoadInteractionMetrics), getDetailedInteractionMetrics(resourceTimings)), getPageLoadDetailedInteractionMetrics()), getBm3TrackerTimings(interaction)), {}, {
+                }, responsiveness ? {
+                  responsiveness: responsiveness
+                } : {}), labelStack), pageLoadInteractionMetrics), getDetailedInteractionMetrics(resourceTimings)), getPageLoadDetailedInteractionMetrics()), getBm3TrackerTimings(interaction)), {}, {
                   'metric:ttai': experimental ? regularTTAI || expTTAI : undefined,
                   'metric:experimental:ttai': expTTAI
                 }),

package/dist/esm/interaction-metrics/index.js

@@ -39,6 +39,45 @@ function isPerformanceTracingEnabled() {
   var _getConfig;
   return ((_getConfig = getConfig()) === null || _getConfig === void 0 ? void 0 : _getConfig.enableAdditionalPerformanceMarks) || window.__REACT_UFO_ENABLE_PERF_TRACING || process.env.NODE_ENV !== 'production';
 }
+var performanceEventObserver;
+export var getPerformanceObserver = function getPerformanceObserver() {
+  performanceEventObserver = performanceEventObserver || new PerformanceObserver(function (entries) {
+    var list = entries.getEntries();
+    var _iterator = _createForOfIteratorHelper(list),
+      _step;
+    try {
+      for (_iterator.s(); !(_step = _iterator.n()).done;) {
+        var entry = _step.value;
+        if (entry.name === 'click') {
+          setInteractionPerformanceEvent(entry);
+        }
+      }
+    } catch (err) {
+      _iterator.e(err);
+    } finally {
+      _iterator.f();
+    }
+  });
+  return performanceEventObserver;
+};
+export var setInteractionPerformanceEvent = function setInteractionPerformanceEvent(entry) {
+  var interaction = getActiveInteraction();
+  if ((interaction === null || interaction === void 0 ? void 0 : interaction.type) === 'press') {
+    var responsiveness = interaction.responsiveness || {};
+    // if happens there is another event interaction that has started after
+    // the initial one, we don't want to replace the values if they have already
+    // been set up
+    responsiveness.experimentalInputToNextPaint = responsiveness.experimentalInputToNextPaint || entry.duration;
+    responsiveness.inputDelay = responsiveness.experimentalInputToNextPaint || entry.processingStart - entry.startTime;
+    interaction.responsiveness = responsiveness;
+    // if the entry start time is lower than the one in the interaction
+    // it means the interaction start time is not accurate, we assign
+    // this value which will match the timestamp in the event
+    if (entry.startTime < interaction.start) {
+      interaction.start = entry.startTime;
+    }
+  }
+};
 function labelStackToString(labelStack, name) {
   var _stack$map;
   var stack = _toConsumableArray(labelStack !== null && labelStack !== void 0 ? labelStack : []);
@@ -59,17 +98,17 @@ function labelStackToIdString(labelStack) {
 }
 function addSegmentObserver(observer) {
   segmentObservers.push(observer);
-  var _iterator = _createForOfIteratorHelper(segmentCache.values()),
-    _step;
+  var _iterator2 = _createForOfIteratorHelper(segmentCache.values()),
+    _step2;
   try {
-    for (_iterator.s(); !(_step = _iterator.n()).done;) {
-      var segmentInfo = _step.value;
+    for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
+      var segmentInfo = _step2.value;
       observer.onAdd(segmentInfo);
     }
   } catch (err) {
-    _iterator.e(err);
+    _iterator2.e(err);
   } finally {
-    _iterator.f();
+    _iterator2.f();
   }
 }
 function removeSegmentObserver(observer) {
@@ -486,24 +525,24 @@ function finishInteraction(id, data) {
     });
     try {
       // for Firefox 102 and older
-      var _iterator2 = _createForOfIteratorHelper(profilerTimingMap.entries()),
-        _step2;
+      var _iterator3 = _createForOfIteratorHelper(profilerTimingMap.entries()),
+        _step3;
       try {
-        for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
-          var _step2$value = _slicedToArray(_step2.value, 2),
-            _step2$value$ = _step2$value[1],
-            labelStack = _step2$value$.labelStack,
-            start = _step2$value$.start,
-            end = _step2$value$.end;
+        for (_iterator3.s(); !(_step3 = _iterator3.n()).done;) {
+          var _step3$value = _slicedToArray(_step3.value, 2),
+            _step3$value$ = _step3$value[1],
+            labelStack = _step3$value$.labelStack,
+            start = _step3$value$.start,
+            end = _step3$value$.end;
           performance.measure("\uD83D\uDEF8 ".concat(labelStackToString(labelStack), " [segment_ttai]"), {
             start: start,
             end: end
           });
         }
       } catch (err) {
-        _iterator2.e(err);
+        _iterator3.e(err);
       } finally {
-        _iterator2.f();
+        _iterator3.f();
       }
     } catch (e) {
       // do nothing

package/dist/esm/interaction-metrics-init/index.js

@@ -5,6 +5,7 @@ import { setUFOConfig } from '../config';
 import { experimentalVC, sinkExperimentalHandler } from '../create-experimental-interaction-metrics-payload';
 import { setupHiddenTimingCapture } from '../hidden-timing';
 import { postInteractionLog, sinkInteractionHandler, sinkPostInteractionLogHandler } from '../interaction-metrics';
+import { getPerformanceObserver } from '../interactions-performance-observer';
 import { getVCObserver } from '../vc';
 import scheduleIdleCallback from './schedule-idle-callback';
 var initialized = false;
@@ -98,6 +99,16 @@ export function init(analyticsWebClientAsync, config) {
   setupHiddenTimingCapture();
   startLighthouseObserver();
   initialized = true;
+  if (fg('platform_ufo_enable_events_observer')) {
+    if (typeof PerformanceObserver !== 'undefined') {
+      var observer = getPerformanceObserver();
+      observer.observe({
+        type: 'event',
+        buffered: true,
+        durationThreshold: 16
+      });
+    }
+  }
   Promise.all([analyticsWebClientAsync, import( /* webpackChunkName: "create-payloads" */'../create-payload'), import( /* webpackChunkName: "create-post-interaction-log-payload" */'../create-post-interaction-log-payload')]).then(function (_ref) {
     var _ref2 = _slicedToArray(_ref, 3),
       awc = _ref2[0],

package/dist/esm/interactions-performance-observer/index.js

@@ -0,0 +1,44 @@
+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 { getActiveInteraction } from '../interaction-metrics';
+var performanceEventObserver;
+export var getPerformanceObserver = function getPerformanceObserver() {
+  performanceEventObserver = performanceEventObserver || new PerformanceObserver(function (entries) {
+    var list = entries.getEntries();
+    var _iterator = _createForOfIteratorHelper(list),
+      _step;
+    try {
+      for (_iterator.s(); !(_step = _iterator.n()).done;) {
+        var entry = _step.value;
+        if (entry.name === 'click') {
+          setInteractionPerformanceEvent(entry);
+        }
+      }
+    } catch (err) {
+      _iterator.e(err);
+    } finally {
+      _iterator.f();
+    }
+  });
+  return performanceEventObserver;
+};
+export var setInteractionPerformanceEvent = function setInteractionPerformanceEvent(entry) {
+  var interaction = getActiveInteraction();
+  if ((interaction === null || interaction === void 0 ? void 0 : interaction.type) === 'press') {
+    var _interaction$responsi, _interaction$responsi2;
+    // if happens there is another event interaction that has started after
+    // the initial one, we don't want to replace the values if they have already been set up
+    interaction.responsiveness = _objectSpread(_objectSpread({}, interaction.responsiveness), {}, {
+      experimentalInputToNextPaint: ((_interaction$responsi = interaction.responsiveness) === null || _interaction$responsi === void 0 ? void 0 : _interaction$responsi.experimentalInputToNextPaint) || entry.duration,
+      inputDelay: ((_interaction$responsi2 = interaction.responsiveness) === null || _interaction$responsi2 === void 0 ? void 0 : _interaction$responsi2.inputDelay) || entry.processingStart - entry.startTime
+    });
+    // if the entry start time is lower than the one in the interaction
+    // it means the interaction start time is not accurate, we assign
+    // this value which will match the timestamp in the event
+    interaction.start = Math.min(interaction.start, entry.startTime);
+  }
+};