From 726e89bc19ea15f02428cb9da115f76af4dd6213 Mon Sep 17 00:00:00 2001 From: Nick Reiley Date: Sun, 10 May 2020 02:56:53 +0500 Subject: [PATCH 1/3] fix profiler root change error --- .../src/devtools/views/Profiler/RootSelector.js | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/RootSelector.js b/packages/react-devtools-shared/src/devtools/views/Profiler/RootSelector.js index 4506847e74504..e84444c6fae5f 100644 --- a/packages/react-devtools-shared/src/devtools/views/Profiler/RootSelector.js +++ b/packages/react-devtools-shared/src/devtools/views/Profiler/RootSelector.js @@ -14,7 +14,9 @@ import {ProfilerContext} from './ProfilerContext'; import styles from './RootSelector.css'; export default function RootSelector(_: {||}) { - const {profilingData, rootID, setRootID} = useContext(ProfilerContext); + const {profilingData, rootID, setRootID, selectFiber} = useContext( + ProfilerContext, + ); const options = []; if (profilingData !== null) { @@ -29,6 +31,7 @@ export default function RootSelector(_: {||}) { const handleChange = useCallback( ({currentTarget}) => { + selectFiber(null, null); setRootID(parseInt(currentTarget.value, 10)); }, [setRootID], From d840ca5869719cb12d079670d5044f80ff640f23 Mon Sep 17 00:00:00 2001 From: Nick Reiley Date: Sun, 10 May 2020 15:03:33 +0500 Subject: [PATCH 2/3] always clean fiber --- .../views/Profiler/ProfilerContext.js | 68 +++++++++++-------- .../devtools/views/Profiler/RootSelector.js | 7 +- 2 files changed, 41 insertions(+), 34 deletions(-) diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/ProfilerContext.js b/packages/react-devtools-shared/src/devtools/views/Profiler/ProfilerContext.js index f9e0460220a10..3346b2fa54c18 100644 --- a/packages/react-devtools-shared/src/devtools/views/Profiler/ProfilerContext.js +++ b/packages/react-devtools-shared/src/devtools/views/Profiler/ProfilerContext.js @@ -22,7 +22,7 @@ import type {ProfilingDataFrontend} from './types'; export type TabID = 'flame-chart' | 'ranked-chart' | 'interactions'; export type Context = {| - // Which tab is selexted in the Profiler UI? + // Which tab is selected in the Profiler UI? selectedTabID: TabID, selectTab(id: TabID): void, @@ -43,7 +43,7 @@ export type Context = {| // 1. The selected root in the Components tree (if it has any profiling data) or // 2. The first root in the list with profiling data. rootID: number | null, - setRootID: (id: number) => void, + setRootIDcleanFiber: (id: number) => void, // Controls whether commits are filtered by duration. // This value is controlled by a filter toggle UI in the Profiler toolbar. @@ -129,6 +129,38 @@ function ProfilerContextController({children}: Props) { setPrevProfilingData, ] = useState(null); const [rootID, setRootID] = useState(null); + const [selectedFiberID, selectFiberID] = useState(null); + const [selectedFiberName, selectFiberName] = useState(null); + + const selectFiber = useCallback( + (id: number | null, name: string | null) => { + selectFiberID(id); + selectFiberName(name); + + // Sync selection to the Components tab for convenience. + if (id !== null) { + const element = store.getElementByID(id); + + // Keep in mind that profiling data may be from a previous session. + // In that case, IDs may match up arbitrarily; to be safe, compare both ID and display name. + if (element !== null && element.displayName === name) { + dispatch({ + type: 'SELECT_ELEMENT_BY_ID', + payload: id, + }); + } + } + }, + [dispatch, selectFiberID, selectFiberName, store], + ); + + const setRootIDcleanFiber = useCallback( + (id: number | null) => { + selectFiber(null, null); + setRootID(id); + }, + [setRootID, selectFiber], + ); if (prevProfilingData !== profilingData) { batchedUpdates(() => { @@ -150,9 +182,9 @@ function ProfilerContextController({children}: Props) { selectedElementRootID !== null && dataForRoots.has(selectedElementRootID) ) { - setRootID(selectedElementRootID); + setRootIDcleanFiber(selectedElementRootID); } else { - setRootID(firstRootID); + setRootIDcleanFiber(firstRootID); } } } @@ -180,34 +212,10 @@ function ProfilerContextController({children}: Props) { null, ); const [selectedTabID, selectTab] = useState('flame-chart'); - const [selectedFiberID, selectFiberID] = useState(null); - const [selectedFiberName, selectFiberName] = useState(null); const [selectedInteractionID, selectInteraction] = useState( null, ); - const selectFiber = useCallback( - (id: number | null, name: string | null) => { - selectFiberID(id); - selectFiberName(name); - - // Sync selection to the Components tab for convenience. - if (id !== null) { - const element = store.getElementByID(id); - - // Keep in mind that profiling data may be from a previous session. - // In that case, IDs may match up arbitrarily; to be safe, compare both ID and display name. - if (element !== null && element.displayName === name) { - dispatch({ - type: 'SELECT_ELEMENT_BY_ID', - payload: id, - }); - } - } - }, - [dispatch, selectFiberID, selectFiberName, store], - ); - if (isProfiling) { batchedUpdates(() => { if (selectedCommitIndex !== null) { @@ -237,7 +245,7 @@ function ProfilerContextController({children}: Props) { supportsProfiling, rootID, - setRootID, + setRootIDcleanFiber, isCommitFilterEnabled, setIsCommitFilterEnabled, @@ -267,7 +275,7 @@ function ProfilerContextController({children}: Props) { supportsProfiling, rootID, - setRootID, + setRootIDcleanFiber, isCommitFilterEnabled, setIsCommitFilterEnabled, diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/RootSelector.js b/packages/react-devtools-shared/src/devtools/views/Profiler/RootSelector.js index e84444c6fae5f..c9c77290c867f 100644 --- a/packages/react-devtools-shared/src/devtools/views/Profiler/RootSelector.js +++ b/packages/react-devtools-shared/src/devtools/views/Profiler/RootSelector.js @@ -14,7 +14,7 @@ import {ProfilerContext} from './ProfilerContext'; import styles from './RootSelector.css'; export default function RootSelector(_: {||}) { - const {profilingData, rootID, setRootID, selectFiber} = useContext( + const {profilingData, rootID, setRootIDcleanFiber} = useContext( ProfilerContext, ); @@ -31,10 +31,9 @@ export default function RootSelector(_: {||}) { const handleChange = useCallback( ({currentTarget}) => { - selectFiber(null, null); - setRootID(parseInt(currentTarget.value, 10)); + setRootIDcleanFiber(parseInt(currentTarget.value, 10)); }, - [setRootID], + [setRootIDcleanFiber], ); if (profilingData === null || profilingData.dataForRoots.size <= 1) { From aaf40f4bbeead38cb4759389169e1d642ff096e1 Mon Sep 17 00:00:00 2001 From: Nick Reiley Date: Tue, 12 May 2020 23:52:20 +0500 Subject: [PATCH 3/3] change name --- .../src/devtools/views/Profiler/ProfilerContext.js | 13 +++++++------ .../src/devtools/views/Profiler/RootSelector.js | 8 +++----- 2 files changed, 10 insertions(+), 11 deletions(-) diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/ProfilerContext.js b/packages/react-devtools-shared/src/devtools/views/Profiler/ProfilerContext.js index 3346b2fa54c18..1108a6bb64ff0 100644 --- a/packages/react-devtools-shared/src/devtools/views/Profiler/ProfilerContext.js +++ b/packages/react-devtools-shared/src/devtools/views/Profiler/ProfilerContext.js @@ -43,7 +43,7 @@ export type Context = {| // 1. The selected root in the Components tree (if it has any profiling data) or // 2. The first root in the list with profiling data. rootID: number | null, - setRootIDcleanFiber: (id: number) => void, + setRootID: (id: number) => void, // Controls whether commits are filtered by duration. // This value is controlled by a filter toggle UI in the Profiler toolbar. @@ -154,7 +154,7 @@ function ProfilerContextController({children}: Props) { [dispatch, selectFiberID, selectFiberName, store], ); - const setRootIDcleanFiber = useCallback( + const setRootIDAndClearFiber = useCallback( (id: number | null) => { selectFiber(null, null); setRootID(id); @@ -182,9 +182,9 @@ function ProfilerContextController({children}: Props) { selectedElementRootID !== null && dataForRoots.has(selectedElementRootID) ) { - setRootIDcleanFiber(selectedElementRootID); + setRootIDAndClearFiber(selectedElementRootID); } else { - setRootIDcleanFiber(firstRootID); + setRootIDAndClearFiber(firstRootID); } } } @@ -245,7 +245,7 @@ function ProfilerContextController({children}: Props) { supportsProfiling, rootID, - setRootIDcleanFiber, + setRootID: setRootIDAndClearFiber, isCommitFilterEnabled, setIsCommitFilterEnabled, @@ -275,7 +275,8 @@ function ProfilerContextController({children}: Props) { supportsProfiling, rootID, - setRootIDcleanFiber, + setRootID, + setRootIDAndClearFiber, isCommitFilterEnabled, setIsCommitFilterEnabled, diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/RootSelector.js b/packages/react-devtools-shared/src/devtools/views/Profiler/RootSelector.js index c9c77290c867f..4506847e74504 100644 --- a/packages/react-devtools-shared/src/devtools/views/Profiler/RootSelector.js +++ b/packages/react-devtools-shared/src/devtools/views/Profiler/RootSelector.js @@ -14,9 +14,7 @@ import {ProfilerContext} from './ProfilerContext'; import styles from './RootSelector.css'; export default function RootSelector(_: {||}) { - const {profilingData, rootID, setRootIDcleanFiber} = useContext( - ProfilerContext, - ); + const {profilingData, rootID, setRootID} = useContext(ProfilerContext); const options = []; if (profilingData !== null) { @@ -31,9 +29,9 @@ export default function RootSelector(_: {||}) { const handleChange = useCallback( ({currentTarget}) => { - setRootIDcleanFiber(parseInt(currentTarget.value, 10)); + setRootID(parseInt(currentTarget.value, 10)); }, - [setRootIDcleanFiber], + [setRootID], ); if (profilingData === null || profilingData.dataForRoots.size <= 1) {