{"body":"","files":[{"status":"A","path":"src\/devtools\/views\/Profiler\/CommitFilterModalContext.js"},{"status":"M","path":"src\/devtools\/views\/Profiler\/CommitFlamegraph.js"},{"status":"M","path":"src\/devtools\/views\/Profiler\/CommitRanked.js"},{"status":"M","path":"src\/devtools\/views\/Profiler\/NoCommitData.css"},{"status":"M","path":"src\/devtools\/views\/Profiler\/NoCommitData.js"},{"status":"M","path":"src\/devtools\/views\/Profiler\/Profiler.js"},{"status":"M","path":"src\/devtools\/views\/Profiler\/SidebarCommitInfo.js"},{"status":"M","path":"src\/devtools\/views\/Profiler\/SnapshotSelector.js"},{"status":"A","path":"src\/devtools\/views\/Profiler\/ToggleCommitFilterModalButton.js"}],"parents":["5718eaf0f323c50fa44ff321777f09eac5cb5a7f"],"patch":"diff --git a\/src\/devtools\/views\/Profiler\/CommitFilterModalContext.js b\/src\/devtools\/views\/Profiler\/CommitFilterModalContext.js\nnew file mode 100644\nindex 0000000000..fc68ad88a8\n--- \/dev\/null\n+++ b\/src\/devtools\/views\/Profiler\/CommitFilterModalContext.js\n@@ -0,0 +1,35 @@\n+\/\/ @flow\n+\n+import React, { createContext, useMemo, useState } from 'react';\n+\n+type Context = {|\n+ isFilterModalShowing: boolean,\n+ setIsFilterModalShowing: (value: boolean) => void,\n+|};\n+\n+const CommitFilterModalContext = createContext(((null: any): Context));\n+CommitFilterModalContext.displayName = 'CommitFilterModalContext';\n+\n+type Props = {|\n+ children: React$Node,\n+|};\n+\n+function CommitFilterModalContextController({ children }: Props) {\n+ const [isFilterModalShowing, setIsFilterModalShowing] = useState(false);\n+\n+ const value = useMemo(\n+ () => ({\n+ isFilterModalShowing,\n+ setIsFilterModalShowing,\n+ }),\n+ [isFilterModalShowing]\n+ );\n+\n+ return (\n+ \n+ {children}\n+ <\/CommitFilterModalContext.Provider>\n+ );\n+}\n+\n+export { CommitFilterModalContext, CommitFilterModalContextController };\ndiff --git a\/src\/devtools\/views\/Profiler\/CommitFlamegraph.js b\/src\/devtools\/views\/Profiler\/CommitFlamegraph.js\nindex 91a9274136..a1923303b9 100644\n--- a\/src\/devtools\/views\/Profiler\/CommitFlamegraph.js\n+++ b\/src\/devtools\/views\/Profiler\/CommitFlamegraph.js\n@@ -13,6 +13,7 @@ import { StoreContext } from '..\/context';\n import styles from '.\/CommitFlamegraph.css';\n \n import type { ChartData, ChartNode } from '.\/FlamegraphChartBuilder';\n+import type { CommitDetails, CommitTree } from '.\/types';\n \n export type ItemData = {|\n chartData: ChartData,\n@@ -24,7 +25,11 @@ export type ItemData = {|\n |};\n \n export default function CommitFlamegraphAutoSizer(_: {||}) {\n- const { selectFiber } = useContext(ProfilerContext);\n+ const { profilingCache } = useContext(StoreContext);\n+ const { rendererID, rootID, selectedCommitIndex, selectFiber } = useContext(\n+ ProfilerContext\n+ );\n+\n const deselectCurrentFiber = useCallback(\n event => {\n event.stopPropagation();\n@@ -33,58 +38,78 @@ export default function CommitFlamegraphAutoSizer(_: {||}) {\n [selectFiber]\n );\n \n- return (\n-

\n- \n- {({ height, width }) => (\n- \n- )}\n- <\/AutoSizer>\n- <\/div>\n- );\n-}\n-\n-function CommitFlamegraph({\n- height,\n- width,\n-}: {|\n- height: number,\n- width: number,\n-|}) {\n- const {\n- rendererID,\n- rootID,\n- selectedCommitIndex,\n- selectFiber,\n- selectedFiberID,\n- } = useContext(ProfilerContext);\n-\n- const { profilingCache } = useContext(StoreContext);\n-\n const profilingSummary = profilingCache.ProfilingSummary.read({\n rendererID: ((rendererID: any): number),\n rootID: ((rootID: any): number),\n });\n \n- const commitDetails = profilingCache.CommitDetails.read({\n- commitIndex: ((selectedCommitIndex: any): number),\n- rendererID: ((rendererID: any): number),\n- rootID: ((rootID: any): number),\n- });\n+ let commitDetails: CommitDetails | null = null;\n+ let commitTree: CommitTree | null = null;\n+ let chartData: ChartData | null = null;\n+ if (selectedCommitIndex !== null) {\n+ commitDetails = profilingCache.CommitDetails.read({\n+ commitIndex: selectedCommitIndex,\n+ rendererID: ((rendererID: any): number),\n+ rootID: ((rootID: any): number),\n+ });\n+\n+ commitTree = profilingCache.getCommitTree({\n+ commitIndex: selectedCommitIndex,\n+ profilingSummary,\n+ rendererID: ((rendererID: any): number),\n+ rootID: ((rootID: any): number),\n+ });\n+\n+ chartData = profilingCache.getFlamegraphChartData({\n+ commitDetails,\n+ commitIndex: selectedCommitIndex,\n+ commitTree,\n+ rootID: ((rootID: any): number),\n+ });\n+ }\n \n- const commitTree = profilingCache.getCommitTree({\n- commitIndex: ((selectedCommitIndex: any): number),\n- profilingSummary,\n- rendererID: ((rendererID: any): number),\n- rootID: ((rootID: any): number),\n- });\n+ if (\n+ commitDetails != null &&\n+ commitTree != null &&\n+ chartData != null &&\n+ chartData.depth > 0\n+ ) {\n+ return (\n+

\n+ \n+ {({ height, width }) => (\n+ \n+ )}\n+ <\/AutoSizer>\n+ <\/div>\n+ );\n+ } else {\n+ return ;\n+ }\n+}\n \n- const chartData = profilingCache.getFlamegraphChartData({\n- commitDetails,\n- commitIndex: ((selectedCommitIndex: any): number),\n- commitTree,\n- rootID: ((rootID: any): number),\n- });\n+type Props = {|\n+ chartData: ChartData,\n+ commitDetails: CommitDetails,\n+ commitTree: CommitTree,\n+ height: number,\n+ width: number,\n+|};\n+\n+function CommitFlamegraph({\n+ chartData,\n+ commitDetails,\n+ commitTree,\n+ height,\n+ width,\n+}: Props) {\n+ const { selectFiber, selectedFiberID } = useContext(ProfilerContext);\n \n const selectedChartNodeIndex = useMemo(() => {\n if (selectedFiberID === null) {\n@@ -123,12 +148,6 @@ function CommitFlamegraph({\n [chartData, selectedChartNode, selectedChartNodeIndex, selectFiber, width]\n );\n \n- \/\/ If a commit contains no fibers with an actualDuration > 0,\n- \/\/ Display a fallback message.\n- if (chartData.depth === 0) {\n- return ;\n- }\n-\n return (\n {\n event.stopPropagation();\n@@ -33,50 +38,78 @@ export default function CommitRankedAutoSizer(_: {||}) {\n [selectFiber]\n );\n \n- return (\n-

\n- \n- {({ height, width }) => }\n- <\/AutoSizer>\n- <\/div>\n- );\n-}\n-\n-function CommitRanked({ height, width }: {| height: number, width: number |}) {\n- const {\n- rendererID,\n- rootID,\n- selectedCommitIndex,\n- selectedFiberID,\n- selectFiber,\n- } = useContext(ProfilerContext);\n-\n- const { profilingCache } = useContext(StoreContext);\n-\n const profilingSummary = profilingCache.ProfilingSummary.read({\n rendererID: ((rendererID: any): number),\n rootID: ((rootID: any): number),\n });\n \n- const commitDetails = profilingCache.CommitDetails.read({\n- commitIndex: ((selectedCommitIndex: any): number),\n- rendererID: ((rendererID: any): number),\n- rootID: ((rootID: any): number),\n- });\n+ let commitDetails: CommitDetails | null = null;\n+ let commitTree: CommitTree | null = null;\n+ let chartData: ChartData | null = null;\n+ if (selectedCommitIndex !== null) {\n+ commitDetails = profilingCache.CommitDetails.read({\n+ commitIndex: selectedCommitIndex,\n+ rendererID: ((rendererID: any): number),\n+ rootID: ((rootID: any): number),\n+ });\n+\n+ commitTree = profilingCache.getCommitTree({\n+ commitIndex: selectedCommitIndex,\n+ profilingSummary,\n+ rendererID: ((rendererID: any): number),\n+ rootID: ((rootID: any): number),\n+ });\n+\n+ chartData = profilingCache.getRankedChartData({\n+ commitDetails,\n+ commitIndex: selectedCommitIndex,\n+ commitTree,\n+ rootID: ((rootID: any): number),\n+ });\n+ }\n \n- const commitTree = profilingCache.getCommitTree({\n- commitIndex: ((selectedCommitIndex: any): number),\n- profilingSummary,\n- rendererID: ((rendererID: any): number),\n- rootID: ((rootID: any): number),\n- });\n+ if (\n+ commitDetails != null &&\n+ commitTree != null &&\n+ chartData != null &&\n+ chartData.nodes.length > 0\n+ ) {\n+ return (\n+

\n+ \n+ {({ height, width }) => (\n+ \n+ )}\n+ <\/AutoSizer>\n+ <\/div>\n+ );\n+ } else {\n+ return ;\n+ }\n+}\n \n- const chartData = profilingCache.getRankedChartData({\n- commitDetails,\n- commitIndex: ((selectedCommitIndex: any): number),\n- commitTree,\n- rootID: ((rootID: any): number),\n- });\n+type Props = {|\n+ chartData: ChartData,\n+ commitDetails: CommitDetails,\n+ commitTree: CommitTree,\n+ height: number,\n+ width: number,\n+|};\n+\n+function CommitRanked({\n+ chartData,\n+ commitDetails,\n+ commitTree,\n+ height,\n+ width,\n+}: Props) {\n+ const { selectedFiberID, selectFiber } = useContext(ProfilerContext);\n \n const selectedFiberIndex = useMemo(\n () => getNodeIndex(chartData, selectedFiberID),\n@@ -95,12 +128,6 @@ function CommitRanked({ height, width }: {| height: number, width: number |}) {\n [chartData, selectedFiberID, selectedFiberIndex, selectFiber, width]\n );\n \n- \/\/ If a commit contains no fibers with an actualDuration > 0,\n- \/\/ Display a fallback message.\n- if (chartData.nodes.length === 0) {\n- return ;\n- }\n-\n return (\n \n-

\n- There is no timing data to display for the currently selected commit.\n- <\/p>\n-

\n- This can indicate that a render occurred too quickly for the timing API\n- to measure. Try selecting another commit in the upper, right-hand\n- corner.\n- <\/p>\n- <\/div>\n- );\n+export default function NoCommitData(_: {||}) {\n+ const { rootHasProfilingData } = useContext(ProfilerContext);\n+\n+ if (rootHasProfilingData) {\n+ return (\n+

\n+

\n+ There is no data matching the current filter criteria.\n+ <\/p>\n+

\n+ Try adjusting the commit filter \n+ <\/p>\n+ <\/div>\n+ );\n+ } else {\n+ return (\n+

\n+

\n+ There is no timing data to display for the currently selected commit.\n+ <\/p>\n+

\n+ This can indicate that a render occurred too quickly for the timing\n+ API to measure. Try selecting another commit in the upper, right-hand\n+ corner.\n+ <\/p>\n+ <\/div>\n+ );\n+ }\n }\ndiff --git a\/src\/devtools\/views\/Profiler\/Profiler.js b\/src\/devtools\/views\/Profiler\/Profiler.js\nindex 97f39b8f65..8f0276e76c 100644\n--- a\/src\/devtools\/views\/Profiler\/Profiler.js\n+++ b\/src\/devtools\/views\/Profiler\/Profiler.js\n@@ -1,10 +1,12 @@\n \/\/ @flow\n \n-import React, { Suspense, useCallback, useContext, useState } from 'react';\n+import React, { Suspense, useCallback, useContext } from 'react';\n import { createPortal } from 'react-dom';\n+import {\n+ CommitFilterModalContext,\n+ CommitFilterModalContextController,\n+} from '.\/CommitFilterModalContext';\n import { ProfilerContext } from '.\/ProfilerContext';\n-import Button from '..\/Button';\n-import ButtonIcon from '..\/ButtonIcon';\n import TabBar from '..\/TabBar';\n import CommitFlamegraph from '.\/CommitFlamegraph';\n import CommitRanked from '.\/CommitRanked';\n@@ -15,6 +17,7 @@ import ReloadAndProfileButton from '.\/ReloadAndProfileButton';\n import SnapshotSelector from '.\/SnapshotSelector';\n import SidebarCommitInfo from '.\/SidebarCommitInfo';\n import SidebarInteractions from '.\/SidebarInteractions';\n+import ToggleCommitFilterModalButton from '.\/ToggleCommitFilterModalButton';\n \n import styles from '.\/Profiler.css';\n \n@@ -41,7 +44,11 @@ export default function Profiler({\n \/>\n );\n } else {\n- children = ;\n+ children = (\n+ \n+ \n+ <\/CommitFilterModalContextController>\n+ );\n }\n \n return portalContainer != null\n@@ -105,9 +112,10 @@ function ProfilerFallback() {\n \/\/ NOTE that the structure of this UI should mirror NonSuspendingProfiler.\n function SuspendingProfiler() {\n const { selectedTabID, selectTab } = useContext(ProfilerContext);\n- const [isFilterModalShowing, setIsFilterModalShowing] = useState(false);\n+ const { isFilterModalShowing, setIsFilterModalShowing } = useContext(\n+ CommitFilterModalContext\n+ );\n \n- const showFilterModal = useCallback(() => setIsFilterModalShowing(true));\n const dismissFilterModal = useCallback(() => setIsFilterModalShowing(false));\n \n let view = null;\n@@ -153,9 +161,7 @@ function SuspendingProfiler() {\n tabs={tabs}\n \/>\n

\n-

dillon1000/react

Files changed