@atlaskit/react-ufo 3.3.2 → 3.4.0

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

@@ -19,22 +19,22 @@ function calculateTTVCPercentiles(_x) {
 }
 function _calculateTTVCPercentiles() {
   _calculateTTVCPercentiles = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(_ref) {
-    var viewport, orderedEntries, percentiles, canvas, elementMap, _iterator3, _step3, entry, rect, elementName, timePixelCounts, viewportTotalPixels;
+    var viewport, orderedEntries, percentiles, startTime, canvas, elementMap, _iterator2, _step2, entry, rect, elementName, timePixelCounts, canvasDimenstions, totalPixels;
     return _regenerator.default.wrap(function _callee$(_context) {
       while (1) switch (_context.prev = _context.next) {
         case 0:
-          viewport = _ref.viewport, orderedEntries = _ref.orderedEntries, percentiles = _ref.percentiles;
+          viewport = _ref.viewport, orderedEntries = _ref.orderedEntries, percentiles = _ref.percentiles, startTime = _ref.startTime;
           canvas = new _canvasPixel.ViewportCanvas(viewport, (0, _platformFeatureFlags.fg)('platform_ufo_canvas_heatmap_full_precision') ? 1 : 0.25);
           elementMap = new Map();
-          _iterator3 = _createForOfIteratorHelper(orderedEntries);
+          _iterator2 = _createForOfIteratorHelper(orderedEntries);
           _context.prev = 4;
-          _iterator3.s();
+          _iterator2.s();
         case 6:
-          if ((_step3 = _iterator3.n()).done) {
+          if ((_step2 = _iterator2.n()).done) {
             _context.next = 17;
             break;
           }
-          entry = _step3.value;
+          entry = _step2.value;
           if ('rect' in entry.data) {
             _context.next = 10;
             break;
@@ -57,19 +57,20 @@ function _calculateTTVCPercentiles() {
         case 19:
           _context.prev = 19;
           _context.t0 = _context["catch"](4);
-          _iterator3.e(_context.t0);
+          _iterator2.e(_context.t0);
         case 22:
           _context.prev = 22;
-          _iterator3.f();
+          _iterator2.f();
           return _context.finish(22);
         case 25:
           _context.next = 27;
           return canvas.getPixelCounts();
         case 27:
           timePixelCounts = _context.sent;
-          viewportTotalPixels = viewport.width * viewport.height;
-          return _context.abrupt("return", calculatePercentiles(timePixelCounts, elementMap, percentiles, viewportTotalPixels));
-        case 30:
+          canvasDimenstions = canvas.getScaledDimensions();
+          totalPixels = canvasDimenstions.width * canvasDimenstions.height;
+          return _context.abrupt("return", calculatePercentiles(timePixelCounts, elementMap, percentiles, totalPixels, startTime));
+        case 31:
         case "end":
           return _context.stop();
       }
@@ -77,7 +78,7 @@ function _calculateTTVCPercentiles() {
   }));
   return _calculateTTVCPercentiles.apply(this, arguments);
 }
-function calculatePercentiles(timePixelCounts, elementMap, unorderedPercentiles, totalPixels) {
+function calculatePercentiles(timePixelCounts, elementMap, unorderedPercentiles, totalPixels, startTime) {
   var results = {};
   var cumulativePixels = 0;
   var percentiles = unorderedPercentiles.sort(function (a, b) {
@@ -110,7 +111,7 @@ function calculatePercentiles(timePixelCounts, elementMap, unorderedPercentiles,
       var matchesAnyCheckpoints = false;
       while (percentileIndex < percentiles.length && percentCovered >= percentiles[percentileIndex]) {
         results["".concat(percentiles[percentileIndex])] = {
-          t: Number(time),
+          t: Math.round(Number(time - startTime)),
           e: Array.from(domElementsBuffer)
         };
         percentileIndex++;
@@ -123,29 +124,21 @@ function calculatePercentiles(timePixelCounts, elementMap, unorderedPercentiles,
         break;
       }
     }
-
-    // Fill in any missing percentiles
   } catch (err) {
     _iterator.e(err);
   } finally {
     _iterator.f();
   }
-  var _iterator2 = _createForOfIteratorHelper(percentiles),
-    _step2;
-  try {
-    for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
-      var percentile = _step2.value;
-      if (!(percentile in results)) {
-        results["".concat(percentile)] = {
-          t: 0,
-          e: []
-        };
-      }
+  var previousResult = {
+    t: 0,
+    e: []
+  };
+  for (var i = 0; i < percentiles.length; i++) {
+    var percentile = percentiles[i];
+    if (!(percentile in results)) {
+      results["".concat(percentile)] = previousResult;
     }
-  } catch (err) {
-    _iterator2.e(err);
-  } finally {
-    _iterator2.f();
+    previousResult = results["".concat(percentile)];
   }
   return results;
 }

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

@@ -243,7 +243,7 @@ var Heatmap = /*#__PURE__*/function () {
   }, {
     key: "getVCPercentMetrics",
     value: function () {
-      var _getVCPercentMetrics = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2(vcPercentCheckpoint) {
+      var _getVCPercentMetrics = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2(vcPercentCheckpoint, startTime) {
         var sortedCheckpoints, flattenHeatmap, totalCells, timestampMap, i, _cellHead$time, _timestampMap$get, cell, cellHead, timestamp, elementName, curr, sortedTimings, totalCellPainted, result, domElementsBuffer, _i, _timestamp, timestampInfo, cellCount, domElements, currVCRatio, currVCPercent, matchesAnyCheckpoints, checkpoint, _domElements;
         return _regenerator.default.wrap(function _callee2$(_context2) {
           while (1) switch (_context2.prev = _context2.next) {
@@ -331,7 +331,7 @@ var Heatmap = /*#__PURE__*/function () {
             case 41:
               matchesAnyCheckpoints = true;
               result[checkpoint.toString()] = {
-                t: _timestamp,
+                t: Math.round(_timestamp - startTime),
                 e: _domElements
               };
               _context2.next = 36;
@@ -358,23 +358,23 @@ var Heatmap = /*#__PURE__*/function () {
           }
         }, _callee2, this);
       }));
-      function getVCPercentMetrics(_x2) {
+      function getVCPercentMetrics(_x2, _x3) {
         return _getVCPercentMetrics.apply(this, arguments);
       }
       return getVCPercentMetrics;
     }()
   }]);
 }();
-function calculateTTVCPercentiles(_x3) {
+function calculateTTVCPercentiles(_x4) {
   return _calculateTTVCPercentiles.apply(this, arguments);
 }
 function _calculateTTVCPercentiles() {
   _calculateTTVCPercentiles = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee3(_ref2) {
-    var orderedEntries, viewport, percentiles, heatmap, vcDetails;
+    var orderedEntries, viewport, percentiles, startTime, heatmap, vcDetails;
     return _regenerator.default.wrap(function _callee3$(_context3) {
       while (1) switch (_context3.prev = _context3.next) {
         case 0:
-          orderedEntries = _ref2.orderedEntries, viewport = _ref2.viewport, percentiles = _ref2.percentiles;
+          orderedEntries = _ref2.orderedEntries, viewport = _ref2.viewport, percentiles = _ref2.percentiles, startTime = _ref2.startTime;
           heatmap = new Heatmap({
             viewport: viewport,
             heatmapSize: 200
@@ -383,7 +383,7 @@ function _calculateTTVCPercentiles() {
           return heatmap.applyEntriesToHeatmap(orderedEntries);
         case 4:
           _context3.next = 6;
-          return heatmap.getVCPercentMetrics(percentiles);
+          return heatmap.getVCPercentMetrics(percentiles, startTime);
         case 6:
           vcDetails = _context3.sent;
           return _context3.abrupt("return", vcDetails);

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

@@ -16,11 +16,11 @@ function calculateTTVCPercentiles(_x) {
 }
 function _calculateTTVCPercentiles() {
   _calculateTTVCPercentiles = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(_ref) {
-    var orderedEntries, viewport, percentiles, sortedPercentiles, viewportArea, checkpoints, activeRects, removeActiveRect, domElementsBuffer, i, iEntry, iEntryData, rect, elementName, exclusionArea, currentArea, currVCPercent, matchesAnyCheckpoints, _checkpoint, domElements;
+    var orderedEntries, viewport, percentiles, startTime, sortedPercentiles, viewportArea, checkpoints, activeRects, removeActiveRect, domElementsBuffer, i, iEntry, iEntryData, rect, elementName, exclusionArea, currentArea, currVCPercent, matchesAnyCheckpoints, _checkpoint, domElements;
     return _regenerator.default.wrap(function _callee$(_context) {
       while (1) switch (_context.prev = _context.next) {
         case 0:
-          orderedEntries = _ref.orderedEntries, viewport = _ref.viewport, percentiles = _ref.percentiles;
+          orderedEntries = _ref.orderedEntries, viewport = _ref.viewport, percentiles = _ref.percentiles, startTime = _ref.startTime;
           sortedPercentiles = (0, _toConsumableArray2.default)(percentiles).sort(function (a, b) {
             return a - b;
           });
@@ -76,7 +76,7 @@ function _calculateTTVCPercentiles() {
         case 25:
           matchesAnyCheckpoints = true;
           checkpoints[_checkpoint.toString()] = {
-            t: iEntry.time,
+            t: Math.round(iEntry.time - startTime),
             e: domElements
           };
           _context.next = 20;

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

@@ -22,6 +22,9 @@ var WindowEventObserver = exports.default = /*#__PURE__*/function () {
       var unbindCallback = (0, _bindEventListener.bind)(window, {
         type: type,
         listener: function listener(event) {
+          if (!event.isTrusted) {
+            return;
+          }
           _this.onEvent({
             time: event.timeStamp,
             type: type,
@@ -29,7 +32,8 @@ var WindowEventObserver = exports.default = /*#__PURE__*/function () {
           });
         },
         options: {
-          passive: true
+          passive: true,
+          once: true
         }
       });
       this.unbindFns.push(unbindCallback);

package/dist/es2019/assets/index.js

@@ -1,5 +1,5 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import { calculateTransferType, DISK_KEY, MEMORY_KEY, NETWORK_KEY, round } from './utils';
+import { calculateTransferType, checkIfTimingsAvailable, DISK_KEY, getTypeOfRequest, MEMORY_KEY, NETWORK_KEY, round } from './utils';
 export class CHRSummary {
   constructor() {
     _defineProperty(this, "bundles", {
@@ -16,9 +16,8 @@ export class CHRSummary {
     _defineProperty(this, "sizeTotal", 0);
   }
   add(asset) {
-    const size = 'size' in asset ? asset.size : undefined;
-    const encodedSize = 'encodedSize' in asset ? Number(asset.encodedSize) : 0;
-    const type = calculateTransferType(asset.type, asset.duration, size);
+    const encodedSize = asset.encodedSize || 0;
+    const type = calculateTransferType(asset.name, asset.initiatorType, asset.duration, asset.transferSize);
     if (type === null) {
       return;
     }
@@ -47,22 +46,36 @@ export class CHRReporter {
     _defineProperty(this, "all", new CHRSummary());
     _defineProperty(this, "allAtlassian", new CHRSummary());
     _defineProperty(this, "preloaded", new CHRSummary());
+    _defineProperty(this, "defaultAllowedTypes", ['js']);
   }
-  get(resourceTimings, assetsClassification) {
+  get(resourceTimings, assetsConfig, SSRDoneTime) {
     try {
-      Object.entries(resourceTimings).map(([label, entry]) => {
-        if (assetsClassification.all) {
+      if (resourceTimings === null) {
+        return null;
+      }
+      resourceTimings.forEach(entry => {
+        if (!checkIfTimingsAvailable(entry)) {
+          return;
+        }
+        if (entry.encodedSize === entry.decodedSize) {
+          // incorrectly reported size
+          return;
+        }
+        const type = getTypeOfRequest(entry);
+        if (!(assetsConfig.allowedTypes || this.defaultAllowedTypes).includes(type)) {
+          return;
+        }
+        if (assetsConfig.classification.all) {
           this.all.add(entry);
         }
-        if (assetsClassification.allAtlassian({
-          label,
+        if (assetsConfig.classification.allAtlassian({
           entry
         })) {
           this.allAtlassian.add(entry);
         }
-        if (assetsClassification.preloaded({
-          label,
-          entry
+        if (assetsConfig.classification.preloaded({
+          entry,
+          SSRDoneTime
         })) {
           this.preloaded.add(entry);
         }
@@ -70,11 +83,12 @@ export class CHRReporter {
       if (this.all.bundlesCount === 0) {
         return null;
       }
-      return {
+      const CHRData = {
         all: CHRSummary.makePayload(this.all),
         allAtlassian: CHRSummary.makePayload(this.allAtlassian),
         preloaded: CHRSummary.makePayload(this.preloaded)
       };
+      return CHRData;
     } catch (error) {
       return null;
     }

package/dist/es2019/assets/utils.js

@@ -1,10 +1,10 @@
 /* Borrowed from https://bitbucket.org/atlassian/atlassian-frontend/src/master/packages/performance/browser-metrics/src/plugins/timings/resource.ts */
-export const cacheableTypes = ['script', 'link'];
+export const cacheableTypes = ['script', 'link', 'other'];
 export const MEMORY_KEY = 'mem';
 export const DISK_KEY = 'disk';
 export const NETWORK_KEY = 'net';
-export const calculateTransferType = (type, duration, size) => {
-  if (!cacheableTypes.includes(type)) {
+export const calculateTransferType = (name, type, duration, size) => {
+  if (!cacheableTypes.includes(type) && !(type === 'other' && name.includes('.js'))) {
     return null;
   }
   if ((size === undefined || size === 0) && duration === 0) {
@@ -18,6 +18,50 @@ export const calculateTransferType = (type, duration, size) => {
   }
   return NETWORK_KEY;
 };
+export const getTypeOfRequest = ({
+  name,
+  initiatorType: type
+}) => {
+  let category = 'other';
+  const urlWithoutQuery = name.split('?')[0];
+  switch (type) {
+    case 'script':
+      category = 'js';
+      break;
+    case 'link':
+      if (urlWithoutQuery.endsWith('.css')) {
+        category = 'css';
+      }
+      if (urlWithoutQuery.endsWith('.js')) {
+        category = 'js';
+      }
+      break;
+    case 'img':
+      category = 'image';
+      break;
+    case 'font':
+      category = 'font';
+      break;
+    default:
+      if (urlWithoutQuery.endsWith('.js')) {
+        category = 'js';
+      } else if (urlWithoutQuery.endsWith('.css')) {
+        category = 'css';
+      } else if (urlWithoutQuery.match(/\.(woff|woff2|ttf|otf)$/)) {
+        category = 'font';
+      } else if (urlWithoutQuery.match(/\.(png|jpg|jpeg|gif|svg)$/)) {
+        category = 'image';
+      }
+      break;
+  }
+  return category;
+};
+export const checkIfTimingsAvailable = entry => {
+  if (entry.decodedSize === 0 && entry.encodedSize === 0 && entry.requestStart === 0 && entry.responseStart === 0) {
+    return false;
+  }
+  return true;
+};
 export const round = n => {
   if (isNaN(n)) {
     return 0;

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

@@ -13,6 +13,7 @@ import { getPageVisibilityState } from '../hidden-timing';
 import * as initialPageLoadExtraTiming from '../initial-page-load-extra-timing';
 import { interactionSpans as atlaskitInteractionSpans } from '../interaction-metrics';
 import * as resourceTiming from '../resource-timing';
+import { filterResourceTimings } from '../resource-timing/common/utils/resource-timing-buffer';
 import { roundEpsilon } from '../round-number';
 import * as ssr from '../ssr';
 import { buildSegmentTree, labelStackStartWith, optimizeLabelStack, sanitizeUfoName, stringifyLabelStackFully } from './common/utils';
@@ -234,20 +235,21 @@ function getSSRProperties(type) {
     'ssr:featureFlags': getSSRFeatureFlags(type)
   };
 }
-const getAssetsMetrics = (interaction, resourceTimings) => {
+const getAssetsMetrics = (interaction, SSRDoneTime) => {
   try {
     const config = getConfig();
     const {
       type
     } = interaction;
     const allowedTypes = ['page_load', 'transition'];
-    const assetsClassification = config === null || config === void 0 ? void 0 : config.assetsClassification;
-    if (!allowedTypes.includes(type) || !assetsClassification) {
+    const assetsConfig = config === null || config === void 0 ? void 0 : config.assetsConfig;
+    if (!allowedTypes.includes(type) || !assetsConfig) {
       // Skip if: type not allowed or assetsClassification isn't configured
       return {};
     }
     const reporter = new CHRReporter();
-    const assets = reporter.get(resourceTimings, assetsClassification);
+    const resourceTimings = filterResourceTimings(interaction.start, interaction.end);
+    const assets = reporter.get(resourceTimings, assetsConfig, SSRDoneTime);
     if (assets) {
       // Only add assets in case it exists
       return {
@@ -664,7 +666,7 @@ async function createInteractionMetricsPayload(interaction, interactionId, exper
     labelStack: optimizeLabelStack(interaction.labelStack, getReactUFOVersion(interaction.type))
   } : {};
   // Page Load
-  const getPageLoadInteractionMetrics = () => {
+  const getInitialPageLoadSSRMetrics = () => {
     var _config$ssr;
     if (!isPageLoad) {
       return {};
@@ -680,6 +682,8 @@ async function createInteractionMetricsPayload(interaction, interactionId, exper
       isUFOConfigSSRDoneAsFmp: interaction.metaData.__legacy__bm3ConfigSSRDoneAsFmp || !!(config !== null && config !== void 0 && (_config$ssr = config.ssr) !== null && _config$ssr !== void 0 && _config$ssr.getSSRDoneTime)
     };
   };
+  const pageLoadInteractionMetrics = getInitialPageLoadSSRMetrics();
+
   // Detailed payload. Page visibility = visible
   const getDetailedInteractionMetrics = resourceTimings => {
     if (experimental || window.__UFO_COMPACT_PAYLOAD__ || !isDetailedPayload) {
@@ -748,7 +752,7 @@ async function createInteractionMetricsPayload(interaction, interactionId, exper
         // root
         ...getBrowserMetadata(),
         ...getSSRProperties(type),
-        ...getAssetsMetrics(interaction, resourceTimings),
+        ...getAssetsMetrics(interaction, pageLoadInteractionMetrics === null || pageLoadInteractionMetrics === void 0 ? void 0 : pageLoadInteractionMetrics.SSRDoneTime),
         ...getPPSMetrics(interaction),
         ...getPaintMetrics(type),
         ...getNavigationMetrics(type),
@@ -790,7 +794,7 @@ async function createInteractionMetricsPayload(interaction, interactionId, exper
           customData: optimizeCustomData(interaction),
           reactProfilerTimings: optimizeReactProfilerTimings(interaction.reactProfilerTimings, start, getReactUFOVersion(interaction.type)),
           ...labelStack,
-          ...getPageLoadInteractionMetrics(),
+          ...pageLoadInteractionMetrics,
           ...getDetailedInteractionMetrics(resourceTimings),
           ...getPageLoadDetailedInteractionMetrics(),
           ...getBm3TrackerTimings(interaction),
@@ -817,7 +821,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');
@@ -831,5 +835,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/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();