@atlaskit/react-ufo 3.4.14 → 3.5.0

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

@@ -1,5 +1,7 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+var _VCObserver;
 import { fg } from '@atlaskit/platform-feature-flags';
+import { markProfilingEnd, markProfilingStart, withProfiling } from '../../self-measurements';
 import { attachAbortListeners } from './attachAbortListeners';
 import { getVCRevisionsData } from './getVCRevisionsData';
 import { getViewportHeight, getViewportWidth } from './getViewport';
@@ -13,7 +15,7 @@ const abortReason = {
   error: 'error'
 };
 const UNUSED_SECTOR = 0;
-function filterComponentsLog(log) {
+const filterComponentsLog = withProfiling(function filterComponentsLog(log) {
   return Object.fromEntries(Object.entries(log).map(([timestamp, entries]) => [Number(timestamp), entries.map(entry => {
     const {
       __debug__element,
@@ -21,7 +23,7 @@ function filterComponentsLog(log) {
     } = entry;
     return rest;
   })]));
-}
+}, ['vc']);
 export class VCObserver {
   constructor(options) {
     /* abort logic */
@@ -310,7 +312,7 @@ export class VCObserver {
         [`${fullPrefix}vc:state`]: true,
         [`${fullPrefix}vc:clean`]: isVCClean,
         [`${fullPrefix}vc:dom`]: VCBox,
-        [`${fullPrefix}vc:updates`]: VCEntries.rel.slice(0, 50),
+        [`${fullPrefix}vc:updates`]: fg('platform_ufo_vc_observer_new') ? undefined : VCEntries.rel.slice(0, 50),
         // max 50
         [`${fullPrefix}vc:size`]: viewport,
         [`${fullPrefix}vc:time`]: Math.round(totalTime + (stopTime - startTime)),
@@ -318,16 +320,17 @@ export class VCObserver {
         [`${fullPrefix}vc:ratios`]: ratios,
         ...outOfBoundary,
         [`${fullPrefix}vc:next`]: vcNext.VC,
-        [`${fullPrefix}vc:next:updates`]: vcNext.VCEntries.rel.slice(0, 50),
+        [`${fullPrefix}vc:next:updates`]: fg('platform_ufo_vc_observer_new') ? undefined : vcNext.VCEntries.rel.slice(0, 50),
+        // max 50
         [`${fullPrefix}vc:next:dom`]: vcNext.VCBox,
         [`${fullPrefix}vc:ignored`]: this.getIgnoredElements(componentsLog),
         ...revisionsData,
         ...(isCalcSpeedIndexEnabled ? speedIndex : {})
       };
     });
-    _defineProperty(this, "handleUpdate", (rawTime, intersectionRect, targetName, element, type, ignoreReason) => {
+    _defineProperty(this, "handleUpdate", (rawTime, intersectionRect, targetName, element, type, ignoreReason, attributeName, oldValue, newValue) => {
       this.measureStart();
-      this.legacyHandleUpdate(rawTime, intersectionRect, targetName, element, type, ignoreReason);
+      this.legacyHandleUpdate(rawTime, intersectionRect, targetName, element, type, ignoreReason, attributeName, oldValue, newValue);
       if (!fg('platform_ufo_vc_observer_new')) {
         this.onViewportChangeDetected({
           timestamp: rawTime,
@@ -335,12 +338,15 @@ export class VCObserver {
           targetName,
           element,
           type,
-          ignoreReason
+          ignoreReason,
+          attributeName,
+          oldValue,
+          newValue
         });
       }
       this.measureStop();
     });
-    _defineProperty(this, "legacyHandleUpdate", (rawTime, intersectionRect, targetName, element, type, ignoreReason) => {
+    _defineProperty(this, "legacyHandleUpdate", (rawTime, intersectionRect, targetName, element, type, ignoreReason, attributeName, oldValue, newValue) => {
       if (this.abortReason.reason === null || this.abortReason.blocking === false) {
         const time = Math.round(rawTime - this.startTime);
         const mappedValues = this.mapPixelsToHeatmap(intersectionRect.left, intersectionRect.top, intersectionRect.width, intersectionRect.height);
@@ -357,9 +363,13 @@ export class VCObserver {
         }
         this.componentsLog[time].push({
           __debug__element: this.devToolsEnabled ? new WeakRef(element) : null,
+          type,
           intersectionRect,
           targetName,
-          ignoreReason
+          ignoreReason,
+          attributeName,
+          oldValue,
+          newValue
         });
       }
     });
@@ -369,7 +379,10 @@ export class VCObserver {
       ignoreReason,
       timestamp,
       targetName,
-      intersectionRect
+      intersectionRect,
+      attributeName,
+      oldValue,
+      newValue
     }) => {
       if (this.multiHeatmap === null) {
         return;
@@ -393,7 +406,10 @@ export class VCObserver {
         classification: revisionsClassification,
         onError: error => {
           this.setAbortReason(abortReason.error, error.time, error.error);
-        }
+        },
+        attributeName,
+        oldValue,
+        newValue
       });
     });
     _defineProperty(this, "mapPixelsToHeatmap", (left, top, width, height) => {
@@ -465,6 +481,7 @@ export class VCObserver {
       }
       this.unbind = unbinds;
     });
+    const operationTimer = markProfilingStart('VCObserver constructor');
     this.arraySize = options.heatmapSize || 200;
     this.devToolsEnabled = options.devToolsEnabled || false;
     this.oldDomUpdatesEnabled = options.oldDomUpdates || false;
@@ -485,6 +502,32 @@ export class VCObserver {
       devToolsEnabled: this.devToolsEnabled
     });
     this.isPostInteraction = options.isPostInteraction || false;
+    this.start = withProfiling(this.start.bind(this), ['vc']);
+    this.stop = withProfiling(this.stop.bind(this), ['vc']);
+    this.getAbortReasonInfo = withProfiling(this.getAbortReasonInfo.bind(this), ['vc']); // TODO: confirm correct value of `this`
+    this.getVCRawData = withProfiling(this.getVCRawData.bind(this), ['vc']); // TODO: confirm correct value of `this`
+    this.getIgnoredElements = withProfiling(this.getIgnoredElements.bind(this), ['vc']);
+    this.getVCResult = withProfiling(this.getVCResult.bind(this), ['vc']);
+    this.setSSRElement = withProfiling(this.setSSRElement.bind(this), ['vc']);
+    this.setReactRootRenderStart = withProfiling(this.setReactRootRenderStart.bind(this), ['vc']);
+    this.setReactRootRenderStop = withProfiling(this.setReactRootRenderStop.bind(this), ['vc']);
+    this.handleUpdate = withProfiling(this.handleUpdate.bind(this), ['vc']); // TODO: confirm correct value of `this`
+    this.legacyHandleUpdate = withProfiling(this.legacyHandleUpdate.bind(this), ['vc']); // TODO: confirm correct value of `this`
+    this.onViewportChangeDetected = withProfiling(this.onViewportChangeDetected.bind(this), ['vc']); // TODO: confirm correct value of `this`
+    this.setAbortReason = withProfiling(this.setAbortReason.bind(this), ['vc']);
+    this.resetState = withProfiling(this.resetState.bind(this), ['vc']);
+    this.setViewportSize = withProfiling(this.setViewportSize.bind(this), ['vc']);
+    this.mapPixelsToHeatmap = withProfiling(this.mapPixelsToHeatmap.bind(this), ['vc']); // TODO: confirm correct value of `this`
+    this.getElementRatio = withProfiling(this.getElementRatio.bind(this), ['vc']); // TODO: confirm correct value of `this`
+    this.applyChangesToHeatMap = withProfiling(this.applyChangesToHeatMap.bind(this), ['vc']);
+    this.abortReasonCallback = withProfiling(this.abortReasonCallback.bind(this), ['vc']); // TODO: confirm correct value of `this`
+    this.attachAbortListeners = withProfiling(this.attachAbortListeners.bind(this), ['vc']); // TODO: confirm correct value of `this`
+    this.detachAbortListeners = withProfiling(this.detachAbortListeners.bind(this), ['vc']);
+    this.measureStart = withProfiling(this.measureStart.bind(this), ['vc']);
+    this.measureStop = withProfiling(this.measureStop.bind(this), ['vc']);
+    markProfilingEnd(operationTimer, {
+      tags: ['vc']
+    });
   }
   start({
     startTime
@@ -516,103 +559,6 @@ export class VCObserver {
       ignoreReason
     }));
   }
-  static calculateVC({
-    heatmap,
-    ssr = UNUSED_SECTOR,
-    componentsLog,
-    viewport
-  }) {
-    const lastUpdate = {};
-    let totalPainted = 0;
-    if (ssr !== UNUSED_SECTOR) {
-      var _window$document;
-      const element = {
-        __debug__element: new WeakRef((_window$document = window.document) === null || _window$document === void 0 ? void 0 : _window$document.body),
-        intersectionRect: {
-          top: 0,
-          left: 0,
-          right: 0,
-          bottom: 0,
-          x: 0,
-          y: 0,
-          width: viewport.w,
-          height: viewport.h,
-          toJSON() {
-            return {};
-          }
-        },
-        targetName: 'SSR'
-      };
-      if (!componentsLog[ssr]) {
-        componentsLog[ssr] = [];
-      }
-      componentsLog[ssr].push(element);
-    }
-    heatmap.forEach(line => {
-      line.forEach(entry => {
-        const rounded = Math.floor(entry === UNUSED_SECTOR && ssr !== UNUSED_SECTOR ? ssr : entry);
-        totalPainted += rounded !== UNUSED_SECTOR ? 1 : 0;
-        if (rounded !== UNUSED_SECTOR) {
-          lastUpdate[rounded] = lastUpdate[rounded] ? lastUpdate[rounded] + 1 : 1;
-        }
-      });
-    });
-    const entries = Object.entries(lastUpdate).map(a => [parseInt(a[0], 10), a[1]]).sort((a, b) => a[0] > b[0] ? 1 : -1);
-    const VC = VCObserver.makeVCReturnObj();
-    const VCBox = VCObserver.makeVCReturnObj();
-
-    // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix
-    const isCalcSpeedIndexEnabled = fg('ufo-calc-speed-index');
-    const isFilterIgnoredItemsEnabled = fg('platform_ufo_vc_filter_ignored_items');
-    entries.reduce((acc = 0, v) => {
-      const currRatio = v[1] / totalPainted;
-      let VCRatio = currRatio + acc;
-      if (fg('platform_ufo_fix_vc_observer_rounding_error')) {
-        const preciseCurrRatio = Math.round(100 * (v[1] / totalPainted));
-        const preciseAccRatio = Math.round(acc * 100);
-        VCRatio = (preciseCurrRatio + preciseAccRatio) / 100;
-      }
-      const time = v[0];
-      VCObserver.VCParts.forEach(key => {
-        const value = parseInt(key, 10);
-        if ((VC[key] === null || VC[key] === undefined) && VCRatio >= value / 100) {
-          var _componentsLog$time, _componentsLog$time2;
-          VC[key] = time;
-          VCBox[key] = isFilterIgnoredItemsEnabled ? [...new Set((_componentsLog$time = componentsLog[time]) === null || _componentsLog$time === void 0 ? void 0 : _componentsLog$time.filter(v => !v.ignoreReason).map(v => v.targetName))] : [...new Set((_componentsLog$time2 = componentsLog[time]) === null || _componentsLog$time2 === void 0 ? void 0 : _componentsLog$time2.map(v => v.targetName))];
-        }
-      });
-      return VCRatio;
-    }, 0);
-    const VCEntries = entries.reduce((acc, [timestamp, entryPainted], i) => {
-      var _acc$abs, _componentsLog$timest, _componentsLog$timest2, _acc$rel$vc, _acc$rel;
-      const currentlyPainted = entryPainted + (((_acc$abs = acc.abs[i - 1]) === null || _acc$abs === void 0 ? void 0 : _acc$abs[1]) || 0);
-      const currentlyPaintedRatio = Math.round(currentlyPainted / totalPainted * 1000) / 10;
-      const logEntry = isFilterIgnoredItemsEnabled ? [...new Set((_componentsLog$timest = componentsLog[timestamp]) === null || _componentsLog$timest === void 0 ? void 0 : _componentsLog$timest.filter(v => !v.ignoreReason).map(v => v.targetName))] : [...new Set((_componentsLog$timest2 = componentsLog[timestamp]) === null || _componentsLog$timest2 === void 0 ? void 0 : _componentsLog$timest2.map(v => v.targetName))];
-      const ratioDelta = (currentlyPaintedRatio - ((_acc$rel$vc = (_acc$rel = acc.rel[i - 1]) === null || _acc$rel === void 0 ? void 0 : _acc$rel.vc) !== null && _acc$rel$vc !== void 0 ? _acc$rel$vc : 0)) / 100;
-      if (isCalcSpeedIndexEnabled) {
-        const speedIndex = timestamp * ratioDelta;
-        acc.speedIndex += speedIndex;
-      }
-      acc.abs.push([timestamp, currentlyPainted]);
-      acc.rel.push({
-        time: timestamp,
-        vc: currentlyPaintedRatio,
-        elements: logEntry
-      });
-      return acc;
-    }, {
-      abs: [],
-      rel: [],
-      speedIndex: 0
-    });
-    VCEntries.speedIndex = Math.round(VCEntries.speedIndex);
-    return {
-      VC,
-      VCBox,
-      VCEntries,
-      totalPainted
-    };
-  }
   setSSRElement(element) {
     this.observers.setReactRootElement(element);
   }
@@ -682,13 +628,6 @@ export class VCObserver {
       }
     }
   }
