Improve User Exprience for Blame page
What does this MR do and why?
This is a follow-up on !67050 (merged)
The previous MR introduced a significant performance boost to the rendering of large Blame pages. However it also introduced a slight degradation in the UX of the page. Specifically, scroll position no longer reflected where the actual viewport was and acted jiggly, jumping each time a new blame block rendered inside a viewport.
This MR solves this issue and preserves the same performance benefits introduced earlier.
It does that by applying content-visibility only to the elements that actually have a known height. There are two kind of elements there that have this characteristic: commit section and code lines.
So I also added contain-intrinsic-size to those elements as well as a content-visibility: auto, so they are not rendering when possible, but also preserve a correct layout.
Important consideration: GitLab uses rems for font sizing, so we have to respect that as well. I have deinfed the element's intrinsic size using the same line height for code lines and 3em for the commit section. It doesn't have a fixed height, but the height can be guessed just by summing the line heights of 2 lines of text (current line height is 1.5, so the resuling height will be 3em).
Screenshots or screen recordings
| Before | After |
|---|---|
| lzCG1pRIM9 | 3Ut8B39J7f |
How to set up and validate locally
- Open any Blame page that has lots of lines of code
- Verify that scroll behaves correctly and the page still takes a comparable time to load as before the changes were applied
MR acceptance checklist
This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.
-
I have evaluated the MR acceptance checklist for this MR.