Improve scroll positioning when elements change on a page.

Review Request #9142 — Created Aug. 17, 2017 and submitted

Information

Review Board
release-3.0.x
889d176...

Reviewers

Review Board has a lot of bits of UI that dynamically grow or shrink as
the page is loading. Diff fragments, for instance, dynamically load
after the page has otherwise loaded, which results in a page jump
(sometimes a significant one) when browsing through the page or after
having navigated to the anchor for a comment or review. There are also
elements further up the page that react as changes are made further down
(like the issue summary table when resolving/reopening an issue).

Some of this has been worked around in the past (the issue summary table
specifically), but the problem was pretty apparent in some browsers when
working with anchors on the review request page.

This change introduces RB.ScrollManagerView (accessible via
RB.scrollManager), which aims to fix the jumpiness as parts of the UI
update. When a view is replacing/showing/hiding a bit of UI, it can now
call RB.scrollManager.markForUpdate, passing in the element. After the
update, it can call RB.scrollManager.markUpdated. This tells the
scroll manager to schedule a scroll position fix, taking into account
the changes made to that element (and any others updated before the
scheduled position fix takes place). The scroll position will be
adjusted to compensate for the new heights/offsets in the updated
elements, keeping the current view of the page stable.

It also handles provides functions for navigating to an element or
position on the page, wrapping window.scrollTo(). This will take into
account an offset that views can adjust. This is intended for things
like the review draft banner, which would normally overlap the top of
the content being navigated to. The review request page has been updated
to use this whenever navigating to anchors.

Over time, this will be extended to offer additional functionality
related to the scrollbar and positioning on the page.

Tested this extensively on the review request page in multiple browsers.
Verified that anchor navigation worked consistently and took the floating
review draft banner into consideration.

Tested navigating to a page with an anchor and having the diffs load.
Verified that the page did not jump.

Tested that changing issue statuses didn't result in page jumps.

Unit tests pass.

Description From Last Updated

Col: 54 Expected an assignment or function call and instead saw an expression.

reviewbotreviewbot
Checks run (1 failed, 1 succeeded)
flake8 passed.
JSHint failed.

JSHint

chipx86
chipx86
david
  1. Ship It!
  2. 
      
chipx86
Review request changed

Status: Closed (submitted)

Change Summary:

Pushed to release-3.0.x (588a6d7)
Loading...