@atlaskit/react-ufo 5.2.8 → 5.2.10

package/dist/cjs/vc/vc-observer-new/viewport-observer/index.js

@@ -97,22 +97,151 @@ var createElementMutationsWatcher = function createElementMutationsWatcher(remov
     return 'mutation:element';
   };
 };
+var createElementMutationsWatcherNew = function createElementMutationsWatcherNew(removedNodeRects, isWithinThirdPartySegment, isWithinSmartAnswersSegment, hasSameDeletedNode, timestamp, isTargetReactRoot, getSSRState, getSSRPlaceholderHandler) {
+  return function (_ref2) {
+    var target = _ref2.target,
+      rect = _ref2.rect;
+    if (getSSRState) {
+      var ssrState = getSSRState();
+      var SSRStateEnum = {
+        normal: 1,
+        waitingForFirstRender: 2,
+        ignoring: 3
+      };
+      if (ssrState.state === SSRStateEnum.waitingForFirstRender && timestamp > ssrState.renderStart && isTargetReactRoot) {
+        ssrState.state = SSRStateEnum.ignoring;
+        if (ssrState.renderStop === -1) {
+          // arbitrary 500ms DOM update window
+          ssrState.renderStop = timestamp + 500;
+        }
+        return {
+          type: 'ssr-hydration',
+          mutationData: {
+            timestamp: timestamp
+          }
+        };
+      }
+      if (ssrState.state === SSRStateEnum.ignoring && timestamp > ssrState.renderStart && isTargetReactRoot) {
+        if (timestamp <= ssrState.renderStop) {
+          return {
+            type: 'ssr-hydration',
+            mutationData: {
+              timestamp: timestamp
+            }
+          };
+        } else {
+          ssrState.state = SSRStateEnum.normal;
+        }
+      }
+    }
+    if (getSSRPlaceholderHandler) {
+      var ssrPlaceholderHandler = getSSRPlaceholderHandler();
+      if (ssrPlaceholderHandler) {
+        if ((ssrPlaceholderHandler.isPlaceholderV4(target) || ssrPlaceholderHandler.isPlaceholderIgnored(target)) && ssrPlaceholderHandler.checkIfExistedAndSizeMatchingV3(target)) {
+          return {
+            type: 'mutation:ssr-placeholder',
+            mutationData: {
+              timestamp: timestamp
+            }
+          };
+        }
+        if ((ssrPlaceholderHandler.isPlaceholderReplacementV4(target) || ssrPlaceholderHandler.isPlaceholderIgnored(target)) && ssrPlaceholderHandler.validateReactComponentMatchToPlaceholderV4(target)) {
+          return {
+            type: 'mutation:ssr-placeholder',
+            mutationData: {
+              timestamp: timestamp
+            }
+          };
+        }
+      }
+    }
+    if (hasSameDeletedNode && (0, _isInVcIgnoreIfNoLayoutShiftMarker.default)(target)) {
+      return {
+        type: 'mutation:remount',
+        mutationData: {
+          timestamp: timestamp
+        }
+      };
+    }
+    if ((0, _vcUtils.isContainedWithinMediaWrapper)(target)) {
+      return {
+        type: 'mutation:media',
+        mutationData: {
+          timestamp: timestamp
+        }
+      };
+    }
+    if (isWithinThirdPartySegment) {
+      return {
+        type: 'mutation:third-party-element',
+        mutationData: {
+          timestamp: timestamp
+        }
+      };
+    }
+    if (isWithinSmartAnswersSegment) {
+      return {
+        type: 'mutation:smart-answers-element',
+        mutationData: {
+          timestamp: timestamp
+        }
+      };
+    }
+    var isInIgnoreLsMarker = (0, _isInVcIgnoreIfNoLayoutShiftMarker.default)(target);
+    if (!isInIgnoreLsMarker) {
+      return {
+        type: 'mutation:element',
+        mutationData: {
+          timestamp: timestamp
+        }
+      };
+    }
+    var isRLLPlaceholder = _rllPlaceholders.RLLPlaceholderHandlers.getInstance().isRLLPlaceholderHydration(rect);
+    if (isRLLPlaceholder && isInIgnoreLsMarker) {
+      return {
+        type: 'mutation:rll-placeholder',
+        mutationData: {
+          timestamp: timestamp
+        }
+      };
+    }
+    var wasDeleted = removedNodeRects.some(function (nr) {
+      return (0, _isSameRectDimensions.isSameRectDimensions)(nr, rect);
+    });
+    if (wasDeleted && isInIgnoreLsMarker) {
+      return {
+        type: 'mutation:element-replacement',
+        mutationData: {
+          timestamp: timestamp
+        }
+      };
+    }
+    return {
+      type: 'mutation:element',
+      mutationData: {
+        timestamp: timestamp
+      }
+    };
+  };
+};
 var ViewportObserver = exports.default = /*#__PURE__*/function () {
   // SSR context functions
 
-  function ViewportObserver(_ref2) {
+  function ViewportObserver(_ref3) {
     var _this = this;
-    var onChange = _ref2.onChange,
-      getSSRState = _ref2.getSSRState,
-      getSSRPlaceholderHandler = _ref2.getSSRPlaceholderHandler,
-      searchPageConfig = _ref2.searchPageConfig;
+    var onChange = _ref3.onChange,
+      getSSRState = _ref3.getSSRState,
+      getSSRPlaceholderHandler = _ref3.getSSRPlaceholderHandler,
+      _ref3$trackLayoutShif = _ref3.trackLayoutShiftOffenders,
+      trackLayoutShiftOffenders = _ref3$trackLayoutShif === void 0 ? false : _ref3$trackLayoutShif,
+      searchPageConfig = _ref3.searchPageConfig;
     (0, _classCallCheck2.default)(this, ViewportObserver);
-    (0, _defineProperty2.default)(this, "handleIntersectionEntry", function (_ref3) {
-      var target = _ref3.target,
-        rect = _ref3.rect,
-        time = _ref3.time,
-        type = _ref3.type,
-        mutationData = _ref3.mutationData;
+    (0, _defineProperty2.default)(this, "handleIntersectionEntry", function (_ref4) {
+      var target = _ref4.target,
+        rect = _ref4.rect,
+        time = _ref4.time,
+        type = _ref4.type,
+        mutationData = _ref4.mutationData;
       if (!target) {
         return;
       }
@@ -130,12 +259,12 @@ var ViewportObserver = exports.default = /*#__PURE__*/function () {
       });
     });
     (0, _defineProperty2.default)(this, "handleChildListMutation", /*#__PURE__*/function () {
-      var _ref5 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(_ref4) {
+      var _ref6 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(_ref5) {
         var target, addedNodes, removedNodes, timestamp, removedNodeRects, targetNode, _iterator, _step, _loop;
         return _regenerator.default.wrap(function _callee$(_context2) {
           while (1) switch (_context2.prev = _context2.next) {
             case 0:
-              target = _ref4.target, addedNodes = _ref4.addedNodes, removedNodes = _ref4.removedNodes, timestamp = _ref4.timestamp;
+              target = _ref5.target, addedNodes = _ref5.addedNodes, removedNodes = _ref5.removedNodes, timestamp = _ref5.timestamp;
               removedNodeRects = removedNodes.map(function (ref) {
                 var n = ref.deref();
                 if (!n) {
@@ -170,7 +299,7 @@ var ViewportObserver = exports.default = /*#__PURE__*/function () {
                       _checkWithinComponent = (0, _checkWithinComponent3.default)(addedNode, 'UFOThirdPartySegment', _this.mapIs3pResult), isWithinThirdPartySegment = _checkWithinComponent.isWithin;
                       isWithinSmartAnswersSegment = Boolean(_this.shouldCheckSmartAnswersMutations() && (0, _isContainedWithinSmartAnswers.isContainedWithinSmartAnswers)(addedNode));
                       isTargetReactRoot = targetNode === ((_this$getSSRState = _this.getSSRState) === null || _this$getSSRState === void 0 || (_this$getSSRState = _this$getSSRState.call(_this)) === null || _this$getSSRState === void 0 ? void 0 : _this$getSSRState.reactRootElement);
-                      (_this$intersectionObs = _this.intersectionObserver) === null || _this$intersectionObs === void 0 || _this$intersectionObs.watchAndTag(addedNode, createElementMutationsWatcher(removedNodeRects, isWithinThirdPartySegment, isWithinSmartAnswersSegment, !!hasSameDeletedNode, timestamp, isTargetReactRoot, _this.getSSRState, _this.getSSRPlaceholderHandler));
+                      (_this$intersectionObs = _this.intersectionObserver) === null || _this$intersectionObs === void 0 || _this$intersectionObs.watchAndTag(addedNode, (_this.trackLayoutShiftOffenders ? createElementMutationsWatcherNew : createElementMutationsWatcher)(removedNodeRects, isWithinThirdPartySegment, isWithinSmartAnswersSegment, !!hasSameDeletedNode, timestamp, isTargetReactRoot, _this.getSSRState, _this.getSSRPlaceholderHandler));
                     case 9:
                     case "end":
                       return _context.stop();
@@ -211,25 +340,27 @@ var ViewportObserver = exports.default = /*#__PURE__*/function () {
         }, _callee, null, [[4, 15, 18, 21]]);
       }));
       return function (_x) {
-        return _ref5.apply(this, arguments);
+        return _ref6.apply(this, arguments);
       };
     }());
-    (0, _defineProperty2.default)(this, "handleAttributeMutation", function (_ref6) {
+    (0, _defineProperty2.default)(this, "handleAttributeMutation", function (_ref7) {
       var _this$intersectionObs2;
-      var target = _ref6.target,
-        attributeName = _ref6.attributeName,
-        oldValue = _ref6.oldValue,
-        newValue = _ref6.newValue;
-      (_this$intersectionObs2 = _this.intersectionObserver) === null || _this$intersectionObs2 === void 0 || _this$intersectionObs2.watchAndTag(target, function (_ref7) {
-        var target = _ref7.target,
-          rect = _ref7.rect;
+      var target = _ref7.target,
+        attributeName = _ref7.attributeName,
+        oldValue = _ref7.oldValue,
+        newValue = _ref7.newValue,
+        timestamp = _ref7.timestamp;
+      (_this$intersectionObs2 = _this.intersectionObserver) === null || _this$intersectionObs2 === void 0 || _this$intersectionObs2.watchAndTag(target, function (_ref8) {
+        var target = _ref8.target,
+          rect = _ref8.rect;
         if ((0, _vcUtils.isContainedWithinMediaWrapper)(target)) {
           return {
             type: 'mutation:media',
             mutationData: {
               attributeName: attributeName,
               oldValue: oldValue,
-              newValue: newValue
+              newValue: newValue,
+              timestamp: timestamp
             }
           };
         }
@@ -242,7 +373,8 @@ var ViewportObserver = exports.default = /*#__PURE__*/function () {
               mutationData: {
                 attributeName: attributeName,
                 oldValue: oldValue,
-                newValue: newValue
+                newValue: newValue,
+                timestamp: timestamp
               }
             };
           }
@@ -268,7 +400,8 @@ var ViewportObserver = exports.default = /*#__PURE__*/function () {
             mutationData: {
               attributeName: attributeName,
               oldValue: oldValue,
-              newValue: newValue
+              newValue: newValue,
+              timestamp: timestamp
             }
           };
         }
@@ -282,7 +415,8 @@ var ViewportObserver = exports.default = /*#__PURE__*/function () {
             mutationData: {
               attributeName: attributeName,
               oldValue: oldValue,
-              newValue: newValue
+              newValue: newValue,
+              timestamp: timestamp
             }
           };
         }
@@ -297,7 +431,8 @@ var ViewportObserver = exports.default = /*#__PURE__*/function () {
             mutationData: {
               attributeName: attributeName,
               oldValue: oldValue,
-              newValue: newValue
+              newValue: newValue,
+              timestamp: timestamp
             }
           };
         }
@@ -308,7 +443,8 @@ var ViewportObserver = exports.default = /*#__PURE__*/function () {
             mutationData: {
               attributeName: attributeName,
               oldValue: oldValue,
-              newValue: newValue
+              newValue: newValue,
+              timestamp: timestamp
             }
           };
         }
@@ -319,7 +455,8 @@ var ViewportObserver = exports.default = /*#__PURE__*/function () {
             mutationData: {
               attributeName: attributeName,
               oldValue: oldValue,
-              newValue: newValue
+              newValue: newValue,
+              timestamp: timestamp
             }
           };
         }
@@ -328,14 +465,15 @@ var ViewportObserver = exports.default = /*#__PURE__*/function () {
           mutationData: {
             attributeName: attributeName,
             oldValue: oldValue,
-            newValue: newValue
+            newValue: newValue,
+            timestamp: timestamp
           }
         };
       });
     });
-    (0, _defineProperty2.default)(this, "handleLayoutShift", function (_ref8) {
-      var time = _ref8.time,
-        changedRects = _ref8.changedRects;
+    (0, _defineProperty2.default)(this, "handleLayoutShift", function (_ref9) {
+      var time = _ref9.time,
+        changedRects = _ref9.changedRects;
       var _iterator2 = _createForOfIteratorHelper(changedRects),
         _step2;
       try {
@@ -371,6 +509,7 @@ var ViewportObserver = exports.default = /*#__PURE__*/function () {
     this.intersectionObserver = null;
     this.mutationObserver = null;
     this.performanceObserver = null;
+    this.trackLayoutShiftOffenders = trackLayoutShiftOffenders;
 
     // Initialize SSR context functions
     this.getSSRState = getSSRState;

package/dist/cjs/vc/vc-observer-new/viewport-observer/intersection-observer/index.js

@@ -36,7 +36,7 @@ function createIntersectionObserver(_ref) {
           }
 
           // override as display-contents mutation
-          if (tagOrCallbackResult && typeof tagOrCallbackResult !== 'string' && tagOrCallbackResult.type === 'mutation:attribute') {
+          if (tagOrCallbackResult && typeof tagOrCallbackResult !== 'string' && tagOrCallbackResult.type === 'mutation:attribute' && 'oldValue' in tagOrCallbackResult.mutationData) {
             var _tagOrCallbackResult$ = tagOrCallbackResult.mutationData,
               attributeName = _tagOrCallbackResult$.attributeName,
               oldValue = _tagOrCallbackResult$.oldValue,

package/dist/cjs/vc/vc-observer-new/viewport-observer/mutation-observer/index.js

@@ -58,7 +58,8 @@ function createMutationObserver(_ref) {
                 target: mut.target,
                 attributeName: (_mut$attributeName = mut.attributeName) !== null && _mut$attributeName !== void 0 ? _mut$attributeName : 'unknown',
                 oldValue: oldValue,
-                newValue: newValue
+                newValue: newValue,
+                timestamp: mut.timestamp || performance.now()
               });
             }
             return 0; // continue

package/dist/es2019/experience-trace-id-context/index.js

@@ -5,9 +5,9 @@ import { makeTraceHttpRequestHeaders } from './utils/make-trace-http-request-hea
 const state = {
   context: null
 };
-const traceIdKey = createContextKey("traceId");
-const spanIdKey = createContextKey("spanId");
-const experienceTypeKey = createContextKey("type");
+const traceIdKey = createContextKey('traceId');
+const spanIdKey = createContextKey('spanId');
+const experienceTypeKey = createContextKey('type');
 
 // DO NOT CALL THIS FUNCTION DIRECTLY!!!!
 // It is only to be called by React UFO libraries for the automatic handling of trace context for experiences.

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

@@ -1072,6 +1072,7 @@ export function addNewInteraction(interactionId, ufoName, type, startTime, rate,
       devToolsEnabled: config.vc.devToolsEnabled,
       selectorConfig: config.vc.selectorConfig,
       ssrEnablePageLayoutPlaceholder: config.vc.ssrEnablePageLayoutPlaceholder,
+      trackLayoutShiftOffenders: config.vc.trackLayoutShiftOffenders,
       searchPageConfig
     };
     vcObserver = newVCObserver(vcOptions);

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

@@ -158,7 +158,8 @@ export function init(analyticsWebClientAsync, config) {
       oldDomUpdates: config.vc.oldDomUpdates,
       devToolsEnabled: config.vc.devToolsEnabled,
       selectorConfig: config.vc.selectorConfig,
-      ssrEnablePageLayoutPlaceholder: config.vc.ssrEnablePageLayoutPlaceholder
+      ssrEnablePageLayoutPlaceholder: config.vc.ssrEnablePageLayoutPlaceholder,
+      trackLayoutShiftOffenders: config.vc.trackLayoutShiftOffenders
     };
     postInteractionLog.initializeVCObserver(vcOptions);
     if (config !== null && config !== void 0 && (_config$experimentalI = config.experimentalInteractionMetrics) !== null && _config$experimentalI !== void 0 && _config$experimentalI.enabled) {

package/dist/es2019/vc/index.js

@@ -16,7 +16,7 @@ export class VCObserverWrapper {
       enablePageLayoutPlaceholder: (_opts$ssrEnablePageLa = opts.ssrEnablePageLayoutPlaceholder) !== null && _opts$ssrEnablePageLa !== void 0 ? _opts$ssrEnablePageLa : false
     });
     if (isVCRevisionEnabled('fy25.03') || isVCRevisionEnabled('fy26.04')) {
-      var _opts$ssrEnablePageLa2;
+      var _opts$ssrEnablePageLa2, _opts$trackLayoutShif;
       this.newVCObserver = new VCObserverNew({
         selectorConfig: opts.selectorConfig,
         isPostInteraction: opts.isPostInteraction,
@@ -24,6 +24,7 @@ export class VCObserverWrapper {
           enablePageLayoutPlaceholder: (_opts$ssrEnablePageLa2 = opts.ssrEnablePageLayoutPlaceholder) !== null && _opts$ssrEnablePageLa2 !== void 0 ? _opts$ssrEnablePageLa2 : false
         },
         ssrPlaceholderHandler: this.ssrPlaceholderHandler,
+        trackLayoutShiftOffenders: (_opts$trackLayoutShif = opts.trackLayoutShiftOffenders) !== null && _opts$trackLayoutShif !== void 0 ? _opts$trackLayoutShif : false,
         searchPageConfig: opts.searchPageConfig
       });
     }
@@ -115,7 +116,8 @@ export class VCObserverWrapper {
       interactionAbortReason: param.interactionAbortReason,
       includeRawData,
       includeSSRInV3: param.includeSSRInV3,
-      rawDataStopTime: param.rawDataStopTime
+      rawDataStopTime: param.rawDataStopTime,
+      reportLayoutShiftOffenders: param.reportLayoutShiftOffenders
     })) : [];
     if (!v3v4Result || v3v4Result.length === 0) {
       return v1v2Result !== null && v1v2Result !== void 0 ? v1v2Result : {};

package/dist/es2019/vc/vc-observer-new/index.js

@@ -31,7 +31,7 @@ export function getHasAbortingEventDuringSSR() {
 }
 export default class VCObserverNew {
   constructor(config) {
-    var _config$isPostInterac, _config$selectorConfi;
+    var _config$isPostInterac, _config$selectorConfi, _config$trackLayoutSh;
     _defineProperty(this, "viewportObserver", null);
     _defineProperty(this, "windowEventObserver", null);
     // SSR related properties
@@ -55,6 +55,7 @@ export default class VCObserverNew {
         enablePageLayoutPlaceholder: (_config$SSRConfig$ena = (_config$SSRConfig = config.SSRConfig) === null || _config$SSRConfig === void 0 ? void 0 : _config$SSRConfig.enablePageLayoutPlaceholder) !== null && _config$SSRConfig$ena !== void 0 ? _config$SSRConfig$ena : false
       });
     }
+    this.trackLayoutShiftOffenders = (_config$trackLayoutSh = config.trackLayoutShiftOffenders) !== null && _config$trackLayoutSh !== void 0 ? _config$trackLayoutSh : false;
     this.viewportObserver = new ViewportObserver({
       onChange: onChangeArg => {
         const {
@@ -79,7 +80,8 @@ export default class VCObserverNew {
           visible,
           attributeName: mutationData === null || mutationData === void 0 ? void 0 : mutationData.attributeName,
           oldValue: mutationData === null || mutationData === void 0 ? void 0 : mutationData.oldValue,
-          newValue: mutationData === null || mutationData === void 0 ? void 0 : mutationData.newValue
+          newValue: mutationData === null || mutationData === void 0 ? void 0 : mutationData.newValue,
+          originalMutationTimestamp: mutationData === null || mutationData === void 0 ? void 0 : mutationData.timestamp
         };
         if (element) {
           const labelStacks = getLabelStacks(element);
@@ -97,7 +99,8 @@ export default class VCObserverNew {
       // Pass SSR context to ViewportObserver
       getSSRState: () => this.getSSRState(),
       getSSRPlaceholderHandler: () => this.getSSRPlaceholderHandler(),
-      searchPageConfig: config.searchPageConfig
+      searchPageConfig: config.searchPageConfig,
+      trackLayoutShiftOffenders: this.trackLayoutShiftOffenders
     });
     this.windowEventObserver = new WindowEventObserver({
       onEvent: ({
@@ -271,7 +274,8 @@ export default class VCObserverNew {
       excludeSmartAnswersInSearch,
       includeSSRRatio,
       isPageVisible,
-      interactionAbortReason
+      interactionAbortReason,
+      reportLayoutShiftOffenders: this.trackLayoutShiftOffenders
     }) : null;
     if (fy25_03) {
       results.push(fy25_03);
@@ -294,7 +298,8 @@ export default class VCObserverNew {
       excludeSmartAnswersInSearch,
       includeSSRRatio,
       isPageVisible,
-      interactionAbortReason
+      interactionAbortReason,
+      reportLayoutShiftOffenders: this.trackLayoutShiftOffenders
     };
     const [fy26_04, vcNext] = await Promise.all([isVCRevisionEnabled('fy26.04') ? calculator_fy26_04.calculate(calculatorParams) : null, isVCRevisionEnabled('next') ? calculator_next.calculate(calculatorParams) : null]);
     if (fy26_04) {

package/dist/es2019/vc/vc-observer-new/metric-calculator/abstract-base-vc-calculator.js

@@ -1,5 +1,6 @@
 import { fg } from '@atlaskit/platform-feature-flags';
 import { calculateTTVCPercentilesWithDebugInfo } from './percentile-calc';
+import { detectLayoutShiftCause } from './utils/detect-layout-shift-cause';
 import getViewportHeight from './utils/get-viewport-height';
 import getViewportWidth from './utils/get-viewport-width';
 
@@ -60,7 +61,7 @@ export default class AbstractVCCalculatorBase {
     }
     return labelStacks;
   }
-  async calculateWithDebugInfo(filteredEntries, startTime, stopTime, isPostInteraction, isVCClean, interactionType, isPageVisible, interactionId, dirtyReason, allEntries, include3p, excludeSmartAnswersInSearch, interactionAbortReason, includeSSRRatio) {
+  async calculateWithDebugInfo(filteredEntries, startTime, stopTime, isPostInteraction, isVCClean, interactionType, isPageVisible, interactionId, dirtyReason, allEntries, include3p, excludeSmartAnswersInSearch, interactionAbortReason, includeSSRRatio, reportLayoutShiftOffenders) {
     var _window, _window2, _window3, _window4, _window6;
     const percentiles = [25, 50, 75, 80, 85, 90, 95, 98, 99, 100];
     const viewportEntries = this.filterViewportEntries(filteredEntries);
@@ -80,6 +81,8 @@ export default class AbstractVCCalculatorBase {
     let percentileIndex = 0;
     const entryDataBuffer = new Set();
     let ssrRatio = -1;
+    let layoutShiftInsights = null;
+    let previousViewportPercentage = 0;
     if (vcLogs) {
       for (const entry of vcLogs) {
         const {
@@ -106,6 +109,19 @@ export default class AbstractVCCalculatorBase {
               t: Math.round(time),
               e: elementNames
             };
+            if (reportLayoutShiftOffenders && percentiles[percentileIndex] === 90 && entries.some(e => e.type === 'layout-shift')) {
+              const layoutShiftEntries = entries.filter(e => e.type === 'layout-shift');
+              layoutShiftInsights = {
+                layoutShiftOffendersResult: detectLayoutShiftCause({
+                  viewportEntries: viewportEntries,
+                  layoutShiftEntries,
+                  time,
+                  startTime
+                }),
+                layoutShiftEntriesCount: layoutShiftEntries.length,
+                layoutShiftImpact: viewportPercentage - previousViewportPercentage
+              };
+            }
             percentileIndex++;
           }
 
@@ -115,6 +131,7 @@ export default class AbstractVCCalculatorBase {
           // Only add to buffer if we haven't reached all percentiles
           entries.forEach(e => entryDataBuffer.add(e));
         }
+        previousViewportPercentage = viewportPercentage;
       }
     }
 
@@ -262,7 +279,8 @@ export default class AbstractVCCalculatorBase {
     return {
       vcDetails,
       ssrRatio,
-      speedIndex
+      speedIndex,
+      VC90layoutShiftInsights: layoutShiftInsights
     };
   }
   async calculate({
@@ -276,9 +294,10 @@ export default class AbstractVCCalculatorBase {
     includeSSRRatio,
     interactionType,
     isPageVisible,
-    interactionAbortReason
+    interactionAbortReason,
+    reportLayoutShiftOffenders
   }) {
-    var _vcDetails$90$t, _vcDetails$;
+    var _vcDetails$90$t, _vcDetails$, _layoutShiftInsightsP;
     const filteredEntries = orderedEntries.filter(entry => {
       return this.isEntryIncluded(entry, include3p, excludeSmartAnswersInSearch);
     });
@@ -299,13 +318,48 @@ export default class AbstractVCCalculatorBase {
     const {
       vcDetails,
       ssrRatio,
-      speedIndex
-    } = await this.calculateWithDebugInfo(filteredEntries, startTime, stopTime, isPostInteraction, isVCClean, interactionType, isPageVisible, interactionId, dirtyReason, orderedEntries, include3p, excludeSmartAnswersInSearch, interactionAbortReason, includeSSRRatio);
+      speedIndex,
+      VC90layoutShiftInsights
+    } = await this.calculateWithDebugInfo(filteredEntries, startTime, stopTime, isPostInteraction, isVCClean, interactionType, isPageVisible, interactionId, dirtyReason, orderedEntries, include3p, excludeSmartAnswersInSearch, interactionAbortReason, includeSSRRatio, reportLayoutShiftOffenders);
+    let layoutShiftInsightsPayload;
+    if (VC90layoutShiftInsights !== null && reportLayoutShiftOffenders) {
+      var _layoutShiftOffenders, _layoutShiftOffenders2, _layoutShiftOffenders3;
+      const {
+        layoutShiftOffendersResult,
+        layoutShiftEntriesCount,
+        layoutShiftImpact
+      } = VC90layoutShiftInsights;
+      layoutShiftInsightsPayload = {
+        impact: layoutShiftImpact,
+        sources: layoutShiftEntriesCount !== null && layoutShiftEntriesCount !== void 0 ? layoutShiftEntriesCount : 0,
+        same: {
+          dir: (_layoutShiftOffenders = layoutShiftOffendersResult === null || layoutShiftOffendersResult === void 0 ? void 0 : layoutShiftOffendersResult.layoutShiftVariables.allMovedSameWay) !== null && _layoutShiftOffenders !== void 0 ? _layoutShiftOffenders : false,
+          dist: (_layoutShiftOffenders2 = layoutShiftOffendersResult === null || layoutShiftOffendersResult === void 0 ? void 0 : layoutShiftOffendersResult.layoutShiftVariables.allMovedSameAmount) !== null && _layoutShiftOffenders2 !== void 0 ? _layoutShiftOffenders2 : false
+        },
+        total_mut: (_layoutShiftOffenders3 = layoutShiftOffendersResult === null || layoutShiftOffendersResult === void 0 ? void 0 : layoutShiftOffendersResult.layoutShiftOffenders.length) !== null && _layoutShiftOffenders3 !== void 0 ? _layoutShiftOffenders3 : 0,
+        mut: layoutShiftOffendersResult === null || layoutShiftOffendersResult === void 0 ? void 0 : layoutShiftOffendersResult.layoutShiftOffenders.sort((a, b) => Math.abs(a.distanceToLS) - Math.abs(b.distanceToLS)).slice(0, 5).map(offender => ({
+          e: offender.offender,
+          size: -1,
+          // @todo: calculate size
+          attr: {
+            t_before: offender.happenedBefore,
+            t_distance: offender.distanceToLS,
+            p_above: offender.isAbove,
+            p_left: offender.isLeft,
+            p_right: offender.isRight,
+            p_h_overlap: offender.hasHorizontalOverlap,
+            p_v_overlap: offender.hasVerticalOverlap,
+            p_same_offset: offender.matchesLayoutShiftDelta ? 'all' : 'none'
+          }
+        }))
+      };
+    }
     const result = {
       revision: this.revisionNo,
       clean: true,
       'metric:vc90': (_vcDetails$90$t = vcDetails === null || vcDetails === void 0 ? void 0 : (_vcDetails$ = vcDetails['90']) === null || _vcDetails$ === void 0 ? void 0 : _vcDetails$.t) !== null && _vcDetails$90$t !== void 0 ? _vcDetails$90$t : null,
-      vcDetails: vcDetails !== null && vcDetails !== void 0 ? vcDetails : undefined
+      vcDetails: vcDetails !== null && vcDetails !== void 0 ? vcDetails : undefined,
+      'vc90:ls': (_layoutShiftInsightsP = layoutShiftInsightsPayload) !== null && _layoutShiftInsightsP !== void 0 ? _layoutShiftInsightsP : undefined
     };
     result.ratios = this.calculateRatios(filteredEntries);
     if (ssrRatio !== -1) {