{"commit":{"shortRevision":"d53ae2ea8a","subject":"Refactored TreeContext to use less memoization (based on feedback from Sebastian)","authorName":"Brian Vaughn","authoredAt":"2019-04-22T10:19:59-07:00","revision":"d53ae2ea8a5db88232c6802fc8f480cb13c23576","authorEmail":"bvaughn@fb.com"},"body":"","parents":["70be637d48d78e932809b96a2b49a572e03e8e54"],"files":[{"status":"M","path":"src\/devtools\/views\/Components\/Element.js"},{"status":"M","path":"src\/devtools\/views\/Components\/InspectedElementContext.js"},{"status":"M","path":"src\/devtools\/views\/Components\/OwnersStack.js"},{"status":"M","path":"src\/devtools\/views\/Components\/SearchInput.js"},{"status":"M","path":"src\/devtools\/views\/Components\/SelectedElement.js"},{"status":"M","path":"src\/devtools\/views\/Components\/Tree.js"},{"status":"M","path":"src\/devtools\/views\/Components\/TreeContext.js"},{"status":"A","path":"src\/devtools\/views\/Components\/ViewElementSourceContext.js"},{"status":"M","path":"src\/devtools\/views\/DevTools.js"},{"status":"M","path":"src\/devtools\/views\/Profiler\/ProfilerContext.js"}],"patch":"diff --git a\/src\/devtools\/views\/Components\/Element.js b\/src\/devtools\/views\/Components\/Element.js\nindex 5e5b52fe08..0fa93b40ac 100644\n--- a\/src\/devtools\/views\/Components\/Element.js\n+++ b\/src\/devtools\/views\/Components\/Element.js\n@@ -13,7 +13,7 @@ import { ElementTypeClass, ElementTypeFunction } from 'src\/devtools\/types';\n import Store from 'src\/devtools\/store';\n import ButtonIcon from '..\/ButtonIcon';\n import { createRegExp } from '..\/utils';\n-import { TreeContext } from '.\/TreeContext';\n+import { TreeDispatcherContext, TreeStateContext } from '.\/TreeContext';\n import { StoreContext } from '..\/context';\n \n import type { ItemData } from '.\/Tree';\n@@ -28,18 +28,21 @@ type Props = {\n };\n \n export default function ElementView({ data, index, style }: Props) {\n- const [isHovered, setIsHovered] = useState(false);\n+ const store = useContext(StoreContext);\n const {\n baseDepth,\n- getElementAtIndex,\n+ ownerFlatTree,\n ownerStack,\n- selectOwner,\n selectedElementID,\n- selectElementByID,\n- } = useContext(TreeContext);\n- const store = useContext(StoreContext);\n+ } = useContext(TreeStateContext);\n+ const dispatch = useContext(TreeDispatcherContext);\n \n- const element = getElementAtIndex(index);\n+ const element =\n+ ownerFlatTree !== null\n+ ? store.getElementByID(ownerFlatTree[index])\n+ : store.getElementAtIndex(index);\n+\n+ const [isHovered, setIsHovered] = useState(false);\n \n const {\n lastScrolledIDRef,\n@@ -52,9 +55,9 @@ export default function ElementView({ data, index, style }: Props) {\n \n const handleDoubleClick = useCallback(() => {\n if (id !== null) {\n- selectOwner(id);\n+ dispatch({ type: 'SELECT_OWNER', payload: id });\n }\n- }, [id, selectOwner]);\n+ }, [dispatch, id]);\n \n const scrollAnchorStartRef = useRef(null);\n const scrollAnchorEndRef = useRef(null);\n@@ -102,10 +105,13 @@ export default function ElementView({ data, index, style }: Props) {\n const handleMouseDown = useCallback(\n ({ metaKey }) => {\n if (id !== null) {\n- selectElementByID(metaKey ? null : id);\n+ dispatch({\n+ type: 'SELECT_ELEMENT_BY_ID',\n+ payload: metaKey ? null : id,\n+ });\n }\n },\n- [id, selectElementByID]\n+ [dispatch, id]\n );\n \n const handleMouseEnter = useCallback(() => {\n@@ -234,7 +240,9 @@ type DisplayNameProps = {|\n |};\n \n function DisplayName({ displayName, id }: DisplayNameProps) {\n- const { searchIndex, searchResults, searchText } = useContext(TreeContext);\n+ const { searchIndex, searchResults, searchText } = useContext(\n+ TreeStateContext\n+ );\n const isSearchResult = useMemo(() => {\n return searchResults.includes(id);\n }, [id, searchResults]);\ndiff --git a\/src\/devtools\/views\/Components\/InspectedElementContext.js b\/src\/devtools\/views\/Components\/InspectedElementContext.js\nindex 21c5aefb5f..fbbc572f7b 100644\n--- a\/src\/devtools\/views\/Components\/InspectedElementContext.js\n+++ b\/src\/devtools\/views\/Components\/InspectedElementContext.js\n@@ -10,7 +10,7 @@ import React, {\n import { createResource } from '..\/..\/cache';\n import { BridgeContext, StoreContext } from '..\/context';\n import { hydrate } from 'src\/hydration';\n-import { TreeContext } from '.\/TreeContext';\n+import { TreeStateContext } from '.\/TreeContext';\n \n import type {\n DehydratedData,\n@@ -38,7 +38,7 @@ type Props = {|\n function InspectedElementContextController({ children }: Props) {\n const bridge = useContext(BridgeContext);\n const store = useContext(StoreContext);\n- const { inspectedElementID } = useContext(TreeContext);\n+ const { inspectedElementID } = useContext(TreeStateContext);\n \n const [count, setCount] = useState(0);\n \ndiff --git a\/src\/devtools\/views\/Components\/OwnersStack.js b\/src\/devtools\/views\/Components\/OwnersStack.js\nindex 860514fc78..b2f0c3299d 100644\n--- a\/src\/devtools\/views\/Components\/OwnersStack.js\n+++ b\/src\/devtools\/views\/Components\/OwnersStack.js\n@@ -11,7 +11,7 @@ import { Menu, MenuList, MenuButton, MenuItem } from '@reach\/menu-button';\n import Button from '..\/Button';\n import ButtonIcon from '..\/ButtonIcon';\n import Toggle from '..\/Toggle';\n-import { TreeContext } from '.\/TreeContext';\n+import { TreeDispatcherContext, TreeStateContext } from '.\/TreeContext';\n import { StoreContext } from '..\/context';\n import { useIsOverflowing } from '..\/hooks';\n \n@@ -20,9 +20,8 @@ import type { Element } from '.\/types';\n import styles from '.\/OwnersStack.css';\n \n export default function OwnerStack() {\n- const { ownerStack, ownerStackIndex, resetOwnerStack } = useContext(\n- TreeContext\n- );\n+ const { ownerStack, ownerStackIndex } = useContext(TreeStateContext);\n+ const dispatch = useContext(TreeDispatcherContext);\n \n const [elementsTotalWidth, setElementsTotalWidth] = useState(0);\n const elementsBarRef = useRef(null);\n@@ -73,7 +72,7 @@ export default function OwnerStack() {\n

\n dispatch({ type: 'RESET_OWNER_STACK' })}\n title=\"Back to tree view\"\n >\n \n@@ -91,7 +90,7 @@ function ElementsDropdown({\n ownerStackIndex,\n }: ElementsDropdownProps) {\n const store = useContext(StoreContext);\n- const { selectOwner } = useContext(TreeContext);\n+ const dispatch = useContext(TreeDispatcherContext);\n \n return (\n \n@@ -107,7 +106,7 @@ function ElementsDropdown({\n selectOwner(id)}\n+ onSelect={() => dispatch({ type: 'SELECT_OWNER', payload: id })}\n >\n {((store.getElementByID(id): any): Element).displayName}\n <\/MenuItem>\n@@ -123,7 +122,8 @@ type ElementViewProps = {\n };\n function ElementView({ id, index }: ElementViewProps) {\n const store = useContext(StoreContext);\n- const { ownerStackIndex, selectOwner } = useContext(TreeContext);\n+ const { ownerStackIndex } = useContext(TreeStateContext);\n+ const dispatch = useContext(TreeDispatcherContext);\n \n const { displayName } = ((store.getElementByID(id): any): Element);\n \n@@ -131,9 +131,9 @@ function ElementView({ id, index }: ElementViewProps) {\n \n const handleChange = useCallback(() => {\n if (!isChecked) {\n- selectOwner(id);\n+ dispatch({ type: 'SELECT_OWNER', payload: id });\n }\n- }, [id, isChecked, selectOwner]);\n+ }, [dispatch, id, isChecked]);\n \n return (\n (null);\n \n const handleTextChange = useCallback(\n- ({ currentTarget }) => setSearchText(currentTarget.value),\n- [setSearchText]\n+ ({ currentTarget }) =>\n+ dispatch({ type: 'SET_SEARCH_TEXT', payload: currentTarget.value }),\n+ [dispatch]\n+ );\n+ const resetSearch = useCallback(\n+ () => dispatch({ type: 'SET_SEARCH_TEXT', payload: '' }),\n+ [dispatch]\n );\n- const resetSearch = useCallback(() => setSearchText(''), [setSearchText]);\n \n const handleKeyDown = useCallback(\n event => {\n \/\/ For convenience, let up\/down arrow keys change Tree selection.\n switch (event.key) {\n case 'ArrowDown':\n- selectNextElementInTree();\n+ dispatch({ type: 'SELECT_NEXT_ELEMENT_IN_TREE' });\n event.preventDefault();\n break;\n case 'ArrowUp':\n- selectPreviousElementInTree();\n+ dispatch({ type: 'SELECT_PREVIOUS_ELEMENT_IN_TREE' });\n event.preventDefault();\n break;\n default:\n break;\n }\n },\n- [selectNextElementInTree, selectPreviousElementInTree]\n+ [dispatch]\n );\n \n const handleInputKeyPress = useCallback(\n ({ key }) => {\n if (key === 'Enter') {\n- goToNextSearchResult();\n+ dispatch({ type: 'GO_TO_NEXT_SEARCH_RESULT' });\n }\n },\n- [goToNextSearchResult]\n+ [dispatch]\n );\n \n \/\/ Auto-focus search input\n@@ -106,7 +104,7 @@ export default function SearchInput(props: Props) {\n dispatch({ type: 'GO_TO_PREVIOUS_SEARCH_RESULT' })}\n title=\"Scroll to previous search result\"\n >\n \n@@ -114,7 +112,7 @@ export default function SearchInput(props: Props) {\n dispatch({ type: 'GO_TO_NEXT_SEARCH_RESULT' })}\n title=\"Scroll to next search result\"\n >\n \ndiff --git a\/src\/devtools\/views\/Components\/SelectedElement.js b\/src\/devtools\/views\/Components\/SelectedElement.js\nindex c3de9a2718..c2b62a6389 100644\n--- a\/src\/devtools\/views\/Components\/SelectedElement.js\n+++ b\/src\/devtools\/views\/Components\/SelectedElement.js\n@@ -1,13 +1,14 @@\n \/\/ @flow\n \n import React, { useCallback, useContext } from 'react';\n-import { TreeContext } from '.\/TreeContext';\n+import { TreeDispatcherContext, TreeStateContext } from '.\/TreeContext';\n import { BridgeContext, StoreContext } from '..\/context';\n import Button from '..\/Button';\n import ButtonIcon from '..\/ButtonIcon';\n import HooksTree from '.\/HooksTree';\n import InspectedElementTree from '.\/InspectedElementTree';\n import { InspectedElementContext } from '.\/InspectedElementContext';\n+import ViewElementSourceContext from '.\/ViewElementSourceContext';\n import styles from '.\/SelectedElement.css';\n import {\n ElementTypeClass,\n@@ -22,7 +23,8 @@ import type { Element, InspectedElement } from '.\/types';\n export type Props = {||};\n \n export default function SelectedElement(_: Props) {\n- const { inspectedElementID, viewElementSource } = useContext(TreeContext);\n+ const { inspectedElementID } = useContext(TreeStateContext);\n+ const viewElementSource = useContext(ViewElementSourceContext);\n const bridge = useContext(BridgeContext);\n const store = useContext(StoreContext);\n \n@@ -153,7 +155,7 @@ function InspectedElementView({\n state,\n } = inspectedElement;\n \n- const { ownerStack } = useContext(TreeContext);\n+ const { ownerStack } = useContext(TreeStateContext);\n const bridge = useContext(BridgeContext);\n const store = useContext(StoreContext);\n \n@@ -241,12 +243,16 @@ function InspectedElementView({\n }\n \n function OwnerView({ displayName, id }: { displayName: string, id: number }) {\n- const { selectElementByID } = useContext(TreeContext);\n+ const dispatch = useContext(TreeDispatcherContext);\n \n- const handleClick = useCallback(() => selectElementByID(id), [\n- id,\n- selectElementByID,\n- ]);\n+ const handleClick = useCallback(\n+ () =>\n+ dispatch({\n+ type: 'SELECT_ELEMENT_BY_ID',\n+ payload: id,\n+ }),\n+ [dispatch, id]\n+ );\n \n return (\n Element | null,\n isNavigatingWithKeyboard: boolean,\n lastScrolledIDRef: { current: number | null },\n onElementMouseEnter: (id: number) => void,\n@@ -36,22 +33,16 @@ export type ItemData = {|\n type Props = {||};\n \n export default function Tree(props: Props) {\n+ const dispatch = useContext(TreeDispatcherContext);\n const {\n baseDepth,\n- getElementAtIndex,\n numElements,\n ownerStack,\n searchIndex,\n searchResults,\n selectedElementID,\n selectedElementIndex,\n- selectChildElementInTree,\n- selectElementAtIndex,\n- selectNextElementInTree,\n- selectOwner,\n- selectParentElementInTree,\n- selectPreviousElementInTree,\n- } = useContext(TreeContext);\n+ } = useContext(TreeStateContext);\n const bridge = useContext(BridgeContext);\n const store = useContext(StoreContext);\n const [isNavigatingWithKeyboard, setIsNavigatingWithKeyboard] = useState(\n@@ -111,7 +102,7 @@ export default function Tree(props: Props) {\n switch (event.key) {\n case 'ArrowDown':\n event.preventDefault();\n- selectNextElementInTree();\n+ dispatch({ type: 'SELECT_NEXT_ELEMENT_IN_TREE' });\n break;\n case 'ArrowLeft':\n event.preventDefault();\n@@ -123,7 +114,7 @@ export default function Tree(props: Props) {\n if (element.children.length > 0 && !element.isCollapsed) {\n store.toggleIsCollapsed(element.id, true);\n } else {\n- selectParentElementInTree();\n+ dispatch({ type: 'SELECT_PARENT_ELEMENT_IN_TREE' });\n }\n }\n break;\n@@ -137,13 +128,13 @@ export default function Tree(props: Props) {\n if (element.children.length > 0 && element.isCollapsed) {\n store.toggleIsCollapsed(element.id, false);\n } else {\n- selectChildElementInTree();\n+ dispatch({ type: 'SELECT_CHILD_ELEMENT_IN_TREE' });\n }\n }\n break;\n case 'ArrowUp':\n event.preventDefault();\n- selectPreviousElementInTree();\n+ dispatch({ type: 'SELECT_PREVIOUS_ELEMENT_IN_TREE' });\n break;\n default:\n return;\n@@ -160,14 +151,7 @@ export default function Tree(props: Props) {\n return () => {\n ownerDocument.removeEventListener('keydown', handleKeyDown);\n };\n- }, [\n- selectedElementID,\n- selectChildElementInTree,\n- selectNextElementInTree,\n- selectParentElementInTree,\n- selectPreviousElementInTree,\n- store,\n- ]);\n+ }, [dispatch, selectedElementID, store]);\n \n \/\/ Focus management.\n const handleBlur = useCallback(() => setTreeFocused(false), []);\n@@ -175,9 +159,12 @@ export default function Tree(props: Props) {\n setTreeFocused(true);\n \n if (selectedElementIndex === null && numElements > 0) {\n- selectElementAtIndex(0);\n+ dispatch({\n+ type: 'SELECT_ELEMENT_AT_INDEX',\n+ payload: 0,\n+ });\n }\n- }, [numElements, selectedElementIndex, selectElementAtIndex]);\n+ }, [dispatch, numElements, selectedElementIndex]);\n \n const handleKeyPress = useCallback(\n event => {\n@@ -185,14 +172,14 @@ export default function Tree(props: Props) {\n case 'Enter':\n case ' ':\n if (selectedElementID !== null) {\n- selectOwner(selectedElementID);\n+ dispatch({ type: 'SELECT_OWNER', payload: selectedElementID });\n }\n break;\n default:\n break;\n }\n },\n- [selectedElementID, selectOwner]\n+ [dispatch, selectedElementID]\n );\n \n const highlightElementInDOM = useCallback(\n@@ -270,7 +257,6 @@ export default function Tree(props: Props) {\n () => ({\n baseDepth,\n numElements,\n- getElementAtIndex,\n isNavigatingWithKeyboard,\n onElementMouseEnter: handleElementMouseEnter,\n lastScrolledIDRef,\n@@ -279,7 +265,6 @@ export default function Tree(props: Props) {\n [\n baseDepth,\n numElements,\n- getElementAtIndex,\n isNavigatingWithKeyboard,\n handleElementMouseEnter,\n lastScrolledIDRef,\n@@ -328,7 +313,7 @@ export default function Tree(props: Props) {\n }\n \n function InnerElementType({ style, ...rest }) {\n- const { ownerStack } = useContext(TreeContext);\n+ const { ownerStack } = useContext(TreeStateContext);\n \n \/\/ The list may need to scroll horizontally due to deeply nested elements.\n \/\/ We don't know the maximum scroll width up front, because we're windowing.\ndiff --git a\/src\/devtools\/views\/Components\/TreeContext.js b\/src\/devtools\/views\/Components\/TreeContext.js\nindex ab1d7031cf..1c4f4f9dae 100644\n--- a\/src\/devtools\/views\/Components\/TreeContext.js\n+++ b\/src\/devtools\/views\/Components\/TreeContext.js\n@@ -34,44 +34,98 @@ import Store from '..\/..\/store';\n \n import type { Element } from '.\/types';\n \n-type Context = {|\n+type StateContext = {|\n \/\/ Tree\n baseDepth: number,\n numElements: number,\n selectedElementID: number | null,\n selectedElementIndex: number | null,\n- getElementAtIndex(index: number): Element | null,\n- selectChildElementInTree(): void,\n- selectElementAtIndex(index: number): void,\n- selectElementByID(id: number | null): void,\n- selectNextElementInTree(): void,\n- selectParentElementInTree(): void,\n- selectPreviousElementInTree(): void,\n \n \/\/ Search\n searchIndex: number | null,\n searchResults: Array,\n searchText: string,\n- setSearchText(text: string): void,\n- goToNextSearchResult(): void,\n- goToPreviousSearchResult(): void,\n \n \/\/ Owners\n+ ownerFlatTree: Array | null,\n ownerStack: Array,\n ownerStackIndex: number | null,\n- resetOwnerStack(): void,\n- selectOwner(id: number): void,\n-\n- \/\/ Injected by parent HTML\/JavaScript\n- viewElementSource: Function | null,\n \n \/\/ Inspection element panel\n- \/\/ Updated separately so we can avoid suspending when selection changes\n inspectedElementID: number | null,\n |};\n \n-const TreeContext = createContext(((null: any): Context));\n-TreeContext.displayName = 'TreeContext';\n+type ACTION_GO_TO_NEXT_SEARCH_RESULT = {|\n+ type: 'GO_TO_NEXT_SEARCH_RESULT',\n+|};\n+type ACTION_GO_TO_PREVIOUS_SEARCH_RESULT = {|\n+ type: 'GO_TO_PREVIOUS_SEARCH_RESULT',\n+|};\n+type ACTION_HANDLE_STORE_MUTATION = {|\n+ type: 'HANDLE_STORE_MUTATION',\n+ payload: [Uint32Array, Uint32Array],\n+|};\n+type ACTION_RESET_OWNER_STACK = {|\n+ type: 'RESET_OWNER_STACK',\n+|};\n+type ACTION_SELECT_CHILD_ELEMENT_IN_TREE = {|\n+ type: 'SELECT_CHILD_ELEMENT_IN_TREE',\n+|};\n+type ACTION_SELECT_ELEMENT_AT_INDEX = {|\n+ type: 'SELECT_ELEMENT_AT_INDEX',\n+ payload: number | null,\n+|};\n+type ACTION_SELECT_ELEMENT_BY_ID = {|\n+ type: 'SELECT_ELEMENT_BY_ID',\n+ payload: number | null,\n+|};\n+type ACTION_SELECT_NEXT_ELEMENT_IN_TREE = {|\n+ type: 'SELECT_NEXT_ELEMENT_IN_TREE',\n+|};\n+type ACTION_SELECT_PARENT_ELEMENT_IN_TREE = {|\n+ type: 'SELECT_PARENT_ELEMENT_IN_TREE',\n+|};\n+type ACTION_SELECT_PREVIOUS_ELEMENT_IN_TREE = {|\n+ type: 'SELECT_PREVIOUS_ELEMENT_IN_TREE',\n+|};\n+type ACTION_SELECT_OWNER = {|\n+ type: 'SELECT_OWNER',\n+ payload: number,\n+|};\n+type ACTION_SET_SEARCH_TEXT = {|\n+ type: 'SET_SEARCH_TEXT',\n+ payload: string,\n+|};\n+type ACTION_UPDATE_INSPECTED_ELEMENT_ID = {|\n+ type: 'UPDATE_INSPECTED_ELEMENT_ID',\n+|};\n+\n+type Action =\n+ | ACTION_GO_TO_NEXT_SEARCH_RESULT\n+ | ACTION_GO_TO_PREVIOUS_SEARCH_RESULT\n+ | ACTION_HANDLE_STORE_MUTATION\n+ | ACTION_RESET_OWNER_STACK\n+ | ACTION_SELECT_CHILD_ELEMENT_IN_TREE\n+ | ACTION_SELECT_ELEMENT_AT_INDEX\n+ | ACTION_SELECT_ELEMENT_BY_ID\n+ | ACTION_SELECT_NEXT_ELEMENT_IN_TREE\n+ | ACTION_SELECT_PARENT_ELEMENT_IN_TREE\n+ | ACTION_SELECT_PREVIOUS_ELEMENT_IN_TREE\n+ | ACTION_SELECT_OWNER\n+ | ACTION_SET_SEARCH_TEXT\n+ | ACTION_UPDATE_INSPECTED_ELEMENT_ID;\n+\n+type DispatcherContext = (action: Action) => void;\n+\n+const TreeStateContext = createContext(\n+ ((null: any): StateContext)\n+);\n+TreeStateContext.displayName = 'TreeStateContext';\n+\n+const TreeDispatcherContext = createContext(\n+ ((null: any): DispatcherContext)\n+);\n+TreeDispatcherContext.displayName = 'TreeDispatcherContext';\n \n type State = {|\n \/\/ Tree\n@@ -88,33 +142,13 @@ type State = {|\n \/\/ Owners\n ownerStack: Array,\n ownerStackIndex: number | null,\n- _ownerFlatTree: Array | null,\n+ ownerFlatTree: Array | null,\n \n \/\/ Inspection element panel\n inspectedElementID: number | null,\n |};\n \n-type Action = {|\n- type:\n- | 'GO_TO_NEXT_SEARCH_RESULT'\n- | 'GO_TO_PREVIOUS_SEARCH_RESULT'\n- | 'HANDLE_STORE_MUTATION'\n- | 'RESET_OWNER_STACK'\n- | 'SELECT_CHILD_ELEMENT_IN_TREE'\n- | 'SELECT_ELEMENT_AT_INDEX'\n- | 'SELECT_ELEMENT_BY_ID'\n- | 'SELECT_NEXT_ELEMENT_IN_TREE'\n- | 'SELECT_PARENT_ELEMENT_IN_TREE'\n- | 'SELECT_PREVIOUS_ELEMENT_IN_TREE'\n- | 'SELECT_OWNER'\n- | 'SET_SEARCH_TEXT'\n- | 'UPDATE_INSPECTED_ELEMENT_ID',\n- payload?: any,\n-|};\n-\n function reduceTreeState(store: Store, state: State, action: Action): State {\n- const { type, payload } = action;\n-\n let {\n numElements,\n ownerStack,\n@@ -126,7 +160,7 @@ function reduceTreeState(store: Store, state: State, action: Action): State {\n \n \/\/ Base tree should ignore selected element changes when the owner's tree is active.\n if (ownerStack.length === 0) {\n- switch (type) {\n+ switch (action.type) {\n case 'HANDLE_STORE_MUTATION':\n numElements = store.numElements;\n \n@@ -157,18 +191,18 @@ function reduceTreeState(store: Store, state: State, action: Action): State {\n }\n break;\n case 'SELECT_ELEMENT_AT_INDEX':\n- selectedElementIndex = ((payload: any): number | null);\n+ selectedElementIndex = (action: ACTION_SELECT_ELEMENT_AT_INDEX).payload;\n break;\n case 'SELECT_ELEMENT_BY_ID':\n \/\/ Skip lookup in this case; it would be redundant.\n \/\/ It might also cause problems if the specified element was inside of a (not yet expanded) subtree.\n lookupIDForIndex = false;\n \n- selectedElementID = payload;\n+ selectedElementID = (action: ACTION_SELECT_ELEMENT_BY_ID).payload;\n selectedElementIndex =\n- payload === null\n+ selectedElementID === null\n ? null\n- : store.getIndexOfElementID(((payload: any): number));\n+ : store.getIndexOfElementID(selectedElementID);\n break;\n case 'SELECT_NEXT_ELEMENT_IN_TREE':\n if (\n@@ -229,8 +263,6 @@ function reduceTreeState(store: Store, state: State, action: Action): State {\n }\n \n function reduceSearchState(store: Store, state: State, action: Action): State {\n- const { type, payload } = action;\n-\n let {\n ownerStack,\n searchIndex,\n@@ -252,7 +284,7 @@ function reduceSearchState(store: Store, state: State, action: Action): State {\n \n \/\/ Search isn't supported when the owner's tree is active.\n if (ownerStack.length === 0) {\n- switch (type) {\n+ switch (action.type) {\n case 'GO_TO_NEXT_SEARCH_RESULT':\n if (numPrevSearchResults > 0) {\n didRequestSearch = true;\n@@ -274,7 +306,7 @@ function reduceSearchState(store: Store, state: State, action: Action): State {\n const [\n addedElementIDs,\n removedElementIDs,\n- ] = ((payload: any): Array);\n+ ] = (action: ACTION_HANDLE_STORE_MUTATION).payload;\n \n removedElementIDs.forEach(id => {\n \/\/ Prune this item from the search results.\n@@ -336,7 +368,7 @@ function reduceSearchState(store: Store, state: State, action: Action): State {\n case 'SET_SEARCH_TEXT':\n searchIndex = null;\n searchResults = [];\n- searchText = ((payload: any): string);\n+ searchText = (action: ACTION_SET_SEARCH_TEXT).payload;\n \n if (searchText !== '') {\n const regExp = createRegExp(searchText);\n@@ -394,24 +426,22 @@ function reduceSearchState(store: Store, state: State, action: Action): State {\n }\n \n function reduceOwnersState(store: Store, state: State, action: Action): State {\n- const { payload, type } = action;\n-\n let {\n baseDepth,\n numElements,\n selectedElementID,\n selectedElementIndex,\n+ ownerFlatTree,\n ownerStack,\n ownerStackIndex,\n searchIndex,\n searchResults,\n searchText,\n- _ownerFlatTree,\n } = state;\n \n let prevSelectedElementIndex = selectedElementIndex;\n \n- switch (type) {\n+ switch (action.type) {\n case 'HANDLE_STORE_MUTATION':\n if (ownerStack.length > 0) {\n let indexOfRemovedItem = -1;\n@@ -425,15 +455,15 @@ function reduceOwnersState(store: Store, state: State, action: Action): State {\n if (indexOfRemovedItem >= 0) {\n ownerStack = ownerStack.slice(0, indexOfRemovedItem);\n if (ownerStack.length === 0) {\n- _ownerFlatTree = null;\n+ ownerFlatTree = null;\n ownerStackIndex = null;\n } else {\n ownerStackIndex = ownerStack.length - 1;\n }\n }\n- if (selectedElementID !== null && _ownerFlatTree !== null) {\n+ if (selectedElementID !== null && ownerFlatTree !== null) {\n \/\/ Mutation might have caused the index of this ID to shift.\n- selectedElementIndex = _ownerFlatTree.indexOf(selectedElementID);\n+ selectedElementIndex = ownerFlatTree.indexOf(selectedElementID);\n }\n } else {\n if (selectedElementID !== null) {\n@@ -454,30 +484,31 @@ function reduceOwnersState(store: Store, state: State, action: Action): State {\n selectedElementID !== null\n ? store.getIndexOfElementID(selectedElementID)\n : null;\n- _ownerFlatTree = null;\n+ ownerFlatTree = null;\n break;\n case 'SELECT_ELEMENT_AT_INDEX':\n- if (_ownerFlatTree !== null) {\n- selectedElementIndex = ((payload: any): number | null);\n+ if (ownerFlatTree !== null) {\n+ selectedElementIndex = (action: ACTION_SELECT_ELEMENT_AT_INDEX).payload;\n }\n break;\n case 'SELECT_ELEMENT_BY_ID':\n- if (_ownerFlatTree !== null) {\n+ if (ownerFlatTree !== null) {\n+ const payload = (action: ACTION_SELECT_ELEMENT_BY_ID).payload;\n selectedElementIndex =\n- payload === null ? null : _ownerFlatTree.indexOf(payload);\n+ payload === null ? null : ownerFlatTree.indexOf(payload);\n }\n break;\n case 'SELECT_NEXT_ELEMENT_IN_TREE':\n- if (_ownerFlatTree !== null && _ownerFlatTree.length > 0) {\n+ if (ownerFlatTree !== null && ownerFlatTree.length > 0) {\n if (selectedElementIndex === null) {\n selectedElementIndex = 0;\n- } else if (selectedElementIndex + 1 < _ownerFlatTree.length) {\n+ } else if (selectedElementIndex + 1 < ownerFlatTree.length) {\n selectedElementIndex++;\n }\n }\n break;\n case 'SELECT_PREVIOUS_ELEMENT_IN_TREE':\n- if (_ownerFlatTree !== null && _ownerFlatTree.length > 0) {\n+ if (ownerFlatTree !== null && ownerFlatTree.length > 0) {\n if (selectedElementIndex !== null && selectedElementIndex > 0) {\n selectedElementIndex--;\n }\n@@ -487,7 +518,8 @@ function reduceOwnersState(store: Store, state: State, action: Action): State {\n \/\/ If the Store doesn't have any owners metadata, don't drill into an empty stack.\n \/\/ This is a confusing user experience.\n if (store.hasOwnerMetadata) {\n- ownerStackIndex = ownerStack.indexOf(payload);\n+ const id = (action: ACTION_SELECT_OWNER).payload;\n+ ownerStackIndex = ownerStack.indexOf(id);\n \n \/\/ Always force reset selection to be the top of the new owner tree.\n selectedElementIndex = 0;\n@@ -498,7 +530,7 @@ function reduceOwnersState(store: Store, state: State, action: Action): State {\n if (ownerStackIndex < 0) {\n \/\/ Add this new owner, and fill in the owners above it as well.\n ownerStack = [];\n- let currentOwnerID = ((payload: any): number);\n+ let currentOwnerID = id;\n while (currentOwnerID !== 0) {\n ownerStack.unshift(currentOwnerID);\n currentOwnerID = ((store.getElementByID(\n@@ -524,23 +556,23 @@ function reduceOwnersState(store: Store, state: State, action: Action): State {\n if (\n ownerStackIndex !== state.ownerStackIndex ||\n ownerStack !== state.ownerStack ||\n- type === 'HANDLE_STORE_MUTATION'\n+ action.type === 'HANDLE_STORE_MUTATION'\n ) {\n if (ownerStackIndex === null) {\n- _ownerFlatTree = null;\n+ ownerFlatTree = null;\n baseDepth = 0;\n numElements = store.numElements;\n } else {\n- _ownerFlatTree = calculateCurrentOwnerList(\n+ ownerFlatTree = calculateCurrentOwnerList(\n store,\n ownerStack[ownerStackIndex],\n ownerStack[ownerStackIndex],\n []\n );\n \n- baseDepth = ((store.getElementByID(_ownerFlatTree[0]): any): Element)\n+ baseDepth = ((store.getElementByID(ownerFlatTree[0]): any): Element)\n .depth;\n- numElements = _ownerFlatTree.length;\n+ numElements = ownerFlatTree.length;\n }\n }\n \n@@ -548,8 +580,8 @@ function reduceOwnersState(store: Store, state: State, action: Action): State {\n if (selectedElementIndex !== prevSelectedElementIndex) {\n if (selectedElementIndex === null) {\n selectedElementID = null;\n- } else if (_ownerFlatTree !== null) {\n- selectedElementID = _ownerFlatTree[((selectedElementIndex: any): number)];\n+ } else if (ownerFlatTree !== null) {\n+ selectedElementID = ownerFlatTree[((selectedElementIndex: any): number)];\n }\n }\n \n@@ -567,7 +599,7 @@ function reduceOwnersState(store: Store, state: State, action: Action): State {\n \n ownerStack,\n ownerStackIndex,\n- _ownerFlatTree,\n+ ownerFlatTree,\n };\n }\n \n@@ -589,13 +621,10 @@ function reduceSuspenseState(\n }\n }\n \n-type Props = {|\n- children: React$Node,\n- viewElementSource: Function | null,\n-|};\n+type Props = {| children: React$Node |};\n \n \/\/ TODO Remove TreeContextController wrapper element once global ConsearchText.write API exists.\n-function TreeContextController({ children, viewElementSource }: Props) {\n+function TreeContextController({ children }: Props) {\n const bridge = useContext(BridgeContext);\n const store = useContext(StoreContext);\n \n@@ -662,129 +691,20 @@ function TreeContextController({ children, viewElementSource }: Props) {\n \/\/ Owners\n ownerStack: [],\n ownerStackIndex: null,\n- _ownerFlatTree: null,\n+ ownerFlatTree: null,\n \n \/\/ Inspection element panel\n inspectedElementID: null,\n });\n \n const dispatchWrapper = useCallback(\n- params => {\n- dispatch(params);\n+ (action: Action) => {\n+ dispatch(action);\n next(() => dispatch({ type: 'UPDATE_INSPECTED_ELEMENT_ID' }));\n },\n [dispatch]\n );\n \n- const getElementAtIndex = useCallback(\n- (index: number) => {\n- return state._ownerFlatTree === null\n- ? store.getElementAtIndex(index)\n- : store.getElementByID(state._ownerFlatTree[index]);\n- },\n- [state, store]\n- );\n- const selectElementAtIndex = useCallback(\n- (index: number) =>\n- dispatchWrapper({ type: 'SELECT_ELEMENT_AT_INDEX', payload: index }),\n- [dispatchWrapper]\n- );\n- const selectElementByID = useCallback(\n- (id: number | null) =>\n- dispatchWrapper({ type: 'SELECT_ELEMENT_BY_ID', payload: id }),\n- [dispatchWrapper]\n- );\n- const setSearchText = useCallback(\n- (text: string) =>\n- dispatchWrapper({ type: 'SET_SEARCH_TEXT', payload: text }),\n- [dispatchWrapper]\n- );\n- const goToNextSearchResult = useCallback(\n- () => dispatchWrapper({ type: 'GO_TO_NEXT_SEARCH_RESULT' }),\n- [dispatchWrapper]\n- );\n- const goToPreviousSearchResult = useCallback(\n- () => dispatchWrapper({ type: 'GO_TO_PREVIOUS_SEARCH_RESULT' }),\n- [dispatchWrapper]\n- );\n- const resetOwnerStack = useCallback(\n- () => dispatchWrapper({ type: 'RESET_OWNER_STACK' }),\n- [dispatchWrapper]\n- );\n- const selectChildElementInTree = useCallback(\n- () => dispatchWrapper({ type: 'SELECT_CHILD_ELEMENT_IN_TREE' }),\n- [dispatchWrapper]\n- );\n- const selectNextElementInTree = useCallback(\n- () => dispatchWrapper({ type: 'SELECT_NEXT_ELEMENT_IN_TREE' }),\n- [dispatchWrapper]\n- );\n- const selectParentElementInTree = useCallback(\n- () => dispatchWrapper({ type: 'SELECT_PARENT_ELEMENT_IN_TREE' }),\n- [dispatchWrapper]\n- );\n- const selectPreviousElementInTree = useCallback(\n- () => dispatchWrapper({ type: 'SELECT_PREVIOUS_ELEMENT_IN_TREE' }),\n- [dispatchWrapper]\n- );\n- const selectOwner = useCallback(\n- (id: number) => dispatchWrapper({ type: 'SELECT_OWNER', payload: id }),\n- [dispatchWrapper]\n- );\n-\n- const value = useMemo(\n- () => ({\n- \/\/ Tree (derived from Store or owners state)\n- baseDepth: state.baseDepth,\n- numElements: state.numElements,\n- selectedElementID: state.selectedElementID,\n- selectedElementIndex: state.selectedElementIndex,\n- getElementAtIndex,\n- selectChildElementInTree,\n- selectElementByID,\n- selectElementAtIndex,\n- selectNextElementInTree,\n- selectParentElementInTree,\n- selectPreviousElementInTree,\n-\n- \/\/ Search\n- searchIndex: state.searchIndex,\n- searchResults: state.searchResults,\n- searchText: state.searchText,\n- setSearchText,\n- goToNextSearchResult,\n- goToPreviousSearchResult,\n-\n- \/\/ Owners\n- ownerStack: state.ownerStack,\n- ownerStackIndex: state.ownerStackIndex,\n- resetOwnerStack,\n- selectOwner,\n-\n- \/\/ Inspection element panel\n- inspectedElementID: state.inspectedElementID,\n-\n- \/\/ Injected by parent HTML\/JavaScript\n- viewElementSource,\n- }),\n- [\n- getElementAtIndex,\n- goToNextSearchResult,\n- goToPreviousSearchResult,\n- resetOwnerStack,\n- selectChildElementInTree,\n- selectElementAtIndex,\n- selectElementByID,\n- selectNextElementInTree,\n- selectParentElementInTree,\n- selectOwner,\n- selectPreviousElementInTree,\n- setSearchText,\n- state,\n- viewElementSource,\n- ]\n- );\n-\n \/\/ Listen for host element selections.\n useEffect(() => {\n const handleSelectFiber = (id: number) =>\n@@ -837,7 +757,13 @@ function TreeContextController({ children, viewElementSource }: Props) {\n return () => store.removeListener('mutated', handleStoreMutated);\n }, [dispatchWrapper, initialRevision, store]);\n \n- return {children}<\/TreeContext.Provider>;\n+ return (\n+ \n+ \n+ {children}\n+ <\/TreeDispatcherContext.Provider>\n+ <\/TreeStateContext.Provider>\n+ );\n }\n \n function calculateCurrentOwnerList(\n@@ -886,4 +812,4 @@ function recursivelySearchTree(\n );\n }\n \n-export { TreeContext, TreeContextController };\n+export { TreeDispatcherContext, TreeStateContext, TreeContextController };\ndiff --git a\/src\/devtools\/views\/Components\/ViewElementSourceContext.js b\/src\/devtools\/views\/Components\/ViewElementSourceContext.js\nnew file mode 100644\nindex 0000000000..0ce3191cff\n--- \/dev\/null\n+++ b\/src\/devtools\/views\/Components\/ViewElementSourceContext.js\n@@ -0,0 +1,8 @@\n+\/\/ @flow\n+\n+import { createContext } from 'react';\n+\n+const ViewElementSourceContext = createContext(null);\n+ViewElementSourceContext.displayName = 'ViewElementSourceContext';\n+\n+export default ViewElementSourceContext;\ndiff --git a\/src\/devtools\/views\/DevTools.js b\/src\/devtools\/views\/DevTools.js\nindex 8509b5b244..8e4ceca3c0 100644\n--- a\/src\/devtools\/views\/DevTools.js\n+++ b\/src\/devtools\/views\/DevTools.js\n@@ -14,6 +14,7 @@ import Settings from '.\/Settings\/Settings';\n import TabBar from '.\/TabBar';\n import { SettingsContextController } from '.\/Settings\/SettingsContext';\n import { TreeContextController } from '.\/Components\/TreeContext';\n+import ViewElementSourceContext from '.\/Components\/ViewElementSourceContext';\n import { ProfilerContextController } from '.\/Profiler\/ProfilerContext';\n import ReactLogo from '.\/ReactLogo';\n \n@@ -121,47 +122,55 @@ export default function DevTools({\n profilerPortalContainer={profilerPortalContainer}\n settingsPortalContainer={settingsPortalContainer}\n >\n- \n- \n-

