@atlaskit/react-ufo 3.12.4 → 3.13.0

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

@@ -17,12 +17,14 @@ var DEFAULT_SELECTOR_CONFIG = {
 };
 var VCObserverNew = /*#__PURE__*/function () {
   function VCObserverNew(config) {
-    var _config$selectorConfi,
+    var _config$isPostInterac,
+      _config$selectorConfi,
       _this = this;
     _classCallCheck(this, VCObserverNew);
     _defineProperty(this, "viewportObserver", null);
     _defineProperty(this, "windowEventObserver", null);
     this.entriesTimeline = new EntriesTimeline();
+    this.isPostInteraction = (_config$isPostInterac = config.isPostInteraction) !== null && _config$isPostInterac !== void 0 ? _config$isPostInterac : false;
     this.selectorConfig = (_config$selectorConfi = config.selectorConfig) !== null && _config$selectorConfi !== void 0 ? _config$selectorConfi : DEFAULT_SELECTOR_CONFIG;
     this.viewportObserver = new ViewportObserver({
       onChange: function onChange(onChangeArg) {
@@ -40,13 +42,15 @@ var VCObserverNew = /*#__PURE__*/function () {
         }
         _this.entriesTimeline.push({
           time: time,
-          type: type,
           data: {
+            type: type,
             elementName: elementName,
             rect: rect,
             previousRect: previousRect,
             visible: visible,
-            attributeName: mutationData === null || mutationData === void 0 ? void 0 : mutationData.attributeName
+            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
           }
         });
       }
@@ -57,8 +61,8 @@ var VCObserverNew = /*#__PURE__*/function () {
           type = _ref.type;
         _this.entriesTimeline.push({
           time: time,
-          type: 'window:event',
           data: {
+            type: 'window:event',
             eventType: type
           }
         });
@@ -85,11 +89,11 @@ var VCObserverNew = /*#__PURE__*/function () {
     key: "getVCResult",
     value: function () {
       var _getVCResult = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(param) {
-        var start, stop, results, calculator_fy25_03, orderedEntries, fy25_03;
+        var start, stop, interactionId, results, calculator_fy25_03, orderedEntries, fy25_03;
         return _regeneratorRuntime.wrap(function _callee$(_context) {
           while (1) switch (_context.prev = _context.next) {
             case 0:
-              start = param.start, stop = param.stop;
+              start = param.start, stop = param.stop, interactionId = param.interactionId;
               results = [];
               calculator_fy25_03 = new VCCalculator_FY25_03();
               orderedEntries = this.entriesTimeline.getOrderedEntries({
@@ -100,7 +104,9 @@ var VCObserverNew = /*#__PURE__*/function () {
               return calculator_fy25_03.calculate({
                 orderedEntries: orderedEntries,
                 startTime: start,
-                stopTime: stop
+                stopTime: stop,
+                interactionId: interactionId,
+                isPostInteraction: this.isPostInteraction
               });
             case 6:
               fy25_03 = _context.sent;

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

@@ -1,9 +1,12 @@
 import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
 import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 import _createClass from "@babel/runtime/helpers/createClass";
+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 _regeneratorRuntime from "@babel/runtime/regenerator";
 import { fg } from '@atlaskit/platform-feature-flags';
-import calculateTTVCPercentiles from './percentile-calc';
+import { calculateTTVCPercentiles, calculateTTVCPercentilesWithDebugInfo } from './percentile-calc';
 import getViewportHeight from './utils/get-viewport-height';
 import getViewportWidth from './utils/get-viewport-width';
 var AbstractVCCalculatorBase = /*#__PURE__*/function () {
@@ -12,76 +15,248 @@ var AbstractVCCalculatorBase = /*#__PURE__*/function () {
     this.revisionNo = revisionNo;
   }
   return _createClass(AbstractVCCalculatorBase, [{
+    key: "filterViewportEntries",
+    value: function filterViewportEntries(entries) {
+      return entries.filter(function (entry) {
+        return 'rect' in entry.data;
+      });
+    }
+  }, {
+    key: "calculateBasic",
+    value: function () {
+      var _calculateBasic = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(filteredEntries, startTime, stopTime) {
+        var percentiles, viewportEntries, vcLogs;
+        return _regeneratorRuntime.wrap(function _callee$(_context) {
+          while (1) switch (_context.prev = _context.next) {
+            case 0:
+              percentiles = [25, 50, 75, 80, 85, 90, 95, 98, 99];
+              viewportEntries = this.filterViewportEntries(filteredEntries);
+              _context.next = 4;
+              return calculateTTVCPercentiles({
+                viewport: {
+                  width: getViewportWidth(),
+                  height: getViewportHeight()
+                },
+                startTime: startTime,
+                stopTime: stopTime,
+                orderedEntries: viewportEntries,
+                percentiles: percentiles
+              });
+            case 4:
+              vcLogs = _context.sent;
+              return _context.abrupt("return", vcLogs);
+            case 6:
+            case "end":
+              return _context.stop();
+          }
+        }, _callee, this);
+      }));
+      function calculateBasic(_x, _x2, _x3) {
+        return _calculateBasic.apply(this, arguments);
+      }
+      return calculateBasic;
+    }()
+  }, {
+    key: "calculateWithDebugInfo",
+    value: function () {
+      var _calculateWithDebugInfo = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2(filteredEntries, startTime, stopTime, isPostInteraction, isVCClean, interactionId, dirtyReason) {
+        var percentiles, viewportEntries, vcLogs, vcDetails, percentileIndex, entryDataBuffer, _iterator, _step, _entry, time, viewportPercentage, entries, elementNames, previousResult, i, percentile, _ufo_devtool_onVCRev, _ref;
+        return _regeneratorRuntime.wrap(function _callee2$(_context2) {
+          while (1) switch (_context2.prev = _context2.next) {
+            case 0:
+              percentiles = [25, 50, 75, 80, 85, 90, 95, 98, 99];
+              viewportEntries = this.filterViewportEntries(filteredEntries);
+              _context2.next = 4;
+              return calculateTTVCPercentilesWithDebugInfo({
+                viewport: {
+                  width: getViewportWidth(),
+                  height: getViewportHeight()
+                },
+                startTime: startTime,
+                stopTime: stopTime,
+                orderedEntries: viewportEntries
+              });
+            case 4:
+              vcLogs = _context2.sent;
+              vcDetails = {};
+              percentileIndex = 0;
+              entryDataBuffer = new Set();
+              if (!vcLogs) {
+                _context2.next = 28;
+                break;
+              }
+              _iterator = _createForOfIteratorHelper(vcLogs);
+              _context2.prev = 10;
+              _iterator.s();
+            case 12:
+              if ((_step = _iterator.n()).done) {
+                _context2.next = 20;
+                break;
+              }
+              _entry = _step.value;
+              time = _entry.time, viewportPercentage = _entry.viewportPercentage, entries = _entry.entries; // Only process entries if we haven't reached all percentiles
+              if (!(percentileIndex >= percentiles.length)) {
+                _context2.next = 17;
+                break;
+              }
+              return _context2.abrupt("break", 20);
+            case 17:
+              // Check if this entry matches any checkpoint percentiles
+              if (viewportPercentage >= percentiles[percentileIndex]) {
+                elementNames = entries.map(function (e) {
+                  return e.elementName;
+                }); // Process all matching percentiles in one go
+                while (percentileIndex < percentiles.length && viewportPercentage >= percentiles[percentileIndex]) {
+                  vcDetails["".concat(percentiles[percentileIndex])] = {
+                    t: Math.round(time),
+                    e: elementNames
+                  };
+                  percentileIndex++;
+                }
+
+                // Clear buffer after processing all matching percentiles
+                entryDataBuffer.clear();
+              } else {
+                // Only add to buffer if we haven't reached all percentiles
+                entries.forEach(function (e) {
+                  return entryDataBuffer.add(e);
+                });
+              }
+            case 18:
+              _context2.next = 12;
+              break;
+            case 20:
+              _context2.next = 25;
+              break;
+            case 22:
+              _context2.prev = 22;
+              _context2.t0 = _context2["catch"](10);
+              _iterator.e(_context2.t0);
+            case 25:
+              _context2.prev = 25;
+              _iterator.f();
+              return _context2.finish(25);
+            case 28:
+              // Fill in any missing percentiles with the last known values
+              previousResult = {
+                t: 0,
+                e: []
+              };
+              for (i = 0; i < percentiles.length; i++) {
+                percentile = percentiles[i];
+                if (!(percentile in vcDetails)) {
+                  vcDetails["".concat(percentile)] = previousResult;
+                } else {
+                  previousResult = vcDetails["".concat(percentile)];
+                }
+              }
+
+              // Handle devtool callback
+              if (!isPostInteraction && typeof window !== 'undefined' && typeof window.__ufo_devtool_onVCRevisionReady__ === 'function' && fg('platform_ufo_ttvc_v3_devtool')) {
+                try {
+                  (_ufo_devtool_onVCRev = (_ref = window).__ufo_devtool_onVCRevisionReady__) === null || _ufo_devtool_onVCRev === void 0 || _ufo_devtool_onVCRev.call(_ref, {
+                    revision: this.revisionNo,
+                    isClean: isVCClean,
+                    abortReason: dirtyReason,
+                    vcLogs: vcLogs,
+                    interactionId: interactionId
+                  });
+                } catch (e) {
+                  // if any error communicating with devtool, we don't want to break the app
+                  // eslint-disable-next-line no-console
+                  console.error('Error in onVCRevisionReady', e);
+                }
+              }
+              return _context2.abrupt("return", vcDetails);
+            case 32:
+            case "end":
+              return _context2.stop();
+          }
+        }, _callee2, this, [[10, 22, 25, 28]]);
+      }));
+      function calculateWithDebugInfo(_x4, _x5, _x6, _x7, _x8, _x9, _x10) {
+        return _calculateWithDebugInfo.apply(this, arguments);
+      }
+      return calculateWithDebugInfo;
+    }()
+  }, {
     key: "calculate",
     value: function () {
-      var _calculate = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(_ref) {
+      var _calculate = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee3(_ref2) {
         var _this = this,
           _vcDetails$90$t,
           _vcDetails$;
-        var startTime, stopTime, orderedEntries, filteredEntries, _this$getVCCleanStatu, _isVCClean, dirtyReason, _isVCClean2, vcDetails;
-        return _regeneratorRuntime.wrap(function _callee$(_context) {
-          while (1) switch (_context.prev = _context.next) {
+        var startTime, stopTime, orderedEntries, interactionId, isPostInteraction, filteredEntries, isVCClean, dirtyReason, getVCCleanStatusResult, useDebugInfo, vcDetails;
+        return _regeneratorRuntime.wrap(function _callee3$(_context3) {
+          while (1) switch (_context3.prev = _context3.next) {
             case 0:
-              startTime = _ref.startTime, stopTime = _ref.stopTime, orderedEntries = _ref.orderedEntries;
+              startTime = _ref2.startTime, stopTime = _ref2.stopTime, orderedEntries = _ref2.orderedEntries, interactionId = _ref2.interactionId, isPostInteraction = _ref2.isPostInteraction;
               filteredEntries = orderedEntries.filter(function (entry) {
                 return _this.isEntryIncluded(entry);
               });
               if (!fg('platform_ufo_add_vc_abort_reason_by_revisions')) {
-                _context.next = 8;
+                _context3.next = 10;
                 break;
               }
-              _this$getVCCleanStatu = this.getVCCleanStatus(filteredEntries), _isVCClean = _this$getVCCleanStatu.isVCClean, dirtyReason = _this$getVCCleanStatu.dirtyReason;
-              if (_isVCClean) {
-                _context.next = 6;
+              getVCCleanStatusResult = this.getVCCleanStatus(filteredEntries);
+              isVCClean = getVCCleanStatusResult.isVCClean;
+              dirtyReason = getVCCleanStatusResult.dirtyReason;
+              if (isVCClean) {
+                _context3.next = 8;
                 break;
               }
-              return _context.abrupt("return", {
+              return _context3.abrupt("return", {
                 revision: this.revisionNo,
                 'metric:vc90': null,
                 clean: false,
                 abortReason: dirtyReason
               });
-            case 6:
-              _context.next = 11;
-              break;
             case 8:
-              _isVCClean2 = this.isVCClean(filteredEntries);
-              if (_isVCClean2) {
-                _context.next = 11;
+              _context3.next = 13;
+              break;
+            case 10:
+              isVCClean = this.isVCClean(filteredEntries);
+              if (isVCClean) {
+                _context3.next = 13;
                 break;
               }
-              return _context.abrupt("return", {
+              return _context3.abrupt("return", {
                 revision: this.revisionNo,
                 'metric:vc90': null,
                 clean: false
               });
-            case 11:
-              _context.next = 13;
-              return calculateTTVCPercentiles({
-                viewport: {
-                  width: getViewportWidth(),
-                  height: getViewportHeight()
-                },
-                startTime: startTime,
-                stopTime: stopTime,
-                orderedEntries: filteredEntries,
-                percentiles: [25, 50, 75, 80, 85, 90, 95, 98, 99]
-              });
             case 13:
-              vcDetails = _context.sent;
-              return _context.abrupt("return", {
+              useDebugInfo = fg('platform_ufo_ttvc_v3_devtool');
+              if (!useDebugInfo) {
+                _context3.next = 20;
+                break;
+              }
+              _context3.next = 17;
+              return this.calculateWithDebugInfo(filteredEntries, startTime, stopTime, isPostInteraction, isVCClean, interactionId, dirtyReason);
+            case 17:
+              _context3.t0 = _context3.sent;
+              _context3.next = 23;
+              break;
+            case 20:
+              _context3.next = 22;
+              return this.calculateBasic(filteredEntries, startTime, stopTime);
+            case 22:
+              _context3.t0 = _context3.sent;
+            case 23:
+              vcDetails = _context3.t0;
+              return _context3.abrupt("return", {
                 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
               });
-            case 15:
+            case 25:
             case "end":
-              return _context.stop();
+              return _context3.stop();
           }
-        }, _callee, this);
+        }, _callee3, this);
       }));
-      function calculate(_x) {
+      function calculate(_x11) {
         return _calculate.apply(this, arguments);
       }
       return calculate;

package/dist/esm/vc/vc-observer-new/metric-calculator/fy25_03/index.js

@@ -24,10 +24,10 @@ var VCCalculator_FY25_03 = /*#__PURE__*/function (_AbstractVCCalculator) {
   return _createClass(VCCalculator_FY25_03, [{
     key: "isEntryIncluded",
     value: function isEntryIncluded(entry) {
-      if (!CONSIDERED_ENTRY_TYPE.includes(entry.type)) {
+      if (!CONSIDERED_ENTRY_TYPE.includes(entry.data.type)) {
         return false;
       }
-      if (entry.type === 'mutation:attribute') {
+      if (entry.data.type === 'mutation:attribute') {
         var entryData = entry.data;
         var attributeName = entryData.attributeName;
         if (!attributeName || KNOWN_ATTRIBUTES_THAT_DOES_NOT_CAUSE_LAYOUT_SHIFTS.includes(attributeName)) {
@@ -44,7 +44,7 @@ var VCCalculator_FY25_03 = /*#__PURE__*/function (_AbstractVCCalculator) {
     key: "isVCClean",
     value: function isVCClean(filteredEntries) {
       var hasAbortEvent = filteredEntries.some(function (entry) {
-        if (entry.type === 'window:event') {
+        if (entry.data.type === 'window:event') {
           var data = entry.data;
           if (ABORTING_WINDOW_EVENT.includes(data.eventType)) {
             return true;
@@ -59,7 +59,7 @@ var VCCalculator_FY25_03 = /*#__PURE__*/function (_AbstractVCCalculator) {
     value: function getVCCleanStatus(filteredEntries) {
       var dirtyReason = '';
       var hasAbortEvent = filteredEntries.some(function (entry) {
-        if (entry.type === 'window:event') {
+        if (entry.data.type === 'window:event') {
           var data = entry.data;
           if (ABORTING_WINDOW_EVENT.includes(data.eventType)) {
             dirtyReason = data.eventType === 'keydown' ? 'keypress' : data.eventType;

package/dist/esm/vc/vc-observer-new/metric-calculator/percentile-calc/canvas-heatmap/index.js

@@ -70,6 +70,69 @@ function _calculateTTVCPercentiles() {
   }));
   return _calculateTTVCPercentiles.apply(this, arguments);
 }
+function calculateTTVCPercentilesWithDebugInfo(_x2) {
+  return _calculateTTVCPercentilesWithDebugInfo.apply(this, arguments);
+}
+function _calculateTTVCPercentilesWithDebugInfo() {
+  _calculateTTVCPercentilesWithDebugInfo = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2(_ref2) {
+    var viewport, orderedEntries, startTime, canvas, elementMap, _iterator3, _step3, entry, rect, timePixelCounts, canvasDimensions, totalPixels;
+    return _regeneratorRuntime.wrap(function _callee2$(_context2) {
+      while (1) switch (_context2.prev = _context2.next) {
+        case 0:
+          viewport = _ref2.viewport, orderedEntries = _ref2.orderedEntries, startTime = _ref2.startTime;
+          canvas = new ViewportCanvas(viewport, fg('platform_ufo_canvas_heatmap_full_precision') ? 1 : 0.25);
+          elementMap = new Map();
+          _iterator3 = _createForOfIteratorHelper(orderedEntries);
+          _context2.prev = 4;
+          _iterator3.s();
+        case 6:
+          if ((_step3 = _iterator3.n()).done) {
+            _context2.next = 16;
+            break;
+          }
+          entry = _step3.value;
+          if ('rect' in entry.data) {
+            _context2.next = 10;
+            break;
+          }
+          return _context2.abrupt("continue", 14);
+        case 10:
+          rect = entry.data.rect;
+          canvas.drawRect(rect, entry.time);
+          if (!elementMap.has(entry.time)) {
+            elementMap.set(entry.time, []);
+          }
+          elementMap.get(entry.time).push(entry.data);
+        case 14:
+          _context2.next = 6;
+          break;
+        case 16:
+          _context2.next = 21;
+          break;
+        case 18:
+          _context2.prev = 18;
+          _context2.t0 = _context2["catch"](4);
+          _iterator3.e(_context2.t0);
+        case 21:
+          _context2.prev = 21;
+          _iterator3.f();
+          return _context2.finish(21);
+        case 24:
+          _context2.next = 26;
+          return canvas.getPixelCounts();
+        case 26:
+          timePixelCounts = _context2.sent;
+          canvasDimensions = canvas.getScaledDimensions();
+          totalPixels = canvasDimensions.width * canvasDimensions.height;
+          return _context2.abrupt("return", calculatePercentilesWithDebugInfo(timePixelCounts, elementMap, totalPixels, startTime));
+        case 30:
+        case "end":
+          return _context2.stop();
+      }
+    }, _callee2, null, [[4, 18, 21, 24]]);
+  }));
+  return _calculateTTVCPercentilesWithDebugInfo.apply(this, arguments);
+}
 export default calculateTTVCPercentiles;
 export function calculatePercentiles(timePixelCounts, elementMap, unorderedPercentiles, totalPixels, startTime) {
   var results = {};
@@ -79,11 +142,11 @@ export function calculatePercentiles(timePixelCounts, elementMap, unorderedPerce
   });
 
   // Sort entries by timestamp for consistent processing
-  var sortedEntries = Array.from(timePixelCounts.entries()).sort(function (_ref2, _ref3) {
-    var _ref4 = _slicedToArray(_ref2, 1),
-      timeA = _ref4[0];
+  var sortedEntries = Array.from(timePixelCounts.entries()).sort(function (_ref3, _ref4) {
     var _ref5 = _slicedToArray(_ref3, 1),
-      timeB = _ref5[0];
+      timeA = _ref5[0];
+    var _ref6 = _slicedToArray(_ref4, 1),
+      timeB = _ref6[0];
     return Number(timeA) - Number(timeB);
   });
   var percentileIndex = 0;
@@ -134,4 +197,30 @@ export function calculatePercentiles(timePixelCounts, elementMap, unorderedPerce
     previousResult = results["".concat(percentile)];
   }
   return results;
-}
+}
+export function calculatePercentilesWithDebugInfo(timePixelCounts, elementMap, totalPixels, startTime) {
+  var results = new Array(elementMap.size);
+  var cumulativePixels = 0;
+  var sortedEntries = Array.from(timePixelCounts.entries()).sort(function (_ref7, _ref8) {
+    var _ref9 = _slicedToArray(_ref7, 1),
+      timeA = _ref9[0];
+    var _ref10 = _slicedToArray(_ref8, 1),
+      timeB = _ref10[0];
+    return Number(timeA) - Number(timeB);
+  });
+  for (var i = 0; i < sortedEntries.length; i++) {
+    var _sortedEntries$i = _slicedToArray(sortedEntries[i], 2),
+      time = _sortedEntries$i[0],
+      pixelCount = _sortedEntries$i[1];
+    cumulativePixels += pixelCount;
+    var percentCovered = cumulativePixels / totalPixels * 100;
+    var entryDatas = elementMap.get(time) || [];
+    results[i] = {
+      time: Math.round(Number(time - startTime)),
+      viewportPercentage: percentCovered,
+      entries: Array.from(entryDatas)
+    };
+  }
+  return results;
+}
+export { calculateTTVCPercentilesWithDebugInfo };

package/dist/esm/vc/vc-observer-new/metric-calculator/percentile-calc/canvas-heatmap/test-with-debug-info.js

@@ -0,0 +1,106 @@
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
+import { calculatePercentilesWithDebugInfo } from './index';
+
+// Test utilities
+var createMockRect = function createMockRect() {
+  var x = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
+  var y = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
+  var width = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 100;
+  var height = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 100;
+  return new MockDOMRect(x, y, width, height);
+};
+var createViewportEntry = function createViewportEntry(elementName) {
+  var rect = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : createMockRect();
+  var visible = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
+  var type = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 'mutation:element';
+  return {
+    elementName: elementName,
+    rect: rect,
+    visible: visible,
+    type: type
+  };
+};
+var createTimePixelCounts = function createTimePixelCounts(counts) {
+  return new Map(counts);
+};
+var createElementMap = function createElementMap(entries) {
+  return new Map(entries);
+};
+var createExpectedResult = function createExpectedResult(time, viewportPercentage, entries) {
+  return {
+    time: time,
+    viewportPercentage: viewportPercentage,
+    entries: entries
+  };
+};
+var MockDOMRect = /*#__PURE__*/function () {
+  function MockDOMRect(x, y, width, height) {
+    _classCallCheck(this, MockDOMRect);
+    this.x = x;
+    this.y = y;
+    this.width = width;
+    this.height = height;
+  }
+  return _createClass(MockDOMRect, [{
+    key: "bottom",
+    get: function get() {
+      return this.y + this.height;
+    }
+  }, {
+    key: "left",
+    get: function get() {
+      return this.x;
+    }
+  }, {
+    key: "right",
+    get: function get() {
+      return this.x + this.width;
+    }
+  }, {
+    key: "top",
+    get: function get() {
+      return this.y;
+    }
+  }, {
+    key: "toJSON",
+    value: function toJSON() {
+      return {
+        x: this.x,
+        y: this.y,
+        width: this.width,
+        height: this.height
+      };
+    }
+  }]);
+}();
+describe('calculatePercentilesWithDebugInfo', function () {
+  it('should correctly calculate percentiles with accumulated elements from timestamps', function () {
+    var timePixelCounts = createTimePixelCounts([[100, 10], [200, 20], [300, 10], [400, 10]]);
+    var elementMap = createElementMap([[100, [createViewportEntry('div'), createViewportEntry('span')]], [200, [createViewportEntry('img')]], [300, [createViewportEntry('p'), createViewportEntry('a')]], [400, [createViewportEntry('img')]]]);
+    var expected = [createExpectedResult(100, 20, [createViewportEntry('div'), createViewportEntry('span')]), createExpectedResult(200, 60, [createViewportEntry('img')]), createExpectedResult(300, 80, [createViewportEntry('p'), createViewportEntry('a')]), createExpectedResult(400, 100, [createViewportEntry('img')])];
+    var result = calculatePercentilesWithDebugInfo(timePixelCounts, elementMap, 50, 0);
+    expect(result).toEqual(expected);
+  });
+  it('should handle empty entries gracefully', function () {
+    var timePixelCounts = new Map();
+    var elementMap = new Map();
+    var expected = [];
+    var result = calculatePercentilesWithDebugInfo(timePixelCounts, elementMap, 100, 0);
+    expect(result).toEqual(expected);
+  });
+  it('should handle non-sequential timestamps', function () {
+    var timePixelCounts = createTimePixelCounts([[300, 70], [100, 30]]);
+    var elementMap = createElementMap([[300, [createViewportEntry('p'), createViewportEntry('a')]], [100, [createViewportEntry('div')]]]);
+    var expected = [createExpectedResult(100, 30, [createViewportEntry('div')]), createExpectedResult(300, 100, [createViewportEntry('p'), createViewportEntry('a')])];
+    var result = calculatePercentilesWithDebugInfo(timePixelCounts, elementMap, 100, 0);
+    expect(result).toEqual(expected);
+  });
+  it('should correctly calculate percentiles with startTime offset', function () {
+    var timePixelCounts = createTimePixelCounts([[100, 10], [200, 20], [300, 10], [400, 10]]);
+    var elementMap = createElementMap([[100, [createViewportEntry('div'), createViewportEntry('span')]], [200, [createViewportEntry('img')]], [300, [createViewportEntry('p'), createViewportEntry('a')]], [400, [createViewportEntry('img')]]]);
+    var expected = [createExpectedResult(50, 20, [createViewportEntry('div'), createViewportEntry('span')]), createExpectedResult(150, 60, [createViewportEntry('img')]), createExpectedResult(250, 80, [createViewportEntry('p'), createViewportEntry('a')]), createExpectedResult(350, 100, [createViewportEntry('img')])];
+    var result = calculatePercentilesWithDebugInfo(timePixelCounts, elementMap, 50, 50);
+    expect(result).toEqual(expected);
+  });
+});