Skip to content

Remember scroll position during a session on MR tabs

Thomas Randolph requested to merge tor/feature/remember-mr-scroll-position into master

What does this MR do?

For #297440 (closed)

Problem

Up to now, the way the MR renders tabs means that by navigating away from the tab, all of the browsing context was lost (except for certain things explicitly stored and retrieved).

When switching between tabs, it's especially inconvenient to lose your scroll position when performing a review of the MR.

Fix

When the user clicks on one of the tabs, the application takes a snapshot of the current scroll position and stores it in a simple object on the class running the tabs themselves.

As soon as a tab renders, the class waits a brief pause (less than a tenth of a second), and scrolls to the stored position for that tab, if it exists.

This pause is to account for the main thread hanging during the Vue rendering cycle.
It may be wise to experiment with Vue's keep-alive directive to avoid the constant DOM churn, but that could result in a significant increase in memory usage, so it's left for a later issue.

Screenshots or Screencasts (strongly suggested)

This is a bit difficult to demonstrate with screenshots, so please consider the following videos:

Before After
before after

How to setup and validate locally (strongly suggested)

All you need to test this locally is an MR where at least one tab has some amount of scrollable height.

This works on all of the tabs, but typically the easiest way to get scrollable height is with a large diff and 5+ comments.
This way, both the Overview and Changes tabs will be scrollable, and you can see it in action.

Does this MR meet the acceptance criteria?

Conformity

Availability and Testing

Edited by Thomas Randolph

Merge request reports