Introduce IntersectionObserver for tracking current diff file in the list on scroll
Problem to solve
The following discussion from !25355 (merged) should be addressed:
One funny UX concern just popped up. If you scroll with the mouse, your current position is not tracked. So if you then hit
], 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.
- Sasha, Software Developer, https://design.gitlab.com/research/personas#persona-sasha
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.
- in case of a large diff file that takes the whole screen for user, everything is very simple:
IntersectionObservernotifies 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
- if we have several smaller files in the list so that
IntersectionObservernotified 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
currentfile in the view. Tuning
IntersectionObserverto "narrow down" the observation window might help even more with this.
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.