@atlaskit/react-ufo 4.5.5 → 4.5.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (29) hide show
  1. package/CHANGELOG.md +14 -0
  2. package/dist/cjs/create-payload/utils/get-vc-metrics.js +11 -24
  3. package/dist/cjs/interaction-metrics/index.js +3 -1
  4. package/dist/cjs/vc/vc-observer-new/metric-calculator/abstract-base-vc-calculator.js +3 -3
  5. package/dist/cjs/vc/vc-observer-new/viewport-observer/index.js +4 -0
  6. package/dist/cjs/vc/vc-observer-new/viewport-observer/intersection-observer/index.js +0 -9
  7. package/dist/cjs/vc/vc-observer-new/viewport-observer/utils/check-display-content.js +0 -16
  8. package/dist/cjs/vc/vc-observer-new/viewport-observer/utils/track-display-content-occurrence.js +19 -0
  9. package/dist/es2019/create-payload/utils/get-vc-metrics.js +2 -8
  10. package/dist/es2019/interaction-metrics/index.js +3 -1
  11. package/dist/es2019/vc/vc-observer-new/metric-calculator/abstract-base-vc-calculator.js +3 -3
  12. package/dist/es2019/vc/vc-observer-new/viewport-observer/index.js +4 -0
  13. package/dist/es2019/vc/vc-observer-new/viewport-observer/intersection-observer/index.js +0 -9
  14. package/dist/es2019/vc/vc-observer-new/viewport-observer/utils/check-display-content.js +0 -13
  15. package/dist/es2019/vc/vc-observer-new/viewport-observer/utils/track-display-content-occurrence.js +10 -0
  16. package/dist/esm/create-payload/utils/get-vc-metrics.js +11 -24
  17. package/dist/esm/interaction-metrics/index.js +3 -1
  18. package/dist/esm/vc/vc-observer-new/metric-calculator/abstract-base-vc-calculator.js +3 -3
  19. package/dist/esm/vc/vc-observer-new/viewport-observer/index.js +4 -0
  20. package/dist/esm/vc/vc-observer-new/viewport-observer/intersection-observer/index.js +0 -9
  21. package/dist/esm/vc/vc-observer-new/viewport-observer/utils/check-display-content.js +0 -13
  22. package/dist/esm/vc/vc-observer-new/viewport-observer/utils/track-display-content-occurrence.js +10 -0
  23. package/dist/types/common/vc/types.d.ts +1 -1
  24. package/dist/types/vc/vc-observer-new/viewport-observer/utils/check-display-content.d.ts +0 -3
  25. package/dist/types/vc/vc-observer-new/viewport-observer/utils/track-display-content-occurrence.d.ts +3 -0
  26. package/dist/types-ts4.5/common/vc/types.d.ts +1 -1
  27. package/dist/types-ts4.5/vc/vc-observer-new/viewport-observer/utils/check-display-content.d.ts +0 -3
  28. package/dist/types-ts4.5/vc/vc-observer-new/viewport-observer/utils/track-display-content-occurrence.d.ts +3 -0
  29. package/package.json +5 -2
package/CHANGELOG.md CHANGED
@@ -1,5 +1,19 @@
1
1
  # @atlaskit/ufo-interaction-ignore
2
2
 
3
+ ## 4.5.7
4
+
5
+ ### Patch Changes
6
+
7
+ - [`93b3a250fa490`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/93b3a250fa490) -
8
+ Remove analysis code and add track for display contents occurrence
9
+
10
+ ## 4.5.6
11
+
12
+ ### Patch Changes
13
+
14
+ - [`ae5b58482107e`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/ae5b58482107e) -
15
+ Clean up fg React UFO
16
+
3
17
  ## 4.5.5
4
18
 
5
19
  ### Patch Changes
@@ -47,42 +47,29 @@ function _getVCMetrics() {
47
47
  }
48
48
  return _context.abrupt("return", {});
49
49
  case 4:
50
- if (!(0, _platformFeatureFlags.fg)('platform_ufo_enable_vc_press_interactions')) {
51
- _context.next = 9;
52
- break;
53
- }
54
50
  if (!(interaction.type !== 'page_load' && interaction.type !== 'transition' && interaction.type !== 'press')) {
55
- _context.next = 7;
56
- break;
57
- }
58
- return _context.abrupt("return", {});
59
- case 7:
60
- _context.next = 11;
61
- break;
62
- case 9:
63
- if (!(interaction.type !== 'page_load' && interaction.type !== 'transition')) {
64
- _context.next = 11;
51
+ _context.next = 6;
65
52
  break;
66
53
  }
67
54
  return _context.abrupt("return", {});
68
- case 11:
55
+ case 6:
69
56
  interactionStatus = (0, _getInteractionStatus.default)(interaction);
70
57
  pageVisibilityUpToTTAI = (0, _getPageVisibilityUpToTtai.default)(interaction);
