Refresh Rapid Diffs visual style
What does this MR do and why?
This is UI polish to refine the feel of the merge request Changes tab (Rapid Diffs), which was starting to look dated. It's built with existing design tokens and syntax theme variables.
- Coloured edge on changed lines: changed lines turn the file's left edge green for additions and red for deletions. In side-by-side view, changed lines on the new side also colour the centre divider. Hovering a row or opening a line link shows the usual hover or highlight border instead.
- Coloured line numbers: line numbers on changed lines use the same green or red, adjusted to stay readable on both light and dark syntax themes.
- Custom diff colors: the edge and line numbers follow custom diff colors from Preferences, with the same readability adjustment.
- Full-row tint: changed lines tint the line numbers too.
- Hatched empty side in side-by-side view.
- Softer conflict and linked file frames: files with conflicts, and files opened from a link, keep their tinted header, but their frame is lighter so it stays distinct from the coloured edge of changed lines.
The file header, discussion rows and highlighted lines are unchanged from master. Changed rows still extend over the file border, which is what lets them colour the edge. The file header redesign moves to a follow-up MR.
Hunk headers and the divider between line numbers and code are also unchanged. This keeps every row the same height, so content-visibility height estimates stay exact, and the divider still shows where each line starts.
References
None
Screenshots or screen recordings
Dark mode
| Before | After |
|---|---|
![]() |
![]() |
Light mode
| Before | After |
|---|---|
![]() |
![]() |
How to set up and validate locally
- Open a merge request with additions, deletions and multiple hunks, for example in
toolbox/gitlab-smoke-tests, and go to the Changes tab. - Check inline view, then add
?view=parallelfor side-by-side. Check the left edge next to changed lines and, in side-by-side, the centre divider. - Hover a changed row, add a line comment, and open a line link (
#line) to check the hover and highlight borders. - Add
?file_path=<path of a changed file>to the URL to open a linked file, and check its frame. - Open a merge request with merge conflicts and check the conflicting file's frame stays distinct from the red edge of deleted lines.
- Set custom diff colors in Preferences and check the edge and line numbers follow them, with line numbers still readable.
- Repeat in dark mode with the Dark syntax theme (Preferences), and with mixed UI and syntax themes.
- If you see the legacy diffs, add
rapid_diffs=trueto the URL.
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.



