Fix inline blame alignment when blame loads before highlight

Jacques Erasmusrequested to merge
fix-inline-blame-alignment into master

What does this MR do and why?

Fixes inline blame alignment when blame data loads before highlighted content is available in the DOM.

The problem

Each blame group positions itself next to its line by reading the line's DOM position.

That requires the line element (<div id="LC<n>">) to already be in the DOM at the moment the offset is calculated. The problem is that two things run in parallel:

  1. The highlight worker produces the per-line <div id="LC<n>"> elements.
  2. The blame fetch retrieves blame data and triggers the offset calculation.

For large files the highlighter can take some time. If the blame fetch finishes first, the offset is computed against a DOM that doesn't yet have the line, there's nothing to measure, the calculation produces an invalid value, and the blame group is positioned incorrectly.

The fix

Three small changes that defer the offset calculation until the line is actually in the DOM:

  1. calculateBlameOffset returns null when LC<n> isn't in the DOM yet, instead of producing an invalid offset.
  2. blameInfo filters out null offsets, so deferred groups aren't rendered until their line exists.
  3. chunk.vue emits a highlighted event after its content lands in the DOM.
  4. The parent listens with @highlighted="blameData = [...blameData]", which reassigns blameData and:
    - deferred blame groups now measure their real LC<n> and land on the correct line

The chunk-emit catches both moments when new LC<n> elements appear: when the highlighter delivers a chunk's content,
and when the user scrolls into a chunk whose blame was prefetched but whose content hadn't rendered yet.

Screenshots or screen recordings

before after
Notice how some blame groups rendered at the top instead of next to their respective lines No blame groups at the top, they all align next to their respective lines
2026-04-28_15.00.16_1 2026-04-28_15.00.16_2

How to set up and validate locally

  1. Enable inline blame: Feature.enable(:inline_blame)
  2. Open a large file with blame on. Linux MAINTAINERS is the easiest reproduction: https://staging.gitlab.com/jerasmus/linux/-/blob/master/MAINTAINERS?ref_type=heads&blame=1
  3. As soon as the page loads, press End on your keyboard to jump to the bottom.
  4. Confirm: blame groups align with their lines as chunks finish highlighting. None are stranded at the wrong position.
  5. Scroll back up. Blame groups remain aligned with their respective line numbers.
Edited by Jacques Erasmus

Merge request reports