Design viewing and commenting on a large diff
- We are currently working on some performance enhancements of viewing a large diff (&15 (closed)).
- As we get going on those issues, we should start improving how to view and comment on a large diff.
- Let's use this issue to discuss what would be in scope and also use this issue for the UX design.
Designs
The designs work for the diffs on Changes tab / Discussion tab / Commit view page.
Suppose there are diff lines scattered across a very large file
- At the top:
- It shows the top 20 lines.
- You can click "Show more (lines 21-48)" to load more lines below.
- At the bottom:
- It shows the top 20 lines in the diff lines.
- You can click "Show more (lines 990-1200)" to load more lines.
- You can also click
h-ellipsis
icon in grey to load the unchanged lines above.
- At the top and bottom:
- It shows the top 20 lines and the diff lines at the bottom are collapsed.
- You can click "Show more (lines 990-1200)" to load more lines.
- Scattered around the file:
- It only shows the top 20 lines and the other diff lines are all collapsed.
- You can click "Show more (lines xxx-yyy)" to expand the collapsed diff lines.
At the top | At the bottom | At the top and bottom | Scattered around the file |
---|---|---|---|
Suppose there are comments on lines scattered across a very large file
- Diff lines are in the middle, and comments scattered:
- The top 20 lines of the diff lines at most initially shows up as default.
- If the line which is excluded in the diff lines has comments, the 2 lines above and the 2 lines below will also initially show up. For example, if line 9 has a comment, line 8, line 7, line 10, line 11 will show up.
- Diff lines at the top and bottom, and comments scattered:
- It still initially shows the top 20 lines of the diff lines at most in the diff lines at the top.
- It also initially shows the part in 5 lines which has comments.
- If the diff lines which is in the middle of the file also has comments, it also initially shows the part with the comments in 5 lines at most. You can click "Show more (lines 1000-1200)" to load more lines.
Diff lines are in the middle, and comments scattered | Diff lines at the top and bottom, and comments scattered |
---|---|
- How the lines with comments work:
- If there are more than 1 comment on the same line, it still shows the 2 lines above and below.
Edited by Hazel Yang