[DevTools] Allow to continue dragging when leaving profiler picker

packages/react-devtools-shared/src/devtools/views/Profiler/SnapshotCommitList.js

@@ -8,7 +8,7 @@
  */
 
 import * as React from 'react';
-import {useCallback, useEffect, useMemo, useRef, useState} from 'react';
+import {useEffect, useMemo, useRef} from 'react';
 import AutoSizer from 'react-virtualized-auto-sizer';
 import {FixedSizeList} from 'react-window';
 import SnapshotCommitListItem from './SnapshotCommitListItem';
@@ -20,7 +20,6 @@ export type ItemData = {|
   commitDurations: Array<number>,
   commitTimes: Array<number>,
   filteredCommitIndices: Array<number>,
-  isMouseDown: boolean,
   maxDuration: number,
   selectedCommitIndex: number | null,
   selectedFilteredCommitIndex: number | null,
@@ -97,28 +96,6 @@ function List({
     }
   }, [listRef, selectedFilteredCommitIndex]);
 
-  // When the mouse is down, dragging over a commit should auto-select it.
-  // This provides a nice way for users to swipe across a range of commits to compare them.
-  const [isMouseDown, setIsMouseDown] = useState(false);
-  const handleMouseDown = useCallback(() => {
-    setIsMouseDown(true);
-  }, []);
-  const handleMouseUp = useCallback(() => {
-    setIsMouseDown(false);
-  }, []);
-  useEffect(() => {
-    if (divRef.current === null) {
-      return () => {};
-    }
-
-    // It's important to listen to the ownerDocument to support the browser extension.
-    // Here we use portals to render individual tabs (e.g. Profiler),
-    // and the root document might belong to a different window.
-    const ownerDocument = divRef.current.ownerDocument;
-    ownerDocument.addEventListener('mouseup', handleMouseUp);
-    return () => ownerDocument.removeEventListener('mouseup', handleMouseUp);
-  }, [divRef, handleMouseUp]);
-
   const itemSize = useMemo(
     () => Math.max(minBarWidth, width / filteredCommitIndices.length),
     [filteredCommitIndices, width],
@@ -134,7 +111,6 @@ function List({
       commitDurations,
       commitTimes,
       filteredCommitIndices,
-      isMouseDown,
       maxDuration,
       selectedCommitIndex,
       selectedFilteredCommitIndex,
@@ -144,7 +120,6 @@ function List({
       commitDurations,
       commitTimes,
       filteredCommitIndices,
-      isMouseDown,
       maxDuration,
       selectedCommitIndex,
       selectedFilteredCommitIndex,
@@ -153,11 +128,7 @@ function List({
   );
 
   return (
-    <div
-      onMouseDown={handleMouseDown}
-      onMouseUp={handleMouseUp}
-      ref={divRef}
-      style={{height, width}}>
+    <div ref={divRef} style={{height, width}}>
       <FixedSizeList
         className={styles.List}
         layout="horizontal"

packages/react-devtools-shared/src/devtools/views/Profiler/SnapshotCommitListItem.js

@@ -23,12 +23,16 @@ type Props = {
   ...
 };
 
+type DragStartCommit = {
+  dragStartCommitIndex: number,
+  rectLeft: number,
+};
+
 function SnapshotCommitListItem({data: itemData, index, style}: Props) {
   const {
     commitDurations,
     commitTimes,
     filteredCommitIndices,
-    isMouseDown,
     maxDuration,
     selectedCommitIndex,
     selectCommitIndex,
@@ -44,6 +48,55 @@ function SnapshotCommitListItem({data: itemData, index, style}: Props) {
     selectCommitIndex,
   ]);
 
+  let dragStartCommit: DragStartCommit | null = null;
+  const maxCommitIndex = filteredCommitIndices.length - 1;
+
+  const handleDrag = (e: any) => {
+    if (e.buttons === 0) {
+      document.removeEventListener('mousemove', handleDrag);
+      const iframe = document.querySelector('iframe');
+      if (iframe) iframe.style.pointerEvents = 'auto';
+      dragStartCommit = null;
+      return;
+    }
+    if (dragStartCommit === null) return;
+
+    let newCommitIndex = index;
+    let newCommitRectLeft = dragStartCommit.rectLeft;
+
+    if (e.pageX < dragStartCommit.rectLeft) {
+      while (e.pageX < newCommitRectLeft) {
+        newCommitRectLeft = newCommitRectLeft - 1 - width;
+        newCommitIndex -= 1;
+      }
+    } else {
+      let newCommitRectRight = newCommitRectLeft + 1 + width;
+      while (e.pageX > newCommitRectRight) {
+        newCommitRectRight = newCommitRectRight + 1 + width;
+        newCommitIndex += 1;
+      }
+    }
+
+    if (newCommitIndex < 0) {
+      newCommitIndex = 0;
+    } else if (newCommitIndex > maxCommitIndex) {
+      newCommitIndex = maxCommitIndex;
+    }
+    selectCommitIndex(newCommitIndex);
+  };
+
+  const handleMouseDown = (e: any) => {
+    handleClick();
+    document.addEventListener('mousemove', handleDrag);
+    const iframe = document.querySelector('iframe');
+    if (iframe) iframe.style.pointerEvents = 'none';
+    const rect = e.target.getBoundingClientRect();
+    dragStartCommit = {
+      dragStartCommitIndex: index,
+      rectLeft: rect.left,
+    };
+  };
+
   // Guard against commits with duration 0
   const percentage =
     Math.min(1, Math.max(0, commitDuration / maxDuration)) || 0;
@@ -56,7 +109,7 @@ function SnapshotCommitListItem({data: itemData, index, style}: Props) {
     <div
       className={styles.Outer}
       onClick={handleClick}
-      onMouseEnter={isMouseDown ? handleClick : null}
+      onMouseDown={handleMouseDown}
       style={{
         ...style,
         width,