[DevTools] Remove markers from Suspense timeline (#34357)

Author: eps1lon

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

@@ -2,7 +2,7 @@
   width: 100%;
   display: flex;
   flex-direction: row;
-  padding: 0 0.25rem;
+  padding: 0.25rem;
 }
 
 .SuspenseTimelineInput {
@@ -21,20 +21,6 @@
   max-width: 3rem;
 }
 
-.SuspenseTimelineMarkers {
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-}
-
-.SuspenseTimelineMarkers > * {
-  flex: 1 1 0;
-  overflow: visible;
-  visibility: hidden;
-  width: 0
+.SuspenseTimelineProgressIndicator {
+  align-self: center;
 }
-
-.SuspenseTimelineActiveMarker {
-  visibility: visible;
-}
-

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

@@ -11,14 +11,7 @@ import type {Element, SuspenseNode} from '../../../frontend/types';
 import type Store from '../../store';
 
 import * as React from 'react';
-import {
-  useContext,
-  useId,
-  useLayoutEffect,
-  useMemo,
-  useRef,
-  useState,
-} from 'react';
+import {useContext, useLayoutEffect, useMemo, useRef, useState} from 'react';
 import {BridgeContext, StoreContext} from '../context';
 import {TreeDispatcherContext} from '../Components/TreeContext';
 import {useHighlightHostInstance} from '../hooks';
@@ -112,30 +105,6 @@ function SuspenseTimelineInput({rootID}: {rootID: Element['id'] | void}) {
     setValue(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]);
-
   if (rootID === undefined) {
     return <div className={styles.SuspenseTimelineInput}>Root not found.</div>;
   }
@@ -219,25 +188,26 @@ function SuspenseTimelineInput({rootID}: {rootID: Element['id'] | void}) {
   }
 
   return (
-    <div className={styles.SuspenseTimelineInput}>
-      <input
-        className={styles.SuspenseTimelineSlider}
-        type="range"
-        min={min}
-        max={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>
+    <>
+      <div>
+        {value}/{max}
+      </div>
+      <div className={styles.SuspenseTimelineInput}>
+        <input
+          className={styles.SuspenseTimelineSlider}
+          type="range"
+          min={min}
+          max={max}
+          value={value}
+          onBlur={handleBlur}
+          onChange={handleChange}
+          onFocus={handleFocus}
+          onPointerMove={handlePointerMove}
+          onPointerUp={clearHighlightHostInstance}
+          ref={inputRef}
+        />
+      </div>
+    </>
   );
 }