Moved priority level constants into rendeer interface

src/__tests__/__snapshots__/profiling-test.js.snap

@@ -11,7 +11,7 @@ Object {
   },
   "commitIndex": 0,
   "interactions": Array [],
-  "priorityLevel": 99,
+  "priorityLevel": "Immediate",
   "rootID": 1,
   "selfDurations": Map {
     1 => 0,
@@ -34,7 +34,7 @@ Object {
   },
   "commitIndex": 1,
   "interactions": Array [],
-  "priorityLevel": 99,
+  "priorityLevel": "Immediate",
   "rootID": 1,
   "selfDurations": Map {
     3 => 0,
@@ -55,7 +55,7 @@ Object {
   },
   "commitIndex": 2,
   "interactions": Array [],
-  "priorityLevel": 99,
+  "priorityLevel": "Immediate",
   "rootID": 1,
   "selfDurations": Map {
     3 => 0,
@@ -73,7 +73,7 @@ Object {
   },
   "commitIndex": 3,
   "interactions": Array [],
-  "priorityLevel": 99,
+  "priorityLevel": "Immediate",
   "rootID": 1,
   "selfDurations": Map {
     2 => 10,
@@ -95,7 +95,7 @@ Object {
       },
       "commitIndex": 0,
       "interactions": Array [],
-      "priorityLevel": 99,
+      "priorityLevel": "Immediate",
       "rootID": 1,
       "selfDurations": Map {
         1 => 0,
@@ -115,7 +115,7 @@ Object {
       },
       "commitIndex": 1,
       "interactions": Array [],
-      "priorityLevel": 99,
+      "priorityLevel": "Immediate",
       "rootID": 1,
       "selfDurations": Map {
         3 => 0,
@@ -133,7 +133,7 @@ Object {
       },
       "commitIndex": 2,
       "interactions": Array [],
-      "priorityLevel": 99,
+      "priorityLevel": "Immediate",
       "rootID": 1,
       "selfDurations": Map {
         3 => 0,
@@ -148,7 +148,7 @@ Object {
       },
       "commitIndex": 3,
       "interactions": Array [],
-      "priorityLevel": 99,
+      "priorityLevel": "Immediate",
       "rootID": 1,
       "selfDurations": Map {
         2 => 10,
@@ -332,7 +332,7 @@ Object {
   },
   "commitIndex": 0,
   "interactions": Array [],
-  "priorityLevel": 99,
+  "priorityLevel": "Immediate",
   "rootID": 1,
   "selfDurations": Map {
     1 => 0,
@@ -353,7 +353,7 @@ Object {
   },
   "commitIndex": 0,
   "interactions": Array [],
-  "priorityLevel": 99,
+  "priorityLevel": "Immediate",
   "rootID": 1,
   "selfDurations": Map {
     1 => 0,
@@ -372,7 +372,7 @@ Object {
   },
   "commitIndex": 1,
   "interactions": Array [],
-  "priorityLevel": 99,
+  "priorityLevel": "Immediate",
   "rootID": 1,
   "selfDurations": Map {
     5 => 3,
@@ -458,7 +458,7 @@ Object {
       },
       "commitIndex": 0,
       "interactions": Array [],
-      "priorityLevel": 99,
+      "priorityLevel": "Immediate",
       "rootID": 1,
       "selfDurations": Map {
         1 => 0,
@@ -476,7 +476,7 @@ Object {
       },
       "commitIndex": 1,
       "interactions": Array [],
-      "priorityLevel": 99,
+      "priorityLevel": "Immediate",
       "rootID": 1,
       "selfDurations": Map {
         3 => 0,
@@ -495,7 +495,7 @@ Object {
       },
       "commitIndex": 2,
       "interactions": Array [],
-      "priorityLevel": 99,
+      "priorityLevel": "Immediate",
       "rootID": 1,
       "selfDurations": Map {
         3 => 0,
@@ -710,7 +710,7 @@ Object {
           "timestamp": 0,
         },
       ],
-      "priorityLevel": 99,
+      "priorityLevel": "Immediate",
       "rootID": 1,
       "selfDurations": Map {
         1 => 0,
@@ -735,7 +735,7 @@ Object {
           "timestamp": 11,
         },
       ],
-      "priorityLevel": 99,
+      "priorityLevel": "Immediate",
       "rootID": 1,
       "selfDurations": Map {
         3 => 0,
@@ -922,7 +922,7 @@ Object {
       },
       "commitIndex": 0,
       "interactions": Array [],
-      "priorityLevel": 99,
+      "priorityLevel": "Immediate",
       "rootID": 1,
       "selfDurations": Map {
         3 => 0,
@@ -940,7 +940,7 @@ Object {
       },
       "commitIndex": 1,
       "interactions": Array [],
-      "priorityLevel": 99,
+      "priorityLevel": "Immediate",
       "rootID": 1,
       "selfDurations": Map {
         3 => 0,
@@ -955,7 +955,7 @@ Object {
       },
       "commitIndex": 2,
       "interactions": Array [],
-      "priorityLevel": 99,
+      "priorityLevel": "Immediate",
       "rootID": 1,
       "selfDurations": Map {
         2 => 10,

src/backend/renderer.js

@@ -48,7 +48,6 @@ import type {
   PathFrame,
   PathMatch,
   ProfilingSummaryBackend,
-  ReactPriorityLevel,
   ReactRenderer,
   RendererInterface,
 } from './types';
@@ -92,12 +91,27 @@ function getInternalReactConstants(version) {
     Placement: 0b10,
   };
 
+  // **********************************************************
+  // The section below is copied from files in React repo.
+  // Keep it in sync, and add version guards if it changes.
+  //
+  // Technically these priority levels are invalid for versions before 16.9,
+  // but 16.9 is the first version to report priority level to DevTools,
+  // so we can avoid checking for earlier versions and support pre-16.9 canary releases in the process.
+  const ReactPriorityLevels = {
+    ImmediatePriority: 99,
+    UserBlockingPriority: 98,
+    NormalPriority: 97,
+    LowPriority: 96,
+    IdlePriority: 95,
+    NoPriority: 90,
+  };
+
   let ReactTypeOfWork;
 
   // **********************************************************
   // The section below is copied from files in React repo.
   // Keep it in sync, and add version guards if it changes.
-  // **********************************************************
   if (gte(version, '16.6.0-beta.0')) {
     ReactTypeOfWork = {
       ClassComponent: 1,
@@ -185,6 +199,7 @@ function getInternalReactConstants(version) {
   // **********************************************************
 
   return {
+    ReactPriorityLevels,
     ReactTypeOfWork,
     ReactSymbols,
     ReactTypeOfSideEffect,
@@ -198,6 +213,7 @@ export function attach(
   global: Object
 ): RendererInterface {
   const {
+    ReactPriorityLevels,
     ReactTypeOfWork,
     ReactSymbols,
     ReactTypeOfSideEffect,
@@ -222,6 +238,14 @@ export function attach(
     SimpleMemoComponent,
     SuspenseComponent,
   } = ReactTypeOfWork;
+  const {
+    ImmediatePriority,
+    UserBlockingPriority,
+    NormalPriority,
+    LowPriority,
+    IdlePriority,
+    NoPriority,
+  } = ReactPriorityLevels;
   const {
     CONCURRENT_MODE_NUMBER,
     CONCURRENT_MODE_SYMBOL_STRING,
@@ -1311,7 +1335,8 @@ export function attach(
           })
         ),
         maxActualDuration: 0,
-        priorityLevel: priorityLevel || null,
+        priorityLevel:
+          priorityLevel == null ? null : formatPriorityLevel(priorityLevel),
       };
     }
 
@@ -1958,7 +1983,7 @@ export function attach(
     durations: Array<number>,
     interactions: Array<InteractionBackend>,
     maxActualDuration: number,
-    priorityLevel: ReactPriorityLevel | null,
+    priorityLevel: string | null,
   |};
 
   type CommitProfilingMetadataMap = Map<number, Array<CommitProfilingData>>;
@@ -2408,6 +2433,28 @@ export function attach(
     };
   }
 
+  const formatPriorityLevel = (priorityLevel: ?number) => {
+    if (priorityLevel == null) {
+      return 'Unknown';
+    }
+
+    switch (priorityLevel) {
+      case ImmediatePriority:
+        return 'Immediate';
+      case UserBlockingPriority:
+        return 'User-Blocking';
+      case NormalPriority:
+        return 'Normal';
+      case LowPriority:
+        return 'Low';
+      case IdlePriority:
+        return 'Idle';
+      case NoPriority:
+      default:
+        return 'Unknown';
+    }
+  };
+
   return {
     cleanup,
     flushInitialOperations,

src/backend/types.js

@@ -32,16 +32,6 @@ export type HookType =
   | 'useImperativeHandle'
   | 'useDebugValue';
 
-// Priority level is copied from React and should be kept in sync:
-// https://github.com/facebook/react/blob/master/packages/react-reconciler/src/SchedulerWithReactIntegration.js
-export opaque type ReactPriorityLevel = 99 | 98 | 97 | 96 | 95 | 90;
-export const ImmediatePriority: ReactPriorityLevel = 99;
-export const UserBlockingPriority: ReactPriorityLevel = 98;
-export const NormalPriority: ReactPriorityLevel = 97;
-export const LowPriority: ReactPriorityLevel = 96;
-export const IdlePriority: ReactPriorityLevel = 95;
-export const NoPriority: ReactPriorityLevel = 90;
-
 // The Fiber type is copied from React and should be kept in sync:
 // https://github.com/facebook/react/blob/master/packages/react-reconciler/src/ReactFiber.js
 // The properties we don't use in DevTools are omitted.
@@ -136,7 +126,7 @@ export type CommitDetailsBackend = {|
   // An interleaved array: fiberID at [i], actualDuration at [i + 1], computed selfDuration at [i + 2].
   durations: Array<number>,
   interactions: Array<InteractionBackend>,
-  priorityLevel: ReactPriorityLevel | null,
+  priorityLevel: string | null,
   rootID: number,
 |};
 
@@ -204,10 +194,7 @@ export type RendererInterface = {
   ) => ExportedProfilingDataFromRenderer,
   getProfilingSummary: (rootID: number) => ProfilingSummaryBackend,
   getPathForElement: (id: number) => Array<PathFrame> | null,
-  handleCommitFiberRoot: (
-    fiber: Object,
-    commitPriority?: ReactPriorityLevel
-  ) => void,
+  handleCommitFiberRoot: (fiber: Object, commitPriority?: number) => void,
   handleCommitFiberUnmount: (fiber: Object) => void,
   inspectElement: (id: number) => InspectedElement | null,
   logElementToConsole: (id: number) => void,
@@ -251,7 +238,7 @@ export type DevToolsHook = {
   onCommitFiberRoot: (
     rendererID: RendererID,
     fiber: Object,
-    commitPriority?: ReactPriorityLevel
+    commitPriority?: number
   ) => void,
 };
 

src/devtools/views/Profiler/SidebarCommitInfo.js

@@ -2,7 +2,7 @@
 
 import React, { Fragment, useCallback, useContext, useState } from 'react';
 import { ProfilerContext } from './ProfilerContext';
-import { formatDuration, formatPriorityLevel, formatTime } from './utils';
+import { formatDuration, formatTime } from './utils';
 import { StoreContext } from '../context';
 
 import styles from './SidebarCommitInfo.css';
@@ -75,9 +75,7 @@ export default function SidebarCommitInfo(_: Props) {
           {priorityLevel !== null && (
             <li className={styles.ListItem}>
               <label className={styles.Label}>Priority</label>:{' '}
-              <span className={styles.Value}>
-                {formatPriorityLevel(priorityLevel)}
-              </span>
+              <span className={styles.Value}>{priorityLevel}</span>
             </li>
           )}
           <li className={styles.ListItem}>

src/devtools/views/Profiler/types.js

@@ -5,7 +5,6 @@ import type {
   CommitDetailsBackend,
   InteractionsBackend,
   ProfilingSummaryBackend,
-  ReactPriorityLevel,
 } from 'src/backend/types';
 
 export type CommitTreeNodeFrontend = {|
@@ -43,7 +42,7 @@ export type CommitDetailsFrontend = {|
   actualDurations: Map<number, number>,
   commitIndex: number,
   interactions: Array<InteractionFrontend>,
-  priorityLevel: ReactPriorityLevel | null,
+  priorityLevel: string | null,
   rootID: number,
   selfDurations: Map<number, number>,
 |};

src/devtools/views/Profiler/utils.js

@@ -1,14 +1,6 @@
 // @flow
 
 import { PROFILER_EXPORT_VERSION } from 'src/constants';
-import {
-  ImmediatePriority,
-  UserBlockingPriority,
-  NormalPriority,
-  LowPriority,
-  IdlePriority,
-  NoPriority,
-} from 'src/backend/types';
 
 import type {
   ExportedProfilingSummaryFromFrontend,
@@ -17,10 +9,7 @@ import type {
   ProfilingSnapshotNode,
 } from './types';
 
-import type {
-  ExportedProfilingDataFromRenderer,
-  ReactPriorityLevel,
-} from 'src/backend/types';
+import type { ExportedProfilingDataFromRenderer } from 'src/backend/types';
 
 const commitGradient = [
   'var(--color-commit-gradient-0)',
@@ -196,24 +185,6 @@ export const getGradientColor = (value: number) => {
   return commitGradient[Math.round(index)];
 };
 
-export const formatPriorityLevel = (priorityLevel: ReactPriorityLevel) => {
-  switch (priorityLevel) {
-    case ImmediatePriority:
-      return 'Immediate';
-    case UserBlockingPriority:
-      return 'User-Blocking';
-    case NormalPriority:
-      return 'Normal';
-    case LowPriority:
-      return 'Low';
-    case IdlePriority:
-      return 'Idle';
-    case NoPriority:
-    default:
-      return 'Unknown';
-  }
-};
-
 export const formatDuration = (duration: number) =>
   Math.round(duration * 10) / 10 || '<0.1';
 export const formatPercentage = (percentage: number) =>