@atlaskit/react-ufo 3.12.4 → 3.13.0

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

@@ -123,7 +123,9 @@ var ViewportObserver = exports.default = /*#__PURE__*/function () {
     (0, _defineProperty2.default)(this, "handleAttributeMutation", function (_ref5) {
       var _this$intersectionObs4;
       var target = _ref5.target,
-        attributeName = _ref5.attributeName;
+        attributeName = _ref5.attributeName,
+        oldValue = _ref5.oldValue,
+        newValue = _ref5.newValue;
       (_this$intersectionObs4 = _this.intersectionObserver) === null || _this$intersectionObs4 === void 0 || _this$intersectionObs4.watchAndTag(target, function (_ref6) {
         var target = _ref6.target,
           rect = _ref6.rect;
@@ -131,7 +133,9 @@ var ViewportObserver = exports.default = /*#__PURE__*/function () {
           return {
             type: 'mutation:media',
             mutationData: {
-              attributeName: attributeName
+              attributeName: attributeName,
+              oldValue: oldValue,
+              newValue: newValue
             }
           };
         }
@@ -143,7 +147,9 @@ var ViewportObserver = exports.default = /*#__PURE__*/function () {
           return {
             type: 'mutation:attribute:non-visual-style',
             mutationData: {
-              attributeName: attributeName
+              attributeName: attributeName,
+              oldValue: oldValue,
+              newValue: newValue
             }
           };
         }
@@ -152,14 +158,18 @@ var ViewportObserver = exports.default = /*#__PURE__*/function () {
           return {
             type: 'mutation:attribute:no-layout-shift',
             mutationData: {
-              attributeName: attributeName
+              attributeName: attributeName,
+              oldValue: oldValue,
+              newValue: newValue
             }
           };
         }
         return {
           type: 'mutation:attribute',
           mutationData: {
-            attributeName: attributeName
+            attributeName: attributeName,
+            oldValue: oldValue,
+            newValue: newValue
           }
         };
       });

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

@@ -42,7 +42,9 @@ function createMutationObserver(_ref) {
             var _mut$attributeName;
             onAttributeMutation({
               target: mut.target,
-              attributeName: (_mut$attributeName = mut.attributeName) !== null && _mut$attributeName !== void 0 ? _mut$attributeName : 'unknown'
+              attributeName: (_mut$attributeName = mut.attributeName) !== null && _mut$attributeName !== void 0 ? _mut$attributeName : 'unknown',
+              oldValue: oldValue,
+              newValue: newValue
             });
           }
           continue;

package/dist/es2019/create-experimental-interaction-metrics-payload/index.js

@@ -68,7 +68,8 @@ export async function getExperimentalVCMetrics(interaction) {
       isEventAborted: !!interaction.abortReason,
       prefix,
       vc: interaction.vc,
-      experienceKey: interaction.ufoName
+      experienceKey: interaction.ufoName,
+      interactionId: interaction.id
     });
     const VC = result === null || result === void 0 ? void 0 : result['metrics:vc'];
     if (!VC || !(result !== null && result !== void 0 && result[`${prefix}:vc:clean`])) {

package/dist/es2019/create-payload/utils/get-vc-metrics.js

@@ -36,6 +36,7 @@ async function getVCMetrics(interaction) {
     vc: interaction.vc,
     isEventAborted: interactionStatus.originalInteractionStatus !== 'SUCCEEDED',
     experienceKey: interaction.ufoName,
+    interactionId: interaction.id,
     ...ssr
   });
   if ((_config$experimentalI = config.experimentalInteractionMetrics) !== null && _config$experimentalI !== void 0 && _config$experimentalI.enabled) {

package/dist/es2019/vc/index.js

@@ -82,7 +82,8 @@ export class VCObserverWrapper {
       const v1v2Result = isVCRevisionEnabled('fy25.01', experienceKey) || isVCRevisionEnabled('fy25.02', experienceKey) ? await ((_this$oldVCObserver6 = this.oldVCObserver) === null || _this$oldVCObserver6 === void 0 ? void 0 : _this$oldVCObserver6.getVCResult(param)) : {};
       const v3Result = isVCRevisionEnabled('fy25.03', experienceKey) ? await ((_this$newVCObserver5 = this.newVCObserver) === null || _this$newVCObserver5 === void 0 ? void 0 : _this$newVCObserver5.getVCResult({
         start: param.start,
-        stop: param.stop
+        stop: param.stop,
+        interactionId: param.interactionId
       })) : [];
       if (!v3Result) {
         return v1v2Result !== null && v1v2Result !== void 0 ? v1v2Result : {};
@@ -96,7 +97,8 @@ export class VCObserverWrapper {
       const oldResult = await ((_this$oldVCObserver7 = this.oldVCObserver) === null || _this$oldVCObserver7 === void 0 ? void 0 : _this$oldVCObserver7.getVCResult(param));
       const newResult = await ((_this$newVCObserver6 = this.newVCObserver) === null || _this$newVCObserver6 === void 0 ? void 0 : _this$newVCObserver6.getVCResult({
         start: param.start,
-        stop: param.stop
+        stop: param.stop,
+        interactionId: param.interactionId
       }));
       if (oldResult && !newResult) {
         return oldResult;

package/dist/es2019/vc/vc-observer/getVCRevisionDebugDetails.js

@@ -0,0 +1,32 @@
+export function getVCRevisionDebugDetails({
+  revision,
+  isClean,
+  abortReason,
+  VCEntries,
+  componentsLog,
+  interactionId
+}) {
+  return {
+    revision,
+    isClean,
+    abortReason,
+    vcLogs: VCEntries.map(entry => ({
+      time: entry.time,
+      viewportPercentage: entry.vc,
+      entries: entry.elements.map(element => {
+        var _componentsLog$entry$;
+        const logEntry = (_componentsLog$entry$ = componentsLog[entry.time]) === null || _componentsLog$entry$ === void 0 ? void 0 : _componentsLog$entry$.find(log => log.targetName === element);
+        return {
+          elementName: element,
+          type: logEntry === null || logEntry === void 0 ? void 0 : logEntry.type,
+          rect: logEntry === null || logEntry === void 0 ? void 0 : logEntry.intersectionRect,
+          visible: true,
+          attributeName: logEntry === null || logEntry === void 0 ? void 0 : logEntry.attributeName,
+          oldValue: logEntry === null || logEntry === void 0 ? void 0 : logEntry.oldValue,
+          newValue: logEntry === null || logEntry === void 0 ? void 0 : logEntry.newValue
+        };
+      })
+    })),
+    interactionId
+  };
+}

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

@@ -3,6 +3,7 @@ import { fg } from '@atlaskit/platform-feature-flags';
 import { isVCRevisionEnabled } from '../../config';
 import { getActiveInteraction } from '../../interaction-metrics';
 import { attachAbortListeners } from './attachAbortListeners';
+import { getVCRevisionDebugDetails } from './getVCRevisionDebugDetails';
 import { getVCRevisionsData } from './getVCRevisionsData';
 import { getViewportHeight, getViewportWidth } from './getViewport';
 import { MultiRevisionHeatmap } from './heatmap/heatmap';
@@ -96,7 +97,8 @@ export class VCObserver {
       ssr,
       vc,
       isEventAborted,
-      experienceKey
+      experienceKey,
+      interactionId
     }) => {
       const startTime = performance.now();
       // add local measurement
@@ -298,6 +300,33 @@ export class VCObserver {
               entries: isTTVCv1Disabled ? vcNext.VCEntries.rel : VCEntries.rel
             }
           }));
+
+          // Add devtool callback for both v1 and v2
+          if (typeof window.__ufo_devtool_onVCRevisionReady__ === 'function' && fg('platform_ufo_ttvc_v3_devtool')) {
+            var _ufo_devtool_onVCRev2, _ref2;
+            // Handle v1 if not disabled
+            if (!isTTVCv1Disabled) {
+              var _ufo_devtool_onVCRev, _ref;
+              (_ufo_devtool_onVCRev = (_ref = window).__ufo_devtool_onVCRevisionReady__) === null || _ufo_devtool_onVCRev === void 0 ? void 0 : _ufo_devtool_onVCRev.call(_ref, getVCRevisionDebugDetails({
+                revision: 'fy25.01',
+                isClean: !abortReasonInfo,
+                abortReason: abortReason.reason,
+                VCEntries: VCEntries.rel,
+                componentsLog,
+                interactionId
+              }));
+            }
+
+            // Handle v2
+            (_ufo_devtool_onVCRev2 = (_ref2 = window).__ufo_devtool_onVCRevisionReady__) === null || _ufo_devtool_onVCRev2 === void 0 ? void 0 : _ufo_devtool_onVCRev2.call(_ref2, getVCRevisionDebugDetails({
+              revision: 'fy25.02',
+              isClean: !abortReasonInfo,
+              abortReason: abortReason.reason,
+              VCEntries: vcNext.VCEntries.rel,
+              componentsLog,
+              interactionId
+            }));
+          }
         }
       } catch (e) {
         /*  do nothing */
@@ -525,6 +554,9 @@ export class VCObserver {
     this.arraySize = options.heatmapSize || 200;
     this.devToolsEnabled = options.devToolsEnabled || false;
     this.oldDomUpdatesEnabled = options.oldDomUpdates || false;
+    const {
+      ssrEnablePageLayoutPlaceholder
+    } = options;
     this.observers = new Observers({
       selectorConfig: options.selectorConfig || {
         id: false,
@@ -532,6 +564,9 @@ export class VCObserver {
         role: false,
         className: true,
         dataVC: true
+      },
+      SSRConfig: {
+        enablePageLayoutPlaceholder: ssrEnablePageLayoutPlaceholder || false
       }
     });
     this.heatmap = !isVCRevisionEnabled('fy25.01') ? [] : this.getCleanHeatmap();

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

@@ -20,6 +20,7 @@ function isElementVisible(target) {
 }
 export class Observers {
   constructor(opts) {
+    var _opts$SSRConfig;
     _defineProperty(this, "observedMutations", new WeakMap());
     _defineProperty(this, "elementsInView", new Set());
     _defineProperty(this, "callbacks", new Set());
@@ -59,7 +60,7 @@ export class Observers {
     };
     this.intersectionObserver = this.getIntersectionObserver();
     this.mutationObserver = this.getMutationObserver();
-    this.ssrPlaceholderHandler = new SSRPlaceholderHandlers();
+    this.ssrPlaceholderHandler = new SSRPlaceholderHandlers((_opts$SSRConfig = opts.SSRConfig) === null || _opts$SSRConfig === void 0 ? void 0 : _opts$SSRConfig.enablePageLayoutPlaceholder);
   }
   isBrowserSupported() {
     return typeof window.IntersectionObserver === 'function' && typeof window.MutationObserver === 'function';

package/dist/es2019/vc/vc-observer/observers/ssr-placeholders/index.js

@@ -1,12 +1,35 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 const ANCESTOR_LOOKUP_LIMIT = 10;
+const PAGE_LAYOUT_ID = 'page-layout.root';
 export class SSRPlaceholderHandlers {
-  constructor() {
+  constructor(enablePageLayoutPlaceholder = false) {
     _defineProperty(this, "staticPlaceholders", new Map());
     _defineProperty(this, "callbacks", new Map());
     _defineProperty(this, "getSizeCallbacks", new Map());
     _defineProperty(this, "reactValidateCallbacks", new Map());
     _defineProperty(this, "EQUALITY_THRESHOLD", 1);
+    _defineProperty(this, "getPlaceholderId", el => {
+      var _el$dataset;
+      const ssrPlaceholderId = el === null || el === void 0 ? void 0 : (_el$dataset = el.dataset) === null || _el$dataset === void 0 ? void 0 : _el$dataset.ssrPlaceholder;
+      if (!!ssrPlaceholderId) {
+        return ssrPlaceholderId;
+      }
+      if (this.enablePageLayoutPlaceholder && (el === null || el === void 0 ? void 0 : el.dataset.testid) === PAGE_LAYOUT_ID) {
+        return PAGE_LAYOUT_ID;
+      }
+      return '';
+    });
+    _defineProperty(this, "getPlaceholderReplacementId", el => {
+      var _el$dataset2;
+      const ssrPlaceholderReplaceId = el === null || el === void 0 ? void 0 : (_el$dataset2 = el.dataset) === null || _el$dataset2 === void 0 ? void 0 : _el$dataset2.ssrPlaceholderReplace;
+      if (!!ssrPlaceholderReplaceId) {
+        return ssrPlaceholderReplaceId;
+      }
+      if (this.enablePageLayoutPlaceholder && (el === null || el === void 0 ? void 0 : el.dataset.testid) === PAGE_LAYOUT_ID) {
+        return PAGE_LAYOUT_ID;
+      }
+      return '';
+    });
     _defineProperty(this, "intersectionObserverCallback", ({
       target,
       boundingClientRect
@@ -17,7 +40,7 @@ export class SSRPlaceholderHandlers {
         // impossible case - keep typescript healthy
         return;
       }
-      const staticKey = target.dataset.ssrPlaceholder || '';
+      const staticKey = this.getPlaceholderId(target);
       if (staticKey) {
         if (this.staticPlaceholders.has(staticKey) && this.callbacks.has(staticKey)) {
           // validation
@@ -39,7 +62,7 @@ export class SSRPlaceholderHandlers {
           this.callbacks.delete(staticKey);
         }
       } else {
-        const key = target.dataset.ssrPlaceholderReplace || '';
+        const key = this.getPlaceholderReplacementId(target);
         const resolve = this.reactValidateCallbacks.get(key);
         if (!resolve) {
           return;
@@ -63,25 +86,27 @@ export class SSRPlaceholderHandlers {
       // Only instantiate the IntersectionObserver if it's supported
       this.intersectionObserver = new IntersectionObserver(entries => entries.filter(entry => entry.intersectionRatio > 0).forEach(this.intersectionObserverCallback));
     }
+    this.enablePageLayoutPlaceholder = enablePageLayoutPlaceholder;
     if (window.document) {
       try {
-        const existingElements = document.querySelectorAll('[data-ssr-placeholder]');
+        const selector = this.enablePageLayoutPlaceholder ? '[data-ssr-placeholder],[data-testid="page-layout.root"]' : '[data-ssr-placeholder]';
+        const existingElements = document.querySelectorAll(selector);
         existingElements.forEach(el => {
-          var _el$dataset;
-          if (el instanceof HTMLElement && el !== null && el !== void 0 && (_el$dataset = el.dataset) !== null && _el$dataset !== void 0 && _el$dataset.ssrPlaceholder) {
+          const placeholderId = el instanceof HTMLElement && this.getPlaceholderId(el);
+          if (placeholderId) {
             var _window$__SSR_PLACEHO, _this$intersectionObs2;
             let width = -1;
             let height = -1;
             let x = -1;
             let y = -1;
-            const boundingClientRect = (_window$__SSR_PLACEHO = window.__SSR_PLACEHOLDERS_DIMENSIONS__) === null || _window$__SSR_PLACEHO === void 0 ? void 0 : _window$__SSR_PLACEHO[el.dataset.ssrPlaceholder];
+            const boundingClientRect = (_window$__SSR_PLACEHO = window.__SSR_PLACEHOLDERS_DIMENSIONS__) === null || _window$__SSR_PLACEHO === void 0 ? void 0 : _window$__SSR_PLACEHO[placeholderId];
             if (boundingClientRect) {
               width = boundingClientRect.width;
               height = boundingClientRect.height;
               x = boundingClientRect.x;
               y = boundingClientRect.y;
             }
-            this.staticPlaceholders.set(el.dataset.ssrPlaceholder, {
+            this.staticPlaceholders.set(placeholderId, {
               width,
               height,
               x,
@@ -102,10 +127,10 @@ export class SSRPlaceholderHandlers {
     this.reactValidateCallbacks = new Map();
   }
   isPlaceholder(element) {
-    return Boolean(element.dataset.ssrPlaceholder);
+    return Boolean(this.getPlaceholderId(element));
   }
   isPlaceholderReplacement(element) {
-    return Boolean(element.dataset.ssrPlaceholderReplace);
+    return Boolean(this.getPlaceholderReplacementId(element));
   }
   isPlaceholderIgnored(element) {
     // data-ssr-placeholder-ignored doesn't have a value.
@@ -128,7 +153,7 @@ export class SSRPlaceholderHandlers {
   }
   checkIfExistedAndSizeMatching(el) {
     el = this.findNearestPlaceholderContainerIfIgnored(el);
-    const id = el.dataset.ssrPlaceholder || '';
+    const id = this.getPlaceholderId(el);
     return new Promise(resolve => {
       if (!this.staticPlaceholders.has(id)) {
         resolve(false);
@@ -143,13 +168,13 @@ export class SSRPlaceholderHandlers {
   getSize(el) {
     return new Promise(resolve => {
       var _this$intersectionObs4;
-      this.getSizeCallbacks.set(el.dataset.ssrPlaceholder || '', resolve);
+      this.getSizeCallbacks.set(this.getPlaceholderId(el), resolve);
       (_this$intersectionObs4 = this.intersectionObserver) === null || _this$intersectionObs4 === void 0 ? void 0 : _this$intersectionObs4.observe(el);
     });
   }
   validateReactComponentMatchToPlaceholder(el) {
     el = this.findNearestPlaceholderContainerIfIgnored(el);
-    const id = el.dataset.ssrPlaceholderReplace || '';
+    const id = this.getPlaceholderReplacementId(el);
     return new Promise(resolve => {
       if (!this.staticPlaceholders.has(id)) {
         resolve(false);

package/dist/es2019/vc/vc-observer/observers/ssr-placeholders/ssr-scripts/collectSSRPlaceholderDimensions.js

@@ -1,7 +1,7 @@
 // lightweight script to scan the SSR response and collect all elements with data-ssr-placeholder attribute
 // and save their size/positions in a map __SSR_PLACEHOLDERS_DIMENSIONS__ on the Window object. Each placeholderId is
 // unique and maps to its corresponding elements bounding client rectangle dimensions.
-export function collectSSRPlaceholderDimensions(document, window) {
+export function collectSSRPlaceholderDimensions(document, window, enablePageLayoutPlaceholder = false) {
   const ssrPlaceholders = document === null || document === void 0 ? void 0 : document.querySelectorAll('[data-ssr-placeholder]');
   ssrPlaceholders.forEach(elem => {
     const placeholderId = elem.getAttribute('data-ssr-placeholder');
@@ -11,4 +11,12 @@ export function collectSSRPlaceholderDimensions(document, window) {
       window.__SSR_PLACEHOLDERS_DIMENSIONS__[placeholderId] = boundingClient;
     }
   });
+  if (enablePageLayoutPlaceholder) {
+    const pageLayoutRoot = document === null || document === void 0 ? void 0 : document.getElementById('unsafe-design-system-page-layout-root');
+    if (pageLayoutRoot) {
+      const boundingClient = pageLayoutRoot.getBoundingClientRect();
+      window.__SSR_PLACEHOLDERS_DIMENSIONS__ = window.__SSR_PLACEHOLDERS_DIMENSIONS__ || {};
+      window.__SSR_PLACEHOLDERS_DIMENSIONS__['page-layout.root'] = boundingClient;
+    }
+  }
 }

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

@@ -13,10 +13,11 @@ const DEFAULT_SELECTOR_CONFIG = {
 };
 export default class VCObserverNew {
   constructor(config) {
-    var _config$selectorConfi;
+    var _config$isPostInterac, _config$selectorConfi;
     _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: onChangeArg => {
@@ -36,13 +37,15 @@ export default class VCObserverNew {
         }
         this.entriesTimeline.push({
           time,
-          type,
           data: {
+            type,
             elementName,
             rect,
             previousRect,
             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
           }
         });
       }
@@ -54,8 +57,8 @@ export default class VCObserverNew {
       }) => {
         this.entriesTimeline.push({
           time,
-          type: 'window:event',
           data: {
+            type: 'window:event',
             eventType: type
           }
         });
@@ -78,7 +81,8 @@ export default class VCObserverNew {
   async getVCResult(param) {
     const {
       start,
-      stop
+      stop,
+      interactionId
     } = param;
     const results = [];
     const calculator_fy25_03 = new VCCalculator_FY25_03();
@@ -89,7 +93,9 @@ export default class VCObserverNew {
     const fy25_03 = await calculator_fy25_03.calculate({
       orderedEntries,
       startTime: start,
-      stopTime: stop
+      stopTime: stop,
+      interactionId,
+      isPostInteraction: this.isPostInteraction
     });
     if (fy25_03) {
       results.push(fy25_03);

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

@@ -1,25 +1,131 @@
 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';
 export default class AbstractVCCalculatorBase {
   constructor(revisionNo) {
     this.revisionNo = revisionNo;
   }
+  filterViewportEntries(entries) {
+    return entries.filter(entry => {
+      return 'rect' in entry.data;
+    });
+  }
+  async calculateBasic(filteredEntries, startTime, stopTime) {
+    const percentiles = [25, 50, 75, 80, 85, 90, 95, 98, 99];
+    const viewportEntries = this.filterViewportEntries(filteredEntries);
+    const vcLogs = await calculateTTVCPercentiles({
+      viewport: {
+        width: getViewportWidth(),
+        height: getViewportHeight()
+      },
+      startTime,
+      stopTime,
+      orderedEntries: viewportEntries,
+      percentiles
+    });
+    return vcLogs;
+  }
+  async calculateWithDebugInfo(filteredEntries, startTime, stopTime, isPostInteraction, isVCClean, interactionId, dirtyReason) {
+    const percentiles = [25, 50, 75, 80, 85, 90, 95, 98, 99];
+    const viewportEntries = this.filterViewportEntries(filteredEntries);
+    const vcLogs = await calculateTTVCPercentilesWithDebugInfo({
+      viewport: {
+        width: getViewportWidth(),
+        height: getViewportHeight()
+      },
+      startTime,
+      stopTime,
+      orderedEntries: viewportEntries
+    });
+    const vcDetails = {};
+    let percentileIndex = 0;
+    const entryDataBuffer = new Set();
+    if (vcLogs) {
+      for (const entry of vcLogs) {
+        const {
+          time,
+          viewportPercentage,
+          entries
+        } = entry;
+
+        // Only process entries if we haven't reached all percentiles
+        if (percentileIndex >= percentiles.length) {
+          break;
+        }
+
+        // Check if this entry matches any checkpoint percentiles
+        if (viewportPercentage >= percentiles[percentileIndex]) {
+          const elementNames = entries.map(e => e.elementName);
+
+          // Process all matching percentiles in one go
+          while (percentileIndex < percentiles.length && viewportPercentage >= percentiles[percentileIndex]) {
+            vcDetails[`${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(e => entryDataBuffer.add(e));
+        }
+      }
+    }
+
+    // Fill in any missing percentiles with the last known values
+    let previousResult = {
+      t: 0,
+      e: []
+    };
+    for (let i = 0; i < percentiles.length; i++) {
+      const percentile = percentiles[i];
+      if (!(percentile in vcDetails)) {
+        vcDetails[`${percentile}`] = previousResult;
+      } else {
+        previousResult = vcDetails[`${percentile}`];
+      }
+    }
+
+    // Handle devtool callback
+    if (!isPostInteraction && typeof window !== 'undefined' && typeof window.__ufo_devtool_onVCRevisionReady__ === 'function' && fg('platform_ufo_ttvc_v3_devtool')) {
+      try {
+        var _ufo_devtool_onVCRev, _ref;
+        (_ufo_devtool_onVCRev = (_ref = window).__ufo_devtool_onVCRevisionReady__) === null || _ufo_devtool_onVCRev === void 0 ? void 0 : _ufo_devtool_onVCRev.call(_ref, {
+          revision: this.revisionNo,
+          isClean: isVCClean,
+          abortReason: dirtyReason,
+          vcLogs,
+          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 vcDetails;
+  }
   async calculate({
     startTime,
     stopTime,
-    orderedEntries
+    orderedEntries,
+    interactionId,
+    isPostInteraction
   }) {
     var _vcDetails$90$t, _vcDetails$;
     const filteredEntries = orderedEntries.filter(entry => {
       return this.isEntryIncluded(entry);
     });
+    let isVCClean;
+    let dirtyReason;
     if (fg('platform_ufo_add_vc_abort_reason_by_revisions')) {
-      const {
-        isVCClean,
-        dirtyReason
-      } = this.getVCCleanStatus(filteredEntries);
+      const getVCCleanStatusResult = this.getVCCleanStatus(filteredEntries);
+      isVCClean = getVCCleanStatusResult.isVCClean;
+      dirtyReason = getVCCleanStatusResult.dirtyReason;
       if (!isVCClean) {
         return {
           revision: this.revisionNo,
@@ -29,7 +135,7 @@ export default class AbstractVCCalculatorBase {
         };
       }
     } else {
-      const isVCClean = this.isVCClean(filteredEntries);
+      isVCClean = this.isVCClean(filteredEntries);
       if (!isVCClean) {
         return {
           revision: this.revisionNo,
@@ -38,16 +144,8 @@ export default class AbstractVCCalculatorBase {
         };
       }
     }
-    const vcDetails = await calculateTTVCPercentiles({
-      viewport: {
-        width: getViewportWidth(),
-        height: getViewportHeight()
-      },
-      startTime,
-      stopTime,
-      orderedEntries: filteredEntries,
-      percentiles: [25, 50, 75, 80, 85, 90, 95, 98, 99]
-    });
+    const useDebugInfo = fg('platform_ufo_ttvc_v3_devtool');
+    const vcDetails = useDebugInfo ? await this.calculateWithDebugInfo(filteredEntries, startTime, stopTime, isPostInteraction, isVCClean, interactionId, dirtyReason) : await this.calculateBasic(filteredEntries, startTime, stopTime);
     return {
       revision: this.revisionNo,
       clean: true,

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

@@ -13,10 +13,10 @@ export default class VCCalculator_FY25_03 extends AbstractVCCalculatorBase {
     super(REVISION_NO);
   }
   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') {
       const entryData = entry.data;
       const attributeName = entryData.attributeName;
       if (!attributeName || KNOWN_ATTRIBUTES_THAT_DOES_NOT_CAUSE_LAYOUT_SHIFTS.includes(attributeName)) {
@@ -31,7 +31,7 @@ export default class VCCalculator_FY25_03 extends AbstractVCCalculatorBase {
   }
   isVCClean(filteredEntries) {
     const hasAbortEvent = filteredEntries.some(entry => {
-      if (entry.type === 'window:event') {
+      if (entry.data.type === 'window:event') {
         const data = entry.data;
         if (ABORTING_WINDOW_EVENT.includes(data.eventType)) {
           return true;
@@ -44,7 +44,7 @@ export default class VCCalculator_FY25_03 extends AbstractVCCalculatorBase {
   getVCCleanStatus(filteredEntries) {
     let dirtyReason = '';
     const hasAbortEvent = filteredEntries.some(entry => {
-      if (entry.type === 'window:event') {
+      if (entry.data.type === 'window:event') {
         const data = entry.data;
         if (ABORTING_WINDOW_EVENT.includes(data.eventType)) {
           dirtyReason = data.eventType === 'keydown' ? 'keypress' : data.eventType;