Don't scroll if we're already in the viewport

Author: sebmarkbage

packages/react-devtools-shared/src/backend/views/Highlighter/index.js

@@ -184,7 +184,7 @@ export default function setupHighlighter(
           // $FlowFixMe[method-unbinding]
           if (typeof node.scrollIntoView === 'function') {
             node.scrollIntoView({
-              block: 'start',
+              block: 'nearest',
               inline: 'nearest',
               behavior: 'smooth',
             });
@@ -226,6 +226,7 @@ export default function setupHighlighter(
     }
 
     if (attemptScrollToHostInstance(renderer, id)) {
+      console.log('scrolling into node');
       return;
     }
 
@@ -246,11 +247,32 @@ export default function setupHighlighter(
           y = rect.y;
         }
       }
-      window.scrollTo({
-        top: y,
-        left: x,
-        behavior: 'smooth',
-      });
+      const element = document.documentElement;
+      if (!element) {
+        return;
+      }
+      // Check if the target corner is already in the viewport.
+      console.log(
+        'scroll into rect',
+        x,
+        y,
+        window.scrollX,
+        window.scrollY,
+        element.clientWidth,
+        element.clientHeight,
+      );
+      if (
+        x < window.scrollX ||
+        y < window.scrollY ||
+        x > window.scrollX + element.clientWidth ||
+        y > window.scrollY + element.clientHeight
+      ) {
+        window.scrollTo({
+          top: y,
+          left: x,
+          behavior: 'smooth',
+        });
+      }
       // It's possible that after mount, we're able to scroll deeper once the new nodes
       // have mounted. Let's try again after mount. Ideally we'd know which commit this
       // is going to be but for now we just try after 100ms.