Skip to content

Commit 5908bb1

Browse files
zeripathzeripath
authored
Make diff line-marker non-selectable (#7279)
* Make diff line-marker non-selectable * Move to use data-* as per @mrsdizzie * fix missing line nums * Add a minimum-width to force right-align of the line num * Move line-type-marker into separate column
1 parent e07ff2f commit 5908bb1

File tree

6 files changed

+70
-32
lines changed

6 files changed

+70
-32
lines changed

‎models/git_diff.go‎

Lines changed: 16 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -80,29 +80,29 @@ func (d *DiffLine) GetCommentSide() string {
8080
return d.Comments[0].DiffSide()
8181
}
8282

83+
// GetLineTypeMarker returns the line type marker
84+
func (d *DiffLine) GetLineTypeMarker() string {
85+
if strings.IndexByte(" +-", d.Content[0]) > -1 {
86+
return d.Content[0:1]
87+
}
88+
return ""
89+
}
90+
8391
// DiffSection represents a section of a DiffFile.
8492
type DiffSection struct {
8593
Name string
8694
Lines []*DiffLine
8795
}
8896

8997
var (
90-
addedCodePrefix = []byte("<span class=\"added-code\">")
91-
removedCodePrefix = []byte("<span class=\"removed-code\">")
92-
codeTagSuffix = []byte("</span>")
98+
addedCodePrefix = []byte(`<span class="added-code">`)
99+
removedCodePrefix = []byte(`<span class="removed-code">`)
100+
codeTagSuffix = []byte(`</span>`)
93101
)
94102

95103
func diffToHTML(diffs []diffmatchpatch.Diff, lineType DiffLineType) template.HTML {
96104
buf := bytes.NewBuffer(nil)
97105

98-
// Reproduce signs which are cut for inline diff before.
99-
switch lineType {
100-
case DiffLineAdd:
101-
buf.WriteByte('+')
102-
case DiffLineDel:
103-
buf.WriteByte('-')
104-
}
105-
106106
for i := range diffs {
107107
switch {
108108
case diffs[i].Type == diffmatchpatch.DiffInsert && lineType == DiffLineAdd:
@@ -186,18 +186,21 @@ func (diffSection *DiffSection) GetComputedInlineDiffFor(diffLine *DiffLine) tem
186186
case DiffLineAdd:
187187
compareDiffLine = diffSection.GetLine(DiffLineDel, diffLine.RightIdx)
188188
if compareDiffLine == nil {
189-
return template.HTML(html.EscapeString(diffLine.Content))
189+
return template.HTML(html.EscapeString(diffLine.Content[1:]))
190190
}
191191
diff1 = compareDiffLine.Content
192192
diff2 = diffLine.Content
193193
case DiffLineDel:
194194
compareDiffLine = diffSection.GetLine(DiffLineAdd, diffLine.LeftIdx)
195195
if compareDiffLine == nil {
196-
return template.HTML(html.EscapeString(diffLine.Content))
196+
return template.HTML(html.EscapeString(diffLine.Content[1:]))
197197
}
198198
diff1 = diffLine.Content
199199
diff2 = compareDiffLine.Content
200200
default:
201+
if strings.IndexByte(" +-", diffLine.Content[0]) > -1 {
202+
return template.HTML(html.EscapeString(diffLine.Content[1:]))
203+
}
201204
return template.HTML(html.EscapeString(diffLine.Content))
202205
}
203206

‎models/git_diff_test.go‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -18,14 +18,14 @@ func assertEqual(t *testing.T, s1 string, s2 template.HTML) {
1818
}
1919

2020
func TestDiffToHTML(t *testing.T) {
21-
assertEqual(t, "+foo <span class=\"added-code\">bar</span> biz", diffToHTML([]dmp.Diff{
21+
assertEqual(t, "foo <span class=\"added-code\">bar</span> biz", diffToHTML([]dmp.Diff{
2222
{Type: dmp.DiffEqual, Text: "foo "},
2323
{Type: dmp.DiffInsert, Text: "bar"},
2424
{Type: dmp.DiffDelete, Text: " baz"},
2525
{Type: dmp.DiffEqual, Text: " biz"},
2626
}, DiffLineAdd))
2727

28-
assertEqual(t, "-foo <span class=\"removed-code\">bar</span> biz", diffToHTML([]dmp.Diff{
28+
assertEqual(t, "foo <span class=\"removed-code\">bar</span> biz", diffToHTML([]dmp.Diff{
2929
{Type: dmp.DiffEqual, Text: "foo "},
3030
{Type: dmp.DiffDelete, Text: "bar"},
3131
{Type: dmp.DiffInsert, Text: " baz"},

‎public/css/index.css‎

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -633,7 +633,7 @@ footer .ui.left,footer .ui.right{line-height:40px}
633633
.repository .diff-box .header .file{flex:1;color:#888;word-break:break-all}
634634
.repository .diff-box .header .button{margin:-5px 0 -5px 12px;padding:8px 10px;flex:0 0 auto}
635635
.repository .diff-file-box .header{background-color:#f7f7f7}
636-
.repository .diff-file-box .file-body.file-code .lines-num{text-align:right;color:#a6a6a6;background:#fafafa;width:1%;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;vertical-align:top}
636+
.repository .diff-file-box .file-body.file-code .lines-num{text-align:right;color:#a6a6a6;background:#fafafa;width:1%;min-width:50px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;vertical-align:top}
637637
.repository .diff-file-box .file-body.file-code .lines-num span.fold{display:block;text-align:center}
638638
.repository .diff-file-box .file-body.file-code .lines-num-old{border-right:1px solid #ddd}
639639
.repository .diff-file-box .code-diff{font-size:12px}
@@ -644,13 +644,16 @@ footer .ui.left,footer .ui.right{line-height:40px}
644644
.repository .diff-file-box .code-diff tbody tr td.tag-code,.repository .diff-file-box .code-diff tbody tr.tag-code td{background-color:#f0f0f0!important;border-color:#d3cfcf!important;padding-top:8px;padding-bottom:8px}
645645
.repository .diff-file-box .code-diff tbody tr .removed-code{background-color:#f99}
646646
.repository .diff-file-box .code-diff tbody tr .added-code{background-color:#9f9}
647+
.repository .diff-file-box .code-diff tbody tr .lines-num[data-line-num]::before{content:attr(data-line-num);text-align:right}
648+
.repository .diff-file-box .code-diff tbody tr .lines-type-marker{width:10px;min-width:10px}
649+
.repository .diff-file-box .code-diff tbody tr .line-type-marker[data-type-marker]::before{content:attr(data-type-marker);text-align:right;display:inline-block}
647650
.repository .diff-file-box .code-diff-unified tbody tr.del-code td{background-color:#ffe0e0!important;border-color:#f1c0c0!important}
648651
.repository .diff-file-box .code-diff-unified tbody tr.add-code td{background-color:#d6fcd6!important;border-color:#c1e9c1!important}
649652
.repository .diff-file-box .code-diff-split table,.repository .diff-file-box .code-diff-split tbody{width:100%}
650-
.repository .diff-file-box .code-diff-split tbody tr.add-code td:nth-child(1),.repository .diff-file-box .code-diff-split tbody tr.add-code td:nth-child(2),.repository .diff-file-box .code-diff-split tbody tr.del-code td:nth-child(3),.repository .diff-file-box .code-diff-split tbody tr.del-code td:nth-child(4){background-color:#fafafa}
651-
.repository .diff-file-box .code-diff-split tbody tr td.del-code,.repository .diff-file-box .code-diff-split tbody tr.del-code td:nth-child(1),.repository .diff-file-box .code-diff-split tbody tr.del-code td:nth-child(2){background-color:#ffe0e0!important;border-color:#f1c0c0!important}
652-
.repository .diff-file-box .code-diff-split tbody tr td.add-code,.repository .diff-file-box .code-diff-split tbody tr.add-code td:nth-child(3),.repository .diff-file-box .code-diff-split tbody tr.add-code td:nth-child(4){background-color:#d6fcd6!important;border-color:#c1e9c1!important}
653-
.repository .diff-file-box .code-diff-split tbody tr td:nth-child(3){border-left-width:1px;border-left-style:solid}
653+
.repository .diff-file-box .code-diff-split tbody tr.add-code td:nth-child(1),.repository .diff-file-box .code-diff-split tbody tr.add-code td:nth-child(2),.repository .diff-file-box .code-diff-split tbody tr.del-code td:nth-child(3),.repository .diff-file-box .code-diff-split tbody tr.del-code td:nth-child(4),.repository .diff-file-box .code-diff-split tbody tr.del-code td:nth-child(5),.repository .diff-file-box .code-diff-split tbody tr.del-code td:nth-child(6){background-color:#fafafa}
654+
.repository .diff-file-box .code-diff-split tbody tr td.del-code,.repository .diff-file-box .code-diff-split tbody tr.del-code td:nth-child(1),.repository .diff-file-box .code-diff-split tbody tr.del-code td:nth-child(2),.repository .diff-file-box .code-diff-split tbody tr.del-code td:nth-child(3){background-color:#ffe0e0!important;border-color:#f1c0c0!important}
655+
.repository .diff-file-box .code-diff-split tbody tr td.add-code,.repository .diff-file-box .code-diff-split tbody tr.add-code td:nth-child(4),.repository .diff-file-box .code-diff-split tbody tr.add-code td:nth-child(5),.repository .diff-file-box .code-diff-split tbody tr.add-code td:nth-child(6){background-color:#d6fcd6!important;border-color:#c1e9c1!important}
656+
.repository .diff-file-box .code-diff-split tbody tr td:nth-child(4){border-left-width:1px;border-left-style:solid}
654657
.repository .diff-file-box.file-content{clear:right}
655658
.repository .diff-file-box.file-content img{max-width:100%;padding:5px 5px 0 5px}
656659
.repository .code-view{overflow:auto;overflow-x:auto;overflow-y:hidden}

‎public/less/_repository.less‎

Lines changed: 24 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1339,6 +1339,7 @@
13391339
color: #a6a6a6;
13401340
background: #fafafa;
13411341
width: 1%;
1342+
min-width: 50px;
13421343
user-select: none;
13431344
vertical-align: top;
13441345

@@ -1403,6 +1404,22 @@
14031404
.added-code {
14041405
background-color: #99ff99;
14051406
}
1407+
1408+
.lines-num[data-line-num]::before {
1409+
content: attr(data-line-num);
1410+
text-align: right;
1411+
}
1412+
1413+
.lines-type-marker {
1414+
width: 10px;
1415+
min-width: 10px;
1416+
}
1417+
1418+
.line-type-marker[data-type-marker]::before {
1419+
content: attr(data-type-marker);
1420+
text-align: right;
1421+
display: inline-block;
1422+
}
14061423
}
14071424
}
14081425
}
@@ -1432,25 +1449,29 @@
14321449
&.add-code td:nth-child(1),
14331450
&.add-code td:nth-child(2),
14341451
&.del-code td:nth-child(3),
1435-
&.del-code td:nth-child(4) {
1452+
&.del-code td:nth-child(4),
1453+
&.del-code td:nth-child(5),
1454+
&.del-code td:nth-child(6) {
14361455
background-color: #fafafa;
14371456
}
14381457

14391458
&.del-code td:nth-child(1),
14401459
&.del-code td:nth-child(2),
1460+
&.del-code td:nth-child(3),
14411461
td.del-code {
14421462
background-color: #ffe0e0 !important;
14431463
border-color: #f1c0c0 !important;
14441464
}
14451465

1446-
&.add-code td:nth-child(3),
14471466
&.add-code td:nth-child(4),
1467+
&.add-code td:nth-child(5),
1468+
&.add-code td:nth-child(6),
14481469
td.add-code {
14491470
background-color: #d6fcd6 !important;
14501471
border-color: #c1e9c1 !important;
14511472
}
14521473

1453-
td:nth-child(3) {
1474+
td:nth-child(4) {
14541475
border-left-width: 1px;
14551476
border-left-style: solid;
14561477
}

‎templates/repo/diff/box.tmpl‎

Lines changed: 12 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -120,19 +120,24 @@
120120
{{range $j, $section := $file.Sections}}
121121
{{range $k, $line := $section.Lines}}
122122
<tr class="{{DiffLineTypeToStr .GetType}}-code nl-{{$k}} ol-{{$k}}">
123-
<td class="lines-num lines-num-old">
124-
<span rel="{{if $line.LeftIdx}}diff-{{Sha1 $file.Name}}L{{$line.LeftIdx}}{{end}}">{{if $line.LeftIdx}}{{$line.LeftIdx}}{{end}}</span>
123+
<td class="lines-num lines-num-old" data-line-num="{{if $line.LeftIdx}}{{$line.LeftIdx}}{{end}}">
124+
<span rel="{{if $line.LeftIdx}}diff-{{Sha1 $file.Name}}L{{$line.LeftIdx}}{{end}}"></span>
125+
</td>
126+
<td class="lines-type-marker">
127+
<pre>{{if $line.LeftIdx}}<span class="line-type-marker" data-type-marker="{{$line.GetLineTypeMarker}}"></span>{{end}}</pre>
125128
</td>
126129
<td class="lines-code lines-code-old halfwidth">
127130
{{if and $.SignedUserID $line.CanComment $.PageIsPullFiles (not (eq .GetType 2))}}
128131
<a class="ui green button add-code-comment add-code-comment-left" data-path="{{$file.Name}}" data-side="left" data-idx="{{$line.LeftIdx}}">+</a>
129132
{{end}}
130133
<pre><code class="wrap {{if $highlightClass}}language-{{$highlightClass}}{{else}}nohighlight{{end}}">{{if $line.LeftIdx}}{{$section.GetComputedInlineDiffFor $line}}{{end}}</code></pre>
131134
</td>
132-
<td class="lines-num lines-num-new">
133-
<span rel="{{if $line.RightIdx}}diff-{{Sha1 $file.Name}}R{{$line.RightIdx}}{{end}}">{{if $line.RightIdx}}{{$line.RightIdx}}{{end}}</span>
135+
<td class="lines-num lines-num-new" data-line-num="{{if $line.RightIdx}}{{$line.RightIdx}}{{end}}">
136+
<span rel="{{if $line.RightIdx}}diff-{{Sha1 $file.Name}}R{{$line.RightIdx}}{{end}}"></span>
137+
</td>
138+
<td class="lines-type-marker">
139+
<pre>{{if $line.RightIdx}}<span class="line-type-marker" data-type-marker="{{$line.GetLineTypeMarker}}"></span>{{end}}</pre>
134140
</td>
135-
136141
<td class="lines-code lines-code-new halfwidth">
137142
{{if and $.SignedUserID $line.CanComment $.PageIsPullFiles (not (eq .GetType 3))}}
138143
<a class="ui green button add-code-comment add-code-comment-right" data-path="{{$file.Name}}" data-side="right" data-idx="{{$line.RightIdx}}">+</a>
@@ -143,6 +148,7 @@
143148
{{if gt (len $line.Comments) 0}}
144149
<tr class="add-code-comment">
145150
<td class="lines-num"></td>
151+
<td class="lines-type-marker"></td>
146152
<td class="add-comment-left">
147153
{{if eq $line.GetCommentSide "previous"}}
148154
<div class="field comment-code-cloud">
@@ -156,6 +162,7 @@
156162
{{end}}
157163
</td>
158164
<td class="lines-num"></td>
165+
<td class="lines-type-marker"></td>
159166
<td class="add-comment-right">
160167
{{if eq $line.GetCommentSide "proposed"}}
161168
<div class="field comment-code-cloud">

‎templates/repo/diff/section_unified.tmpl‎

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -8,13 +8,16 @@
88
{{/* {{if gt $j 0}}<span class="fold octicon octicon-fold"></span>{{end}} */}}
99
</td>
1010
{{else}}
11-
<td class="lines-num lines-num-old">
12-
<span rel="{{if $line.LeftIdx}}diff-{{Sha1 $file.Name}}L{{$line.LeftIdx}}{{end}}">{{if $line.LeftIdx}}{{$line.LeftIdx}}{{end}}</span>
11+
<td class="lines-num lines-num-old" data-line-num="{{if $line.LeftIdx}}{{$line.LeftIdx}}{{end}}">
12+
<span rel="{{if $line.LeftIdx}}diff-{{Sha1 $file.Name}}L{{$line.LeftIdx}}{{end}}"></span>
1313
</td>
14-
<td class="lines-num lines-num-new">
15-
<span rel="{{if $line.RightIdx}}diff-{{Sha1 $file.Name}}R{{$line.RightIdx}}{{end}}">{{if $line.RightIdx}}{{$line.RightIdx}}{{end}}</span>
14+
<td class="lines-num lines-num-new" data-line-num="{{if $line.RightIdx}}{{$line.RightIdx}}{{end}}">
15+
<span rel="{{if $line.RightIdx}}diff-{{Sha1 $file.Name}}R{{$line.RightIdx}}{{end}}"></span>
1616
</td>
1717
{{end}}
18+
<td class="lines-type-marker">
19+
<pre><span class="line-type-marker" data-type-marker="{{$line.GetLineTypeMarker}}"></span></pre>
20+
</td>
1821
<td class="lines-code {{if (not $line.RightIdx)}}lines-code-old{{end}}">
1922
{{if and $.root.SignedUserID $line.CanComment $.root.PageIsPullFiles}}
2023
<a class="ui green button add-code-comment add-code-comment-{{if $line.RightIdx}}right{{else}}left{{end}}" data-path="{{$file.Name}}" data-side="{{if $line.RightIdx}}right{{else}}left{{end}}" data-idx="{{if $line.RightIdx}}{{$line.RightIdx}}{{else}}{{$line.LeftIdx}}{{end}}">+</a>
@@ -25,6 +28,7 @@
2528
{{if gt (len $line.Comments) 0}}
2629
<tr>
2730
<td colspan="2" class="lines-num"></td>
31+
<td class="lines-type-marker"></td>
2832
<td class="add-comment-left add-comment-right">
2933
<div class="field comment-code-cloud">
3034
<div class="comment-list">

0 commit comments

Comments
 (0)