From 9a6a19456f0e07a9f308b079ad7245ca627a4f59 Mon Sep 17 00:00:00 2001 From: Brian Vaughn Date: Wed, 15 May 2019 15:36:14 -0700 Subject: [PATCH 1/4] Show commit priority levels in Profiler UI --- shells/dev/app/PriorityLevels/index.js | 29 ++++++++++++++++ shells/dev/app/index.js | 11 ++++-- .../__snapshots__/profiling-test.js.snap | 19 +++++++++++ src/backend/renderer.js | 8 ++++- src/backend/types.js | 22 ++++++++++-- src/devtools/ProfilingCache.js | 5 ++- .../views/Profiler/SidebarCommitInfo.js | 12 +++++-- src/devtools/views/Profiler/types.js | 2 ++ src/devtools/views/Profiler/utils.js | 34 +++++++++++++++++-- src/hook.js | 4 +-- 10 files changed, 134 insertions(+), 12 deletions(-) create mode 100644 shells/dev/app/PriorityLevels/index.js diff --git a/shells/dev/app/PriorityLevels/index.js b/shells/dev/app/PriorityLevels/index.js new file mode 100644 index 0000000000..dec47e1fc9 --- /dev/null +++ b/shells/dev/app/PriorityLevels/index.js @@ -0,0 +1,29 @@ +// @flow + +import React, { Fragment, useCallback, useState } from 'react'; +import { unstable_next as next } from 'scheduler'; + +export default function PriorityLevels() { + const [count, setCount] = useState(0); + + const startSequence = useCallback(() => { + setCount(1); + next(() => setCount(2)); + }, []); + + return ( + +

Priority Levels

