{"commit":{"shortRevision":"e8f84dd5c4","revision":"e8f84dd5c4d02ca8278d57e0d1406ff075a7ffb1","authoredAt":"2019-03-15T08:34:08-07:00","authorName":"Brian Vaughn","authorEmail":"bvaughn@fb.com","subject":"Iterating on Profiling tab suspense. Stashing changes but planning to refactor immediately."},"body":"","parents":["210c2371cf20b17e5c25267f375abdb9ec6172c2"],"files":[{"status":"M","path":"src\/devtools\/store.js"},{"status":"M","path":"src\/devtools\/views\/Profiler\/FilterModal.js"},{"status":"M","path":"src\/devtools\/views\/Profiler\/Profiler.js"},{"status":"D","path":"src\/devtools\/views\/Profiler\/ProfilerContext.js"},{"status":"A","path":"src\/devtools\/views\/Profiler\/ProfilerDataContext.js"},{"status":"A","path":"src\/devtools\/views\/Profiler\/ProfilerStatusContext.js"},{"status":"M","path":"src\/devtools\/views\/Profiler\/RecordToggle.js"},{"status":"M","path":"src\/devtools\/views\/Profiler\/SnapshotCommitList.js"},{"status":"M","path":"src\/devtools\/views\/Profiler\/SnapshotCommitListItem.js"},{"status":"M","path":"src\/devtools\/views\/Profiler\/SnapshotSelector.js"},{"status":"M","path":"src\/devtools\/views\/TabBar.css"},{"status":"M","path":"src\/devtools\/views\/hooks.js"}],"patch":"diff --git a\/src\/devtools\/store.js b\/src\/devtools\/store.js\nindex c1fe80ebbe..ba731a0fd1 100644\n--- a\/src\/devtools\/store.js\n+++ b\/src\/devtools\/store.js\n@@ -275,16 +275,24 @@ export default class Store extends EventEmitter {\n }\n \n startProfiling(): void {\n+ this._bridge.send('startProfiling');\n+\n \/\/ Invalidate suspense cache if profiling data is being (re-)recorded.\n+ \/\/ Note that we clear now because any existing data is \"stale\".\n this._profilingCache.invalidate();\n \n- this._bridge.send('startProfiling');\n this._isProfiling = false;\n this.emit('isProfiling');\n }\n \n stopProfiling(): void {\n this._bridge.send('stopProfiling');\n+\n+ \/\/ Invalidate suspense cache if profiling data is being (re-)recorded.\n+ \/\/ Note that we clear again, in case any views read from the cache while profiling.\n+ \/\/ (That would have resolved a now-stale value without any profiling data.)\n+ this._profilingCache.invalidate();\n+\n this._isProfiling = false;\n this.emit('isProfiling');\n }\ndiff --git a\/src\/devtools\/views\/Profiler\/FilterModal.js b\/src\/devtools\/views\/Profiler\/FilterModal.js\nindex 8e91ef0a0d..085fee0a7f 100644\n--- a\/src\/devtools\/views\/Profiler\/FilterModal.js\n+++ b\/src\/devtools\/views\/Profiler\/FilterModal.js\n@@ -1,8 +1,7 @@\n \/\/ @flow\n \n-import React, { useCallback, useContext, useEffect, useRef } from 'react';\n-import { useModalDismissSignal } from '..\/hooks';\n-import { ProfilerContext } from '.\/ProfilerContext';\n+import React, { useCallback, useEffect, useRef } from 'react';\n+import { useLocalStorage, useModalDismissSignal } from '..\/hooks';\n \n import styles from '.\/FilterModal.css';\n \n@@ -11,12 +10,14 @@ type Props = {|\n |};\n \n export default function FilterModal({ dismissModal }: Props) {\n- const {\n- isMinCommitDurationEnabled,\n- minCommitDuration,\n- setMinCommitDuration,\n- setIsMinCommitDurationEnabled,\n- } = useContext(ProfilerContext);\n+ const [\n+ isCommitFilterEnabled,\n+ setIsCommitFilterEnabled,\n+ ] = useLocalStorage('isCommitFilterEnabled', false);\n+ const [minCommitDuration, setMinCommitDuration] = useLocalStorage(\n+ 'minCommitDuration',\n+ 0\n+ );\n \n const handleNumberChange = useCallback(\n ({ currentTarget }) => {\n@@ -30,14 +31,14 @@ export default function FilterModal({ dismissModal }: Props) {\n \n const handleEnabledChange = useCallback(\n ({ currentTarget }) => {\n- setIsMinCommitDurationEnabled(currentTarget.checked);\n+ setIsCommitFilterEnabled(currentTarget.checked);\n if (currentTarget.checked) {\n if (inputRef.current !== null) {\n inputRef.current.focus();\n }\n }\n },\n- [setIsMinCommitDurationEnabled]\n+ [setIsCommitFilterEnabled]\n );\n \n const inputRef = useRef(null);\n@@ -56,7 +57,7 @@ export default function FilterModal({ dismissModal }: Props) {\n

\n \n {' '}\ndiff --git a\/src\/devtools\/views\/Profiler\/Profiler.js b\/src\/devtools\/views\/Profiler\/Profiler.js\nindex e02630d699..2e835066b5 100644\n--- a\/src\/devtools\/views\/Profiler\/Profiler.js\n+++ b\/src\/devtools\/views\/Profiler\/Profiler.js\n@@ -1,7 +1,11 @@\n \/\/ @flow\n \n-import React, { useCallback, useContext, useState } from 'react';\n-import { ProfilerContext, ProfilerContextController } from '.\/ProfilerContext';\n+import React, { Suspense, useCallback, useContext, useState } from 'react';\n+import { ProfilerDataContextController } from '.\/ProfilerDataContext';\n+import {\n+ ProfilerStatusContext,\n+ ProfilerStatusContextController,\n+} from '.\/ProfilerStatusContext';\n import Button from '..\/Button';\n import ButtonIcon from '..\/ButtonIcon';\n import TabBar from '..\/TabBar';\n@@ -15,14 +19,23 @@ export type Props = {||};\n \n export default function ProfilerOuter(_: Props) {\n return (\n- \n- \n- <\/ProfilerContextController>\n+ \n+ }>\n+ \n+ \n+ <\/ProfilerDataContextController>\n+ <\/Suspense>\n+ <\/ProfilerStatusContextController>\n );\n }\n \n+function ProfilerFallback() {\n+ \/\/ TODO (profiling) Real fallback UI\n+ return null;\n+}\n+\n function ProfilerInner(_: Props) {\n- const { hasProfilingData, isProfiling } = useContext(ProfilerContext);\n+ const { hasProfilingData, isProfiling } = useContext(ProfilerStatusContext);\n \n const showProfilingControls = !isProfiling && hasProfilingData;\n \ndiff --git a\/src\/devtools\/views\/Profiler\/ProfilerContext.js b\/src\/devtools\/views\/Profiler\/ProfilerContext.js\ndeleted file mode 100644\nindex 9b02eed690..0000000000\n--- a\/src\/devtools\/views\/Profiler\/ProfilerContext.js\n+++ \/dev\/null\n@@ -1,149 +0,0 @@\n-\/\/ @flow\n-\n-import React, {\n- createContext,\n- useCallback,\n- useContext,\n- useMemo,\n- useState,\n-} from 'react';\n-import { useSubscription } from '..\/hooks';\n-import { TreeContext } from 'src\/devtools\/views\/Elements\/TreeContext';\n-import { StoreContext } from '..\/context';\n-import { useLocalStorage } from '..\/hooks';\n-import Store from '..\/..\/store';\n-\n-type Context = {|\n- commitIndex: number,\n- hasProfilingData: boolean,\n- isMinCommitDurationEnabled: boolean,\n- isProfiling: boolean,\n- minCommitDuration: number,\n- rendererID: number | null,\n- rootID: number | null,\n- setCommitIndex: (value: number) => void,\n- setMinCommitDuration: (value: number) => void,\n- setIsMinCommitDurationEnabled: (value: boolean) => void,\n- startProfiling(value: boolean): void,\n- stopProfiling(value: boolean): void,\n-|};\n-\n-const ProfilerContext = createContext(((null: any): Context));\n-ProfilerContext.displayName = 'ProfilerContext';\n-\n-type StoreProfilingState = {|\n- hasProfilingData: boolean,\n- isProfiling: boolean,\n-|};\n-\n-type Props = {|\n- children: React$Node,\n-|};\n-\n-function ProfilerContextController({ children }: Props) {\n- const store = useContext(StoreContext);\n-\n- const { isProfiling, hasProfilingData } = useSubscription<\n- StoreProfilingState,\n- Store\n- >(\n- useMemo(\n- () => ({\n- source: store,\n- getCurrentValue: (store: Store) => ({\n- hasProfilingData: store.hasProfilingData,\n- isProfiling: store.isProfiling,\n- }),\n- subscribe: (store: Store, callback: Function) => {\n- store.addListener('isProfiling', callback);\n- return () => store.removeListener('isProfiling', callback);\n- },\n- }),\n- [store]\n- )\n- );\n-\n- const startProfiling = useCallback(() => store.startProfiling(), [store]);\n- const stopProfiling = useCallback(() => store.stopProfiling(), [store]);\n-\n- \/\/ TODO (profiling) The browser extension is a multi-root app,\n- \/\/ so ti won't work for the \"Profiling\" root to depend on a value that's set by the \"Elements\" root.\n- \/\/ We'll either need to lift that state up into the (shared) Store,\n- \/\/ or use a portal to share the contexts themselves between Chrome tabs.\n- const { selectedElementID } = useContext(TreeContext);\n-\n- \/\/ If no root is selected, assume the first root.\n- \/\/ Many React apps are single root anyway.\n- let rendererID = null;\n- let rootID = null;\n- if (selectedElementID) {\n- rendererID = store.getRendererIDForElement(\n- ((selectedElementID: any): number)\n- );\n- rootID = store.getRootIDForElement(((selectedElementID: any): number));\n- } else if (store.roots.length > 0) {\n- rootID = store.roots[0];\n- rendererID = store.getRendererIDForElement(((rootID: any): number));\n- }\n-\n- const [commitIndex, setCommitIndex] = useState(0);\n- const [prevRootID, setPrevRootID] = useState(rootID);\n- if (prevRootID !== rootID) {\n- setPrevRootID(rootID);\n- setCommitIndex(0);\n- }\n-\n- const [prevIsProfiling, setPrevIsProfiling] = useState(isProfiling);\n- if (prevIsProfiling !== isProfiling) {\n- setPrevIsProfiling(isProfiling);\n- setCommitIndex(0);\n- }\n-\n- const [\n- isMinCommitDurationEnabled,\n- setIsMinCommitDurationEnabled,\n- ] = useLocalStorage('isMinCommitDurationEnabled', false);\n- const [minCommitDuration, setMinCommitDuration] = useLocalStorage(\n- 'minCommitDuration',\n- 0\n- );\n-\n- const value = useMemo(\n- () => ({\n- commitIndex,\n- hasProfilingData,\n- isMinCommitDurationEnabled,\n- isProfiling,\n- minCommitDuration,\n- rendererID,\n- rootID,\n- setMinCommitDuration,\n- setIsMinCommitDurationEnabled,\n- setCommitIndex,\n- startProfiling,\n- stopProfiling,\n- }),\n- [\n- commitIndex,\n- hasProfilingData,\n- isMinCommitDurationEnabled,\n- isProfiling,\n- minCommitDuration,\n- rendererID,\n- rootID,\n- setMinCommitDuration,\n- setIsMinCommitDurationEnabled,\n- setCommitIndex,\n- startProfiling,\n- stopProfiling,\n- ]\n- );\n-\n- return (\n- \n- {children}\n- <\/ProfilerContext.Provider>\n- );\n-}\n-\n-export { ProfilerContext, ProfilerContextController };\ndiff --git a\/src\/devtools\/views\/Profiler\/ProfilerDataContext.js b\/src\/devtools\/views\/Profiler\/ProfilerDataContext.js\nnew file mode 100644\nindex 0000000000..93b79316a6\n--- \/dev\/null\n+++ b\/src\/devtools\/views\/Profiler\/ProfilerDataContext.js\n@@ -0,0 +1,94 @@\n+\/\/ @flow\n+\n+import React, { createContext, useContext, useMemo, useState } from 'react';\n+import { TreeContext } from 'src\/devtools\/views\/Elements\/TreeContext';\n+import { StoreContext } from '..\/context';\n+import { useLocalStorage } from '..\/hooks';\n+import { ProfilerStatusContext } from '.\/ProfilerStatusContext';\n+\n+type Context = {|\n+ commitIndex: number | null,\n+ filteredCommitIndices: Array,\n+ rendererID: number | null,\n+ rootID: number | null,\n+ setCommitIndex: (value: number) => void,\n+|};\n+\n+const ProfilerDataContext = createContext(((null: any): Context));\n+ProfilerDataContext.displayName = 'ProfilerDataContext';\n+\n+type Props = {|\n+ children: React$Node,\n+|};\n+\n+function ProfilerDataContextController({ children }: Props) {\n+ const store = useContext(StoreContext);\n+\n+ \/\/ TODO (profiling) The browser extension is a multi-root app,\n+ \/\/ so it won't work for the \"Profiling\" root to depend on a value that's set by the \"Elements\" root.\n+ \/\/ We'll either need to lift that state up into the (shared) Store,\n+ \/\/ or use a portal to share the contexts themselves between Chrome tabs.\n+ const { selectedElementID } = useContext(TreeContext);\n+\n+ \/\/ If no root is selected, assume the first root; many React apps are single root anyway.\n+ let rendererID = null;\n+ let rootID = null;\n+ if (selectedElementID) {\n+ rendererID = store.getRendererIDForElement(\n+ ((selectedElementID: any): number)\n+ );\n+ rootID = store.getRootIDForElement(((selectedElementID: any): number));\n+ } else if (store.roots.length > 0) {\n+ rootID = store.roots[0];\n+ rendererID = store.getRendererIDForElement(((rootID: any): number));\n+ }\n+\n+ \/\/ This value is important because it ensure we re-render after our suspense cache has been cleared.\n+ const { isProfiling } = useContext(ProfilerStatusContext);\n+\n+ const profilingSummary = store.profilingCache.ProfilingSummary.read({\n+ rendererID: ((rendererID: any): number),\n+ rootID: ((rootID: any): number),\n+ });\n+\n+ const [isCommitFilterEnabled] = useLocalStorage(\n+ 'isCommitFilterEnabled',\n+ false\n+ );\n+ const [minCommitDuration] = useLocalStorage('minCommitDuration', 0);\n+ const { commitDurations } = profilingSummary;\n+ const filteredCommitIndices = useMemo(() => {\n+ const array = [];\n+ if (!isProfiling) {\n+ for (let i = 0; i < commitDurations.length; i++) {\n+ if (!isCommitFilterEnabled || commitDurations[i] >= minCommitDuration) {\n+ array.push(i);\n+ }\n+ }\n+ }\n+ return array;\n+ }, [commitDurations, isCommitFilterEnabled, isProfiling, minCommitDuration]);\n+\n+ const [commitIndex, setCommitIndex] = useState(\n+ commitDurations.length > 0 ? 0 : null\n+ );\n+\n+ const value = useMemo(\n+ () => ({\n+ commitIndex,\n+ filteredCommitIndices,\n+ rendererID,\n+ rootID,\n+ setCommitIndex,\n+ }),\n+ [commitIndex, filteredCommitIndices, rendererID, rootID, setCommitIndex]\n+ );\n+\n+ return (\n+ \n+ {children}\n+ <\/ProfilerDataContext.Provider>\n+ );\n+}\n+\n+export { ProfilerDataContext, ProfilerDataContextController };\ndiff --git a\/src\/devtools\/views\/Profiler\/ProfilerStatusContext.js b\/src\/devtools\/views\/Profiler\/ProfilerStatusContext.js\nnew file mode 100644\nindex 0000000000..041aa1a2de\n--- \/dev\/null\n+++ b\/src\/devtools\/views\/Profiler\/ProfilerStatusContext.js\n@@ -0,0 +1,69 @@\n+\/\/ @flow\n+\n+import React, { createContext, useCallback, useContext, useMemo } from 'react';\n+import { useSubscription } from '..\/hooks';\n+import { StoreContext } from '..\/context';\n+import Store from '..\/..\/store';\n+\n+type Context = {|\n+ hasProfilingData: boolean,\n+ isProfiling: boolean,\n+ startProfiling(value: boolean): void,\n+ stopProfiling(value: boolean): void,\n+|};\n+\n+const ProfilerStatusContext = createContext(((null: any): Context));\n+ProfilerStatusContext.displayName = 'ProfilerStatusContext';\n+\n+type StoreProfilingState = {|\n+ hasProfilingData: boolean,\n+ isProfiling: boolean,\n+|};\n+\n+type Props = {|\n+ children: React$Node,\n+|};\n+\n+function ProfilerStatusContextController({ children }: Props) {\n+ const store = useContext(StoreContext);\n+\n+ const subscription = useMemo(\n+ () => ({\n+ getCurrentValue: () => ({\n+ hasProfilingData: store.hasProfilingData,\n+ isProfiling: store.isProfiling,\n+ }),\n+ subscribe: (callback: Function) => {\n+ store.addListener('isProfiling', callback);\n+ return () => store.removeListener('isProfiling', callback);\n+ },\n+ }),\n+ [store]\n+ );\n+\n+ const { isProfiling, hasProfilingData } = useSubscription<\n+ StoreProfilingState,\n+ Store\n+ >(subscription);\n+\n+ const startProfiling = useCallback(() => store.startProfiling(), [store]);\n+ const stopProfiling = useCallback(() => store.stopProfiling(), [store]);\n+\n+ const value = useMemo(\n+ () => ({\n+ hasProfilingData,\n+ isProfiling,\n+ startProfiling,\n+ stopProfiling,\n+ }),\n+ [hasProfilingData, isProfiling, startProfiling, stopProfiling]\n+ );\n+\n+ return (\n+ \n+ {children}\n+ <\/ProfilerStatusContext.Provider>\n+ );\n+}\n+\n+export { ProfilerStatusContext, ProfilerStatusContextController };\ndiff --git a\/src\/devtools\/views\/Profiler\/RecordToggle.js b\/src\/devtools\/views\/Profiler\/RecordToggle.js\nindex 4d1bb591d9..85356e6fd9 100644\n--- a\/src\/devtools\/views\/Profiler\/RecordToggle.js\n+++ b\/src\/devtools\/views\/Profiler\/RecordToggle.js\n@@ -3,7 +3,7 @@\n import React, { useContext } from 'react';\n import Button from '..\/Button';\n import ButtonIcon from '..\/ButtonIcon';\n-import { ProfilerContext } from '.\/ProfilerContext';\n+import { ProfilerStatusContext } from '.\/ProfilerStatusContext';\n \n import styles from '.\/RecordToggle.css';\n \n@@ -11,7 +11,7 @@ export type Props = {||};\n \n export default function RecordToggle(_: Props) {\n const { isProfiling, startProfiling, stopProfiling } = useContext(\n- ProfilerContext\n+ ProfilerStatusContext\n );\n \n return (\ndiff --git a\/src\/devtools\/views\/Profiler\/SnapshotCommitList.js b\/src\/devtools\/views\/Profiler\/SnapshotCommitList.js\nindex 69a10e3e18..c39ca73103 100644\n--- a\/src\/devtools\/views\/Profiler\/SnapshotCommitList.js\n+++ b\/src\/devtools\/views\/Profiler\/SnapshotCommitList.js\n@@ -2,6 +2,7 @@\n \n import React, {\n useCallback,\n+ useContext,\n useEffect,\n useMemo,\n useRef,\n@@ -11,67 +12,64 @@ import AutoSizer from 'react-virtualized-auto-sizer';\n import { FixedSizeList } from 'react-window';\n import SnapshotCommitListItem from '.\/SnapshotCommitListItem';\n import { minBarWidth } from '.\/constants';\n+import { ProfilerDataContext } from '.\/ProfilerDataContext';\n+import { StoreContext } from '..\/context';\n \n export type ItemData = {|\n commitDurations: Array,\n+ commitIndex: number | null,\n commitTimes: Array,\n+ filteredCommitIndices: Array,\n isMouseDown: boolean,\n maxDuration: number,\n- selectedCommitIndex: number,\n setCommitIndex: (index: number) => void,\n |};\n \n-type Props = {|\n- commitDurations: Array,\n- commitTimes: Array,\n- selectedCommitIndex: number,\n- setCommitIndex: (index: number) => void,\n- viewNextCommit: () => void,\n- viewPrevCommit: () => void,\n-|};\n+type Props = {||};\n \n-export default function SnapshotCommitList(props: Props) {\n+export default function SnapshotCommitList(_: Props) {\n return (\n \n- {({ height, width }) => }\n+ {({ height, width }) => }\n <\/AutoSizer>\n );\n }\n \n type ListProps = {|\n height: number,\n- commitDurations: Array,\n- commitTimes: Array,\n- selectedCommitIndex: number,\n- setCommitIndex: (index: number) => void,\n- viewNextCommit: () => void,\n- viewPrevCommit: () => void,\n width: number,\n |};\n \n-function List({\n- height,\n- commitDurations,\n- commitTimes,\n- selectedCommitIndex,\n- setCommitIndex,\n- viewNextCommit,\n- viewPrevCommit,\n- width,\n-}: ListProps) {\n+function List({ height, width }: ListProps) {\n const listRef = useRef | null>(null);\n const [isMouseDown, setIsMouseDown] = useState(false);\n- const prevSelectedCommitIndexRef = useRef(-1);\n+ const prevCommitIndexRef = useRef(null);\n+\n+ const { profilingCache } = useContext(StoreContext);\n+ const {\n+ commitIndex,\n+ filteredCommitIndices,\n+ rendererID,\n+ rootID,\n+ setCommitIndex,\n+ } = useContext(ProfilerDataContext);\n+\n+ const { commitDurations, commitTimes } = profilingCache.ProfilingSummary.read(\n+ {\n+ rendererID: ((rendererID: any): number),\n+ rootID: ((rootID: any): number),\n+ }\n+ );\n \n \/\/ Make sure any newly selected snapshot is visible within the list.\n useEffect(() => {\n- if (selectedCommitIndex !== prevSelectedCommitIndexRef.current) {\n- prevSelectedCommitIndexRef.current = selectedCommitIndex;\n- if (listRef.current !== null) {\n- listRef.current.scrollToItem(selectedCommitIndex);\n+ if (commitIndex !== prevCommitIndexRef.current) {\n+ prevCommitIndexRef.current = commitIndex;\n+ if (commitIndex !== null && listRef.current !== null) {\n+ listRef.current.scrollToItem(commitIndex);\n }\n }\n- }, [listRef, selectedCommitIndex]);\n+ }, [listRef, commitIndex]);\n \n const handleMouseDown = useCallback(() => {\n setIsMouseDown(true);\n@@ -104,18 +102,20 @@ function List({\n const itemData = useMemo(\n () => ({\n commitDurations,\n+ commitIndex,\n commitTimes,\n+ filteredCommitIndices,\n isMouseDown,\n maxDuration,\n- selectedCommitIndex,\n setCommitIndex,\n }),\n [\n commitDurations,\n+ commitIndex,\n commitTimes,\n+ filteredCommitIndices,\n isMouseDown,\n maxDuration,\n- selectedCommitIndex,\n setCommitIndex,\n ]\n );\n@@ -130,7 +130,7 @@ function List({\n }>\n- \n- <\/Suspense>\n- );\n-}\n-\n-function SnapshotSelector(_: Props) {\n- const { profilingCache } = useContext(StoreContext);\n+export default function SnapshotSelector(_: Props) {\n const {\n commitIndex,\n- isMinCommitDurationEnabled,\n- minCommitDuration,\n+ filteredCommitIndices,\n rendererID,\n rootID,\n setCommitIndex,\n- } = useContext(ProfilerContext);\n+ } = useContext(ProfilerDataContext);\n \n- if (rendererID === null || rootID === null) {\n- return null;\n+ const numCommits = filteredCommitIndices.length;\n+ let currentCommitNumber = '-';\n+ if (numCommits > 0) {\n+ currentCommitNumber = `${commitIndex + 1}`.padStart(\n+ `${numCommits}`.length,\n+ '0'\n+ );\n }\n \n- const { commitDurations, commitTimes } = profilingCache.ProfilingSummary.read(\n- {\n- rendererID: ((rendererID: any): number),\n- rootID: ((rootID: any): number),\n- }\n- );\n+ const viewNextCommit = useCallback(() => {\n+ const nextCommitIndex = Math.min(\n+ ((commitIndex: any): number) + 1,\n+ filteredCommitIndices.length - 1\n+ );\n+ setCommitIndex(filteredCommitIndices[nextCommitIndex]);\n+ }, [commitIndex, filteredCommitIndices, setCommitIndex]);\n+ const viewPrevCommit = useCallback(() => {\n+ const nextCommitIndex = Math.max(((commitIndex: any): number) - 1, 0);\n+ setCommitIndex(filteredCommitIndices[nextCommitIndex]);\n+ }, [commitIndex, filteredCommitIndices, setCommitIndex]);\n \n- \/\/ TODO (profiling) This is not sufficient; index here doesn't map to a meaningful index in the profiling data.\n- let filteredCommitDurations = commitDurations;\n- let filteredCommitTimes = commitTimes;\n- if (isMinCommitDurationEnabled) {\n- filteredCommitDurations = [];\n- filteredCommitTimes = [];\n- for (let i = 0; i < commitDurations.length; i++) {\n- if (commitDurations[i] >= minCommitDuration) {\n- filteredCommitDurations.push(commitDurations[i]);\n- filteredCommitTimes.push(commitTimes[i]);\n- }\n- }\n+ if (rendererID === null || rootID === null) {\n+ return null;\n }\n \n- const numCommits = filteredCommitDurations.length;\n- const currentCommitNumber = `${\n- numCommits > 0 ? commitIndex + 1 : '-'\n- }`.padStart(`${numCommits}`.length, '0');\n-\n- \/\/ TODO (profiler) We need to guard commit index and share filterd statuses in a better way.\n-\n- const viewNextCommit = () => {\n- setCommitIndex(Math.min(commitIndex + 1, numCommits - 1));\n- };\n- const viewPrevCommit = () => {\n- setCommitIndex(Math.max(commitIndex - 1, 0));\n- };\n-\n return (\n \n

\n \n- {currentCommitNumber} \/ {numCommits}\n+ {numCommits > 0 ? `${currentCommitNumber} \/ ${numCommits}` : '-'}\n <\/span>\n \n \n <\/Button>\n

\n- {numCommits > 0 && (\n- \n- )}\n+ {numCommits > 0 && }\n {numCommits === 0 && (\n

No commits<\/div>\n )}\n <\/div>\n = numCommits - 1}\n+ disabled={commitIndex === null || commitIndex >= numCommits - 1}\n onClick={viewNextCommit}\n >\n \n@@ -109,8 +75,3 @@ function SnapshotSelector(_: Props) {\n <\/Fragment>\n );\n }\n-\n-function SnapshotSelectorFallback() {\n- \/\/ TODO (profiling) Better loading UI\n- return

Loading...<\/div>;\n-}\ndiff --git a\/src\/devtools\/views\/TabBar.css b\/src\/devtools\/views\/TabBar.css\nindex efbef35997..c4c647372f 100644\n--- a\/src\/devtools\/views\/TabBar.css\n+++ b\/src\/devtools\/views\/TabBar.css\n@@ -66,11 +66,14 @@\n .TabLabelSmall {\n display: none;\n }\n+\n+ .IconSizeSmall {\n+ margin-right: 0;\n+ }\n }\n \n @media screen and (max-width: 600px) {\n- .IconSizeLarge,\n- .IconSizeSmall {\n+ .IconSizeLarge {\n margin-right: 0;\n }\n \ndiff --git a\/src\/devtools\/views\/hooks.js b\/src\/devtools\/views\/hooks.js\nindex 2607d47d80..6d28ead16e 100644\n--- a\/src\/devtools\/views\/hooks.js\n+++ b\/src\/devtools\/views\/hooks.js\n@@ -2,9 +2,15 @@\n \n import { useCallback, useEffect, useLayoutEffect, useState } from 'react';\n \n+type LocalStorageKey =\n+ | 'displayDensity'\n+ | 'isCommitFilterEnabled'\n+ | 'minCommitDuration'\n+ | 'theme';\n+\n \/\/ Forked from https:\/\/usehooks.com\/useLocalStorage\/\n export function useLocalStorage(\n- key: string,\n+ key: LocalStorageKey,\n initialValue: T\n ): [T, (value: T | (() => T)) => void] {\n const getValueFromLocalStorage = useCallback(() => {\n@@ -85,24 +91,27 @@ export function useModalDismissSignal(\n }\n \n \/\/ Copied from https:\/\/github.com\/facebook\/react\/pull\/15022\n-export function useSubscription({\n- source,\n+export function useSubscription({\n getCurrentValue,\n subscribe,\n }: {|\n- source: Source,\n- getCurrentValue: (source: Source) => Value,\n- subscribe: (source: Source, callback: Function) => () => void,\n+ getCurrentValue: () => Value,\n+ subscribe: (callback: Function) => () => void,\n |}): Value {\n const [state, setState] = useState({\n- source,\n- value: getCurrentValue(source),\n+ getCurrentValue,\n+ subscribe,\n+ value: getCurrentValue(),\n });\n \n- if (state.source !== source) {\n+ if (\n+ state.getCurrentValue !== getCurrentValue ||\n+ state.subscribe !== subscribe\n+ ) {\n setState({\n- source,\n- value: getCurrentValue(source),\n+ getCurrentValue,\n+ subscribe,\n+ value: getCurrentValue(),\n });\n }\n \n@@ -115,11 +124,14 @@ export function useSubscription({\n }\n \n setState(prevState => {\n- if (prevState.source !== source) {\n+ if (\n+ prevState.getCurrentValue !== getCurrentValue ||\n+ prevState.subscribe !== subscribe\n+ ) {\n return prevState;\n }\n \n- const value = getCurrentValue(source);\n+ const value = getCurrentValue();\n if (prevState.value === value) {\n return prevState;\n }\n@@ -127,7 +139,7 @@ export function useSubscription({\n return { ...prevState, value };\n });\n };\n- const unsubscribe = subscribe(source, checkForUpdates);\n+ const unsubscribe = subscribe(checkForUpdates);\n \n checkForUpdates();\n \n@@ -135,7 +147,7 @@ export function useSubscription({\n didUnsubscribe = true;\n unsubscribe();\n };\n- }, [getCurrentValue, source, subscribe]);\n+ }, [getCurrentValue, subscribe]);\n \n return state.value;\n }\n"}

dillon1000/react

Files changed