Introduce IntersectionObserver for tracking current diff file in the list on scroll

Problem to solve

The following discussion from gitlab-ce!25355 should be addressed:

  • @leipert started a discussion: (+4 comments)

    One funny UX concern just popped up. If you scroll with the mouse, your current position is not tracked. So if you then hit [ or ], you jump to the first file. Seems kinda funky, maybe we should follow up with tracking the position of mouse scrolling somehow (which sounds aweful to implement)

    I wonder what the maintainer thinks about that

In essence, after we introduce keyboard navigation and, as a result, persistent information about current diff file on DiffsApp, behaviour user experiences when scrolling (and, maybe using keyboard navigation after that) is inconsistent and quite unexpected.

Target audience

Further details

It used to be very expensive to track user's position on the screen on scroll previously. With appearance of IntersectonObserver it becomes very cheap and is therefor a great tool to consider for issues like this one. Technically, IntersectionObserver still monitors user's scrolling but does it in the async nature that makes it perfect for performance-oriented applications.

The only place that might be a performance bottleneck is the way we handle response and information the observer supplies us with because even though the observer itself is of async nature, the handler processing information, is not. So we should be careful with introducing any heavy-lifting in the handlers.

Proposal

  • in case of a large diff file that takes the whole screen for user, everything is very simple: IntersectionObserver notifies us about this file getting into view and unless we get information about this file moving out of the view (or new file getting into view), we can be 100% certain about current diff file.
  • if we have several smaller files in the list so that IntersectionObserver notified us about all of them getting into view, but we still didn't get notification about them moving out of the view, we, at least, know what files are visible to user. Employing very basic Math we can have a very good guess about current file in the view. Tuning IntersectionObserver to "narrow down" the observation window might help even more with this.

Documentation

What does success look like, and how can we measure that?

Behaviour of marking (on the code level and visual highlighting) should be consistent no matter the way user navigates the diff files listing.

/cc @iamphill @andr3

Edited by André Luís