Skip to content

Fix background color in diff syntax highlighting

Stefan requested to merge stefanhamburger/gitlab:master-patch-c728 into master

What does this MR do and why?

Fixes the colors in syntax highlighting of diff sections, e.g.

- Old line
+ New line

Note how if the user has custom diff colors set, "Old line" is currently colored in the background color of the added line, and "New line" has no background color. Instead, both "Old line" and "New line" should have a background color.

Specifically, this MR changes the CSS selector from:

.diff-custom-addition-color .code .gd

to

.diff-custom-addition-color .code .gi

Since in syntax highlighting, the .gd class is used for deleted lines, and the .gi class is used for added (inserted) lines. Most likely, this bug was caused by a copy & paste from diff_custom_colors_deletion.scss, where the selector is correct.

Screenshots or screen recordings

Note how in DevTools, there are two selectors for .gd (from diff_custom_colors_addition.scss and diff_custom_colors_deletion.scss) but nothing for .gi:

grafik

Before:

grafik

After:

grafik

How to set up and validate locally

  1. In your profile preferences, choose custom diff colors.
  2. In an issue or merge request, paste the following code:
    ```diff
    - Old line
    + New line
    ```
  3. Check that both lines have a background color, and that the background color matches the color set in profile preferences.

MR acceptance checklist

This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.

Edited by Stefan

Merge request reports