Web Inspector: TimelineOverview scroll container eats mouse events due to its large z-index

• Component: Web Inspector
• Status: NEW ---

[Matt Baker]

* SUMMARY
TimelineOverview scroll container eats mouse events due to its large z-index. The bottom 16px of the TimelineOverview cannot respond to mouse events to create ruler selections or click on graph records.

* NOTES
Scroll container needs to get first crack at scroll events, thus the high z-index. But we should look at forwarding other mouse events to underlying elements.

[Matt Baker]

Created attachment 263992 [details]
[Patch] Proposed Fix

[Radar WebKit Bug Importer]

<rdar://problem/23249409>

[BJ Burg]

Comment on attachment 263992 [details]
[Patch] Proposed Fix

View in context: https://bugs.webkit.org/attachment.cgi?id=263992&action=review

r- because it doesn't fix the bug when I tested it. I can't make a selection by starting the drag where the scroll bar is positioned.

When I look at the DOM, removing the z-index on the scroll container allows me to make the selection but not interact with a visible scroll bar. Is it possible that we can pump up the z-index only when the scroll bar is visible and being hovered?

> Source/WebInspectorUI/UserInterface/Views/TimelineOverview.js:435
> +            if (!(event.pageX >= graphRect.left && event.pageX <= graphRect.right && event.pageY >= graphRect.top && event.pageY <= graphRect.bottom))

Please use WebInspector.Rect.prototype.intersectionWithRect and friends.

[Matt Baker]

(In reply to comment #3)
> Comment on attachment 263992 [details]
> [Patch] Proposed Fix
> 
> View in context:
> https://bugs.webkit.org/attachment.cgi?id=263992&action=review
> 
> r- because it doesn't fix the bug when I tested it. I can't make a selection
> by starting the drag where the scroll bar is positioned.

Yikes! I was just checking that I could click within the ruler to select frames, which wasn't previously possible either without a hack.

> When I look at the DOM, removing the z-index on the scroll container allows
> me to make the selection but not interact with a visible scroll bar. Is it
> possible that we can pump up the z-index only when the scroll bar is visible
> and being hovered?

I'll look into this.

> > Source/WebInspectorUI/UserInterface/Views/TimelineOverview.js:435
> > +            if (!(event.pageX >= graphRect.left && event.pageX <= graphRect.right && event.pageY >= graphRect.top && event.pageY <= graphRect.bottom))
> 
> Please use WebInspector.Rect.prototype.intersectionWithRect and friends.

Will do.

[Matt Baker]

(In reply to comment #4)
> (In reply to comment #3)
> > Comment on attachment 263992 [details]
> > [Patch] Proposed Fix
> > 
> > View in context:
> > https://bugs.webkit.org/attachment.cgi?id=263992&action=review
> > 
> > r- because it doesn't fix the bug when I tested it. I can't make a selection
> > by starting the drag where the scroll bar is positioned.
> 
> Yikes! I was just checking that I could click within the ruler to select
> frames, which wasn't previously possible either without a hack.

I meant click within the scrollbar.