\n- {showTabBar && (\n-

\n- \n- \n- {process.env.DEVTOOLS_VERSION}\n- <\/span>\n-

\n- \n+ \n+ \n+

\n+ {showTabBar && (\n+

\n+ \n+ \n+ {process.env.DEVTOOLS_VERSION}\n+ <\/span>\n+

\n+ \n+ <\/div>\n+ )}\n+ \n+ \n+ <\/div>\n+ \n+ \n <\/div>\n- )}\n- \n- \n- <\/div>\n-

\n- \n- <\/div>\n-

\n- \n+ \n+ \n+ <\/div>\n <\/div>\n- <\/div>\n- <\/ProfilerContextController>\n- <\/TreeContextController>\n+ <\/ProfilerContextController>\n+ <\/TreeContextController>\n+ <\/ViewElementSourceContext.Provider>\n <\/SettingsContextController>\n <\/StoreContext.Provider>\n <\/BridgeContext.Provider>\ndiff --git a\/src\/devtools\/views\/Profiler\/ProfilerContext.js b\/src\/devtools\/views\/Profiler\/ProfilerContext.js\nindex c8a89c0d9e..2a9aa6c8fb 100644\n--- a\/src\/devtools\/views\/Profiler\/ProfilerContext.js\n+++ b\/src\/devtools\/views\/Profiler\/ProfilerContext.js\n@@ -9,7 +9,10 @@ import React, {\n } from 'react';\n import { unstable_batchedUpdates as batchedUpdates } from 'react-dom';\n import { useLocalStorage, useSubscription } from '..\/hooks';\n-import { TreeContext } from '..\/Components\/TreeContext';\n+import {\n+ TreeDispatcherContext,\n+ TreeStateContext,\n+} from '..\/Components\/TreeContext';\n import { StoreContext } from '..\/context';\n import Store from '..\/..\/store';\n \n@@ -79,7 +82,8 @@ type Props = {|\n \n function ProfilerContextController({ children }: Props) {\n const store = useContext(StoreContext);\n- const { selectElementByID, selectedElementID } = useContext(TreeContext);\n+ const { selectedElementID } = useContext(TreeStateContext);\n+ const dispatch = useContext(TreeDispatcherContext);\n \n const subscription = useMemo(\n () => ({\n@@ -155,11 +159,14 @@ function ProfilerContextController({ children }: Props) {\n \/\/ If this element is still in the store, then select it in the Components tab as well.\n const element = store.getElementByID(id);\n if (element !== null) {\n- selectElementByID(id);\n+ dispatch({\n+ type: 'SELECT_ELEMENT_BY_ID',\n+ payload: id,\n+ });\n }\n }\n },\n- [selectElementByID, selectFiberID, selectFiberName, store]\n+ [dispatch, selectFiberID, selectFiberName, store]\n );\n \n if (isProfiling) {\n"}

dillon1000/react

Files changed