@atlaskit/insm 1.3.0 → 2.0.1
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.
- package/CHANGELOG.md +17 -0
- package/compass.yml +3 -3
- package/dist/cjs/insm.js +1 -2
- package/dist/es2019/insm.js +1 -2
- package/dist/esm/insm.js +1 -2
- package/dist/types/insm.d.ts +1 -2
- package/package.json +2 -2
- package/dist/cjs/period-measurers/afps.js +0 -193
- package/dist/es2019/period-measurers/afps.js +0 -153
- package/dist/esm/period-measurers/afps.js +0 -186
- package/dist/types/period-measurers/afps.d.ts +0 -57
- package/insm.docs.tsx +0 -38
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,22 @@
|
|
|
1
1
|
# @atlaskit/insm
|
|
2
2
|
|
|
3
|
+
## 2.0.1
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- Updated dependencies
|
|
8
|
+
|
|
9
|
+
## 2.0.0
|
|
10
|
+
|
|
11
|
+
### Major Changes
|
|
12
|
+
|
|
13
|
+
- [`90ba4a2921d81`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/90ba4a2921d81) -
|
|
14
|
+
Remove AFPS metric
|
|
15
|
+
|
|
16
|
+
### Patch Changes
|
|
17
|
+
|
|
18
|
+
- Updated dependencies
|
|
19
|
+
|
|
3
20
|
## 1.3.0
|
|
4
21
|
|
|
5
22
|
### Minor Changes
|
package/compass.yml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
configVersion: 1
|
|
2
2
|
id: ari:cloud:compass:a436116f-02ce-4520-8fbb-7301462a1674:component/c5751cc6-3513-4070-9deb-af31e86aed34/b282c974-1afd-404c-a4c2-cc50030636d9
|
|
3
3
|
name: '@atlaskit/insm'
|
|
4
|
-
ownerId: ari:cloud:identity::team/
|
|
4
|
+
ownerId: ari:cloud:identity::team/cf6a670b-5252-4c68-a769-9207de366beb # Editor Developers
|
|
5
5
|
labels:
|
|
6
6
|
- platform-code
|
|
7
7
|
- platform-afm
|
|
@@ -16,14 +16,14 @@ links:
|
|
|
16
16
|
url: https://bitbucket.org/atlassian/atlassian-frontend-monorepo/src/master
|
|
17
17
|
- name: Slack Channel
|
|
18
18
|
type: CHAT_CHANNEL
|
|
19
|
-
url: https://atlassian.enterprise.slack.com/archives/
|
|
19
|
+
url: https://atlassian.enterprise.slack.com/archives/CFG3PSQ9E # #help-editor
|
|
20
20
|
- name: Insm
|
|
21
21
|
type: REPOSITORY
|
|
22
22
|
url: https://bitbucket.org/atlassian/atlassian-frontend-monorepo/src/master/platform/packages/editor/insm
|
|
23
23
|
customFields:
|
|
24
24
|
- name: Department
|
|
25
25
|
type: text
|
|
26
|
-
value:
|
|
26
|
+
value: Editor Developers
|
|
27
27
|
- name: Trusted Reviewer Teams
|
|
28
28
|
type: text
|
|
29
29
|
value: ari:cloud:identity::team/cf6a670b-5252-4c68-a769-9207de366beb
|
package/dist/cjs/insm.js
CHANGED
|
@@ -11,7 +11,6 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
|
|
|
11
11
|
var _domElementCount = require("./dom-element-count");
|
|
12
12
|
var _editorDomRegistry = require("./editor-dom-registry");
|
|
13
13
|
var _insmSession = require("./insm-session");
|
|
14
|
-
var _afps = require("./period-measurers/afps");
|
|
15
14
|
var _inp = require("./inp-measurers/inp");
|
|
16
15
|
var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
|
|
17
16
|
var INSM = exports.INSM = /*#__PURE__*/function () {
|
|
@@ -29,7 +28,7 @@ var INSM = exports.INSM = /*#__PURE__*/function () {
|
|
|
29
28
|
* outlive, or be mounted after, the session it is measured by.
|
|
30
29
|
*/
|
|
31
30
|
(0, _defineProperty2.default)(this, "editorDomRegistry", new _editorDomRegistry.EditorDomRegistry());
|
|
32
|
-
this.periodMeasurers = [
|
|
31
|
+
this.periodMeasurers = [new _inp.INPTracker()];
|
|
33
32
|
this.options = options;
|
|
34
33
|
|
|
35
34
|
// If this does throw -- we do want an unhandledRejection rejection to be passed to the window
|
package/dist/es2019/insm.js
CHANGED
|
@@ -2,7 +2,6 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
|
|
2
2
|
import { countDomElements } from './dom-element-count';
|
|
3
3
|
import { EditorDomRegistry } from './editor-dom-registry';
|
|
4
4
|
import { INSMSession } from './insm-session';
|
|
5
|
-
import { AnimationFPSIM } from './period-measurers/afps';
|
|
6
5
|
import { INPTracker } from './inp-measurers/inp';
|
|
7
6
|
import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
|
|
8
7
|
export class INSM {
|
|
@@ -18,7 +17,7 @@ export class INSM {
|
|
|
18
17
|
* outlive, or be mounted after, the session it is measured by.
|
|
19
18
|
*/
|
|
20
19
|
_defineProperty(this, "editorDomRegistry", new EditorDomRegistry());
|
|
21
|
-
this.periodMeasurers = [
|
|
20
|
+
this.periodMeasurers = [new INPTracker()];
|
|
22
21
|
this.options = options;
|
|
23
22
|
|
|
24
23
|
// If this does throw -- we do want an unhandledRejection rejection to be passed to the window
|
package/dist/esm/insm.js
CHANGED
|
@@ -4,7 +4,6 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
|
|
4
4
|
import { countDomElements } from './dom-element-count';
|
|
5
5
|
import { EditorDomRegistry } from './editor-dom-registry';
|
|
6
6
|
import { INSMSession } from './insm-session';
|
|
7
|
-
import { AnimationFPSIM } from './period-measurers/afps';
|
|
8
7
|
import { INPTracker } from './inp-measurers/inp';
|
|
9
8
|
import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
|
|
10
9
|
export var INSM = /*#__PURE__*/function () {
|
|
@@ -22,7 +21,7 @@ export var INSM = /*#__PURE__*/function () {
|
|
|
22
21
|
* outlive, or be mounted after, the session it is measured by.
|
|
23
22
|
*/
|
|
24
23
|
_defineProperty(this, "editorDomRegistry", new EditorDomRegistry());
|
|
25
|
-
this.periodMeasurers = [
|
|
24
|
+
this.periodMeasurers = [new INPTracker()];
|
|
26
25
|
this.options = options;
|
|
27
26
|
|
|
28
27
|
// If this does throw -- we do want an unhandledRejection rejection to be passed to the window
|
package/dist/types/insm.d.ts
CHANGED
|
@@ -1,13 +1,12 @@
|
|
|
1
1
|
import type { AnalyticsWebClient } from '@atlaskit/analytics-listeners';
|
|
2
2
|
import { INSMSession } from './insm-session';
|
|
3
3
|
import type { ExperienceProperties, INSMOptions } from './types';
|
|
4
|
-
import { AnimationFPSIM } from './period-measurers/afps';
|
|
5
4
|
import { INPTracker } from './inp-measurers/inp';
|
|
6
5
|
export declare class INSM {
|
|
7
6
|
analyticsWebClient?: AnalyticsWebClient;
|
|
8
7
|
runningSession?: INSMSession;
|
|
9
8
|
options: INSMOptions;
|
|
10
|
-
periodMeasurers: [
|
|
9
|
+
periodMeasurers: [INPTracker];
|
|
11
10
|
/**
|
|
12
11
|
* Heavy tasks are tracked at the insm layer as heavy tasks
|
|
13
12
|
* are expected at times to be unrelated to the current
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/insm",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "2.0.1",
|
|
4
4
|
"description": "INSM tooling measures user-perceived interactivity of a page",
|
|
5
5
|
"author": "Atlassian Pty Ltd",
|
|
6
6
|
"license": "Apache-2.0",
|
|
@@ -19,7 +19,7 @@
|
|
|
19
19
|
"dependencies": {
|
|
20
20
|
"@atlaskit/analytics-listeners": "^11.1.0",
|
|
21
21
|
"@atlaskit/platform-feature-experiments": "^0.3.0",
|
|
22
|
-
"@atlaskit/tmp-editor-statsig": "^
|
|
22
|
+
"@atlaskit/tmp-editor-statsig": "^148.0.0",
|
|
23
23
|
"@babel/runtime": "^7.0.0",
|
|
24
24
|
"bowser-ultralight": "^1.0.6"
|
|
25
25
|
},
|
|
@@ -1,193 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
-
Object.defineProperty(exports, "__esModule", {
|
|
5
|
-
value: true
|
|
6
|
-
});
|
|
7
|
-
exports.AnimationFPSIM = void 0;
|
|
8
|
-
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
|
|
9
|
-
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
|
|
10
|
-
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
11
|
-
var AnimationFPSIM = exports.AnimationFPSIM = /*#__PURE__*/function () {
|
|
12
|
-
function AnimationFPSIM() {
|
|
13
|
-
(0, _classCallCheck2.default)(this, AnimationFPSIM);
|
|
14
|
-
/**
|
|
15
|
-
* AFPS stands for Animation Frames Per Second
|
|
16
|
-
*/
|
|
17
|
-
(0, _defineProperty2.default)(this, "name", 'afps');
|
|
18
|
-
(0, _defineProperty2.default)(this, "monitor", new AnimationFPSMonitor());
|
|
19
|
-
}
|
|
20
|
-
return (0, _createClass2.default)(AnimationFPSIM, [{
|
|
21
|
-
key: "start",
|
|
22
|
-
value: function start(paused) {
|
|
23
|
-
var result = this.monitor.startNewWindow(paused);
|
|
24
|
-
return result;
|
|
25
|
-
}
|
|
26
|
-
}, {
|
|
27
|
-
key: "end",
|
|
28
|
-
value: function end() {
|
|
29
|
-
var result = this.monitor.end();
|
|
30
|
-
return result;
|
|
31
|
-
}
|
|
32
|
-
}, {
|
|
33
|
-
key: "pause",
|
|
34
|
-
value: function pause() {
|
|
35
|
-
this.monitor.pause();
|
|
36
|
-
}
|
|
37
|
-
}, {
|
|
38
|
-
key: "resume",
|
|
39
|
-
value: function resume() {
|
|
40
|
-
this.monitor.resume();
|
|
41
|
-
}
|
|
42
|
-
}]);
|
|
43
|
-
}();
|
|
44
|
-
var AnimationFPSMonitor = /*#__PURE__*/function () {
|
|
45
|
-
function AnimationFPSMonitor() {
|
|
46
|
-
(0, _classCallCheck2.default)(this, AnimationFPSMonitor);
|
|
47
|
-
(0, _defineProperty2.default)(this, "paused", false);
|
|
48
|
-
(0, _defineProperty2.default)(this, "currentState", {
|
|
49
|
-
numerator: 0,
|
|
50
|
-
denominator: 0,
|
|
51
|
-
max: 0,
|
|
52
|
-
average: 0,
|
|
53
|
-
min: 0
|
|
54
|
-
});
|
|
55
|
-
// Current measurement window
|
|
56
|
-
(0, _defineProperty2.default)(this, "windowFrameCount", 0);
|
|
57
|
-
(0, _defineProperty2.default)(this, "windowTotalTime", 0);
|
|
58
|
-
(0, _defineProperty2.default)(this, "currentFrameStart", 0);
|
|
59
|
-
}
|
|
60
|
-
return (0, _createClass2.default)(AnimationFPSMonitor, [{
|
|
61
|
-
key: "measureWindowFPS",
|
|
62
|
-
value: function measureWindowFPS() {
|
|
63
|
-
// Calculate FPS for this window
|
|
64
|
-
// Note: windowFrameCount and windowTotalTime is reset after each window measurement
|
|
65
|
-
var windowSeconds = this.windowTotalTime / 1000;
|
|
66
|
-
// frames / seconds
|
|
67
|
-
var windowFPS = this.windowFrameCount / windowSeconds;
|
|
68
|
-
|
|
69
|
-
// Update overall tracking
|
|
70
|
-
this.currentState.numerator += this.windowFrameCount;
|
|
71
|
-
// The denominator is seconds not ms
|
|
72
|
-
this.currentState.denominator += windowSeconds;
|
|
73
|
-
|
|
74
|
-
// Calculate overall average FPS: (total frames / total time measured in seconds
|
|
75
|
-
this.currentState.average = this.currentState.numerator / this.currentState.denominator;
|
|
76
|
-
if (this.currentState.max === 0 || windowFPS > this.currentState.max) {
|
|
77
|
-
this.currentState.max = windowFPS;
|
|
78
|
-
}
|
|
79
|
-
if (this.currentState.min === 0 || windowFPS < this.currentState.min) {
|
|
80
|
-
this.currentState.min = windowFPS;
|
|
81
|
-
}
|
|
82
|
-
}
|
|
83
|
-
|
|
84
|
-
/**
|
|
85
|
-
* If there is running tracking - it will be reset
|
|
86
|
-
*/
|
|
87
|
-
}, {
|
|
88
|
-
key: "startWindowTracking",
|
|
89
|
-
value: function startWindowTracking() {
|
|
90
|
-
var _this = this;
|
|
91
|
-
// Clear any previous tracking state
|
|
92
|
-
this.resetOverallTracking();
|
|
93
|
-
var _measureFrame = function measureFrame() {
|
|
94
|
-
_this.currentFrameStart = global.performance.now();
|
|
95
|
-
_this.animationFrame = requestAnimationFrame(function () {
|
|
96
|
-
// While measurement is paused -- we don't count the animation frame towards the monitored
|
|
97
|
-
// period.
|
|
98
|
-
if (!_this.paused) {
|
|
99
|
-
var frameDuration = performance.now() - _this.currentFrameStart;
|
|
100
|
-
|
|
101
|
-
// Add frame to current window
|
|
102
|
-
_this.windowFrameCount++;
|
|
103
|
-
_this.windowTotalTime += frameDuration;
|
|
104
|
-
|
|
105
|
-
// Check if window is >= 1 second (1000ms)
|
|
106
|
-
// When the page is running smoothly it's expected this will not be hit frequently
|
|
107
|
-
if (_this.windowTotalTime >= 1000) {
|
|
108
|
-
_this.measureWindowFPS();
|
|
109
|
-
// Reset window for next measurement
|
|
110
|
-
_this.resetWindow();
|
|
111
|
-
}
|
|
112
|
-
}
|
|
113
|
-
_measureFrame();
|
|
114
|
-
});
|
|
115
|
-
};
|
|
116
|
-
_measureFrame();
|
|
117
|
-
}
|
|
118
|
-
}, {
|
|
119
|
-
key: "startNewWindow",
|
|
120
|
-
value: function startNewWindow(paused) {
|
|
121
|
-
var lastWindowResult = {
|
|
122
|
-
numerator: this.currentState.numerator,
|
|
123
|
-
denominator: this.currentState.denominator,
|
|
124
|
-
max: this.currentState.max,
|
|
125
|
-
min: this.currentState.min,
|
|
126
|
-
average: this.currentState.average
|
|
127
|
-
};
|
|
128
|
-
this.paused = paused;
|
|
129
|
-
this.startWindowTracking();
|
|
130
|
-
return lastWindowResult;
|
|
131
|
-
}
|
|
132
|
-
}, {
|
|
133
|
-
key: "resetWindow",
|
|
134
|
-
value: function resetWindow() {
|
|
135
|
-
this.windowFrameCount = 0;
|
|
136
|
-
this.windowTotalTime = 0;
|
|
137
|
-
// Note this.currentFrameStart is over ridden
|
|
138
|
-
// as part of tracking - so does not need to be
|
|
139
|
-
// reset.
|
|
140
|
-
}
|
|
141
|
-
}, {
|
|
142
|
-
key: "endWindowTracking",
|
|
143
|
-
value: function endWindowTracking() {
|
|
144
|
-
if (this.animationFrame) {
|
|
145
|
-
cancelAnimationFrame(this.animationFrame);
|
|
146
|
-
}
|
|
147
|
-
}
|
|
148
|
-
}, {
|
|
149
|
-
key: "resetOverallTracking",
|
|
150
|
-
value: function resetOverallTracking() {
|
|
151
|
-
this.resetWindow();
|
|
152
|
-
this.endWindowTracking();
|
|
153
|
-
this.currentState = {
|
|
154
|
-
numerator: 0,
|
|
155
|
-
denominator: 0,
|
|
156
|
-
max: 0,
|
|
157
|
-
min: 0,
|
|
158
|
-
average: 0
|
|
159
|
-
};
|
|
160
|
-
}
|
|
161
|
-
}, {
|
|
162
|
-
key: "end",
|
|
163
|
-
value: function end() {
|
|
164
|
-
try {
|
|
165
|
-
this.measureWindowFPS();
|
|
166
|
-
return this.currentState;
|
|
167
|
-
} finally {
|
|
168
|
-
this.resetOverallTracking();
|
|
169
|
-
}
|
|
170
|
-
}
|
|
171
|
-
}, {
|
|
172
|
-
key: "pause",
|
|
173
|
-
value: function pause() {
|
|
174
|
-
// Note - we leave the tracking animationFrame monitoring running, and on resume
|
|
175
|
-
// simply set the currentFrameStart and paused to true
|
|
176
|
-
// This works because the tracking builds windows of tracked time rather than
|
|
177
|
-
// basing itself off a window start time and time elapsed time since then.
|
|
178
|
-
this.paused = true;
|
|
179
|
-
}
|
|
180
|
-
}, {
|
|
181
|
-
key: "resume",
|
|
182
|
-
value: function resume() {
|
|
183
|
-
// Note - We don't need to handle the gap in measurement - as the raf logic builds/increments a window time
|
|
184
|
-
// based on the currentFrameStart (and any previous measurements which can only happen while the tracking
|
|
185
|
-
// is not paused).
|
|
186
|
-
this.currentFrameStart = performance.now();
|
|
187
|
-
this.paused = false;
|
|
188
|
-
if (!this.animationFrame) {
|
|
189
|
-
this.startWindowTracking();
|
|
190
|
-
}
|
|
191
|
-
}
|
|
192
|
-
}]);
|
|
193
|
-
}();
|
|
@@ -1,153 +0,0 @@
|
|
|
1
|
-
import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
|
2
|
-
export class AnimationFPSIM {
|
|
3
|
-
constructor() {
|
|
4
|
-
/**
|
|
5
|
-
* AFPS stands for Animation Frames Per Second
|
|
6
|
-
*/
|
|
7
|
-
_defineProperty(this, "name", 'afps');
|
|
8
|
-
_defineProperty(this, "monitor", new AnimationFPSMonitor());
|
|
9
|
-
}
|
|
10
|
-
start(paused) {
|
|
11
|
-
const result = this.monitor.startNewWindow(paused);
|
|
12
|
-
return result;
|
|
13
|
-
}
|
|
14
|
-
end() {
|
|
15
|
-
const result = this.monitor.end();
|
|
16
|
-
return result;
|
|
17
|
-
}
|
|
18
|
-
pause() {
|
|
19
|
-
this.monitor.pause();
|
|
20
|
-
}
|
|
21
|
-
resume() {
|
|
22
|
-
this.monitor.resume();
|
|
23
|
-
}
|
|
24
|
-
}
|
|
25
|
-
class AnimationFPSMonitor {
|
|
26
|
-
constructor() {
|
|
27
|
-
_defineProperty(this, "paused", false);
|
|
28
|
-
_defineProperty(this, "currentState", {
|
|
29
|
-
numerator: 0,
|
|
30
|
-
denominator: 0,
|
|
31
|
-
max: 0,
|
|
32
|
-
average: 0,
|
|
33
|
-
min: 0
|
|
34
|
-
});
|
|
35
|
-
// Current measurement window
|
|
36
|
-
_defineProperty(this, "windowFrameCount", 0);
|
|
37
|
-
_defineProperty(this, "windowTotalTime", 0);
|
|
38
|
-
_defineProperty(this, "currentFrameStart", 0);
|
|
39
|
-
}
|
|
40
|
-
measureWindowFPS() {
|
|
41
|
-
// Calculate FPS for this window
|
|
42
|
-
// Note: windowFrameCount and windowTotalTime is reset after each window measurement
|
|
43
|
-
const windowSeconds = this.windowTotalTime / 1000;
|
|
44
|
-
// frames / seconds
|
|
45
|
-
const windowFPS = this.windowFrameCount / windowSeconds;
|
|
46
|
-
|
|
47
|
-
// Update overall tracking
|
|
48
|
-
this.currentState.numerator += this.windowFrameCount;
|
|
49
|
-
// The denominator is seconds not ms
|
|
50
|
-
this.currentState.denominator += windowSeconds;
|
|
51
|
-
|
|
52
|
-
// Calculate overall average FPS: (total frames / total time measured in seconds
|
|
53
|
-
this.currentState.average = this.currentState.numerator / this.currentState.denominator;
|
|
54
|
-
if (this.currentState.max === 0 || windowFPS > this.currentState.max) {
|
|
55
|
-
this.currentState.max = windowFPS;
|
|
56
|
-
}
|
|
57
|
-
if (this.currentState.min === 0 || windowFPS < this.currentState.min) {
|
|
58
|
-
this.currentState.min = windowFPS;
|
|
59
|
-
}
|
|
60
|
-
}
|
|
61
|
-
|
|
62
|
-
/**
|
|
63
|
-
* If there is running tracking - it will be reset
|
|
64
|
-
*/
|
|
65
|
-
startWindowTracking() {
|
|
66
|
-
// Clear any previous tracking state
|
|
67
|
-
this.resetOverallTracking();
|
|
68
|
-
const measureFrame = () => {
|
|
69
|
-
this.currentFrameStart = global.performance.now();
|
|
70
|
-
this.animationFrame = requestAnimationFrame(() => {
|
|
71
|
-
// While measurement is paused -- we don't count the animation frame towards the monitored
|
|
72
|
-
// period.
|
|
73
|
-
if (!this.paused) {
|
|
74
|
-
const frameDuration = performance.now() - this.currentFrameStart;
|
|
75
|
-
|
|
76
|
-
// Add frame to current window
|
|
77
|
-
this.windowFrameCount++;
|
|
78
|
-
this.windowTotalTime += frameDuration;
|
|
79
|
-
|
|
80
|
-
// Check if window is >= 1 second (1000ms)
|
|
81
|
-
// When the page is running smoothly it's expected this will not be hit frequently
|
|
82
|
-
if (this.windowTotalTime >= 1000) {
|
|
83
|
-
this.measureWindowFPS();
|
|
84
|
-
// Reset window for next measurement
|
|
85
|
-
this.resetWindow();
|
|
86
|
-
}
|
|
87
|
-
}
|
|
88
|
-
measureFrame();
|
|
89
|
-
});
|
|
90
|
-
};
|
|
91
|
-
measureFrame();
|
|
92
|
-
}
|
|
93
|
-
startNewWindow(paused) {
|
|
94
|
-
const lastWindowResult = {
|
|
95
|
-
numerator: this.currentState.numerator,
|
|
96
|
-
denominator: this.currentState.denominator,
|
|
97
|
-
max: this.currentState.max,
|
|
98
|
-
min: this.currentState.min,
|
|
99
|
-
average: this.currentState.average
|
|
100
|
-
};
|
|
101
|
-
this.paused = paused;
|
|
102
|
-
this.startWindowTracking();
|
|
103
|
-
return lastWindowResult;
|
|
104
|
-
}
|
|
105
|
-
resetWindow() {
|
|
106
|
-
this.windowFrameCount = 0;
|
|
107
|
-
this.windowTotalTime = 0;
|
|
108
|
-
// Note this.currentFrameStart is over ridden
|
|
109
|
-
// as part of tracking - so does not need to be
|
|
110
|
-
// reset.
|
|
111
|
-
}
|
|
112
|
-
endWindowTracking() {
|
|
113
|
-
if (this.animationFrame) {
|
|
114
|
-
cancelAnimationFrame(this.animationFrame);
|
|
115
|
-
}
|
|
116
|
-
}
|
|
117
|
-
resetOverallTracking() {
|
|
118
|
-
this.resetWindow();
|
|
119
|
-
this.endWindowTracking();
|
|
120
|
-
this.currentState = {
|
|
121
|
-
numerator: 0,
|
|
122
|
-
denominator: 0,
|
|
123
|
-
max: 0,
|
|
124
|
-
min: 0,
|
|
125
|
-
average: 0
|
|
126
|
-
};
|
|
127
|
-
}
|
|
128
|
-
end() {
|
|
129
|
-
try {
|
|
130
|
-
this.measureWindowFPS();
|
|
131
|
-
return this.currentState;
|
|
132
|
-
} finally {
|
|
133
|
-
this.resetOverallTracking();
|
|
134
|
-
}
|
|
135
|
-
}
|
|
136
|
-
pause() {
|
|
137
|
-
// Note - we leave the tracking animationFrame monitoring running, and on resume
|
|
138
|
-
// simply set the currentFrameStart and paused to true
|
|
139
|
-
// This works because the tracking builds windows of tracked time rather than
|
|
140
|
-
// basing itself off a window start time and time elapsed time since then.
|
|
141
|
-
this.paused = true;
|
|
142
|
-
}
|
|
143
|
-
resume() {
|
|
144
|
-
// Note - We don't need to handle the gap in measurement - as the raf logic builds/increments a window time
|
|
145
|
-
// based on the currentFrameStart (and any previous measurements which can only happen while the tracking
|
|
146
|
-
// is not paused).
|
|
147
|
-
this.currentFrameStart = performance.now();
|
|
148
|
-
this.paused = false;
|
|
149
|
-
if (!this.animationFrame) {
|
|
150
|
-
this.startWindowTracking();
|
|
151
|
-
}
|
|
152
|
-
}
|
|
153
|
-
}
|
|
@@ -1,186 +0,0 @@
|
|
|
1
|
-
import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
|
|
2
|
-
import _createClass from "@babel/runtime/helpers/createClass";
|
|
3
|
-
import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
|
4
|
-
export var AnimationFPSIM = /*#__PURE__*/function () {
|
|
5
|
-
function AnimationFPSIM() {
|
|
6
|
-
_classCallCheck(this, AnimationFPSIM);
|
|
7
|
-
/**
|
|
8
|
-
* AFPS stands for Animation Frames Per Second
|
|
9
|
-
*/
|
|
10
|
-
_defineProperty(this, "name", 'afps');
|
|
11
|
-
_defineProperty(this, "monitor", new AnimationFPSMonitor());
|
|
12
|
-
}
|
|
13
|
-
return _createClass(AnimationFPSIM, [{
|
|
14
|
-
key: "start",
|
|
15
|
-
value: function start(paused) {
|
|
16
|
-
var result = this.monitor.startNewWindow(paused);
|
|
17
|
-
return result;
|
|
18
|
-
}
|
|
19
|
-
}, {
|
|
20
|
-
key: "end",
|
|
21
|
-
value: function end() {
|
|
22
|
-
var result = this.monitor.end();
|
|
23
|
-
return result;
|
|
24
|
-
}
|
|
25
|
-
}, {
|
|
26
|
-
key: "pause",
|
|
27
|
-
value: function pause() {
|
|
28
|
-
this.monitor.pause();
|
|
29
|
-
}
|
|
30
|
-
}, {
|
|
31
|
-
key: "resume",
|
|
32
|
-
value: function resume() {
|
|
33
|
-
this.monitor.resume();
|
|
34
|
-
}
|
|
35
|
-
}]);
|
|
36
|
-
}();
|
|
37
|
-
var AnimationFPSMonitor = /*#__PURE__*/function () {
|
|
38
|
-
function AnimationFPSMonitor() {
|
|
39
|
-
_classCallCheck(this, AnimationFPSMonitor);
|
|
40
|
-
_defineProperty(this, "paused", false);
|
|
41
|
-
_defineProperty(this, "currentState", {
|
|
42
|
-
numerator: 0,
|
|
43
|
-
denominator: 0,
|
|
44
|
-
max: 0,
|
|
45
|
-
average: 0,
|
|
46
|
-
min: 0
|
|
47
|
-
});
|
|
48
|
-
// Current measurement window
|
|
49
|
-
_defineProperty(this, "windowFrameCount", 0);
|
|
50
|
-
_defineProperty(this, "windowTotalTime", 0);
|
|
51
|
-
_defineProperty(this, "currentFrameStart", 0);
|
|
52
|
-
}
|
|
53
|
-
return _createClass(AnimationFPSMonitor, [{
|
|
54
|
-
key: "measureWindowFPS",
|
|
55
|
-
value: function measureWindowFPS() {
|
|
56
|
-
// Calculate FPS for this window
|
|
57
|
-
// Note: windowFrameCount and windowTotalTime is reset after each window measurement
|
|
58
|
-
var windowSeconds = this.windowTotalTime / 1000;
|
|
59
|
-
// frames / seconds
|
|
60
|
-
var windowFPS = this.windowFrameCount / windowSeconds;
|
|
61
|
-
|
|
62
|
-
// Update overall tracking
|
|
63
|
-
this.currentState.numerator += this.windowFrameCount;
|
|
64
|
-
// The denominator is seconds not ms
|
|
65
|
-
this.currentState.denominator += windowSeconds;
|
|
66
|
-
|
|
67
|
-
// Calculate overall average FPS: (total frames / total time measured in seconds
|
|
68
|
-
this.currentState.average = this.currentState.numerator / this.currentState.denominator;
|
|
69
|
-
if (this.currentState.max === 0 || windowFPS > this.currentState.max) {
|
|
70
|
-
this.currentState.max = windowFPS;
|
|
71
|
-
}
|
|
72
|
-
if (this.currentState.min === 0 || windowFPS < this.currentState.min) {
|
|
73
|
-
this.currentState.min = windowFPS;
|
|
74
|
-
}
|
|
75
|
-
}
|
|
76
|
-
|
|
77
|
-
/**
|
|
78
|
-
* If there is running tracking - it will be reset
|
|
79
|
-
*/
|
|
80
|
-
}, {
|
|
81
|
-
key: "startWindowTracking",
|
|
82
|
-
value: function startWindowTracking() {
|
|
83
|
-
var _this = this;
|
|
84
|
-
// Clear any previous tracking state
|
|
85
|
-
this.resetOverallTracking();
|
|
86
|
-
var _measureFrame = function measureFrame() {
|
|
87
|
-
_this.currentFrameStart = global.performance.now();
|
|
88
|
-
_this.animationFrame = requestAnimationFrame(function () {
|
|
89
|
-
// While measurement is paused -- we don't count the animation frame towards the monitored
|
|
90
|
-
// period.
|
|
91
|
-
if (!_this.paused) {
|
|
92
|
-
var frameDuration = performance.now() - _this.currentFrameStart;
|
|
93
|
-
|
|
94
|
-
// Add frame to current window
|
|
95
|
-
_this.windowFrameCount++;
|
|
96
|
-
_this.windowTotalTime += frameDuration;
|
|
97
|
-
|
|
98
|
-
// Check if window is >= 1 second (1000ms)
|
|
99
|
-
// When the page is running smoothly it's expected this will not be hit frequently
|
|
100
|
-
if (_this.windowTotalTime >= 1000) {
|
|
101
|
-
_this.measureWindowFPS();
|
|
102
|
-
// Reset window for next measurement
|
|
103
|
-
_this.resetWindow();
|
|
104
|
-
}
|
|
105
|
-
}
|
|
106
|
-
_measureFrame();
|
|
107
|
-
});
|
|
108
|
-
};
|
|
109
|
-
_measureFrame();
|
|
110
|
-
}
|
|
111
|
-
}, {
|
|
112
|
-
key: "startNewWindow",
|
|
113
|
-
value: function startNewWindow(paused) {
|
|
114
|
-
var lastWindowResult = {
|
|
115
|
-
numerator: this.currentState.numerator,
|
|
116
|
-
denominator: this.currentState.denominator,
|
|
117
|
-
max: this.currentState.max,
|
|
118
|
-
min: this.currentState.min,
|
|
119
|
-
average: this.currentState.average
|
|
120
|
-
};
|
|
121
|
-
this.paused = paused;
|
|
122
|
-
this.startWindowTracking();
|
|
123
|
-
return lastWindowResult;
|
|
124
|
-
}
|
|
125
|
-
}, {
|
|
126
|
-
key: "resetWindow",
|
|
127
|
-
value: function resetWindow() {
|
|
128
|
-
this.windowFrameCount = 0;
|
|
129
|
-
this.windowTotalTime = 0;
|
|
130
|
-
// Note this.currentFrameStart is over ridden
|
|
131
|
-
// as part of tracking - so does not need to be
|
|
132
|
-
// reset.
|
|
133
|
-
}
|
|
134
|
-
}, {
|
|
135
|
-
key: "endWindowTracking",
|
|
136
|
-
value: function endWindowTracking() {
|
|
137
|
-
if (this.animationFrame) {
|
|
138
|
-
cancelAnimationFrame(this.animationFrame);
|
|
139
|
-
}
|
|
140
|
-
}
|
|
141
|
-
}, {
|
|
142
|
-
key: "resetOverallTracking",
|
|
143
|
-
value: function resetOverallTracking() {
|
|
144
|
-
this.resetWindow();
|
|
145
|
-
this.endWindowTracking();
|
|
146
|
-
this.currentState = {
|
|
147
|
-
numerator: 0,
|
|
148
|
-
denominator: 0,
|
|
149
|
-
max: 0,
|
|
150
|
-
min: 0,
|
|
151
|
-
average: 0
|
|
152
|
-
};
|
|
153
|
-
}
|
|
154
|
-
}, {
|
|
155
|
-
key: "end",
|
|
156
|
-
value: function end() {
|
|
157
|
-
try {
|
|
158
|
-
this.measureWindowFPS();
|
|
159
|
-
return this.currentState;
|
|
160
|
-
} finally {
|
|
161
|
-
this.resetOverallTracking();
|
|
162
|
-
}
|
|
163
|
-
}
|
|
164
|
-
}, {
|
|
165
|
-
key: "pause",
|
|
166
|
-
value: function pause() {
|
|
167
|
-
// Note - we leave the tracking animationFrame monitoring running, and on resume
|
|
168
|
-
// simply set the currentFrameStart and paused to true
|
|
169
|
-
// This works because the tracking builds windows of tracked time rather than
|
|
170
|
-
// basing itself off a window start time and time elapsed time since then.
|
|
171
|
-
this.paused = true;
|
|
172
|
-
}
|
|
173
|
-
}, {
|
|
174
|
-
key: "resume",
|
|
175
|
-
value: function resume() {
|
|
176
|
-
// Note - We don't need to handle the gap in measurement - as the raf logic builds/increments a window time
|
|
177
|
-
// based on the currentFrameStart (and any previous measurements which can only happen while the tracking
|
|
178
|
-
// is not paused).
|
|
179
|
-
this.currentFrameStart = performance.now();
|
|
180
|
-
this.paused = false;
|
|
181
|
-
if (!this.animationFrame) {
|
|
182
|
-
this.startWindowTracking();
|
|
183
|
-
}
|
|
184
|
-
}
|
|
185
|
-
}]);
|
|
186
|
-
}();
|
|
@@ -1,57 +0,0 @@
|
|
|
1
|
-
import type { PeriodMeasurer } from '../types';
|
|
2
|
-
export declare class AnimationFPSIM implements PeriodMeasurer {
|
|
3
|
-
/**
|
|
4
|
-
* AFPS stands for Animation Frames Per Second
|
|
5
|
-
*/
|
|
6
|
-
name: string;
|
|
7
|
-
monitor: AnimationFPSMonitor;
|
|
8
|
-
start(paused: boolean): {
|
|
9
|
-
numerator: number;
|
|
10
|
-
denominator: number;
|
|
11
|
-
max: number;
|
|
12
|
-
min: number;
|
|
13
|
-
average: number;
|
|
14
|
-
};
|
|
15
|
-
end(): {
|
|
16
|
-
numerator: number;
|
|
17
|
-
denominator: number;
|
|
18
|
-
max: number;
|
|
19
|
-
min: number;
|
|
20
|
-
average: number;
|
|
21
|
-
};
|
|
22
|
-
pause(): void;
|
|
23
|
-
resume(): void;
|
|
24
|
-
}
|
|
25
|
-
declare class AnimationFPSMonitor {
|
|
26
|
-
paused: boolean;
|
|
27
|
-
private currentState;
|
|
28
|
-
private windowFrameCount;
|
|
29
|
-
private windowTotalTime;
|
|
30
|
-
private currentFrameStart;
|
|
31
|
-
animationFrame?: ReturnType<typeof requestAnimationFrame>;
|
|
32
|
-
private measureWindowFPS;
|
|
33
|
-
/**
|
|
34
|
-
* If there is running tracking - it will be reset
|
|
35
|
-
*/
|
|
36
|
-
private startWindowTracking;
|
|
37
|
-
startNewWindow(paused: boolean): {
|
|
38
|
-
numerator: number;
|
|
39
|
-
denominator: number;
|
|
40
|
-
max: number;
|
|
41
|
-
min: number;
|
|
42
|
-
average: number;
|
|
43
|
-
};
|
|
44
|
-
private resetWindow;
|
|
45
|
-
private endWindowTracking;
|
|
46
|
-
private resetOverallTracking;
|
|
47
|
-
end(): {
|
|
48
|
-
numerator: number;
|
|
49
|
-
denominator: number;
|
|
50
|
-
max: number;
|
|
51
|
-
min: number;
|
|
52
|
-
average: number;
|
|
53
|
-
};
|
|
54
|
-
pause(): void;
|
|
55
|
-
resume(): void;
|
|
56
|
-
}
|
|
57
|
-
export {};
|
package/insm.docs.tsx
DELETED
|
@@ -1,38 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Testing structured MCP docs for review — ignore this file.
|
|
3
|
-
* Contact #dst-structured-content in Slack with questions.
|
|
4
|
-
*/
|
|
5
|
-
|
|
6
|
-
import path from 'path';
|
|
7
|
-
|
|
8
|
-
import type { StructuredContentSource } from '@atlassian/structured-docs-types/types';
|
|
9
|
-
|
|
10
|
-
import packageJson from './package.json';
|
|
11
|
-
|
|
12
|
-
const packagePath = path.resolve(__dirname);
|
|
13
|
-
|
|
14
|
-
const documentation: StructuredContentSource = {
|
|
15
|
-
utilities: [
|
|
16
|
-
{
|
|
17
|
-
kind: 'function',
|
|
18
|
-
name: 'init',
|
|
19
|
-
description: 'INSM tooling measures user-perceived interactivity of a page',
|
|
20
|
-
status: 'general-availability',
|
|
21
|
-
import: {
|
|
22
|
-
name: 'init',
|
|
23
|
-
package: '@atlaskit/insm',
|
|
24
|
-
type: 'named',
|
|
25
|
-
packagePath,
|
|
26
|
-
packageJson,
|
|
27
|
-
},
|
|
28
|
-
usageGuidelines: [],
|
|
29
|
-
accessibilityGuidelines: [],
|
|
30
|
-
keywords: ['editor', 'insm', 'atlaskit'],
|
|
31
|
-
categories: ['editor'],
|
|
32
|
-
signature: 'init(options: INSMOptions): void',
|
|
33
|
-
examples: [],
|
|
34
|
-
},
|
|
35
|
-
],
|
|
36
|
-
};
|
|
37
|
-
|
|
38
|
-
export default documentation;
|