Bug 153376 – Web Inspector: Timelines view: Tiny drag target when the timelines view range draggers are all the way to the left or all the way to the right

• Component: Web Inspector
• Status: ASSIGNED

[Saam Barati]

It's a tiny target to hit with my mouse.
I often end up extending the left side bar (if grabbing the left target)
or shrinking the window (if grabbing the right side bar).

It'd be nice if these were easier to manipulate.

[Radar WebKit Bug Importer]

<rdar://problem/24307229>

[Nikita Vasilyev]

I agree, we should increase the clickable area of the handles.

In addition to that, Bug 153395 "Highlight timeline range handles on hover"
should mitigate the issue.

[Nikita Vasilyev]

Created attachment 269655 [details]
[Animated GIF] Actual/proposed

What if we make the handles to sort of point inwards.

The visual style could be different, the handles don't have
to be that angled.

[Saam Barati]

(In reply to comment #3)
> Created attachment 269655 [details]
> [Animated GIF] Actual/proposed
> 
> What if we make the handles to sort of point inwards.
> 
> The visual style could be different, the handles don't have
> to be that angled.
How does it feel in use?
Maybe you can post a GIF of that?

Just checked out the other patch, too.
Both in concert together will be super helpful.

[Matt Baker]

(In reply to comment #3)
> Created attachment 269655 [details]
> [Animated GIF] Actual/proposed
> 
> What if we make the handles to sort of point inwards.
> 
> The visual style could be different, the handles don't have
> to be that angled.

I think the sharp inward angle looks really slick. How does it look when the selection is scrolled off the left or right edge of the graph and both handles overlap?

[Nikita Vasilyev]

(In reply to comment #4)
> (In reply to comment #3)
> > Created attachment 269655 [details]
> > [Animated GIF] Actual/proposed
> > 
> > What if we make the handles to sort of point inwards.
> > 
> > The visual style could be different, the handles don't have
> > to be that angled.
> How does it feel in use?
> Maybe you can post a GIF of that?
> 
> Just checked out the other patch, too.
> Both in concert together will be super helpful.

I drew this picture in Photoshop, so there are
no animated GIFs or patches yet.

Inward handles increase the clickable area twice when
they are all the way to the left or all the way to the right.

[Nikita Vasilyev]

(In reply to comment #5)
> (In reply to comment #3)
> > Created attachment 269655 [details]
> > [Animated GIF] Actual/proposed
> > 
> > What if we make the handles to sort of point inwards.
> > 
> > The visual style could be different, the handles don't have
> > to be that angled.
> 
> I think the sharp inward angle looks really slick. How does it look when the
> selection is scrolled off the left or right edge of the graph and both
> handles overlap?

Do you mean this case https://cldup.com/IoFQK-vrD4-2000x2000.png?
We could show just the left handle when it's all the way to the left
and only the right handle when it's all the way to the right.

It could be styled similarly to what it is now:
white background and grey border.

There is an issue with a very narrow selection.
It isn't great already (https://cloudup.com/cz09ZtkHEr7),
but it would be even worse with the inwards handles.
When selection becomes too narrow, we could horizontally flip
the handles — make them point outwards. I think it's worth
experimenting with.

[Matt Baker]

That was exactly the case I was thinking of. Hiding one of the handles so the other points inward from the overview's edge sounds like a good solution.

I like the idea of flipping them to point outwards when the selection width is less than a certain number of pixels. My only concern would be when dragging a handle causes a selection to no longer be "small". Would the handles flip back the other way once this happens, or once the selection drag stops? The change could be jarring, but we'd have to try it out to see.