Remember scroll position during a session on MR tabs
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
-
I have included changelog trailers, or none are needed. (Does this MR need a changelog?) -
I have added/updated documentation, or it's not needed. (Is documentation required?) -
I have properly separated EE content from FOSS, or this MR is FOSS only. (Where should EE code go?) -
I have added information for database reviewers in the MR description, or it's not needed. (Does this MR have database related changes?) -
I have self-reviewed this MR per code review guidelines. -
This MR does not harm performance, or I have asked a reviewer to help assess the performance impact. (Merge request performance guidelines) -
I have followed the style guides. -
This change is backwards compatible across updates, or this does not apply.
Availability and Testing
-
I have added/updated tests following the Testing Guide, or it's not needed. (Consider all test levels. See the Test Planning Process.) -
I have tested this MR in all supported browsers, or it's not needed. -
I have informed the Infrastructure department of a default or new setting change per definition of done, or it's not needed.