+ + {count >= 1 && One} + {count >= 2 && Two} + {count >= 2 && ( + + )} + + ); +} + +const Text = ({ children }) => children; diff --git a/shells/dev/app/index.js b/shells/dev/app/index.js index 3a76db783f..5c87e51a8c 100644 --- a/shells/dev/app/index.js +++ b/shells/dev/app/index.js @@ -3,12 +3,17 @@ // This test harness mounts each test app as a separate root to test multi-root applications. import { createElement } from 'react'; -import { render, unmountComponentAtNode } from 'react-dom'; +import { + unmountComponentAtNode, + // $FlowFixMe Flow does not yet know about createRoot() + unstable_createRoot as createRoot, +} from 'react-dom'; import DeeplyNestedComponents from './DeeplyNestedComponents'; import EditableProps from './EditableProps'; import ElementTypes from './ElementTypes'; import InspectableElements from './InspectableElements'; import InteractionTracing from './InteractionTracing'; +import PriorityLevels from './PriorityLevels'; import ToDoList from './ToDoList'; import Toggle from './Toggle'; import SuspenseTree from './SuspenseTree'; @@ -24,7 +29,8 @@ function mountHelper(App) { containers.push(container); - render(createElement(App), container); + const root = createRoot(container); + root.render(createElement(App)); } function mountTestApp() { @@ -33,6 +39,7 @@ function mountTestApp() { mountHelper(InspectableElements); mountHelper(ElementTypes); mountHelper(EditableProps); + mountHelper(PriorityLevels); mountHelper(Toggle); mountHelper(SuspenseTree); mountHelper(DeeplyNestedComponents); diff --git a/src/__tests__/__snapshots__/profiling-test.js.snap b/src/__tests__/__snapshots__/profiling-test.js.snap index c76f53d51e..524d7db2a9 100644 --- a/src/__tests__/__snapshots__/profiling-test.js.snap +++ b/src/__tests__/__snapshots__/profiling-test.js.snap @@ -11,6 +11,7 @@ Object { }, "commitIndex": 0, "interactions": Array [], + "priorityLevel": 99, "rootID": 1, "selfDurations": Map { 1 => 0, @@ -33,6 +34,7 @@ Object { }, "commitIndex": 1, "interactions": Array [], + "priorityLevel": 99, "rootID": 1, "selfDurations": Map { 3 => 0, @@ -53,6 +55,7 @@ Object { }, "commitIndex": 2, "interactions": Array [], + "priorityLevel": 99, "rootID": 1, "selfDurations": Map { 3 => 0, @@ -70,6 +73,7 @@ Object { }, "commitIndex": 3, "interactions": Array [], + "priorityLevel": 99, "rootID": 1, "selfDurations": Map { 2 => 10, @@ -91,6 +95,7 @@ Object { }, "commitIndex": 0, "interactions": Array [], + "priorityLevel": 99, "rootID": 1, "selfDurations": Map { 1 => 0, @@ -110,6 +115,7 @@ Object { }, "commitIndex": 1, "interactions": Array [], + "priorityLevel": 99, "rootID": 1, "selfDurations": Map { 3 => 0, @@ -127,6 +133,7 @@ Object { }, "commitIndex": 2, "interactions": Array [], + "priorityLevel": 99, "rootID": 1, "selfDurations": Map { 3 => 0, @@ -141,6 +148,7 @@ Object { }, "commitIndex": 3, "interactions": Array [], + "priorityLevel": 99, "rootID": 1, "selfDurations": Map { 2 => 10, @@ -324,6 +332,7 @@ Object { }, "commitIndex": 0, "interactions": Array [], + "priorityLevel": 99, "rootID": 1, "selfDurations": Map { 1 => 0, @@ -344,6 +353,7 @@ Object { }, "commitIndex": 0, "interactions": Array [], + "priorityLevel": 99, "rootID": 1, "selfDurations": Map { 1 => 0, @@ -362,6 +372,7 @@ Object { }, "commitIndex": 1, "interactions": Array [], + "priorityLevel": 99, "rootID": 1, "selfDurations": Map { 5 => 3, @@ -447,6 +458,7 @@ Object { }, "commitIndex": 0, "interactions": Array [], + "priorityLevel": 99, "rootID": 1, "selfDurations": Map { 1 => 0, @@ -464,6 +476,7 @@ Object { }, "commitIndex": 1, "interactions": Array [], + "priorityLevel": 99, "rootID": 1, "selfDurations": Map { 3 => 0, @@ -482,6 +495,7 @@ Object { }, "commitIndex": 2, "interactions": Array [], + "priorityLevel": 99, "rootID": 1, "selfDurations": Map { 3 => 0, @@ -696,6 +710,7 @@ Object { "timestamp": 0, }, ], + "priorityLevel": 99, "rootID": 1, "selfDurations": Map { 1 => 0, @@ -720,6 +735,7 @@ Object { "timestamp": 11, }, ], + "priorityLevel": 99, "rootID": 1, "selfDurations": Map { 3 => 0, @@ -906,6 +922,7 @@ Object { }, "commitIndex": 0, "interactions": Array [], + "priorityLevel": 99, "rootID": 1, "selfDurations": Map { 3 => 0, @@ -923,6 +940,7 @@ Object { }, "commitIndex": 1, "interactions": Array [], + "priorityLevel": 99, "rootID": 1, "selfDurations": Map { 3 => 0, @@ -937,6 +955,7 @@ Object { }, "commitIndex": 2, "interactions": Array [], + "priorityLevel": 99, "rootID": 1, "selfDurations": Map { 2 => 10, diff --git a/src/backend/renderer.js b/src/backend/renderer.js index c45240e60d..52386dab88 100644 --- a/src/backend/renderer.js +++ b/src/backend/renderer.js @@ -48,6 +48,7 @@ import type { PathFrame, PathMatch, ProfilingSummaryBackend, + ReactPriorityLevel, ReactRenderer, RendererInterface, } from './types'; @@ -1267,6 +1268,7 @@ export function attach( }) ), maxActualDuration: 0, + priorityLevel: null, }; } @@ -1284,7 +1286,7 @@ export function attach( recordUnmount(fiber, false); } - function handleCommitFiberRoot(root) { + function handleCommitFiberRoot(root, priorityLevel) { const current = root.current; const alternate = current.alternate; @@ -1309,6 +1311,7 @@ export function attach( }) ), maxActualDuration: 0, + priorityLevel: priorityLevel || null, }; } @@ -1955,6 +1958,7 @@ export function attach( durations: Array, interactions: Array, maxActualDuration: number, + priorityLevel: ReactPriorityLevel | null, |}; type CommitProfilingMetadataMap = Map>; @@ -1980,6 +1984,7 @@ export function attach( commitIndex, durations: commitProfilingData.durations, interactions: commitProfilingData.interactions, + priorityLevel: commitProfilingData.priorityLevel, rootID, }; } @@ -1993,6 +1998,7 @@ export function attach( commitIndex, durations: [], interactions: [], + priorityLevel: null, rootID, }; } diff --git a/src/backend/types.js b/src/backend/types.js index 4e5f3a190e..0af9f6358d 100644 --- a/src/backend/types.js +++ b/src/backend/types.js @@ -32,6 +32,16 @@ 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. @@ -126,6 +136,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, rootID: number, |}; @@ -193,7 +204,10 @@ export type RendererInterface = { ) => ExportedProfilingDataFromRenderer, getProfilingSummary: (rootID: number) => ProfilingSummaryBackend, getPathForElement: (id: number) => Array | null, - handleCommitFiberRoot: (fiber: Object) => void, + handleCommitFiberRoot: ( + fiber: Object, + commitPriority?: ReactPriorityLevel + ) => void, handleCommitFiberUnmount: (fiber: Object) => void, inspectElement: (id: number) => InspectedElement | null, logElementToConsole: (id: number) => void, @@ -234,7 +248,11 @@ export type DevToolsHook = { // React uses these methods. checkDCE: (fn: Function) => void, onCommitFiberUnmount: (rendererID: RendererID, fiber: Object) => void, - onCommitFiberRoot: (rendererID: RendererID, fiber: Object) => void, + onCommitFiberRoot: ( + rendererID: RendererID, + fiber: Object, + commitPriority?: ReactPriorityLevel + ) => void, }; export type HooksNode = { diff --git a/src/devtools/ProfilingCache.js b/src/devtools/ProfilingCache.js index fe40d7e0b3..c2f370f635 100644 --- a/src/devtools/ProfilingCache.js +++ b/src/devtools/ProfilingCache.js @@ -130,8 +130,9 @@ export default class ProfilingCache { rootID, commitIndex, actualDurations: new Map(), - selfDurations: new Map(), + priorityLevel: null, interactions: [], + selfDurations: new Map(), }); }); }, @@ -346,6 +347,7 @@ export default class ProfilingCache { commitIndex, durations, interactions, + priorityLevel, rootID, }: CommitDetailsBackend) => { const key = `${rootID}-${commitIndex}`; @@ -365,6 +367,7 @@ export default class ProfilingCache { actualDurations: actualDurationsMap, commitIndex, interactions, + priorityLevel, rootID, selfDurations: selfDurationsMap, }); diff --git a/src/devtools/views/Profiler/SidebarCommitInfo.js b/src/devtools/views/Profiler/SidebarCommitInfo.js index 635039b727..5e593fe401 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, formatTime } from './utils'; +import { formatDuration, formatPriorityLevel, formatTime } from './utils'; import { StoreContext } from '../context'; import styles from './SidebarCommitInfo.css'; @@ -56,7 +56,7 @@ export default function SidebarCommitInfo(_: Props) { } ); - const { interactions } = profilingCache.CommitDetails.read({ + const { interactions, priorityLevel } = profilingCache.CommitDetails.read({ commitIndex: selectedCommitIndex, rendererID: ((rendererID: any): number), rootID: ((rootID: any): number), @@ -72,6 +72,14 @@ export default function SidebarCommitInfo(_: Props) {
Commit information
    + {priorityLevel !== null && ( +
  • + :{' '} + + {formatPriorityLevel(priorityLevel)} + +
    • + )}
  • :{' '} diff --git a/src/devtools/views/Profiler/types.js b/src/devtools/views/Profiler/types.js index 7457973c30..d72f2028ab 100644 --- a/src/devtools/views/Profiler/types.js +++ b/src/devtools/views/Profiler/types.js @@ -5,6 +5,7 @@ import type { CommitDetailsBackend, InteractionsBackend, ProfilingSummaryBackend, + ReactPriorityLevel, } from 'src/backend/types'; export type CommitTreeNodeFrontend = {| @@ -42,6 +43,7 @@ export type CommitDetailsFrontend = {| actualDurations: Map, commitIndex: number, interactions: Array, + priorityLevel: ReactPriorityLevel | null, rootID: number, selfDurations: Map, |}; diff --git a/src/devtools/views/Profiler/utils.js b/src/devtools/views/Profiler/utils.js index 9ec8b18292..1b1a3558e0 100644 --- a/src/devtools/views/Profiler/utils.js +++ b/src/devtools/views/Profiler/utils.js @@ -1,6 +1,14 @@ // @flow import { PROFILER_EXPORT_VERSION } from 'src/constants'; +import { + ImmediatePriority, + UserBlockingPriority, + NormalPriority, + LowPriority, + IdlePriority, + NoPriority, +} from 'src/backend/types'; import type { ExportedProfilingSummaryFromFrontend, @@ -9,7 +17,10 @@ import type { ProfilingSnapshotNode, } from './types'; -import type { ExportedProfilingDataFromRenderer } from 'src/backend/types'; +import type { + ExportedProfilingDataFromRenderer, + ReactPriorityLevel, +} from 'src/backend/types'; const commitGradient = [ 'var(--color-commit-gradient-0)', @@ -152,10 +163,11 @@ export const prepareImportedProfilingData = ( } return { actualDurations: actualDurationsMap, - selfDurations: selfDurationsMap, commitIndex: commitDetailsBackendItem.commitIndex, interactions: commitDetailsBackendItem.interactions, + priorityLevel: commitDetailsBackendItem.priorityLevel, rootID: commitDetailsBackendItem.rootID, + selfDurations: selfDurationsMap, }; } ), @@ -184,6 +196,24 @@ 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) => diff --git a/src/hook.js b/src/hook.js index 23f7280839..98c1794d35 100644 --- a/src/hook.js +++ b/src/hook.js @@ -138,7 +138,7 @@ export function installHook(target: any): DevToolsHook | null { } } - function onCommitFiberRoot(rendererID, root) { + function onCommitFiberRoot(rendererID, root, priorityLevel) { const mountedRoots = hook.getFiberRoots(rendererID); const current = root.current; const isKnownRoot = mountedRoots.has(root); @@ -153,7 +153,7 @@ export function installHook(target: any): DevToolsHook | null { } const rendererInterface = rendererInterfaces.get(rendererID); if (rendererInterface != null) { - rendererInterface.handleCommitFiberRoot(root); + rendererInterface.handleCommitFiberRoot(root, priorityLevel); } } From 16a81feb7270989bfd39b7fb0c395d77421ebf2e Mon Sep 17 00:00:00 2001 From: Brian Vaughn Date: Thu, 16 May 2019 14:51:58 -0700 Subject: [PATCH 2/4] Moved priority level constants into rendeer interface --- .../__snapshots__/profiling-test.js.snap | 38 ++++++------- src/backend/renderer.js | 55 +++++++++++++++++-- src/backend/types.js | 19 +------ .../views/Profiler/SidebarCommitInfo.js | 6 +- src/devtools/views/Profiler/types.js | 3 +- src/devtools/views/Profiler/utils.js | 31 +---------- 6 files changed, 77 insertions(+), 75 deletions(-) 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) => From 53de5b69cc5bfdc3ce4a7993f3cb4082fb4a78ea Mon Sep 17 00:00:00 2001 From: Brian Vaughn Date: Mon, 20 May 2019 09:42:37 -0700 Subject: [PATCH 3/4] Updated test snapshot --- .../inspectedElementContext-test.js.snap | 22 +++++++++++++++++++ 1 file changed, 22 insertions(+) diff --git a/src/__tests__/__snapshots__/inspectedElementContext-test.js.snap b/src/__tests__/__snapshots__/inspectedElementContext-test.js.snap index 282c866805..163603eb7d 100644 --- a/src/__tests__/__snapshots__/inspectedElementContext-test.js.snap +++ b/src/__tests__/__snapshots__/inspectedElementContext-test.js.snap @@ -27,6 +27,28 @@ exports[`InspectedElementContext should inspect the currently selected element: } `; +exports[`InspectedElementContext should inspect the currently selected element: 2: Inspected element 2 2`] = ` +{ + "id": 2, + "owners": null, + "context": null, + "hooks": [ + { + "id": 0, + "isStateEditable": true, + "name": "State", + "value": 1, + "subHooks": [] + } + ], + "props": { + "foo": 1, + "bar": "abc" + }, + "state": null +} +`; + exports[`InspectedElementContext should poll for updates for the currently selected element: 1: mount 1`] = ` [root] From d44038071922c2fbde0d654411af146c71596e67 Mon Sep 17 00:00:00 2001 From: Brian Vaughn Date: Mon, 20 May 2019 09:54:07 -0700 Subject: [PATCH 4/4] Upgraded to canary with priority level info --- package.json | 10 +++--- shells/dev/app/ElementTypes/index.js | 18 ++++------ shells/dev/app/PriorityLevels/index.js | 45 ++++++++++++++++-------- yarn.lock | 47 +++++++++++++------------- 4 files changed, 66 insertions(+), 54 deletions(-) diff --git a/package.json b/package.json index 03d44c3931..5c81af9b7d 100644 --- a/package.json +++ b/package.json @@ -132,16 +132,16 @@ "opener": "^1.5.1", "prettier": "^1.16.4", "prop-types": "^15.6.2", - "react": "^0.0.0-6da04b5d8", + "react": "^0.0.0-50b50c26f", "react-color": "^2.11.7", - "react-dom": "^0.0.0-6da04b5d8", - "react-is": "^0.0.0-6da04b5d8", - "react-test-renderer": "^0.0.0-6da04b5d8", + "react-dom": "^0.0.0-50b50c26f", + "react-is": "^0.0.0-50b50c26f", + "react-test-renderer": "^0.0.0-50b50c26f", "react-virtualized-auto-sizer": "^1.0.2", "react-window": "^1.8.0", "request-promise": "^4.2.4", "rimraf": "^2.6.3", - "scheduler": "^0.0.0-6da04b5d8", + "scheduler": "^0.0.0-50b50c26f", "semver": "^5.5.1", "style-loader": "^0.23.1", "web-ext": "^3.0.0", diff --git a/shells/dev/app/ElementTypes/index.js b/shells/dev/app/ElementTypes/index.js index fa027f5926..6ef562596c 100644 --- a/shells/dev/app/ElementTypes/index.js +++ b/shells/dev/app/ElementTypes/index.js @@ -6,8 +6,6 @@ import React, { lazy, memo, Component, - // $FlowFixMe Flow thinks ConcurrentMode is stable - unstable_ConcurrentMode as ConcurrentMode, Fragment, // $FlowFixMe Flow doesn't know about the Profiler import yet Profiler, @@ -48,15 +46,13 @@ export default function ElementTypes() { {value => null} - - Loading...
}> - - - - - - - + Loading...}> + + + + + + diff --git a/shells/dev/app/PriorityLevels/index.js b/shells/dev/app/PriorityLevels/index.js index dec47e1fc9..2888451980 100644 --- a/shells/dev/app/PriorityLevels/index.js +++ b/shells/dev/app/PriorityLevels/index.js @@ -1,29 +1,46 @@ // @flow import React, { Fragment, useCallback, useState } from 'react'; -import { unstable_next as next } from 'scheduler'; +import { + unstable_IdlePriority as IdlePriority, + unstable_LowPriority as LowPriority, + unstable_runWithPriority as runWithPriority, +} from 'scheduler'; export default function PriorityLevels() { - const [count, setCount] = useState(0); + const [defaultPriority, setDefaultPriority] = useState(false); + const [idlePriority, setIdlePriority] = useState(false); + const [normalPriority, setLowPriority] = useState(false); + + const resetSequence = useCallback(() => { + setDefaultPriority(false); + setLowPriority(false); + setIdlePriority(false); + }, []); const startSequence = useCallback(() => { - setCount(1); - next(() => setCount(2)); + setDefaultPriority(true); + runWithPriority(LowPriority, () => setLowPriority(true)); + runWithPriority(IdlePriority, () => setIdlePriority(true)); }, []); + const labels = []; + if (defaultPriority) { + labels.push('(default priority)'); + } + if (normalPriority) { + labels.push('Low Priority'); + } + if (idlePriority) { + labels.push('Idle Priority'); + } + return (

