Add markers for meaningful boundaries

Author: eps1lon

packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseTab.css

@@ -110,6 +110,7 @@
   padding: 0.25rem;
   display: flex;
   flex-direction: row;
+  align-items: flex-start;
 }
 
 .Timeline {

packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseTimeline.css

@@ -1,3 +1,20 @@
 .SuspenseTimelineSlider {
   width: 100%;
 }
+
+.SuspenseTimelineMarkers {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+}
+
+.SuspenseTimelineMarkers > * {
+  flex: 1 1 0;
+  overflow: visible;
+  visibility: hidden;
+  width: 0
+}
+
+.SuspenseTimelineActiveMarker {
+  visibility: visible;
+}

packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseTimeline.js

@@ -11,7 +11,14 @@ import type {Element, SuspenseNode} from '../../../frontend/types';
 import type Store from '../../store';
 
 import * as React from 'react';
-import {useContext, useLayoutEffect, useMemo, useRef} from 'react';
+import {
+  useContext,
+  useId,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
 import {BridgeContext, StoreContext} from '../context';
 import {TreeDispatcherContext} from '../Components/TreeContext';
 import {useHighlightHostInstance} from '../hooks';
@@ -89,10 +96,36 @@ export default function SuspenseTimeline(): React$Node {
   const min = 0;
   const max = timeline.length - 1;
 
+  const [value, setValue] = useState(max);
+
+  const markersID = useId();
+  const markers: React.Node[] = useMemo(() => {
+    return timeline.map((suspense, index) => {
+      const takesUpSpace =
+        suspense.rects !== null &&
+        suspense.rects.some(rect => {
+          return rect.width > 0 && rect.height > 0;
+        });
+
+      return takesUpSpace ? (
+        <option
+          key={suspense.id}
+          className={
+            index === value ? styles.SuspenseTimelineActiveMarker : undefined
+          }
+          value={index}>
+          #{index + 1}
+        </option>
+      ) : (
+        <option key={suspense.id} />
+      );
+    });
+  }, [timeline, value]);
+
   function handleChange(event: SyntheticEvent<HTMLInputElement>) {
-    const value = +event.currentTarget.value;
+    const pendingValue = +event.currentTarget.value;
     for (let i = 0; i < timeline.length; i++) {
-      const forceFallback = i > value;
+      const forceFallback = i > pendingValue;
       const suspense = timeline[i];
       const elementID = suspense.id;
       const rendererID = store.getRendererIDForElement(elementID);
@@ -110,10 +143,11 @@ export default function SuspenseTimeline(): React$Node {
       }
     }
 
-    const suspense = timeline[value];
+    const suspense = timeline[pendingValue];
     const elementID = suspense.id;
     highlightHostInstance(elementID);
     dispatch({type: 'SELECT_ELEMENT_BY_ID', payload: elementID});
+    setValue(pendingValue);
   }
 
   function handleBlur() {
@@ -158,14 +192,18 @@ export default function SuspenseTimeline(): React$Node {
         type="range"
         min={min}
         max={max}
-        defaultValue={max}
+        list={markersID}
+        value={value}
         onBlur={handleBlur}
         onChange={handleChange}
         onFocus={handleFocus}
         onPointerMove={handlePointerMove}
         onPointerUp={clearHighlightHostInstance}
         ref={inputRef}
       />
+      <datalist id={markersID} className={styles.SuspenseTimelineMarkers}>
+        {markers}
+      </datalist>
     </div>
   );
 }