@atlaskit/react-ufo 3.4.14 → 3.5.0

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

@@ -5,6 +5,7 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import { fg } from '@atlaskit/platform-feature-flags';
 import { shouldHandleEditorLnv } from '../../../config';
+import { markProfilingEnd, markProfilingStart, withProfiling } from '../../../self-measurements';
 import { isContainedWithinMediaWrapper } from '../media-wrapper/vc-utils';
 import { EditorLnvHandler } from './editor-lnv';
 import isNonVisualStyleMutation from './non-visual-styles/is-non-visual-style-mutation';
@@ -14,7 +15,7 @@ var state = {
   waitingForFirstRender: 2,
   ignoring: 3
 };
-function isElementVisible(target) {
+var isElementVisible = withProfiling(function isElementVisible(target) {
   if (!target || typeof target.checkVisibility !== 'function') {
     return true;
   }
@@ -24,13 +25,13 @@ function isElementVisible(target) {
     visibilityProperty: true
   });
   return isVisible;
-}
-function isInsideEditorContainer(target) {
+}, ['vc']);
+var isInsideEditorContainer = withProfiling(function isInsideEditorContainer(target) {
   if (!target || typeof target.closest !== 'function') {
     return false;
   }
   return Boolean(target.closest('.ProseMirror'));
-}
+}, ['vc']);
 export var Observers = /*#__PURE__*/function () {
   function Observers(opts) {
     var _this = this;
@@ -56,20 +57,51 @@ export var Observers = /*#__PURE__*/function () {
     _defineProperty(this, "subscribeResults", function (cb) {
       _this.callbacks.add(cb);
     });
-    _defineProperty(this, "observeElement", function (node, mutation, type, ignoreReason) {
+    _defineProperty(this, "observeElement", function (node, mutation, type, ignoreReason, attributeName) {
       var _this$intersectionObs;
+      var oldValue = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : null;
+      var newValue = arguments.length > 6 && arguments[6] !== undefined ? arguments[6] : null;
       (_this$intersectionObs = _this.intersectionObserver) === null || _this$intersectionObs === void 0 || _this$intersectionObs.observe(node);
-      _this.observedMutations.set(node, {
-        mutation: mutation,
-        ignoreReason: ignoreReason,
-        type: type
-      });
+      if (fg('platform_ufo_log_attr_mutation_values')) {
+        _this.observedMutations.set(node, {
+          mutation: mutation,
+          ignoreReason: ignoreReason,
+          type: type,
+          attributeName: attributeName,
+          oldValue: oldValue,
+          newValue: newValue
+        });
+      } else {
+        _this.observedMutations.set(node, {
+          mutation: mutation,
+          ignoreReason: ignoreReason,
+          type: type
+        });
+      }
     });
+    var operationTimer = markProfilingStart('Observers constructor');
     this.selectorConfig = _objectSpread(_objectSpread({}, this.selectorConfig), opts.selectorConfig);
     this.intersectionObserver = this.getIntersectionObserver();
     this.mutationObserver = this.getMutationObserver();
     this.ssrPlaceholderHandler = new SSRPlaceholderHandlers();
     this.editorLnvHandler = new EditorLnvHandler();
+    this.isBrowserSupported = withProfiling(this.isBrowserSupported.bind(this), ['vc']);
+    this.observe = withProfiling(this.observe.bind(this), ['vc']);
+    this.disconnect = withProfiling(this.disconnect.bind(this), ['vc']);
+    this.subscribeResults = withProfiling(this.subscribeResults.bind(this), ['vc']);
+    this.getTotalTime = withProfiling(this.getTotalTime.bind(this), ['vc']);
+    this.setReactRootElement = withProfiling(this.setReactRootElement.bind(this), ['vc']);
+    this.setReactRootRenderStart = withProfiling(this.setReactRootRenderStart.bind(this), ['vc']);
+    this.setReactRootRenderStop = withProfiling(this.setReactRootRenderStop.bind(this), ['vc']);
+    this.observeElement = withProfiling(this.observeElement.bind(this), ['vc']);
+    this.getMutationObserver = withProfiling(this.getMutationObserver.bind(this), ['vc']);
+    this.getElementName = withProfiling(this.getElementName.bind(this), ['vc']);
+    this.getIntersectionObserver = withProfiling(this.getIntersectionObserver.bind(this), ['vc']);
+    this.measureStart = withProfiling(this.measureStart.bind(this), ['vc']);
+    this.measureStop = withProfiling(this.measureStop.bind(this), ['vc']);
+    markProfilingEnd(operationTimer, {
+      tags: ['vc']
+    });
   }
   return _createClass(Observers, [{
     key: "isBrowserSupported",
@@ -135,8 +167,12 @@ export var Observers = /*#__PURE__*/function () {
     key: "getMutationObserver",
     value: function getMutationObserver() {
       var _this2 = this;
+      if (!this.isBrowserSupported()) {
+        return null;
+      }
       var shouldHandleEditorLnvLocal = shouldHandleEditorLnv();
-      return this.isBrowserSupported() ? new MutationObserver(function (mutations) {
+      return new MutationObserver(function (mutations) {
+        var operationTimer = markProfilingStart('mutationObserverCallback');
         _this2.measureStart();
         mutations.forEach(function (mutation) {
           // patching element if timestamp not automatically added
@@ -205,34 +241,48 @@ export var Observers = /*#__PURE__*/function () {
             });
           } else if (mutation.type === 'attributes') {
             if (mutation.target instanceof HTMLElement) {
+              var attributeName = mutation.attributeName;
               if (fg('platform_ufo_vc_ignore_same_value_mutation')) {
                 var _mutation$oldValue;
                 /*
-                		"MutationObserver was explicitly designed to work that way, but I can't now recall the reasoning.
-                		I think it might have been something along the lines that for consistency every setAttribute call should create a record.
-                		Conceptually there is after all a mutation: there is an old value replaced with a new one,
-                		and whether or not they are the same doesn't really matter.
-                		And Custom elements should work the same way as MutationObserver."
-                		https://github.com/whatwg/dom/issues/520#issuecomment-336574796
-                	*/
+                	"MutationObserver was explicitly designed to work that way, but I can't now recall the reasoning.
+                	I think it might have been something along the lines that for consistency every setAttribute call should create a record.
+                	Conceptually there is after all a mutation: there is an old value replaced with a new one,
+                	and whether or not they are the same doesn't really matter.
+                	And Custom elements should work the same way as MutationObserver."
+                	https://github.com/whatwg/dom/issues/520#issuecomment-336574796
+                */
                 var oldValue = (_mutation$oldValue = mutation.oldValue) !== null && _mutation$oldValue !== void 0 ? _mutation$oldValue : undefined;
-                var newValue = mutation.attributeName ? mutation.target.getAttribute(mutation.attributeName) : undefined;
+                var newValue = attributeName ? mutation.target.getAttribute(attributeName) : undefined;
                 if (oldValue !== newValue) {
                   if (isNonVisualStyleMutation(mutation)) {
                     ignoreReason = 'non-visual-style';
                   }
-                  _this2.observeElement(mutation.target, mutation, 'attr', ignoreReason);
+                  if (fg('platform_ufo_vc_fix_ignore_image_mutation')) {
+                    if (isContainedWithinMediaWrapper(mutation.target)) {
+                      ignoreReason = 'image';
+                    }
+                  }
+                  _this2.observeElement(mutation.target, mutation, 'attr', ignoreReason, attributeName, oldValue, newValue);
                 }
               } else {
                 if (isNonVisualStyleMutation(mutation)) {
                   ignoreReason = 'non-visual-style';
                 }
-                _this2.observeElement(mutation.target, mutation, 'attr', ignoreReason);
+                if (fg('platform_ufo_vc_fix_ignore_image_mutation')) {
+                  if (isContainedWithinMediaWrapper(mutation.target)) {
+                    ignoreReason = 'image';
+                  }
+                }
+                _this2.observeElement(mutation.target, mutation, 'attr', ignoreReason, attributeName);
               }
             }
           }
         });
-      }) : null;
+        markProfilingEnd(operationTimer, {
+          tags: ['vc']
+        });
+      });
     }
   }, {
     key: "getElementName",
@@ -265,7 +315,11 @@ export var Observers = /*#__PURE__*/function () {
     key: "getIntersectionObserver",
     value: function getIntersectionObserver() {
       var _this3 = this;
-      return this.isBrowserSupported() ? new IntersectionObserver(function (entries) {
+      if (!this.isBrowserSupported()) {
+        return null;
+      }
+      return new IntersectionObserver(function (entries) {
+        var operationTimer = markProfilingStart('intersectionObserverCallback');
         _this3.measureStart();
         entries.forEach(function (_ref2) {
           var isIntersecting = _ref2.isIntersecting,
@@ -296,7 +350,7 @@ export var Observers = /*#__PURE__*/function () {
               } catch (e) {
                 elementName = 'error';
               }
-              callback(data.mutation.timestamp || performance.now(), ir, elementName, target, data.type, data.ignoreReason);
+              callback(data.mutation.timestamp || performance.now(), ir, elementName, target, data.type, data.ignoreReason, data.attributeName, data.oldValue, data.newValue);
             });
             _this3.elementsInView.add(target);
           } else {
@@ -304,7 +358,10 @@ export var Observers = /*#__PURE__*/function () {
           }
         });
         _this3.measureStop();
-      }) : null;
+        markProfilingEnd(operationTimer, {
+          tags: ['vc']
+        });
+      });
     }
   }, {
     key: "measureStart",

package/dist/esm/vc/vc-observer/observers/non-visual-styles/is-non-visual-style-mutation.js

@@ -1,4 +1,5 @@
 import { fg } from '@atlaskit/platform-feature-flags';
+import { withProfiling } from '../../../../self-measurements';
 
 /**
  * Checks if a mutation record represents a non-visual style change
@@ -10,7 +11,7 @@ import { fg } from '@atlaskit/platform-feature-flags';
  * - The changed attribute is either 'class' or 'style'
  */
 
-export default function isNonVisualStyleMutation(_ref) {
+var isNonVisualStyleMutation = withProfiling(function isNonVisualStyleMutation(_ref) {
   var target = _ref.target,
     attributeName = _ref.attributeName;
   var isNonVisualStyleMutationEnabled = fg('platform_ufo_non_visual_style_mutation');
@@ -27,4 +28,5 @@ export default function isNonVisualStyleMutation(_ref) {
     return false;
   }
   return true;
-}
+}, ['vc']);
+export default isNonVisualStyleMutation;

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

@@ -2,6 +2,7 @@ import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 import _createClass from "@babel/runtime/helpers/createClass";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import { fg } from '@atlaskit/platform-feature-flags';
+import { markProfilingEnd, markProfilingStart, withProfiling } from '../../../../self-measurements';
 var ANCESTOR_LOOKUP_LIMIT = 10;
 export var SSRPlaceholderHandlers = /*#__PURE__*/function () {
   function SSRPlaceholderHandlers() {
@@ -63,6 +64,7 @@ export var SSRPlaceholderHandlers = /*#__PURE__*/function () {
         _this.reactValidateCallbacks.delete(staticKey);
       }
     });
+    var operationTimer = markProfilingStart('SSRPlaceholderHandlers constructor');
     if (typeof IntersectionObserver === 'function') {
       // Only instantiate the IntersectionObserver if it's supported
       this.intersectionObserver = new IntersectionObserver(function (entries) {
@@ -102,6 +104,20 @@ export var SSRPlaceholderHandlers = /*#__PURE__*/function () {
         delete window.__SSR_PLACEHOLDERS_DIMENSIONS__;
       }
     }
+    this.clear = withProfiling(this.clear.bind(this), ['vc']);
+    this.isPlaceholder = withProfiling(this.isPlaceholder.bind(this), ['vc']);
+    this.isPlaceholderReplacement = withProfiling(this.isPlaceholderReplacement.bind(this), ['vc']);
+    this.isPlaceholderIgnored = withProfiling(this.isPlaceholderIgnored.bind(this), ['vc']);
+    this.findNearestPlaceholderContainerIfIgnored = withProfiling(this.findNearestPlaceholderContainerIfIgnored.bind(this), ['vc']);
+    this.checkIfExistedAndSizeMatching = withProfiling(this.checkIfExistedAndSizeMatching.bind(this), ['vc']);
+    this.getSize = withProfiling(this.getSize.bind(this), ['vc']);
+    this.validateReactComponentMatchToPlaceholder = withProfiling(this.validateReactComponentMatchToPlaceholder.bind(this), ['vc']);
+    this.hasSameSizePosition = withProfiling(this.hasSameSizePosition.bind(this), ['vc']);
+    this.isDummyRect = withProfiling(this.isDummyRect.bind(this), ['vc']);
+    this.intersectionObserverCallback = withProfiling(this.intersectionObserverCallback.bind(this), ['vc']);
+    markProfilingEnd(operationTimer, {
+      tags: ['vc']
+    });
   }
   return _createClass(SSRPlaceholderHandlers, [{
     key: "clear",

package/dist/esm/vc/vc-observer/revisions/fy25_01.js

@@ -7,6 +7,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 import { fg } from '@atlaskit/platform-feature-flags';
+import { withProfiling } from '../../../self-measurements';
 import { ViewportUpdateClassifier } from './ViewportUpdateClassifier';
 var legacyIgnoreReasons = ['image', 'ssr-hydration', 'editor-lazy-node-view', 'editor-container-mutation'];
 export var FY25_01Classifier = /*#__PURE__*/function (_ViewportUpdateClassi) {
@@ -25,6 +26,7 @@ export var FY25_01Classifier = /*#__PURE__*/function (_ViewportUpdateClassi) {
       }
     }]);
     _this.mergeConfig();
+    _this.VCCalculationMethod = withProfiling(_this.VCCalculationMethod.bind(_this), ['vc']);
     return _this;
   }
   _inherits(FY25_01Classifier, _ViewportUpdateClassi);

package/dist/esm/vc/vc-observer/revisions/fy25_02.js

@@ -7,6 +7,7 @@ import _inherits from "@babel/runtime/helpers/inherits";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
+import { withProfiling } from '../../../self-measurements';
 import { FY25_01Classifier } from './fy25_01';
 export var FY25_02Classifier = /*#__PURE__*/function (_FY25_01Classifier) {
   function FY25_02Classifier() {
@@ -25,6 +26,7 @@ export var FY25_02Classifier = /*#__PURE__*/function (_FY25_01Classifier) {
     }]);
     _defineProperty(_this, "removedFilters", []);
     _this.mergeConfig();
+    _this.filterComponentsLog = withProfiling(_this.filterComponentsLog.bind(_this), ['vc']);
     return _this;
   }
   _inherits(FY25_02Classifier, _FY25_01Classifier);

package/dist/esm/vc/vc-observer/revisions/revisions.js

@@ -1,7 +1,8 @@
 import { fg } from '@atlaskit/platform-feature-flags';
+import { withProfiling } from '../../../self-measurements';
 import { revFY25_01Classifier } from './fy25_01';
 import { revFY25_02Classifier } from './fy25_02';
-export var getRevisions = function getRevisions() {
+export var getRevisions = withProfiling(function getRevisions() {
   if (fg('platform_ufo_disable_ttvc_v1')) {
     return [{
       name: 'fy25.02',
@@ -15,4 +16,4 @@ export var getRevisions = function getRevisions() {
     name: 'fy25.02',
     classifier: revFY25_02Classifier
   }];
-};
+}, ['vc']);

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

@@ -1,12 +1,21 @@
 import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 import _createClass from "@babel/runtime/helpers/createClass";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import { markProfilingEnd, markProfilingStart, withProfiling } from '../../../self-measurements';
 var EntriesTimeline = /*#__PURE__*/function () {
   function EntriesTimeline() {
     _classCallCheck(this, EntriesTimeline);
     _defineProperty(this, "unorderedEntries", []);
     _defineProperty(this, "sortedEntriesCache", new Map());
+    var operationTimer = markProfilingStart('EntriesTimeline constructor');
     this.unorderedEntries = [];
+    this.push = withProfiling(this.push.bind(this), ['vc']);
+    this.getCacheKey = withProfiling(this.getCacheKey.bind(this), ['vc']);
+    this.getOrderedEntries = withProfiling(this.getOrderedEntries.bind(this), ['vc']);
+    this.clear = withProfiling(this.clear.bind(this), ['vc']);
+    markProfilingEnd(operationTimer, {
+      tags: ['vc']
+    });
   }
   return _createClass(EntriesTimeline, [{
     key: "push",

package/dist/esm/vc/vc-observer-new/get-element-name.js

@@ -1,5 +1,6 @@
+import { withProfiling } from '../../self-measurements';
 var nameCache = new WeakMap();
-export default function getElementName(selectorConfig, element) {
+var getElementName = withProfiling(function getElementName(selectorConfig, element) {
   if (!(element instanceof HTMLElement)) {
     return 'error';
   }
@@ -65,4 +66,5 @@ export default function getElementName(selectorConfig, element) {
   var name = "".concat(tagName).concat(attributes || classList);
   nameCache.set(element, name);
   return name;
-}
+}, ['vc']);
+export default getElementName;

package/dist/esm/vc/vc-observer-new/get-unique-element-name.js

@@ -1,23 +1,24 @@
+import { withProfiling } from '../../self-measurements';
 var nameCache = new WeakMap();
-function getAttributeSelector(element, attributeName) {
+var getAttributeSelector = withProfiling(function getAttributeSelector(element, attributeName) {
   var attrValue = element.getAttribute(attributeName);
   if (!attrValue) {
     return '';
   }
   return "[".concat(attributeName, "=\"").concat(attrValue, "\"]");
-}
-function isValidSelector(selector) {
+}, ['vc']);
+var isValidSelector = withProfiling(function isValidSelector(selector) {
   try {
     document.querySelector(selector);
     return true;
   } catch (err) {
     return false;
   }
-}
-function isSelectorUnique(selector) {
+}, ['vc']);
+var isSelectorUnique = withProfiling(function isSelectorUnique(selector) {
   return document.querySelectorAll(selector).length === 1;
-}
-function getUniqueSelector(selectorConfig, element) {
+}, ['vc']);
+var getUniqueSelector = withProfiling(function getUniqueSelector(selectorConfig, element) {
   var currentElement = element;
   var parts = [];
   var MAX_DEPTH = 3;
@@ -59,8 +60,8 @@ function getUniqueSelector(selectorConfig, element) {
     }
   }
   return potentialSelector;
-}
-export default function getElementName(selectorConfig, element) {
+}, ['vc']);
+var getElementName = withProfiling(function getElementName(selectorConfig, element) {
   if (!(element instanceof HTMLElement)) {
     return 'error';
   }
@@ -71,4 +72,5 @@ export default function getElementName(selectorConfig, element) {
   var uniqueSelector = getUniqueSelector(selectorConfig, element);
   nameCache.set(element, uniqueSelector);
   return uniqueSelector;
-}
+}, ['vc']);
+export default getElementName;

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

@@ -3,6 +3,7 @@ import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 import _createClass from "@babel/runtime/helpers/createClass";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _regeneratorRuntime from "@babel/runtime/regenerator";
+import { markProfilingEnd, markProfilingStart, withProfiling } from '../../self-measurements';
 import EntriesTimeline from './entries-timeline';
 import _getElementName from './get-element-name';
 import VCCalculator_FY25_03 from './metric-calculator/fy25_03';
@@ -22,6 +23,7 @@ var VCObserverNew = /*#__PURE__*/function () {
     _classCallCheck(this, VCObserverNew);
     _defineProperty(this, "viewportObserver", null);
     _defineProperty(this, "windowEventObserver", null);
+    var operationTimer = markProfilingStart('VCObserverNew constructor');
     this.entriesTimeline = new EntriesTimeline();
     this.selectorConfig = (_config$selectorConfi = config.selectorConfig) !== null && _config$selectorConfi !== void 0 ? _config$selectorConfi : DEFAULT_SELECTOR_CONFIG;
     this.viewportObserver = new ViewportObserver({
@@ -64,6 +66,13 @@ var VCObserverNew = /*#__PURE__*/function () {
         });
       }
     });
+    this.start = withProfiling(this.start.bind(this), ['vc']);
+    this.stop = withProfiling(this.stop.bind(this), ['vc']);
+    this.getVCResult = withProfiling(this.getVCResult.bind(this), ['vc']);
+    this.getElementName = withProfiling(this.getElementName.bind(this), ['vc']);
+    markProfilingEnd(operationTimer, {
+      tags: ['vc']
+    });
   }
   return _createClass(VCObserverNew, [{
     key: "start",

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

@@ -2,6 +2,7 @@ import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
 import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 import _createClass from "@babel/runtime/helpers/createClass";
 import _regeneratorRuntime from "@babel/runtime/regenerator";
+import { withProfiling } from '../../../self-measurements';
 import calculateTTVCPercentiles from './percentile-calc';
 import getViewportHeight from './utils/get-viewport-height';
 import getViewportWidth from './utils/get-viewport-width';
@@ -9,6 +10,7 @@ var AbstractVCCalculatorBase = /*#__PURE__*/function () {
   function AbstractVCCalculatorBase(revisionNo) {
     _classCallCheck(this, AbstractVCCalculatorBase);
     this.revisionNo = revisionNo;
+    this.calculate = withProfiling(this.calculate.bind(this), ['vc']);
   }
   return _createClass(AbstractVCCalculatorBase, [{
     key: "calculate",

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

@@ -5,6 +5,7 @@ import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 import _inherits from "@babel/runtime/helpers/inherits";
 function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
+import { withProfiling } from '../../../../self-measurements';
 import AbstractVCCalculatorBase from '../abstract-base-vc-calculator';
 import isViewportEntryData from '../utils/is-viewport-entry-data';
 var ABORTING_WINDOW_EVENT = ['wheel', 'scroll', 'keydown', 'resize'];
@@ -17,8 +18,12 @@ var CONSIDERED_ENTRY_TYPE = ['mutation:child-element', 'mutation:element', 'muta
 export var KNOWN_ATTRIBUTES_THAT_DOES_NOT_CAUSE_LAYOUT_SHIFTS = ['data-drop-target-for-element', 'draggable'];
 var VCCalculator_FY25_03 = /*#__PURE__*/function (_AbstractVCCalculator) {
   function VCCalculator_FY25_03() {
+    var _this;
     _classCallCheck(this, VCCalculator_FY25_03);
-    return _callSuper(this, VCCalculator_FY25_03, [REVISION_NO]);
+    _this = _callSuper(this, VCCalculator_FY25_03, [REVISION_NO]);
+    _this.isEntryIncluded = withProfiling(_this.isEntryIncluded.bind(_this), ['vc']);
+    _this.isVCClean = withProfiling(_this.isVCClean.bind(_this), ['vc']);
+    return _this;
   }
   _inherits(VCCalculator_FY25_03, _AbstractVCCalculator);
   return _createClass(VCCalculator_FY25_03, [{

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

@@ -2,6 +2,7 @@ import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
 import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 import _createClass from "@babel/runtime/helpers/createClass";
 import _regeneratorRuntime from "@babel/runtime/regenerator";
+import { markProfilingEnd, markProfilingStart, withProfiling } from '../../../../../self-measurements';
 import taskYield from '../../utils/task-yield';
 
 // 24-bit color value
@@ -31,6 +32,7 @@ export var ViewportCanvas = /*#__PURE__*/function () {
   function ViewportCanvas(viewport) {
     var scaleFactor = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 1;
     _classCallCheck(this, ViewportCanvas);
+    var operationTimer = markProfilingStart('ViewportCanvas constructor');
     this.scaleFactor = scaleFactor;
     this.colorCounter = 1;
     this.colorTimeMap = new Map();
@@ -60,6 +62,14 @@ export var ViewportCanvas = /*#__PURE__*/function () {
     this.ctx = ctx;
     this.ctx.globalCompositeOperation = 'source-over';
     this.clear();
+    this.getScaledDimensions = withProfiling(this.getScaledDimensions.bind(this), ['vc']);
+    this.clear = withProfiling(this.clear.bind(this), ['vc']);
+    this.generateColor = withProfiling(this.generateColor.bind(this), ['vc']);
+    this.drawRect = withProfiling(this.drawRect.bind(this), ['vc']);
+    this.getPixelCounts = withProfiling(this.getPixelCounts.bind(this), ['vc']);
+    markProfilingEnd(operationTimer, {
+      tags: ['vc']
+    });
   }
   return _createClass(ViewportCanvas, [{
     key: "getScaledDimensions",
@@ -195,7 +205,7 @@ export var ViewportCanvas = /*#__PURE__*/function () {
  * @param number - The input number to be split into RGB components.
  * @returns The RGB color string in the format "rgb(r, g, b)".
  */
-export function getRGBComponents(n) {
+export var getRGBComponents = withProfiling(function getRGBComponents(n) {
   // Ensure the input is within the valid range for a 24-bit color
   if (n < 0 || n > 0xffffff) {
     throw new Error('Input number must be between 0 and 16777215 (inclusive).');
@@ -210,7 +220,7 @@ export function getRGBComponents(n) {
   // Extract red component (bits 16-23)
   var red = n >> 16 & 0xff;
   return "rgb(".concat(red, ", ").concat(green, ", ").concat(blue, ")");
-}
+}, ['vc']);
 
 /**
  * Calculates the number of pixels drawn for each color in the image data.
@@ -219,11 +229,8 @@ export function getRGBComponents(n) {
  * @param arraySize - The amount of timestamps that were drawn in the viewport
  * @returns A Map containing color to pixel count mappings.
  */
-export function calculateDrawnPixelsRaw(_x, _x2, _x3) {
-  return _calculateDrawnPixelsRaw.apply(this, arguments);
-}
-function _calculateDrawnPixelsRaw() {
-  _calculateDrawnPixelsRaw = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2(imageData, scaleFactor, arraySize) {
+export var calculateDrawnPixelsRaw = withProfiling( /*#__PURE__*/function () {
+  var _calculateDrawnPixelsRaw = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2(imageData, scaleFactor, arraySize) {
     var data, arr, i, color, colorIndex;
     return _regeneratorRuntime.wrap(function _callee2$(_context2) {
       while (1) switch (_context2.prev = _context2.next) {
@@ -265,5 +272,8 @@ function _calculateDrawnPixelsRaw() {
       }
     }, _callee2);
   }));
-  return _calculateDrawnPixelsRaw.apply(this, arguments);
-}
+  function calculateDrawnPixelsRaw(_x, _x2, _x3) {
+    return _calculateDrawnPixelsRaw.apply(this, arguments);
+  }
+  return calculateDrawnPixelsRaw;
+}(), ['vc']);

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

@@ -5,28 +5,26 @@ function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol
 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 { fg } from '@atlaskit/platform-feature-flags';
+import { withProfiling } from '../../../../../self-measurements';
 import { ViewportCanvas } from './canvas-pixel';
-export default function calculateTTVCPercentiles(_x) {
-  return _calculateTTVCPercentiles.apply(this, arguments);
-}
-function _calculateTTVCPercentiles() {
-  _calculateTTVCPercentiles = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(_ref) {
-    var viewport, orderedEntries, percentiles, startTime, canvas, elementMap, _iterator2, _step2, entry, rect, elementName, timePixelCounts, canvasDimenstions, totalPixels;
+var calculateTTVCPercentiles = withProfiling( /*#__PURE__*/function () {
+  var _calculateTTVCPercentiles = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(_ref) {
+    var viewport, orderedEntries, percentiles, startTime, canvas, elementMap, _iterator, _step, entry, rect, elementName, timePixelCounts, canvasDimenstions, totalPixels;
     return _regeneratorRuntime.wrap(function _callee$(_context) {
       while (1) switch (_context.prev = _context.next) {
         case 0:
           viewport = _ref.viewport, orderedEntries = _ref.orderedEntries, percentiles = _ref.percentiles, startTime = _ref.startTime;
           canvas = new ViewportCanvas(viewport, fg('platform_ufo_canvas_heatmap_full_precision') ? 1 : 0.25);
           elementMap = new Map();
-          _iterator2 = _createForOfIteratorHelper(orderedEntries);
+          _iterator = _createForOfIteratorHelper(orderedEntries);
           _context.prev = 4;
-          _iterator2.s();
+          _iterator.s();
         case 6:
-          if ((_step2 = _iterator2.n()).done) {
+          if ((_step = _iterator.n()).done) {
             _context.next = 17;
             break;
           }
-          entry = _step2.value;
+          entry = _step.value;
           if ('rect' in entry.data) {
             _context.next = 10;
             break;
@@ -49,10 +47,10 @@ function _calculateTTVCPercentiles() {
         case 19:
           _context.prev = 19;
           _context.t0 = _context["catch"](4);
-          _iterator2.e(_context.t0);
+          _iterator.e(_context.t0);
         case 22:
           _context.prev = 22;
-          _iterator2.f();
+          _iterator.f();
           return _context.finish(22);
         case 25:
           _context.next = 27;
@@ -68,9 +66,13 @@ function _calculateTTVCPercentiles() {
       }
     }, _callee, null, [[4, 19, 22, 25]]);
   }));
-  return _calculateTTVCPercentiles.apply(this, arguments);
-}
-export function calculatePercentiles(timePixelCounts, elementMap, unorderedPercentiles, totalPixels, startTime) {
+  function calculateTTVCPercentiles(_x) {
+    return _calculateTTVCPercentiles.apply(this, arguments);
+  }
+  return calculateTTVCPercentiles;
+}(), ['vc']);
+export default calculateTTVCPercentiles;
+export var calculatePercentiles = withProfiling(function calculatePercentiles(timePixelCounts, elementMap, unorderedPercentiles, totalPixels, startTime) {
   var results = {};
   var cumulativePixels = 0;
   var percentiles = unorderedPercentiles.sort(function (a, b) {
@@ -87,13 +89,13 @@ export function calculatePercentiles(timePixelCounts, elementMap, unorderedPerce
   });
   var percentileIndex = 0;
   var domElementsBuffer = new Set();
-  var _iterator = _createForOfIteratorHelper(sortedEntries),
-    _step;
+  var _iterator2 = _createForOfIteratorHelper(sortedEntries),
+    _step2;
   try {
-    for (_iterator.s(); !(_step = _iterator.n()).done;) {
-      var _step$value = _slicedToArray(_step.value, 2),
-        time = _step$value[0],
-        pixelCount = _step$value[1];
+    for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
+      var _step2$value = _slicedToArray(_step2.value, 2),
+        time = _step2$value[0],
+        pixelCount = _step2$value[1];
       cumulativePixels += pixelCount;
       var percentCovered = cumulativePixels / totalPixels * 100;
       var elementNames = elementMap.get(time) || new Set();
@@ -117,9 +119,9 @@ export function calculatePercentiles(timePixelCounts, elementMap, unorderedPerce
       }
     }
   } catch (err) {
-    _iterator.e(err);
+    _iterator2.e(err);
   } finally {
-    _iterator.f();
+    _iterator2.f();
   }
   var previousResult = {
     t: 0,
@@ -133,4 +135,4 @@ export function calculatePercentiles(timePixelCounts, elementMap, unorderedPerce
     previousResult = results["".concat(percentile)];
   }
   return results;
-}
+}, ['vc']);