{"body":"","patch":"diff --git a\/src\/devtools\/views\/Components\/Element.css b\/src\/devtools\/views\/Components\/Element.css\nindex 2a923c15d9..425b901bd8 100644\n--- a\/src\/devtools\/views\/Components\/Element.css\n+++ b\/src\/devtools\/views\/Components\/Element.css\n@@ -17,6 +17,11 @@\n background-color: var(--color-inactive-background);\n }\n \n+.ScrollAnchor {\n+ height: 100%;\n+ width: 0;\n+}\n+\n .SelectedElement {\n background-color: var(--color-selected-background);\n color: var(--color-selected-foreground);\ndiff --git a\/src\/devtools\/views\/Components\/Element.js b\/src\/devtools\/views\/Components\/Element.js\nindex 16fb243ff2..bf81291f4a 100644\n--- a\/src\/devtools\/views\/Components\/Element.js\n+++ b\/src\/devtools\/views\/Components\/Element.js\n@@ -56,7 +56,8 @@ export default function ElementView({ data, index, style }: Props) {\n }\n }, [id, selectOwner]);\n \n- const ref = useRef(null);\n+ const scrollAnchorStartRef = useRef(null);\n+ const scrollAnchorEndRef = useRef(null);\n \n \/\/ The tree above has its own autoscrolling, but it only works for rows.\n \/\/ However, even when the row gets into the viewport, the component name\n@@ -74,8 +75,20 @@ export default function ElementView({ data, index, style }: Props) {\n }\n lastScrolledIDRef.current = id;\n \n- if (ref.current !== null) {\n- ref.current.scrollIntoView({\n+ \/\/ We want to bring the whole name into view,\n+ \/\/ including the expansion toggle and the \"=== $r\" hint.\n+ \/\/ However, even calling scrollIntoView() on their parent node\n+ \/\/ wouldn't guarantee that it will be *fully* brought into view.\n+ \/\/ As a workaround, we'll have two anchor spans, and scroll each into view.\n+ if (scrollAnchorStartRef.current !== null) {\n+ scrollAnchorStartRef.current.scrollIntoView({\n+ behavior: 'auto',\n+ block: 'nearest',\n+ inline: 'nearest',\n+ });\n+ }\n+ if (scrollAnchorEndRef.current !== null) {\n+ scrollAnchorEndRef.current.scrollIntoView({\n behavior: 'auto',\n block: 'nearest',\n inline: 'nearest',\n@@ -149,10 +162,11 @@ export default function ElementView({ data, index, style }: Props) {\n marginBottom: `-${style.height}px`,\n }}\n >\n+ \n {ownerStack.length === 0 ? (\n \n ) : null}\n- \n+ \n \n {key && (\n \n@@ -162,6 +176,7 @@ export default function ElementView({ data, index, style }: Props) {\n )}\n <\/span>\n {showDollarR && == $r<\/span>}\n+ \n <\/div>\n );\n }\n","commit":{"subject":"Consistently scroll component name into view","authorEmail":"dan.abramov@gmail.com","revision":"ba9c763954276e18b6f577f721d0330d2eeb494b","authorName":"Dan","shortRevision":"ba9c763954","authoredAt":"2019-04-13T01:58:05+01:00"},"parents":["1e08261975a45b9e9fa5827f38e11382ed7b3200"],"files":[{"path":"src\/devtools\/views\/Components\/Element.css","status":"M"},{"path":"src\/devtools\/views\/Components\/Element.js","status":"M"}]}

dillon1000/react

Files changed