@atlaskit/react-ufo 4.1.9 → 4.1.11

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

@@ -155,10 +155,23 @@ export function addCustomTiming(interactionId, labelStack, data) {
         } = timingData;
         try {
           // for Firefox 102 and older
-          performance.measure(`🛸 ${labelStackToString(labelStack, key)} [custom_timing]`, {
-            start: startTime,
-            end: endTime
-          });
+          if (fg('ufo_chrome_devtools_uplift')) {
+            performance.measure(`🛸 ${labelStackToString(labelStack, key)} [custom_timing]`, {
+              start: startTime,
+              end: endTime,
+              detail: {
+                devtools: {
+                  track: '🛸 reactUFO detailed timings',
+                  color: 'tertiary-light'
+                }
+              }
+            });
+          } else {
+            performance.measure(`🛸 ${labelStackToString(labelStack, key)} [custom_timing]`, {
+              start: startTime,
+              end: endTime
+            });
+          }
         } catch (e) {
           // do nothing
         }
@@ -211,10 +224,23 @@ export function addSpan(interactionId, type, name, labelStack, start, end = perf
     if (isPerformanceTracingEnabled()) {
       try {
         // for Firefox 102 and older
-        performance.measure(`🛸 ${labelStackToString(labelStack, name)} [${type}]`, {
-          start,
-          end
-        });
+        if (fg('ufo_chrome_devtools_uplift')) {
+          performance.measure(`🛸 ${labelStackToString(labelStack, name)} [${type}]`, {
+            start,
+            end,
+            detail: {
+              devtools: {
+                track: '🛸 reactUFO detailed timings',
+                color: 'secondary'
+              }
+            }
+          });
+        } else {
+          performance.measure(`🛸 ${labelStackToString(labelStack, name)} [${type}]`, {
+            start,
+            end
+          });
+        }
       } catch (e) {
         // do nothing
       }
@@ -235,10 +261,23 @@ export function addSpanToAll(type, name, labelStack, start, end = performance.no
   if (isPerformanceTracingEnabled()) {
     try {
       // for Firefox 102 and older
-      performance.measure(`🛸 ${labelStackToString(labelStack, name)} [${type}]`, {
-        start,
-        end
-      });
+      if (fg('ufo_chrome_devtools_uplift')) {
+        performance.measure(`🛸 ${labelStackToString(labelStack, name)} [${type}]`, {
+          start,
+          end,
+          detail: {
+            devtools: {
+              track: '🛸 reactUFO detailed timings',
+              color: 'secondary'
+            }
+          }
+        });
+      } else {
+        performance.measure(`🛸 ${labelStackToString(labelStack, name)} [${type}]`, {
+          start,
+          end
+        });
+      }
     } catch (e) {
       // do nothing
     }
@@ -301,10 +340,23 @@ export function addHold(interactionId, labelStack, name, experimental) {
       if (isPerformanceTracingEnabled()) {
         try {
           // for Firefox 102 and older
-          performance.measure(`🛸 ${labelStackToString(labelStack, name)} [hold]`, {
-            start,
-            end
-          });
+          if (fg('ufo_chrome_devtools_uplift')) {
+            performance.measure(`🛸 ${labelStackToString(labelStack, name)} [hold]`, {
+              start,
+              end,
+              detail: {
+                devtools: {
+                  track: '🛸 reactUFO detailed timings',
+                  color: 'secondary-light'
+                }
+              }
+            });
+          } else {
+            performance.measure(`🛸 ${labelStackToString(labelStack, name)} [hold]`, {
+              start,
+              end
+            });
+          }
         } catch (e) {
           // do nothing
         }
@@ -434,10 +486,23 @@ export function addProfilerTimings(interactionId, labelStack, type, actualDurati
   if (isPerformanceTracingEnabled()) {
     try {
       // for Firefox 102 and older
-      performance.measure(`🛸 ${labelStackToString(labelStack)} [react-profiler] ${type}`, {
-        start: startTime,
-        duration: actualDuration
-      });
+      if (fg('ufo_chrome_devtools_uplift')) {
+        performance.measure(`🛸 ${labelStackToString(labelStack)} [react-profiler] ${type}`, {
+          start: startTime,
+          duration: actualDuration,
+          detail: {
+            devtools: {
+              track: '🛸 reactUFO detailed timings',
+              color: 'secondary-dark'
+            }
+          }
+        });
+      } else {
+        performance.measure(`🛸 ${labelStackToString(labelStack)} [react-profiler] ${type}`, {
+          start: startTime,
+          duration: actualDuration
+        });
+      }
     } catch (e) {
       // do nothing
     }
@@ -473,10 +538,24 @@ function finishInteraction(id, data, endTime = performance.now()) {
   data.end = endTime;
   try {
     // for Firefox 102 and older
-    performance.measure(`🛸 [${data.type}] ${data.ufoName} [ttai]`, {
-      start: data.start,
-      end: data.end
-    });
+    if (fg('ufo_chrome_devtools_uplift')) {
+      performance.measure(`🛸 [${data.type}] ${data.ufoName} [ttai]`, {
+        start: data.start,
+        end: data.end,
+        detail: {
+          devtools: {
+            track: 'main metrics',
+            trackGroup: '🛸 reactUFO metrics',
+            color: 'tertiary'
+          }
+        }
+      });
+    } else {
+      performance.measure(`🛸 [${data.type}] ${data.ufoName} [ttai]`, {
+        start: data.start,
+        end: data.end
+      });
+    }
   } catch (e) {
     // do nothing
   }
@@ -521,10 +600,23 @@ function finishInteraction(id, data, endTime = performance.now()) {
         start,
         end
       }] of profilerTimingMap.entries()) {
-        performance.measure(`🛸 ${labelStackToString(labelStack)} [segment_ttai]`, {
-          start,
-          end
-        });
+        if (fg('ufo_chrome_devtools_uplift')) {
+          performance.measure(`🛸 ${labelStackToString(labelStack)} [segment_ttai]`, {
+            start,
+            end,
+            detail: {
+              devtools: {
+                track: '🛸 reactUFO detailed timings',
+                color: 'secondary-dark'
+              }
+            }
+          });
+        } else {
+          performance.measure(`🛸 ${labelStackToString(labelStack)} [segment_ttai]`, {
+            start,
+            end
+          });
+        }
       }
     } catch (e) {
       // do nothing
@@ -815,12 +907,27 @@ export function addApdexToAll(apdex) {
   interactions.forEach((interaction, key) => {
     interaction.apdex.push(apdex);
     try {
-      var _apdex$startTime;
       // for Firefox 102 and older
-      performance.measure(`🛸 ${apdex.key} [bm3_tti]`, {
-        start: (_apdex$startTime = apdex.startTime) !== null && _apdex$startTime !== void 0 ? _apdex$startTime : interaction.start,
-        end: apdex.stopTime
-      });
+      if (fg('ufo_chrome_devtools_uplift')) {
+        var _apdex$startTime;
+        performance.measure(`🛸 ${apdex.key} [bm3_tti]`, {
+          start: (_apdex$startTime = apdex.startTime) !== null && _apdex$startTime !== void 0 ? _apdex$startTime : interaction.start,
+          end: apdex.stopTime,
+          detail: {
+            devtools: {
+              track: 'main metrics',
+              trackGroup: '🛸 reactUFO metrics',
+              color: 'primary-dark'
+            }
+          }
+        });
+      } else {
+        var _apdex$startTime2;
+        performance.measure(`🛸 ${apdex.key} [bm3_tti]`, {
+          start: (_apdex$startTime2 = apdex.startTime) !== null && _apdex$startTime2 !== void 0 ? _apdex$startTime2 : interaction.start,
+          end: apdex.stopTime
+        });
+      }
     } catch (e) {
       // do nothing
     }
@@ -834,12 +941,27 @@ export function addApdex(interactionId, apdexInfo) {
   if (interaction != null) {
     interaction.apdex.push(apdexInfo);
     try {
-      var _apdexInfo$startTime;
       // for Firefox 102 and older
-      performance.measure(`🛸 ${apdexInfo.key} [bm3_tti]`, {
-        start: (_apdexInfo$startTime = apdexInfo.startTime) !== null && _apdexInfo$startTime !== void 0 ? _apdexInfo$startTime : interaction.start,
-        end: apdexInfo.stopTime
-      });
+      if (fg('ufo_chrome_devtools_uplift')) {
+        var _apdexInfo$startTime;
+        performance.measure(`🛸 ${apdexInfo.key} [bm3_tti]`, {
+          start: (_apdexInfo$startTime = apdexInfo.startTime) !== null && _apdexInfo$startTime !== void 0 ? _apdexInfo$startTime : interaction.start,
+          end: apdexInfo.stopTime,
+          detail: {
+            devtools: {
+              track: 'main metrics',
+              trackGroup: '🛸 reactUFO metrics',
+              color: 'primary-dark'
+            }
+          }
+        });
+      } else {
+        var _apdexInfo$startTime2;
+        performance.measure(`🛸 ${apdexInfo.key} [bm3_tti]`, {
+          start: (_apdexInfo$startTime2 = apdexInfo.startTime) !== null && _apdexInfo$startTime2 !== void 0 ? _apdexInfo$startTime2 : interaction.start,
+          end: apdexInfo.stopTime
+        });
+      }
     } catch (e) {
       // do nothing
     }
@@ -903,12 +1025,26 @@ export function addRedirect(interactionId, fromUfoName, nextUfoName, nextRouteNa
     if (isPerformanceTracingEnabled()) {
       const prevRedirect = interaction.redirects.at(-2);
       try {
-        var _prevRedirect$time;
         // for Firefox 102 and older
-        performance.measure(`🛸 ${nextUfoName} [redirect]`, {
-          start: (_prevRedirect$time = prevRedirect === null || prevRedirect === void 0 ? void 0 : prevRedirect.time) !== null && _prevRedirect$time !== void 0 ? _prevRedirect$time : interaction.start,
-          end: time
-        });
+        if (fg('ufo_chrome_devtools_uplift')) {
+          var _prevRedirect$time;
+          performance.measure(`🛸 ${nextUfoName} [redirect]`, {
+            start: (_prevRedirect$time = prevRedirect === null || prevRedirect === void 0 ? void 0 : prevRedirect.time) !== null && _prevRedirect$time !== void 0 ? _prevRedirect$time : interaction.start,
+            end: time,
+            detail: {
+              devtools: {
+                track: '🛸 reactUFO detailed timings',
+                color: 'tertiary'
+              }
+            }
+          });
+        } else {
+          var _prevRedirect$time2;
+          performance.measure(`🛸 ${nextUfoName} [redirect]`, {
+            start: (_prevRedirect$time2 = prevRedirect === null || prevRedirect === void 0 ? void 0 : prevRedirect.time) !== null && _prevRedirect$time2 !== void 0 ? _prevRedirect$time2 : interaction.start,
+            end: time
+          });
+        }
       } catch (e) {
         // do nothing
       }

package/dist/es2019/vc/index.js

@@ -1,4 +1,5 @@
 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';
@@ -111,6 +112,7 @@ 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 : {};
     }
@@ -137,6 +139,46 @@ 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

@@ -1,4 +1,5 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import { fg } from '@atlaskit/platform-feature-flags';
 import { isVCRevisionEnabled } from '../../config';
 import { getActiveInteraction } from '../../interaction-metrics';
 import { attachAbortListeners } from './attachAbortListeners';
@@ -188,29 +189,35 @@ export class VCObserver {
             if (isTTVCv1Disabled) {
               const duration = vcNext.VC[key];
               if (duration !== null && duration !== undefined) {
-                performance.measure(`VC${key}`, {
-                  start,
-                  duration
-                });
-                performance.measure(`VC_Next${key}`, {
-                  start,
-                  duration
-                });
+                if (!fg('ufo_chrome_devtools_uplift')) {
+                  performance.measure(`VC${key}`, {
+                    start,
+                    duration
+                  });
+                  performance.measure(`VC_Next${key}`, {
+                    start,
+                    duration
+                  });
+                }
               }
             } else {
               const ttvcV1duration = VC[key];
               if (ttvcV1duration !== null && ttvcV1duration !== undefined) {
-                performance.measure(`VC${key}`, {
-                  start,
-                  duration: ttvcV1duration
-                });
+                if (!fg('ufo_chrome_devtools_uplift')) {
+                  performance.measure(`VC${key}`, {
+                    start,
+                    duration: ttvcV1duration
+                  });
+                }
               }
               const ttvcV2duration = vcNext.VC[key];
               if (ttvcV2duration !== null && ttvcV2duration !== undefined) {
-                performance.measure(`VC_Next${key}`, {
-                  start,
-                  duration: ttvcV2duration
-                });
+                if (!fg('ufo_chrome_devtools_uplift')) {
+                  performance.measure(`VC_Next${key}`, {
+                    start,
+                    duration: ttvcV2duration
+                  });
+                }
               }
             }
           });

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

@@ -1,5 +1,4 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import { fg } from '@atlaskit/platform-feature-flags';
 import { isContainedWithinMediaWrapper } from '../../vc-observer/media-wrapper/vc-utils';
 import isNonVisualStyleMutation from '../../vc-observer/observers/non-visual-styles/is-non-visual-style-mutation';
 import { RLLPlaceholderHandlers } from '../../vc-observer/observers/rll-placeholders';
@@ -41,19 +40,16 @@ const createElementMutationsWatcher = removedNodeRects => ({
   target,
   rect
 }) => {
-  const isNoLsMarkerEnabled = fg('platform_vc_ignore_no_ls_mutation_marker');
   const isInIgnoreLsMarker = isInVCIgnoreIfNoLayoutShiftMarker(target);
-  if (!isInIgnoreLsMarker && isNoLsMarkerEnabled) {
+  if (!isInIgnoreLsMarker) {
     return 'mutation:element';
   }
   const isRLLPlaceholder = RLLPlaceholderHandlers.getInstance().isRLLPlaceholderHydration(rect);
-  if (isRLLPlaceholder && (!isNoLsMarkerEnabled || isInIgnoreLsMarker)) {
+  if (isRLLPlaceholder && isInIgnoreLsMarker) {
     return 'mutation:rll-placeholder';
   }
   const wasDeleted = removedNodeRects.some(nr => sameRectDimensions(nr, rect));
-  // When fg('platform_vc_ignore_no_ls_mutation_marker') is not enabled,
-  // no layout shift mutation is excluded as per existing fy25.03 logic
-  if (wasDeleted && (!isNoLsMarkerEnabled || isInIgnoreLsMarker)) {
+  if (wasDeleted && isInIgnoreLsMarker) {
     return 'mutation:element-replacement';
   }
   return 'mutation:element';
@@ -111,7 +107,7 @@ export default class ViewportObserver {
         }
 
         // SSR hydration logic
-        if (this.getSSRState && fg('platform_ufo_vc_v3_ssr_placeholder')) {
+        if (this.getSSRState) {
           const ssrState = this.getSSRState();
           const SSRStateEnum = {
             normal: 1,
@@ -140,7 +136,7 @@ export default class ViewportObserver {
         }
 
         // SSR placeholder logic - check and handle with await
-        if (this.getSSRPlaceholderHandler && fg('platform_ufo_vc_v3_ssr_placeholder')) {
+        if (this.getSSRPlaceholderHandler) {
           const ssrPlaceholderHandler = this.getSSRPlaceholderHandler();
           if (ssrPlaceholderHandler) {
             if (ssrPlaceholderHandler.isPlaceholder(addedNode) || ssrPlaceholderHandler.isPlaceholderIgnored(addedNode)) {
@@ -171,11 +167,7 @@ export default class ViewportObserver {
           return n.isEqualNode(addedNode);
         });
         const isInIgnoreLsMarker = isInVCIgnoreIfNoLayoutShiftMarker(addedNode);
-        const isNoLsMarkerEnabled = fg('platform_vc_ignore_no_ls_mutation_marker');
-
-        // When fg('platform_vc_ignore_no_ls_mutation_marker') is not enabled,
-        // no layout shift mutation is excluded as per existing fy25.03 logic
-        if (sameDeletedNode && (!isNoLsMarkerEnabled || isInIgnoreLsMarker)) {
+        if (sameDeletedNode && isInIgnoreLsMarker) {
           var _this$intersectionObs5;
           (_this$intersectionObs5 = this.intersectionObserver) === null || _this$intersectionObs5 === void 0 ? void 0 : _this$intersectionObs5.watchAndTag(addedNode, 'mutation:remount');
           continue;