Priority Levels

- - {count >= 1 && One} - {count >= 2 && Two} - {count >= 2 && ( - - )} + + + {labels.join(', ')} ); } - -const Text = ({ children }) => children; diff --git a/yarn.lock b/yarn.lock index 8e3eccc5fb..c21c8ae554 100644 --- a/yarn.lock +++ b/yarn.lock @@ -9748,20 +9748,20 @@ react-color@^2.11.7: reactcss "^1.2.0" tinycolor2 "^1.4.1" -react-dom@^0.0.0-6da04b5d8: - version "0.0.0-6da04b5d8" - resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-0.0.0-6da04b5d8.tgz#ee78e45a40771560c756b8fc7f1fa213f2179ebe" - integrity sha512-6oyfkucrweqCB5XyLsfEnPSWhvkFnttutkU9uUQovLAljuazgpAjvBy6MBGSewKptqch2OTNwopqvR3QUMD8AQ== +react-dom@^0.0.0-50b50c26f: + version "0.0.0-50b50c26f" + resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-0.0.0-50b50c26f.tgz#3cd8da0f2276ed4b7a926e1807d2675b2eb40227" + integrity sha512-da9qleWDdBdAguEIDvvpFE0iuS8hfcCSGgZTYKRQMlSh5A94Ktr1otL4rgDTFH+bNsOwz3XrvEBYRA6WaE9xzQ== dependencies: loose-envify "^1.1.0" object-assign "^4.1.1" prop-types "^15.6.2" - scheduler "0.0.0-6da04b5d8" + scheduler "0.0.0-50b50c26f" -react-is@0.0.0-6da04b5d8, react-is@^0.0.0-6da04b5d8: - version "0.0.0-6da04b5d8" - resolved "https://registry.yarnpkg.com/react-is/-/react-is-0.0.0-6da04b5d8.tgz#ded1f02e9f1e2b8456812d0d45c341d70b7bf7db" - integrity sha512-+Df3meqx+XUir+3dCqiHNAHruwmOAgXVp3TYmlUvgtPNBu+LF0OdchTMZ/xMUok1gYVoe4l/xhfs9CTEPkWt3g== +react-is@0.0.0-50b50c26f, react-is@^0.0.0-50b50c26f: + version "0.0.0-50b50c26f" + resolved "https://registry.yarnpkg.com/react-is/-/react-is-0.0.0-50b50c26f.tgz#c4003ffffef9bd2b287979f9041a23d12a607bf2" + integrity sha512-9Y6ZvdOVmOxXs9mGuFy6eXHBww8RJCtJAh94b1hkbjhnW8Mb5ADScDoxJBVxcNuX9hvDkhENspC96ZQK1NIv3g== react-is@^16.8.1: version "16.8.3" @@ -9773,15 +9773,15 @@ react-is@^16.8.4: resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.8.4.tgz#90f336a68c3a29a096a3d648ab80e87ec61482a2" integrity sha512-PVadd+WaUDOAciICm/J1waJaSvgq+4rHE/K70j0PFqKhkTBsPv/82UGQJNXAngz1fOQLLxI6z1sEDmJDQhCTAA== -react-test-renderer@^0.0.0-6da04b5d8: - version "0.0.0-6da04b5d8" - resolved "https://registry.yarnpkg.com/react-test-renderer/-/react-test-renderer-0.0.0-6da04b5d8.tgz#01bed04c5a4cf22339f0ae3b23f89bb45e9a8f2a" - integrity sha512-yDt5RPDXLZXTqlWS0jXMJ1IyS1e/UZXSr0L8bG0UCsna4T7A3HIYR2zChlydGXsxjGMZntKqEfm27hUhFgC06Q== +react-test-renderer@^0.0.0-50b50c26f: + version "0.0.0-50b50c26f" + resolved "https://registry.yarnpkg.com/react-test-renderer/-/react-test-renderer-0.0.0-50b50c26f.tgz#1a85cf9073ef5a932d03bee36fcfd9bf15aeae2c" + integrity sha512-gWc4L+mFIUCjvBpafR88n4/i/oaKHD6rzVyZY+XBou9MNtr2rRkjePOhBVsiYlCwkj+zZi6klV9b05TMzftosA== dependencies: object-assign "^4.1.1" prop-types "^15.6.2" - react-is "0.0.0-6da04b5d8" - scheduler "0.0.0-6da04b5d8" + react-is "0.0.0-50b50c26f" + scheduler "0.0.0-50b50c26f" react-virtualized-auto-sizer@^1.0.2: version "1.0.2" @@ -9796,15 +9796,14 @@ react-window@^1.8.0: "@babel/runtime" "^7.0.0" memoize-one ">=3.1.1 <6" -react@^0.0.0-6da04b5d8: - version "0.0.0-6da04b5d8" - resolved "https://registry.yarnpkg.com/react/-/react-0.0.0-6da04b5d8.tgz#583d81f73b26771da41170a5042a5ab0bdcfe37a" - integrity sha512-8hXBHwDCKxSVFqj5Kb4OskZz7//2fx2IpUnYyukYV8qyAHlXr0qUl3GxwuryhdPzJHlzi776WjN0YEmEEANhYA== +react@^0.0.0-50b50c26f: + version "0.0.0-50b50c26f" + resolved "https://registry.yarnpkg.com/react/-/react-0.0.0-50b50c26f.tgz#b782b579ce1f5d8bd696c5e45c744714ebecb111" + integrity sha512-jUAzS4DeWTdUZ/3kqm2T6C9OIpiAf2qdwVamCts0qzwYVni1/gUTOWK1ui0J+eaRzKxrIEzVvmCMxFd35lP/pA== dependencies: loose-envify "^1.1.0" object-assign "^4.1.1" prop-types "^15.6.2" - scheduler "0.0.0-6da04b5d8" reactcss@^1.2.0: version "1.2.3" @@ -10460,10 +10459,10 @@ sax@>=0.6.0, sax@^1.2.4: resolved "https://registry.yarnpkg.com/sax/-/sax-1.2.4.tgz#2816234e2378bddc4e5354fab5caa895df7100d9" integrity sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw== -scheduler@0.0.0-6da04b5d8, scheduler@^0.0.0-6da04b5d8: - version "0.0.0-6da04b5d8" - resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.0.0-6da04b5d8.tgz#5e0ec65c2b0a7f05ffdc5522fc3a6d95b693e5c9" - integrity sha512-upTrWBZvk4IjMsC/AcRpgCwjnSQl8i78+07KmcndqWOnWp7s4wauowWXhyswP9vucLtZaN5ussFdM3d7dXcTkw== +scheduler@0.0.0-50b50c26f, scheduler@^0.0.0-50b50c26f: + version "0.0.0-50b50c26f" + resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.0.0-50b50c26f.tgz#09bedde1c64d7a042b557bee2dbf5faf5fd58a50" + integrity sha512-LBN3zrP8iBdILOoYxybFtkU7j+ldZTHORKyYyVLwXuIwGQ8/Xhs5VZjNQ5R2Xru2zv3GGVpJSbd47EpDuD2EHw== dependencies: loose-envify "^1.1.0" object-assign "^4.1.1"