@atlaskit/react-ufo 4.1.12 → 4.2.0

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

@@ -21,6 +21,7 @@ import { roundEpsilon } from '../round-number';
 import * as ssr from '../ssr';
 import { buildSegmentTree, labelStackStartWith, optimizeLabelStack, sanitizeUfoName, stringifyLabelStackFully } from './common/utils';
 import { createCriticalMetricsPayloads } from './critical-metrics-payload';
+import { addPerformanceMeasures } from './utils/add-performance-measures';
 import { getBrowserMetadataToLegacyFormat } from './utils/get-browser-metadata';
 import getInteractionStatus from './utils/get-interaction-status';
 import { getNavigationMetricsToLegacyFormat } from './utils/get-navigation-metrics';
@@ -186,7 +187,7 @@ function getPPSMetrics(interaction) {
 function getSSRProperties(type) {
   const ssrPhases = getSSRPhaseSuccess(type);
   return {
-    'ssr:success': getSSRSuccessUtil(type),
+    'ssr:success': (ssrPhases === null || ssrPhases === void 0 ? void 0 : ssrPhases.done) != null ? ssrPhases.done : getSSRSuccessUtil(type),
     'ssr:featureFlags': getSSRFeatureFlags(type),
     ...((ssrPhases === null || ssrPhases === void 0 ? void 0 : ssrPhases.earlyFlush) != null ? {
       'ssr:earlyflush:success': ssrPhases.earlyFlush
@@ -622,10 +623,24 @@ async function createInteractionMetricsPayload(interaction, interactionId, exper
     const SSRDoneTime = SSRDoneTimeValue !== undefined ? {
       SSRDoneTime: Math.round(SSRDoneTimeValue)
     } : {};
+    const isBM3ConfigSSRDoneAsFmp = interaction.metaData.__legacy__bm3ConfigSSRDoneAsFmp;
+    const isUFOConfigSSRDoneAsFmp = interaction.metaData.__legacy__bm3ConfigSSRDoneAsFmp || !!(config !== null && config !== void 0 && (_config$ssr = config.ssr) !== null && _config$ssr !== void 0 && _config$ssr.getSSRDoneTime);
+    if (!experimental && (isBM3ConfigSSRDoneAsFmp || isUFOConfigSSRDoneAsFmp) && SSRDoneTimeValue !== undefined && fg('ufo_chrome_devtools_uplift')) {
+      try {
+        performance.mark(`FMP`, {
+          startTime: SSRDoneTimeValue,
+          detail: {
+            devtools: {
+              dataType: 'marker'
+            }
+          }
+        });
+      } catch (e) {}
+    }
     return {
       ...SSRDoneTime,
-      isBM3ConfigSSRDoneAsFmp: interaction.metaData.__legacy__bm3ConfigSSRDoneAsFmp,
-      isUFOConfigSSRDoneAsFmp: interaction.metaData.__legacy__bm3ConfigSSRDoneAsFmp || !!(config !== null && config !== void 0 && (_config$ssr = config.ssr) !== null && _config$ssr !== void 0 && _config$ssr.getSSRDoneTime)
+      isBM3ConfigSSRDoneAsFmp,
+      isUFOConfigSSRDoneAsFmp
     };
   };
   const pageLoadInteractionMetrics = getInitialPageLoadSSRMetrics();
@@ -675,6 +690,9 @@ async function createInteractionMetricsPayload(interaction, interactionId, exper
   const newUFOName = sanitizeUfoName(ufoName);
   const resourceTimings = getResourceTimings(start, end);
   const [finalVCMetrics, experimentalMetrics, paintMetrics] = await Promise.all([vcMetrics || (await getVCMetrics(interaction)), experimental ? getExperimentalVCMetrics(interaction) : Promise.resolve(undefined), getPaintMetricsToLegacyFormat(type, end)]);
+  if (!experimental) {
+    fg('ufo_chrome_devtools_uplift') && addPerformanceMeasures(interaction.start, [...((finalVCMetrics === null || finalVCMetrics === void 0 ? void 0 : finalVCMetrics['ufo:vc:rev']) || [])]);
+  }
   const payload = {
     actionSubject: 'experience',
     action: 'measured',

package/dist/es2019/create-payload/utils/add-performance-measures.js

@@ -0,0 +1,54 @@
+export const addPerformanceMeasures = (start, measures) => {
+  try {
+    measures.sort((a, b) => b.revision.localeCompare(a.revision)).slice(0, 2).forEach(entry => {
+      var _entry$vcDetails, _entry$vcDetails$;
+      if (((_entry$vcDetails = entry.vcDetails) === null || _entry$vcDetails === void 0 ? void 0 : (_entry$vcDetails$ = _entry$vcDetails['90']) === null || _entry$vcDetails$ === void 0 ? void 0 : _entry$vcDetails$.t) !== undefined) {
+        var _entry$vcDetails2, _entry$vcDetails2$;
+        performance.mark(`VC90 (${entry.revision})`, {
+          startTime: start + ((_entry$vcDetails2 = entry.vcDetails) === null || _entry$vcDetails2 === void 0 ? void 0 : (_entry$vcDetails2$ = _entry$vcDetails2['90']) === null || _entry$vcDetails2$ === void 0 ? void 0 : _entry$vcDetails2$.t),
+          detail: {
+            devtools: {
+              dataType: 'marker'
+            }
+          }
+        });
+      }
+    });
+    measures.forEach(entry => {
+      var _entry$vcDetails3, _entry$vcDetails3$;
+      if (!entry || !entry.vcDetails) {
+        return;
+      }
+      const VCParts = Object.keys(entry.vcDetails);
+      performance.measure(`VC90 (${entry.revision})`, {
+        start,
+        duration: (_entry$vcDetails3 = entry.vcDetails) === null || _entry$vcDetails3 === void 0 ? void 0 : (_entry$vcDetails3$ = _entry$vcDetails3['90']) === null || _entry$vcDetails3$ === void 0 ? void 0 : _entry$vcDetails3$.t,
+        detail: {
+          devtools: {
+            track: `main metrics`,
+            trackGroup: '🛸 reactUFO metrics',
+            color: 'tertiary'
+          }
+        }
+      });
+      VCParts.forEach(key => {
+        var _entry$vcDetails4;
+        const duration = (_entry$vcDetails4 = entry.vcDetails) === null || _entry$vcDetails4 === void 0 ? void 0 : _entry$vcDetails4[key].t;
+        if (typeof duration !== 'number') {
+          return;
+        }
+        performance.measure(`VC${key}`, {
+          start,
+          duration,
+          detail: {
+            devtools: {
+              track: `VC ${entry.revision}`,
+              trackGroup: '🛸 reactUFO metrics',
+              color: key === '90' ? 'tertiary' : 'primary-light'
+            }
+          }
+        });
+      });
+    });
+  } catch (error) {}
+};

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

@@ -539,6 +539,7 @@ function finishInteraction(id, data, endTime = performance.now()) {
   data.end = endTime;
   try {
     // for Firefox 102 and older
+
     if (fg('ufo_chrome_devtools_uplift')) {
       performance.measure(`🛸 [${data.type}] ${data.ufoName} [ttai]`, {
         start: data.start,
@@ -551,6 +552,14 @@ function finishInteraction(id, data, endTime = performance.now()) {
           }
         }
       });
+      performance.mark(`TTAI`, {
+        startTime: data.end,
+        detail: {
+          devtools: {
+            dataType: 'marker'
+          }
+        }
+      });
     } else {
       performance.measure(`🛸 [${data.type}] ${data.ufoName} [ttai]`, {
         start: data.start,
@@ -800,8 +809,7 @@ export function addNewInteraction(interactionId, ufoName, type, startTime, rate,
       oldDomUpdates: config.vc.oldDomUpdates,
       devToolsEnabled: config.vc.devToolsEnabled,
       selectorConfig: config.vc.selectorConfig,
-      ssrEnablePageLayoutPlaceholder: config.vc.ssrEnablePageLayoutPlaceholder,
-      disableSizeAndPositionCheck: config.vc.disableSizeAndPositionCheck
+      ssrEnablePageLayoutPlaceholder: config.vc.ssrEnablePageLayoutPlaceholder
     };
     vcObserver = newVCObserver(vcOptions);
   }
@@ -949,6 +957,14 @@ export function addApdexToAll(apdex) {
             }
           }
         });
+        performance.mark(`[bm3] TTI`, {
+          startTime: apdex.stopTime,
+          detail: {
+            devtools: {
+              dataType: 'marker'
+            }
+          }
+        });
       } else {
         var _apdex$startTime2;
         performance.measure(`🛸 ${apdex.key} [bm3_tti]`, {
@@ -983,6 +999,14 @@ export function addApdex(interactionId, apdexInfo) {
             }
           }
         });
+        performance.mark(`[bm3] TTI`, {
+          startTime: apdexInfo.stopTime,
+          detail: {
+            devtools: {
+              dataType: 'marker'
+            }
+          }
+        });
       } else {
         var _apdexInfo$startTime2;
         performance.measure(`🛸 ${apdexInfo.key} [bm3_tti]`, {

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

@@ -85,8 +85,7 @@ export function init(analyticsWebClientAsync, config) {
       oldDomUpdates: config.vc.oldDomUpdates,
       devToolsEnabled: config.vc.devToolsEnabled,
       selectorConfig: config.vc.selectorConfig,
-      ssrEnablePageLayoutPlaceholder: config.vc.ssrEnablePageLayoutPlaceholder,
-      disableSizeAndPositionCheck: config.vc.disableSizeAndPositionCheck
+      ssrEnablePageLayoutPlaceholder: config.vc.ssrEnablePageLayoutPlaceholder
     };
     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

@@ -1,5 +1,4 @@
 var _process, _process$env;
-import { fg } from '@atlaskit/platform-feature-flags';
 import { isVCRevisionEnabled } from '../config';
 import { VCObserverNOOP } from './no-op-vc-observer';
 import { VCObserver } from './vc-observer';
@@ -8,29 +7,21 @@ import { RLLPlaceholderHandlers } from './vc-observer/observers/rll-placeholders
 import { SSRPlaceholderHandlers } from './vc-observer/observers/ssr-placeholders';
 export class VCObserverWrapper {
   constructor(opts = {}) {
-    var _opts$ssrEnablePageLa, _opts$disableSizeAndP;
+    var _opts$ssrEnablePageLa;
     this.newVCObserver = null;
     this.oldVCObserver = null;
 
     // Initialize SSR placeholder handler once
     this.ssrPlaceholderHandler = new SSRPlaceholderHandlers({
-      enablePageLayoutPlaceholder: (_opts$ssrEnablePageLa = opts.ssrEnablePageLayoutPlaceholder) !== null && _opts$ssrEnablePageLa !== void 0 ? _opts$ssrEnablePageLa : false,
-      disableSizeAndPositionCheck: (_opts$disableSizeAndP = opts.disableSizeAndPositionCheck) !== null && _opts$disableSizeAndP !== void 0 ? _opts$disableSizeAndP : {
-        v: false,
-        h: false
-      }
+      enablePageLayoutPlaceholder: (_opts$ssrEnablePageLa = opts.ssrEnablePageLayoutPlaceholder) !== null && _opts$ssrEnablePageLa !== void 0 ? _opts$ssrEnablePageLa : false
     });
     if (isVCRevisionEnabled('fy25.03')) {
-      var _opts$ssrEnablePageLa2, _opts$disableSizeAndP2;
+      var _opts$ssrEnablePageLa2;
       this.newVCObserver = new VCObserverNew({
         selectorConfig: opts.selectorConfig,
         isPostInteraction: opts.isPostInteraction,
         SSRConfig: {
-          enablePageLayoutPlaceholder: (_opts$ssrEnablePageLa2 = opts.ssrEnablePageLayoutPlaceholder) !== null && _opts$ssrEnablePageLa2 !== void 0 ? _opts$ssrEnablePageLa2 : false,
-          disableSizeAndPositionCheck: (_opts$disableSizeAndP2 = opts.disableSizeAndPositionCheck) !== null && _opts$disableSizeAndP2 !== void 0 ? _opts$disableSizeAndP2 : {
-            v: false,
-            h: false
-          }
+          enablePageLayoutPlaceholder: (_opts$ssrEnablePageLa2 = opts.ssrEnablePageLayoutPlaceholder) !== null && _opts$ssrEnablePageLa2 !== void 0 ? _opts$ssrEnablePageLa2 : false
         },
         ssrPlaceholderHandler: this.ssrPlaceholderHandler
       });
@@ -112,7 +103,6 @@ export class VCObserverWrapper {
       interactionId: param.interactionId,
       ssr: param.includeSSRInV3 ? param.ssr : undefined
     })) : [];
-    fg('ufo_chrome_devtools_uplift') && this.addPerformanceMeasures(param.start, [...((v1v2Result === null || v1v2Result === void 0 ? void 0 : v1v2Result['ufo:vc:rev']) || []), ...(v3Result !== null && v3Result !== void 0 ? v3Result : [])]);
     if (!v3Result) {
       return v1v2Result !== null && v1v2Result !== void 0 ? v1v2Result : {};
     }
@@ -139,46 +129,6 @@ export class VCObserverWrapper {
   collectSSRPlaceholders() {
     this.ssrPlaceholderHandler.collectExistingPlaceholders();
   }
-  addPerformanceMeasures(start, measures) {
-    try {
-      measures.forEach(entry => {
-        var _entry$vcDetails, _entry$vcDetails$;
-        if (!entry || !entry.vcDetails) {
-          return;
-        }
-        const VCParts = Object.keys(entry.vcDetails);
-        performance.measure(`VC90 (${entry.revision})`, {
-          start,
-          duration: (_entry$vcDetails = entry.vcDetails) === null || _entry$vcDetails === void 0 ? void 0 : (_entry$vcDetails$ = _entry$vcDetails['90']) === null || _entry$vcDetails$ === void 0 ? void 0 : _entry$vcDetails$.t,
-          detail: {
-            devtools: {
-              track: `main metrics`,
-              trackGroup: '🛸 reactUFO metrics',
-              color: 'tertiary'
-            }
-          }
-        });
-        VCParts.forEach(key => {
-          var _entry$vcDetails2;
-          const duration = (_entry$vcDetails2 = entry.vcDetails) === null || _entry$vcDetails2 === void 0 ? void 0 : _entry$vcDetails2[key].t;
-          if (typeof duration !== 'number') {
-            return;
-          }
-          performance.measure(`VC${key}`, {
-            start,
-            duration,
-            detail: {
-              devtools: {
-                track: `VC ${entry.revision}`,
-                trackGroup: '🛸 reactUFO metrics',
-                color: key === '90' ? 'tertiary' : 'primary-light'
-              }
-            }
-          });
-        });
-      });
-    } catch (error) {}
-  }
 }
 
 // Some products set this variable to indicate it is running in SSR

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

@@ -501,7 +501,6 @@ export class VCObserver {
     this.oldDomUpdatesEnabled = options.oldDomUpdates || false;
     const {
       ssrEnablePageLayoutPlaceholder,
-      disableSizeAndPositionCheck,
       ssrPlaceholderHandler
     } = options;
     this.observers = new Observers({
@@ -513,8 +512,7 @@ export class VCObserver {
         dataVC: true
       },
       SSRConfig: {
-        enablePageLayoutPlaceholder: ssrEnablePageLayoutPlaceholder || false,
-        disableSizeAndPositionCheck: disableSizeAndPositionCheck
+        enablePageLayoutPlaceholder: ssrEnablePageLayoutPlaceholder || false
       },
       ssrPlaceholderHandler: ssrPlaceholderHandler
     });

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

@@ -65,10 +65,9 @@ export class Observers {
     if (opts.ssrPlaceholderHandler) {
       this.ssrPlaceholderHandler = opts.ssrPlaceholderHandler;
     } else {
-      var _opts$SSRConfig, _opts$SSRConfig2;
+      var _opts$SSRConfig;
       this.ssrPlaceholderHandler = new SSRPlaceholderHandlers({
-        enablePageLayoutPlaceholder: (_opts$SSRConfig = opts.SSRConfig) === null || _opts$SSRConfig === void 0 ? void 0 : _opts$SSRConfig.enablePageLayoutPlaceholder,
-        disableSizeAndPositionCheck: (_opts$SSRConfig2 = opts.SSRConfig) === null || _opts$SSRConfig2 === void 0 ? void 0 : _opts$SSRConfig2.disableSizeAndPositionCheck
+        enablePageLayoutPlaceholder: (_opts$SSRConfig = opts.SSRConfig) === null || _opts$SSRConfig === void 0 ? void 0 : _opts$SSRConfig.enablePageLayoutPlaceholder
       });
     }
   }

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

@@ -3,11 +3,7 @@ const ANCESTOR_LOOKUP_LIMIT = 10;
 const PAGE_LAYOUT_ID = 'page-layout.root';
 export class SSRPlaceholderHandlers {
   constructor({
-    enablePageLayoutPlaceholder = false,
-    disableSizeAndPositionCheck = {
-      v: false,
-      h: false
-    }
+    enablePageLayoutPlaceholder = false
   }) {
     _defineProperty(this, "staticPlaceholders", new Map());
     _defineProperty(this, "callbacks", new Map());
@@ -93,7 +89,6 @@ export class SSRPlaceholderHandlers {
       this.intersectionObserver = new IntersectionObserver(entries => entries.filter(entry => entry.intersectionRatio > 0).forEach(this.intersectionObserverCallback));
     }
     this.enablePageLayoutPlaceholder = enablePageLayoutPlaceholder;
-    this.disableSizeAndPositionCheck = disableSizeAndPositionCheck;
     if (window.document) {
       try {
         // Collect initial placeholders using SSR dimensions
@@ -225,15 +220,11 @@ export class SSRPlaceholderHandlers {
     });
   }
   hasSameSizePosition(rect, boundingClientRect) {
-    var _this$disableSizeAndP, _this$disableSizeAndP2;
-    if ((_this$disableSizeAndP = this.disableSizeAndPositionCheck) !== null && _this$disableSizeAndP !== void 0 && _this$disableSizeAndP.v && (_this$disableSizeAndP2 = this.disableSizeAndPositionCheck) !== null && _this$disableSizeAndP2 !== void 0 && _this$disableSizeAndP2.h) {
-      return true;
-    }
     if (!rect) {
       return false;
     }
-    const horizontalCheck = this.disableSizeAndPositionCheck.h ? true : Math.abs(rect.x - boundingClientRect.x) < this.EQUALITY_THRESHOLD && Math.abs(rect.width - boundingClientRect.width) < this.EQUALITY_THRESHOLD;
-    const verticalCheck = this.disableSizeAndPositionCheck.v ? true : Math.abs(rect.y - boundingClientRect.y) < this.EQUALITY_THRESHOLD && Math.abs(rect.height - boundingClientRect.height) < this.EQUALITY_THRESHOLD;
+    const horizontalCheck = Math.abs(rect.x - boundingClientRect.x) < this.EQUALITY_THRESHOLD && Math.abs(rect.width - boundingClientRect.width) < this.EQUALITY_THRESHOLD;
+    const verticalCheck = Math.abs(rect.y - boundingClientRect.y) < this.EQUALITY_THRESHOLD && Math.abs(rect.height - boundingClientRect.height) < this.EQUALITY_THRESHOLD;
     return horizontalCheck && verticalCheck || false;
   }
   isDummyRect(rect) {

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

@@ -40,13 +40,9 @@ export default class VCObserverNew {
     if (config.ssrPlaceholderHandler) {
       this.ssrPlaceholderHandler = config.ssrPlaceholderHandler;
     } else {
-      var _config$SSRConfig$ena, _config$SSRConfig, _config$SSRConfig$dis, _config$SSRConfig2;
+      var _config$SSRConfig$ena, _config$SSRConfig;
       this.ssrPlaceholderHandler = new SSRPlaceholderHandlers({
-        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,
-        disableSizeAndPositionCheck: (_config$SSRConfig$dis = (_config$SSRConfig2 = config.SSRConfig) === null || _config$SSRConfig2 === void 0 ? void 0 : _config$SSRConfig2.disableSizeAndPositionCheck) !== null && _config$SSRConfig$dis !== void 0 ? _config$SSRConfig$dis : {
-          v: false,
-          h: false
-        }
+        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.viewportObserver = new ViewportObserver({

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

@@ -5,7 +5,7 @@ import { RLLPlaceholderHandlers } from '../../vc-observer/observers/rll-placehol
 import { createIntersectionObserver } from './intersection-observer';
 import createMutationObserver from './mutation-observer';
 import createPerformanceObserver from './performance-observer';
-import checkWithinComponentAndExtractChildProps from './utils/check-within-component-and-extract-child-props';
+import checkWithinComponent, { cleanupCaches } from './utils/check-within-component';
 import isInVCIgnoreIfNoLayoutShiftMarker from './utils/is-in-vc-ignore-if-no-layout-shift-marker';
 function isElementVisible(element) {
   if (!(element instanceof HTMLElement)) {
@@ -179,7 +179,7 @@ export default class ViewportObserver {
         }
         const {
           isWithin: isWithinThirdPartySegment
-        } = checkWithinComponentAndExtractChildProps(addedNode, 'UFOThirdPartySegment');
+        } = checkWithinComponent(addedNode, 'UFOThirdPartySegment', this.mapIs3pResult);
         if (isWithinThirdPartySegment) {
           var _this$intersectionObs7;
           (_this$intersectionObs7 = this.intersectionObserver) === null || _this$intersectionObs7 === void 0 ? void 0 : _this$intersectionObs7.watchAndTag(addedNode, 'mutation:third-party-element');
@@ -234,19 +234,6 @@ export default class ViewportObserver {
             }
           };
         }
-        const {
-          isWithin: isWithinThirdPartySegment
-        } = checkWithinComponentAndExtractChildProps(target, 'UFOThirdPartySegment');
-        if (isWithinThirdPartySegment) {
-          return {
-            type: 'mutation:third-party-element',
-            mutationData: {
-              attributeName,
-              oldValue,
-              newValue
-            }
-          };
-        }
         const lastElementRect = this.mapVisibleNodeRects.get(target);
         if (lastElementRect && sameRectSize(rect, lastElementRect)) {
           return {
@@ -267,6 +254,7 @@ export default class ViewportObserver {
           }
         };
       });
+      // }
     });
     _defineProperty(this, "handleLayoutShift", ({
       time,
@@ -287,6 +275,7 @@ export default class ViewportObserver {
       }
     });
     this.mapVisibleNodeRects = new WeakMap();
+    this.mapIs3pResult = new WeakMap();
     this.onChange = onChange;
     this.isStarted = false;
     this.intersectionObserver = null;
@@ -341,5 +330,7 @@ export default class ViewportObserver {
     (_this$intersectionObs0 = this.intersectionObserver) === null || _this$intersectionObs0 === void 0 ? void 0 : _this$intersectionObs0.disconnect();
     (_this$performanceObse2 = this.performanceObserver) === null || _this$performanceObse2 === void 0 ? void 0 : _this$performanceObse2.disconnect();
     this.isStarted = false;
+    // Clean up caches when stopping
+    cleanupCaches(this.mapIs3pResult);
   }
 }

package/dist/es2019/vc/vc-observer-new/viewport-observer/utils/check-fiber-within-component.js

@@ -0,0 +1,19 @@
+import getComponentName from './get-component-name';
+
+// Helper to check fiber within component
+export default function checkFiberWithinComponent(fiber, targetComponentName, maxLevel) {
+  // Stop when no more levels to traverse
+  if (maxLevel <= 0) {
+    return false;
+  }
+  if (!fiber) {
+    return false;
+  }
+  const componentName = getComponentName(fiber);
+  if (componentName === targetComponentName) {
+    return true;
+  }
+
+  // Recursively traverse up the fiber tree
+  return checkFiberWithinComponent(fiber.return, targetComponentName, maxLevel - 1);
+}

package/dist/es2019/vc/vc-observer-new/viewport-observer/utils/check-within-component.js

@@ -0,0 +1,55 @@
+import { fg } from '@atlaskit/platform-feature-flags';
+import coinflip from '../../../../coinflip';
+import checkFiberWithinComponent from './check-fiber-within-component';
+import findFiberWithCache from './find-fiber-with-cache';
+import findReactFiber from './find-react-fiber';
+const DEFAULT_MAX_LEVEL = 20;
+
+// Cache cleanup
+let callCount = 0;
+const CLEANUP_THRESHOLD = 50;
+function maybeCleanup(resultCache) {
+  callCount++;
+  if (callCount >= CLEANUP_THRESHOLD && coinflip(0.3)) {
+    cleanupCaches(resultCache);
+  }
+}
+export function cleanupCaches(resultCache) {
+  resultCache = new WeakMap();
+  callCount = 0;
+}
+export default function checkWithinComponent(node, targetComponentName, resultCache) {
+  maybeCleanup(resultCache);
+  if (resultCache.has(node)) {
+    var _resultCache$get;
+    return {
+      isWithin: (_resultCache$get = resultCache.get(node)) !== null && _resultCache$get !== void 0 ? _resultCache$get : false
+    };
+  }
+  let fiber = null;
+  let checkedNodes = [];
+  if (fg('platform_ufo_handle_non_react_element_for_3p')) {
+    fiber = findFiberWithCache(node, DEFAULT_MAX_LEVEL, checkedNodes);
+  } else {
+    fiber = findReactFiber(node);
+  }
+  if (!fiber) {
+    if (fg('platform_ufo_handle_non_react_element_for_3p')) {
+      checkedNodes.forEach(checkedNode => {
+        resultCache.set(checkedNode, false);
+      });
+    }
+    return {
+      isWithin: false
+    };
+  }
+  const isWithin = checkFiberWithinComponent(fiber, targetComponentName, DEFAULT_MAX_LEVEL);
+  if (fg('platform_ufo_handle_non_react_element_for_3p')) {
+    checkedNodes.forEach(checkedNode => {
+      resultCache.set(checkedNode, isWithin);
+    });
+  }
+  return {
+    isWithin
+  };
+}

package/dist/es2019/vc/vc-observer-new/viewport-observer/utils/find-fiber-with-cache.js

@@ -0,0 +1,21 @@
+import findReactFiber from './find-react-fiber';
+export default function findFiberWithCache(element, maxLevel, checkedNodes) {
+  // Stop when no more levels to traverse
+  if (maxLevel <= 0) {
+    return null;
+  }
+  checkedNodes.push(element);
+  const fiber = findReactFiber(element);
+  if (fiber) {
+    return fiber;
+  }
+
+  // Walk up the DOM tree to find the fiber
+  const parent = element.parentElement;
+  if (!parent) {
+    return null;
+  }
+
+  // Recursively check parent
+  return findFiberWithCache(parent, maxLevel - 1, checkedNodes);
+}

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

@@ -33,6 +33,7 @@ import { roundEpsilon } from '../round-number';
 import * as ssr from '../ssr';
 import { buildSegmentTree, labelStackStartWith, optimizeLabelStack, sanitizeUfoName, stringifyLabelStackFully } from './common/utils';
 import { createCriticalMetricsPayloads } from './critical-metrics-payload';
+import { addPerformanceMeasures } from './utils/add-performance-measures';
 import { getBrowserMetadataToLegacyFormat } from './utils/get-browser-metadata';
 import getInteractionStatus from './utils/get-interaction-status';
 import { getNavigationMetricsToLegacyFormat } from './utils/get-navigation-metrics';
@@ -194,7 +195,7 @@ function getPPSMetrics(interaction) {
 function getSSRProperties(type) {
   var ssrPhases = getSSRPhaseSuccess(type);
   return _objectSpread(_objectSpread({
-    'ssr:success': getSSRSuccessUtil(type),
+    'ssr:success': (ssrPhases === null || ssrPhases === void 0 ? void 0 : ssrPhases.done) != null ? ssrPhases.done : getSSRSuccessUtil(type),
     'ssr:featureFlags': getSSRFeatureFlags(type)
   }, (ssrPhases === null || ssrPhases === void 0 ? void 0 : ssrPhases.earlyFlush) != null ? {
     'ssr:earlyflush:success': ssrPhases.earlyFlush
@@ -612,9 +613,23 @@ function _createInteractionMetricsPayload() {
             var SSRDoneTime = SSRDoneTimeValue !== undefined ? {
               SSRDoneTime: Math.round(SSRDoneTimeValue)
             } : {};
+            var isBM3ConfigSSRDoneAsFmp = interaction.metaData.__legacy__bm3ConfigSSRDoneAsFmp;
+            var isUFOConfigSSRDoneAsFmp = interaction.metaData.__legacy__bm3ConfigSSRDoneAsFmp || !!(config !== null && config !== void 0 && (_config$ssr = config.ssr) !== null && _config$ssr !== void 0 && _config$ssr.getSSRDoneTime);
+            if (!experimental && (isBM3ConfigSSRDoneAsFmp || isUFOConfigSSRDoneAsFmp) && SSRDoneTimeValue !== undefined && fg('ufo_chrome_devtools_uplift')) {
+              try {
+                performance.mark("FMP", {
+                  startTime: SSRDoneTimeValue,
+                  detail: {
+                    devtools: {
+                      dataType: 'marker'
+                    }
+                  }
+                });
+              } catch (e) {}
+            }
             return _objectSpread(_objectSpread({}, SSRDoneTime), {}, {
-              isBM3ConfigSSRDoneAsFmp: interaction.metaData.__legacy__bm3ConfigSSRDoneAsFmp,
-              isUFOConfigSSRDoneAsFmp: interaction.metaData.__legacy__bm3ConfigSSRDoneAsFmp || !!(config !== null && config !== void 0 && (_config$ssr = config.ssr) !== null && _config$ssr !== void 0 && _config$ssr.getSSRDoneTime)
+              isBM3ConfigSSRDoneAsFmp: isBM3ConfigSSRDoneAsFmp,
+              isUFOConfigSSRDoneAsFmp: isUFOConfigSSRDoneAsFmp
             });
           };
           pageLoadInteractionMetrics = getInitialPageLoadSSRMetrics(); // Detailed payload. Page visibility = visible
@@ -683,6 +698,9 @@ function _createInteractionMetricsPayload() {
           finalVCMetrics = _yield$Promise$all2[0];
           experimentalMetrics = _yield$Promise$all2[1];
           paintMetrics = _yield$Promise$all2[2];
+          if (!experimental) {
+            fg('ufo_chrome_devtools_uplift') && addPerformanceMeasures(interaction.start, _toConsumableArray((finalVCMetrics === null || finalVCMetrics === void 0 ? void 0 : finalVCMetrics['ufo:vc:rev']) || []));
+          }
           payload = {
             actionSubject: 'experience',
             action: 'measured',
@@ -761,7 +779,7 @@ function _createInteractionMetricsPayload() {
           }
           payload.attributes.properties['event:sizeInKb'] = getPayloadSize(payload.attributes.properties);
           return _context.abrupt("return", payload);
-        case 43:
+        case 44:
         case "end":
           return _context.stop();
       }

package/dist/esm/create-payload/utils/add-performance-measures.js

@@ -0,0 +1,56 @@
+export var addPerformanceMeasures = function addPerformanceMeasures(start, measures) {
+  try {
+    measures.sort(function (a, b) {
+      return b.revision.localeCompare(a.revision);
+    }).slice(0, 2).forEach(function (entry) {
+      var _entry$vcDetails;
+      if (((_entry$vcDetails = entry.vcDetails) === null || _entry$vcDetails === void 0 || (_entry$vcDetails = _entry$vcDetails['90']) === null || _entry$vcDetails === void 0 ? void 0 : _entry$vcDetails.t) !== undefined) {
+        var _entry$vcDetails2;
+        performance.mark("VC90 (".concat(entry.revision, ")"), {
+          startTime: start + ((_entry$vcDetails2 = entry.vcDetails) === null || _entry$vcDetails2 === void 0 || (_entry$vcDetails2 = _entry$vcDetails2['90']) === null || _entry$vcDetails2 === void 0 ? void 0 : _entry$vcDetails2.t),
+          detail: {
+            devtools: {
+              dataType: 'marker'
+            }
+          }
+        });
+      }
+    });
+    measures.forEach(function (entry) {
+      var _entry$vcDetails3;
+      if (!entry || !entry.vcDetails) {
+        return;
+      }
+      var VCParts = Object.keys(entry.vcDetails);
+      performance.measure("VC90 (".concat(entry.revision, ")"), {
+        start: start,
+        duration: (_entry$vcDetails3 = entry.vcDetails) === null || _entry$vcDetails3 === void 0 || (_entry$vcDetails3 = _entry$vcDetails3['90']) === null || _entry$vcDetails3 === void 0 ? void 0 : _entry$vcDetails3.t,
+        detail: {
+          devtools: {
+            track: "main metrics",
+            trackGroup: '🛸 reactUFO metrics',
+            color: 'tertiary'
+          }
+        }
+      });
+      VCParts.forEach(function (key) {
+        var _entry$vcDetails4;
+        var duration = (_entry$vcDetails4 = entry.vcDetails) === null || _entry$vcDetails4 === void 0 ? void 0 : _entry$vcDetails4[key].t;
+        if (typeof duration !== 'number') {
+          return;
+        }
+        performance.measure("VC".concat(key), {
+          start: start,
+          duration: duration,
+          detail: {
+            devtools: {
+              track: "VC ".concat(entry.revision),
+              trackGroup: '🛸 reactUFO metrics',
+              color: key === '90' ? 'tertiary' : 'primary-light'
+            }
+          }
+        });
+      });
+    });
+  } catch (error) {}
+};