-  static makeVCReturnObj() {
-    const vc = {};
-    VCObserver.VCParts.forEach(v => {
-      vc[v] = null;
-    });
-    return vc;
-  }
   detachAbortListeners() {
     this.unbind.forEach(fn => fn());
     this.unbind = [];
@@ -704,5 +643,110 @@ export class VCObserver {
     this._startMeasureTimestamp = -1;
   }
 }
+_VCObserver = VCObserver;
 /** config * */
-_defineProperty(VCObserver, "VCParts", ['25', '50', '75', '80', '85', '90', '95', '98', '99']);
+_defineProperty(VCObserver, "VCParts", ['25', '50', '75', '80', '85', '90', '95', '98', '99']);
+_defineProperty(VCObserver, "calculateVC", withProfiling(function calculateVC({
+  heatmap,
+  ssr = UNUSED_SECTOR,
+  componentsLog,
+  viewport
+}) {
+  const lastUpdate = {};
+  let totalPainted = 0;
+  if (ssr !== UNUSED_SECTOR) {
+    var _window$document;
+    const element = {
+      __debug__element: new WeakRef((_window$document = window.document) === null || _window$document === void 0 ? void 0 : _window$document.body),
+      intersectionRect: {
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        x: 0,
+        y: 0,
+        width: viewport.w,
+        height: viewport.h,
+        toJSON() {
+          return {};
+        }
+      },
+      targetName: 'SSR'
+    };
+    if (!componentsLog[ssr]) {
+      componentsLog[ssr] = [];
+    }
+    componentsLog[ssr].push(element);
+  }
+  heatmap.forEach(line => {
+    line.forEach(entry => {
+      const rounded = Math.floor(entry === UNUSED_SECTOR && ssr !== UNUSED_SECTOR ? ssr : entry);
+      totalPainted += rounded !== UNUSED_SECTOR ? 1 : 0;
+      if (rounded !== UNUSED_SECTOR) {
+        lastUpdate[rounded] = lastUpdate[rounded] ? lastUpdate[rounded] + 1 : 1;
+      }
+    });
+  });
+  const entries = Object.entries(lastUpdate).map(a => [parseInt(a[0], 10), a[1]]).sort((a, b) => a[0] > b[0] ? 1 : -1);
+  const VC = _VCObserver.makeVCReturnObj();
+  const VCBox = _VCObserver.makeVCReturnObj();
+
+  // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix
+  const isCalcSpeedIndexEnabled = fg('ufo-calc-speed-index');
+  const isFilterIgnoredItemsEnabled = fg('platform_ufo_vc_filter_ignored_items');
+  entries.reduce((acc = 0, v) => {
+    const currRatio = v[1] / totalPainted;
+    let VCRatio = currRatio + acc;
+    if (fg('platform_ufo_fix_vc_observer_rounding_error')) {
+      const preciseCurrRatio = Math.round(100 * (v[1] / totalPainted));
+      const preciseAccRatio = Math.round(acc * 100);
+      VCRatio = (preciseCurrRatio + preciseAccRatio) / 100;
+    }
+    const time = v[0];
+    _VCObserver.VCParts.forEach(key => {
+      const value = parseInt(key, 10);
+      if ((VC[key] === null || VC[key] === undefined) && VCRatio >= value / 100) {
+        var _componentsLog$time, _componentsLog$time2;
+        VC[key] = time;
+        VCBox[key] = isFilterIgnoredItemsEnabled ? [...new Set((_componentsLog$time = componentsLog[time]) === null || _componentsLog$time === void 0 ? void 0 : _componentsLog$time.filter(v => !v.ignoreReason).map(v => v.targetName))] : [...new Set((_componentsLog$time2 = componentsLog[time]) === null || _componentsLog$time2 === void 0 ? void 0 : _componentsLog$time2.map(v => v.targetName))];
+      }
+    });
+    return VCRatio;
+  }, 0);
+  const VCEntries = entries.reduce((acc, [timestamp, entryPainted], i) => {
+    var _acc$abs, _componentsLog$timest, _componentsLog$timest2, _acc$rel$vc, _acc$rel;
+    const currentlyPainted = entryPainted + (((_acc$abs = acc.abs[i - 1]) === null || _acc$abs === void 0 ? void 0 : _acc$abs[1]) || 0);
+    const currentlyPaintedRatio = Math.round(currentlyPainted / totalPainted * 1000) / 10;
+    const logEntry = isFilterIgnoredItemsEnabled ? [...new Set((_componentsLog$timest = componentsLog[timestamp]) === null || _componentsLog$timest === void 0 ? void 0 : _componentsLog$timest.filter(v => !v.ignoreReason).map(v => v.targetName))] : [...new Set((_componentsLog$timest2 = componentsLog[timestamp]) === null || _componentsLog$timest2 === void 0 ? void 0 : _componentsLog$timest2.map(v => v.targetName))];
+    const ratioDelta = (currentlyPaintedRatio - ((_acc$rel$vc = (_acc$rel = acc.rel[i - 1]) === null || _acc$rel === void 0 ? void 0 : _acc$rel.vc) !== null && _acc$rel$vc !== void 0 ? _acc$rel$vc : 0)) / 100;
+    if (isCalcSpeedIndexEnabled) {
+      const speedIndex = timestamp * ratioDelta;
+      acc.speedIndex += speedIndex;
+    }
+    acc.abs.push([timestamp, currentlyPainted]);
+    acc.rel.push({
+      time: timestamp,
+      vc: currentlyPaintedRatio,
+      elements: logEntry
+    });
+    return acc;
+  }, {
+    abs: [],
+    rel: [],
+    speedIndex: 0
+  });
+  VCEntries.speedIndex = Math.round(VCEntries.speedIndex);
+  return {
+    VC,
+    VCBox,
+    VCEntries,
+    totalPainted
+  };
+}, ['vc']));
+_defineProperty(VCObserver, "makeVCReturnObj", withProfiling(function makeVCReturnObj() {
+  const vc = {};
+  _VCObserver.VCParts.forEach(v => {
+    vc[v] = null;
+  });
+  return vc;
+}, ['vc']));