71
58
  shouldReportVCMetrics = interactionStatus.originalInteractionStatus === 'SUCCEEDED' && pageVisibilityUpToTTAI === 'visible'; // Use per-interaction VC observer if available, otherwise fall back to global
72
59
  observer = interaction.vcObserver;
73
60
  if (observer) {
74
- _context.next = 17;
61
+ _context.next = 12;
75
62
  break;
76
63
  }
77
64
  return _context.abrupt("return", {});
78
- case 17:
65
+ case 12:
79
66
  if (!(!shouldReportVCMetrics && (0, _platformFeatureFlags.fg)('platform_ufo_no_vc_on_aborted'))) {
80
- _context.next = 20;
67
+ _context.next = 15;
81
68
  break;
82
69
  }
83
70
  observer.stop(interaction.ufoName);
84
71
  return _context.abrupt("return", {});
85
- case 20:
72
+ case 15:
86
73
  isSSREnabled = interaction.type === 'page_load' && ((config === null || config === void 0 ? void 0 : config.ssr) || (config === null || config === void 0 || (_config$vc$ssrWhiteli = config.vc.ssrWhitelist) === null || _config$vc$ssrWhiteli === void 0 ? void 0 : _config$vc$ssrWhiteli.includes(interaction.ufoName)));
87
74
  ssr = interaction.type === 'page_load' && isSSREnabled ? {
88
75
  ssr: (0, _getSsrDoneTimeValue.default)(config)
@@ -90,7 +77,7 @@ function _getVCMetrics() {
90
77
  _interactionMetrics.postInteractionLog.setVCObserverSSRConfig(ssr);
91
78
  tti = (_interaction$apdex = interaction.apdex) === null || _interaction$apdex === void 0 || (_interaction$apdex = _interaction$apdex[0]) === null || _interaction$apdex === void 0 ? void 0 : _interaction$apdex.stopTime;
92
79
  prefix = 'ufo';
93
- _context.next = 27;
80
+ _context.next = 22;
94
81
  return observer.getVCResult(_objectSpread(_objectSpread({
95
82
  start: interaction.start,
96
83
  stop: interaction.end,
@@ -105,7 +92,7 @@ function _getVCMetrics() {
105
92
  }, ssr), {}, {
106
93
  include3p: include3p
107
94
  }));
108
- case 27:
95
+ case 22:
109
96
  result = _context.sent;
110
97
  observer.stop(interaction.ufoName);
111
98
  if (!include3p) {
@@ -118,15 +105,15 @@ function _getVCMetrics() {
118
105
  return revision === mostRecentVCRevision;
119
106
  });
120
107
  if (!(!shouldReportVCMetrics || !(mostRecentVCRevisionPayload !== null && mostRecentVCRevisionPayload !== void 0 && mostRecentVCRevisionPayload.clean))) {
121
- _context.next = 34;
108
+ _context.next = 29;
122
109
  break;
123
110
  }
124
111
  return _context.abrupt("return", result);
125
- case 34:
112
+ case 29:
126
113
  return _context.abrupt("return", _objectSpread(_objectSpread({}, result), {}, {
127
114
  'metric:vc90': mostRecentVCRevisionPayload['metric:vc90']
128
115
  }));
129
- case 35:
116
+ case 30:
130
117
  case "end":
131
118
  return _context.stop();
132
119
  }
@@ -60,6 +60,7 @@ var _experienceTraceIdContext = require("../experience-trace-id-context");
60
60
  var _featureFlagsAccessed = require("../feature-flags-accessed");
61
61
  var _interactionIdContext = require("../interaction-id-context");
62
62
  var _vc = require("../vc");
63
+ var _trackDisplayContentOccurrence = require("../vc/vc-observer-new/viewport-observer/utils/track-display-content-occurrence");
63
64
  var _constants = require("./common/constants");
64
65
  var _interactionExtraMetrics = _interopRequireDefault(require("./interaction-extra-metrics"));
65
66
  var _postInteractionLog = _interopRequireDefault(require("./post-interaction-log"));
@@ -1017,6 +1018,7 @@ function addOnCancelCallback(id, cancelCallback) {
1017
1018
  }
1018
1019
  function addNewInteraction(interactionId, ufoName, type, startTime, rate, labelStack, routeName) {
1019
1020
  var trace = arguments.length > 7 && arguments[7] !== undefined ? arguments[7] : null;
1021
+ (0, _trackDisplayContentOccurrence.resetCssIssueOccurrence)();
1020
1022
  postInteractionLog.reset();
1021
1023
  var vcObserver;
1022
1024
  var previousTime = startTime;
@@ -1155,7 +1157,7 @@ function addNewInteraction(interactionId, ufoName, type, startTime, rate, labelS
1155
1157
  }, interactionId);
1156
1158
  }
1157
1159
  }
