diff --git a/frontend/app/components/Session/IOSPlayer/Performance.js b/frontend/app/components/Session/IOSPlayer/Performance.js
index 42d19888f..92957d8fe 100644
--- a/frontend/app/components/Session/IOSPlayer/Performance.js
+++ b/frontend/app/components/Session/IOSPlayer/Performance.js
@@ -44,7 +44,7 @@ export default observer(({ player }) => {
diff --git a/frontend/app/components/Session/Layout/ToolPanel/Performance.tsx b/frontend/app/components/Session/Layout/ToolPanel/Performance.tsx
index c5ae6f809..c00d39a95 100644
--- a/frontend/app/components/Session/Layout/ToolPanel/Performance.tsx
+++ b/frontend/app/components/Session/Layout/ToolPanel/Performance.tsx
@@ -220,12 +220,12 @@ export default class Performance extends React.PureComponent {
render() {
const {
performanceChartTime,
- avaliability = {},
+ availability = {},
hiddenScreenMarker = true,
} = this.props;
- const { fps, cpu, heap, nodes, memory, battery } = avaliability;
- const avaliableCount = [ fps, cpu, heap, nodes, memory, battery ].reduce((c, av) => av ? c + 1 : c, 0);
- const height = avaliableCount === 0 ? "0" : `${100 / avaliableCount}%`;
+ const { fps, cpu, heap, nodes, memory, battery } = availability;
+ const availableCount = [ fps, cpu, heap, nodes, memory, battery ].reduce((c, av) => av ? c + 1 : c, 0);
+ const height = availableCount === 0 ? "0" : `${100 / availableCount}%`;
return (
<>
diff --git a/frontend/app/components/Session_/Performance/Performance.tsx b/frontend/app/components/Session_/Performance/Performance.tsx
index 2d251a9fd..330defb26 100644
--- a/frontend/app/components/Session_/Performance/Performance.tsx
+++ b/frontend/app/components/Session_/Performance/Performance.tsx
@@ -187,7 +187,7 @@ function Performance({
performanceChartData,
connType,
connBandwidth,
- performanceAvaliability: avaliability,
+ performanceAvailability: availability,
} = store.get();
React.useState(() => {
@@ -212,9 +212,9 @@ function Performance({
}
};
- const { fps, cpu, heap, nodes } = avaliability;
- const avaliableCount = [fps, cpu, heap, nodes].reduce((c, av) => (av ? c + 1 : c), 0);
- const height = avaliableCount === 0 ? '0' : `${100 / avaliableCount}%`;
+ const { fps, cpu, heap, nodes } = availability;
+ const availableCount = [fps, cpu, heap, nodes].reduce((c, av) => (av ? c + 1 : c), 0);
+ const height = availableCount === 0 ? '0' : `${100 / availableCount}%`;
return (
diff --git a/frontend/app/player/web/MessageManager.ts b/frontend/app/player/web/MessageManager.ts
index 104a9365a..9cb4a3edf 100644
--- a/frontend/app/player/web/MessageManager.ts
+++ b/frontend/app/player/web/MessageManager.ts
@@ -52,7 +52,7 @@ export interface State extends ScreenState, ListsState {
connBandwidth?: number,
location?: string,
performanceChartTime?: number,
- performanceAvaliability?: PerformanceTrackManager['avaliability']
+ performanceAvailability?: PerformanceTrackManager['availability']
domContentLoadedTime?: { time: number, value: number },
domBuildingTime?: number,
@@ -191,7 +191,7 @@ export default class MessageManager {
private onFileReadSuccess = () => {
const stateToUpdate : Partial= {
performanceChartData: this.performanceTrackManager.chartData,
- performanceAvaliability: this.performanceTrackManager.avaliability,
+ performanceAvailability: this.performanceTrackManager.availability,
...this.lists.getFullListsState(),
}
if (this.activityManager) {
@@ -250,33 +250,58 @@ export default class MessageManager {
this.waitingForFiles = true
+ // TODO: refactor this stuff; split everything to async/await
+
const loadMethod = this.session.domURL && this.session.domURL.length > 0
? { url: this.session.domURL, parser: () => createNewParser(true, 'dom') }
: { url: this.session.mobsUrl, parser: () => createNewParser(false, 'dom')}
- loadFiles(loadMethod.url, loadMethod.parser())
- // EFS fallback
- .catch((e) => requestEFSDom(this.session.sessionId)
+ const parser = loadMethod.parser()
+
+ /**
+ * We load first dom mobfile before the rest
+ * to speed up time to replay
+ * but as a tradeoff we have to have some copy-paste
+ * for the devtools file
+ * */
+ loadFiles([loadMethod.url[0]], parser)
+ .then(() => {
+ if (loadMethod.url.length > 1) {
+ loadFiles([loadMethod.url[1]], parser, true)
+ }
+ if (!isClickmap) {
+ this.loadDevtools(createNewParser)
+ }
+ })
+ /**
+ * EFS fallback for unprocessed sessions (which are live)
+ * */
+ .catch(() => {
+ requestEFSDom(this.session.sessionId)
.then(createNewParser(false, 'domEFS'))
+ .catch(this.onFileReadFailed)
+ if (!isClickmap) {
+ this.loadDevtools(createNewParser)
+ }
+ }
)
.then(this.onFileReadSuccess)
- .catch(this.onFileReadFailed)
.finally(this.onFileReadFinally);
+ }
- // load devtools (TODO: start after the first DOM file download)
- if (isClickmap) return;
+ loadDevtools(createNewParser: (shouldDecrypt: boolean, file: string) => (b: Uint8Array) => Promise) {
this.state.update({ devtoolsLoading: true })
loadFiles(this.session.devtoolsURL, createNewParser(true, 'devtools'))
- // EFS fallback
- .catch(() =>
- requestEFSDevtools(this.session.sessionId)
- .then(createNewParser(false, 'devtoolsEFS'))
- )
- .then(() => {
- this.state.update(this.lists.getFullListsState()) // TODO: also in case of dynamic update through assist
- })
- .catch(e => logger.error("Can not download the devtools file", e))
- .finally(() => this.state.update({ devtoolsLoading: false }))
+ // EFS fallback
+ .catch(() =>
+ requestEFSDevtools(this.session.sessionId)
+ .then(createNewParser(false, 'devtoolsEFS'))
+ )
+ .then(() => {
+ this.state.update(this.lists.getFullListsState()) // TODO: also in case of dynamic update through assist
+ })
+ .catch(e => logger.error("Can not download the devtools file", e))
+ .finally(() => this.state.update({ devtoolsLoading: false }))
}
resetMessageManagers() {
diff --git a/frontend/app/player/web/managers/PerformanceTrackManager.ts b/frontend/app/player/web/managers/PerformanceTrackManager.ts
index 98ce2c0b9..bec1652c3 100644
--- a/frontend/app/player/web/managers/PerformanceTrackManager.ts
+++ b/frontend/app/player/web/managers/PerformanceTrackManager.ts
@@ -15,9 +15,9 @@ export default class PerformanceTrackManager extends ListWalker = [];
private isHidden: boolean = false;
private timeCorrection: number = 0;
- private heapAvaliable: boolean = false;
- private fpsAvaliable: boolean = false;
- private cpuAvaliable: boolean = false;
+ private heapAvailable: boolean = false;
+ private fpsAvailable: boolean = false;
+ private cpuAvailable: boolean = false;
private prevTime: number | null = null;
private prevNodesCount: number = 0;
@@ -29,7 +29,7 @@ export default class PerformanceTrackManager extends ListWalker 0 && msg.frames >= 0) {
- if (msg.frames > 0) { this.fpsAvaliable = true; }
+ if (msg.frames > 0) { this.fpsAvailable = true; }
fps = msg.frames*1e3/timePassed; // Multiply by 1e3 as time in ms;
fps = Math.min(fps,60); // What if 120? TODO: alert if more than 60
if (this.chart.length === 1) {
@@ -38,7 +38,7 @@ export default class PerformanceTrackManager extends ListWalker 0 && msg.ticks >= 0) {
- this.cpuAvaliable = true;
+ this.cpuAvailable = true;
let tickRate = msg.ticks * 30 / timePassed;
if (tickRate > 1) {
tickRate = 1;
@@ -53,7 +53,7 @@ export default class PerformanceTrackManager extends ListWalker 0;
+ this.heapAvailable = this.heapAvailable || msg.usedJSHeapSize > 0;
this.chart.push({
usedHeap: msg.usedJSHeapSize,
totalHeap: msg.totalJSHeapSize,
@@ -109,11 +109,11 @@ export default class PerformanceTrackManager extends ListWalker void,
-): Promise {
+ canSkip: boolean = false,
+): Promise {
if (!urls.length) {
throw NO_URLS
}
try {
for (let url of urls) {
const response = await window.fetch(url)
- const data = await processAPIStreamResponse(response, url !== urls[0])
+ const data = await processAPIStreamResponse(response, urls.length > 1 ? url !== urls[0] : canSkip)
onData(data)
}
} catch(e) {