diff --git a/src/__tests__/__snapshots__/profiling-test.js.snap b/src/__tests__/__snapshots__/profiling-test.js.snap index 524d7db2a9..314e152dc4 100644 --- a/src/__tests__/__snapshots__/profiling-test.js.snap +++ b/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, diff --git a/src/backend/renderer.js b/src/backend/renderer.js index 52386dab88..b0532eefae 100644 --- a/src/backend/renderer.js +++ b/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, interactions: Array, maxActualDuration: number, - priorityLevel: ReactPriorityLevel | null, + priorityLevel: string | null, |}; type CommitProfilingMetadataMap = Map>; @@ -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, diff --git a/src/backend/types.js b/src/backend/types.js index 0af9f6358d..431619db15 100644 --- a/src/backend/types.js +++ b/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, interactions: Array, - priorityLevel: ReactPriorityLevel | null, + priorityLevel: string | null, rootID: number, |}; @@ -204,10 +194,7 @@ export type RendererInterface = { ) => ExportedProfilingDataFromRenderer, getProfilingSummary: (rootID: number) => ProfilingSummaryBackend, getPathForElement: (id: number) => Array | 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, }; diff --git a/src/devtools/views/Profiler/SidebarCommitInfo.js b/src/devtools/views/Profiler/SidebarCommitInfo.js index 5e593fe401..ff4040302b 100644 --- a/src/devtools/views/Profiler/SidebarCommitInfo.js +++ b/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 && (
  • :{' '} - - {formatPriorityLevel(priorityLevel)} - + {priorityLevel}
    • )}
  • diff --git a/src/devtools/views/Profiler/types.js b/src/devtools/views/Profiler/types.js index d72f2028ab..99e0430465 100644 --- a/src/devtools/views/Profiler/types.js +++ b/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, commitIndex: number, interactions: Array, - priorityLevel: ReactPriorityLevel | null, + priorityLevel: string | null, rootID: number, selfDurations: Map, |}; diff --git a/src/devtools/views/Profiler/utils.js b/src/devtools/views/Profiler/utils.js index 1b1a3558e0..95c4fdc17d 100644 --- a/src/devtools/views/Profiler/utils.js +++ b/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) =>