package/dist/es2019/vc/vc-observer/media-wrapper/vc-utils.js

@@ -1,5 +1,6 @@
+import { withProfiling } from '../../../self-measurements';
 import { MEDIA_WRAPPER_TAG } from './index';
-export const isContainedWithinMediaWrapper = node => {
+export const isContainedWithinMediaWrapper = withProfiling(function isContainedWithinMediaWrapper(node) {
   while (node) {
     if (node instanceof Element && node.hasAttribute(MEDIA_WRAPPER_TAG)) {
       return true;
@@ -7,4 +8,4 @@ export const isContainedWithinMediaWrapper = node => {
     node = node.parentNode;
   }
   return false;
-};
+});

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

@@ -1,4 +1,5 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import { markProfilingEnd, markProfilingStart, withProfiling } from '../../../../self-measurements';
 const placeholderDataKey = 'editorLnvPlaceholder'; // data-editor-lnv-placeholder
 const replaceDataKey = 'editorLnvPlaceholderReplace'; // data-editor-lnv-placeholder-replace
 
@@ -63,7 +64,23 @@ export class EditorLnvHandler {
         return;
       }
     });
+    const operationTimer = markProfilingStart('EditorLnvHandler constructor');
     this.intersectionObserver = new IntersectionObserver(entries => entries.filter(entry => entry.intersectionRatio > 0).forEach(this.intersectionObserverCallback));
