Adds side-by-side diff for images

modules/git/commit.go

@@ -10,6 +10,11 @@ import (
 	"bytes"
 	"container/list"
 	"fmt"
+	"image"
+	"image/color"
+	_ "image/gif"  // for processing gif images
+	_ "image/jpeg" // for processing jpeg images
+	_ "image/png"  // for processing png images
 	"io"
 	"net/http"
 	"strconv"
@@ -158,6 +163,43 @@ func (c *Commit) IsImageFile(name string) bool {
 	return isImage
 }
 
+// ImageMetaData represents metadata of an image file
+type ImageMetaData struct {
+	ColorModel color.Model
+	Width      int
+	Height     int
+	ByteSize   int64
+}
+
+// ImageInfo returns information about the dimensions of an image
+func (c *Commit) ImageInfo(name string) (*ImageMetaData, error) {
+	if !c.IsImageFile(name) {
+		return nil, nil
+	}
+
+	blob, err := c.GetBlobByPath(name)
+	if err != nil {
+		return nil, err
+	}
+	reader, err := blob.DataAsync()
+	if err != nil {
+		return nil, err
+	}
+	defer reader.Close()
+	config, _, err := image.DecodeConfig(reader)
+	if err != nil {
+		return nil, err
+	}
+
+	metadata := ImageMetaData{
+		ColorModel: config.ColorModel,
+		Width:      config.Width,
+		Height:     config.Height,
+		ByteSize:   blob.Size(),
+	}
+	return &metadata, nil
+}
+
 // GetCommitByPath return the commit of relative path object.
 func (c *Commit) GetCommitByPath(relpath string) (*Commit, error) {
 	return c.repo.getCommitByPathWithID(c.ID, relpath)

options/locale/locale_en-US.ini

@@ -1333,6 +1333,11 @@ diff.whitespace_ignore_at_eol = Ignore changes in whitespace at EOL
 diff.stats_desc = <strong> %d changed files</strong> with <strong>%d additions</strong> and <strong>%d deletions</strong>
 diff.bin = BIN
 diff.view_file = View File
+diff.file_before = Before
+diff.file_after = After
+diff.file_image_width = Width
+diff.file_image_height = Height
+diff.file_byte_size = File Size
 diff.file_suppressed = File diff suppressed because it is too large
 diff.too_many_files = Some files were not shown because too many files changed in this diff
 diff.comment.placeholder = Leave a comment

public/css/index.css

@@ -136,6 +136,16 @@ code.wrap,pre.wrap{white-space:pre-wrap;word-break:break-all;overflow-wrap:break
 .ui .background.purple{background-color:#6e5494!important}
 .ui .background.yellow{background-color:#fbbf09!important}
 .ui .background.gold{background-color:#a1882b!important}
+.ui .border{border:1px solid}
+.ui .border.red{border-color:#d95c5c!important}
+.ui .border.blue{border-color:#428bca!important}
+.ui .border.black{border-color:#444}
+.ui .border.grey{border-color:#767676!important}
+.ui .border.light.grey{border-color:#888!important}
+.ui .border.green{border-color:#6cc644!important}
+.ui .border.purple{border-color:#6e5494!important}
+.ui .border.yellow{border-color:#fbbd08!important}
+.ui .border.gold{border-color:#a1882b!important}
 .ui .branch-tag-choice{line-height:20px}
 @media only screen and (max-width:767px){.ui.pagination.menu .item.navigation span.navigation_label,.ui.pagination.menu .item:not(.active):not(.navigation){display:none}
 }
@@ -641,6 +651,7 @@ footer .ui.left,footer .ui.right{line-height:40px}
 .repository .diff-file-box .code-diff pre{margin:0}
 .repository .diff-file-box .code-diff .lines-num{border-color:#d4d4d5;border-right-width:1px;border-right-style:solid;padding:0 5px}
 .repository .diff-file-box .code-diff tbody tr td.halfwidth{width:49%}
+.repository .diff-file-box .code-diff tbody tr td.center{text-align:center}
 .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}
 .repository .diff-file-box .code-diff tbody tr .removed-code{background-color:#f99}
 .repository .diff-file-box .code-diff tbody tr .added-code{background-color:#9f9}

public/less/_base.less

@@ -582,6 +582,45 @@ code {
         }
     }
 
+    .border {
+        border: 1px solid;
+        &.red {
+            border-color: #d95c5c !important;
+        }
+
+        &.blue {
+            border-color: #428bca !important;
+        }
+
+        &.black {
+            border-color: #444444;
+        }
+
+        &.grey {
+            border-color: #767676 !important;
+        }
+
+        &.light.grey {
+            border-color: #888888 !important;
+        }
+
+        &.green {
+            border-color: #6cc644 !important;
+        }
+
+        &.purple {
+            border-color: #6e5494 !important;
+        }
+
+        &.yellow {
+            border-color: #fbbd08 !important;
+        }
+
+        &.gold {
+            border-color: #a1882b !important;
+        }
+    }
+
     .branch-tag-choice {
         line-height: 20px;
     }

public/less/_repository.less

@@ -1112,6 +1112,7 @@
         .show-form-container {
             text-align: left;
         }
+
         .choose.branch {
             .octicon {
                 padding-right: 10px;
@@ -1378,6 +1379,10 @@
                         width: 49%;
                     }
 
+                    td.center {
+                        text-align: center;
+                    }
+
                     &.tag-code td,
                     td.tag-code {
                         background-color: #f0f0f0 !important;
@@ -2226,6 +2231,7 @@ tbody.commit-list {
     &.top {
         text-align: left;
     }
+
     .commit-body {
         margin: 0;
     }

routers/repo/commit.go

@@ -239,6 +239,23 @@ func Diff(ctx *context.Context) {
 	ctx.Data["Username"] = userName
 	ctx.Data["Reponame"] = repoName
 	ctx.Data["IsImageFile"] = commit.IsImageFile
+	ctx.Data["ImageInfo"] = func(name string) *git.ImageMetaData {
+		result, err := commit.ImageInfo(name)
+		if err != nil {
+			log.Error("ImageInfo failed: %v", err)
+			return nil
+		}
+		return result
+	}
+	ctx.Data["ImageInfoBase"] = ctx.Data["ImageInfo"]
+	if commit.ParentCount() > 0 {
+		parentCommit, err := ctx.Repo.GitRepo.GetCommit(parents[0])
+		if err != nil {
+			ctx.NotFound("GetParentCommit", err)
+			return
+		}
+		ctx.Data["ImageInfo"] = parentCommit.ImageInfo
+	}
 	ctx.Data["Title"] = commit.Summary() + " · " + base.ShortSha(commitID)
 	ctx.Data["Commit"] = commit
 	ctx.Data["Verification"] = models.ParseCommitWithSignature(commit)
@@ -247,6 +264,7 @@ func Diff(ctx *context.Context) {
 	ctx.Data["Parents"] = parents
 	ctx.Data["DiffNotAvailable"] = diff.NumFiles() == 0
 	ctx.Data["SourcePath"] = setting.AppSubURL + "/" + path.Join(userName, repoName, "src", "commit", commitID)
+	ctx.Data["RawPath"] = setting.AppSubURL + "/" + path.Join(userName, repoName, "raw", "commit", commitID)
 
 	note := &git.Note{}
 	err = git.GetNote(ctx.Repo.GitRepo, commitID, note)
@@ -258,8 +276,8 @@ func Diff(ctx *context.Context) {
 
 	if commit.ParentCount() > 0 {
 		ctx.Data["BeforeSourcePath"] = setting.AppSubURL + "/" + path.Join(userName, repoName, "src", "commit", parents[0])
+		ctx.Data["BeforeRawPath"] = setting.AppSubURL + "/" + path.Join(userName, repoName, "raw", "commit", parents[0])
 	}
-	ctx.Data["RawPath"] = setting.AppSubURL + "/" + path.Join(userName, repoName, "raw", "commit", commitID)
 	ctx.Data["BranchName"], err = commit.GetBranchName()
 	ctx.HTML(200, tplCommitPage)
 }

routers/repo/compare.go

@@ -246,6 +246,26 @@ func PrepareCompareDiff(
 		return false
 	}
 
+	baseGitRepo := ctx.Repo.GitRepo
+	baseCommitID := baseBranch
+	if ctx.Data["BaseIsCommit"] == false {
+		if ctx.Data["BaseIsTag"] == true {
+			baseCommitID, err = baseGitRepo.GetTagCommitID(baseBranch)
+		} else {
+			baseCommitID, err = baseGitRepo.GetBranchCommitID(baseBranch)
+		}
+		if err != nil {
+			ctx.ServerError("GetRefCommitID", err)
+			return false
+		}
+	}
+
+	baseCommit, err := baseGitRepo.GetCommit(baseCommitID)
+	if err != nil {
+		ctx.ServerError("GetCommit", err)
+		return false
+	}
+
 	compareInfo.Commits = models.ValidateCommitsWithEmails(compareInfo.Commits)
 	compareInfo.Commits = models.ParseCommitsWithSignature(compareInfo.Commits)
 	compareInfo.Commits = models.ParseCommitsWithStatus(compareInfo.Commits, headRepo)
@@ -271,11 +291,29 @@ func PrepareCompareDiff(
 	ctx.Data["Username"] = headUser.Name
 	ctx.Data["Reponame"] = headRepo.Name
 	ctx.Data["IsImageFile"] = headCommit.IsImageFile
+	ctx.Data["ImageInfo"] = func(name string) *git.ImageMetaData {
+		result, err := headCommit.ImageInfo(name)
+		if err != nil {
+			log.Error("ImageInfo failed: %v", err)
+			return nil
+		}
+		return result
+	}
+	ctx.Data["ImageInfoBase"] = func(name string) *git.ImageMetaData {
+		result, err := baseCommit.ImageInfo(name)
+		if err != nil {
+			log.Error("ImageInfo failed: %v", err)
+			return nil
+		}
+		return result
+	}
 
 	headTarget := path.Join(headUser.Name, repo.Name)
+	baseTarget := path.Join(ctx.Repo.Owner.Name, ctx.Repo.Repository.Name)
 	ctx.Data["SourcePath"] = setting.AppSubURL + "/" + path.Join(headTarget, "src", "commit", headCommitID)
-	ctx.Data["BeforeSourcePath"] = setting.AppSubURL + "/" + path.Join(headTarget, "src", "commit", compareInfo.MergeBase)
+	ctx.Data["BeforeSourcePath"] = setting.AppSubURL + "/" + path.Join(baseTarget, "src", "commit", compareInfo.MergeBase)
 	ctx.Data["RawPath"] = setting.AppSubURL + "/" + path.Join(headTarget, "raw", "commit", headCommitID)
+	ctx.Data["BeforeRawPath"] = setting.AppSubURL + "/" + path.Join(baseTarget, "raw", "commit", baseCommitID)
 	return false
 }
 

routers/repo/pull.go

@@ -510,16 +510,41 @@ func ViewPullFiles(ctx *context.Context) {
 	ctx.Data["Diff"] = diff
 	ctx.Data["DiffNotAvailable"] = diff.NumFiles() == 0
 
+	baseCommit, err := ctx.Repo.GitRepo.GetCommit(startCommitID)
+	if err != nil {
+		ctx.ServerError("GetCommit", err)
+		return
+	}
 	commit, err := gitRepo.GetCommit(endCommitID)
 	if err != nil {
 		ctx.ServerError("GetCommit", err)
 		return
 	}
 
 	ctx.Data["IsImageFile"] = commit.IsImageFile
+	ctx.Data["ImageInfoBase"] = func(name string) *git.ImageMetaData {
+		result, err := baseCommit.ImageInfo(name)
+		if err != nil {
+			log.Error("ImageInfo failed: %v", err)
+			return nil
+		}
+		return result
+	}
+	ctx.Data["ImageInfo"] = func(name string) *git.ImageMetaData {
+		result, err := commit.ImageInfo(name)
+		if err != nil {
+			log.Error("ImageInfo failed: %v", err)
+			return nil
+		}
+		return result
+	}
+
+	baseTarget := path.Join(ctx.Repo.Owner.Name, ctx.Repo.Repository.Name)
 	ctx.Data["SourcePath"] = setting.AppSubURL + "/" + path.Join(headTarget, "src", "commit", endCommitID)
-	ctx.Data["BeforeSourcePath"] = setting.AppSubURL + "/" + path.Join(headTarget, "src", "commit", startCommitID)
 	ctx.Data["RawPath"] = setting.AppSubURL + "/" + path.Join(headTarget, "raw", "commit", endCommitID)
+	ctx.Data["BeforeSourcePath"] = setting.AppSubURL + "/" + path.Join(baseTarget, "src", "commit", startCommitID)
+	ctx.Data["BeforeRawPath"] = setting.AppSubURL + "/" + path.Join(baseTarget, "raw", "commit", startCommitID)
+
 	ctx.Data["RequireHighlightJS"] = true
 	ctx.Data["RequireTribute"] = true
 	if ctx.Data["Assignees"], err = ctx.Repo.Repository.GetAssignees(); err != nil {

templates/repo/diff/box.tmpl

@@ -107,14 +107,12 @@
 				<div class="ui attached unstackable table segment">
 					{{if ne $file.Type 4}}
 						{{$isImage := (call $.IsImageFile $file.Name)}}
-						{{if and $isImage}}
-							<div class="center">
-								<img src="{{$.RawPath}}/{{EscapePound .Name}}">
-							</div>
-						{{else}}
-							<div class="file-body file-code code-view code-diff {{if $.IsSplitStyle}}code-diff-split{{else}}code-diff-unified{{end}}">
-								<table>
-									<tbody>
+						<div class="file-body file-code code-view code-diff {{if $.IsSplitStyle}}code-diff-split{{else}}code-diff-unified{{end}}">
+							<table>
+								<tbody>
+									{{if $isImage}}
+										{{template "repo/diff/image_diff" dict "file" . "root" $}}
+									{{else}}
 										{{if $.IsSplitStyle}}
 											{{$highlightClass := $file.GetHighlightClass}}
 											{{range $j, $section := $file.Sections}}
@@ -175,10 +173,10 @@
 										{{else}}
 											{{template "repo/diff/section_unified" dict "file" . "root" $}}
 										{{end}}
-									</tbody>
-								</table>
-							</div>
-						{{end}}
+									{{end}}
+								</tbody>
+							</table>
+						</div>
 					{{end}}
 				</div>
 			</div>

templates/repo/diff/image_diff.tmpl

@@ -0,0 +1,43 @@
+{{ $imagePathOld := printf "%s/%s" .root.BeforeRawPath (EscapePound .file.OldName)  }}
+{{ $imagePathNew := printf "%s/%s" .root.RawPath (EscapePound .file.Name)  }}
+
+<tr>
+ 	<th class="halfwidth center">
+ 		{{.root.i18n.Tr "repo.diff.file_before"}}
+ 	</th>
+ 	<th class="halfwidth center">
+ 		{{.root.i18n.Tr "repo.diff.file_after"}}
+ 	</th>
+</tr>
+<tr>
+ 	<td class="halfwidth center">
+ 		<a href="{{$imagePathOld}}" target="_blank">
+ 			<img src="{{$imagePathOld}}" class="border red" />
+ 		</a>
+ 	</td>
+ 	<td class="halfwidth center">
+ 		<a href="{{$imagePathNew}}" target="_blank">
+ 			<img src="{{$imagePathNew}}" class="border green" />
+ 		</a>
+ 	</td>
+</tr>
+{{ $imageInfoBase := (call .root.ImageInfoBase .file.OldName) }}
+{{ $imageInfoHead := (call .root.ImageInfo .file.Name) }}
+{{if and $imageInfoBase $imageInfoHead }}
+<tr>
+ 	<td class="halfwidth center">
+ 		{{.root.i18n.Tr "repo.diff.file_image_width"}}: <span class="text {{if not (eq $imageInfoBase.Width $imageInfoHead.Width)}}red{{end}}">{{$imageInfoBase.Width}}</span>
+ 		&nbsp;|&nbsp;
+ 	    {{.root.i18n.Tr "repo.diff.file_image_height"}}: <span class="text {{if not (eq $imageInfoBase.Height $imageInfoHead.Height)}}red{{end}}">{{$imageInfoBase.Height}}</span>
+ 		&nbsp;|&nbsp;
+ 	    {{.root.i18n.Tr "repo.diff.file_byte_size"}}: <span class="text {{if not (eq $imageInfoBase.ByteSize $imageInfoHead.ByteSize)}}red{{end}}">{{FileSize $imageInfoBase.ByteSize}}</span>
+ 	</td>
+ 	<td class="halfwidth center">
+ 		{{.root.i18n.Tr "repo.diff.file_image_width"}}: <span class="text {{if not (eq $imageInfoBase.Width $imageInfoHead.Width)}}green{{end}}">{{$imageInfoHead.Width}}</span>
+ 		&nbsp;|&nbsp;
+ 	    {{.root.i18n.Tr "repo.diff.file_image_height"}}: <span class="text {{if not (eq $imageInfoBase.Height $imageInfoHead.Height)}}green{{end}}">{{$imageInfoHead.Height}}</span>
+ 		&nbsp;|&nbsp;
+ 	    {{.root.i18n.Tr "repo.diff.file_byte_size"}}: <span class="text {{if not (eq $imageInfoBase.ByteSize $imageInfoHead.ByteSize)}}green{{end}}">{{FileSize $imageInfoHead.ByteSize}}</span>
+ 	</td>
+ </tr>
+{{end}}