Fix tooltips failing to hide in commit graph on Firefox (!50344) · Merge requests · GitLab.org / GitLab

Jonathan Duncan requested to merge jonathanduncan/gitlab:18573-tooltip-remain-displayed-in-the-graph-view into master Dec 20, 2020

What does this MR do?

This MR fixes issue #18573 (closed) where multiple copies of commit graph tooltips can be displayed on Firefox as mouseout events can fail to be delivered to the handlers.

Detail

The root cause of the problem is that on each scroll event network_graph calls renderPartialGraph() which allows it to re-render the graph if needed to show newly scrolled parts.

This in turn calls top.toFront() to bring certain SVG elements to the top of the z-index. top is a set of elements associated with the tooltip, to ensure the tooltip is displayed on top. However this is not just the tooltip and also includes the anchor element (i.e. the dot that has the hover event handler registered for it).

toFront() is a function provided by raphael which ultimately ends up calling appendChild on each of the nodes in the set, to "re-add" them to the SVG DOM and ensure that they are on top. (as SVG draws z-index by DOM order).

On Firefox (as least as far back as 53 and up to 84) this appendChild action effectively "removes" the element from the DOM for a short period before re-adding it.

Because we're triggering renderPartialGraph() from scroll events, this can also cause a previously hovered anchor to now be un-hovered. However the "remove from DOM" behaviour introduces a race condition which means that the mouseout event can fail to be delivered to these temporarily removed elements.

This in turn stops gitlab's hover out handler from firing and this stop the tooltip from being removed.

Chrome doesn't have this behaviour and seems to still deliver events to the appendChild'ed elements.

Fix

This fix changes the network_graph code to only call toFront() on the actual tooltip elements themselves (which do not have any hover event handlers registered) rather than the anchor elements as well.

Screenshots

This is the behaviour before this fix on Firefox 83. The mouse cursor is placed over the "dots" then scrolled down moving it over several other commits. Each of the commits has a tooltip shown but they are not deleted on mouseout.