@atlaskit/react-ufo 5.2.9 → 5.2.10

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

@@ -12,6 +12,7 @@ function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r)
 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 { 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';
 
@@ -112,9 +113,9 @@ var AbstractVCCalculatorBase = /*#__PURE__*/function () {
   }, {
     key: "calculateWithDebugInfo",
     value: function () {
-      var _calculateWithDebugInfo = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(filteredEntries, startTime, stopTime, isPostInteraction, isVCClean, interactionType, isPageVisible, interactionId, dirtyReason, allEntries, include3p, excludeSmartAnswersInSearch, interactionAbortReason, includeSSRRatio) {
+      var _calculateWithDebugInfo = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(filteredEntries, startTime, stopTime, isPostInteraction, isVCClean, interactionType, isPageVisible, interactionId, dirtyReason, allEntries, include3p, excludeSmartAnswersInSearch, interactionAbortReason, includeSSRRatio, reportLayoutShiftOffenders) {
         var _window, _window2, _window3, _window4, _window6;
-        var percentiles, viewportEntries, _yield$calculateTTVCP, vcLogs, speedIndex, vcDetails, percentileIndex, entryDataBuffer, ssrRatio, _iterator4, _step4, _entry3, time, viewportPercentage, entries, elementNames, previousResult, i, percentile, enhancedVcLogs, shouldCalculate3p, shouldCalculateDebugDetails, sortedVcLogs, maxViewportPercentageAtTime, maxSoFar, _iterator5, _step5, log, getBiggestPreviousViewportPercentage, ignoredEntriesByTime, _iterator6, _step6, _entry4, _ignoredEntriesByTime, _viewportData$rect, _viewportData$previou, viewportData, timestamp, additionalVcLogs, _iterator7, _step7, _step7$value, _timestamp, ignoredEntries, _viewportPercentage, v3RevisionDebugDetails, _window5, _window5$__ufo_devtoo, _window7, _window7$__on_ufo_vc_;
+        var percentiles, viewportEntries, _yield$calculateTTVCP, vcLogs, speedIndex, vcDetails, percentileIndex, entryDataBuffer, ssrRatio, layoutShiftInsights, previousViewportPercentage, _iterator4, _step4, _entry3, time, viewportPercentage, entries, elementNames, layoutShiftEntries, previousResult, i, percentile, enhancedVcLogs, shouldCalculate3p, shouldCalculateDebugDetails, sortedVcLogs, maxViewportPercentageAtTime, maxSoFar, _iterator5, _step5, log, getBiggestPreviousViewportPercentage, ignoredEntriesByTime, _iterator6, _step6, _entry4, _ignoredEntriesByTime, _viewportData$rect, _viewportData$previou, viewportData, timestamp, additionalVcLogs, _iterator7, _step7, _step7$value, _timestamp, ignoredEntries, _viewportPercentage, v3RevisionDebugDetails, _window5, _window5$__ufo_devtoo, _window7, _window7$__on_ufo_vc_;
         return _regeneratorRuntime.wrap(function _callee$(_context) {
           while (1) switch (_context.prev = _context.next) {
             case 0:
@@ -138,16 +139,18 @@ var AbstractVCCalculatorBase = /*#__PURE__*/function () {
               percentileIndex = 0;
               entryDataBuffer = new Set();
               ssrRatio = -1;
+              layoutShiftInsights = null;
+              previousViewportPercentage = 0;
               if (!vcLogs) {
-                _context.next = 32;
+                _context.next = 35;
                 break;
               }
               _iterator4 = _createForOfIteratorHelper(vcLogs);
-              _context.prev = 13;
+              _context.prev = 15;
               _iterator4.s();
-            case 15:
+            case 17:
               if ((_step4 = _iterator4.n()).done) {
-                _context.next = 24;
+                _context.next = 27;
                 break;
               }
               _entry3 = _step4.value;
@@ -160,11 +163,11 @@ var AbstractVCCalculatorBase = /*#__PURE__*/function () {
 
               // Only process entries if we haven't reached all percentiles
               if (!(percentileIndex >= percentiles.length)) {
-                _context.next = 21;
+                _context.next = 23;
                 break;
               }
-              return _context.abrupt("break", 24);
-            case 21:
+              return _context.abrupt("break", 27);
+            case 23:
               // Check if this entry matches any checkpoint percentiles
               if (viewportPercentage >= percentiles[percentileIndex]) {
                 elementNames = _toConsumableArray(new Set(entries.map(function (e) {
@@ -175,6 +178,23 @@ var AbstractVCCalculatorBase = /*#__PURE__*/function () {
                     t: Math.round(time),
                     e: elementNames
                   };
+                  if (reportLayoutShiftOffenders && percentiles[percentileIndex] === 90 && entries.some(function (e) {
+                    return e.type === 'layout-shift';
+                  })) {
+                    layoutShiftEntries = entries.filter(function (e) {
+                      return e.type === 'layout-shift';
+                    });
+                    layoutShiftInsights = {
+                      layoutShiftOffendersResult: detectLayoutShiftCause({
+                        viewportEntries: viewportEntries,
+                        layoutShiftEntries: layoutShiftEntries,
+                        time: time,
+                        startTime: startTime
+                      }),
+                      layoutShiftEntriesCount: layoutShiftEntries.length,
+                      layoutShiftImpact: viewportPercentage - previousViewportPercentage
+                    };
+                  }
                   percentileIndex++;
                 }
 
@@ -186,21 +206,22 @@ var AbstractVCCalculatorBase = /*#__PURE__*/function () {
                   return entryDataBuffer.add(e);
                 });
               }
-            case 22:
-              _context.next = 15;
+              previousViewportPercentage = viewportPercentage;
+            case 25:
+              _context.next = 17;
               break;
-            case 24:
-              _context.next = 29;
+            case 27:
+              _context.next = 32;
               break;
-            case 26:
-              _context.prev = 26;
-              _context.t0 = _context["catch"](13);
-              _iterator4.e(_context.t0);
             case 29:
               _context.prev = 29;
-              _iterator4.f();
-              return _context.finish(29);
+              _context.t0 = _context["catch"](15);
+              _iterator4.e(_context.t0);
             case 32:
+              _context.prev = 32;
+              _iterator4.f();
+              return _context.finish(32);
+            case 35:
               // Fill in any missing percentiles with the last known values
               previousResult = {
                 t: 0,
@@ -361,15 +382,16 @@ var AbstractVCCalculatorBase = /*#__PURE__*/function () {
               return _context.abrupt("return", {
                 vcDetails: vcDetails,
                 ssrRatio: ssrRatio,
-                speedIndex: speedIndex
+                speedIndex: speedIndex,
+                VC90layoutShiftInsights: layoutShiftInsights
               });
-            case 44:
+            case 47:
             case "end":
               return _context.stop();
           }
-        }, _callee, this, [[13, 26, 29, 32]]);
+        }, _callee, this, [[15, 29, 32, 35]]);
       }));
-      function calculateWithDebugInfo(_x, _x2, _x3, _x4, _x5, _x6, _x7, _x8, _x9, _x0, _x1, _x10, _x11, _x12) {
+      function calculateWithDebugInfo(_x, _x2, _x3, _x4, _x5, _x6, _x7, _x8, _x9, _x0, _x1, _x10, _x11, _x12, _x13) {
         return _calculateWithDebugInfo.apply(this, arguments);
       }
       return calculateWithDebugInfo;
@@ -381,11 +403,11 @@ var AbstractVCCalculatorBase = /*#__PURE__*/function () {
         var _this = this,
           _vcDetails$90$t,
           _vcDetails$;
-        var startTime, stopTime, orderedEntries, interactionId, isPostInteraction, include3p, excludeSmartAnswersInSearch, includeSSRRatio, interactionType, isPageVisible, interactionAbortReason, filteredEntries, isVCClean, dirtyReason, getVCCleanStatusResult, _yield$this$calculate, vcDetails, ssrRatio, speedIndex, result;
+        var startTime, stopTime, orderedEntries, interactionId, isPostInteraction, include3p, excludeSmartAnswersInSearch, includeSSRRatio, interactionType, isPageVisible, interactionAbortReason, reportLayoutShiftOffenders, filteredEntries, isVCClean, dirtyReason, getVCCleanStatusResult, _yield$this$calculate, vcDetails, ssrRatio, speedIndex, VC90layoutShiftInsights, layoutShiftInsightsPayload, _layoutShiftOffenders, _layoutShiftOffenders2, _layoutShiftOffenders3, layoutShiftOffendersResult, layoutShiftEntriesCount, layoutShiftImpact, result;
         return _regeneratorRuntime.wrap(function _callee2$(_context2) {
           while (1) switch (_context2.prev = _context2.next) {
             case 0:
-              startTime = _ref.startTime, stopTime = _ref.stopTime, orderedEntries = _ref.orderedEntries, interactionId = _ref.interactionId, isPostInteraction = _ref.isPostInteraction, include3p = _ref.include3p, excludeSmartAnswersInSearch = _ref.excludeSmartAnswersInSearch, includeSSRRatio = _ref.includeSSRRatio, interactionType = _ref.interactionType, isPageVisible = _ref.isPageVisible, interactionAbortReason = _ref.interactionAbortReason;
+              startTime = _ref.startTime, stopTime = _ref.stopTime, orderedEntries = _ref.orderedEntries, interactionId = _ref.interactionId, isPostInteraction = _ref.isPostInteraction, include3p = _ref.include3p, excludeSmartAnswersInSearch = _ref.excludeSmartAnswersInSearch, includeSSRRatio = _ref.includeSSRRatio, interactionType = _ref.interactionType, isPageVisible = _ref.isPageVisible, interactionAbortReason = _ref.interactionAbortReason, reportLayoutShiftOffenders = _ref.reportLayoutShiftOffenders;
               filteredEntries = orderedEntries.filter(function (entry) {
                 return _this.isEntryIncluded(entry, include3p, excludeSmartAnswersInSearch);
               });
@@ -405,17 +427,50 @@ var AbstractVCCalculatorBase = /*#__PURE__*/function () {
               });
             case 7:
               _context2.next = 9;
-              return this.calculateWithDebugInfo(filteredEntries, startTime, stopTime, isPostInteraction, isVCClean, interactionType, isPageVisible, interactionId, dirtyReason, orderedEntries, include3p, excludeSmartAnswersInSearch, interactionAbortReason, includeSSRRatio);
+              return this.calculateWithDebugInfo(filteredEntries, startTime, stopTime, isPostInteraction, isVCClean, interactionType, isPageVisible, interactionId, dirtyReason, orderedEntries, include3p, excludeSmartAnswersInSearch, interactionAbortReason, includeSSRRatio, reportLayoutShiftOffenders);
             case 9:
               _yield$this$calculate = _context2.sent;
               vcDetails = _yield$this$calculate.vcDetails;
               ssrRatio = _yield$this$calculate.ssrRatio;
               speedIndex = _yield$this$calculate.speedIndex;
+              VC90layoutShiftInsights = _yield$this$calculate.VC90layoutShiftInsights;
+              if (VC90layoutShiftInsights !== null && reportLayoutShiftOffenders) {
+                layoutShiftOffendersResult = VC90layoutShiftInsights.layoutShiftOffendersResult, layoutShiftEntriesCount = VC90layoutShiftInsights.layoutShiftEntriesCount, layoutShiftImpact = VC90layoutShiftInsights.layoutShiftImpact;
+                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(function (a, b) {
+                    return Math.abs(a.distanceToLS) - Math.abs(b.distanceToLS);
+                  }).slice(0, 5).map(function (offender) {
+                    return {
+                      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'
+                      }
+                    };
+                  })
+                };
+              }
               result = {
                 revision: this.revisionNo,
                 clean: true,
                 'metric:vc90': (_vcDetails$90$t = vcDetails === null || vcDetails === 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': layoutShiftInsightsPayload !== null && layoutShiftInsightsPayload !== void 0 ? layoutShiftInsightsPayload : undefined
               };
               result.ratios = this.calculateRatios(filteredEntries);
               if (ssrRatio !== -1) {
@@ -428,13 +483,13 @@ var AbstractVCCalculatorBase = /*#__PURE__*/function () {
               }
               result.labelStacks = this.getLabelStacks(filteredEntries, isPostInteraction);
               return _context2.abrupt("return", result);
-            case 19:
+            case 21:
             case "end":
               return _context2.stop();
           }
         }, _callee2, this);
       }));
-      function calculate(_x13) {
+      function calculate(_x14) {
         return _calculate.apply(this, arguments);
       }
       return calculate;

package/dist/esm/vc/vc-observer-new/metric-calculator/utils/detect-layout-shift-cause.js

@@ -0,0 +1,158 @@
+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 calculateOffenderState = function calculateOffenderState(current, matchesCurrentEntry) {
+  // Once we know it's mixed across entries, we can short-circuit.
+  if (current === 'some') {
+    return 'some';
+  }
+  var entryState = matchesCurrentEntry ? 'all' : 'none';
+  if (current == null) {
+    return entryState;
+  }
+
+  // If the state flips between entries (all <-> none), it's "some".
+  if (current !== entryState) {
+    return 'some';
+  }
+  return current;
+};
+var calculateLayoutShiftMovement = function calculateLayoutShiftMovement(layoutShiftEntries) {
+  var movements = layoutShiftEntries.map(function (lsEntry) {
+    var rect = lsEntry.rect;
+    var previousRect = lsEntry.previousRect;
+    if (!rect || !previousRect) {
+      return null;
+    }
+    var dx = rect.x - previousRect.x;
+    var dy = rect.y - previousRect.y;
+    return {
+      dx: dx,
+      dy: dy,
+      movedX: dx !== 0,
+      movedY: dy !== 0,
+      dirX: Math.sign(dx),
+      dirY: Math.sign(dy),
+      absDx: Math.abs(dx),
+      absDy: Math.abs(dy)
+    };
+  });
+  var hasMovement = function hasMovement(m) {
+    return m !== null;
+  };
+  var validMovements = movements.filter(hasMovement);
+  var allHaveRects = layoutShiftEntries.length > 0 && validMovements.length === layoutShiftEntries.length;
+  if (!allHaveRects) {
+    return {
+      allHaveRects: allHaveRects,
+      allMovedSameWay: false,
+      allMovedSameAmount: false
+    };
+  }
+  var first = validMovements[0];
+  var allMovedSameWay = validMovements.every(function (m) {
+    return m.movedX === first.movedX && m.movedY === first.movedY && m.dirX === first.dirX && m.dirY === first.dirY;
+  });
+  var allMovedSameAmount = allMovedSameWay && validMovements.every(function (m) {
+    return m.absDx === first.absDx && m.absDy === first.absDy;
+  });
+  return {
+    allHaveRects: allHaveRects,
+    allMovedSameWay: allMovedSameWay,
+    allMovedSameAmount: allMovedSameAmount,
+    deltaX: first.dx,
+    deltaY: first.dy
+  };
+};
+export var detectLayoutShiftCause = function detectLayoutShiftCause(_ref) {
+  var viewportEntries = _ref.viewportEntries,
+    layoutShiftEntries = _ref.layoutShiftEntries,
+    time = _ref.time,
+    startTime = _ref.startTime,
+    _ref$offenderWindowMs = _ref.offenderWindowMs,
+    offenderWindowMs = _ref$offenderWindowMs === void 0 ? 250 : _ref$offenderWindowMs;
+  var checkpointTimestamp = startTime + time;
+  var filteredLSPotentialOffenders = viewportEntries.filter(function (viewportEntry) {
+    return (viewportEntry.time < checkpointTimestamp && viewportEntry.time > checkpointTimestamp - offenderWindowMs || viewportEntry.time > checkpointTimestamp && viewportEntry.time < checkpointTimestamp + offenderWindowMs) && viewportEntry.data.type !== 'layout-shift';
+  });
+
+  // Summarize whether all layout-shift entries moved in a consistent direction and by the same amount.
+  var layoutShiftVariables = calculateLayoutShiftMovement(layoutShiftEntries);
+
+  // Classify each offender against *all* layout-shift entries when the layout shift is consistently moving in a
+  // single axis (pure X or pure Y) so we can reason about whether an offender could have caused the movement.
+  var layoutShiftOffenders = filteredLSPotentialOffenders.reduce(function (acc, offender) {
+    var _offenderData$origina;
+    var offenderData = offender.data;
+    var offenderRect = offenderData.rect;
+    if (!offenderRect) {
+      return acc;
+    }
+    var offenderTimestamp = (_offenderData$origina = offenderData.originalMutationTimestamp) !== null && _offenderData$origina !== void 0 ? _offenderData$origina : offender.time;
+    var happenedBefore = offenderTimestamp <= checkpointTimestamp;
+    var offenderLeft = offenderRect.x;
+    var offenderRight = offenderRect.x + offenderRect.width;
+    var offenderTop = offenderRect.y;
+    var offenderBottom = offenderRect.y + offenderRect.height;
+    var shouldClassifyAgainstAllEntries = layoutShiftVariables.allMovedSameWay && 'deltaX' in layoutShiftVariables && 'deltaY' in layoutShiftVariables && layoutShiftVariables.deltaX === 0 !== (layoutShiftVariables.deltaY === 0);
+    var isAbove = null;
+    var isLeft = null;
+    var isRight = null;
+    var hasHorizontalOverlap = null;
+    var hasVerticalOverlap = null;
+    if (shouldClassifyAgainstAllEntries) {
+      var _iterator = _createForOfIteratorHelper(layoutShiftEntries),
+        _step;
+      try {
+        for (_iterator.s(); !(_step = _iterator.n()).done;) {
+          var lsEntry = _step.value;
+          var lsRect = lsEntry.rect;
+          if (!lsRect) {
+            continue;
+          }
+          var lsLeft = lsRect.x;
+          var lsRight = lsRect.x + lsRect.width;
+          var lsTop = lsRect.y;
+          var lsBottom = lsRect.y + lsRect.height;
+          isAbove = calculateOffenderState(isAbove, offenderBottom <= lsTop);
+          isLeft = calculateOffenderState(isLeft, offenderRight <= lsLeft);
+          isRight = calculateOffenderState(isRight, offenderLeft >= lsRight);
+          hasHorizontalOverlap = calculateOffenderState(hasHorizontalOverlap, offenderLeft < lsRight && offenderRight > lsLeft);
+          hasVerticalOverlap = calculateOffenderState(hasVerticalOverlap, offenderTop < lsBottom && offenderBottom > lsTop);
+        }
+      } catch (err) {
+        _iterator.e(err);
+      } finally {
+        _iterator.f();
+      }
+    }
+    var matchesLayoutShiftDelta = false;
+    if (shouldClassifyAgainstAllEntries && layoutShiftVariables.allMovedSameAmount && offenderData.previousRect) {
+      var dx = offenderRect.x - offenderData.previousRect.x;
+      var dy = offenderRect.y - offenderData.previousRect.y;
+      var isPureX = layoutShiftVariables.deltaX !== 0 && layoutShiftVariables.deltaY === 0;
+      var isPureY = layoutShiftVariables.deltaY !== 0 && layoutShiftVariables.deltaX === 0;
+      if (isPureX) {
+        matchesLayoutShiftDelta = dx === layoutShiftVariables.deltaX && dy === 0;
+      } else if (isPureY) {
+        matchesLayoutShiftDelta = dy === layoutShiftVariables.deltaY && dx === 0;
+      }
+    }
+    acc.push({
+      offender: offenderData.elementName,
+      happenedBefore: happenedBefore,
+      distanceToLS: Math.round(offenderTimestamp - checkpointTimestamp),
+      isAbove: isAbove !== null && isAbove !== void 0 ? isAbove : 'none',
+      isLeft: isLeft !== null && isLeft !== void 0 ? isLeft : 'none',
+      isRight: isRight !== null && isRight !== void 0 ? isRight : 'none',
+      hasHorizontalOverlap: hasHorizontalOverlap !== null && hasHorizontalOverlap !== void 0 ? hasHorizontalOverlap : 'none',
+      hasVerticalOverlap: hasVerticalOverlap !== null && hasVerticalOverlap !== void 0 ? hasVerticalOverlap : 'none',
+      matchesLayoutShiftDelta: matchesLayoutShiftDelta
+    });
+    return acc;
+  }, []);
+  return {
+    layoutShiftVariables: layoutShiftVariables,
+    layoutShiftOffenders: layoutShiftOffenders
+  };
+};