Add Image Diff for SVG files (#14867)

* Added type sniffer.

* Switched content detection from base to typesniffer.

* Added GuessContentType to Blob.

* Moved image info logic to client.
Added support for SVG images in diff.

* Restore old blocked svg behaviour.

* Added missing image formats.

* Execute image diff only when container is visible.

* add margin to spinner

* improve BIN tag on image diffs

* Default to render view.

* Show image diff on incomplete diff.

Co-authored-by: silverwind <me@silverwind.io>
Co-authored-by: Lunny Xiao <xiaolunwen@gmail.com>
Co-authored-by: Lauris BH <lauris@nix.lv>

2 files changed, 87 insertions, 135 deletions

diff --git a/templates/repo/diff/box.tmpl b/templates/repo/diff/box.tmpl
index d8678c95c6..1ca2dcc4d8 100644
--- a/templates/repo/diff/box.tmpl
+++ b/templates/repo/diff/box.tmpl
@@ -29,10 +29,12 @@
 			{{range .Diff.Files}}
 				<li>
 					<div class="bold df ac pull-right">
-						{{if not .IsBin}}
-							{{template "repo/diff/stats" dict "file" . "root" $}}
+						{{if .IsBin}}
+							<span class="ml-1 mr-3">
+								{{$.i18n.Tr "repo.diff.bin"}}
+							</span>
 						{{else}}
-							<span>{{$.i18n.Tr "repo.diff.bin"}}</span>
+							{{template "repo/diff/stats" dict "file" . "root" $}}
 						{{end}}
 					</div>
 					<!-- todo finish all file status, now modify, add, delete and rename -->
@@ -42,108 +44,84 @@
 			{{end}}
 		</ol>
 		{{range $i, $file := .Diff.Files}}
-			{{if $file.IsIncomplete}}
-				<div class="diff-file-box diff-box file-content mt-3">
-					<h4 class="ui top attached normal header rounded">
+			{{$blobBase := call $.GetBlobByPathForCommit $.BaseCommit $file.OldName}}
+			{{$blobHead := call $.GetBlobByPathForCommit $.HeadCommit $file.Name}}
+			{{$isImage := or (call $.IsBlobAnImage $blobBase) (call $.IsBlobAnImage $blobHead)}}
+			{{$isCsv := (call $.IsCsvFile $file)}}
+			{{$showFileViewToggle := or $isImage (and (not $file.IsIncomplete) $isCsv)}}
+			<div class="diff-file-box diff-box file-content {{TabSizeClass $.Editorconfig $file.Name}} mt-3" id="diff-{{.Index}}">
+				<h4 class="diff-file-header sticky-2nd-row ui top attached normal header df ac sb">
+					<div class="df ac">
 						<a role="button" class="fold-file muted mr-2">
 							{{svg "octicon-chevron-down" 18}}
 						</a>
-						<div class="bold ui left df ac">
-							{{template "repo/diff/stats" dict "file" . "root" $}}
-						</div>
-						<span class="file mono">{{$file.Name}}</span>
-						<div class="diff-file-header-actions df ac">
-							<div class="text grey">
-								{{if $file.IsIncompleteLineTooLong}}
-									{{$.i18n.Tr "repo.diff.file_suppressed_line_too_long"}}
-								{{else}}
-									{{$.i18n.Tr "repo.diff.file_suppressed"}}
-								{{end}}
-							</div>
-							{{if $file.IsProtected}}
-								<span class="ui basic label">{{$.i18n.Tr "repo.diff.protected"}}</span>
-							{{end}}
-							{{if and (not $file.IsSubmodule) (not $.PageIsWiki)}}
-								{{if $file.IsDeleted}}
-									<a class="ui basic tiny button" rel="nofollow" href="{{EscapePound $.BeforeSourcePath}}/{{EscapePound .Name}}">{{$.i18n.Tr "repo.diff.view_file"}}</a>
-								{{else}}
-									<a class="ui basic tiny button" rel="nofollow" href="{{EscapePound $.SourcePath}}/{{EscapePound .Name}}">{{$.i18n.Tr "repo.diff.view_file"}}</a>
-								{{end}}
+						<div class="bold df ac">
+							{{if $file.IsBin}}
+								<span class="ml-1 mr-3">
+									{{$.i18n.Tr "repo.diff.bin"}}
+								</span>
+							{{else}}
+								{{template "repo/diff/stats" dict "file" . "root" $}}
 							{{end}}
 						</div>
-					</h4>
-				</div>
-			{{else}}
-				<div class="diff-file-box diff-box file-content {{TabSizeClass $.Editorconfig $file.Name}} mt-3" id="diff-{{.Index}}">
-					<h4 class="diff-file-header sticky-2nd-row ui top attached normal header df ac sb">
-						<div class="df ac">
-							{{$isImage := false}}
+						<span class="file mono">{{if $file.IsRenamed}}{{$file.OldName}} &rarr; {{end}}{{$file.Name}}{{if .IsLFSFile}} ({{$.i18n.Tr "repo.stored_lfs"}}){{end}}</span>
+					</div>
+					<div class="diff-file-header-actions df ac">
+						{{if $showFileViewToggle}}
+							<div class="ui compact icon buttons">
+								<span class="ui tiny basic button poping up file-view-toggle" data-toggle-selector="#diff-source-{{$i}}" data-content="{{$.i18n.Tr "repo.file_view_source"}}" data-position="bottom center" data-variation="tiny inverted">{{svg "octicon-code"}}</span>
+								<span class="ui tiny basic button poping up file-view-toggle active" data-toggle-selector="#diff-rendered-{{$i}}" data-content="{{$.i18n.Tr "repo.file_view_rendered"}}" data-position="bottom center" data-variation="tiny inverted">{{svg "octicon-file"}}</span>
+							</div>
+						{{end}}
+						{{if $file.IsProtected}}
+							<span class="ui basic label">{{$.i18n.Tr "repo.diff.protected"}}</span>
+						{{end}}
+						{{if and (not $file.IsSubmodule) (not $.PageIsWiki)}}
 							{{if $file.IsDeleted}}
-								{{$isImage = (call $.IsImageFileInBase $file.Name)}}
+								<a class="ui basic tiny button" rel="nofollow" href="{{EscapePound $.BeforeSourcePath}}/{{EscapePound .Name}}">{{$.i18n.Tr "repo.diff.view_file"}}</a>
 							{{else}}
-								{{$isImage = (call $.IsImageFileInHead $file.Name)}}
+								<a class="ui basic tiny button" rel="nofollow" href="{{EscapePound $.SourcePath}}/{{EscapePound .Name}}">{{$.i18n.Tr "repo.diff.view_file"}}</a>
 							{{end}}
-							{{$isCsv := (call $.IsCsvFile $file)}}
-							{{$showFileViewToggle := or $isImage $isCsv}}
-							<a role="button" class="fold-file muted mr-2">
-								{{svg "octicon-chevron-down" 18}}
-							</a>
-							<div class="bold df ac">
-								{{if $file.IsBin}}
-									{{$.i18n.Tr "repo.diff.bin"}}
+						{{end}}
+					</div>
+				</h4>
+				<div class="diff-file-body ui attached unstackable table segment">
+					<div id="diff-source-{{$i}}" class="file-body file-code code-diff{{if $.IsSplitStyle}} code-diff-split{{else}} code-diff-unified{{end}}{{if $showFileViewToggle}} hide{{end}}">
+						{{if or $file.IsIncomplete $file.IsBin}}
+							<div class="diff-file-body binary" style="padding: 5px 10px;">
+								{{if $file.IsIncomplete}}
+									{{if $file.IsIncompleteLineTooLong}}
+										{{$.i18n.Tr "repo.diff.file_suppressed_line_too_long"}}
+									{{else}}
+										{{$.i18n.Tr "repo.diff.file_suppressed"}}
+									{{end}}
 								{{else}}
-									{{template "repo/diff/stats" dict "file" . "root" $}}
+									{{$.i18n.Tr "repo.diff.bin_not_shown"}}
 								{{end}}
 							</div>
-							<span class="file mono">{{if $file.IsRenamed}}{{$file.OldName}} &rarr; {{end}}{{$file.Name}}{{if .IsLFSFile}} ({{$.i18n.Tr "repo.stored_lfs"}}){{end}}</span>
-						</div>
-						<div class="diff-file-header-actions df ac">
-							{{if $showFileViewToggle}}
-								<div class="ui compact icon buttons">
-									<span class="ui tiny basic button poping up active file-view-toggle" data-toggle-selector="#diff-source-{{$i}}" data-content="{{$.i18n.Tr "repo.file_view_source"}}" data-position="bottom center" data-variation="tiny inverted">{{svg "octicon-code"}}</span>
-									<span class="ui tiny basic button poping up file-view-toggle" data-toggle-selector="#diff-rendered-{{$i}}" data-content="{{$.i18n.Tr "repo.file_view_rendered"}}" data-position="bottom center" data-variation="tiny inverted">{{svg "octicon-file"}}</span>
-								</div>
-							{{end}}
-							{{if $file.IsProtected}}
-								<span class="ui basic label">{{$.i18n.Tr "repo.diff.protected"}}</span>
-							{{end}}
-							{{if and (not $file.IsSubmodule) (not $.PageIsWiki)}}
-								{{if $file.IsDeleted}}
-									<a class="ui basic tiny button" rel="nofollow" href="{{EscapePound $.BeforeSourcePath}}/{{EscapePound .Name}}">{{$.i18n.Tr "repo.diff.view_file"}}</a>
+						{{else}}
+							<table class="chroma">
+								{{if $.IsSplitStyle}}
+									{{template "repo/diff/section_split" dict "file" . "root" $}}
 								{{else}}
-									<a class="ui basic tiny button" rel="nofollow" href="{{EscapePound $.SourcePath}}/{{EscapePound .Name}}">{{$.i18n.Tr "repo.diff.view_file"}}</a>
+									{{template "repo/diff/section_unified" dict "file" . "root" $}}
 								{{end}}
-							{{end}}
-						</div>
-					</h4>
-					<div class="diff-file-body ui attached unstackable table segment">
-						<div id="diff-source-{{$i}}" class="file-body file-code code-diff{{if $.IsSplitStyle}} code-diff-split{{else}} code-diff-unified{{end}}">
-							{{if $file.IsBin}}
-								<div class="diff-file-body binary" style="padding: 5px 10px;">{{$.i18n.Tr "repo.diff.bin_not_shown"}}</div>
-							{{else}}
-								<table class="chroma">
-									{{if $.IsSplitStyle}}
-										{{template "repo/diff/section_split" dict "file" . "root" $}}
-									{{else}}
-										{{template "repo/diff/section_unified" dict "file" . "root" $}}
-									{{end}}
-								</table>
-							{{end}}
-						</div>
-						{{if or $isImage $isCsv}}
-							<div id="diff-rendered-{{$i}}" class="file-body file-code {{if $.IsSplitStyle}} code-diff-split{{else}} code-diff-unified{{end}} hide">
-								<table class="chroma w-100">
-									{{if $isImage}}
-										{{template "repo/diff/image_diff" dict "file" . "root" $}}
-									{{else}}
-										{{template "repo/diff/csv_diff" dict "file" . "root" $}}
-									{{end}}
-								</table>
-							</div>
+							</table>
 						{{end}}
 					</div>
+					{{if $showFileViewToggle}}
+						<div id="diff-rendered-{{$i}}" class="file-body file-code {{if $.IsSplitStyle}} code-diff-split{{else}} code-diff-unified{{end}}">
+							<table class="chroma w-100">
+								{{if $isImage}}
+									{{template "repo/diff/image_diff" dict "file" . "root" $ "blobBase" $blobBase "blobHead" $blobHead}}
+								{{else}}
+									{{template "repo/diff/csv_diff" dict "file" . "root" $}}
+								{{end}}
+							</table>
+						</div>
+					{{end}}
 				</div>
-			{{end}}
+			</div>
 		{{end}}
 
 		{{if .Diff.IsIncomplete}}
diff --git a/templates/repo/diff/image_diff.tmpl b/templates/repo/diff/image_diff.tmpl
index 91092c412f..33fa8c9e2c 100644
--- a/templates/repo/diff/image_diff.tmpl
+++ b/templates/repo/diff/image_diff.tmpl
@@ -1,15 +1,13 @@
 {{ $imagePathOld := printf "%s/%s" .root.BeforeRawPath (EscapePound .file.OldName)  }}
 {{ $imagePathNew := printf "%s/%s" .root.RawPath (EscapePound .file.Name)  }}
-{{ $imageInfoBase := (call .root.ImageInfoBase .file.OldName) }}
-{{ $imageInfoHead := (call .root.ImageInfo .file.Name) }}
-{{if or $imageInfoBase $imageInfoHead}}
+{{if or .blobBase .blobHead}}
 <tr>
 	<td colspan="2">
 		<div class="image-diff" data-path-before="{{$imagePathOld}}" data-path-after="{{$imagePathNew}}">
 			<div class="ui secondary pointing tabular top attached borderless menu stackable new-menu">
 				<div class="new-menu-inner">
 					<a class="item active" data-tab="diff-side-by-side">{{.root.i18n.Tr "repo.diff.image.side_by_side"}}</a>
-					{{if and $imageInfoBase $imageInfoHead}}
+					{{if and .blobBase .blobHead}}
 					<a class="item" data-tab="diff-swipe">{{.root.i18n.Tr "repo.diff.image.swipe"}}</a>
 					<a class="item" data-tab="diff-overlay">{{.root.i18n.Tr "repo.diff.image.overlay"}}</a>
 					{{end}}
@@ -18,63 +16,39 @@
 			<div class="hide">
 				<div class="ui bottom attached tab image-diff-container active" data-tab="diff-side-by-side">
 					<div class="diff-side-by-side">
-						{{if $imageInfoBase }}
+						{{if .blobBase }}
 						<span class="side">
 							<p class="side-header">{{.root.i18n.Tr "repo.diff.file_before"}}</p>
 							<span class="before-container"><img class="image-before" /></span>
 							<p>
-								{{ $classWidth := "" }}
-								{{ $classHeight := "" }}
-								{{ $classByteSize := "" }}
-								{{if $imageInfoHead}}
-									{{if not (eq $imageInfoBase.Width $imageInfoHead.Width)}}
-										{{ $classWidth = "red" }}
-									{{end}}
-									{{if not (eq $imageInfoBase.Height $imageInfoHead.Height)}}
-										{{ $classHeight = "red" }}
-									{{end}}
-									{{if not (eq $imageInfoBase.ByteSize $imageInfoHead.ByteSize)}}
-										{{ $classByteSize = "red" }}
-									{{end}}
-								{{end}}
-								{{.root.i18n.Tr "repo.diff.file_image_width"}}: <span class="text {{$classWidth}}">{{$imageInfoBase.Width}}</span>
-								&nbsp;|&nbsp;
-								{{.root.i18n.Tr "repo.diff.file_image_height"}}: <span class="text {{$classHeight}}">{{$imageInfoBase.Height}}</span>
-								&nbsp;|&nbsp;
-								{{.root.i18n.Tr "repo.diff.file_byte_size"}}: <span class="text {{$classByteSize}}">{{FileSize $imageInfoBase.ByteSize}}</span>
+								<span class="bounds-info-before">
+									{{.root.i18n.Tr "repo.diff.file_image_width"}}: <span class="text bounds-info-width"></span>
+									&nbsp;|&nbsp;
+									{{.root.i18n.Tr "repo.diff.file_image_height"}}: <span class="text bounds-info-height"></span>
+									&nbsp;|&nbsp;
+								</span>
+								{{.root.i18n.Tr "repo.diff.file_byte_size"}}: <span class="text">{{FileSize .blobBase.Size}}</span>
 							</p>
 						</span>
 						{{end}}
-						{{if $imageInfoHead }}
+						{{if .blobHead }}
 						<span class="side">
 							<p class="side-header">{{.root.i18n.Tr "repo.diff.file_after"}}</p>
 							<span class="after-container"><img class="image-after" /></span>
 							<p>
-								{{ $classWidth := "" }}
-								{{ $classHeight := "" }}
-								{{ $classByteSize := "" }}
-								{{if $imageInfoBase}}
-									{{if not (eq $imageInfoBase.Width $imageInfoHead.Width)}}
-										{{ $classWidth = "green" }}
-									{{end}}
-									{{if not (eq $imageInfoBase.Height $imageInfoHead.Height)}}
-										{{ $classHeight = "green" }}
-									{{end}}
-									{{if not (eq $imageInfoBase.ByteSize $imageInfoHead.ByteSize)}}
-										{{ $classByteSize = "green" }}
-									{{end}}
-								{{end}}
-								{{.root.i18n.Tr "repo.diff.file_image_width"}}: <span class="text {{$classWidth}}">{{$imageInfoHead.Width}}</span>
-								&nbsp;|&nbsp;
-								{{.root.i18n.Tr "repo.diff.file_image_height"}}: <span class="text {{$classHeight}}">{{$imageInfoHead.Height}}</span>
-								&nbsp;|&nbsp;
-								{{.root.i18n.Tr "repo.diff.file_byte_size"}}: <span class="text {{$classByteSize}}">{{FileSize $imageInfoHead.ByteSize}}</span>
+								<span class="bounds-info-after">
+									{{.root.i18n.Tr "repo.diff.file_image_width"}}: <span class="text bounds-info-width"></span>
+									&nbsp;|&nbsp;
+									{{.root.i18n.Tr "repo.diff.file_image_height"}}: <span class="text bounds-info-height"></span>
+									&nbsp;|&nbsp;
+								</span>
+								{{.root.i18n.Tr "repo.diff.file_byte_size"}}: <span class="text">{{FileSize .blobHead.Size}}</span>
 							</p>
 						</span>
 						{{end}}
 					</div>
 				</div>
-				{{if and $imageInfoBase $imageInfoHead}}
+				{{if and .blobBase .blobHead}}
 				<div class="ui bottom attached tab image-diff-container" data-tab="diff-swipe">
 					<div class="diff-swipe">
 						<div class="swipe-frame">
@@ -102,7 +76,7 @@
 				</div>
 				{{end}}
 			</div>
-			<div class="ui active centered inline loader"></div>
+			<div class="ui active centered inline loader mb-4"></div>
 		</div>
 	</td>
 </tr>