# Context Recently while discussion an improvement for the Blob viewer (https://gitlab.com/gitlab-org/gitlab/-/issues/386639+) an idea popped up: > The full blame page could theoretically be achieved in the blob viewer by fetching and displaying blame information for ALL the lines without leaving the page. :thinking: Might be worth opening an issue to discuss how that could be achieved, if we want to dig deeper. > > For clarity, the "/blame/" page/url would still exist, it would just render the blob page with the relevant blame information displayed in the gutter. The original proposal was to: 1. Add a button at the top of the line gutters to "show blame information" (alternatively, this could be the functionality of the BLAME button at the top) 2. That button increases the width of the line gutter and replaces that with the blame information Due to performance issues with the first iteration of the inline blame https://gitlab.com/groups/gitlab-org/-/epics/11471#note_2199133993, the inline Blame experience was turned off for users in November 2024. Performance issues were addressed in January 2026 as part of https://gitlab.com/gitlab-org/gitlab/-/work_items/500037. ### Motivation * Maintenance: Doing this in the blob page unifies the code into the Blob vue app * Performance/UX: Quicker toggling back/forth between blame and normal blob viewing * Performance/UX:Allows the frontend to selectively request blame data from the backend pertaining to the region currently being shown to the user (and surroundings) resulting in faster performance * Performance/UX:Reuses information from the blob rendering task so no need to fetch it when toggling the Blame info on. * Performance/UX:Still allows to render Blame mode from scratch (would essentially render the Blob vue app + Blame on from the start) ### Questions 1. gitlab~2492649 Do we need new APIs/GraphQL queries? (likely) 2. gitlab~2492649 Can we provide blame info in chunks and still do it performantly? 3. gitlab~3412464 Could we be pushing the blob app too far with this? (in terms of resources/performance) 4. gitlab~3412464 Should we tackle this before migrating to Vue 3 or should we wait? 5. gitlab~2024184 Does this open up the option to roll out other kinds of interactive feature? ### Availability and Testing Add feature specs for: -opening blame from blob app -ensuring correct blame information is displayed -closing blame from blob app Exploratory testing of feature. # Design proposal See https://gitlab.com/gitlab-org/gitlab/-/issues/561788#note_2822918686 [:art: Figma](https://www.figma.com/design/eq2nf3B8MhB9xKrC0VzbPf/branch/9OSfmf5nq0is1hi0Ypzxgx/Repository?m=auto&node-id=8033-21339&t=NWAHGZQvgDvP0M7v-1) <table> <tr> <th></th> <th>Screen</th> <th>Notes</th> </tr> <tr> <td>Default</td> <td> Code view {width="844" height="600"} Blame view default {width="844" height="600"} </td> <td> * Note that the `Preview | Code | Blame` toggle was a part of the initial inline blame scope in https://gitlab.com/groups/gitlab-org/-/epics/9913 but never got implemented due to performance issues with inline blame https://gitlab.com/gitlab-org/gitlab/-/issues/441773#note_2036934764. Now that we're fixing the inline blame, it makes sense to implement the remaining parts of this design. </td> </tr> <tr> <td>Show age indicator legend</td> <td> {width="844" height="600"} {width="844" height="600"} </td> <td> * Toggles the "Newer :blue_square: :blue_square: :blue_square: Older" age indicator legend on/off. By default this is off, as it's redundant with the actual text and the legend is learnable. </td> </tr> <tr> <td>Hover interactions</td> <td> {width="844" height="600"} </td> <td> * 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. See https://gitlab.com/gitlab-org/gitlab/-/work_items/589643 </td> </tr> </table>