Rewrite the diff content markup to not use <table>
Summary
By rewriting the markup of the Diff content to not use a table, we'll be able to go beyond the markup allowed within the tr
scope.
This will allow us to build the same UI without the heavy restraints of a table, including using CSS to show and hide visual CTA in the gutters of the lines. (out of scope for this issue).
Improvements
- More freedom when it comes to markup of each row
- Better performance (need to be checked, but CSS Grid outperforms Flexbox. Table layout is heavy)
- Will enable improvements until then blocked by the table markup.
Risks
This might bring some disruption on how users select the content of the diffs. Beware of the "select text" pattern.
Involved components
-
app/assets/javascripts/diffs/components/inline_diff_view.vue
and descendants
Availability and Testing
There are QA tests involving some of the markup to be changed (for example, there's a QA selector in at least one file), so some QA page objects may need to be updated and package-and-qa
should be run.
-
Please run package-and-qa
and consult Quality if any tests fail.
Optional: Intended side effects
Optional: Missing test coverage
Edited by Mark Lapierre