@atlaskit/react-ufo 3.3.1 → 3.3.3

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

@@ -11,12 +11,15 @@ import { getBm3Timings } from '../custom-timings';
 import { getGlobalErrorCount } from '../global-error-handler';
 import { getPageVisibilityState } from '../hidden-timing';
 import * as initialPageLoadExtraTiming from '../initial-page-load-extra-timing';
-import { interactionSpans as atlaskitInteractionSpans, postInteractionLog } from '../interaction-metrics';
+import { interactionSpans as atlaskitInteractionSpans } from '../interaction-metrics';
 import * as resourceTiming from '../resource-timing';
 import { roundEpsilon } from '../round-number';
 import * as ssr from '../ssr';
-import { getVCObserver } from '../vc';
 import { buildSegmentTree, labelStackStartWith, optimizeLabelStack, sanitizeUfoName, stringifyLabelStackFully } from './common/utils';
+import getInteractionStatus from './utils/get-interaction-status';
+import getPageVisibilityUpToTTAI from './utils/get-page-visibility-up-to-ttai';
+import getSSRDoneTimeValue from './utils/get-ssr-done-time-value';
+import getVCMetrics from './utils/get-vc-metrics';
 function getUfoNameOverride(interaction) {
   const {
     ufoName,
@@ -65,13 +68,6 @@ const getPageVisibilityUpToTTI = interaction => {
   const bm3EndTimeOrInteractionEndTime = getBm3EndTimeOrFallbackValue(interaction);
   return getPageVisibilityState(start, bm3EndTimeOrInteractionEndTime);
 };
-const getPageVisibilityUpToTTAI = interaction => {
-  const {
-    start,
-    end
-  } = interaction;
-  return getPageVisibilityState(start, end);
-};
 const getVisibilityStateFromPerformance = stop => {
   try {
     const results = performance.getEntriesByType('visibility-state');
@@ -126,15 +122,6 @@ const getMoreAccuratePageVisibilityUpToTTAI = interaction => {
   }
   return old;
 };
-const getInteractionStatus = interaction => {
-  const originalInteractionStatus = interaction.abortReason ? 'ABORTED' : 'SUCCEEDED';
-  const hasBm3TTI = interaction.apdex.length > 0;
-  const overrideStatus = hasBm3TTI ? 'SUCCEEDED' : originalInteractionStatus;
-  return {
-    originalInteractionStatus,
-    overrideStatus
-  };
-};
 const getResourceTimings = (start, end) => {
   var _resourceTiming$getRe;
   return (_resourceTiming$getRe = resourceTiming.getResourceTimings(start, end)) !== null && _resourceTiming$getRe !== void 0 ? _resourceTiming$getRe : undefined;
@@ -165,49 +152,6 @@ const getTTAI = interaction => {
   const pageVisibilityUpToTTAI = getPageVisibilityUpToTTAI(interaction);
   return !interaction.abortReason && pageVisibilityUpToTTAI === 'visible' ? Math.round(end - start) : undefined;
 };
-const getVCMetrics = async interaction => {
-  var _config$vc, _config$vc$ssrWhiteli, _interaction$apdex, _interaction$apdex$, _config$experimentalI;
-  const config = getConfig();
-  if (!(config !== null && config !== void 0 && (_config$vc = config.vc) !== null && _config$vc !== void 0 && _config$vc.enabled)) {
-    return {};
-  }
-  if (interaction.type !== 'page_load' && interaction.type !== 'transition') {
-    return {};
-  }
-  const isSSREnabled = (config === null || config === void 0 ? void 0 : config.ssr) || (config === null || config === void 0 ? void 0 : (_config$vc$ssrWhiteli = config.vc.ssrWhitelist) === null || _config$vc$ssrWhiteli === void 0 ? void 0 : _config$vc$ssrWhiteli.includes(interaction.ufoName));
-  const ssr = interaction.type === 'page_load' && isSSREnabled ? {
-    ssr: getSSRDoneTimeValue(config)
-  } : null;
-  postInteractionLog.setVCObserverSSRConfig(ssr);
-  const tti = (_interaction$apdex = interaction.apdex) === null || _interaction$apdex === void 0 ? void 0 : (_interaction$apdex$ = _interaction$apdex[0]) === null || _interaction$apdex$ === void 0 ? void 0 : _interaction$apdex$.stopTime;
-  const prefix = 'ufo';
-  const interactionStatus = getInteractionStatus(interaction);
-  const pageVisibilityUpToTTAI = getPageVisibilityUpToTTAI(interaction);
-  const result = await getVCObserver().getVCResult({
-    start: interaction.start,
-    stop: interaction.end,
-    tti,
-    prefix,
-    vc: interaction.vc,
-    isEventAborted: interactionStatus.originalInteractionStatus !== 'SUCCEEDED',
-    ...ssr
-  });
-  if ((_config$experimentalI = config.experimentalInteractionMetrics) !== null && _config$experimentalI !== void 0 && _config$experimentalI.enabled) {
-    getVCObserver().stop();
-  }
-  postInteractionLog.setLastInteractionFinishVCResult(result);
-  const VC = result === null || result === void 0 ? void 0 : result['metrics:vc'];
-  if (!VC || !(result !== null && result !== void 0 && result[`${prefix}:vc:clean`])) {
-    return result;
-  }
-  if (interactionStatus.originalInteractionStatus !== 'SUCCEEDED' || pageVisibilityUpToTTAI !== 'visible') {
-    return result;
-  }
-  return {
-    ...result,
-    'metric:vc90': VC['90']
-  };
-};
 const getNavigationMetrics = type => {
   if (type !== 'page_load') {
     return {};
@@ -255,7 +199,7 @@ const getNavigationMetrics = type => {
   };
 };
 const getPPSMetrics = interaction => {
-  var _interaction$apdex2, _interaction$apdex2$;
+  var _interaction$apdex, _interaction$apdex$;
   const {
     start,
     end
@@ -263,7 +207,7 @@ const getPPSMetrics = interaction => {
   const config = getConfig();
   const interactionStatus = getInteractionStatus(interaction);
   const pageVisibilityUpToTTAI = getPageVisibilityUpToTTAI(interaction);
-  const tti = (_interaction$apdex2 = interaction.apdex) === null || _interaction$apdex2 === void 0 ? void 0 : (_interaction$apdex2$ = _interaction$apdex2[0]) === null || _interaction$apdex2$ === void 0 ? void 0 : _interaction$apdex2$.stopTime;
+  const tti = (_interaction$apdex = interaction.apdex) === null || _interaction$apdex === void 0 ? void 0 : (_interaction$apdex$ = _interaction$apdex[0]) === null || _interaction$apdex$ === void 0 ? void 0 : _interaction$apdex$.stopTime;
   const ttai = interactionStatus.originalInteractionStatus === 'SUCCEEDED' && pageVisibilityUpToTTAI === 'visible' ? Math.round(end - start) : undefined;
   const PPSMetricsAtTTI = tti !== undefined ? getLighthouseMetrics({
     start,
@@ -635,10 +579,6 @@ function getBm3TrackerTimings(interaction) {
     legacyMetrics
   };
 }
-function getSSRDoneTimeValue(config) {
-  var _config$ssr, _config$ssr2;
-  return config !== null && config !== void 0 && (_config$ssr = config.ssr) !== null && _config$ssr !== void 0 && _config$ssr.getSSRDoneTime ? config === null || config === void 0 ? void 0 : (_config$ssr2 = config.ssr) === null || _config$ssr2 === void 0 ? void 0 : _config$ssr2.getSSRDoneTime() : ssr.getSSRDoneTime();
-}
 function getPayloadSize(payload) {
   return Math.round(new TextEncoder().encode(JSON.stringify(payload)).length / 1024);
 }
@@ -725,7 +665,7 @@ async function createInteractionMetricsPayload(interaction, interactionId, exper
   } : {};
   // Page Load
   const getPageLoadInteractionMetrics = () => {
-    var _config$ssr3;
+    var _config$ssr;
     if (!isPageLoad) {
       return {};
     }
@@ -737,7 +677,7 @@ async function createInteractionMetricsPayload(interaction, interactionId, exper
     return {
       ...SSRDoneTime,
       isBM3ConfigSSRDoneAsFmp: interaction.metaData.__legacy__bm3ConfigSSRDoneAsFmp,
-      isUFOConfigSSRDoneAsFmp: interaction.metaData.__legacy__bm3ConfigSSRDoneAsFmp || !!(config !== null && config !== void 0 && (_config$ssr3 = config.ssr) !== null && _config$ssr3 !== void 0 && _config$ssr3.getSSRDoneTime)
+      isUFOConfigSSRDoneAsFmp: interaction.metaData.__legacy__bm3ConfigSSRDoneAsFmp || !!(config !== null && config !== void 0 && (_config$ssr = config.ssr) !== null && _config$ssr !== void 0 && _config$ssr.getSSRDoneTime)
     };
   };
   // Detailed payload. Page visibility = visible
@@ -767,14 +707,14 @@ async function createInteractionMetricsPayload(interaction, interactionId, exper
   };
   // Page load & detailed payload
   const getPageLoadDetailedInteractionMetrics = () => {
-    var _config$ssr4;
+    var _config$ssr2;
     if (!isPageLoad || !isDetailedPayload) {
       return {};
     }
     const config = getConfig();
     return {
       initialPageLoadExtraTimings: objectToArray(initialPageLoadExtraTiming.getTimings()),
-      SSRTimings: config !== null && config !== void 0 && (_config$ssr4 = config.ssr) !== null && _config$ssr4 !== void 0 && _config$ssr4.getSSRTimings ? config.ssr.getSSRTimings() : objectToArray(ssr.getSSRTimings())
+      SSRTimings: config !== null && config !== void 0 && (_config$ssr2 = config.ssr) !== null && _config$ssr2 !== void 0 && _config$ssr2.getSSRTimings ? config.ssr.getSSRTimings() : objectToArray(ssr.getSSRTimings())
     };
   };
   if (experimental) {
@@ -877,7 +817,7 @@ export async function createPayloads(interactionId, interaction) {
   const interactionMetricsPayload = await createInteractionMetricsPayload(modifiedInteraction, interactionId);
   return [interactionMetricsPayload];
 }
-export function createExperimentalMetricsPayload(interactionId, interaction) {
+export async function createExperimentalMetricsPayload(interactionId, interaction) {
   const config = getConfig();
   if (!config) {
     throw Error('UFO Configuration not provided');
@@ -891,5 +831,6 @@ export function createExperimentalMetricsPayload(interactionId, interaction) {
   if (pageVisibilityState !== 'visible') {
     return null;
   }
-  return createInteractionMetricsPayload(interaction, interactionId, true);
+  const result = await createInteractionMetricsPayload(interaction, interactionId, true);
+  return result;
 }

package/dist/es2019/create-payload/utils/get-interaction-status.js

@@ -0,0 +1,31 @@
+/**
+ * Determines the interaction status based on abort reason and BM3 TTI presence.
+ *
+ * @param {InteractionMetrics} interaction - The interaction metrics object containing abort reason and apdex data
+ * @returns {{
+ *   originalInteractionStatus: 'ABORTED' | 'SUCCEEDED',
+ *   overrideStatus: 'ABORTED' | 'SUCCEEDED'
+ * }} An object containing both the original and override status
+ *
+ * @description
+ * This function evaluates the interaction status in two ways:
+ * 1. originalInteractionStatus: Based on whether there's an abort reason
+ * 2. overrideStatus: Based on the presence of BM3 TTI (apdex data)
+ *
+ * @example
+ * const interaction = {
+ *   abortReason: null,
+ *   apdex: [1, 2, 3]
+ * };
+ * const result = getInteractionStatus(interaction);
+ * // Returns: { originalInteractionStatus: 'SUCCEEDED', overrideStatus: 'SUCCEEDED' }
+ */
+export default function getInteractionStatus(interaction) {
+  const originalInteractionStatus = interaction.abortReason ? 'ABORTED' : 'SUCCEEDED';
+  const hasBm3TTI = interaction.apdex.length > 0;
+  const overrideStatus = hasBm3TTI ? 'SUCCEEDED' : originalInteractionStatus;
+  return {
+    originalInteractionStatus,
+    overrideStatus
+  };
+}

package/dist/es2019/create-payload/utils/get-page-visibility-up-to-ttai.js

@@ -0,0 +1,8 @@
+import { getPageVisibilityState } from '../../hidden-timing';
+export default function getPageVisibilityUpToTTAI(interaction) {
+  const {
+    start,
+    end
+  } = interaction;
+  return getPageVisibilityState(start, end);
+}

package/dist/es2019/create-payload/utils/get-ssr-done-time-value.js

@@ -0,0 +1,5 @@
+import * as ssr from '../../ssr';
+export default function getSSRDoneTimeValue(config) {
+  var _config$ssr, _config$ssr2;
+  return config !== null && config !== void 0 && (_config$ssr = config.ssr) !== null && _config$ssr !== void 0 && _config$ssr.getSSRDoneTime ? config === null || config === void 0 ? void 0 : (_config$ssr2 = config.ssr) === null || _config$ssr2 === void 0 ? void 0 : _config$ssr2.getSSRDoneTime() : ssr.getSSRDoneTime();
+}

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

@@ -0,0 +1,53 @@
+import { fg } from '@atlaskit/platform-feature-flags';
+import { getConfig } from '../../config';
+import { postInteractionLog } from '../../interaction-metrics';
+import { getVCObserver } from '../../vc';
+import getInteractionStatus from './get-interaction-status';
+import getPageVisibilityUpToTTAI from './get-page-visibility-up-to-ttai';
+import getSSRDoneTimeValue from './get-ssr-done-time-value';
+export default async function getVCMetrics(interaction) {
+  var _config$vc, _config$vc$ssrWhiteli, _interaction$apdex, _interaction$apdex$, _config$experimentalI;
+  const config = getConfig();
+  if (!(config !== null && config !== void 0 && (_config$vc = config.vc) !== null && _config$vc !== void 0 && _config$vc.enabled)) {
+    return {};
+  }
+  if (interaction.type !== 'page_load' && interaction.type !== 'transition') {
+    return {};
+  }
+  const interactionStatus = getInteractionStatus(interaction);
+  const pageVisibilityUpToTTAI = getPageVisibilityUpToTTAI(interaction);
+  if ((interactionStatus.originalInteractionStatus !== 'SUCCEEDED' || pageVisibilityUpToTTAI !== 'visible') && fg('platform_ufo_no_vc_on_aborted')) {
+    return {};
+  }
+  const isSSREnabled = (config === null || config === void 0 ? void 0 : config.ssr) || (config === null || config === void 0 ? void 0 : (_config$vc$ssrWhiteli = config.vc.ssrWhitelist) === null || _config$vc$ssrWhiteli === void 0 ? void 0 : _config$vc$ssrWhiteli.includes(interaction.ufoName));
+  const ssr = interaction.type === 'page_load' && isSSREnabled ? {
+    ssr: getSSRDoneTimeValue(config)
+  } : null;
+  postInteractionLog.setVCObserverSSRConfig(ssr);
+  const tti = (_interaction$apdex = interaction.apdex) === null || _interaction$apdex === void 0 ? void 0 : (_interaction$apdex$ = _interaction$apdex[0]) === null || _interaction$apdex$ === void 0 ? void 0 : _interaction$apdex$.stopTime;
+  const prefix = 'ufo';
+  const result = await getVCObserver().getVCResult({
+    start: interaction.start,
+    stop: interaction.end,
+    tti,
+    prefix,
+    vc: interaction.vc,
+    isEventAborted: interactionStatus.originalInteractionStatus !== 'SUCCEEDED',
+    ...ssr
+  });
+  if ((_config$experimentalI = config.experimentalInteractionMetrics) !== null && _config$experimentalI !== void 0 && _config$experimentalI.enabled) {
+    getVCObserver().stop();
+  }
+  postInteractionLog.setLastInteractionFinishVCResult(result);
+  const VC = result === null || result === void 0 ? void 0 : result['metrics:vc'];
+  if (!VC || !(result !== null && result !== void 0 && result[`${prefix}:vc:clean`])) {
+    return result;
+  }
+  if (interactionStatus.originalInteractionStatus !== 'SUCCEEDED' || pageVisibilityUpToTTAI !== 'visible') {
+    return result;
+  }
+  return {
+    ...result,
+    'metric:vc90': VC['90']
+  };
+}

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

@@ -28,17 +28,19 @@ function sinkInteraction(instance, payloadPackage) {
 function sinkExperimentalInteractionMetrics(instance, payloadPackage) {
   sinkExperimentalHandler((interactionId, interaction) => {
     scheduleCallback(idlePriority, () => {
-      const payload = payloadPackage.createExperimentalMetricsPayload(interactionId, interaction);
-      if (payload) {
-        if (fg('enable_ufo_devtools_api_for_extra_events')) {
-          // NOTE: This API is used by the UFO DevTool Chrome Extension and Criterion
-          const devToolObserver = globalThis.__ufo_devtool_onUfoPayload;
-          if (typeof devToolObserver === 'function') {
-            devToolObserver === null || devToolObserver === void 0 ? void 0 : devToolObserver(payload);
+      const payloadPromise = payloadPackage.createExperimentalMetricsPayload(interactionId, interaction);
+      payloadPromise.then(payload => {
+        if (payload) {
+          if (fg('enable_ufo_devtools_api_for_extra_events')) {
+            // NOTE: This API is used by the UFO DevTool Chrome Extension and Criterion
+            const devToolObserver = globalThis.__ufo_devtool_onUfoPayload;
+            if (typeof devToolObserver === 'function') {
+              devToolObserver === null || devToolObserver === void 0 ? void 0 : devToolObserver(payload);
+            }
           }
+          instance.sendOperationalEvent(payload);
         }
-        instance.sendOperationalEvent(payload);
-      }
+      });
     });
   });
 }

package/dist/es2019/vc/index.js

@@ -1,11 +1,13 @@
 import { fg } from '@atlaskit/platform-feature-flags';
+import { getConfig } from '../config';
 import { VCObserver } from './vc-observer';
 import VCObserverNew from './vc-observer-new';
 class VCObserverWrapper {
   constructor(opts = {}) {
+    var _getConfig, _getConfig$vc;
     this.oldVCObserver = new VCObserver(opts);
     this.newVCObserver = null;
-    const isNewVCObserverEnabled = fg('platform_ufo_vc_observer_new');
+    const isNewVCObserverEnabled = fg('platform_ufo_vc_observer_new') || ((_getConfig = getConfig()) === null || _getConfig === void 0 ? void 0 : (_getConfig$vc = _getConfig.vc) === null || _getConfig$vc === void 0 ? void 0 : _getConfig$vc.enableVCObserverNew);
     if (isNewVCObserverEnabled) {
       this.newVCObserver = new VCObserverNew({
         selectorConfig: opts.selectorConfig
@@ -15,7 +17,9 @@ class VCObserverWrapper {
   start(startArg) {
     var _this$oldVCObserver, _this$newVCObserver;
     (_this$oldVCObserver = this.oldVCObserver) === null || _this$oldVCObserver === void 0 ? void 0 : _this$oldVCObserver.start(startArg);
-    (_this$newVCObserver = this.newVCObserver) === null || _this$newVCObserver === void 0 ? void 0 : _this$newVCObserver.start();
+    (_this$newVCObserver = this.newVCObserver) === null || _this$newVCObserver === void 0 ? void 0 : _this$newVCObserver.start({
+      startTime: startArg.startTime
+    });
   }
   stop() {
     var _this$oldVCObserver2, _this$newVCObserver2;

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

@@ -4,7 +4,15 @@ function getAttributeSelector(element, attributeName) {
   if (!attrValue) {
     return '';
   }
-  return `[${attributeName}="${encodeURIComponent(attrValue)}"]`;
+  return `[${attributeName}="${attrValue}"]`;
+}
+function isValidSelector(selector) {
+  try {
+    document.querySelector(selector);
+    return true;
+  } catch (err) {
+    return false;
+  }
 }
 function isSelectorUnique(selector) {
   return document.querySelectorAll(selector).length === 1;
@@ -12,11 +20,13 @@ function isSelectorUnique(selector) {
 function getUniqueSelector(selectorConfig, element) {
   let currentElement = element;
   const parts = [];
-  while (currentElement && currentElement.localName !== 'body') {
+  const MAX_DEPTH = 3;
+  let currentDepth = 0;
+  while (currentElement && currentElement.localName !== 'body' && currentDepth <= MAX_DEPTH) {
     const tagName = currentElement.localName;
     let selectorPart = tagName;
-    if (selectorConfig.id && currentElement.id) {
-      selectorPart += `#${encodeURIComponent(currentElement.id)}`;
+    if (selectorConfig.id && currentElement.id && isValidSelector(`#${currentElement.id}`)) {
+      selectorPart += `#${currentElement.id}`;
     } else if (selectorConfig.dataVC) {
       selectorPart += getAttributeSelector(currentElement, 'data-vc');
     } else if (selectorConfig.testId) {
@@ -24,9 +34,11 @@ function getUniqueSelector(selectorConfig, element) {
     } else if (selectorConfig.role) {
       selectorPart += getAttributeSelector(currentElement, 'role');
     } else if (selectorConfig.className && currentElement.className) {
-      const classNames = Array.from(currentElement.classList).map(encodeURIComponent).join('.');
+      const classNames = Array.from(currentElement.classList).join('.');
       if (classNames) {
-        selectorPart += `.${classNames}`;
+        if (isValidSelector(`.${classNames}`)) {
+          selectorPart += `.${classNames}`;
+        }
       }
     }
     parts.unshift(selectorPart);
@@ -35,6 +47,7 @@ function getUniqueSelector(selectorConfig, element) {
       return potentialSelector;
     }
     currentElement = currentElement.parentElement;
+    currentDepth++;
   }
   const potentialSelector = parts.join(' > ').trim();
   if (!potentialSelector) {

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

@@ -14,7 +14,6 @@ const DEFAULT_SELECTOR_CONFIG = {
 export default class VCObserverNew {
   constructor(config) {
     var _config$selectorConfi;
-    _defineProperty(this, "startTime", 0);
     _defineProperty(this, "viewportObserver", null);
     _defineProperty(this, "windowEventObserver", null);
     this.entriesTimeline = new EntriesTimeline();
@@ -63,10 +62,13 @@ export default class VCObserverNew {
       }
     });
   }
-  start() {
+  start({
+    startTime
+  }) {
     var _this$viewportObserve, _this$windowEventObse;
     (_this$viewportObserve = this.viewportObserver) === null || _this$viewportObserve === void 0 ? void 0 : _this$viewportObserve.start();
     (_this$windowEventObse = this.windowEventObserver) === null || _this$windowEventObse === void 0 ? void 0 : _this$windowEventObse.start();
+    this.entriesTimeline.clear();
   }
   stop() {
     var _this$viewportObserve2, _this$windowEventObse2;
@@ -85,7 +87,9 @@ export default class VCObserverNew {
       stop
     });
     const fy25_03 = await calculator_fy25_03.calculate({
-      orderedEntries
+      orderedEntries,
+      startTime: start,
+      stopTime: stop
     });
     if (fy25_03) {
       results.push(fy25_03);

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

@@ -6,6 +6,8 @@ export default class AbstractVCCalculatorBase {
     this.revisionNo = revisionNo;
   }
   async calculate({
+    startTime,
+    stopTime,
     orderedEntries
   }) {
     var _vcDetails$90$t, _vcDetails$;
@@ -25,6 +27,8 @@ export default class AbstractVCCalculatorBase {
         width: getViewportWidth(),
         height: getViewportHeight()
       },
+      startTime,
+      stopTime,
       orderedEntries: filteredEntries,
       percentiles: [25, 50, 75, 80, 85, 90, 95, 98, 99]
     });

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

@@ -172,7 +172,6 @@ export function getRGBComponents(n) {
  */
 export async function calculateDrawnPixelsRaw(imageData, scaleFactor, arraySize) {
   const data = imageData.data;
-  const scaleCompensation = Math.round(1 / (scaleFactor * scaleFactor));
   const arr = new Uint32Array(arraySize);
   for (let i = 0; i < data.length; i += 4) {
     // Check alpha
@@ -184,7 +183,7 @@ export async function calculateDrawnPixelsRaw(imageData, scaleFactor, arraySize)
       // The | operator combines all bits together
       const color = data[i] << 16 | data[i + 1] << 8 | data[i + 2];
       const colorIndex = color - 1;
-      arr[colorIndex] = (arr[colorIndex] || 0) + scaleCompensation;
+      arr[colorIndex] = (arr[colorIndex] || 0) + 1;
     }
     if (i % 10000 === 0) {
       await taskYield();

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

@@ -3,7 +3,8 @@ import { ViewportCanvas } from './canvas-pixel';
 export default async function calculateTTVCPercentiles({
   viewport,
   orderedEntries,
-  percentiles
+  percentiles,
+  startTime
 }) {
   const canvas = new ViewportCanvas(viewport, fg('platform_ufo_canvas_heatmap_full_precision') ? 1 : 0.25);
   const elementMap = new Map();
@@ -22,10 +23,11 @@ export default async function calculateTTVCPercentiles({
 
   // Get pixel counts
   const timePixelCounts = await canvas.getPixelCounts();
-  const viewportTotalPixels = viewport.width * viewport.height;
-  return calculatePercentiles(timePixelCounts, elementMap, percentiles, viewportTotalPixels);
+  const canvasDimenstions = canvas.getScaledDimensions();
+  const totalPixels = canvasDimenstions.width * canvasDimenstions.height;
+  return calculatePercentiles(timePixelCounts, elementMap, percentiles, totalPixels, startTime);
 }
-export function calculatePercentiles(timePixelCounts, elementMap, unorderedPercentiles, totalPixels) {
+export function calculatePercentiles(timePixelCounts, elementMap, unorderedPercentiles, totalPixels, startTime) {
   const results = {};
   let cumulativePixels = 0;
   const percentiles = unorderedPercentiles.sort((a, b) => a - b);
@@ -42,7 +44,7 @@ export function calculatePercentiles(timePixelCounts, elementMap, unorderedPerce
     let matchesAnyCheckpoints = false;
     while (percentileIndex < percentiles.length && percentCovered >= percentiles[percentileIndex]) {
       results[`${percentiles[percentileIndex]}`] = {
-        t: Number(time),
+        t: Math.round(Number(time - startTime)),
         e: Array.from(domElementsBuffer)
       };
       percentileIndex++;
@@ -55,15 +57,16 @@ export function calculatePercentiles(timePixelCounts, elementMap, unorderedPerce
       break;
     }
   }
-
-  // Fill in any missing percentiles
-  for (const percentile of percentiles) {
+  let previousResult = {
+    t: 0,
+    e: []
+  };
+  for (let i = 0; i < percentiles.length; i++) {
+    const percentile = percentiles[i];
     if (!(percentile in results)) {
-      results[`${percentile}`] = {
-        t: 0,
-        e: []
-      };
+      results[`${percentile}`] = previousResult;
     }
+    previousResult = results[`${percentile}`];
   }
   return results;
 }

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

@@ -175,7 +175,7 @@ class Heatmap {
       }
     }
   }
-  async getVCPercentMetrics(vcPercentCheckpoint) {
+  async getVCPercentMetrics(vcPercentCheckpoint, startTime) {
     const sortedCheckpoints = [...vcPercentCheckpoint].sort((a, b) => a - b);
     const flattenHeatmap = this.map.flat();
     const totalCells = flattenHeatmap.length;
@@ -232,7 +232,7 @@ class Heatmap {
         }
         matchesAnyCheckpoints = true;
         result[checkpoint.toString()] = {
-          t: timestamp,
+          t: Math.round(timestamp - startTime),
           e: domElements
         };
       }
@@ -249,13 +249,14 @@ class Heatmap {
 export default async function calculateTTVCPercentiles({
   orderedEntries,
   viewport,
-  percentiles
+  percentiles,
+  startTime
 }) {
   const heatmap = new Heatmap({
     viewport,
     heatmapSize: 200
   });
   await heatmap.applyEntriesToHeatmap(orderedEntries);
-  const vcDetails = await heatmap.getVCPercentMetrics(percentiles);
+  const vcDetails = await heatmap.getVCPercentMetrics(percentiles, startTime);
   return vcDetails;
 }

package/dist/es2019/vc/vc-observer-new/metric-calculator/percentile-calc/rect-sweeping-line/index.js

@@ -4,7 +4,8 @@ import calculateUnionArea from './calc-union-area';
 export default async function calculateTTVCPercentiles({
   orderedEntries,
   viewport,
-  percentiles
+  percentiles,
+  startTime
 }) {
   const sortedPercentiles = [...percentiles].sort((a, b) => a - b);
   const viewportArea = viewport.width * viewport.height;
@@ -43,7 +44,7 @@ export default async function calculateTTVCPercentiles({
       }
       matchesAnyCheckpoints = true;
       checkpoints[checkpoint.toString()] = {
-        t: iEntry.time,
+        t: Math.round(iEntry.time - startTime),
         e: domElements
       };
     }

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

@@ -9,6 +9,9 @@ export default class WindowEventObserver {
     const unbindCallback = bind(window, {
       type,
       listener: event => {
+        if (!event.isTrusted) {
+          return;
+        }
         this.onEvent({
           time: event.timeStamp,
           type,
@@ -16,7 +19,8 @@ export default class WindowEventObserver {
         });
       },
       options: {
-        passive: true
+        passive: true,
+        once: true
       }
     });
     this.unbindFns.push(unbindCallback);