1158
- if (type === 'press' && (0, _platformFeatureFlags.fg)('platform_ufo_enable_vc_press_interactions')) {
1160
+ if (type === 'press') {
1159
1161
  // Use per-interaction VC observer if available, otherwise fall back to global
1160
1162
  var _observer = vcObserver;
1161
1163
  if (_observer) {
@@ -13,7 +13,7 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
13
13
  var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
14
14
  var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
15
15
  var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
16
- var _checkDisplayContent = require("../viewport-observer/utils/check-display-content");
16
+ var _trackDisplayContentOccurrence = require("../viewport-observer/utils/track-display-content-occurrence");
17
17
  var _percentileCalc = require("./percentile-calc");
18
18
  var _getViewportHeight = _interopRequireDefault(require("./utils/get-viewport-height"));
19
19
  var _getViewportWidth = _interopRequireDefault(require("./utils/get-viewport-width"));
@@ -368,8 +368,8 @@ var AbstractVCCalculatorBase = exports.default = /*#__PURE__*/function () {
368
368
  vcDetails: vcDetails !== null && vcDetails !== void 0 ? vcDetails : undefined
369
369
  };
370
370
  result.ratios = this.calculateRatios(filteredEntries);
371
- if ((0, _platformFeatureFlags.fg)('platform_ufo_display_content_resolution_ttvc_v3')) {
372
- result.childrenIgnoredCount = (0, _checkDisplayContent.getInvalidChildrenCount)();
371
+ if ((0, _platformFeatureFlags.fg)('platform_ufo_display_content_track_occurrence')) {
372
+ result.displayContentsOccurrence = _trackDisplayContentOccurrence.cssIssueOccurrence;
373
373
  }
374
374
  return _context2.abrupt("return", result);
375
375
  case 14:
@@ -21,6 +21,7 @@ var _performanceObserver = _interopRequireDefault(require("./performance-observe
21
21
  var _checkDisplayContent = _interopRequireDefault(require("./utils/check-display-content"));
22
22
  var _checkWithinComponent2 = _interopRequireWildcard(require("./utils/check-within-component"));
23
23
  var _isInVcIgnoreIfNoLayoutShiftMarker = _interopRequireDefault(require("./utils/is-in-vc-ignore-if-no-layout-shift-marker"));
24
+ var _trackDisplayContentOccurrence = _interopRequireDefault(require("./utils/track-display-content-occurrence"));
24
25
  function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
25
26
  function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t.return || t.return(); } finally { if (u) throw o; } } }; }
26
27
  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; } }
@@ -269,6 +270,9 @@ var ViewportObserver = exports.default = /*#__PURE__*/function () {
269
270
  _iterator2.f();
270
271
  }
271
272
  } else {
273
+ if ((0, _platformFeatureFlags.fg)('platform_ufo_display_content_track_occurrence')) {
274
+ (0, _trackDisplayContentOccurrence.default)(addedNode);
275
+ }
272
276
  (_this$intersectionObs0 = _this.intersectionObserver) === null || _this$intersectionObs0 === void 0 || _this$intersectionObs0.watchAndTag(addedNode, createElementMutationsWatcher(removedNodeRects));
273
277
  }
274
278
  case 55:
@@ -4,8 +4,6 @@ Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
6
  exports.createIntersectionObserver = createIntersectionObserver;
7
- var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
8
- var _checkDisplayContent = require("../utils/check-display-content");
9
7
  function isValidEntry(entry) {
10
8
  return entry.isIntersecting && entry.intersectionRect.width > 0 && entry.intersectionRect.height > 0;
11
9
  }
@@ -21,13 +19,6 @@ function createIntersectionObserver(_ref) {
21
19
  var startTime = performance.now();
22
20
  entries.forEach(function (entry) {
23
21
  if (!(entry.target instanceof HTMLElement) || !isValidEntry(entry)) {
24
- // TODO: Remove this logic when analysis is complete
25
- if ((0, _platformFeatureFlags.fg)('platform_ufo_display_content_resolution_ttvc_v3')) {
26
- if (entry.target instanceof HTMLElement && !isValidEntry(entry) && _checkDisplayContent.checkedChildrenCache.get(entry.target) === false) {
27
- (0, _checkDisplayContent.incrementCheckedInvalidChildrenCount)();
28
- _checkDisplayContent.checkedChildrenCache.set(entry.target, true);
29
- }
30
- }
31
22
  return;
32
23
  }
33
24
  var mutationTag = null;
@@ -3,22 +3,10 @@
3
3
  Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
- exports.checkedChildrenCache = void 0;
7
6
  exports.default = checkCssProperty;
8
- exports.getInvalidChildrenCount = getInvalidChildrenCount;
9
- exports.incrementCheckedInvalidChildrenCount = incrementCheckedInvalidChildrenCount;
10
7
  function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t.return || t.return(); } finally { if (u) throw o; } } }; }
