[Feature] Image Diff Overlay in Merge Requests
Everyone can contribute. Help move this issue forward while earning points, leveling up and collecting rewards.
Release notes
This proposal suggests adding a feature in the Changes section of a Merge Request (MR) in GitLab to visualize differences in image files. When selecting this option, users would see the original and modified images overlaid with highlighted pixel differences. This enhancement would streamline visual change reviews directly within GitLab.
Problem to solve
As a developer or QA engineer reviewing image changes in a Merge Request, I want to directly visualize the differences between images through an overlay view that highlights modified pixels. This feature will allow me to more easily identify visual changes without needing external tools, making the review process faster and more effective.
Intended users
- Sasha (Software Developer) reviewing visual changes
- Simone (Software Engineer in Test) validating visual impacts of changes
- Delaney (Development Team Lead) supervising quality control in MRs
User experience goal
The user should be able to easily compare two images in the Changes view of an MR by selecting an option that overlays the images with highlighted pixel differences.
Proposal
In the Changes section of an MR, add a button or toggle option for image files that enables the visual comparison view. When activated, the user would see the two images overlaid, with modified pixels highlighted. The interaction should mimic typical visual diff tools, allowing users to conduct an effective visual review without needing to download images or use external software.
- The user opens an MR and navigates to the Changes section.
- For any modified image file, a "Visual Compare" option is available.
- When clicked, this option overlays the images with highlighted pixel differences.
Further details
This feature would benefit teams who frequently review visual changes in web or mobile applications, ensuring that visual modifications are immediately visible and easy to interpret.
To implement this functionality, an image comparison tool is recommended to detect and highlight pixel changes between images. For reference, Pixelmatch is a library that could provide the expected overlay behavior. Other libraries with similar capabilities may also be considered.
Permissions and Security
This functionality should be available for all permission levels with access to the Changes section in an MR. No changes to existing permissions are required, and the feature does not impact system security.
Documentation
Documentation should be added in:
- User documentation for Merge Requests
- Changes section within the GitLab interface documentation
Availability & Testing
- Unit tests: Verify that the feature activates correctly when selecting image files.
- Integration tests: Ensure the feature functions as expected in the MR review flow.
- End-to-end tests: Validate the full experience of comparing and visualizing image differences within an MR.
Available Tier
Premium/Silver
Feature Usage Metrics
To measure feature adoption and success, track how often this option is used within the Changes view of an MR and how frequently the "Visual Compare" button is activated.
What does success look like, and how can we measure that?
Success is defined by users adopting this feature to efficiently review visual differences within GitLab, which improves MR review speed. Success metrics could include:
- Increased speed in MR reviews containing visual changes
- Reduced dependency on external tools for image comparison
What is the type of buyer?
This feature is targeted at customers in fields with high dependency on visual changes, such as frontend development teams, visual QA, and UI/UX design.
Is this a cross-stage feature?
No, this functionality primarily impacts the Merge Request workflow.
What is the competitive advantage or differentiation for this feature?
The ability to review visual changes in images directly within GitLab provides a more integrated and streamlined workflow, giving GitLab an advantage over platforms that require external tools for visual comparisons.
Links / references
Playwright visual comparisons usage: https://playwright.dev/docs/test-snapshots#introduction Pixelmatch library: https://github.com/mapbox/pixelmatch Pixelmatch example output: https://github.com/mapbox/pixelmatch?tab=readme-ov-file#example-output