[DevTools] Custom Scrubber Design

[sebmarkbage]

Stacked on #34620.

This will let us use different color for different segments of the timeline.

Since we're modeling discrete steps (sometimes just a couple), a scrubber with a handle that you have to move is quite annoying and misleading. Doesn't show you how many steps there are. Therefore I went with a design that highlights each segment as its own step and you can click to jump to a step.

This is still backed by an input range for accessibility and keyboard controls.

scrubber.mov

[eps1lon]

These should shrink when you hover over the parent. Otherwise you get a jitter when you just barely hover over the outer rim that then retracts due to hover which means it's no longer hovered. That loop goes on forever

CleanShot.2025-09-28.at.20.30.51.mp4

The larger the default font size, the more likely you get this scenario.

It felt actually counter-intuitive that it shrinks on hover. I expected expansion on hover

[sebmarkbage]

Hm. We should make the line-height fixed there. I'll make it fixed height. I can also make it overflow hidden because the idea is that it should not pop out of the container that's the hit target. The hit target should be the outer box, not the thing animating. In fact, with a view transition it wouldn't even be a hit target.

It starts moving in the direction that it would if you clicked it. It gives a nice squeezing effect when it's in the middle so when you cut it off it cuts off the "flow" there.

[sebmarkbage]

Oh it was because the :hover was on the bead. It should be on the step like the listeners are.