{"parents":["7145c78325728dbbfe9b135796a1a64b446f48bd"],"commit":{"revision":"097d0386b133f779f4c3622d2a745d64e1e32fc8","shortRevision":"097d0386b1","authoredAt":"2019-04-12T18:59:15+01:00","authorName":"Dan Abramov","authorEmail":"dan.abramov@gmail.com","subject":"Track search navigation in DOM"},"files":[{"status":"M","path":"src\/devtools\/views\/Components\/Element.js"},{"status":"M","path":"src\/devtools\/views\/Components\/SearchInput.js"},{"status":"M","path":"src\/devtools\/views\/Components\/Tree.js"}],"patch":"diff --git a\/src\/devtools\/views\/Components\/Element.js b\/src\/devtools\/views\/Components\/Element.js\nindex 6bc9bfeb7e..1d3ac200a9 100644\n--- a\/src\/devtools\/views\/Components\/Element.js\n+++ b\/src\/devtools\/views\/Components\/Element.js\n@@ -44,7 +44,7 @@ export default function ElementView({ data, index, style }: Props) {\n const {\n lastScrolledIDRef,\n treeFocused,\n- isNavigatingWithKeyboard,\n+ isUsingKeyboardOrSearch,\n onElementMouseEnter,\n } = data;\n const id = element === null ? null : element.id;\n@@ -122,7 +122,7 @@ export default function ElementView({ data, index, style }: Props) {\n className = treeFocused\n ? styles.SelectedElement\n : styles.InactiveSelectedElement;\n- } else if (isHovered && !isNavigatingWithKeyboard) {\n+ } else if (isHovered && !isUsingKeyboardOrSearch) {\n className = styles.HoveredElement;\n }\n \ndiff --git a\/src\/devtools\/views\/Components\/SearchInput.js b\/src\/devtools\/views\/Components\/SearchInput.js\nindex 51d0e58d3b..dc4069e384 100644\n--- a\/src\/devtools\/views\/Components\/SearchInput.js\n+++ b\/src\/devtools\/views\/Components\/SearchInput.js\n@@ -8,9 +8,12 @@ import Icon from '..\/Icon';\n \n import styles from '.\/SearchInput.css';\n \n-type Props = {||};\n+type Props = {|\n+ onSearchInteraction: () => void,\n+|};\n \n export default function SearchInput(props: Props) {\n+ const { onSearchInteraction } = props;\n const {\n goToNextSearchResult,\n goToPreviousSearchResult,\n@@ -25,13 +28,17 @@ export default function SearchInput(props: Props) {\n const inputRef = useRef(null);\n \n const handleTextChange = useCallback(\n- ({ currentTarget }) => setSearchText(currentTarget.value),\n- [setSearchText]\n+ ({ currentTarget }) => {\n+ setSearchText(currentTarget.value);\n+ onSearchInteraction();\n+ },\n+ [setSearchText, onSearchInteraction]\n );\n \n const resetSearch = useCallback(() => {\n setSearchText('');\n- }, [setSearchText]);\n+ onSearchInteraction();\n+ }, [setSearchText, onSearchInteraction]);\n \n const handleKeyDown = useCallback(\n event => {\n@@ -39,26 +46,29 @@ export default function SearchInput(props: Props) {\n switch (event.key) {\n case 'ArrowDown':\n selectNextElementInTree();\n+ onSearchInteraction();\n event.preventDefault();\n break;\n case 'ArrowUp':\n selectPreviousElementInTree();\n+ onSearchInteraction();\n event.preventDefault();\n break;\n default:\n break;\n }\n },\n- [selectNextElementInTree, selectPreviousElementInTree]\n+ [selectNextElementInTree, selectPreviousElementInTree, onSearchInteraction]\n );\n \n const handleInputKeyPress = useCallback(\n ({ key }) => {\n if (key === 'Enter') {\n goToNextSearchResult();\n+ onSearchInteraction();\n }\n },\n- [goToNextSearchResult]\n+ [goToNextSearchResult, onSearchInteraction]\n );\n \n \/\/ Auto-focus search input\n@@ -109,7 +119,10 @@ export default function SearchInput(props: Props) {\n {\n+ goToPreviousSearchResult();\n+ onSearchInteraction();\n+ }}\n title=\"Scroll to previous search result\"\n >\n \n@@ -117,7 +130,10 @@ export default function SearchInput(props: Props) {\n {\n+ goToNextSearchResult();\n+ onSearchInteraction();\n+ }}\n title=\"Scroll to next search result\"\n >\n \ndiff --git a\/src\/devtools\/views\/Components\/Tree.js b\/src\/devtools\/views\/Components\/Tree.js\nindex eb31803f23..c7c08518a4 100644\n--- a\/src\/devtools\/views\/Components\/Tree.js\n+++ b\/src\/devtools\/views\/Components\/Tree.js\n@@ -27,7 +27,7 @@ export type ItemData = {|\n baseDepth: number,\n numElements: number,\n getElementAtIndex: (index: number) => Element | null,\n- isNavigatingWithKeyboard: boolean,\n+ isUsingKeyboardOrSearch: boolean,\n lastScrolledIDRef: { current: number | null },\n onElementMouseEnter: (id: number) => void,\n treeFocused: boolean,\n@@ -52,9 +52,7 @@ export default function Tree(props: Props) {\n } = useContext(TreeContext);\n const bridge = useContext(BridgeContext);\n const store = useContext(StoreContext);\n- const [isNavigatingWithKeyboard, setIsNavigatingWithKeyboard] = useState(\n- false\n- );\n+ const [isUsingKeyboardOrSearch, setIsUsingKeyboardOrSearch] = useState(false);\n \/\/ $FlowFixMe https:\/\/github.com\/facebook\/flow\/issues\/7341\n const listRef = useRef | null>(null);\n const treeRef = useRef(null);\n@@ -146,7 +144,7 @@ export default function Tree(props: Props) {\n default:\n return;\n }\n- setIsNavigatingWithKeyboard(true);\n+ setIsUsingKeyboardOrSearch(true);\n };\n \n \/\/ It's important to listen to the ownerDocument to support the browser extension.\n@@ -213,33 +211,48 @@ export default function Tree(props: Props) {\n \/\/ If we switch the selected element while using the keyboard,\n \/\/ start highlighting it in the DOM instead of the last hovered node.\n useEffect(() => {\n- if (isNavigatingWithKeyboard && selectedElementID !== null) {\n- highlightElementInDOM(selectedElementID);\n+ if (isUsingKeyboardOrSearch) {\n+ if (selectedElementID !== null) {\n+ highlightElementInDOM(selectedElementID);\n+ } else {\n+ bridge.send('clearHighlightedElementInDOM');\n+ }\n }\n- }, [isNavigatingWithKeyboard, highlightElementInDOM, selectedElementID]);\n+ }, [\n+ bridge,\n+ isUsingKeyboardOrSearch,\n+ highlightElementInDOM,\n+ selectedElementID,\n+ ]);\n \n \/\/ Highlight last hovered element.\n const handleElementMouseEnter = useCallback(\n id => {\n \/\/ Ignore hover while we're navigating with keyboard.\n \/\/ This avoids flicker from the hovered nodes under the mouse.\n- if (!isNavigatingWithKeyboard) {\n+ if (!isUsingKeyboardOrSearch) {\n highlightElementInDOM(id);\n }\n },\n- [isNavigatingWithKeyboard, highlightElementInDOM]\n+ [isUsingKeyboardOrSearch, highlightElementInDOM]\n );\n \n const handleMouseMove = useCallback(() => {\n \/\/ We started using the mouse again.\n \/\/ This will enable hover styles in individual rows.\n- setIsNavigatingWithKeyboard(false);\n+ setIsUsingKeyboardOrSearch(false);\n }, []);\n \n const handleMouseLeave = useCallback(() => {\n bridge.send('clearHighlightedElementInDOM');\n }, [bridge]);\n \n+ const handleSearchInteraction = useCallback(() => {\n+ \/\/ We started navigating using search.\n+ \/\/ This will disable hover styles and start highlighting DOM elements.\n+ setIsUsingKeyboardOrSearch(true);\n+ }, []);\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(\n@@ -247,7 +260,7 @@ export default function Tree(props: Props) {\n baseDepth,\n numElements,\n getElementAtIndex,\n- isNavigatingWithKeyboard,\n+ isUsingKeyboardOrSearch,\n onElementMouseEnter: handleElementMouseEnter,\n lastScrolledIDRef,\n treeFocused,\n@@ -256,7 +269,7 @@ export default function Tree(props: Props) {\n baseDepth,\n numElements,\n getElementAtIndex,\n- isNavigatingWithKeyboard,\n+ isUsingKeyboardOrSearch,\n handleElementMouseEnter,\n lastScrolledIDRef,\n treeFocused,\n@@ -266,7 +279,11 @@ export default function Tree(props: Props) {\n return (\n

\n- {ownerStack.length > 0 ? : }\n+ {ownerStack.length > 0 ? (\n+ \n+ ) : (\n+ \n+ )}\n \n <\/div>\n

dillon1000/react

Files changed