11
8
  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; } }
12
9
  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; }
13
- // TODO: Remove this cache when analysis is complete - it is used to track whether direct children elements will be ignored by the observer
14
- var checkedChildrenCache = exports.checkedChildrenCache = new WeakMap();
15
- var checkedInvalidChildrenCount = 0;
16
- function incrementCheckedInvalidChildrenCount() {
17
- checkedInvalidChildrenCount++;
18
- }
19
- function getInvalidChildrenCount() {
20
- return checkedInvalidChildrenCount;
21
- }
22
10
  function checkCssProperty(element) {
23
11
  var computedStyle = window.getComputedStyle(element);
24
12
  if (computedStyle.display === 'contents') {
@@ -30,10 +18,6 @@ function checkCssProperty(element) {
30
18
  for (_iterator.s(); !(_step = _iterator.n()).done;) {
31
19
  var child = _step.value;
32
20
  if (child instanceof HTMLElement) {
33
- if (!checkedChildrenCache.has(child)) {
34
- // TODO: Remove this cache when analysis is complete
35
- checkedChildrenCache.set(child, false);
36
- }
37
21
  result.push(child);
38
22
  }
39
23
  }
@@ -0,0 +1,19 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.cssIssueOccurrence = void 0;
7
+ exports.default = trackDisplayContentsOccurrence;
8
+ exports.resetCssIssueOccurrence = resetCssIssueOccurrence;
9
+ var _cssIssueOccurrence;
10
+ var cssIssueOccurrence = exports.cssIssueOccurrence = 0;
11
+ function trackDisplayContentsOccurrence(element) {
12
+ var computedStyle = window.getComputedStyle(element);
13
+ if (computedStyle.display === 'contents') {
14
+ _cssIssueOccurrence = cssIssueOccurrence++, exports.cssIssueOccurrence = cssIssueOccurrence, _cssIssueOccurrence;
15
+ }
16
+ }
17
+ function resetCssIssueOccurrence() {
18
+ exports.cssIssueOccurrence = cssIssueOccurrence = 0;
19
+ }
@@ -10,14 +10,8 @@ async function getVCMetrics(interaction, include3p = false) {
10
10
  if (!(config !== null && config !== void 0 && (_config$vc = config.vc) !== null && _config$vc !== void 0 && _config$vc.enabled)) {
11
11
  return {};
12
12
  }
13
- if (fg('platform_ufo_enable_vc_press_interactions')) {
14
- if (interaction.type !== 'page_load' && interaction.type !== 'transition' && interaction.type !== 'press') {
15
- return {};
16
- }
17
- } else {
18
- if (interaction.type !== 'page_load' && interaction.type !== 'transition') {
19
- return {};
20
- }
13
+ if (interaction.type !== 'page_load' && interaction.type !== 'transition' && interaction.type !== 'press') {
14
+ return {};
21
15
  }
22
16
  const interactionStatus = getInteractionStatus(interaction);
23
17
  const pageVisibilityUpToTTAI = getPageVisibilityUpToTTAI(interaction);
@@ -9,6 +9,7 @@ import { clearActiveTrace } from '../experience-trace-id-context';
9
9
  import { allFeatureFlagsAccessed, currentFeatureFlagsAccessed } from '../feature-flags-accessed';
10
10
  import { getInteractionId } from '../interaction-id-context';
11
11
  import { newVCObserver } from '../vc';
12
+ import { resetCssIssueOccurrence } from '../vc/vc-observer-new/viewport-observer/utils/track-display-content-occurrence';
12
13
  import { interactions } from './common/constants';
13
14
  import InteractionExtraMetrics from './interaction-extra-metrics';
14
15
  import PostInteractionLog from './post-interaction-log';
@@ -895,6 +896,7 @@ export function addOnCancelCallback(id, cancelCallback) {
895
896
  interaction === null || interaction === void 0 ? void 0 : interaction.cancelCallbacks.push(cancelCallback);
896
897
  }
897
898
  export function addNewInteraction(interactionId, ufoName, type, startTime, rate, labelStack, routeName, trace = null) {
899
+ resetCssIssueOccurrence();
898
900
  postInteractionLog.reset();
899
901
  let vcObserver;
900
902
  let previousTime = startTime;
@@ -1033,7 +1035,7 @@ export function addNewInteraction(interactionId, ufoName, type, startTime, rate,
1033
1035
  }, interactionId);
1034
1036
  }
1035
1037
  }
1036
- if (type === 'press' && fg('platform_ufo_enable_vc_press_interactions')) {
1038
+ if (type === 'press') {
1037
1039
  // Use per-interaction VC observer if available, otherwise fall back to global
1038
1040
  const observer = vcObserver;
1039
1041
  if (observer) {
@@ -1,5 +1,5 @@
1
1
  import { fg } from '@atlaskit/platform-feature-flags';
2
- import { getInvalidChildrenCount } from '../viewport-observer/utils/check-display-content';
2
+ import { cssIssueOccurrence } from '../viewport-observer/utils/track-display-content-occurrence';
3
3
  import { calculateTTVCPercentilesWithDebugInfo } from './percentile-calc';
4
4
  import getViewportHeight from './utils/get-viewport-height';
5
5
  import getViewportWidth from './utils/get-viewport-width';
@@ -261,8 +261,8 @@ export default class AbstractVCCalculatorBase {
261
261
  vcDetails: vcDetails !== null && vcDetails !== void 0 ? vcDetails : undefined
262
262
  };
263
263
  result.ratios = this.calculateRatios(filteredEntries);
264
- if (fg('platform_ufo_display_content_resolution_ttvc_v3')) {
265
- result.childrenIgnoredCount = getInvalidChildrenCount();
264
+ if (fg('platform_ufo_display_content_track_occurrence')) {
265
+ result.displayContentsOccurrence = cssIssueOccurrence;
266
266
  }
267
267
  return result;
268
268
  }
@@ -9,6 +9,7 @@ import createPerformanceObserver from './performance-observer';
9
9
  import checkCssProperty from './utils/check-display-content';
10
10
  import checkWithinComponent, { cleanupCaches } from './utils/check-within-component';
11
11
  import isInVCIgnoreIfNoLayoutShiftMarker from './utils/is-in-vc-ignore-if-no-layout-shift-marker';
12
+ import trackDisplayContentsOccurrence from './utils/track-display-content-occurrence';
12
13
  function isElementVisible(element) {
13
14
  if (!(element instanceof HTMLElement)) {
14
15
  return true;
@@ -203,6 +204,9 @@ export default class ViewportObserver {
203
204
  }
204
205
  } else {
205
206
  var _this$intersectionObs0;
207
+ if (fg('platform_ufo_display_content_track_occurrence')) {
208
+ trackDisplayContentsOccurrence(addedNode);
209
+ }
206
210
  (_this$intersectionObs0 = this.intersectionObserver) === null || _this$intersectionObs0 === void 0 ? void 0 : _this$intersectionObs0.watchAndTag(addedNode, createElementMutationsWatcher(removedNodeRects));
207
211
  }
208
212
  }
@@ -1,5 +1,3 @@
1
- import { fg } from '@atlaskit/platform-feature-flags';
2
- import { checkedChildrenCache, incrementCheckedInvalidChildrenCount } from '../utils/check-display-content';
3
1
  function isValidEntry(entry) {
4
2
  return entry.isIntersecting && entry.intersectionRect.width > 0 && entry.intersectionRect.height > 0;
5
3
  }
@@ -17,13 +15,6 @@ export function createIntersectionObserver({
17
15
  entries.forEach(entry => {
18
16
  var _mutationTag;
19
17
  if (!(entry.target instanceof HTMLElement) || !isValidEntry(entry)) {
20
- // TODO: Remove this logic when analysis is complete
21
- if (fg('platform_ufo_display_content_resolution_ttvc_v3')) {
22
- if (entry.target instanceof HTMLElement && !isValidEntry(entry) && checkedChildrenCache.get(entry.target) === false) {
23
- incrementCheckedInvalidChildrenCount();
24
- checkedChildrenCache.set(entry.target, true);
25
- }
26
- }
27
18
  return;
28
19
  }
29
20
  let mutationTag = null;
@@ -1,12 +1,3 @@
1
- // TODO: Remove this cache when analysis is complete - it is used to track whether direct children elements will be ignored by the observer
2
- export const checkedChildrenCache = new WeakMap();
3
- let checkedInvalidChildrenCount = 0;
4
- export function incrementCheckedInvalidChildrenCount() {
5
- checkedInvalidChildrenCount++;
6
- }
7
- export function getInvalidChildrenCount() {
8
- return checkedInvalidChildrenCount;
9
- }
10
1
  export default function checkCssProperty(element) {
11
2
  const computedStyle = window.getComputedStyle(element);
12
3
  if (computedStyle.display === 'contents') {
@@ -14,10 +5,6 @@ export default function checkCssProperty(element) {
14
5
  const result = [];
15
6
  for (const child of element.children) {
16
7
  if (child instanceof HTMLElement) {
17
- if (!checkedChildrenCache.has(child)) {
18
- // TODO: Remove this cache when analysis is complete
19
- checkedChildrenCache.set(child, false);
20
- }
21
8
  result.push(child);
22
9
  }
23
10
  }
@@ -0,0 +1,10 @@
1
+ export let cssIssueOccurrence = 0;
2
+ export default function trackDisplayContentsOccurrence(element) {
3
+ const computedStyle = window.getComputedStyle(element);
4
+ if (computedStyle.display === 'contents') {
5
+ cssIssueOccurrence++;
6
+ }
7
+ }
8
+ export function resetCssIssueOccurrence() {
9
+ cssIssueOccurrence = 0;
10
+ }
@@ -40,42 +40,29 @@ function _getVCMetrics() {
40
40
  }
41
41
  return _context.abrupt("return", {});
42
42
  case 4:
43
- if (!fg('platform_ufo_enable_vc_press_interactions')) {
44
- _context.next = 9;
45
- break;
46
- }
47
43
  if (!(interaction.type !== 'page_load' && interaction.type !== 'transition' && interaction.type !== 'press')) {
48
- _context.next = 7;
49
- break;
50
- }
51
- return _context.abrupt("return", {});
52
- case 7:
53
- _context.next = 11;
54
- break;
55
- case 9:
56
- if (!(interaction.type !== 'page_load' && interaction.type !== 'transition')) {
57
- _context.next = 11;
44
+ _context.next = 6;
58
45
  break;
59
46
  }
60
47
  return _context.abrupt("return", {});
61
- case 11:
48
+ case 6:
62
49
  interactionStatus = getInteractionStatus(interaction);
63
50
  pageVisibilityUpToTTAI = getPageVisibilityUpToTTAI(interaction);
64
51
  shouldReportVCMetrics = interactionStatus.originalInteractionStatus === 'SUCCEEDED' && pageVisibilityUpToTTAI === 'visible'; // Use per-interaction VC observer if available, otherwise fall back to global
65
52
  observer = interaction.vcObserver;
66
53
  if (observer) {
67
- _context.next = 17;
54
+ _context.next = 12;
68
55
  break;
69
56
  }
70
57
  return _context.abrupt("return", {});
71
- case 17:
58
+ case 12:
72
59
  if (!(!shouldReportVCMetrics && fg('platform_ufo_no_vc_on_aborted'))) {
73
- _context.next = 20;
60
+ _context.next = 15;
74
61
  break;
75
62
  }
76
63
  observer.stop(interaction.ufoName);
77
64
  return _context.abrupt("return", {});
78
- case 20:
65
+ case 15:
79
66
  isSSREnabled = interaction.type === 'page_load' && ((config === null || config === void 0 ? void 0 : config.ssr) || (config === null || config === void 0 || (_config$vc$ssrWhiteli = config.vc.ssrWhitelist) === null || _config$vc$ssrWhiteli === void 0 ? void 0 : _config$vc$ssrWhiteli.includes(interaction.ufoName)));
80
67
  ssr = interaction.type === 'page_load' && isSSREnabled ? {
81
68
  ssr: getSSRDoneTimeValue(config)
@@ -83,7 +70,7 @@ function _getVCMetrics() {
83
70
  postInteractionLog.setVCObserverSSRConfig(ssr);
84
71
  tti = (_interaction$apdex = interaction.apdex) === null || _interaction$apdex === void 0 || (_interaction$apdex = _interaction$apdex[0]) === null || _interaction$apdex === void 0 ? void 0 : _interaction$apdex.stopTime;
85
72
  prefix = 'ufo';
86
- _context.next = 27;
73
+ _context.next = 22;
87
74
  return observer.getVCResult(_objectSpread(_objectSpread({
88
75
  start: interaction.start,
89
76
  stop: interaction.end,
@@ -98,7 +85,7 @@ function _getVCMetrics() {
98
85
  }, ssr), {}, {
99
86
  include3p: include3p
100
87
  }));
101
- case 27:
88
+ case 22:
102
89
  result = _context.sent;
103
90
  observer.stop(interaction.ufoName);
104
91
  if (!include3p) {
@@ -111,15 +98,15 @@ function _getVCMetrics() {
111
98
  return revision === mostRecentVCRevision;
112
99
  });
113
100
  if (!(!shouldReportVCMetrics || !(mostRecentVCRevisionPayload !== null && mostRecentVCRevisionPayload !== void 0 && mostRecentVCRevisionPayload.clean))) {
114
- _context.next = 34;
101
+ _context.next = 29;
115
102
  break;
116
103
  }
117
104
  return _context.abrupt("return", result);
118
- case 34:
105
+ case 29:
119
106
  return _context.abrupt("return", _objectSpread(_objectSpread({}, result), {}, {
120
107
  'metric:vc90': mostRecentVCRevisionPayload['metric:vc90']
121
108
  }));
122
- case 35:
109
+ case 30:
123
110
  case "end":
124
111
  return _context.stop();
125
112
  }
@@ -19,6 +19,7 @@ import { clearActiveTrace } from '../experience-trace-id-context';
19
19
  import { allFeatureFlagsAccessed, currentFeatureFlagsAccessed } from '../feature-flags-accessed';
20
20
  import { getInteractionId } from '../interaction-id-context';
21
21
  import { newVCObserver } from '../vc';
22
+ import { resetCssIssueOccurrence } from '../vc/vc-observer-new/viewport-observer/utils/track-display-content-occurrence';
22
23
  import { interactions } from './common/constants';
23
24
  import InteractionExtraMetrics from './interaction-extra-metrics';
24
25
  import PostInteractionLog from './post-interaction-log';
@@ -971,6 +972,7 @@ export function addOnCancelCallback(id, cancelCallback) {
971
972
  }
972
973
  export function addNewInteraction(interactionId, ufoName, type, startTime, rate, labelStack, routeName) {
973
974
  var trace = arguments.length > 7 && arguments[7] !== undefined ? arguments[7] : null;
975
+ resetCssIssueOccurrence();
974
976
  postInteractionLog.reset();
975
977
  var vcObserver;
976
978
  var previousTime = startTime;
@@ -1109,7 +1111,7 @@ export function addNewInteraction(interactionId, ufoName, type, startTime, rate,
1109
1111
  }, interactionId);
1110
1112
  }
1111
1113
  }
1112
- if (type === 'press' && fg('platform_ufo_enable_vc_press_interactions')) {
1114
+ if (type === 'press') {
1113
1115
  // Use per-interaction VC observer if available, otherwise fall back to global
1114
1116
  var _observer = vcObserver;
1115
1117
  if (_observer) {
@@ -11,7 +11,7 @@ function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol
11
11
  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; } }
12
12
  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; }
13
13
  import { fg } from '@atlaskit/platform-feature-flags';
14
- import { getInvalidChildrenCount } from '../viewport-observer/utils/check-display-content';
14
+ import { cssIssueOccurrence } from '../viewport-observer/utils/track-display-content-occurrence';
15
15
  import { calculateTTVCPercentilesWithDebugInfo } from './percentile-calc';
16
16
  import getViewportHeight from './utils/get-viewport-height';
17
17
  import getViewportWidth from './utils/get-viewport-width';
@@ -362,8 +362,8 @@ var AbstractVCCalculatorBase = /*#__PURE__*/function () {
362
362
  vcDetails: vcDetails !== null && vcDetails !== void 0 ? vcDetails : undefined
363
363
  };
364
364
  result.ratios = this.calculateRatios(filteredEntries);
365
- if (fg('platform_ufo_display_content_resolution_ttvc_v3')) {
366
- result.childrenIgnoredCount = getInvalidChildrenCount();
365
+ if (fg('platform_ufo_display_content_track_occurrence')) {
366
+ result.displayContentsOccurrence = cssIssueOccurrence;
367
367
  }
368
368
  return _context2.abrupt("return", result);
369
369
  case 14:
@@ -16,6 +16,7 @@ import createPerformanceObserver from './performance-observer';
16
16
  import checkCssProperty from './utils/check-display-content';
17
17
  import checkWithinComponent, { cleanupCaches } from './utils/check-within-component';
18
18
  import isInVCIgnoreIfNoLayoutShiftMarker from './utils/is-in-vc-ignore-if-no-layout-shift-marker';
19
+ import trackDisplayContentsOccurrence from './utils/track-display-content-occurrence';
19
20
  function isElementVisible(element) {
20
21
  if (!(element instanceof HTMLElement)) {
21
22
  return true;
@@ -260,6 +261,9 @@ var ViewportObserver = /*#__PURE__*/function () {
260
261
  _iterator2.f();
261
262
  }
262
263
  } else {
264
+ if (fg('platform_ufo_display_content_track_occurrence')) {
265
+ trackDisplayContentsOccurrence(addedNode);
266
+ }
263
267
  (_this$intersectionObs0 = _this.intersectionObserver) === null || _this$intersectionObs0 === void 0 || _this$intersectionObs0.watchAndTag(addedNode, createElementMutationsWatcher(removedNodeRects));
264
268
  }
265
269
  case 55:
@@ -1,5 +1,3 @@
1
- import { fg } from '@atlaskit/platform-feature-flags';
2
- import { checkedChildrenCache, incrementCheckedInvalidChildrenCount } from '../utils/check-display-content';
3
1
  function isValidEntry(entry) {
4
2
  return entry.isIntersecting && entry.intersectionRect.width > 0 && entry.intersectionRect.height > 0;
5
3
  }
@@ -15,13 +13,6 @@ export function createIntersectionObserver(_ref) {
15
13
  var startTime = performance.now();
16
14
  entries.forEach(function (entry) {
17
15
  if (!(entry.target instanceof HTMLElement) || !isValidEntry(entry)) {
18
- // TODO: Remove this logic when analysis is complete
19
- if (fg('platform_ufo_display_content_resolution_ttvc_v3')) {
20
- if (entry.target instanceof HTMLElement && !isValidEntry(entry) && checkedChildrenCache.get(entry.target) === false) {
21
- incrementCheckedInvalidChildrenCount();
22
- checkedChildrenCache.set(entry.target, true);
23
- }
24
- }
25
16
  return;
26
17
  }
27
18
  var mutationTag = null;
@@ -1,15 +1,6 @@
1
1
  function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t.return || t.return(); } finally { if (u) throw o; } } }; }
2
2
  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; } }
3
3
  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; }
4
- // TODO: Remove this cache when analysis is complete - it is used to track whether direct children elements will be ignored by the observer
5
- export var checkedChildrenCache = new WeakMap();
6
- var checkedInvalidChildrenCount = 0;
7
- export function incrementCheckedInvalidChildrenCount() {
8
- checkedInvalidChildrenCount++;
9
- }
10
- export function getInvalidChildrenCount() {
11
- return checkedInvalidChildrenCount;
12
- }
13
4
  export default function checkCssProperty(element) {
14
5
  var computedStyle = window.getComputedStyle(element);
15
6
  if (computedStyle.display === 'contents') {
@@ -21,10 +12,6 @@ export default function checkCssProperty(element) {
21
12
  for (_iterator.s(); !(_step = _iterator.n()).done;) {
22
13
  var child = _step.value;
23
14
  if (child instanceof HTMLElement) {
24
- if (!checkedChildrenCache.has(child)) {
25
- // TODO: Remove this cache when analysis is complete
26
- checkedChildrenCache.set(child, false);
27
- }
28
15
  result.push(child);
29
16
  }
30
17
  }
@@ -0,0 +1,10 @@
1
+ export var cssIssueOccurrence = 0;
2
+ export default function trackDisplayContentsOccurrence(element) {
3
+ var computedStyle = window.getComputedStyle(element);
4
+ if (computedStyle.display === 'contents') {
5
+ cssIssueOccurrence++;
6
+ }
7
+ }
8
+ export function resetCssIssueOccurrence() {
9
+ cssIssueOccurrence = 0;
10
+ }
@@ -116,7 +116,7 @@ export type RevisionPayloadEntry = {
116
116
  ratios?: VCRatioType;
117
117
  abortReason?: VCAbortReason | null;
118
118
  abortTimestamp?: number;
119
- childrenIgnoredCount?: number;
119
+ displayContentsOccurrence?: number;
120
120
  };
121
121
  export type RevisionPayload = RevisionPayloadEntry[];
122
122
  export {};
@@ -1,4 +1 @@
1
- export declare const checkedChildrenCache: WeakMap<HTMLElement, boolean>;
2
- export declare function incrementCheckedInvalidChildrenCount(): void;
3
- export declare function getInvalidChildrenCount(): number;
4
1
  export default function checkCssProperty(element: HTMLElement): Element[];
@@ -0,0 +1,3 @@
1
+ export declare let cssIssueOccurrence: number;
2
+ export default function trackDisplayContentsOccurrence(element: HTMLElement): void;
3
+ export declare function resetCssIssueOccurrence(): void;
@@ -116,7 +116,7 @@ export type RevisionPayloadEntry = {
116
116
  ratios?: VCRatioType;
117
117
  abortReason?: VCAbortReason | null;
118
118
  abortTimestamp?: number;
119
- childrenIgnoredCount?: number;
119
+ displayContentsOccurrence?: number;
120
120
  };
121
121
  export type RevisionPayload = RevisionPayloadEntry[];
122
122
  export {};
@@ -1,4 +1 @@
1
- export declare const checkedChildrenCache: WeakMap<HTMLElement, boolean>;
2
- export declare function incrementCheckedInvalidChildrenCount(): void;
3
- export declare function getInvalidChildrenCount(): number;
4
1
  export default function checkCssProperty(element: HTMLElement): Element[];
@@ -0,0 +1,3 @@
1
+ export declare let cssIssueOccurrence: number;
2
+ export default function trackDisplayContentsOccurrence(element: HTMLElement): void;
3
+ export declare function resetCssIssueOccurrence(): void;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/react-ufo",
3
- "version": "4.5.5",
3
+ "version": "4.5.7",
4
4
  "description": "Parts of React UFO that are publicly available",
5
5
  "author": "Atlassian Pty Ltd",
6
6
  "license": "Apache-2.0",
@@ -123,7 +123,7 @@
123
123
  "platform_ufo_exclude_3p_elements_from_ttvc": {
124
124
  "type": "boolean"
125
125
  },
126
- "platform_ufo_enable_vc_press_interactions": {
126
+ "platform_ufo_add_type_for_3p_segments": {
127
127
  "type": "boolean"
128
128
  },
129
129
  "platform_ufo_segment_critical_metrics": {
@@ -149,6 +149,9 @@
149
149
  },
150
150
  "platform_ufo_exclude_3p_extensions_from_ttvc": {
151
151
  "type": "boolean"
152
+ },
153
+ "platform_ufo_display_content_track_occurrence": {
154
+ "type": "boolean"
152
155
  }
153
156
  }
154
157
  }