Improve the styling and performance of diff expansion in reviews.
Review Request #9057 — Created July 7, 2017 and submitted
The existing implementation of diff expansion in reviews used
controls in a diff on hover. As the controls expanded, the content below
the diff would get pushed down. This caused a lot of rendering on the
page, which could be slow and made scrolling through the review request
page a bit more tedious.
The new implementation uses CSS transforms and transitions to shift and
scale the controls and the diff header, which allows us to expand
outward from the diff without impacting the position of the diff itself
or any of the content below it on the page. This is much faster,
resulting in a smoother animation and less jumpiness on the page.
To do this, we begin the diff fragments in a collapsed state, scaling
down the controls and shifting the diff header down by the same amount.
We do this without transitions. After it's been loaded and scaled down,
transitions are enabled, which will then start taking place when the
Tested on Chrome, Firefox, and IE9+.
Tested with transitions fully disabled to make sure functionality
Tested with diffs containing headers just above, just below, both
above and below, and neither above nor below.
Woo! This is awesome.
I have just a few formatting comments for the JS.
Don't need the ()s around the variable name when there's only one arg.
Mind also fixing up the format of this comment to be summary/description?
This can be one-lined:
_.defer(() => $container.addClass('allow-transitions'));
- Updated the affected functions to use ES6 function declaration syntax and
/**format for doc comments.
- Updated some docs to be more consistent with our standards.
- Other misc. ES6-related cleanups with calls.
Revision 2 (+202 -52)
Checks run (2 succeeded)