{"body":"Consistently scroll component name into view","parents":["b2cf896e8c758fa6239b1a15ffd4b46a8cc5eda8","518f3d75f8eba06a44dc2e208c49f569b2d2cb3d"],"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 6bc9bfeb7e..5e5b52fe08 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,22 @@ 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 a wrapper parent node (e.g. )\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 (scrollAnchorEndRef.current !== null) {\n+ scrollAnchorEndRef.current.scrollIntoView({\n+ behavior: 'auto',\n+ block: 'nearest',\n+ inline: 'nearest',\n+ });\n+ }\n+ if (scrollAnchorStartRef.current !== null) {\n+ \/\/ We scroll the start anchor last because it's\n+ \/\/ more important for it to be in the view.\n+ scrollAnchorStartRef.current.scrollIntoView({\n behavior: 'auto',\n block: 'nearest',\n inline: 'nearest',\n@@ -149,10 +164,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 +178,7 @@ export default function ElementView({ data, index, style }: Props) {\n )}\n <\/span>\n {showDollarR && == $r<\/span>}\n+ \n <\/div>\n );\n }\n","files":[{"path":"src\/devtools\/views\/Components\/Element.css","status":"M"},{"path":"src\/devtools\/views\/Components\/Element.js","status":"M"}],"commit":{"authorName":"Brian Vaughn","authorEmail":"brian.david.vaughn@gmail.com","subject":"Merge pull request #148 from gaearon\/scroll-consistent","shortRevision":"97f089bdfe","authoredAt":"2019-04-13T15:39:25-07:00","revision":"97f089bdfe64fa3320e9fb293eb98aecf9d808be"}}

dillon1000/react

Files changed