Update selected line style in the blob file view

What does this MR do and why?

The selected/highlighted line style in the blob (single file) view was never brought in line with the redesign already applied to merge request and commit diffs. This updates the blob view to match:

  • A themed background fill with a single box outline that spans the gutter and the code — top/bottom borders on the first/last selected lines, left down the gutter, right down the code.
  • A purple gutter tint when hovering any part of a line (code or gutter), plus the blame icon, matching the diff hover behavior.
  • Selected line numbers use the hover color; the gutter/content separator uses the same color as the diff views.
  • The blame icon also appears on keyboard focus (:focus-visible), so the blame link is discoverable when tabbed to, without the icon lingering after a mouse click.
  • Bottom corners follow the file frame radius, including when blame is shown (the blame column then owns the frame's bottom-left corner).
  • A selected line now spans the full width of the file, no matter which chunk it's in — this needed the chunks to be sized as a single column instead of each chunk sizing itself.

It reuses the shared --code-highlighted-line-* / --code-line-number-hover-* theme custom properties, so the styling tracks each syntax-highlighting theme. Replaces the six duplicated per-theme pre .hll rules with a single theme-agnostic one, which also covers the views that highlight lines outside the blob viewer (global code search).

The simple blob viewer (simple_viewer.vue, used by snippets and a few legacy file types) now marks the gutter cell alongside the code line, so its highlight draws the same complete box as the source viewer.

References

Screenshots or screen recordings

States

State Before After
Hover line image.png image.png
Hover line number image.png image.png
Hover blame link image.png image.png
Last line image.png image.png
Blame open image.png image.png

Syntax highlighting themes

Theme Before After Commit/MR diff (for comparison)
Light image.png image.png image.png
Dark image.png image.png image.png
Solarized Light image.png image.png image.png
Solarized Dark image.png image.png image.png
Monokai image.png image.png image.png
Dracula image.png image.png image.png
None image.png image.png image.png

Other views

View Before After
Global code search image.png image.png
Snippets (simple_viewer.vue) image.png image.png

How to set up and validate locally

  1. Open any source file blob, e.g. http://gdk.test:3000/<group>/<project>/-/blob/master/<file>.
  2. Click a line number → the line shows a themed fill with a full box outline and the border sits over the file frame on the sides.
  3. Shift-click another line number to select a range → one continuous box across the selection.
  4. Hover any part of a line (number or code) → the gutter tints purple and the blame icon appears; move away and it clears.
  5. Select the last line of the file → its bottom corners match the file frame. Then open a file with lines long enough to scroll horizontally (http://gdk.test:3000/gitlab-org/gitlab-test/-/blob/master/CONTRIBUTING.md?plain=1#L90-96), select the last line, and scroll all the way right → the highlight still reaches the right edge.
  6. Toggle Blame on → the blame column's bottom-left corner matches the frame.
    1. Optional. Toggle Blame on a large file and confirm the loading skeletons appear aligned with the code (not shifted).
  7. Switch syntax themes (e.g. Light, Dark, Monokai) in Preferences and confirm the fill/border/hover colors adapt and match the diff views.
  8. Tab to a line's blame link and confirm the icon becomes visible on focus; click a line number, move the pointer away, and confirm the icon does not stay visible.
  9. Run a global code search that matches file contents and confirm matched lines are highlighted. Check Solarized Light in particular, the highlight was missing there before this change.
  10. Open a snippet and click a line number, and confirm the selection draws a full box across the gutter and the code.

MR acceptance checklist

Evaluate this MR against the MR acceptance checklist. It helps you analyze changes to reduce risks in quality, performance, reliability, security, and maintainability.

Edited by Pedro Moreira da Silva

Merge request reports

Loading
Loading