@samitouri / QOS-React-2 / commits / 16a81feb72

Moved priority level constants into rendeer interface

Brian Vaughn committed May 16, 2019 at 14:51 UTC 16a81feb7270989bfd39b7fb0c395d77421ebf2e
6 files changed +77 -75
src/__tests__/__snapshots__/profiling-test.js.snap
+19 -19
@@ -11,7 +11,7 @@ Object {
11 },
12 "commitIndex": 0,
13 "interactions": Array [],
14 - "priorityLevel": 99,
14 + "priorityLevel": "Immediate",
15 "rootID": 1,
16 "selfDurations": Map {
17 1 => 0,
@@ -34,7 +34,7 @@ Object {
34 },
35 "commitIndex": 1,
36 "interactions": Array [],
37 - "priorityLevel": 99,
37 + "priorityLevel": "Immediate",
38 "rootID": 1,
39 "selfDurations": Map {
40 3 => 0,
@@ -55,7 +55,7 @@ Object {
55 },
56 "commitIndex": 2,
57 "interactions": Array [],
58 - "priorityLevel": 99,
58 + "priorityLevel": "Immediate",
59 "rootID": 1,
60 "selfDurations": Map {
61 3 => 0,
@@ -73,7 +73,7 @@ Object {
73 },
74 "commitIndex": 3,
75 "interactions": Array [],
76 - "priorityLevel": 99,
76 + "priorityLevel": "Immediate",
77 "rootID": 1,
78 "selfDurations": Map {
79 2 => 10,
@@ -95,7 +95,7 @@ Object {
95 },
96 "commitIndex": 0,
97 "interactions": Array [],
98 - "priorityLevel": 99,
98 + "priorityLevel": "Immediate",
99 "rootID": 1,
100 "selfDurations": Map {
101 1 => 0,
@@ -115,7 +115,7 @@ Object {
115 },
116 "commitIndex": 1,
117 "interactions": Array [],
118 - "priorityLevel": 99,
118 + "priorityLevel": "Immediate",
119 "rootID": 1,
120 "selfDurations": Map {
121 3 => 0,
@@ -133,7 +133,7 @@ Object {
133 },
134 "commitIndex": 2,
135 "interactions": Array [],
136 - "priorityLevel": 99,
136 + "priorityLevel": "Immediate",
137 "rootID": 1,
138 "selfDurations": Map {
139 3 => 0,
@@ -148,7 +148,7 @@ Object {
148 },
149 "commitIndex": 3,
150 "interactions": Array [],
151 - "priorityLevel": 99,
151 + "priorityLevel": "Immediate",
152 "rootID": 1,
153 "selfDurations": Map {
154 2 => 10,
@@ -332,7 +332,7 @@ Object {
332 },
333 "commitIndex": 0,
334 "interactions": Array [],
335 - "priorityLevel": 99,
335 + "priorityLevel": "Immediate",
336 "rootID": 1,
337 "selfDurations": Map {
338 1 => 0,
@@ -353,7 +353,7 @@ Object {
353 },
354 "commitIndex": 0,
355 "interactions": Array [],
356 - "priorityLevel": 99,
356 + "priorityLevel": "Immediate",
357 "rootID": 1,
358 "selfDurations": Map {
359 1 => 0,
@@ -372,7 +372,7 @@ Object {
372 },
373 "commitIndex": 1,
374 "interactions": Array [],
375 - "priorityLevel": 99,
375 + "priorityLevel": "Immediate",
376 "rootID": 1,
377 "selfDurations": Map {
378 5 => 3,
@@ -458,7 +458,7 @@ Object {
458 },
459 "commitIndex": 0,
460 "interactions": Array [],
461 - "priorityLevel": 99,
461 + "priorityLevel": "Immediate",
462 "rootID": 1,
463 "selfDurations": Map {
464 1 => 0,
@@ -476,7 +476,7 @@ Object {
476 },
477 "commitIndex": 1,
478 "interactions": Array [],
479 - "priorityLevel": 99,
479 + "priorityLevel": "Immediate",
480 "rootID": 1,
481 "selfDurations": Map {
482 3 => 0,
@@ -495,7 +495,7 @@ Object {
495 },
496 "commitIndex": 2,
497 "interactions": Array [],
498 - "priorityLevel": 99,
498 + "priorityLevel": "Immediate",
499 "rootID": 1,
500 "selfDurations": Map {
501 3 => 0,
@@ -710,7 +710,7 @@ Object {
710 "timestamp": 0,
711 },
712 ],
713 - "priorityLevel": 99,
713 + "priorityLevel": "Immediate",
714 "rootID": 1,
715 "selfDurations": Map {
716 1 => 0,
@@ -735,7 +735,7 @@ Object {
735 "timestamp": 11,
736 },
737 ],
738 - "priorityLevel": 99,
738 + "priorityLevel": "Immediate",
739 "rootID": 1,
740 "selfDurations": Map {
741 3 => 0,
@@ -922,7 +922,7 @@ Object {
922 },
923 "commitIndex": 0,
924 "interactions": Array [],
925 - "priorityLevel": 99,
925 + "priorityLevel": "Immediate",
926 "rootID": 1,
927 "selfDurations": Map {
928 3 => 0,
@@ -940,7 +940,7 @@ Object {
940 },
941 "commitIndex": 1,
942 "interactions": Array [],
943 - "priorityLevel": 99,
943 + "priorityLevel": "Immediate",
944 "rootID": 1,
945 "selfDurations": Map {
946 3 => 0,
@@ -955,7 +955,7 @@ Object {
955 },
956 "commitIndex": 2,
957 "interactions": Array [],
958 - "priorityLevel": 99,
958 + "priorityLevel": "Immediate",
959 "rootID": 1,
960 "selfDurations": Map {
961 2 => 10,
src/backend/renderer.js
+51 -4
@@ -48,7 +48,6 @@ import type {
48 PathFrame,
49 PathMatch,
50 ProfilingSummaryBackend,
51 - ReactPriorityLevel,
51 ReactRenderer,
52 RendererInterface,
53 } from './types';
@@ -92,12 +91,27 @@ function getInternalReactConstants(version) {
91 Placement: 0b10,
92 };
93
94 + // **********************************************************
95 + // The section below is copied from files in React repo.
96 + // Keep it in sync, and add version guards if it changes.
97 + //
98 + // Technically these priority levels are invalid for versions before 16.9,
99 + // but 16.9 is the first version to report priority level to DevTools,
100 + // so we can avoid checking for earlier versions and support pre-16.9 canary releases in the process.
101 + const ReactPriorityLevels = {
102 + ImmediatePriority: 99,
103 + UserBlockingPriority: 98,
104 + NormalPriority: 97,
105 + LowPriority: 96,
106 + IdlePriority: 95,
107 + NoPriority: 90,
108 + };
109 +
110 let ReactTypeOfWork;
111
112 // **********************************************************
113 // The section below is copied from files in React repo.
114 // Keep it in sync, and add version guards if it changes.
100 - // **********************************************************
115 if (gte(version, '16.6.0-beta.0')) {
116 ReactTypeOfWork = {
117 ClassComponent: 1,
@@ -185,6 +199,7 @@ function getInternalReactConstants(version) {
199 // **********************************************************
200
201 return {
202 + ReactPriorityLevels,
203 ReactTypeOfWork,
204 ReactSymbols,
205 ReactTypeOfSideEffect,
@@ -198,6 +213,7 @@ export function attach(
213 global: Object
214 ): RendererInterface {
215 const {
216 + ReactPriorityLevels,
217 ReactTypeOfWork,
218 ReactSymbols,
219 ReactTypeOfSideEffect,
@@ -222,6 +238,14 @@ export function attach(
238 SimpleMemoComponent,
239 SuspenseComponent,
240 } = ReactTypeOfWork;
241 + const {
242 + ImmediatePriority,
243 + UserBlockingPriority,
244 + NormalPriority,
245 + LowPriority,
246 + IdlePriority,
247 + NoPriority,
248 + } = ReactPriorityLevels;
249 const {
250 CONCURRENT_MODE_NUMBER,
251 CONCURRENT_MODE_SYMBOL_STRING,
@@ -1311,7 +1335,8 @@ export function attach(
1335 })
1336 ),
1337 maxActualDuration: 0,
1314 - priorityLevel: priorityLevel || null,
1338 + priorityLevel:
1339 + priorityLevel == null ? null : formatPriorityLevel(priorityLevel),
1340 };
1341 }
1342
@@ -1958,7 +1983,7 @@ export function attach(
1983 durations: Array<number>,
1984 interactions: Array<InteractionBackend>,
1985 maxActualDuration: number,
1961 - priorityLevel: ReactPriorityLevel | null,
1986 + priorityLevel: string | null,
1987 |};
1988
1989 type CommitProfilingMetadataMap = Map<number, Array<CommitProfilingData>>;
@@ -2408,6 +2433,28 @@ export function attach(
2433 };
2434 }
2435
2436 + const formatPriorityLevel = (priorityLevel: ?number) => {
2437 + if (priorityLevel == null) {
2438 + return 'Unknown';
2439 + }
2440 +
2441 + switch (priorityLevel) {
2442 + case ImmediatePriority:
2443 + return 'Immediate';
2444 + case UserBlockingPriority:
2445 + return 'User-Blocking';
2446 + case NormalPriority:
2447 + return 'Normal';
2448 + case LowPriority:
2449 + return 'Low';
2450 + case IdlePriority:
2451 + return 'Idle';
2452 + case NoPriority:
2453 + default:
2454 + return 'Unknown';
2455 + }
2456 + };
2457 +
2458 return {
2459 cleanup,
2460 flushInitialOperations,
src/backend/types.js
+3 -16
@@ -32,16 +32,6 @@ export type HookType =
32 | 'useImperativeHandle'
33 | 'useDebugValue';
34
35 -// Priority level is copied from React and should be kept in sync:
36 -// https://github.com/facebook/react/blob/master/packages/react-reconciler/src/SchedulerWithReactIntegration.js
37 -export opaque type ReactPriorityLevel = 99 | 98 | 97 | 96 | 95 | 90;
38 -export const ImmediatePriority: ReactPriorityLevel = 99;
39 -export const UserBlockingPriority: ReactPriorityLevel = 98;
40 -export const NormalPriority: ReactPriorityLevel = 97;
41 -export const LowPriority: ReactPriorityLevel = 96;
42 -export const IdlePriority: ReactPriorityLevel = 95;
43 -export const NoPriority: ReactPriorityLevel = 90;
44 -
35 // The Fiber type is copied from React and should be kept in sync:
36 // https://github.com/facebook/react/blob/master/packages/react-reconciler/src/ReactFiber.js
37 // The properties we don't use in DevTools are omitted.
@@ -136,7 +126,7 @@ export type CommitDetailsBackend = {|
126 // An interleaved array: fiberID at [i], actualDuration at [i + 1], computed selfDuration at [i + 2].
127 durations: Array<number>,
128 interactions: Array<InteractionBackend>,
139 - priorityLevel: ReactPriorityLevel | null,
129 + priorityLevel: string | null,
130 rootID: number,
131 |};
132
@@ -204,10 +194,7 @@ export type RendererInterface = {
194 ) => ExportedProfilingDataFromRenderer,
195 getProfilingSummary: (rootID: number) => ProfilingSummaryBackend,
196 getPathForElement: (id: number) => Array<PathFrame> | null,
207 - handleCommitFiberRoot: (
208 - fiber: Object,
209 - commitPriority?: ReactPriorityLevel
210 - ) => void,
197 + handleCommitFiberRoot: (fiber: Object, commitPriority?: number) => void,
198 handleCommitFiberUnmount: (fiber: Object) => void,
199 inspectElement: (id: number) => InspectedElement | null,
200 logElementToConsole: (id: number) => void,
@@ -251,7 +238,7 @@ export type DevToolsHook = {
238 onCommitFiberRoot: (
239 rendererID: RendererID,
240 fiber: Object,
254 - commitPriority?: ReactPriorityLevel
241 + commitPriority?: number
242 ) => void,
243 };
244
src/devtools/views/Profiler/SidebarCommitInfo.js
+2 -4
@@ -2,7 +2,7 @@
2
3 import React, { Fragment, useCallback, useContext, useState } from 'react';
4 import { ProfilerContext } from './ProfilerContext';
5 -import { formatDuration, formatPriorityLevel, formatTime } from './utils';
5 +import { formatDuration, formatTime } from './utils';
6 import { StoreContext } from '../context';
7
8 import styles from './SidebarCommitInfo.css';
@@ -75,9 +75,7 @@ export default function SidebarCommitInfo(_: Props) {
75 {priorityLevel !== null && (
76 <li className={styles.ListItem}>
77 <label className={styles.Label}>Priority</label>:{' '}
78 - <span className={styles.Value}>
79 - {formatPriorityLevel(priorityLevel)}
80 - </span>
78 + <span className={styles.Value}>{priorityLevel}</span>
79 </li>
80 )}
81 <li className={styles.ListItem}>
src/devtools/views/Profiler/types.js
+1 -2
@@ -5,7 +5,6 @@ import type {
5 CommitDetailsBackend,
6 InteractionsBackend,
7 ProfilingSummaryBackend,
8 - ReactPriorityLevel,
8 } from 'src/backend/types';
9
10 export type CommitTreeNodeFrontend = {|
@@ -43,7 +42,7 @@ export type CommitDetailsFrontend = {|
42 actualDurations: Map<number, number>,
43 commitIndex: number,
44 interactions: Array<InteractionFrontend>,
46 - priorityLevel: ReactPriorityLevel | null,
45 + priorityLevel: string | null,
46 rootID: number,
47 selfDurations: Map<number, number>,
48 |};
src/devtools/views/Profiler/utils.js
+1 -30
@@ -1,14 +1,6 @@
1 // @flow
2
3 import { PROFILER_EXPORT_VERSION } from 'src/constants';
4 -import {
5 - ImmediatePriority,
6 - UserBlockingPriority,
7 - NormalPriority,
8 - LowPriority,
9 - IdlePriority,
10 - NoPriority,
11 -} from 'src/backend/types';
4
5 import type {
6 ExportedProfilingSummaryFromFrontend,
@@ -17,10 +9,7 @@ import type {
9 ProfilingSnapshotNode,
10 } from './types';
11
20 -import type {
21 - ExportedProfilingDataFromRenderer,
22 - ReactPriorityLevel,
23 -} from 'src/backend/types';
12 +import type { ExportedProfilingDataFromRenderer } from 'src/backend/types';
13
14 const commitGradient = [
15 'var(--color-commit-gradient-0)',
@@ -196,24 +185,6 @@ export const getGradientColor = (value: number) => {
185 return commitGradient[Math.round(index)];
186 };
187
199 -export const formatPriorityLevel = (priorityLevel: ReactPriorityLevel) => {
200 - switch (priorityLevel) {
201 - case ImmediatePriority:
202 - return 'Immediate';
203 - case UserBlockingPriority:
204 - return 'User-Blocking';
205 - case NormalPriority:
206 - return 'Normal';
207 - case LowPriority:
208 - return 'Low';
209 - case IdlePriority:
210 - return 'Idle';
211 - case NoPriority:
212 - default:
213 - return 'Unknown';
214 - }
215 -};
216 -
188 export const formatDuration = (duration: number) =>
189 Math.round(duration * 10) / 10 || '<0.1';
190 export const formatPercentage = (percentage: number) =>