{"patch":"diff --git a\/src\/devtools\/store.js b\/src\/devtools\/store.js\nindex 8982abe9fc..880616e69a 100644\n--- a\/src\/devtools\/store.js\n+++ b\/src\/devtools\/store.js\n@@ -265,7 +265,7 @@ export default class Store extends EventEmitter {\n parentElement = ((this._idToElement.get(parentID): any): Element);\n parentElement.children = parentElement.children.concat(id);\n \n- this._idToElement.set(id, {\n+ const element: Element = {\n children: [],\n depth: parentElement.depth + 1,\n displayName,\n@@ -274,7 +274,11 @@ export default class Store extends EventEmitter {\n parentID: parentElement.id,\n type,\n weight: 1,\n- });\n+ };\n+\n+ this._idToElement.set(id, element);\n+\n+ this.emit('elementAdded', element);\n \n weightDelta = 1;\n }\n@@ -303,6 +307,8 @@ export default class Store extends EventEmitter {\n childID => childID !== id\n );\n }\n+\n+ this.emit('elementRemoved', element);\n break;\n case TREE_OPERATION_RESET_CHILDREN:\n id = ((operations[i + 1]: any): number);\ndiff --git a\/src\/devtools\/views\/ButtonIcon.js b\/src\/devtools\/views\/ButtonIcon.js\nindex 5174e71e17..6f054b1d0a 100644\n--- a\/src\/devtools\/views\/ButtonIcon.js\n+++ b\/src\/devtools\/views\/ButtonIcon.js\n@@ -4,15 +4,24 @@ import React from 'react';\n import styles from '.\/ButtonIcon.css';\n \n type Props = {|\n- type: 'search' | 'view-dom' | 'view-source',\n+ type: 'close' | 'down' | 'search' | 'up' | 'view-dom' | 'view-source',\n |};\n \n export default function ButtonIcon({ type }: Props) {\n let pathData = null;\n switch (type) {\n+ case 'close':\n+ pathData = PATH_CLOSE;\n+ break;\n+ case 'down':\n+ pathData = PATH_DOWN;\n+ break;\n case 'search':\n pathData = PATH_SEARCH;\n break;\n+ case 'up':\n+ pathData = PATH_UP;\n+ break;\n case 'view-dom':\n pathData = PATH_VIEW_DOM;\n break;\n@@ -38,12 +47,19 @@ export default function ButtonIcon({ type }: Props) {\n );\n }\n \n+const PATH_CLOSE =\n+ 'M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z';\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_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\n 0-7-3.13-7-7s3.13-7 7-7 7 3.13 7 7-3.13 7-7 7z\n `;\n \n+const PATH_UP = 'M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z';\n+\n const PATH_VIEW_DOM = `\n M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12\n 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3\ndiff --git a\/src\/devtools\/views\/Element.css b\/src\/devtools\/views\/Element.css\nindex 236c404e43..a72e98de51 100644\n--- a\/src\/devtools\/views\/Element.css\n+++ b\/src\/devtools\/views\/Element.css\n@@ -63,3 +63,10 @@\n .AttributeValue {\n color: var(--color-attribute-value);\n }\n+\n+.Highlight {\n+ background-color: var(--color-search-match);\n+}\n+.CurrentHighlight {\n+ background-color: var(--color-search-match-current);\n+}\ndiff --git a\/src\/devtools\/views\/Element.js b\/src\/devtools\/views\/Element.js\nindex a76d57cec0..3a03048721 100644\n--- a\/src\/devtools\/views\/Element.js\n+++ b\/src\/devtools\/views\/Element.js\n@@ -1,8 +1,9 @@\n \/\/ @flow\n \n-import React, { Fragment, useCallback, useContext } from 'react';\n+import React, { Fragment, useCallback, useContext, useMemo } from 'react';\n import { ElementTypeClassOrFunction } from 'src\/devtools\/types';\n import { TreeContext } from '.\/context';\n+import { SearchContext } from '.\/SearchContext';\n import { SelectedElementContext } from '.\/SelectedElementContext';\n import Icon from '.\/Icon';\n \n@@ -56,7 +57,7 @@ export default function Element({ index, style }: Props) {\n )}\n \n \n- {displayName}\n+ \n {key && (\n \n key<\/span>=\n@@ -68,3 +69,48 @@ export default function Element({ index, style }: Props) {\n <\/div>\n );\n }\n+\n+type DisplayNameProps = {|\n+ displayName: string | null,\n+ id: number,\n+|};\n+\n+function DisplayName({ displayName, id }: DisplayNameProps) {\n+ const {\n+ currentIndex: currentSearchIndex,\n+ ids: searchIDs,\n+ text: searchText,\n+ } = useContext(SearchContext);\n+ const isSearchResult = useMemo(() => {\n+ return searchIDs.includes(id);\n+ }, [id, searchIDs]);\n+ const isCurrentResult =\n+ currentSearchIndex !== null && id === searchIDs[currentSearchIndex];\n+\n+ if (!isSearchResult || displayName === null) {\n+ return displayName;\n+ }\n+\n+ const startIndex = displayName\n+ .toLowerCase()\n+ .indexOf(searchText.toLowerCase());\n+ const stopIndex = startIndex + searchText.length;\n+\n+ const children = [];\n+ if (startIndex > 0) {\n+ children.push({displayName.slice(0, startIndex)}<\/span>);\n+ }\n+ children.push(\n+ \n+ {displayName.slice(startIndex, stopIndex)}\n+ <\/mark>\n+ );\n+ if (stopIndex < displayName.length) {\n+ children.push({displayName.slice(stopIndex)}<\/span>);\n+ }\n+\n+ return children;\n+}\ndiff --git a\/src\/devtools\/views\/Elements.js b\/src\/devtools\/views\/Elements.js\nindex a201174e1b..8e6b8a24da 100644\n--- a\/src\/devtools\/views\/Elements.js\n+++ b\/src\/devtools\/views\/Elements.js\n@@ -5,6 +5,7 @@ import Store from '..\/store';\n import Tree from '.\/Tree';\n import { BridgeContext, StoreContext, TreeContext } from '.\/context';\n import SelectedElement from '.\/SelectedElement';\n+import { SearchController } from '.\/SearchContext';\n import { SelectedElementController } from '.\/SelectedElementContext';\n import styles from '.\/Elements.css';\n \n@@ -51,14 +52,16 @@ export default function Elements({ bridge, browserName, themeName }: Props) {\n \n \n \n-

\n-

\n- \n+ \n+

\n+

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

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

\n- \n- <\/div>\n- <\/div>\n+ <\/SearchController>\n <\/SelectedElementController>\n <\/TreeContext.Provider>\n <\/StoreContext.Provider>\ndiff --git a\/src\/devtools\/views\/HooksTree.css b\/src\/devtools\/views\/HooksTree.css\nindex db582ec48b..c33c4c1d80 100644\n--- a\/src\/devtools\/views\/HooksTree.css\n+++ b\/src\/devtools\/views\/HooksTree.css\n@@ -19,6 +19,6 @@\n }\n \n .None {\n- color: var(--color-deemphasized);\n+ color: var(--color-dimmer);\n font-style: italic;\n }\ndiff --git a\/src\/devtools\/views\/InspectedElementTree.css b\/src\/devtools\/views\/InspectedElementTree.css\nindex faad8dcc34..9020a0afa4 100644\n--- a\/src\/devtools\/views\/InspectedElementTree.css\n+++ b\/src\/devtools\/views\/InspectedElementTree.css\n@@ -18,12 +18,12 @@\n }\n \n .None {\n- color: var(--color-deemphasized);\n+ color: var(--color-dimmer);\n font-style: italic;\n }\n \n .Empty {\n- color: var(--color-deemphasized);\n+ color: var(--color-dimmer);\n font-style: italic;\n padding-left: 1rem;\n }\ndiff --git a\/src\/devtools\/views\/SearchContext.js b\/src\/devtools\/views\/SearchContext.js\nnew file mode 100644\nindex 0000000000..596860b98c\n--- \/dev\/null\n+++ b\/src\/devtools\/views\/SearchContext.js\n@@ -0,0 +1,194 @@\n+\/\/ @flow\n+\n+import React, {\n+ createContext,\n+ useContext,\n+ useLayoutEffect,\n+ useMemo,\n+ useState,\n+} from 'react';\n+import { StoreContext } from '.\/context';\n+import { SelectedElementContext } from '.\/SelectedElementContext';\n+import Store from '..\/store';\n+\n+import type { Element } from 'src\/devtools\/types';\n+\n+export type SearchContextValue = {|\n+ get currentIndex(): number | null,\n+ get ids(): Array,\n+ get text(): string,\n+ updateCurrentIndex(newCurrentIndex: number): void,\n+ updateText(newText: string): void,\n+|};\n+\n+const SearchContext = createContext(\n+ ((null: any): SearchContextValue)\n+);\n+\/\/ $FlowFixMe displayName is a valid attribute of React$Context\n+SearchContext.displayName = 'SearchContext';\n+\n+type Props = {|\n+ children: React$Node,\n+|};\n+\n+\/\/ TODO Remove this wrapper element once global Context.write API exists.\n+function SearchController({ children }: Props) {\n+ const store = useContext(StoreContext);\n+ const selectedElement = useContext(SelectedElementContext);\n+\n+ const [currentIndex, setCurrentIndex] = useState(null);\n+ const [ids, setIDs] = useState>([]);\n+ const [text, setText] = useState('');\n+\n+ const updateIndexHelper = (\n+ newCurrentIndex: number | null,\n+ newOrCurrentIDs: Array\n+ ) => {\n+ setCurrentIndex(newCurrentIndex);\n+\n+ \/\/ Make sure a new search result is also selected.\n+ selectedElement.id =\n+ newCurrentIndex !== null ? newOrCurrentIDs[newCurrentIndex] : null;\n+ };\n+\n+ const value = useMemo(\n+ () => ({\n+ get currentIndex(): number | null {\n+ return currentIndex;\n+ },\n+\n+ get ids(): Array {\n+ return ids;\n+ },\n+\n+ get text(): string {\n+ return text;\n+ },\n+\n+ updateCurrentIndex(newCurrentIndex: number) {\n+ updateIndexHelper(newCurrentIndex, ids);\n+ },\n+\n+ updateText(newText: string) {\n+ setText(newText);\n+\n+ \/\/ Find all matching elements.\n+ const newIDs = [];\n+ if (newText !== '') {\n+ const regExp = new RegExp(newText, 'i');\n+ store.roots.forEach(rootID => {\n+ searchTree(store, rootID, regExp, newIDs);\n+ });\n+\n+ setIDs(newIDs);\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 (newIDs.length === 0) {\n+ updateIndexHelper(null, newIDs);\n+ } else if (currentIndex !== null && newText.startsWith(text)) {\n+ updateIndexHelper(\n+ Math.min(currentIndex, newIDs.length - 1),\n+ newIDs\n+ );\n+ } else {\n+ updateIndexHelper(0, newIDs);\n+ }\n+ } else {\n+ setIDs([]);\n+ updateIndexHelper(null, newIDs);\n+ }\n+ },\n+ }),\n+ [currentIndex, ids, text]\n+ );\n+\n+ \/\/ Listen for changes to the tree and incrementally adjust the search results.\n+ useLayoutEffect(() => {\n+ const handleElementAdded = (element: Element) => {\n+ if (!text) {\n+ return;\n+ }\n+\n+ const { displayName, id } = element;\n+\n+ \/\/ Add this item to the search results if it matches.\n+ const regExp = new RegExp(text, 'i');\n+ if (displayName !== null && regExp.test(displayName)) {\n+ const newElementIndex = ((store.getIndexOfElementID(id): any): number);\n+\n+ let newIDs = null;\n+ for (let index = 0; index < ids.length; index++) {\n+ const id = ids[index];\n+ if (\n+ newElementIndex < ((store.getIndexOfElementID(id): any): number)\n+ ) {\n+ newIDs = ids\n+ .slice(0, index)\n+ .concat(id)\n+ .concat(ids.slice(index));\n+ break;\n+ }\n+ }\n+ if (newIDs === null) {\n+ newIDs = ids.concat(id);\n+ }\n+\n+ setIDs(newIDs);\n+ updateIndexHelper(currentIndex === null ? 0 : currentIndex, newIDs);\n+ }\n+ };\n+ const handleElementRemoved = (element: Element) => {\n+ if (!text) {\n+ return;\n+ }\n+\n+ \/\/ Prune this item from the search results.\n+ const index = ids.indexOf(element.id);\n+ if (index >= 0) {\n+ const newIDs = ids.slice(0, index).concat(ids.slice(index + 1));\n+ setIDs(newIDs);\n+\n+ \/\/ If the results are now empty, also deselect things.\n+ if (newIDs.length === 0) {\n+ updateIndexHelper(null, newIDs);\n+ } else if (((currentIndex: any): number) < newIDs.length) {\n+ updateIndexHelper(currentIndex, newIDs);\n+ } else {\n+ updateIndexHelper(newIDs.length - 1, newIDs);\n+ }\n+ }\n+ };\n+\n+ store.addListener('elementAdded', handleElementAdded);\n+ store.addListener('elementRemoved', handleElementRemoved);\n+\n+ return () => {\n+ store.removeListener('elementAdded', handleElementAdded);\n+ store.removeListener('elementRemoved', handleElementRemoved);\n+ };\n+ }, [currentIndex, ids, store, text]);\n+\n+ return (\n+ {children}<\/SearchContext.Provider>\n+ );\n+}\n+\n+function searchTree(\n+ store: Store,\n+ elementID: number,\n+ regExp: RegExp,\n+ ids: Array\n+): void {\n+ const { children, displayName } = ((store.getElementByID(\n+ elementID\n+ ): any): Element);\n+ if (displayName !== null) {\n+ if (regExp.test(displayName)) {\n+ ids.push(elementID);\n+ }\n+ }\n+ children.forEach(childID => searchTree(store, childID, regExp, ids));\n+}\n+\n+export { SearchContext, SearchController };\ndiff --git a\/src\/devtools\/views\/SearchInput.css b\/src\/devtools\/views\/SearchInput.css\nnew file mode 100644\nindex 0000000000..5aed02be78\n--- \/dev\/null\n+++ b\/src\/devtools\/views\/SearchInput.css\n@@ -0,0 +1,53 @@\n+.SearchInput {\n+ flex: 1;\n+ display: flex;\n+ align-items: center;\n+}\n+\n+.Input {\n+ flex: 1;\n+ font-size: 1rem;\n+ outline: none;\n+ border: none;\n+ background: url(\"data:image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z'\/%3E%3Cpath d='M0 0h24v24H0z' fill='none'\/%3E%3C\/svg%3E\");\n+ background-repeat: no-repeat;\n+ background-position: left center;\n+ background-size: 16px 16px;\n+ padding-left: 1.5rem;\n+}\n+\n+.IndexLabel {\n+ color: var(--color-dim);\n+ font-size: var(--font-size-normal);\n+}\n+\n+.IconButton {\n+ border: none;\n+ background: none;\n+ display: inline-flex;\n+ align-items: center;\n+ padding: 0.25rem;\n+ cursor: pointer;\n+ color: var(--color-button);\n+ flex: 0 0 auto;\n+}\n+.IconButton:hover {\n+ color: var(--color-button-hover);\n+}\n+.IconButton:disabled {\n+ color: var(--color-dimmer);\n+ cursor: default;\n+}\n+\n+.LeftVRule,\n+.RightVRule {\n+ height: 20px;\n+ width: 1px;\n+ background-color: var(--color-border);\n+}\n+.LeftVRule {\n+ margin: 0 0.25rem 0 0.5rem;\n+}\n+.RightVRule {\n+ margin: 0 0.5rem 0 0.25rem;\n+}\ndiff --git a\/src\/devtools\/views\/SearchInput.js b\/src\/devtools\/views\/SearchInput.js\nnew file mode 100644\nindex 0000000000..3159462178\n--- \/dev\/null\n+++ b\/src\/devtools\/views\/SearchInput.js\n@@ -0,0 +1,117 @@\n+\/\/ @flow\n+\n+import React, { useCallback, useContext, useEffect, useRef } from 'react';\n+import { SearchContext } from '.\/SearchContext';\n+import ButtonIcon from '.\/ButtonIcon';\n+\n+import styles from '.\/SearchInput.css';\n+\n+type Props = {||};\n+\n+export default function SearchInput(props: Props) {\n+ const {\n+ currentIndex,\n+ ids,\n+ updateCurrentIndex,\n+ updateText,\n+ text,\n+ } = useContext(SearchContext);\n+\n+ const inputRef = useRef();\n+\n+ const handleTextChange = useCallback(({ currentTarget }) => {\n+ updateText(currentTarget.value);\n+ });\n+\n+ const selectNext = useCallback(() => {\n+ if (currentIndex !== null) {\n+ updateCurrentIndex(currentIndex + 1);\n+ }\n+ }, [currentIndex]);\n+\n+ const selectPrevious = useCallback(() => {\n+ if (currentIndex !== null) {\n+ updateCurrentIndex(currentIndex - 1);\n+ }\n+ }, [currentIndex]);\n+\n+ const resetSearch = useCallback(() => {\n+ updateText('');\n+ }, [updateText]);\n+\n+ const handleInputKeyPress = useCallback(\n+ ({ key }) => {\n+ if (key === 'Enter') {\n+ if (currentIndex !== null) {\n+ if (currentIndex + 1 < ids.length) {\n+ updateCurrentIndex(currentIndex + 1);\n+ } else {\n+ updateCurrentIndex(0);\n+ }\n+ }\n+ }\n+ },\n+ [currentIndex, ids]\n+ );\n+\n+ \/\/ Auto-focus search input\n+ useEffect(() => {\n+ const handleWindowKeyDown = event => {\n+ const { key, metaKey } = event;\n+ if (key === 'f' && metaKey) {\n+ if (inputRef.current !== null) {\n+ inputRef.current.focus();\n+ event.preventDefault();\n+ }\n+ }\n+ };\n+\n+ window.addEventListener('keydown', handleWindowKeyDown);\n+\n+ return () => window.removeEventListener('keydown', handleWindowKeyDown);\n+ }, [inputRef]);\n+\n+ return (\n+

\n+ \n+ {!!text && (\n+ \n+ {Math.min(currentIndex + 1, ids.length)} | {ids.length}\n+ <\/span>\n+ )}\n+

\n+ \n+ \n+ <\/button>\n+ \n+ \n+ <\/button>\n+ \n+ \n+ <\/button>\n+

\n+ <\/div>\n+ );\n+}\ndiff --git a\/src\/devtools\/views\/SelectedElement.css b\/src\/devtools\/views\/SelectedElement.css\nindex c7f2ef356b..0f96d3e2a3 100644\n--- a\/src\/devtools\/views\/SelectedElement.css\n+++ b\/src\/devtools\/views\/SelectedElement.css\n@@ -78,6 +78,6 @@\n \n .Loading {\n padding: 0.25rem;\n- color: var(--color-deemphasized);\n+ color: var(--color-dimmer);\n font-style: italic;\n }\ndiff --git a\/src\/devtools\/views\/SelectedElement.js b\/src\/devtools\/views\/SelectedElement.js\nindex c58ba25cd6..572fa9eb6e 100644\n--- a\/src\/devtools\/views\/SelectedElement.js\n+++ b\/src\/devtools\/views\/SelectedElement.js\n@@ -135,13 +135,13 @@ function useInspectedElement(id: number | null): InspectedElement | null {\n idRef.current = id;\n \n useLayoutEffect(() => {\n+ \/\/ Hide previous\/stale insepected element to avoid temporarily showing the wrong values.\n+ setInspectedElement(null);\n+\n if (id === null) {\n return () => {};\n }\n \n- \/\/ Hide previous\/stale insepected element to avoid temporarily showing the wrong values.\n- setInspectedElement(null);\n-\n let timeoutID = null;\n \n \/\/ Update the $r variable.\n@@ -152,15 +152,17 @@ function useInspectedElement(id: number | null): InspectedElement | null {\n };\n \n const onInspectedElement = (inspectedElement: InspectedElement) => {\n- if (idRef.current !== inspectedElement.id) {\n+ if (inspectedElement && inspectedElement.id !== idRef.current) {\n \/\/ Ignore bridge updates about previously selected elements.\n return;\n }\n \n- inspectedElement.context = hydrateHelper(inspectedElement.context);\n- inspectedElement.hooks = hydrateHelper(inspectedElement.hooks);\n- inspectedElement.props = hydrateHelper(inspectedElement.props);\n- inspectedElement.state = hydrateHelper(inspectedElement.state);\n+ if (inspectedElement !== null) {\n+ inspectedElement.context = hydrateHelper(inspectedElement.context);\n+ inspectedElement.hooks = hydrateHelper(inspectedElement.hooks);\n+ inspectedElement.props = hydrateHelper(inspectedElement.props);\n+ inspectedElement.state = hydrateHelper(inspectedElement.state);\n+ }\n \n setInspectedElement(inspectedElement);\n \ndiff --git a\/src\/devtools\/views\/Tree.css b\/src\/devtools\/views\/Tree.css\nindex 855f5331af..5373266a5a 100644\n--- a\/src\/devtools\/views\/Tree.css\n+++ b\/src\/devtools\/views\/Tree.css\n@@ -6,7 +6,7 @@\n border-top: 1px solid var(--color-border);\n }\n \n-.SearchRow {\n+.SearchInput {\n flex: 0 0 42px;\n display: flex;\n align-items: center;\n@@ -15,16 +15,17 @@\n padding: 0.5rem;\n }\n \n-.SearchInput {\n- font-size: 1rem;\n- flex: 1;\n- outline: none;\n- border: none;\n- background: url(\"data:image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z'\/%3E%3Cpath d='M0 0h24v24H0z' fill='none'\/%3E%3C\/svg%3E\");\n- background-repeat: no-repeat;\n- background-position: left center;\n- background-size: 16px 16px;\n- padding-left: 1.5rem;\n+.AutoSizerWrapper {\n+ width: 100%;\n+ overflow: auto;\n+ flex: 1 0 auto;\n+ padding: 0.25rem;\n+}\n+\n+.List {\n+ font-family: var(--font-family-monospace);\n+ font-size: var(--font-size-normal);\n+ line-height: var(--line-height-data);\n }\n \n .IconButton {\n@@ -40,16 +41,3 @@\n .IconButton:hover {\n color: var(--color-button-hover);\n }\n-\n-.AutoSizerWrapper {\n- width: 100%;\n- overflow: auto;\n- flex: 1 0 auto;\n- padding: 0.25rem;\n-}\n-\n-.List {\n- font-family: var(--font-family-monospace);\n- font-size: var(--font-size-normal);\n- line-height: var(--line-height-data);\n-}\ndiff --git a\/src\/devtools\/views\/Tree.js b\/src\/devtools\/views\/Tree.js\nindex aac2f89aff..fb97b5f0de 100644\n--- a\/src\/devtools\/views\/Tree.js\n+++ b\/src\/devtools\/views\/Tree.js\n@@ -4,8 +4,9 @@ import React, { useContext, useEffect, useLayoutEffect, useRef } from 'react';\n import AutoSizer from 'react-virtualized-auto-sizer';\n import { FixedSizeList } from 'react-window';\n import { SelectedElementContext } from '.\/SelectedElementContext';\n-import Element from '.\/Element';\n import ButtonIcon from '.\/ButtonIcon';\n+import Element from '.\/Element';\n+import SearchInput from '.\/SearchInput';\n import { TreeContext } from '.\/context';\n \n import styles from '.\/Tree.css';\n@@ -15,7 +16,7 @@ type Props = {||};\n export default function Tree(props: Props) {\n const selectedElementContext = useContext(SelectedElementContext);\n const treeContext = useContext(TreeContext);\n- const listRef = useRef();\n+ const listRef = useRef>();\n \n \/\/ Make sure a newly selected element is visible in the list.\n \/\/ This is helpful for things like the owners list.\n@@ -59,11 +60,8 @@ export default function Tree(props: Props) {\n \n return (\n

\n-

\n- \n+

\n+ \n

dillon1000/react

Files changed