{"commit":{"authorName":"Brian Vaughn","authorEmail":"bvaughn@fb.com","shortRevision":"0380186501","revision":"038018650169ecbe2962898746ea39ce31f73847","authoredAt":"2019-02-08T14:44:07-05:00","subject":"Refactored tree, search, selection, and owners contexts"},"patch":"diff --git a\/src\/backend\/renderer.js b\/src\/backend\/renderer.js\nindex 9a5ac9da77..8aa50d474a 100644\n--- a\/src\/backend\/renderer.js\n+++ b\/src\/backend\/renderer.js\n@@ -546,7 +546,7 @@ export function attach(\n const { _debugOwner } = fiber;\n \n const ownerID =\n- _debugOwner !== null ? getFiberID(getPrimaryFiber(_debugOwner)) : 0;\n+ _debugOwner != null ? getFiberID(getPrimaryFiber(_debugOwner)) : 0;\n \n let encodedDisplayName = ((null: any): Uint8Array);\n let encodedKey = ((null: any): Uint8Array);\ndiff --git a\/src\/devtools\/store.js b\/src\/devtools\/store.js\nindex 8e3166970e..4480a17ff9 100644\n--- a\/src\/devtools\/store.js\n+++ b\/src\/devtools\/store.js\n@@ -107,6 +107,11 @@ export default class Store extends EventEmitter {\n return ((currentElement: any): Element);\n }\n \n+ getElementIDAtIndex(index: number): number | null {\n+ const element: Element | null = this.getElementAtIndex(index);\n+ return element === null ? null : element.id;\n+ }\n+\n getElementByID(id: number): Element | null {\n const element = this._idToElement.get(id);\n \n@@ -286,9 +291,10 @@ export default class Store extends EventEmitter {\n \n this._idToElement.set(id, element);\n \n- \/\/ Track newly addewd items so search results can be updated\n+ const oldAddedElementIDs = addedElementIDs;\n addedElementIDs = new Uint32Array(addedElementIDs.length + 1);\n- addedElementIDs[addedElementIDs.length - 1] = id;\n+ addedElementIDs.set(oldAddedElementIDs);\n+ addedElementIDs[oldAddedElementIDs.length] = id;\n \n weightDelta = 1;\n }\n@@ -319,8 +325,10 @@ export default class Store extends EventEmitter {\n }\n \n \/\/ Track removed items so search results can be updated\n+ const oldRemovededElementIDs = removedElementIDs;\n removedElementIDs = new Uint32Array(removedElementIDs.length + 1);\n- removedElementIDs[removedElementIDs.length - 1] = id;\n+ removedElementIDs.set(oldRemovededElementIDs);\n+ removedElementIDs[oldRemovededElementIDs.length] = id;\n break;\n case TREE_OPERATION_RESET_CHILDREN:\n id = ((operations[i + 1]: any): number);\ndiff --git a\/src\/devtools\/types.js b\/src\/devtools\/types.js\nindex 047fe86919..59cddbfd10 100644\n--- a\/src\/devtools\/types.js\n+++ b\/src\/devtools\/types.js\n@@ -1,7 +1,5 @@\n \/\/ @flow\n \n-import Store from '.\/Store';\n-\n export const ElementTypeClassOrFunction = 1;\n export const ElementTypeContext = 2;\n export const ElementTypeForwardRef = 3;\n@@ -67,14 +65,6 @@ export type InspectedElement = {|\n \n \/\/ TODO: Add profiling type\n \n-\/\/ The frontend Store is mutable.\n-\/\/ This wrapper object is recreated whenever the store's tree is mutated.\n-\/\/ It is used to trigger a re-render of the virtualized Elements tree.\n-export type TreeMetadataType = {|\n- size: number,\n- store: Store,\n-|};\n-\n export type DehydratedData = {|\n cleaned: Array>,\n data: Object,\ndiff --git a\/src\/devtools\/views\/ButtonIcon.js b\/src\/devtools\/views\/ButtonIcon.js\nindex c6056d72fc..47ad29523d 100644\n--- a\/src\/devtools\/views\/ButtonIcon.js\n+++ b\/src\/devtools\/views\/ButtonIcon.js\n@@ -8,6 +8,7 @@ type Props = {|\n | 'back'\n | 'close'\n | 'down'\n+ | 'more'\n | 'search'\n | 'up'\n | 'view-dom'\n@@ -26,6 +27,9 @@ export default function ButtonIcon({ type }: Props) {\n case 'down':\n pathData = PATH_DOWN;\n break;\n+ case 'more':\n+ pathData = PATH_MORE;\n+ break;\n case 'search':\n pathData = PATH_SEARCH;\n break;\n@@ -68,6 +72,13 @@ const PATH_CLOSE =\n \n const PATH_DOWN = 'M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z';\n \n+const PATH_MORE = `\n+ M22 3H7c-.69 0-1.23.35-1.59.88L0 12l5.41 8.11c.36.53.97.89 1.66.89H22c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zM9\n+ 13.5c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5zm5 0c-.83\n+ 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5zm5 0c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5\n+ 1.5.67 1.5 1.5-.67 1.5-1.5 1.5z\n+`;\n+\n const PATH_SEARCH = `\n M20.94 11c-.46-4.17-3.77-7.48-7.94-7.94V1h-2v2.06C6.83 3.52 3.52 6.83 3.06 11H1v2h2.06c.46\n 4.17 3.77 7.48 7.94 7.94V23h2v-2.06c4.17-.46 7.48-3.77 7.94-7.94H23v-2h-2.06zM12 19c-3.87\ndiff --git a\/src\/devtools\/views\/Element.js b\/src\/devtools\/views\/Element.js\nindex 5825e812aa..e7c9401dd5 100644\n--- a\/src\/devtools\/views\/Element.js\n+++ b\/src\/devtools\/views\/Element.js\n@@ -2,9 +2,8 @@\n \n import React, { Fragment, useCallback, useContext, useMemo } from 'react';\n import { ElementTypeClassOrFunction } from 'src\/devtools\/types';\n-import { TreeContext } from '.\/context';\n import { createRegExp } from '.\/utils';\n-import { SearchAndSelectionContext } from '.\/SearchAndSelectionContext';\n+import { TreeContext } from '.\/TreeContext';\n import Icon from '.\/Icon';\n \n import type { Element } from '..\/types';\n@@ -17,33 +16,30 @@ type Props = {\n };\n \n export default function ElementView({ index, style }: Props) {\n- const { store } = useContext(TreeContext);\n-\n const {\n- ownerList,\n- pushOwnerList,\n+ baseDepth,\n+ getElementAtIndex,\n+ selectOwner,\n selectedElementID,\n- selectElementWithID,\n- } = useContext(SearchAndSelectionContext);\n-\n- const element =\n- ownerList !== null\n- ? ((store.getElementByID(ownerList[index]): any): Element)\n- : ((store.getElementAtIndex(index): any): Element);\n- const { children, depth, displayName, id, key, type } = element;\n-\n- let calculatedDepth = depth;\n- if (ownerList !== null) {\n- const owner = ((store.getElementByID(ownerList[0]): any): Element);\n- calculatedDepth = depth - owner.depth;\n- }\n+ selectElementByID,\n+ } = useContext(TreeContext);\n \n- const handleDoubleClick = useCallback(() => pushOwnerList(id), [id]);\n+ const element = getElementAtIndex(index);\n+ const {\n+ children,\n+ depth,\n+ displayName,\n+ id,\n+ key,\n+ type,\n+ } = ((element: any): Element);\n+\n+ const handleDoubleClick = useCallback(() => selectOwner(id), [id]);\n \n \/\/ TODO Add click and key handlers for toggling element open\/close state.\n \n const handleClick = useCallback(\n- ({ metaKey }) => selectElementWithID(metaKey ? null : id),\n+ ({ metaKey }) => selectElementByID(metaKey ? null : id),\n [id]\n );\n \n@@ -57,7 +53,7 @@ export default function ElementView({ index, style }: Props) {\n onDoubleClick={handleDoubleClick}\n style={{\n ...style, \/\/ \"style\" comes from react-window\n- paddingLeft: `${1 + calculatedDepth}rem`,\n+ paddingLeft: `${1 + depth - baseDepth}rem`,\n }}\n >\n {children.length > 0 && (\n@@ -86,9 +82,7 @@ type DisplayNameProps = {|\n |};\n \n function DisplayName({ displayName, id }: DisplayNameProps) {\n- const { searchIndex, searchResults, searchText } = useContext(\n- SearchAndSelectionContext\n- );\n+ const { searchIndex, searchResults, searchText } = useContext(TreeContext);\n const isSearchResult = useMemo(() => {\n return searchResults.includes(id);\n }, [id, searchResults]);\ndiff --git a\/src\/devtools\/views\/Elements.css b\/src\/devtools\/views\/Elements.css\nindex 2fe8bb63c6..b1814179a8 100644\n--- a\/src\/devtools\/views\/Elements.css\n+++ b\/src\/devtools\/views\/Elements.css\n@@ -9,6 +9,7 @@\n \n .TreeWrapper {\n flex: 0 0 65%;\n+ overflow: auto;\n }\n \n .SelectedElementWrapper {\ndiff --git a\/src\/devtools\/views\/Elements.js b\/src\/devtools\/views\/Elements.js\nindex 116761969a..b79f12cc36 100644\n--- a\/src\/devtools\/views\/Elements.js\n+++ b\/src\/devtools\/views\/Elements.js\n@@ -1,11 +1,11 @@\n \/\/ @flow\n \n-import React, { useEffect, useMemo, useState } from 'react';\n+import React, { useMemo } from 'react';\n import Store from '..\/store';\n import Tree from '.\/Tree';\n-import { BridgeContext, StoreContext, TreeContext } from '.\/context';\n+import { BridgeContext, StoreContext } from '.\/context';\n import SelectedElement from '.\/SelectedElement';\n-import { SearchAndSelectionController } from '.\/SearchAndSelectionContext';\n+import { TreeContextController } from '.\/TreeContext';\n import styles from '.\/Elements.css';\n \n import '.\/root.css';\n@@ -21,46 +21,20 @@ export type Props = {|\n export default function Elements({ bridge, browserName, themeName }: Props) {\n const store = useMemo(() => new Store(bridge), []);\n \n- const [treeContext, setTreeContext] = useState({\n- size: store.numElements,\n- store,\n- });\n-\n- useEffect(() => {\n- const handler = () => {\n- setTreeContext({\n- size: store.numElements,\n- store,\n- });\n- };\n-\n- \/\/ Check for changes that happened between async render and passive effect.\n- \/\/ (We had not yet subscribed to the store so we would have missed these.)\n- if (treeContext.size !== store.numElements) {\n- handler();\n- }\n-\n- store.addListener('mutated', handler);\n-\n- return () => store.removeListener('mutated', handler);\n- }, [store]);\n-\n \/\/ TODO Flex wrappers below should be user resizable.\n return (\n \n \n- \n- \n-

\n-

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

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

\n+

\n+ \n+ <\/div>\n+

\n+ \n <\/div>\n- <\/SearchAndSelectionController>\n- <\/TreeContext.Provider>\n+ <\/div>\n+ <\/TreeContextController>\n <\/StoreContext.Provider>\n <\/BridgeContext.Provider>\n );\ndiff --git a\/src\/devtools\/views\/OwnersStack.css b\/src\/devtools\/views\/OwnersStack.css\nindex c579c24225..822f537a88 100644\n--- a\/src\/devtools\/views\/OwnersStack.css\n+++ b\/src\/devtools\/views\/OwnersStack.css\n@@ -2,6 +2,7 @@\n flex: 1;\n display: flex;\n align-items: center;\n+ overflow-x: auto;\n }\n \n .IconButton {\n@@ -29,6 +30,7 @@\n color: var(--color-component-name);\n font-family: var(--font-family-monospace);\n font-size: var(--font-size-normal);\n+ white-space: nowrap;\n }\n \n .Component {\ndiff --git a\/src\/devtools\/views\/OwnersStack.js b\/src\/devtools\/views\/OwnersStack.js\nindex 6247300a09..79a70eee1c 100644\n--- a\/src\/devtools\/views\/OwnersStack.js\n+++ b\/src\/devtools\/views\/OwnersStack.js\n@@ -2,26 +2,26 @@\n \n import React, { useCallback, useContext } from 'react';\n import ButtonIcon from '.\/ButtonIcon';\n-import { SearchAndSelectionContext } from '.\/SearchAndSelectionContext';\n-import { TreeContext } from '.\/context';\n+import { TreeContext } from '.\/TreeContext';\n+import { StoreContext } from '.\/context';\n \n import type { Element } from '..\/types';\n \n import styles from '.\/OwnersStack.css';\n \n export default function OwnerStack() {\n- const { clearOwnerList, ownerIDStack } = useContext(\n- SearchAndSelectionContext\n- );\n+ const { ownerStack, resetOwnerStack } = useContext(TreeContext);\n \n \/\/ $FlowFixMe \"Missing type annotation for U\" whatever that means\n- const elements = ownerIDStack.map(id => );\n+ const elements = ownerStack.map((id, index) => (\n+ \n+ ));\n \n return (\n

\n \n \n@@ -34,21 +34,21 @@ export default function OwnerStack() {\n \n type Props = {\n id: number,\n+ index: number,\n };\n \n-function ElementView({ id }: Props) {\n- const { ownerIDStack, popToOwnerList } = useContext(\n- SearchAndSelectionContext\n- );\n- const { store } = useContext(TreeContext);\n+function ElementView({ id, index }: Props) {\n+ const { ownerStackIndex, selectOwner } = useContext(TreeContext);\n+ const store = useContext(StoreContext);\n const { displayName } = ((store.getElementByID(id): any): Element);\n \n- const isCurrentlyFocusedOwner = ownerIDStack[ownerIDStack.length - 1] === id;\n+ const isCurrentlyFocusedOwner = ownerStackIndex === index;\n \n- const handleClick = useCallback(() => popToOwnerList(id), [\n- id,\n- popToOwnerList,\n- ]);\n+ const handleClick = useCallback(() => {\n+ if (!isCurrentlyFocusedOwner) {\n+ selectOwner(id);\n+ }\n+ }, [id, isCurrentlyFocusedOwner, selectOwner]);\n \n return (\n ,\n- ownerList: Array | null,\n- searchIndex: number | null,\n- searchResults: Array,\n- searchText: string,\n- selectedElementID: number | null,\n- selectedElementIndex: number | null,\n-\n- \/\/ Update current context values:\n- clearOwnerList: () => void,\n- decrementSearchIndex(): void,\n- incrementSearchIndex(): void,\n- popToOwnerList(elementID: number): void,\n- pushOwnerList(elementID: number): void,\n- selectElementWithID(id: number | null): void,\n- selectNextElementInTree(): void,\n- selectPreviousElementInTree(): void,\n- updateSearchText(searchText: string): void,\n-|};\n-\n-const SearchAndSelectionContext = createContext(\n- ((null: any): Context)\n-);\n-\/\/ $FlowFixMe displayName is a valid attribute of React$ConsearchText\n-SearchAndSelectionContext.displayName = 'SearchAndSelectionContext';\n-\n-type State = {|\n- ownerIDStack: Array,\n- ownerList: Array | null,\n- searchIndex: number | null,\n- searchResults: Array,\n- searchText: string,\n- selectedElementID: number | null,\n- selectedElementIndex: number | null,\n-|};\n-\n-type Action = {|\n- type:\n- | 'CLEAR_OWNER_LIST'\n- | 'DECREMENT_SEARCH_INDEX'\n- | 'INCREMENT_SEARCH_INDEX'\n- | 'POP_TO_OWNER_LIST'\n- | 'PUSH_OWNER_LIST'\n- | 'REFINE_AFTER_MUTATION'\n- | 'SELECT_ELEMENT_WITH_ID'\n- | 'SELECT_NEXT_ELEMENT_IN_TREE'\n- | 'SELECT_PREVIOUS_ELEMENT_IN_TREE'\n- | 'UPDATE_SEARCH_TEXT',\n- payload?: any,\n-|};\n-\n-type Props = {|\n- children: React$Node,\n-|};\n-\n-\/\/ TODO Remove this wrapper element once global ConsearchText.write API exists.\n-function SearchAndSelectionController({ children }: Props) {\n- const store = useContext(StoreContext);\n-\n- \/\/ This reducer is created inline because it needs access to the Store.\n- \/\/ The store is mutable, but the Store itself is global and lives for the lifetime of the DevTools,\n- \/\/ so it's okay for the reducer to have an empty dependencies array.\n- const reducer = useMemo(\n- () =>\n- function reducer(state: State, action: Action): State {\n- const {\n- ownerIDStack,\n- ownerList,\n- searchIndex,\n- searchResults,\n- searchText,\n- selectedElementID,\n- selectedElementIndex,\n- } = state;\n- const { payload, type } = action;\n-\n- let element,\n- elementID,\n- newOwnerList,\n- newOwnerIDStack,\n- newSearchIndex,\n- newSearchResults,\n- newSearchText,\n- newSelectedElementID,\n- newSelectedElementIndex;\n-\n- const updateSelectedElementIndexHelper = (\n- newSelectedElementIndex: number\n- ) => {\n- if (ownerList !== null) {\n- newSelectedElementID =\n- newSelectedElementIndex !== null\n- ? ownerList[newSelectedElementIndex]\n- : null;\n-\n- return {\n- ...state,\n- selectedElementID: newSelectedElementID,\n- selectedElementIndex: newSelectedElementIndex,\n- };\n- } else {\n- element =\n- newSelectedElementIndex !== null\n- ? store.getElementAtIndex(newSelectedElementIndex)\n- : null;\n-\n- return {\n- ...state,\n- selectedElementID: element !== null ? element.id : null,\n- selectedElementIndex: newSelectedElementIndex,\n- };\n- }\n- };\n-\n- switch (type) {\n- case 'CLEAR_OWNER_LIST':\n- return {\n- ...state,\n- ownerList: null,\n- ownerIDStack: [],\n- };\n-\n- case 'DECREMENT_SEARCH_INDEX':\n- if (ownerList !== null) {\n- throw Error(\n- `Can't update search index while owner list is active`\n- );\n- }\n-\n- if (searchResults.length === 0) return state;\n-\n- newSearchIndex =\n- ((searchIndex: any): number) > 0\n- ? ((searchIndex: any): number) - 1\n- : searchResults.length - 1;\n- newSelectedElementID = searchResults[newSearchIndex];\n-\n- return {\n- ...state,\n- searchIndex: newSearchIndex,\n- selectedElementID: newSelectedElementID,\n- selectedElementIndex: store.getIndexOfElementID(\n- newSelectedElementID\n- ),\n- };\n-\n- case 'INCREMENT_SEARCH_INDEX':\n- if (ownerList !== null) {\n- throw Error(\n- `Can't update search index while owner list is active`\n- );\n- }\n-\n- if (searchResults.length === 0) return state;\n-\n- newSearchIndex =\n- ((searchIndex: any): number) + 1 < searchResults.length\n- ? ((searchIndex: any): number) + 1\n- : 0;\n- newSelectedElementID = searchResults[newSearchIndex];\n-\n- return {\n- ...state,\n- searchIndex: newSearchIndex,\n- selectedElementID: newSelectedElementID,\n- selectedElementIndex: store.getIndexOfElementID(\n- newSelectedElementID\n- ),\n- };\n-\n- case 'POP_TO_OWNER_LIST':\n- elementID = ((payload: any): number);\n- return {\n- ...state,\n- ownerList: calculateCurrentOwnerList(\n- store,\n- elementID,\n- elementID,\n- []\n- ),\n- ownerIDStack: ownerIDStack.slice(\n- 0,\n- ownerIDStack.indexOf(elementID) + 1\n- ),\n- selectedElementIndex: null,\n- selectedElementID: null,\n- };\n-\n- case 'PUSH_OWNER_LIST':\n- elementID = ((payload: any): number);\n- if (ownerIDStack.includes(elementID)) return state;\n-\n- \/\/ Add this new owner, and fill in the owners above it as well.\n- const ownerIDsToConcat = [];\n- let currentOwnerID = elementID;\n- while (\n- currentOwnerID !== 0 &&\n- ownerIDStack[ownerIDStack.length - 1] !== currentOwnerID\n- ) {\n- ownerIDsToConcat.unshift(currentOwnerID);\n- currentOwnerID = ((store.getElementByID(\n- currentOwnerID\n- ): any): Element).ownerID;\n- }\n-\n- return {\n- ...state,\n- ownerList: calculateCurrentOwnerList(\n- store,\n- elementID,\n- elementID,\n- []\n- ),\n- ownerIDStack: ownerIDStack.concat(ownerIDsToConcat),\n- selectedElementIndex: null,\n- selectedElementID: null,\n- searchIndex: null,\n- searchResults: [],\n- searchText: '',\n- };\n-\n- case 'REFINE_AFTER_MUTATION':\n- const [\n- addedElementIDs,\n- removedElementIDs,\n- ] = ((payload: any): Array);\n-\n- newOwnerList = ownerList;\n- newOwnerIDStack = ownerIDStack;\n- newSearchIndex = searchIndex;\n- newSearchResults = searchResults;\n- newSearchText = searchText;\n- newSelectedElementID = selectedElementID;\n- newSelectedElementIndex = selectedElementIndex;\n-\n- if (searchText !== '') {\n- removedElementIDs.forEach(id => {\n- \/\/ Prune this item from the search results.\n- const index = newSearchResults.indexOf(id);\n- if (index >= 0) {\n- newSearchResults = newSearchResults\n- .slice(0, index)\n- .concat(newSearchResults.slice(index + 1));\n-\n- \/\/ If the results are now empty, also deselect things.\n- if (newSearchResults.length === 0) {\n- newSearchIndex = null;\n- } else if (\n- ((newSearchIndex: any): number) >= newSearchResults.length\n- ) {\n- newSearchIndex = newSearchResults.length - 1;\n- }\n- }\n- });\n-\n- addedElementIDs.forEach(id => {\n- const { displayName } = ((store.getElementByID(\n- id\n- ): any): Element);\n-\n- \/\/ Add this item to the search results if it matches.\n- const regExp = createRegExp(searchText);\n- if (displayName !== null && regExp.test(displayName)) {\n- const newElementIndex = ((store.getIndexOfElementID(\n- id\n- ): any): number);\n-\n- let foundMatch = false;\n- for (\n- let index = 0;\n- index < newSearchResults.length;\n- index++\n- ) {\n- const id = newSearchResults[index];\n- if (\n- newElementIndex <\n- ((store.getIndexOfElementID(id): any): number)\n- ) {\n- foundMatch = true;\n- newSearchResults = newSearchResults\n- .slice(0, index)\n- .concat(id)\n- .concat(newSearchResults.slice(index));\n- break;\n- }\n- }\n- if (!foundMatch) {\n- newSearchResults = newSearchResults.concat(id);\n- }\n-\n- newSearchIndex = newSearchIndex === null ? 0 : newSearchIndex;\n- }\n- });\n-\n- newSelectedElementID =\n- newSearchIndex !== null\n- ? newSearchResults[newSearchIndex]\n- : null;\n- newSelectedElementIndex =\n- newSelectedElementID !== null\n- ? store.getIndexOfElementID(newSelectedElementID)\n- : null;\n- }\n-\n- \/\/ If an item in the owner stack has been removed from the tree, unwind it.\n- if (ownerIDStack.length > 0) {\n- let indexOfRemovedItem = -1;\n- for (let i = 0; i < ownerIDStack.length; i++) {\n- if (removedElementIDs.includes(ownerIDStack[i])) {\n- indexOfRemovedItem = i;\n- break;\n- }\n- }\n-\n- if (indexOfRemovedItem >= 0) {\n- newOwnerIDStack = ownerIDStack.slice(0, indexOfRemovedItem);\n- }\n-\n- if (newOwnerIDStack.length === 0) {\n- newOwnerList = null;\n- } else {\n- elementID = newOwnerIDStack[newOwnerIDStack.length - 1];\n-\n- newOwnerList = calculateCurrentOwnerList(\n- store,\n- elementID,\n- elementID,\n- []\n- );\n-\n- newSelectedElementIndex =\n- newSelectedElementID !== null\n- ? newOwnerList.indexOf(newSelectedElementID)\n- : null;\n- }\n- }\n-\n- return {\n- ...state,\n- ownerIDStack: newOwnerIDStack,\n- ownerList: newOwnerList,\n- searchIndex: newSearchIndex,\n- searchResults: newSearchResults,\n- selectedElementID: newSelectedElementID,\n- selectedElementIndex: newSelectedElementIndex,\n- };\n-\n- case 'SELECT_ELEMENT_WITH_ID':\n- newSelectedElementID = ((payload: any): number | null);\n- newSelectedElementIndex = null;\n-\n- if (newSelectedElementID !== null) {\n- if (ownerList !== null) {\n- newSelectedElementIndex = ownerList.indexOf(\n- newSelectedElementID\n- );\n- } else {\n- newSelectedElementIndex = store.getIndexOfElementID(\n- newSelectedElementID\n- );\n- }\n- }\n-\n- const isInOwnerList =\n- newSelectedElementID !== null &&\n- ownerList !== null &&\n- ownerList.includes(newSelectedElementID);\n-\n- return {\n- ...state,\n- ownerIDStack: isInOwnerList ? ownerIDStack : [],\n- ownerList: isInOwnerList ? ownerList : null,\n- selectedElementID: newSelectedElementID,\n- selectedElementIndex: newSelectedElementIndex,\n- };\n-\n- case 'SELECT_NEXT_ELEMENT_IN_TREE':\n- if (selectedElementIndex === null) {\n- return state;\n- } else if (ownerList !== null) {\n- return updateSelectedElementIndexHelper(\n- selectedElementIndex + 1 < ownerList.length\n- ? selectedElementIndex + 1\n- : selectedElementIndex\n- );\n- } else {\n- return updateSelectedElementIndexHelper(\n- selectedElementIndex + 1 < store.numElements\n- ? selectedElementIndex + 1\n- : selectedElementIndex\n- );\n- }\n-\n- case 'SELECT_PREVIOUS_ELEMENT_IN_TREE':\n- if (selectedElementIndex === null) {\n- return state;\n- } else if (ownerList !== null) {\n- return updateSelectedElementIndexHelper(\n- selectedElementIndex > 0\n- ? selectedElementIndex - 1\n- : selectedElementIndex\n- );\n- } else {\n- return updateSelectedElementIndexHelper(\n- selectedElementIndex > 0\n- ? selectedElementIndex - 1\n- : selectedElementIndex\n- );\n- }\n-\n- case 'UPDATE_SEARCH_TEXT':\n- newSearchIndex = searchIndex;\n- newSearchResults = [];\n- newSearchText = ((payload: any): string);\n-\n- \/\/ Find all matching elements.\n- if (newSearchText !== '') {\n- const regExp = createRegExp(newSearchText);\n- store.roots.forEach(rootID => {\n- recursivelySearchTree(store, rootID, regExp, newSearchResults);\n- });\n-\n- \/\/ If this is a refinement of a previous search, preserve the current index (unless it's no longer valid).\n- \/\/ If it's a new search, reset the index.\n- if (newSearchResults.length === 0) {\n- newSearchIndex = null;\n- } else if (\n- searchIndex !== null &&\n- newSearchText.startsWith(searchText)\n- ) {\n- newSearchIndex = Math.min(\n- searchIndex,\n- newSearchResults.length - 1\n- );\n- } else {\n- newSearchIndex = 0;\n- }\n- } else {\n- newSearchIndex = null;\n- }\n-\n- newSelectedElementID =\n- newSearchIndex !== null ? newSearchResults[newSearchIndex] : null;\n-\n- return {\n- ...state,\n- searchIndex: newSearchIndex,\n- searchResults: newSearchResults,\n- searchText: newSearchText,\n- selectedElementID: newSelectedElementID,\n- selectedElementIndex:\n- newSelectedElementID !== null\n- ? store.getIndexOfElementID(newSelectedElementID)\n- : null,\n- };\n-\n- default:\n- throw new Error(`Unrecognized action \"${type}\"`);\n- }\n- },\n- []\n- );\n-\n- const [state, dispatch] = useReducer(reducer, {\n- ownerIDStack: [],\n- ownerList: null,\n- searchIndex: null,\n- searchResults: [],\n- searchText: '',\n- selectedElementID: null,\n- selectedElementIndex: null,\n- });\n-\n- const clearOwnerList = useCallback(\n- () => dispatch({ type: 'CLEAR_OWNER_LIST' }),\n- [dispatch]\n- );\n- const decrementSearchIndex = useCallback(\n- () => dispatch({ type: 'DECREMENT_SEARCH_INDEX' }),\n- [dispatch]\n- );\n- const incrementSearchIndex = useCallback(\n- () => dispatch({ type: 'INCREMENT_SEARCH_INDEX' }),\n- [dispatch]\n- );\n- const popToOwnerList = useCallback(\n- (elementID: number) =>\n- dispatch({ type: 'POP_TO_OWNER_LIST', payload: elementID }),\n- [dispatch]\n- );\n- const pushOwnerList = useCallback(\n- (elementID: number) =>\n- dispatch({ type: 'PUSH_OWNER_LIST', payload: elementID }),\n- [dispatch]\n- );\n- const selectElementWithID = useCallback(\n- (id: number | null) =>\n- dispatch({ type: 'SELECT_ELEMENT_WITH_ID', payload: id }),\n- [dispatch]\n- );\n- const selectNextElementInTree = useCallback(\n- () => dispatch({ type: 'SELECT_NEXT_ELEMENT_IN_TREE' }),\n- [dispatch]\n- );\n- const selectPreviousElementInTree = useCallback(\n- () => dispatch({ type: 'SELECT_PREVIOUS_ELEMENT_IN_TREE' }),\n- [dispatch]\n- );\n- const updateSearchText = useCallback(\n- (searchText: string) =>\n- dispatch({ type: 'UPDATE_SEARCH_TEXT', payload: searchText }),\n- [dispatch]\n- );\n-\n- const value = useMemo(\n- () => ({\n- ownerList: state.ownerList,\n- ownerIDStack: state.ownerIDStack,\n- searchIndex: state.searchIndex,\n- searchResults: state.searchResults,\n- searchText: state.searchText,\n- selectedElementID: state.selectedElementID,\n- selectedElementIndex: state.selectedElementIndex,\n-\n- clearOwnerList,\n- decrementSearchIndex,\n- incrementSearchIndex,\n- popToOwnerList,\n- pushOwnerList,\n- selectElementWithID,\n- selectNextElementInTree,\n- selectPreviousElementInTree,\n- updateSearchText,\n- }),\n- [state]\n- );\n-\n- \/\/ Listen for changes to the tree and incrementally adjust the search results.\n- useLayoutEffect(() => {\n- const handleStoreMutated = ([\n- addedElementIDs,\n- removedElementIDs,\n- ]: Array) => {\n- if (!state.searchText && state.ownerList === null) {\n- return;\n- }\n-\n- dispatch({\n- type: 'REFINE_AFTER_MUTATION',\n- payload: [addedElementIDs, removedElementIDs],\n- });\n- };\n-\n- store.addListener('mutated', handleStoreMutated);\n-\n- return () => store.removeListener('mutated', handleStoreMutated);\n- }, [state, store]);\n-\n- return (\n- \n- {children}\n- <\/SearchAndSelectionContext.Provider>\n- );\n-}\n-\n-function calculateCurrentOwnerList(\n- store: Store,\n- rootOwnerID: number,\n- elementID: number,\n- ownerList: Array\n-): Array {\n- if (elementID === rootOwnerID) {\n- ownerList.push(elementID);\n- const { children } = ((store.getElementByID(elementID): any): Element);\n- children.forEach(childID =>\n- calculateCurrentOwnerList(store, rootOwnerID, childID, ownerList)\n- );\n- } else {\n- const { children, ownerID } = ((store.getElementByID(\n- elementID\n- ): any): Element);\n- if (ownerID === rootOwnerID) {\n- ownerList.push(elementID);\n- children.forEach(childID =>\n- calculateCurrentOwnerList(store, rootOwnerID, childID, ownerList)\n- );\n- }\n- }\n-\n- return ownerList;\n-}\n-\n-function recursivelySearchTree(\n- store: Store,\n- elementID: number,\n- regExp: RegExp,\n- searchResults: Array\n-): void {\n- const { children, displayName } = ((store.getElementByID(\n- elementID\n- ): any): Element);\n- if (displayName !== null) {\n- if (regExp.test(displayName)) {\n- searchResults.push(elementID);\n- }\n- }\n- children.forEach(childID =>\n- recursivelySearchTree(store, childID, regExp, searchResults)\n- );\n-}\n-\n-export { SearchAndSelectionContext, SearchAndSelectionController };\ndiff --git a\/src\/devtools\/views\/SearchInput.js b\/src\/devtools\/views\/SearchInput.js\nindex 24d3e1453c..5a16d1c383 100644\n--- a\/src\/devtools\/views\/SearchInput.js\n+++ b\/src\/devtools\/views\/SearchInput.js\n@@ -1,7 +1,7 @@\n \/\/ @flow\n \n import React, { useCallback, useContext, useEffect, useRef } from 'react';\n-import { SearchAndSelectionContext } from '.\/SearchAndSelectionContext';\n+import { TreeContext } from '.\/TreeContext';\n import ButtonIcon from '.\/ButtonIcon';\n \n import styles from '.\/SearchInput.css';\n@@ -10,32 +10,32 @@ type Props = {||};\n \n export default function SearchInput(props: Props) {\n const {\n- decrementSearchIndex,\n- incrementSearchIndex,\n+ goToNextSearchResult,\n+ goToPreviousSearchResult,\n searchIndex,\n searchResults,\n searchText,\n- updateSearchText,\n- } = useContext(SearchAndSelectionContext);\n+ setSearchText,\n+ } = useContext(TreeContext);\n \n const inputRef = useRef();\n \n const handleTextChange = useCallback(\n- ({ currentTarget }) => updateSearchText(currentTarget.value),\n- [updateSearchText]\n+ ({ currentTarget }) => setSearchText(currentTarget.value),\n+ [setSearchText]\n );\n \n const resetSearch = useCallback(() => {\n- updateSearchText('');\n- }, [updateSearchText]);\n+ setSearchText('');\n+ }, [setSearchText]);\n \n const handleInputKeyPress = useCallback(\n ({ key }) => {\n if (key === 'Enter') {\n- incrementSearchIndex();\n+ goToNextSearchResult();\n }\n },\n- [incrementSearchIndex]\n+ [goToNextSearchResult]\n );\n \n \/\/ Auto-focus search input\n@@ -74,14 +74,16 @@ export default function SearchInput(props: Props) {\n

\n \n \n <\/button>\n \n \ndiff --git a\/src\/devtools\/views\/SelectedElement.js b\/src\/devtools\/views\/SelectedElement.js\nindex a107bb0768..fb11fa0a16 100644\n--- a\/src\/devtools\/views\/SelectedElement.js\n+++ b\/src\/devtools\/views\/SelectedElement.js\n@@ -7,7 +7,7 @@ import React, {\n useRef,\n useState,\n } from 'react';\n-import { SearchAndSelectionContext } from '.\/SearchAndSelectionContext';\n+import { TreeContext } from '.\/TreeContext';\n import { BridgeContext, StoreContext } from '.\/context';\n import ButtonIcon from '.\/ButtonIcon';\n import HooksTree from '.\/HooksTree';\n@@ -21,7 +21,7 @@ import type { DehydratedData } from 'src\/devtools\/types';\n export type Props = {||};\n \n export default function SelectedElement(_: Props) {\n- const { selectedElementID } = useContext(SearchAndSelectionContext);\n+ const { selectedElementID } = useContext(TreeContext);\n const store = useContext(StoreContext);\n const element =\n selectedElementID !== null ? store.getElementByID(selectedElementID) : null;\n@@ -107,9 +107,9 @@ function InspectedElementView({ inspectedElement }: InspectedElementViewProps) {\n }\n \n function OwnerView({ displayName, id }: { displayName: string, id: number }) {\n- const { selectElementWithID } = useContext(SearchAndSelectionContext);\n+ const { selectElementByID } = useContext(TreeContext);\n \n- const handleClick = useCallback(() => selectElementWithID(id), [id]);\n+ const handleClick = useCallback(() => selectElementByID(id), [id]);\n \n return (\n >();\n \n \/\/ Make sure a newly selected element is visible in the list.\n@@ -66,22 +66,23 @@ export default function Tree(props: Props) {\n selectedElementIndex,\n selectNextElementInTree,\n selectPreviousElementInTree,\n- treeContext,\n ]);\n \n- const itemCount = ownerList !== null ? ownerList.length : treeContext.size;\n-\n \/\/ Let react-window know to re-render any time the underlying tree data changes.\n \/\/ This includes the owner context, since it controls a filtered view of the tree.\n- const itemData = useMemo(() => ({ treeContext, ownerList }), [\n- treeContext,\n- ownerList,\n- ]);\n+ const itemData = useMemo(\n+ () => ({\n+ baseDepth,\n+ numElements,\n+ getElementAtIndex,\n+ }),\n+ [baseDepth, numElements, getElementAtIndex]\n+ );\n \n return (\n

\n- {ownerIDStack.length > 0 ? : }\n+ {ownerStack.length > 0 ? : }\n search -> owners\n+\/\/ This enables each section to potentially override (or mask) previous values.\n+\n+import React, {\n+ createContext,\n+ useCallback,\n+ useContext,\n+ useLayoutEffect,\n+ useMemo,\n+ useReducer,\n+} from 'react';\n+import { createRegExp } from '.\/utils';\n+import { StoreContext } from '.\/context';\n+import Store from '..\/store';\n+\n+import type { Element } from 'src\/devtools\/types';\n+\n+type Context = {|\n+ \/\/ Tree\n+ baseDepth: number,\n+ numElements: number,\n+ selectedElementID: number | null,\n+ selectedElementIndex: number | null,\n+ getElementAtIndex(index: number): Element | null,\n+ selectElementAtIndex(index: number): void,\n+ selectElementByID(id: number | null): void,\n+ selectNextElementInTree(): 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+ ownerStack: Array,\n+ ownerStackIndex: number | null,\n+ resetOwnerStack(): void,\n+ selectOwner(id: number): void,\n+|};\n+\n+const TreeContext = createContext(((null: any): Context));\n+\/\/ $FlowFixMe displayName is a valid attribute of React$ConsearchText\n+TreeContext.displayName = 'TreeContext';\n+\n+type State = {|\n+ \/\/ Tree\n+ baseDepth: number,\n+ numElements: number,\n+ selectedElementID: number | null,\n+ selectedElementIndex: number | null,\n+\n+ \/\/ Search\n+ searchIndex: number | null,\n+ searchResults: Array,\n+ searchText: string,\n+\n+ \/\/ Owners\n+ ownerStack: Array,\n+ ownerStackIndex: number | null,\n+ _ownerFlatTree: Array | 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_ELEMENT_AT_INDEX'\n+ | 'SELECT_ELEMENT_BY_ID'\n+ | 'SELECT_NEXT_ELEMENT_IN_TREE'\n+ | 'SELECT_PREVIOUS_ELEMENT_IN_TREE'\n+ | 'SELECT_OWNER'\n+ | 'SET_SEARCH_TEXT',\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+ selectedElementIndex,\n+ selectedElementID,\n+ } = 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+ case 'HANDLE_STORE_MUTATION':\n+ numElements = store.numElements;\n+\n+ \/\/ If the currently-selected Element has been removed from the tree, update selection state.\n+ if (selectedElementID !== null) {\n+ const removedElementIDs = ((payload: any): Array)[1];\n+ if (removedElementIDs.includes(((selectedElementID: any): number))) {\n+ selectedElementIndex = null;\n+ }\n+ }\n+ break;\n+ case 'SELECT_ELEMENT_AT_INDEX':\n+ selectedElementIndex = ((payload: any): number | null);\n+ break;\n+ case 'SELECT_ELEMENT_BY_ID':\n+ selectedElementIndex =\n+ payload === null\n+ ? null\n+ : store.getIndexOfElementID(((payload: any): number));\n+ break;\n+ case 'SELECT_NEXT_ELEMENT_IN_TREE':\n+ if (\n+ selectedElementIndex !== null &&\n+ selectedElementIndex + 1 < numElements\n+ ) {\n+ selectedElementIndex++;\n+ }\n+ break;\n+ case 'SELECT_PREVIOUS_ELEMENT_IN_TREE':\n+ if (selectedElementIndex !== null && selectedElementIndex > 0) {\n+ selectedElementIndex--;\n+ }\n+ break;\n+ default:\n+ \/\/ React can bailout of no-op updates.\n+ return state;\n+ }\n+ }\n+\n+ \/\/ Keep selected item ID and index in sync.\n+ if (selectedElementIndex !== state.selectedElementIndex) {\n+ if (selectedElementIndex === null) {\n+ selectedElementID = null;\n+ } else {\n+ selectedElementID = store.getElementIDAtIndex(\n+ ((selectedElementIndex: any): number)\n+ );\n+ }\n+ }\n+\n+ return {\n+ ...state,\n+\n+ numElements,\n+ selectedElementIndex,\n+ selectedElementID,\n+ };\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+ searchResults,\n+ searchText,\n+ selectedElementID,\n+ selectedElementIndex,\n+ } = state;\n+\n+ const prevSearchIndex = searchIndex;\n+ const numPrevSearchResults = searchResults.length;\n+\n+ \/\/ Search isn't supported when the owner's tree is active.\n+ if (ownerStack.length === 0) {\n+ switch (type) {\n+ case 'GO_TO_NEXT_SEARCH_RESULT':\n+ if (numPrevSearchResults > 0) {\n+ searchIndex =\n+ searchIndex + 1 < numPrevSearchResults ? searchIndex + 1 : 0;\n+ }\n+ break;\n+ case 'GO_TO_PREVIOUS_SEARCH_RESULT':\n+ if (numPrevSearchResults > 0) {\n+ searchIndex =\n+ ((searchIndex: any): number) > 0\n+ ? ((searchIndex: any): number) - 1\n+ : numPrevSearchResults - 1;\n+ }\n+ break;\n+ case 'HANDLE_STORE_MUTATION':\n+ if (searchText !== '') {\n+ const [\n+ addedElementIDs,\n+ removedElementIDs,\n+ ] = ((payload: any): Array);\n+\n+ removedElementIDs.forEach(id => {\n+ \/\/ Prune this item from the search results.\n+ const index = searchResults.indexOf(id);\n+ if (index >= 0) {\n+ searchResults = searchResults\n+ .slice(0, index)\n+ .concat(searchResults.slice(index + 1));\n+\n+ \/\/ If the results are now empty, also deselect things.\n+ if (searchResults.length === 0) {\n+ searchIndex = null;\n+ } else if (((searchIndex: any): number) >= searchResults.length) {\n+ searchIndex = searchResults.length - 1;\n+ }\n+ }\n+ });\n+\n+ addedElementIDs.forEach(id => {\n+ const { displayName } = ((store.getElementByID(id): any): Element);\n+\n+ \/\/ Add this item to the search results if it matches.\n+ const regExp = createRegExp(searchText);\n+ if (displayName !== null && regExp.test(displayName)) {\n+ const newElementIndex = ((store.getIndexOfElementID(\n+ id\n+ ): any): number);\n+\n+ let foundMatch = false;\n+ for (let index = 0; index < searchResults.length; index++) {\n+ const id = searchResults[index];\n+ if (\n+ newElementIndex <\n+ ((store.getIndexOfElementID(id): any): number)\n+ ) {\n+ foundMatch = true;\n+ searchResults = searchResults\n+ .slice(0, index)\n+ .concat(id)\n+ .concat(searchResults.slice(index));\n+ break;\n+ }\n+ }\n+ if (!foundMatch) {\n+ searchResults = searchResults.concat(id);\n+ }\n+\n+ searchIndex = searchIndex === null ? 0 : searchIndex;\n+ }\n+ });\n+ }\n+ break;\n+ case 'SET_SEARCH_TEXT':\n+ searchIndex = null;\n+ searchResults = [];\n+ searchText = ((payload: any): string);\n+\n+ if (searchText !== '') {\n+ const regExp = createRegExp(searchText);\n+ store.roots.forEach(rootID => {\n+ recursivelySearchTree(store, rootID, regExp, searchResults);\n+ });\n+\n+ if (searchResults.length > 0) {\n+ if (prevSearchIndex === null) {\n+ searchIndex = 0;\n+ } else {\n+ searchIndex = Math.min(\n+ ((prevSearchIndex: any): number),\n+ searchResults.length - 1\n+ );\n+ }\n+ }\n+ }\n+ break;\n+ default:\n+ \/\/ React can bailout of no-op updates.\n+ return state;\n+ }\n+ }\n+\n+ \/\/ Changes in search index should override the selected element.\n+ if (searchIndex !== prevSearchIndex) {\n+ if (searchIndex === null) {\n+ selectedElementIndex = null;\n+ selectedElementID = null;\n+ } else {\n+ selectedElementID = ((searchResults[searchIndex]: any): number);\n+ selectedElementIndex = store.getIndexOfElementID(\n+ ((selectedElementID: any): number)\n+ );\n+ }\n+ }\n+\n+ return {\n+ ...state,\n+\n+ selectedElementID,\n+ selectedElementIndex,\n+\n+ searchIndex,\n+ searchResults,\n+ searchText,\n+ };\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+ ownerStack,\n+ ownerStackIndex,\n+ searchIndex,\n+ searchResults,\n+ searchText,\n+ _ownerFlatTree,\n+ } = state;\n+\n+ switch (type) {\n+ case 'HANDLE_STORE_MUTATION':\n+ if (ownerStack.length > 0) {\n+ \/\/ eslint-disable-next-line no-unused-vars\n+ const [_, removedElementIDs] = ((payload: any): Array);\n+\n+ let indexOfRemovedItem = -1;\n+ for (let i = 0; i < ownerStack.length; i++) {\n+ if (removedElementIDs.includes(ownerStack[i])) {\n+ indexOfRemovedItem = i;\n+ break;\n+ }\n+ }\n+\n+ if (indexOfRemovedItem >= 0) {\n+ ownerStack = ownerStack.slice(0, indexOfRemovedItem);\n+ if (ownerStack.length === 0) {\n+ _ownerFlatTree = null;\n+ } else {\n+ ownerStackIndex = ownerStack.length - 1;\n+ }\n+ }\n+ }\n+ break;\n+ case 'RESET_OWNER_STACK':\n+ ownerStack = [];\n+ ownerStackIndex = null;\n+ _ownerFlatTree = null;\n+ break;\n+ case 'SELECT_ELEMENT_AT_INDEX':\n+ if (_ownerFlatTree !== null) {\n+ selectedElementIndex = ((payload: any): number | null);\n+ }\n+ break;\n+ case 'SELECT_ELEMENT_BY_ID':\n+ if (_ownerFlatTree !== null) {\n+ selectedElementIndex =\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 (selectedElementIndex === null) {\n+ selectedElementIndex = 0;\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 (selectedElementIndex !== null && selectedElementIndex > 0) {\n+ selectedElementIndex--;\n+ }\n+ }\n+ break;\n+ case 'SELECT_OWNER':\n+ ownerStackIndex = ownerStack.indexOf(payload);\n+\n+ \/\/ If this owner is already in the current stack, just select it.\n+ \/\/ Otherwise, create a new stack.\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+ while (currentOwnerID !== 0) {\n+ ownerStack.unshift(currentOwnerID);\n+ currentOwnerID = ((store.getElementByID(\n+ currentOwnerID\n+ ): any): Element).ownerID;\n+ }\n+ ownerStackIndex = ownerStack.length - 1;\n+ selectedElementIndex = 0;\n+\n+ if (searchText !== '') {\n+ searchIndex = null;\n+ searchResults = [];\n+ searchText = '';\n+ }\n+ }\n+ break;\n+ default:\n+ \/\/ React can bailout of no-op updates.\n+ return state;\n+ }\n+\n+ \/\/ Changes in the selected owner require re-calculating the owners tree.\n+ if (\n+ ownerStackIndex !== state.ownerStackIndex ||\n+ ownerStack !== state.ownerStack ||\n+ type === 'HANDLE_STORE_MUTATION'\n+ ) {\n+ if (ownerStackIndex === null) {\n+ _ownerFlatTree = null;\n+ baseDepth = 0;\n+ numElements = store.numElements;\n+ } else {\n+ _ownerFlatTree = calculateCurrentOwnerList(\n+ store,\n+ ownerStack[ownerStackIndex],\n+ ownerStack[ownerStackIndex],\n+ []\n+ );\n+\n+ baseDepth = ((store.getElementByID(_ownerFlatTree[0]): any): Element)\n+ .depth;\n+ numElements = _ownerFlatTree.length;\n+ }\n+ }\n+\n+ \/\/ Keep selected item ID and index in sync.\n+ if (selectedElementIndex !== state.selectedElementIndex) {\n+ if (selectedElementIndex === null) {\n+ selectedElementID = null;\n+ } else if (_ownerFlatTree !== null) {\n+ selectedElementID = _ownerFlatTree[((selectedElementIndex: any): number)];\n+ }\n+ }\n+\n+ return {\n+ ...state,\n+\n+ baseDepth,\n+ numElements,\n+ selectedElementID,\n+ selectedElementIndex,\n+\n+ searchIndex,\n+ searchResults,\n+ searchText,\n+\n+ ownerStack,\n+ ownerStackIndex,\n+ _ownerFlatTree,\n+ };\n+}\n+\n+\/\/ TODO Remove TreeContextController wrapper element once global ConsearchText.write API exists.\n+function TreeContextController({ children }: {| children: React$Node |}) {\n+ const store = useContext(StoreContext);\n+\n+ \/\/ This reducer is created inline because it needs access to the Store.\n+ \/\/ The store is mutable, but the Store itself is global and lives for the lifetime of the DevTools,\n+ \/\/ so it's okay for the reducer to have an empty dependencies array.\n+ const reducer = useMemo(\n+ () => (state: State, action: Action): State => {\n+ const { type } = action;\n+ switch (type) {\n+ case 'GO_TO_NEXT_SEARCH_RESULT':\n+ case 'GO_TO_PREVIOUS_SEARCH_RESULT':\n+ case 'HANDLE_STORE_MUTATION':\n+ case 'RESET_OWNER_STACK':\n+ case 'SELECT_ELEMENT_AT_INDEX':\n+ case 'SELECT_ELEMENT_BY_ID':\n+ case 'SELECT_NEXT_ELEMENT_IN_TREE':\n+ case 'SELECT_PREVIOUS_ELEMENT_IN_TREE':\n+ case 'SELECT_OWNER':\n+ case 'SET_SEARCH_TEXT':\n+ state = reduceTreeState(store, state, action);\n+ state = reduceSearchState(store, state, action);\n+ state = reduceOwnersState(store, state, action);\n+ return state;\n+ default:\n+ throw new Error(`Unrecognized action \"${type}\"`);\n+ }\n+ },\n+ [store]\n+ );\n+\n+ const [state, dispatch] = useReducer(reducer, {\n+ \/\/ Tree\n+ baseDepth: 0,\n+ numElements: store.numElements,\n+ selectedElementIndex: null,\n+ selectedElementID: null,\n+\n+ \/\/ Search\n+ searchIndex: null,\n+ searchResults: [],\n+ searchText: '',\n+\n+ \/\/ Owners\n+ ownerStack: [],\n+ ownerStackIndex: null,\n+ _ownerFlatTree: null,\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]\n+ );\n+ const selectElementAtIndex = useCallback(\n+ (index: number) =>\n+ dispatch({ type: 'SELECT_ELEMENT_AT_INDEX', payload: index }),\n+ [dispatch]\n+ );\n+ const selectElementByID = useCallback(\n+ (id: number | null) =>\n+ dispatch({ type: 'SELECT_ELEMENT_BY_ID', payload: id }),\n+ [dispatch]\n+ );\n+ const setSearchText = useCallback(\n+ (text: string) => dispatch({ type: 'SET_SEARCH_TEXT', payload: text }),\n+ [dispatch]\n+ );\n+ const goToNextSearchResult = useCallback(\n+ () => dispatch({ type: 'GO_TO_NEXT_SEARCH_RESULT' }),\n+ [dispatch]\n+ );\n+ const goToPreviousSearchResult = useCallback(\n+ () => dispatch({ type: 'GO_TO_PREVIOUS_SEARCH_RESULT' }),\n+ [dispatch]\n+ );\n+ const resetOwnerStack = useCallback(\n+ () => dispatch({ type: 'RESET_OWNER_STACK' }),\n+ [dispatch]\n+ );\n+ const selectNextElementInTree = useCallback(\n+ () => dispatch({ type: 'SELECT_NEXT_ELEMENT_IN_TREE' }),\n+ [dispatch]\n+ );\n+ const selectPreviousElementInTree = useCallback(\n+ () => dispatch({ type: 'SELECT_PREVIOUS_ELEMENT_IN_TREE' }),\n+ [dispatch]\n+ );\n+ const selectOwner = useCallback(\n+ (id: number) => dispatch({ type: 'SELECT_OWNER', payload: id }),\n+ [dispatch]\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+ selectElementByID,\n+ selectElementAtIndex,\n+ selectNextElementInTree,\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+ [state]\n+ );\n+\n+ \/\/ Mutations to the underlying tree may impact this context (e.g. search results, selection state).\n+ useLayoutEffect(() => {\n+ const handleStoreMutated = ([\n+ addedElementIDs,\n+ removedElementIDs,\n+ ]: Array) => {\n+ dispatch({\n+ type: 'HANDLE_STORE_MUTATION',\n+ payload: [addedElementIDs, removedElementIDs],\n+ });\n+ };\n+\n+ \/\/ TODO Even though we're using layout effect, concurrent rendering may cause us to miss a mutation.\n+ \/\/ Should the store expose some sort of version number that we could check after mounting?\n+\n+ store.addListener('mutated', handleStoreMutated);\n+\n+ return () => store.removeListener('mutated', handleStoreMutated);\n+ }, [state, store]);\n+\n+ return {children}<\/TreeContext.Provider>;\n+}\n+\n+function calculateCurrentOwnerList(\n+ store: Store,\n+ rootOwnerID: number,\n+ elementID: number,\n+ ownerList: Array\n+): Array {\n+ if (elementID === rootOwnerID) {\n+ ownerList.push(elementID);\n+ const { children } = ((store.getElementByID(elementID): any): Element);\n+ children.forEach(childID =>\n+ calculateCurrentOwnerList(store, rootOwnerID, childID, ownerList)\n+ );\n+ } else {\n+ const { children, ownerID } = ((store.getElementByID(\n+ elementID\n+ ): any): Element);\n+ if (ownerID === rootOwnerID) {\n+ ownerList.push(elementID);\n+ children.forEach(childID =>\n+ calculateCurrentOwnerList(store, rootOwnerID, childID, ownerList)\n+ );\n+ }\n+ }\n+\n+ return ownerList;\n+}\n+\n+function recursivelySearchTree(\n+ store: Store,\n+ elementID: number,\n+ regExp: RegExp,\n+ searchResults: Array\n+): void {\n+ const { children, displayName } = ((store.getElementByID(\n+ elementID\n+ ): any): Element);\n+ if (displayName !== null) {\n+ if (regExp.test(displayName)) {\n+ searchResults.push(elementID);\n+ }\n+ }\n+ children.forEach(childID =>\n+ recursivelySearchTree(store, childID, regExp, searchResults)\n+ );\n+}\n+\n+export { TreeContext, TreeContextController };\ndiff --git a\/src\/devtools\/views\/context.js b\/src\/devtools\/views\/context.js\nindex 13be80ef6f..7dda145a8a 100644\n--- a\/src\/devtools\/views\/context.js\n+++ b\/src\/devtools\/views\/context.js\n@@ -3,7 +3,6 @@\n import { createContext } from 'react';\n \n import type { Bridge } from '..\/..\/types';\n-import type { TreeMetadataType } from '..\/types';\n \n import Store from '..\/store';\n \n@@ -14,9 +13,3 @@ BridgeContext.displayName = 'BridgeContext';\n export const StoreContext = createContext(((null: any): Store));\n \/\/ $FlowFixMe displayName is a valid attribute of React$Context\n StoreContext.displayName = 'StoreContext';\n-\n-export const TreeContext = createContext(\n- ((null: any): TreeMetadataType)\n-);\n-\/\/ $FlowFixMe displayName is a valid attribute of React$Context\n-TreeContext.displayName = 'TreeMetadataContext';\n","body":"","parents":["45641e98e5d848b65969866de3e8e9dc7193b21e"],"files":[{"status":"M","path":"src\/backend\/renderer.js"},{"status":"M","path":"src\/devtools\/store.js"},{"status":"M","path":"src\/devtools\/types.js"},{"status":"M","path":"src\/devtools\/views\/ButtonIcon.js"},{"status":"M","path":"src\/devtools\/views\/Element.js"},{"status":"M","path":"src\/devtools\/views\/Elements.css"},{"status":"M","path":"src\/devtools\/views\/Elements.js"},{"status":"M","path":"src\/devtools\/views\/OwnersStack.css"},{"status":"M","path":"src\/devtools\/views\/OwnersStack.js"},{"status":"D","path":"src\/devtools\/views\/SearchAndSelectionContext.js"},{"status":"M","path":"src\/devtools\/views\/SearchInput.js"},{"status":"M","path":"src\/devtools\/views\/SelectedElement.js"},{"status":"M","path":"src\/devtools\/views\/Tree.js"},{"status":"A","path":"src\/devtools\/views\/TreeContext.js"},{"status":"M","path":"src\/devtools\/views\/context.js"}]}

dillon1000/react

Files changed