Skip to content

Adjust the layout of the gutter on the inline blame mode on the blob page

Context

In the context of this issue: #441970 (closed) we will explore design solutions to not change the height of the lines when the blame information drops in. This aims are reducing CLS upon toggling between Blame mode and others.

#441970 (comment 2616969729)

This is a bit tricky because we will only know the exact layout once we receive blame data.

We add extra spacing between some lines to accommodate the additional height required for the blame information. Adding the extra spacing between lines shifts the contents. So if a user is on line 500 and blame information for line 470 is retrieved, the user will experience layout shift as the extra spacing is added for content above the line that the user is viewing.

collapsed expanded
Screenshot_2024-10-23_at_11.55.29 Screenshot_2024-10-23_at_11.55.38

If there's a way for us to display the blame information without having to add extra spacing to the source code lines, it should prevent the layout shift.

@alyssatrinh do you think there's a way to display blame information without having to add extra spacing between the lines? Notice in the screenshot, we only add extra spacing when the blame spans a single line to make space for the profile picture and the authored/date information. Perhaps we can hide this information or display it differently so that it fits on a single line?

Design proposal

See #561788 (comment 2822918686)

🎨 Figma

Screen Notes
Default

Code view

1.2 code.jpg

Blame view default

1.1 blame-oneline_ default.jpg

  • Note that the Preview | Code | Blame toggle was a part of the initial inline blame scope in &9913 but never got implemented due to performance issues with inline blame #441773 (comment 2036934764). Now that we're fixing the inline blame, it makes sense to implement the remaining parts of this design.
Show age indicator legend

2.1 blame-oneline_ no key.jpg

2.2 blame-oneline_ show key.jpg

  • Toggles the "Newer 🟦 🟦 🟦 Older" age indicator legend on/off. By default this is off, as it's redundant with the actual text and the legend is learnable.
Hover interactions

3.1 blame-oneline_ hover information.jpg

  • Note that the commit popover is new and may be out of scope of this issue. However, it is recommended to enhance this design and give users quick at-a-glance information. This component can be re-used in many places across Source Code.
Edited by Alyssa Trinh