Merge pull request facebook#148 from gaearon/scroll-consistent

Consistently scroll component name into view

Author: bvaughn

src/devtools/views/Components/Element.css

@@ -17,6 +17,11 @@
   background-color: var(--color-inactive-background);
 }
 
+.ScrollAnchor {
+  height: 100%;
+  width: 0;
+}
+
 .SelectedElement {
   background-color: var(--color-selected-background);
   color: var(--color-selected-foreground);

src/devtools/views/Components/Element.js

@@ -56,7 +56,8 @@ export default function ElementView({ data, index, style }: Props) {
     }
   }, [id, selectOwner]);
 
-  const ref = useRef<HTMLSpanElement | null>(null);
+  const scrollAnchorStartRef = useRef<HTMLSpanElement | null>(null);
+  const scrollAnchorEndRef = useRef<HTMLSpanElement | null>(null);
 
   // The tree above has its own autoscrolling, but it only works for rows.
   // However, even when the row gets into the viewport, the component name
@@ -74,8 +75,22 @@ export default function ElementView({ data, index, style }: Props) {
       }
       lastScrolledIDRef.current = id;
 
-      if (ref.current !== null) {
-        ref.current.scrollIntoView({
+      // We want to bring the whole <Component> name into view,
+      // including the expansion toggle and the "=== $r" hint.
+      // However, even calling scrollIntoView() on a wrapper parent node (e.g. <span>)
+      // wouldn't guarantee that it will be *fully* brought into view.
+      // As a workaround, we'll have two anchor spans, and scroll each into view.
+      if (scrollAnchorEndRef.current !== null) {
+        scrollAnchorEndRef.current.scrollIntoView({
+          behavior: 'auto',
+          block: 'nearest',
+          inline: 'nearest',
+        });
+      }
+      if (scrollAnchorStartRef.current !== null) {
+        // We scroll the start anchor last because it's
+        // more important for it to be in the view.
+        scrollAnchorStartRef.current.scrollIntoView({
           behavior: 'auto',
           block: 'nearest',
           inline: 'nearest',
@@ -149,10 +164,11 @@ export default function ElementView({ data, index, style }: Props) {
         marginBottom: `-${style.height}px`,
       }}
     >
+      <span className={styles.ScrollAnchor} ref={scrollAnchorStartRef} />
       {ownerStack.length === 0 ? (
         <ExpandCollapseToggle element={element} store={store} />
       ) : null}
-      <span className={styles.Component} ref={ref}>
+      <span className={styles.Component}>
         <DisplayName displayName={displayName} id={((id: any): number)} />
         {key && (
           <Fragment>
@@ -162,6 +178,7 @@ export default function ElementView({ data, index, style }: Props) {
         )}
       </span>
       {showDollarR && <span className={styles.DollarR}>&nbsp;== $r</span>}
+      <span className={styles.ScrollAnchor} ref={scrollAnchorEndRef} />
     </div>
   );
 }