Simplify split diff view generation and remove JS dependency (#16775)

Gitea has relied on some slow JS code to match up added and deleted lines on the
diff pages. This can cause a considerable slow down on large diff pages.

This PR makes a small change meaning that the matching up can occur much more simply.

Partial fix #1351

Signed-off-by: Andrew Thornton <art27@cantab.net>

modules/repofiles/diff_test.go

@@ -83,6 +83,7 @@ func TestGetDiffPreview(t *testing.T) {
 							{
 								LeftIdx:  3,
 								RightIdx: 0,
+								Match:    4,
 								Type:     3,
 								Content:  "-Description for repo1",
 								Comments: nil,
@@ -90,6 +91,7 @@ func TestGetDiffPreview(t *testing.T) {
 							{
 								LeftIdx:  0,
 								RightIdx: 3,
+								Match:    3,
 								Type:     2,
 								Content:  "+Description for repo1",
 								Comments: nil,
@@ -97,6 +99,7 @@ func TestGetDiffPreview(t *testing.T) {
 							{
 								LeftIdx:  0,
 								RightIdx: 4,
+								Match:    -1,
 								Type:     2,
 								Content:  "+this is a new line",
 								Comments: nil,

services/gitdiff/gitdiff.go

@@ -75,6 +75,7 @@ const (
 type DiffLine struct {
 	LeftIdx     int
 	RightIdx    int
+	Match       int
 	Type        DiffLineType
 	Content     string
 	Comments    []*models.Comment
@@ -943,6 +944,7 @@ func parseHunks(curFile *DiffFile, maxLines, maxLineCharacters int, input *bufio
 		curFileLFSPrefix  bool
 	)
 
+	lastLeftIdx := -1
 	leftLine, rightLine := 1, 1
 
 	for {
@@ -1027,13 +1029,21 @@ func parseHunks(curFile *DiffFile, maxLines, maxLineCharacters int, input *bufio
 				curFile.IsIncomplete = true
 				continue
 			}
-			diffLine := &DiffLine{Type: DiffLineAdd, RightIdx: rightLine}
+			diffLine := &DiffLine{Type: DiffLineAdd, RightIdx: rightLine, Match: -1}
 			rightLine++
 			if curSection == nil {
 				// Create a new section to represent this hunk
 				curSection = &DiffSection{}
 				curFile.Sections = append(curFile.Sections, curSection)
 			}
+			if lastLeftIdx > -1 {
+				diffLine.Match = lastLeftIdx
+				curSection.Lines[lastLeftIdx].Match = len(curSection.Lines)
+				lastLeftIdx++
+				if lastLeftIdx >= len(curSection.Lines) || curSection.Lines[lastLeftIdx].Type != DiffLineDel {
+					lastLeftIdx = -1
+				}
+			}
 			curSection.Lines = append(curSection.Lines, diffLine)
 		case '-':
 			curFileLinesCount++
@@ -1042,7 +1052,7 @@ func parseHunks(curFile *DiffFile, maxLines, maxLineCharacters int, input *bufio
 				curFile.IsIncomplete = true
 				continue
 			}
-			diffLine := &DiffLine{Type: DiffLineDel, LeftIdx: leftLine}
+			diffLine := &DiffLine{Type: DiffLineDel, LeftIdx: leftLine, Match: -1}
 			if leftLine > 0 {
 				leftLine++
 			}
@@ -1051,6 +1061,9 @@ func parseHunks(curFile *DiffFile, maxLines, maxLineCharacters int, input *bufio
 				curSection = &DiffSection{}
 				curFile.Sections = append(curFile.Sections, curSection)
 			}
+			if len(curSection.Lines) == 0 || curSection.Lines[len(curSection.Lines)-1].Type != DiffLineDel {
+				lastLeftIdx = len(curSection.Lines)
+			}
 			curSection.Lines = append(curSection.Lines, diffLine)
 		case ' ':
 			curFileLinesCount++
@@ -1061,6 +1074,7 @@ func parseHunks(curFile *DiffFile, maxLines, maxLineCharacters int, input *bufio
 			diffLine := &DiffLine{Type: DiffLinePlain, LeftIdx: leftLine, RightIdx: rightLine}
 			leftLine++
 			rightLine++
+			lastLeftIdx = -1
 			if curSection == nil {
 				// Create a new section to represent this hunk
 				curSection = &DiffSection{}

templates/repo/diff/box.tmpl

@@ -154,33 +154,5 @@
 		{{end}}
 
 		{{template "repo/issue/view_content/reference_issue_dialog" .}}
-
-		{{if .IsSplitStyle}}
-			<script>
-				document.addEventListener('DOMContentLoaded', () => {
-					$('tr.add-code').each(function() {
-						let prev = $(this).prev();
-						if (prev.is('.del-code') && prev.children().eq(5).text().trim() === '') {
-							while (prev.prev().is('.del-code') && prev.prev().children().eq(5).text().trim() === '') {
-								prev = prev.prev();
-							}
-							prev.children().eq(3).attr('data-line-num', $(this).children().eq(3).attr('data-line-num'));
-							prev.children().eq(3).html($(this).children().eq(3).html());
-							prev.children().eq(4).html($(this).children().eq(4).html());
-							prev.children().eq(5).html($(this).children().eq(5).html());
-
-							prev.children().eq(0).addClass('del-code');
-							prev.children().eq(1).addClass('del-code');
-							prev.children().eq(2).addClass('del-code');
-							prev.children().eq(3).addClass('add-code');
-							prev.children().eq(4).addClass('add-code');
-							prev.children().eq(5).addClass('add-code');
-
-							$(this).remove();
-						}
-					});
-				});
-			</script>
-		{{end}}
 	</div>
 {{end}}

templates/repo/diff/section_split.tmpl

@@ -1,6 +1,8 @@
 {{$file := .file}}
 {{range $j, $section := $file.Sections}}
 	{{range $k, $line := $section.Lines}}
+		{{$hasmatch := ne $line.Match -1}}
+		{{if or (ne .GetType 2) (not $hasmatch)}}
 			<tr class="{{DiffLineTypeToStr .GetType}}-code nl-{{$k}} ol-{{$k}}" data-line-type="{{DiffLineTypeToStr .GetType}}">
 				{{if eq .GetType 4}}
 					<td class="lines-num lines-num-old">
@@ -21,6 +23,14 @@
 						{{end}}
 					</td>
 					<td colspan="5" class="lines-code lines-code-old "><code class="code-inner">{{$section.GetComputedInlineDiffFor $line}}</span></td>
+				{{else if and (eq .GetType 3) $hasmatch}}{{/* DEL */}}
+					{{$match := index $section.Lines $line.Match}}
+					<td class="lines-num lines-num-old del-code" data-line-num="{{$line.LeftIdx}}"><span rel="diff-{{Sha1 $file.Name}}L{{$line.LeftIdx}}"></span></td>
+					<td class="lines-type-marker lines-type-marker-old del-code"><span class="mono" data-type-marker="{{$line.GetLineTypeMarker}}"></span></td>
+					<td class="lines-code lines-code-old halfwidth del-code">{{if and $.root.SignedUserID $.root.PageIsPullFiles}}<a class="ui primary button add-code-comment add-code-comment-left{{if (not $line.CanComment)}} invisible{{end}}" data-path="{{$file.Name}}" data-side="left" data-idx="{{$line.LeftIdx}}" data-new-comment-url="{{$.root.Issue.HTMLURL}}/files/reviews/new_comment">{{svg "octicon-plus"}}</a>{{end}}<code class="code-inner">{{if $line.LeftIdx}}{{$section.GetComputedInlineDiffFor $line}}{{end}}</code></td>
+					<td class="lines-num lines-num-new add-code" data-line-num="{{if $match.RightIdx}}{{$match.RightIdx}}{{end}}"><span rel="{{if $match.RightIdx}}diff-{{Sha1 $file.Name}}R{{$match.RightIdx}}{{end}}"></span></td>
+					<td class="lines-type-marker lines-type-marker-new add-code">{{if $match.RightIdx}}<span class="mono" data-type-marker="{{$match.GetLineTypeMarker}}"></span>{{end}}</td>
+					<td class="lines-code lines-code-new halfwidth add-code">{{if and $.root.SignedUserID $.root.PageIsPullFiles}}<a class="ui primary button add-code-comment add-code-comment-right{{if (not $match.CanComment)}} invisible{{end}}" data-path="{{$file.Name}}" data-side="right" data-idx="{{$match.RightIdx}}" data-new-comment-url="{{$.root.Issue.HTMLURL}}/files/reviews/new_comment">{{svg "octicon-plus"}}</a>{{end}}<code class="code-inner">{{if $match.RightIdx}}{{$section.GetComputedInlineDiffFor $match}}{{end}}</code></td>
 				{{else}}
 					<td class="lines-num lines-num-old" data-line-num="{{if $line.LeftIdx}}{{$line.LeftIdx}}{{end}}"><span rel="{{if $line.LeftIdx}}diff-{{Sha1 $file.Name}}L{{$line.LeftIdx}}{{end}}"></span></td>
 					<td class="lines-type-marker lines-type-marker-old">{{if $line.LeftIdx}}<span class="mono" data-type-marker="{{$line.GetLineTypeMarker}}"></span>{{end}}</td>
@@ -30,14 +40,48 @@
 					<td class="lines-code lines-code-new halfwidth">{{if and $.root.SignedUserID $.root.PageIsPullFiles (not (eq .GetType 3))}}<a class="ui primary button add-code-comment add-code-comment-right{{if (not $line.CanComment)}} invisible{{end}}" data-path="{{$file.Name}}" data-side="right" data-idx="{{$line.RightIdx}}" data-new-comment-url="{{$.root.Issue.HTMLURL}}/files/reviews/new_comment">{{svg "octicon-plus"}}</a>{{end}}<code class="code-inner">{{if $line.RightIdx}}{{$section.GetComputedInlineDiffFor $line}}{{end}}</code></td>
 				{{end}}
 			</tr>
-		{{if gt (len $line.Comments) 0}}
+			{{if and (eq .GetType 3) $hasmatch}}
+				{{$match := index $section.Lines $line.Match}}
+				{{if or (gt (len $line.Comments) 0) (gt (len $match.Comments) 0)}}
 					<tr class="add-comment" data-line-type="{{DiffLineTypeToStr .GetType}}">
 						<td class="lines-num"></td>
 						<td class="lines-type-marker"></td>
 						<td class="add-comment-left">
+							{{if gt (len $line.Comments) 0}}
 								{{if eq $line.GetCommentSide "previous"}}
 									{{template "repo/diff/conversation" mergeinto $.root "comments" $line.Comments}}
 								{{end}}
+							{{end}}
+							{{if gt (len $match.Comments) 0}}
+								{{if eq $match.GetCommentSide "previous"}}
+									{{template "repo/diff/conversation" mergeinto $.root "comments" $match.Comments}}
+								{{end}}
+							{{end}}
+						</td>
+						<td class="lines-num"></td>
+						<td class="lines-type-marker"></td>
+						<td class="add-comment-right">
+							{{if eq $line.GetCommentSide "proposed"}}
+								{{template "repo/diff/conversation" mergeinto $.root "comments" $line.Comments}}
+							{{end}}
+							{{if gt (len $match.Comments) 0}}
+								{{if eq $match.GetCommentSide "proposed"}}
+									{{template "repo/diff/conversation" mergeinto $.root "comments" $match.Comments}}
+								{{end}}
+							{{end}}
+						</td>
+					</tr>
+				{{end}}
+			{{else if gt (len $line.Comments) 0}}
+				<tr class="add-comment" data-line-type="{{DiffLineTypeToStr .GetType}}">
+					<td class="lines-num"></td>
+					<td class="lines-type-marker"></td>
+					<td class="add-comment-left">
+						{{if gt (len $line.Comments) 0}}
+							{{if eq $line.GetCommentSide "previous"}}
+								{{template "repo/diff/conversation" mergeinto $.root "comments" $line.Comments}}
+							{{end}}
+						{{end}}
 					</td>
 					<td class="lines-num"></td>
 					<td class="lines-type-marker"></td>
@@ -49,4 +93,5 @@
 				</tr>
 			{{end}}
 		{{end}}
+	{{end}}
 {{end}}