+    this.shouldHandleAddedNode = withProfiling(this.shouldHandleAddedNode.bind(this), ['vc']);
+    this.handleAddedNode = withProfiling(this.handleAddedNode.bind(this), ['vc']);
+    this.clear = withProfiling(this.clear.bind(this), ['vc']);
+    this.handleAddedPlaceholderNode = withProfiling(this.handleAddedPlaceholderNode.bind(this), ['vc']);
+    this.handleAddedReplaceNode = withProfiling(this.handleAddedReplaceNode.bind(this), ['vc']);
+    this.isExistingPlaceholder = withProfiling(this.isExistingPlaceholder.bind(this), ['vc']);
+    this.registerPlaceholder = withProfiling(this.registerPlaceholder.bind(this), ['vc']);
+    this.getSize = withProfiling(this.getSize.bind(this), ['vc']);
+    this.isAddedPlaceholderMatchingSize = withProfiling(this.isAddedPlaceholderMatchingSize.bind(this), ['vc']);
+    this.isAddedReplaceMatchingSize = withProfiling(this.isAddedReplaceMatchingSize.bind(this), ['vc']);
+    this.areRectsSameSize = withProfiling(this.areRectsSameSize.bind(this), ['vc']);
+    this.intersectionObserverCallback = withProfiling(this.intersectionObserverCallback.bind(this), ['vc']);
+    markProfilingEnd(operationTimer, {
+      tags: ['vc']
+    });
   }
   shouldHandleAddedNode(el) {
     var _el$dataset, _el$dataset2;

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

@@ -1,6 +1,7 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 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';
@@ -10,7 +11,7 @@ const state = {
   waitingForFirstRender: 2,
   ignoring: 3
 };
-function isElementVisible(target) {
+const isElementVisible = withProfiling(function isElementVisible(target) {
   if (!target || typeof target.checkVisibility !== 'function') {
     return true;
   }
@@ -20,13 +21,13 @@ function isElementVisible(target) {
     visibilityProperty: true
   });
   return isVisible;
-}
-function isInsideEditorContainer(target) {
+}, ['vc']);
+const isInsideEditorContainer = withProfiling(function isInsideEditorContainer(target) {
   if (!target || typeof target.closest !== 'function') {
     return false;
   }
   return Boolean(target.closest('.ProseMirror'));
-}
+}, ['vc']);
 export class Observers {
   constructor(opts) {
     _defineProperty(this, "observedMutations", new WeakMap());
@@ -50,15 +51,27 @@ export class Observers {
     _defineProperty(this, "subscribeResults", cb => {
       this.callbacks.add(cb);
     });
-    _defineProperty(this, "observeElement", (node, mutation, type, ignoreReason) => {
+    _defineProperty(this, "observeElement", (node, mutation, type, ignoreReason, attributeName, oldValue = null, newValue = null) => {
       var _this$intersectionObs;
       (_this$intersectionObs = this.intersectionObserver) === null || _this$intersectionObs === void 0 ? void 0 : _this$intersectionObs.observe(node);
-      this.observedMutations.set(node, {
-        mutation,
-        ignoreReason,
-        type
-      });
+      if (fg('platform_ufo_log_attr_mutation_values')) {
+        this.observedMutations.set(node, {
+          mutation,
+          ignoreReason,
+          type,
+          attributeName,
+          oldValue,
+          newValue
+        });
+      } else {
+        this.observedMutations.set(node, {
+          mutation,
+          ignoreReason,
+          type
+        });
+      }
     });
+    const operationTimer = markProfilingStart('Observers constructor');
     this.selectorConfig = {
       ...this.selectorConfig,
       ...opts.selectorConfig
@@ -67,6 +80,23 @@ export class Observers {
     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']
+    });
   }
   isBrowserSupported() {
     return typeof window.IntersectionObserver === 'function' && typeof window.MutationObserver === 'function';
@@ -113,8 +143,12 @@ export class Observers {
     this.ssr.renderStop = stopTime;
   }
   getMutationObserver() {
+    if (!this.isBrowserSupported()) {
+      return null;
+    }
     const shouldHandleEditorLnvLocal = shouldHandleEditorLnv();
-    return this.isBrowserSupported() ? new MutationObserver(mutations => {
+    return new MutationObserver(mutations => {
+      const operationTimer = markProfilingStart('mutationObserverCallback');
       this.measureStart();
       mutations.forEach(mutation => {
         // patching element if timestamp not automatically added
@@ -184,34 +218,48 @@ export class Observers {
           });
         } else if (mutation.type === 'attributes') {
           if (mutation.target instanceof HTMLElement) {
+            const 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
+              */
               const oldValue = (_mutation$oldValue = mutation.oldValue) !== null && _mutation$oldValue !== void 0 ? _mutation$oldValue : undefined;
-              const newValue = mutation.attributeName ? mutation.target.getAttribute(mutation.attributeName) : undefined;
+              const newValue = attributeName ? mutation.target.getAttribute(attributeName) : undefined;
               if (oldValue !== newValue) {
                 if (isNonVisualStyleMutation(mutation)) {
                   ignoreReason = 'non-visual-style';
                 }
-                this.observeElement(mutation.target, mutation, 'attr', ignoreReason);
+                if (fg('platform_ufo_vc_fix_ignore_image_mutation')) {
+                  if (isContainedWithinMediaWrapper(mutation.target)) {
+                    ignoreReason = 'image';
+                  }
+                }
+                this.observeElement(mutation.target, mutation, 'attr', ignoreReason, attributeName, oldValue, newValue);
               }
             } else {
               if (isNonVisualStyleMutation(mutation)) {
                 ignoreReason = 'non-visual-style';
               }
-              this.observeElement(mutation.target, mutation, 'attr', ignoreReason);
+              if (fg('platform_ufo_vc_fix_ignore_image_mutation')) {
+                if (isContainedWithinMediaWrapper(mutation.target)) {
+                  ignoreReason = 'image';
+                }
+              }
+              this.observeElement(mutation.target, mutation, 'attr', ignoreReason, attributeName);
             }
           }
         }
       });
-    }) : null;
+      markProfilingEnd(operationTimer, {
+        tags: ['vc']
+      });
+    });
   }
   getElementName(element) {
     try {
@@ -239,7 +287,11 @@ export class Observers {
     }
   }
   getIntersectionObserver() {
-    return this.isBrowserSupported() ? new IntersectionObserver(entries => {
+    if (!this.isBrowserSupported()) {
+      return null;
+    }
+    return new IntersectionObserver(entries => {
+      const operationTimer = markProfilingStart('intersectionObserverCallback');
       this.measureStart();
       entries.forEach(({
         isIntersecting,
@@ -271,7 +323,7 @@ export class Observers {
             } 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);
           });
           this.elementsInView.add(target);
         } else {
@@ -279,7 +331,10 @@ export class Observers {
         }
       });
       this.measureStop();
-    }) : null;
+      markProfilingEnd(operationTimer, {
+        tags: ['vc']
+      });
+    });
   }
   measureStart() {
     this._startMeasureTimestamp = performance.now();

package/dist/es2019/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({
+const isNonVisualStyleMutation = withProfiling(function isNonVisualStyleMutation({
   target,
   attributeName
 }) {
@@ -28,4 +29,5 @@ export default function isNonVisualStyleMutation({
     return false;
   }
   return true;
-}
+}, ['vc']);
+export default isNonVisualStyleMutation;