From 2980d3ffd042b3b814f60a0af5d996ad2a7dfd6c Mon Sep 17 00:00:00 2001 From: KN4CK3R Date: Sun, 28 Feb 2021 17:24:00 +0000 Subject: [PATCH 01/11] Added type sniffer. --- modules/typesniffer/typesniffer.go | 81 +++++++++++++++++++++++++ modules/typesniffer/typesniffer_test.go | 79 ++++++++++++++++++++++++ 2 files changed, 160 insertions(+) create mode 100644 modules/typesniffer/typesniffer.go create mode 100644 modules/typesniffer/typesniffer_test.go diff --git a/modules/typesniffer/typesniffer.go b/modules/typesniffer/typesniffer.go new file mode 100644 index 0000000000000..f39f57f770a4f --- /dev/null +++ b/modules/typesniffer/typesniffer.go @@ -0,0 +1,81 @@ +// Copyright 2021 The Gitea Authors. All rights reserved. +// Use of this source code is governed by a MIT-style +// license that can be found in the LICENSE file. + +package typesniffer + +import ( + "net/http" + "regexp" + "strings" +) + +// Use at most this many bytes to determine Content Type. +const sniffLen = 512 + +// SvgMimeType MIME type of SVG images. +const SvgMimeType = "image/svg+xml" + +var svgTagRegex = regexp.MustCompile(`(?si)\A\s*(?:(||>))\s*)*\/]`) +var svgTagInXMLRegex = regexp.MustCompile(`(?si)\A<\?xml\b.*?\?>\s*(?:(||>))\s*)*\/]`) + +type SniffedType struct { + contentType string +} + +// IsText etects if content format is plain text. +func (ct SniffedType) IsText() bool { + return strings.Contains(ct.contentType, "text/") +} + +// IsImage detects if data is an image format +func (ct SniffedType) IsImage() bool { + return strings.Contains(ct.contentType, "image/") +} + +// IsSvgImage detects if data is an SVG image format +func (ct SniffedType) IsSvgImage() bool { + return strings.Contains(ct.contentType, SvgMimeType) +} + +// IsPdf detects if data is a pdf format +func (ct SniffedType) IsPdf() bool { + return strings.Contains(ct.contentType, "application/pdf") +} + +// IsVideo detects if data is an video format +func (ct SniffedType) IsVideo() bool { + return strings.Contains(ct.contentType, "video/") +} + +// IsAudio detects if data is an video format +func (ct SniffedType) IsAudio() bool { + return strings.Contains(ct.contentType, "audio/") +} + +// IsRepresentableAsText returns true if file content can be represented as +// plain text or is empty. +func (ct SniffedType) IsRepresentableAsText() bool { + return ct.IsText() || ct.IsSvgImage() +} + +// DetectContentType extends http.DetectContentType with more content types. Defaults to text/unknown if input is empty. +func DetectContentType(data []byte) SniffedType { + if len(data) == 0 { + return SniffedType{"text/unknown"} + } + + ct := http.DetectContentType(data) + + if len(data) > sniffLen { + data = data[:sniffLen] + } + + if (strings.Contains(ct, "text/plain") || strings.Contains(ct, "text/html")) && svgTagRegex.Match(data) || + strings.Contains(ct, "text/xml") && svgTagInXMLRegex.Match(data) { + // SVG is unsupported. https://github.com/golang/go/issues/15888 + ct = SvgMimeType + } + + return SniffedType{ct} +} diff --git a/modules/typesniffer/typesniffer_test.go b/modules/typesniffer/typesniffer_test.go new file mode 100644 index 0000000000000..6117f9f0af8df --- /dev/null +++ b/modules/typesniffer/typesniffer_test.go @@ -0,0 +1,79 @@ +// Copyright 2021 The Gitea Authors. All rights reserved. +// Use of this source code is governed by a MIT-style +// license that can be found in the LICENSE file. + +package typesniffer + +import ( + "testing" + + "github.com/stretchr/testify/assert" +) + +func TestDetectContentTypeLongerThanSniffLen(t *testing.T) { + // Pre-condition: Shorter than sniffLen detects SVG. + assert.Equal(t, "image/svg+xml", DetectContentType([]byte(``)).contentType) + // Longer than sniffLen detects something else. + assert.Equal(t, "text/plain; charset=utf-8", DetectContentType([]byte(``)).contentType) +} + +func TestIsTextFile(t *testing.T) { + assert.True(t, DetectContentType([]byte{}).IsText()) + assert.True(t, DetectContentType([]byte("lorem ipsum")).IsText()) +} + +func TestIsSvgImage(t *testing.T) { + assert.True(t, DetectContentType([]byte("")).IsSvgImage()) + assert.True(t, DetectContentType([]byte(" ")).IsSvgImage()) + assert.True(t, DetectContentType([]byte(``)).IsSvgImage()) + assert.True(t, DetectContentType([]byte("")).IsSvgImage()) + assert.True(t, DetectContentType([]byte(``)).IsSvgImage()) + assert.True(t, DetectContentType([]byte(` + `)).IsSvgImage()) + assert.True(t, DetectContentType([]byte(` + + `)).IsSvgImage()) + assert.True(t, DetectContentType([]byte(` + `)).IsSvgImage()) + assert.True(t, DetectContentType([]byte(` + `)).IsSvgImage()) + assert.True(t, DetectContentType([]byte(` + + `)).IsSvgImage()) + assert.True(t, DetectContentType([]byte(` + + + `)).IsSvgImage()) + assert.True(t, DetectContentType([]byte(` + + `)).IsSvgImage()) + assert.True(t, DetectContentType([]byte(` + + + `)).IsSvgImage()) + assert.False(t, DetectContentType([]byte{}).IsSvgImage()) + assert.False(t, DetectContentType([]byte("svg")).IsSvgImage()) + assert.False(t, DetectContentType([]byte("")).IsSvgImage()) + assert.False(t, DetectContentType([]byte("text")).IsSvgImage()) + assert.False(t, DetectContentType([]byte("")).IsSvgImage()) + assert.False(t, DetectContentType([]byte(``)).IsSvgImage()) + assert.False(t, DetectContentType([]byte(` + `)).IsSvgImage()) + assert.False(t, DetectContentType([]byte(` + + `)).IsSvgImage()) +} + +// TODO: IsImageFile(), currently no idea how to test +// TODO: IsPDFFile(), currently no idea how to test From bc73503a23ff36fd2f4e3c34e967b6e7b46342a5 Mon Sep 17 00:00:00 2001 From: KN4CK3R Date: Sun, 28 Feb 2021 18:14:00 +0000 Subject: [PATCH 02/11] Switched content detection from base to typesniffer. --- modules/base/tool.go | 68 ------------------ modules/base/tool_test.go | 92 ------------------------- modules/indexer/code/bleve.go | 4 +- modules/indexer/code/elastic_search.go | 4 +- modules/lfs/pointers.go | 4 +- modules/typesniffer/typesniffer.go | 5 +- modules/typesniffer/typesniffer_test.go | 20 +++++- routers/repo/download.go | 27 +++++--- routers/repo/editor.go | 5 +- routers/repo/lfs.go | 17 ++--- routers/repo/setting.go | 4 +- routers/repo/view.go | 30 +++++--- routers/user/setting/profile.go | 5 +- 13 files changed, 81 insertions(+), 204 deletions(-) diff --git a/modules/base/tool.go b/modules/base/tool.go index d721d47e9d773..137cd8f26bcb4 100644 --- a/modules/base/tool.go +++ b/modules/base/tool.go @@ -12,10 +12,8 @@ import ( "encoding/hex" "errors" "fmt" - "net/http" "os" "path/filepath" - "regexp" "runtime" "strconv" "strings" @@ -29,15 +27,6 @@ import ( "github.com/dustin/go-humanize" ) -// Use at most this many bytes to determine Content Type. -const sniffLen = 512 - -// SVGMimeType MIME type of SVG images. -const SVGMimeType = "image/svg+xml" - -var svgTagRegex = regexp.MustCompile(`(?si)\A\s*(?:(||>))\s*)*\/]`) -var svgTagInXMLRegex = regexp.MustCompile(`(?si)\A<\?xml\b.*?\?>\s*(?:(||>))\s*)*\/]`) - // EncodeMD5 encodes string to md5 hex value. func EncodeMD5(str string) string { m := md5.New() @@ -275,63 +264,6 @@ func IsLetter(ch rune) bool { return 'a' <= ch && ch <= 'z' || 'A' <= ch && ch <= 'Z' || ch == '_' || ch >= 0x80 && unicode.IsLetter(ch) } -// DetectContentType extends http.DetectContentType with more content types. -func DetectContentType(data []byte) string { - ct := http.DetectContentType(data) - - if len(data) > sniffLen { - data = data[:sniffLen] - } - - if setting.UI.SVG.Enabled && - ((strings.Contains(ct, "text/plain") || strings.Contains(ct, "text/html")) && svgTagRegex.Match(data) || - strings.Contains(ct, "text/xml") && svgTagInXMLRegex.Match(data)) { - - // SVG is unsupported. https://github.com/golang/go/issues/15888 - return SVGMimeType - } - return ct -} - -// IsRepresentableAsText returns true if file content can be represented as -// plain text or is empty. -func IsRepresentableAsText(data []byte) bool { - return IsTextFile(data) || IsSVGImageFile(data) -} - -// IsTextFile returns true if file content format is plain text or empty. -func IsTextFile(data []byte) bool { - if len(data) == 0 { - return true - } - return strings.Contains(DetectContentType(data), "text/") -} - -// IsImageFile detects if data is an image format -func IsImageFile(data []byte) bool { - return strings.Contains(DetectContentType(data), "image/") -} - -// IsSVGImageFile detects if data is an SVG image format -func IsSVGImageFile(data []byte) bool { - return strings.Contains(DetectContentType(data), SVGMimeType) -} - -// IsPDFFile detects if data is a pdf format -func IsPDFFile(data []byte) bool { - return strings.Contains(DetectContentType(data), "application/pdf") -} - -// IsVideoFile detects if data is an video format -func IsVideoFile(data []byte) bool { - return strings.Contains(DetectContentType(data), "video/") -} - -// IsAudioFile detects if data is an video format -func IsAudioFile(data []byte) bool { - return strings.Contains(DetectContentType(data), "audio/") -} - // EntryIcon returns the octicon class for displaying files/directories func EntryIcon(entry *git.TreeEntry) string { switch { diff --git a/modules/base/tool_test.go b/modules/base/tool_test.go index b6baeb8c3ce70..14e901ce57fa0 100644 --- a/modules/base/tool_test.go +++ b/modules/base/tool_test.go @@ -5,7 +5,6 @@ package base import ( - "encoding/base64" "os" "testing" "time" @@ -238,97 +237,6 @@ func TestIsLetter(t *testing.T) { assert.False(t, IsLetter(0x93)) } -func TestDetectContentTypeLongerThanSniffLen(t *testing.T) { - // Pre-condition: Shorter than sniffLen detects SVG. - assert.Equal(t, "image/svg+xml", DetectContentType([]byte(``))) - // Longer than sniffLen detects something else. - assert.Equal(t, "text/plain; charset=utf-8", DetectContentType([]byte(``))) -} - -// IsRepresentableAsText - -func TestIsTextFile(t *testing.T) { - assert.True(t, IsTextFile([]byte{})) - assert.True(t, IsTextFile([]byte("lorem ipsum"))) -} - -func TestIsImageFile(t *testing.T) { - png, _ := base64.StdEncoding.DecodeString("iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAG0lEQVQYlWN4+vTpf3SMDTAMBYXYBLFpHgoKAeiOf0SGE9kbAAAAAElFTkSuQmCC") - assert.True(t, IsImageFile(png)) - assert.False(t, IsImageFile([]byte("plain text"))) -} - -func TestIsSVGImageFile(t *testing.T) { - assert.True(t, IsSVGImageFile([]byte(""))) - assert.True(t, IsSVGImageFile([]byte(" "))) - assert.True(t, IsSVGImageFile([]byte(``))) - assert.True(t, IsSVGImageFile([]byte(""))) - assert.True(t, IsSVGImageFile([]byte(``))) - assert.True(t, IsSVGImageFile([]byte(` - `))) - assert.True(t, IsSVGImageFile([]byte(` - - `))) - assert.True(t, IsSVGImageFile([]byte(` - `))) - assert.True(t, IsSVGImageFile([]byte(` - `))) - assert.True(t, IsSVGImageFile([]byte(` - - `))) - assert.True(t, IsSVGImageFile([]byte(` - - - `))) - assert.True(t, IsSVGImageFile([]byte(` - - `))) - assert.True(t, IsSVGImageFile([]byte(` - - - `))) - assert.False(t, IsSVGImageFile([]byte{})) - assert.False(t, IsSVGImageFile([]byte("svg"))) - assert.False(t, IsSVGImageFile([]byte(""))) - assert.False(t, IsSVGImageFile([]byte("text"))) - assert.False(t, IsSVGImageFile([]byte(""))) - assert.False(t, IsSVGImageFile([]byte(``))) - assert.False(t, IsSVGImageFile([]byte(` - `))) - assert.False(t, IsSVGImageFile([]byte(` - - `))) -} - -func TestIsPDFFile(t *testing.T) { - pdf, _ := base64.StdEncoding.DecodeString("JVBERi0xLjYKJcOkw7zDtsOfCjIgMCBvYmoKPDwvTGVuZ3RoIDMgMCBSL0ZpbHRlci9GbGF0ZURlY29kZT4+CnN0cmVhbQp4nF3NPwsCMQwF8D2f4s2CNYk1baF0EHRwOwg4iJt/NsFb/PpevUE4Mjwe") - assert.True(t, IsPDFFile(pdf)) - assert.False(t, IsPDFFile([]byte("plain text"))) -} - -func TestIsVideoFile(t *testing.T) { - mp4, _ := base64.StdEncoding.DecodeString("AAAAGGZ0eXBtcDQyAAAAAGlzb21tcDQyAAEI721vb3YAAABsbXZoZAAAAADaBlwX2gZcFwAAA+gA") - assert.True(t, IsVideoFile(mp4)) - assert.False(t, IsVideoFile([]byte("plain text"))) -} - -func TestIsAudioFile(t *testing.T) { - mp3, _ := base64.StdEncoding.DecodeString("SUQzBAAAAAABAFRYWFgAAAASAAADbWFqb3JfYnJhbmQAbXA0MgBUWFhYAAAAEQAAA21pbm9yX3Zl") - assert.True(t, IsAudioFile(mp3)) - assert.False(t, IsAudioFile([]byte("plain text"))) -} - // TODO: Test EntryIcon func TestSetupGiteaRoot(t *testing.T) { diff --git a/modules/indexer/code/bleve.go b/modules/indexer/code/bleve.go index 1ebc74c43aa5f..c1f62dc55d48c 100644 --- a/modules/indexer/code/bleve.go +++ b/modules/indexer/code/bleve.go @@ -13,12 +13,12 @@ import ( "code.gitea.io/gitea/models" "code.gitea.io/gitea/modules/analyze" - "code.gitea.io/gitea/modules/base" "code.gitea.io/gitea/modules/charset" "code.gitea.io/gitea/modules/git" "code.gitea.io/gitea/modules/log" "code.gitea.io/gitea/modules/setting" "code.gitea.io/gitea/modules/timeutil" + "code.gitea.io/gitea/modules/typesniffer" "code.gitea.io/gitea/modules/util" "github.com/blevesearch/bleve/v2" @@ -200,7 +200,7 @@ func (b *BleveIndexer) addUpdate(commitSha string, update fileUpdate, repo *mode RunInDirBytes(repo.RepoPath()) if err != nil { return err - } else if !base.IsTextFile(fileContents) { + } else if !typesniffer.DetectContentType(fileContents).IsText() { // FIXME: UTF-16 files will probably fail here return nil } diff --git a/modules/indexer/code/elastic_search.go b/modules/indexer/code/elastic_search.go index c9d604b694b89..adb813531bb6b 100644 --- a/modules/indexer/code/elastic_search.go +++ b/modules/indexer/code/elastic_search.go @@ -14,12 +14,12 @@ import ( "code.gitea.io/gitea/models" "code.gitea.io/gitea/modules/analyze" - "code.gitea.io/gitea/modules/base" "code.gitea.io/gitea/modules/charset" "code.gitea.io/gitea/modules/git" "code.gitea.io/gitea/modules/log" "code.gitea.io/gitea/modules/setting" "code.gitea.io/gitea/modules/timeutil" + "code.gitea.io/gitea/modules/typesniffer" "github.com/go-enry/go-enry/v2" "github.com/olivere/elastic/v7" @@ -199,7 +199,7 @@ func (b *ElasticSearchIndexer) addUpdate(sha string, update fileUpdate, repo *mo RunInDirBytes(repo.RepoPath()) if err != nil { return nil, err - } else if !base.IsTextFile(fileContents) { + } else if !typesniffer.DetectContentType(fileContents).IsText() { // FIXME: UTF-16 files will probably fail here return nil, nil } diff --git a/modules/lfs/pointers.go b/modules/lfs/pointers.go index c6fbf090e5164..6c0725c592307 100644 --- a/modules/lfs/pointers.go +++ b/modules/lfs/pointers.go @@ -10,9 +10,9 @@ import ( "strings" "code.gitea.io/gitea/models" - "code.gitea.io/gitea/modules/base" "code.gitea.io/gitea/modules/setting" "code.gitea.io/gitea/modules/storage" + "code.gitea.io/gitea/modules/typesniffer" ) // ReadPointerFile will return a partially filled LFSMetaObject if the provided reader is a pointer file @@ -25,7 +25,7 @@ func ReadPointerFile(reader io.Reader) (*models.LFSMetaObject, *[]byte) { n, _ := reader.Read(buf) buf = buf[:n] - if isTextFile := base.IsTextFile(buf); !isTextFile { + if !typesniffer.DetectContentType(buf).IsText() { return nil, nil } diff --git a/modules/typesniffer/typesniffer.go b/modules/typesniffer/typesniffer.go index f39f57f770a4f..3a1f1e1e898ba 100644 --- a/modules/typesniffer/typesniffer.go +++ b/modules/typesniffer/typesniffer.go @@ -19,6 +19,7 @@ const SvgMimeType = "image/svg+xml" var svgTagRegex = regexp.MustCompile(`(?si)\A\s*(?:(||>))\s*)*\/]`) var svgTagInXMLRegex = regexp.MustCompile(`(?si)\A<\?xml\b.*?\?>\s*(?:(||>))\s*)*\/]`) +// SniffedType contains informations about a blobs type. type SniffedType struct { contentType string } @@ -38,8 +39,8 @@ func (ct SniffedType) IsSvgImage() bool { return strings.Contains(ct.contentType, SvgMimeType) } -// IsPdf detects if data is a pdf format -func (ct SniffedType) IsPdf() bool { +// IsPDF detects if data is a PDF format +func (ct SniffedType) IsPDF() bool { return strings.Contains(ct.contentType, "application/pdf") } diff --git a/modules/typesniffer/typesniffer_test.go b/modules/typesniffer/typesniffer_test.go index 6117f9f0af8df..5877560853cfa 100644 --- a/modules/typesniffer/typesniffer_test.go +++ b/modules/typesniffer/typesniffer_test.go @@ -5,6 +5,7 @@ package typesniffer import ( + "encoding/base64" "testing" "github.com/stretchr/testify/assert" @@ -75,5 +76,20 @@ func TestIsSvgImage(t *testing.T) { `)).IsSvgImage()) } -// TODO: IsImageFile(), currently no idea how to test -// TODO: IsPDFFile(), currently no idea how to test +func TestIsPDFFile(t *testing.T) { + pdf, _ := base64.StdEncoding.DecodeString("JVBERi0xLjYKJcOkw7zDtsOfCjIgMCBvYmoKPDwvTGVuZ3RoIDMgMCBSL0ZpbHRlci9GbGF0ZURlY29kZT4+CnN0cmVhbQp4nF3NPwsCMQwF8D2f4s2CNYk1baF0EHRwOwg4iJt/NsFb/PpevUE4Mjwe") + assert.True(t, DetectContentType(pdf).IsPDF()) + assert.False(t, DetectContentType([]byte("plain text")).IsPDF()) +} + +func TestIsVideoFile(t *testing.T) { + mp4, _ := base64.StdEncoding.DecodeString("AAAAGGZ0eXBtcDQyAAAAAGlzb21tcDQyAAEI721vb3YAAABsbXZoZAAAAADaBlwX2gZcFwAAA+gA") + assert.True(t, DetectContentType(mp4).IsVideo()) + assert.False(t, DetectContentType([]byte("plain text")).IsVideo()) +} + +func TestIsAudioFile(t *testing.T) { + mp3, _ := base64.StdEncoding.DecodeString("SUQzBAAAAAABAFRYWFgAAAASAAADbWFqb3JfYnJhbmQAbXA0MgBUWFhYAAAAEQAAA21pbm9yX3Zl") + assert.True(t, DetectContentType(mp3).IsAudio()) + assert.False(t, DetectContentType([]byte("plain text")).IsAudio()) +} diff --git a/routers/repo/download.go b/routers/repo/download.go index 50f893690b1a8..c3f255d6ab91c 100644 --- a/routers/repo/download.go +++ b/routers/repo/download.go @@ -11,12 +11,13 @@ import ( "path" "strings" - "code.gitea.io/gitea/modules/base" "code.gitea.io/gitea/modules/charset" "code.gitea.io/gitea/modules/context" "code.gitea.io/gitea/modules/git" "code.gitea.io/gitea/modules/lfs" "code.gitea.io/gitea/modules/log" + "code.gitea.io/gitea/modules/setting" + "code.gitea.io/gitea/modules/typesniffer" ) // ServeData download file from io.Reader @@ -41,24 +42,28 @@ func ServeData(ctx *context.Context, name string, size int64, reader io.Reader) // Google Chrome dislike commas in filenames, so let's change it to a space name = strings.ReplaceAll(name, ",", " ") - if base.IsTextFile(buf) || ctx.QueryBool("render") { + st := typesniffer.DetectContentType(buf) + + if st.IsText() || ctx.QueryBool("render") { cs, err := charset.DetectEncoding(buf) if err != nil { log.Error("Detect raw file %s charset failed: %v, using by default utf-8", name, err) cs = "utf-8" } ctx.Resp.Header().Set("Content-Type", "text/plain; charset="+strings.ToLower(cs)) - } else if base.IsImageFile(buf) || base.IsPDFFile(buf) { - ctx.Resp.Header().Set("Content-Disposition", fmt.Sprintf(`inline; filename="%s"`, name)) - ctx.Resp.Header().Set("Access-Control-Expose-Headers", "Content-Disposition") - if base.IsSVGImageFile(buf) { - ctx.Resp.Header().Set("Content-Security-Policy", "default-src 'none'; style-src 'unsafe-inline'; sandbox") - ctx.Resp.Header().Set("X-Content-Type-Options", "nosniff") - ctx.Resp.Header().Set("Content-Type", base.SVGMimeType) - } } else { - ctx.Resp.Header().Set("Content-Disposition", fmt.Sprintf(`attachment; filename="%s"`, name)) ctx.Resp.Header().Set("Access-Control-Expose-Headers", "Content-Disposition") + + if (st.IsImage() || st.IsPDF()) && (setting.UI.SVG.Enabled || !st.IsSvgImage()) { + ctx.Resp.Header().Set("Content-Disposition", fmt.Sprintf(`inline; filename="%s"`, name)) + if st.IsSvgImage() { + ctx.Resp.Header().Set("Content-Security-Policy", "default-src 'none'; style-src 'unsafe-inline'; sandbox") + ctx.Resp.Header().Set("X-Content-Type-Options", "nosniff") + ctx.Resp.Header().Set("Content-Type", typesniffer.SvgMimeType) + } + } else { + ctx.Resp.Header().Set("Content-Disposition", fmt.Sprintf(`attachment; filename="%s"`, name)) + } } _, err = ctx.Resp.Write(buf) diff --git a/routers/repo/editor.go b/routers/repo/editor.go index 344174828e255..47d8c65510436 100644 --- a/routers/repo/editor.go +++ b/routers/repo/editor.go @@ -21,6 +21,7 @@ import ( "code.gitea.io/gitea/modules/repofiles" repo_module "code.gitea.io/gitea/modules/repository" "code.gitea.io/gitea/modules/setting" + "code.gitea.io/gitea/modules/typesniffer" "code.gitea.io/gitea/modules/upload" "code.gitea.io/gitea/modules/util" "code.gitea.io/gitea/modules/web" @@ -115,8 +116,8 @@ func editFile(ctx *context.Context, isNewFile bool) { buf = buf[:n] // Only some file types are editable online as text. - if !base.IsRepresentableAsText(buf) { - ctx.NotFound("base.IsRepresentableAsText", nil) + if !typesniffer.DetectContentType(buf).IsRepresentableAsText() { + ctx.NotFound("typesniffer.IsRepresentableAsText", nil) return } diff --git a/routers/repo/lfs.go b/routers/repo/lfs.go index fb0e3b10eae9a..25d1e60502ab9 100644 --- a/routers/repo/lfs.go +++ b/routers/repo/lfs.go @@ -26,6 +26,7 @@ import ( "code.gitea.io/gitea/modules/log" "code.gitea.io/gitea/modules/setting" "code.gitea.io/gitea/modules/storage" + "code.gitea.io/gitea/modules/typesniffer" ) const ( @@ -279,16 +280,16 @@ func LFSFileGet(ctx *context.Context) { } buf = buf[:n] - ctx.Data["IsTextFile"] = base.IsTextFile(buf) - isRepresentableAsText := base.IsRepresentableAsText(buf) + ct := typesniffer.DetectContentType(buf) + ctx.Data["IsTextFile"] = ct.IsText() + isRepresentableAsText := ct.IsRepresentableAsText() fileSize := meta.Size ctx.Data["FileSize"] = meta.Size ctx.Data["RawFileLink"] = fmt.Sprintf("%s%s.git/info/lfs/objects/%s/%s", setting.AppURL, ctx.Repo.Repository.FullName(), meta.Oid, "direct") switch { case isRepresentableAsText: - // This will be true for SVGs. - if base.IsImageFile(buf) { + if ct.IsSvgImage() { ctx.Data["IsImageFile"] = true } @@ -330,13 +331,13 @@ func LFSFileGet(ctx *context.Context) { } ctx.Data["LineNums"] = gotemplate.HTML(output.String()) - case base.IsPDFFile(buf): + case ct.IsPDF(): ctx.Data["IsPDFFile"] = true - case base.IsVideoFile(buf): + case ct.IsVideo(): ctx.Data["IsVideoFile"] = true - case base.IsAudioFile(buf): + case ct.IsAudio(): ctx.Data["IsAudioFile"] = true - case base.IsImageFile(buf): + case ct.IsImage(): ctx.Data["IsImageFile"] = true } ctx.HTML(200, tplSettingsLFSFile) diff --git a/routers/repo/setting.go b/routers/repo/setting.go index 3e22e8804e5d5..73189474727f1 100644 --- a/routers/repo/setting.go +++ b/routers/repo/setting.go @@ -24,6 +24,7 @@ import ( "code.gitea.io/gitea/modules/setting" "code.gitea.io/gitea/modules/structs" "code.gitea.io/gitea/modules/timeutil" + "code.gitea.io/gitea/modules/typesniffer" "code.gitea.io/gitea/modules/validation" "code.gitea.io/gitea/modules/web" "code.gitea.io/gitea/routers/utils" @@ -949,7 +950,8 @@ func UpdateAvatarSetting(ctx *context.Context, form auth.AvatarForm) error { if err != nil { return fmt.Errorf("ioutil.ReadAll: %v", err) } - if !base.IsImageFile(data) { + st := typesniffer.DetectContentType(data) + if !(st.IsImage() && !st.IsSvgImage()) { return errors.New(ctx.Tr("settings.uploaded_avatar_not_a_image")) } if err = ctxRepo.UploadAvatar(data); err != nil { diff --git a/routers/repo/view.go b/routers/repo/view.go index a5e3cbe3e4323..a558fb2c5429f 100644 --- a/routers/repo/view.go +++ b/routers/repo/view.go @@ -28,6 +28,7 @@ import ( "code.gitea.io/gitea/modules/log" "code.gitea.io/gitea/modules/markup" "code.gitea.io/gitea/modules/setting" + "code.gitea.io/gitea/modules/typesniffer" ) const ( @@ -264,7 +265,9 @@ func renderDirectory(ctx *context.Context, treeLink string) { n, _ := dataRc.Read(buf) buf = buf[:n] - isTextFile := base.IsTextFile(buf) + st := typesniffer.DetectContentType(buf) + isTextFile := st.IsText() + ctx.Data["FileIsText"] = isTextFile ctx.Data["FileName"] = readmeFile.name fileSize := int64(0) @@ -303,7 +306,9 @@ func renderDirectory(ctx *context.Context, treeLink string) { } buf = buf[:n] - isTextFile = base.IsTextFile(buf) + st = typesniffer.DetectContentType(buf) + isTextFile = st.IsText() + ctx.Data["IsTextFile"] = isTextFile fileSize = meta.Size @@ -392,7 +397,9 @@ func renderFile(ctx *context.Context, entry *git.TreeEntry, treeLink, rawLink st n, _ := dataRc.Read(buf) buf = buf[:n] - isTextFile := base.IsTextFile(buf) + st := typesniffer.DetectContentType(buf) + isTextFile := st.IsText() + isLFSFile := false isDisplayingSource := ctx.Query("display") == "source" isDisplayingRendered := !isDisplayingSource @@ -429,13 +436,15 @@ func renderFile(ctx *context.Context, entry *git.TreeEntry, treeLink, rawLink st } buf = buf[:n] - isTextFile = base.IsTextFile(buf) + st = typesniffer.DetectContentType(buf) + isTextFile = st.IsText() + fileSize = meta.Size ctx.Data["RawFileLink"] = fmt.Sprintf("%s/media/%s/%s", ctx.Repo.RepoLink, ctx.Repo.BranchNameSubURL(), ctx.Repo.TreePath) } } - isRepresentableAsText := base.IsRepresentableAsText(buf) + isRepresentableAsText := st.IsRepresentableAsText() if !isRepresentableAsText { // If we can't show plain text, always try to render. isDisplayingSource = false @@ -470,8 +479,7 @@ func renderFile(ctx *context.Context, entry *git.TreeEntry, treeLink, rawLink st switch { case isRepresentableAsText: - // This will be true for SVGs. - if base.IsImageFile(buf) { + if st.IsSvgImage() { ctx.Data["IsImageFile"] = true ctx.Data["HasSourceRenderedToggle"] = true } @@ -517,13 +525,13 @@ func renderFile(ctx *context.Context, entry *git.TreeEntry, treeLink, rawLink st } } - case base.IsPDFFile(buf): + case st.IsPDF(): ctx.Data["IsPDFFile"] = true - case base.IsVideoFile(buf): + case st.IsVideo(): ctx.Data["IsVideoFile"] = true - case base.IsAudioFile(buf): + case st.IsAudio(): ctx.Data["IsAudioFile"] = true - case base.IsImageFile(buf): + case st.IsImage(): ctx.Data["IsImageFile"] = true default: if fileSize >= setting.UI.MaxDisplayFileSize { diff --git a/routers/user/setting/profile.go b/routers/user/setting/profile.go index 7e90a7ccec3cf..62343bf898493 100644 --- a/routers/user/setting/profile.go +++ b/routers/user/setting/profile.go @@ -19,6 +19,7 @@ import ( auth "code.gitea.io/gitea/modules/forms" "code.gitea.io/gitea/modules/log" "code.gitea.io/gitea/modules/setting" + "code.gitea.io/gitea/modules/typesniffer" "code.gitea.io/gitea/modules/util" "code.gitea.io/gitea/modules/web" @@ -151,7 +152,9 @@ func UpdateAvatarSetting(ctx *context.Context, form *auth.AvatarForm, ctxUser *m if err != nil { return fmt.Errorf("ioutil.ReadAll: %v", err) } - if !base.IsImageFile(data) { + + st := typesniffer.DetectContentType(data) + if !(st.IsImage() && !st.IsSvgImage()) { return errors.New(ctx.Tr("settings.uploaded_avatar_not_a_image")) } if err = ctxUser.UploadAvatar(data); err != nil { From c6ecc52c86cb2e69cbc7d1ac59087d75512f60e9 Mon Sep 17 00:00:00 2001 From: KN4CK3R Date: Tue, 2 Mar 2021 18:15:00 +0000 Subject: [PATCH 03/11] Added GuessContentType to Blob. --- modules/git/blob.go | 13 +++++++++++++ modules/typesniffer/typesniffer.go | 16 +++++++++++++++- modules/typesniffer/typesniffer_test.go | 24 +++++++++++++----------- 3 files changed, 41 insertions(+), 12 deletions(-) diff --git a/modules/git/blob.go b/modules/git/blob.go index 674a6a9592778..732356e5b2f96 100644 --- a/modules/git/blob.go +++ b/modules/git/blob.go @@ -10,6 +10,8 @@ import ( "encoding/base64" "io" "io/ioutil" + + "code.gitea.io/gitea/modules/typesniffer" ) // This file contains common functions between the gogit and !gogit variants for git Blobs @@ -82,3 +84,14 @@ func (b *Blob) GetBlobContentBase64() (string, error) { } return string(out), nil } + +// GuessContentType guesses the content type of the blob. +func (b *Blob) GuessContentType() (typesniffer.SniffedType, error) { + r, err := b.DataAsync() + if err != nil { + return typesniffer.SniffedType{}, err + } + defer r.Close() + + return typesniffer.DetectContentTypeFromReader(r) +} diff --git a/modules/typesniffer/typesniffer.go b/modules/typesniffer/typesniffer.go index 3a1f1e1e898ba..7c89f66699c12 100644 --- a/modules/typesniffer/typesniffer.go +++ b/modules/typesniffer/typesniffer.go @@ -5,13 +5,15 @@ package typesniffer import ( + "fmt" + "io" "net/http" "regexp" "strings" ) // Use at most this many bytes to determine Content Type. -const sniffLen = 512 +const sniffLen = 1024 // SvgMimeType MIME type of SVG images. const SvgMimeType = "image/svg+xml" @@ -80,3 +82,15 @@ func DetectContentType(data []byte) SniffedType { return SniffedType{ct} } + +// DetectContentTypeFromReader guesses the content type contained in the reader. +func DetectContentTypeFromReader(r io.Reader) (SniffedType, error) { + buf := make([]byte, sniffLen) + n, err := r.Read(buf) + if err != nil && err != io.EOF { + return SniffedType{}, fmt.Errorf("DetectContentTypeFromReader io error: %w", err) + } + buf = buf[:n] + + return DetectContentType(buf), nil +} diff --git a/modules/typesniffer/typesniffer_test.go b/modules/typesniffer/typesniffer_test.go index 5877560853cfa..a3b47c459863e 100644 --- a/modules/typesniffer/typesniffer_test.go +++ b/modules/typesniffer/typesniffer_test.go @@ -5,7 +5,9 @@ package typesniffer import ( + "bytes" "encoding/base64" + "strings" "testing" "github.com/stretchr/testify/assert" @@ -15,14 +17,7 @@ func TestDetectContentTypeLongerThanSniffLen(t *testing.T) { // Pre-condition: Shorter than sniffLen detects SVG. assert.Equal(t, "image/svg+xml", DetectContentType([]byte(``)).contentType) // Longer than sniffLen detects something else. - assert.Equal(t, "text/plain; charset=utf-8", DetectContentType([]byte(``)).contentType) + assert.NotEqual(t, "image/svg+xml", DetectContentType([]byte(``)).contentType) } func TestIsTextFile(t *testing.T) { @@ -76,20 +71,27 @@ func TestIsSvgImage(t *testing.T) { `)).IsSvgImage()) } -func TestIsPDFFile(t *testing.T) { +func TestIsPDF(t *testing.T) { pdf, _ := base64.StdEncoding.DecodeString("JVBERi0xLjYKJcOkw7zDtsOfCjIgMCBvYmoKPDwvTGVuZ3RoIDMgMCBSL0ZpbHRlci9GbGF0ZURlY29kZT4+CnN0cmVhbQp4nF3NPwsCMQwF8D2f4s2CNYk1baF0EHRwOwg4iJt/NsFb/PpevUE4Mjwe") assert.True(t, DetectContentType(pdf).IsPDF()) assert.False(t, DetectContentType([]byte("plain text")).IsPDF()) } -func TestIsVideoFile(t *testing.T) { +func TestIsVideo(t *testing.T) { mp4, _ := base64.StdEncoding.DecodeString("AAAAGGZ0eXBtcDQyAAAAAGlzb21tcDQyAAEI721vb3YAAABsbXZoZAAAAADaBlwX2gZcFwAAA+gA") assert.True(t, DetectContentType(mp4).IsVideo()) assert.False(t, DetectContentType([]byte("plain text")).IsVideo()) } -func TestIsAudioFile(t *testing.T) { +func TestIsAudio(t *testing.T) { mp3, _ := base64.StdEncoding.DecodeString("SUQzBAAAAAABAFRYWFgAAAASAAADbWFqb3JfYnJhbmQAbXA0MgBUWFhYAAAAEQAAA21pbm9yX3Zl") assert.True(t, DetectContentType(mp3).IsAudio()) assert.False(t, DetectContentType([]byte("plain text")).IsAudio()) } + +func TestDetectContentTypeFromReader(t *testing.T) { + mp3, _ := base64.StdEncoding.DecodeString("SUQzBAAAAAABAFRYWFgAAAASAAADbWFqb3JfYnJhbmQAbXA0MgBUWFhYAAAAEQAAA21pbm9yX3Zl") + st, err := DetectContentTypeFromReader(bytes.NewReader(mp3)) + assert.NoError(t, err) + assert.True(t, st.IsAudio()) +} From 8c6836eedc7e855bcee1826ad09e37ebbac0a0f9 Mon Sep 17 00:00:00 2001 From: KN4CK3R Date: Tue, 2 Mar 2021 18:33:00 +0000 Subject: [PATCH 04/11] Moved image info logic to client. Added support for SVG images in diff. --- modules/git/commit.go | 70 ----------------------------- routers/repo/commit.go | 3 +- routers/repo/compare.go | 50 ++++++++++++--------- routers/repo/pull.go | 3 +- templates/repo/diff/box.tmpl | 11 ++--- templates/repo/diff/image_diff.tmpl | 64 ++++++++------------------ web_src/js/features/imagediff.js | 70 ++++++++++++++++++++++++++--- 7 files changed, 119 insertions(+), 152 deletions(-) diff --git a/modules/git/commit.go b/modules/git/commit.go index 027642720d0ab..f4d6075fe2d22 100644 --- a/modules/git/commit.go +++ b/modules/git/commit.go @@ -11,13 +11,7 @@ import ( "container/list" "errors" "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" "os/exec" "strconv" "strings" @@ -81,70 +75,6 @@ func (c *Commit) ParentCount() int { return len(c.Parents) } -func isImageFile(data []byte) (string, bool) { - contentType := http.DetectContentType(data) - if strings.Contains(contentType, "image/") { - return contentType, true - } - return contentType, false -} - -// IsImageFile is a file image type -func (c *Commit) IsImageFile(name string) bool { - blob, err := c.GetBlobByPath(name) - if err != nil { - return false - } - - dataRc, err := blob.DataAsync() - if err != nil { - return false - } - defer dataRc.Close() - buf := make([]byte, 1024) - n, _ := dataRc.Read(buf) - buf = buf[:n] - _, isImage := isImageFile(buf) - 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) diff --git a/routers/repo/commit.go b/routers/repo/commit.go index c3ee6b5acc0dd..c06d092613d7c 100644 --- a/routers/repo/commit.go +++ b/routers/repo/commit.go @@ -336,9 +336,8 @@ func Diff(ctx *context.Context) { return } } - setImageCompareContext(ctx, parentCommit, commit) headTarget := path.Join(userName, repoName) - setPathsCompareContext(ctx, parentCommit, commit, headTarget) + setCompareContext(ctx, parentCommit, commit, headTarget) ctx.Data["Title"] = commit.Summary() + " ยท " + base.ShortSha(commitID) ctx.Data["Commit"] = commit verification := models.ParseCommitWithSignature(commit) diff --git a/routers/repo/compare.go b/routers/repo/compare.go index 2eef20f5ff317..9eaa10c4ddc93 100644 --- a/routers/repo/compare.go +++ b/routers/repo/compare.go @@ -26,6 +26,26 @@ const ( tplBlobExcerpt base.TplName = "repo/diff/blob_excerpt" ) +func setCompareContext(ctx *context.Context, base *git.Commit, head *git.Commit, headTarget string) { + ctx.Data["BaseCommit"] = base + ctx.Data["HeadCommit"] = head + + ctx.Data["GetBlobByPathForCommit"] = func(commit *git.Commit, path string) *git.Blob { + if commit == nil { + return nil + } + + blob, err := commit.GetBlobByPath(path) + if err != nil { + return nil + } + return blob + } + + setPathsCompareContext(ctx, base, head, headTarget) + setImageCompareContext(ctx) +} + // setPathsCompareContext sets context data for source and raw paths func setPathsCompareContext(ctx *context.Context, base *git.Commit, head *git.Commit, headTarget string) { sourcePath := setting.AppSubURL + "/%s/src/commit/%s" @@ -41,27 +61,18 @@ func setPathsCompareContext(ctx *context.Context, base *git.Commit, head *git.Co } // setImageCompareContext sets context data that is required by image compare template -func setImageCompareContext(ctx *context.Context, base *git.Commit, head *git.Commit) { - ctx.Data["IsImageFileInHead"] = head.IsImageFile - ctx.Data["IsImageFileInBase"] = base.IsImageFile - ctx.Data["ImageInfoBase"] = func(name string) *git.ImageMetaData { - if base == nil { - return nil +func setImageCompareContext(ctx *context.Context) { + ctx.Data["IsBlobAnImage"] = func(blob *git.Blob) bool { + if blob == nil { + return false } - result, err := base.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 := head.ImageInfo(name) + + st, err := blob.GuessContentType() if err != nil { - log.Error("ImageInfo failed: %v", err) - return nil + log.Error("GuessContentType failed: %v", err) + return false } - return result + return st.IsImage() } } @@ -478,9 +489,8 @@ func PrepareCompareDiff( ctx.Data["Username"] = headUser.Name ctx.Data["Reponame"] = headRepo.Name - setImageCompareContext(ctx, baseCommit, headCommit) headTarget := path.Join(headUser.Name, repo.Name) - setPathsCompareContext(ctx, baseCommit, headCommit, headTarget) + setCompareContext(ctx, baseCommit, headCommit, headTarget) return false } diff --git a/routers/repo/pull.go b/routers/repo/pull.go index 15af2a2a3f33b..a806d40e80825 100644 --- a/routers/repo/pull.go +++ b/routers/repo/pull.go @@ -671,8 +671,7 @@ func ViewPullFiles(ctx *context.Context) { } } - setImageCompareContext(ctx, baseCommit, commit) - setPathsCompareContext(ctx, baseCommit, commit, headTarget) + setCompareContext(ctx, baseCommit, commit, headTarget) ctx.Data["RequireHighlightJS"] = true ctx.Data["RequireSimpleMDE"] = true diff --git a/templates/repo/diff/box.tmpl b/templates/repo/diff/box.tmpl index f93dac9b4d48b..875fb50fc551e 100644 --- a/templates/repo/diff/box.tmpl +++ b/templates/repo/diff/box.tmpl @@ -73,12 +73,6 @@

- {{$isImage := false}} - {{if $file.IsDeleted}} - {{$isImage = (call $.IsImageFileInBase $file.Name)}} - {{else}} - {{$isImage = (call $.IsImageFileInHead $file.Name)}} - {{end}} {{svg "octicon-chevron-down" 18}} @@ -106,11 +100,14 @@

{{if ne $file.Type 4}} + {{$blobBase := call $.GetBlobByPathForCommit $.BaseCommit $file.OldName}} + {{$blobHead := call $.GetBlobByPathForCommit $.HeadCommit $file.Name}} + {{$isImage := or (call $.IsBlobAnImage $blobBase) (call $.IsBlobAnImage $blobHead)}}
{{if $isImage}} - {{template "repo/diff/image_diff" dict "file" . "root" $}} + {{template "repo/diff/image_diff" dict "file" . "root" $ "blobBase" $blobBase "blobHead" $blobHead}} {{else}} {{if $.IsSplitStyle}} {{template "repo/diff/section_split" dict "file" . "root" $}} diff --git a/templates/repo/diff/image_diff.tmpl b/templates/repo/diff/image_diff.tmpl index 01f7e3f8e8f4a..c20ec815b528d 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}} From f2919f967f68c12ac9eddcaa16d2c00132afbb19 Mon Sep 17 00:00:00 2001 From: silverwind Date: Fri, 21 May 2021 18:33:30 +0200 Subject: [PATCH 09/11] improve BIN tag on image diffs --- templates/repo/diff/box.tmpl | 12 ++++++++---- 1 file changed, 8 insertions(+), 4 deletions(-) diff --git a/templates/repo/diff/box.tmpl b/templates/repo/diff/box.tmpl index 3a4ebe917bd58..2284876a9c5ca 100644 --- a/templates/repo/diff/box.tmpl +++ b/templates/repo/diff/box.tmpl @@ -29,10 +29,12 @@ {{range .Diff.Files}}
  • - {{if not .IsBin}} - {{template "repo/diff/stats" dict "file" . "root" $}} + {{if .IsBin}} + + {{$.i18n.Tr "repo.diff.bin"}} + {{else}} - {{$.i18n.Tr "repo.diff.bin"}} + {{template "repo/diff/stats" dict "file" . "root" $}} {{end}}
    @@ -87,7 +89,9 @@
    {{if $file.IsBin}} - {{$.i18n.Tr "repo.diff.bin"}} + + {{$.i18n.Tr "repo.diff.bin"}} + {{else}} {{template "repo/diff/stats" dict "file" . "root" $}} {{end}} From f6eb56561d80f1dbb01e8ac8d71b4fda3effe0bc Mon Sep 17 00:00:00 2001 From: KN4CK3R Date: Sat, 22 May 2021 11:49:39 +0000 Subject: [PATCH 10/11] Default to render view. --- templates/repo/diff/box.tmpl | 10 +- web_src/js/features/imagediff.js | 363 +++++++++++++++---------------- 2 files changed, 177 insertions(+), 196 deletions(-) diff --git a/templates/repo/diff/box.tmpl b/templates/repo/diff/box.tmpl index 2284876a9c5ca..33862ea80ebd0 100644 --- a/templates/repo/diff/box.tmpl +++ b/templates/repo/diff/box.tmpl @@ -101,8 +101,8 @@
    {{if $showFileViewToggle}}
    - {{svg "octicon-code"}} - {{svg "octicon-file"}} + {{svg "octicon-code"}} + {{svg "octicon-file"}}
    {{end}} {{if $file.IsProtected}} @@ -118,7 +118,7 @@
    -
    +
    {{if $file.IsBin}}
    {{$.i18n.Tr "repo.diff.bin_not_shown"}}
    {{else}} @@ -131,8 +131,8 @@
    • {{.root.i18n.Tr "repo.diff.image.side_by_side"}} - {{if and $imageInfoBase $imageInfoHead}} + {{if and .blobBase .blobHead}} {{.root.i18n.Tr "repo.diff.image.swipe"}} {{.root.i18n.Tr "repo.diff.image.overlay"}} {{end}} @@ -18,63 +16,39 @@
    - {{if $imageInfoBase }} + {{if .blobBase }}

    {{.root.i18n.Tr "repo.diff.file_before"}}

    - {{ $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"}}: {{$imageInfoBase.Width}} -  |  - {{.root.i18n.Tr "repo.diff.file_image_height"}}: {{$imageInfoBase.Height}} -  |  - {{.root.i18n.Tr "repo.diff.file_byte_size"}}: {{FileSize $imageInfoBase.ByteSize}} + + {{.root.i18n.Tr "repo.diff.file_image_width"}}: +  |  + {{.root.i18n.Tr "repo.diff.file_image_height"}}: +  |  + + {{.root.i18n.Tr "repo.diff.file_byte_size"}}: {{FileSize .blobBase.Size}}

    {{end}} - {{if $imageInfoHead }} + {{if .blobHead }}

    {{.root.i18n.Tr "repo.diff.file_after"}}

    - {{ $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"}}: {{$imageInfoHead.Width}} -  |  - {{.root.i18n.Tr "repo.diff.file_image_height"}}: {{$imageInfoHead.Height}} -  |  - {{.root.i18n.Tr "repo.diff.file_byte_size"}}: {{FileSize $imageInfoHead.ByteSize}} + + {{.root.i18n.Tr "repo.diff.file_image_width"}}: +  |  + {{.root.i18n.Tr "repo.diff.file_image_height"}}: +  |  + + {{.root.i18n.Tr "repo.diff.file_byte_size"}}: {{FileSize .blobHead.Size}}

    {{end}}
    - {{if and $imageInfoBase $imageInfoHead}} + {{if and .blobBase .blobHead}}
    diff --git a/web_src/js/features/imagediff.js b/web_src/js/features/imagediff.js index ce7ce8d2afdcd..e84e791070cb4 100644 --- a/web_src/js/features/imagediff.js +++ b/web_src/js/features/imagediff.js @@ -1,3 +1,34 @@ +function getDefaultSvgBoundsIfUndefined(svgXml, src) { + const DefaultSize = 300; + const MaxSize = 99999; + + const svg = svgXml.rootElement; + + const width = svg.width.baseVal; + const height = svg.height.baseVal; + if (width.unitType === SVGLength.SVG_LENGTHTYPE_PERCENTAGE || height.unitType === SVGLength.SVG_LENGTHTYPE_PERCENTAGE) { + const img = new Image(); + img.src = src; + if (img.width > 1 && img.width < MaxSize && img.height > 1 && img.height < MaxSize) { + return { + width: img.width, + height: img.height + }; + } + if (svg.hasAttribute('viewBox')) { + const viewBox = svg.viewBox.baseVal; + return { + width: DefaultSize, + height: DefaultSize * viewBox.width / viewBox.height + }; + } + return { + width: DefaultSize, + height: DefaultSize + }; + } +} + export default async function initImageDiff() { function createContext(image1, image2) { const size1 = { @@ -36,20 +67,36 @@ export default async function initImageDiff() { const imageInfos = [{ loaded: false, path: pathAfter, - $image: $container.find('img.image-after') + $image: $container.find('img.image-after'), + $boundsInfo: $container.find('.bounds-info-after') }, { loaded: false, path: pathBefore, - $image: $container.find('img.image-before') + $image: $container.find('img.image-before'), + $boundsInfo: $container.find('.bounds-info-before') }]; for (const info of imageInfos) { if (info.$image.length > 0) { - info.$image.on('load', () => { - info.loaded = true; - setReadyIfLoaded(); + $.ajax({ + url: info.path, + success: (data, _, jqXHR) => { + info.$image.on('load', () => { + info.loaded = true; + setReadyIfLoaded(); + }); + info.$image.attr('src', info.path); + + if (jqXHR.getResponseHeader('Content-Type') === 'image/svg+xml') { + const bounds = getDefaultSvgBoundsIfUndefined(data, info.path); + if (bounds) { + info.$image.attr('width', bounds.width); + info.$image.attr('height', bounds.height); + info.$boundsInfo.hide(); + } + } + } }); - info.$image.attr('src', info.path); } else { info.loaded = true; setReadyIfLoaded(); @@ -81,6 +128,17 @@ export default async function initImageDiff() { factor = (diffContainerWidth - 24) / 2 / sizes.max.width; } + const widthChanged = sizes.image1.length !== 0 && sizes.image2.length !== 0 && sizes.image1[0].naturalWidth !== sizes.image2[0].naturalWidth; + const heightChanged = sizes.image1.length !== 0 && sizes.image2.length !== 0 && sizes.image1[0].naturalHeight !== sizes.image2[0].naturalHeight; + if (sizes.image1.length !== 0) { + $container.find('.bounds-info-after .bounds-info-width').text(`${sizes.image1[0].naturalWidth}px`).addClass(widthChanged ? 'green' : ''); + $container.find('.bounds-info-after .bounds-info-height').text(`${sizes.image1[0].naturalHeight}px`).addClass(heightChanged ? 'green' : ''); + } + if (sizes.image2.length !== 0) { + $container.find('.bounds-info-before .bounds-info-width').text(`${sizes.image2[0].naturalWidth}px`).addClass(widthChanged ? 'red' : ''); + $container.find('.bounds-info-before .bounds-info-height').text(`${sizes.image2[0].naturalHeight}px`).addClass(heightChanged ? 'red' : ''); + } + sizes.image1.css({ width: sizes.size1.width * factor, height: sizes.size1.height * factor From 114fa626ed80bf77726388f96d86fad71f6b18bb Mon Sep 17 00:00:00 2001 From: KN4CK3R Date: Tue, 2 Mar 2021 18:36:00 +0000 Subject: [PATCH 05/11] Restore old blocked svg behaviour. --- routers/repo/compare.go | 2 +- routers/repo/lfs.go | 16 ++++++++-------- routers/repo/view.go | 2 +- 3 files changed, 10 insertions(+), 10 deletions(-) diff --git a/routers/repo/compare.go b/routers/repo/compare.go index 9eaa10c4ddc93..646231a995556 100644 --- a/routers/repo/compare.go +++ b/routers/repo/compare.go @@ -72,7 +72,7 @@ func setImageCompareContext(ctx *context.Context) { log.Error("GuessContentType failed: %v", err) return false } - return st.IsImage() + return st.IsImage() && (setting.UI.SVG.Enabled || !st.IsSvgImage()) } } diff --git a/routers/repo/lfs.go b/routers/repo/lfs.go index 25d1e60502ab9..4b42a9d749493 100644 --- a/routers/repo/lfs.go +++ b/routers/repo/lfs.go @@ -280,16 +280,16 @@ func LFSFileGet(ctx *context.Context) { } buf = buf[:n] - ct := typesniffer.DetectContentType(buf) - ctx.Data["IsTextFile"] = ct.IsText() - isRepresentableAsText := ct.IsRepresentableAsText() + st := typesniffer.DetectContentType(buf) + ctx.Data["IsTextFile"] = st.IsText() + isRepresentableAsText := st.IsRepresentableAsText() fileSize := meta.Size ctx.Data["FileSize"] = meta.Size ctx.Data["RawFileLink"] = fmt.Sprintf("%s%s.git/info/lfs/objects/%s/%s", setting.AppURL, ctx.Repo.Repository.FullName(), meta.Oid, "direct") switch { case isRepresentableAsText: - if ct.IsSvgImage() { + if st.IsSvgImage() { ctx.Data["IsImageFile"] = true } @@ -331,13 +331,13 @@ func LFSFileGet(ctx *context.Context) { } ctx.Data["LineNums"] = gotemplate.HTML(output.String()) - case ct.IsPDF(): + case st.IsPDF(): ctx.Data["IsPDFFile"] = true - case ct.IsVideo(): + case st.IsVideo(): ctx.Data["IsVideoFile"] = true - case ct.IsAudio(): + case st.IsAudio(): ctx.Data["IsAudioFile"] = true - case ct.IsImage(): + case st.IsImage() && (setting.UI.SVG.Enabled || !st.IsSvgImage()): ctx.Data["IsImageFile"] = true } ctx.HTML(200, tplSettingsLFSFile) diff --git a/routers/repo/view.go b/routers/repo/view.go index a558fb2c5429f..2e5f4e698412b 100644 --- a/routers/repo/view.go +++ b/routers/repo/view.go @@ -531,7 +531,7 @@ func renderFile(ctx *context.Context, entry *git.TreeEntry, treeLink, rawLink st ctx.Data["IsVideoFile"] = true case st.IsAudio(): ctx.Data["IsAudioFile"] = true - case st.IsImage(): + case st.IsImage() && (setting.UI.SVG.Enabled || !st.IsSvgImage()): ctx.Data["IsImageFile"] = true default: if fileSize >= setting.UI.MaxDisplayFileSize { From d300009041c1c87d9331217d9fa34c9fa015ef0d Mon Sep 17 00:00:00 2001 From: KN4CK3R Date: Wed, 3 Mar 2021 22:50:51 +0000 Subject: [PATCH 06/11] Added missing image formats. --- modules/avatar/avatar.go | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/modules/avatar/avatar.go b/modules/avatar/avatar.go index 44b56c26ce5d1..e7ec89591f34d 100644 --- a/modules/avatar/avatar.go +++ b/modules/avatar/avatar.go @@ -10,8 +10,10 @@ import ( "image" "image/color/palette" - // Enable PNG support: - _ "image/png" + _ "image/gif" // for processing gif images + _ "image/jpeg" // for processing jpeg images + _ "image/png" // for processing png images + "math/rand" "time" From 1f087a837ed2633c66a585dff75041f82a4a9090 Mon Sep 17 00:00:00 2001 From: KN4CK3R Date: Mon, 29 Mar 2021 23:15:00 +0200 Subject: [PATCH 07/11] Execute image diff only when container is visible. --- web_src/js/features/imagediff.js | 365 ++++++++++++++++--------------- 1 file changed, 192 insertions(+), 173 deletions(-) diff --git a/web_src/js/features/imagediff.js b/web_src/js/features/imagediff.js index e84e791070cb4..d41655259d131 100644 --- a/web_src/js/features/imagediff.js +++ b/web_src/js/features/imagediff.js @@ -61,204 +61,223 @@ export default async function initImageDiff() { $('.image-diff').each(function() { const $container = $(this); - const pathAfter = $container.data('path-after'); - const pathBefore = $container.data('path-before'); - const imageInfos = [{ - loaded: false, - path: pathAfter, - $image: $container.find('img.image-after'), - $boundsInfo: $container.find('.bounds-info-after') - }, { - loaded: false, - path: pathBefore, - $image: $container.find('img.image-before'), - $boundsInfo: $container.find('.bounds-info-before') - }]; - - for (const info of imageInfos) { - if (info.$image.length > 0) { - $.ajax({ - url: info.path, - success: (data, _, jqXHR) => { - info.$image.on('load', () => { - info.loaded = true; - setReadyIfLoaded(); - }); - info.$image.attr('src', info.path); - - if (jqXHR.getResponseHeader('Content-Type') === 'image/svg+xml') { - const bounds = getDefaultSvgBoundsIfUndefined(data, info.path); - if (bounds) { - info.$image.attr('width', bounds.width); - info.$image.attr('height', bounds.height); - info.$boundsInfo.hide(); - } - } + if ($container.is(':visible')) { + onContainerVisibleHandler(); + } else { + const observer = new IntersectionObserver((entries) => { + for (const entry of entries) { + if (entry.intersectionRatio > 0) { + observer.disconnect(); + onContainerVisibleHandler(); + break; } - }); - } else { - info.loaded = true; - setReadyIfLoaded(); - } + } + }, { + root: document.documentElement + }); + observer.observe(this); } - const diffContainerWidth = $container.width() - 300; + function onContainerVisibleHandler() { + const diffContainerWidth = $container.width() - 300; + const pathAfter = $container.data('path-after'); + const pathBefore = $container.data('path-before'); + + const imageInfos = [{ + loaded: false, + path: pathAfter, + $image: $container.find('img.image-after'), + $boundsInfo: $container.find('.bounds-info-after') + }, { + loaded: false, + path: pathBefore, + $image: $container.find('img.image-before'), + $boundsInfo: $container.find('.bounds-info-before') + }]; - function setReadyIfLoaded() { - if (imageInfos[0].loaded && imageInfos[1].loaded) { - initViews(imageInfos[0].$image, imageInfos[1].$image); + for (const info of imageInfos) { + if (info.$image.length > 0) { + $.ajax({ + url: info.path, + success: (data, _, jqXHR) => { + info.$image.on('load', () => { + info.loaded = true; + setReadyIfLoaded(); + }); + info.$image.attr('src', info.path); + + if (jqXHR.getResponseHeader('Content-Type') === 'image/svg+xml') { + const bounds = getDefaultSvgBoundsIfUndefined(data, info.path); + if (bounds) { + info.$image.attr('width', bounds.width); + info.$image.attr('height', bounds.height); + info.$boundsInfo.hide(); + } + } + } + }); + } else { + info.loaded = true; + setReadyIfLoaded(); + } } - } - function initViews($imageAfter, $imageBefore) { - initSideBySide(createContext($imageAfter[0], $imageBefore[0])); - if ($imageAfter.length > 0 && $imageBefore.length > 0) { - initSwipe(createContext($imageAfter[1], $imageBefore[1])); - initOverlay(createContext($imageAfter[2], $imageBefore[2])); + function setReadyIfLoaded() { + if (imageInfos[0].loaded && imageInfos[1].loaded) { + initViews(imageInfos[0].$image, imageInfos[1].$image); + } } - $container.find('> .loader').hide(); - $container.find('> .hide').removeClass('hide'); - } + function initViews($imageAfter, $imageBefore) { + initSideBySide(createContext($imageAfter[0], $imageBefore[0])); + if ($imageAfter.length > 0 && $imageBefore.length > 0) { + initSwipe(createContext($imageAfter[1], $imageBefore[1])); + initOverlay(createContext($imageAfter[2], $imageBefore[2])); + } - function initSideBySide(sizes) { - let factor = 1; - if (sizes.max.width > (diffContainerWidth - 24) / 2) { - factor = (diffContainerWidth - 24) / 2 / sizes.max.width; + $container.find('> .loader').hide(); + $container.find('> .hide').removeClass('hide'); } - const widthChanged = sizes.image1.length !== 0 && sizes.image2.length !== 0 && sizes.image1[0].naturalWidth !== sizes.image2[0].naturalWidth; - const heightChanged = sizes.image1.length !== 0 && sizes.image2.length !== 0 && sizes.image1[0].naturalHeight !== sizes.image2[0].naturalHeight; - if (sizes.image1.length !== 0) { - $container.find('.bounds-info-after .bounds-info-width').text(`${sizes.image1[0].naturalWidth}px`).addClass(widthChanged ? 'green' : ''); - $container.find('.bounds-info-after .bounds-info-height').text(`${sizes.image1[0].naturalHeight}px`).addClass(heightChanged ? 'green' : ''); - } - if (sizes.image2.length !== 0) { - $container.find('.bounds-info-before .bounds-info-width').text(`${sizes.image2[0].naturalWidth}px`).addClass(widthChanged ? 'red' : ''); - $container.find('.bounds-info-before .bounds-info-height').text(`${sizes.image2[0].naturalHeight}px`).addClass(heightChanged ? 'red' : ''); - } + function initSideBySide(sizes) { + let factor = 1; + if (sizes.max.width > (diffContainerWidth - 24) / 2) { + factor = (diffContainerWidth - 24) / 2 / sizes.max.width; + } - sizes.image1.css({ - width: sizes.size1.width * factor, - height: sizes.size1.height * factor - }); - sizes.image1.parent().css({ - margin: `${sizes.ratio[1] * factor + 15}px ${sizes.ratio[0] * factor}px ${sizes.ratio[1] * factor}px`, - width: sizes.size1.width * factor + 2, - height: sizes.size1.height * factor + 2 - }); - sizes.image2.css({ - width: sizes.size2.width * factor, - height: sizes.size2.height * factor - }); - sizes.image2.parent().css({ - margin: `${sizes.ratio[3] * factor}px ${sizes.ratio[2] * factor}px`, - width: sizes.size2.width * factor + 2, - height: sizes.size2.height * factor + 2 - }); - } + const widthChanged = sizes.image1.length !== 0 && sizes.image2.length !== 0 && sizes.image1[0].naturalWidth !== sizes.image2[0].naturalWidth; + const heightChanged = sizes.image1.length !== 0 && sizes.image2.length !== 0 && sizes.image1[0].naturalHeight !== sizes.image2[0].naturalHeight; + if (sizes.image1.length !== 0) { + $container.find('.bounds-info-after .bounds-info-width').text(`${sizes.image1[0].naturalWidth}px`).addClass(widthChanged ? 'green' : ''); + $container.find('.bounds-info-after .bounds-info-height').text(`${sizes.image1[0].naturalHeight}px`).addClass(heightChanged ? 'green' : ''); + } + if (sizes.image2.length !== 0) { + $container.find('.bounds-info-before .bounds-info-width').text(`${sizes.image2[0].naturalWidth}px`).addClass(widthChanged ? 'red' : ''); + $container.find('.bounds-info-before .bounds-info-height').text(`${sizes.image2[0].naturalHeight}px`).addClass(heightChanged ? 'red' : ''); + } - function initSwipe(sizes) { - let factor = 1; - if (sizes.max.width > diffContainerWidth - 12) { - factor = (diffContainerWidth - 12) / sizes.max.width; + sizes.image1.css({ + width: sizes.size1.width * factor, + height: sizes.size1.height * factor + }); + sizes.image1.parent().css({ + margin: `${sizes.ratio[1] * factor + 15}px ${sizes.ratio[0] * factor}px ${sizes.ratio[1] * factor}px`, + width: sizes.size1.width * factor + 2, + height: sizes.size1.height * factor + 2 + }); + sizes.image2.css({ + width: sizes.size2.width * factor, + height: sizes.size2.height * factor + }); + sizes.image2.parent().css({ + margin: `${sizes.ratio[3] * factor}px ${sizes.ratio[2] * factor}px`, + width: sizes.size2.width * factor + 2, + height: sizes.size2.height * factor + 2 + }); } - sizes.image1.css({ - width: sizes.size1.width * factor, - height: sizes.size1.height * factor - }); - sizes.image1.parent().css({ - margin: `0px ${sizes.ratio[0] * factor}px`, - width: sizes.size1.width * factor + 2, - height: sizes.size1.height * factor + 2 - }); - sizes.image1.parent().parent().css({ - padding: `${sizes.ratio[1] * factor}px 0 0 0`, - width: sizes.max.width * factor + 2 - }); - sizes.image2.css({ - width: sizes.size2.width * factor, - height: sizes.size2.height * factor - }); - sizes.image2.parent().css({ - margin: `${sizes.ratio[3] * factor}px ${sizes.ratio[2] * factor}px`, - width: sizes.size2.width * factor + 2, - height: sizes.size2.height * factor + 2 - }); - sizes.image2.parent().parent().css({ - width: sizes.max.width * factor + 2, - height: sizes.max.height * factor + 2 - }); - $container.find('.diff-swipe').css({ - width: sizes.max.width * factor + 2, - height: sizes.max.height * factor + 4 - }); - $container.find('.swipe-bar').on('mousedown', function(e) { - e.preventDefault(); + function initSwipe(sizes) { + let factor = 1; + if (sizes.max.width > diffContainerWidth - 12) { + factor = (diffContainerWidth - 12) / sizes.max.width; + } - const $swipeBar = $(this); - const $swipeFrame = $swipeBar.parent(); - const width = $swipeFrame.width() - $swipeBar.width() - 2; + sizes.image1.css({ + width: sizes.size1.width * factor, + height: sizes.size1.height * factor + }); + sizes.image1.parent().css({ + margin: `0px ${sizes.ratio[0] * factor}px`, + width: sizes.size1.width * factor + 2, + height: sizes.size1.height * factor + 2 + }); + sizes.image1.parent().parent().css({ + padding: `${sizes.ratio[1] * factor}px 0 0 0`, + width: sizes.max.width * factor + 2 + }); + sizes.image2.css({ + width: sizes.size2.width * factor, + height: sizes.size2.height * factor + }); + sizes.image2.parent().css({ + margin: `${sizes.ratio[3] * factor}px ${sizes.ratio[2] * factor}px`, + width: sizes.size2.width * factor + 2, + height: sizes.size2.height * factor + 2 + }); + sizes.image2.parent().parent().css({ + width: sizes.max.width * factor + 2, + height: sizes.max.height * factor + 2 + }); + $container.find('.diff-swipe').css({ + width: sizes.max.width * factor + 2, + height: sizes.max.height * factor + 4 + }); + $container.find('.swipe-bar').on('mousedown', function(e) { + e.preventDefault(); - $(document).on('mousemove.diff-swipe', (e2) => { - e2.preventDefault(); + const $swipeBar = $(this); + const $swipeFrame = $swipeBar.parent(); + const width = $swipeFrame.width() - $swipeBar.width() - 2; - const value = Math.max(0, Math.min(e2.clientX - $swipeFrame.offset().left, width)); + $(document).on('mousemove.diff-swipe', (e2) => { + e2.preventDefault(); - $swipeBar.css({ - left: value - }); - $container.find('.swipe-container').css({ - width: $swipeFrame.width() - value - }); - $(document).on('mouseup.diff-swipe', () => { - $(document).off('.diff-swipe'); + const value = Math.max(0, Math.min(e2.clientX - $swipeFrame.offset().left, width)); + + $swipeBar.css({ + left: value + }); + $container.find('.swipe-container').css({ + width: $swipeFrame.width() - value + }); + $(document).on('mouseup.diff-swipe', () => { + $(document).off('.diff-swipe'); + }); }); }); - }); - } - - function initOverlay(sizes) { - let factor = 1; - if (sizes.max.width > diffContainerWidth - 12) { - factor = (diffContainerWidth - 12) / sizes.max.width; } - sizes.image1.css({ - width: sizes.size1.width * factor, - height: sizes.size1.height * factor - }); - sizes.image2.css({ - width: sizes.size2.width * factor, - height: sizes.size2.height * factor - }); - sizes.image1.parent().css({ - margin: `${sizes.ratio[1] * factor}px ${sizes.ratio[0] * factor}px`, - width: sizes.size1.width * factor + 2, - height: sizes.size1.height * factor + 2 - }); - sizes.image2.parent().css({ - margin: `${sizes.ratio[3] * factor}px ${sizes.ratio[2] * factor}px`, - width: sizes.size2.width * factor + 2, - height: sizes.size2.height * factor + 2 - }); - sizes.image2.parent().parent().css({ - width: sizes.max.width * factor + 2, - height: sizes.max.height * factor + 2 - }); - $container.find('.onion-skin').css({ - width: sizes.max.width * factor + 2, - height: sizes.max.height * factor + 4 - }); + function initOverlay(sizes) { + let factor = 1; + if (sizes.max.width > diffContainerWidth - 12) { + factor = (diffContainerWidth - 12) / sizes.max.width; + } - const $range = $container.find("input[type='range'"); - const onInput = () => sizes.image1.parent().css({ - opacity: $range.val() / 100 - }); - $range.on('input', onInput); - onInput(); + sizes.image1.css({ + width: sizes.size1.width * factor, + height: sizes.size1.height * factor + }); + sizes.image2.css({ + width: sizes.size2.width * factor, + height: sizes.size2.height * factor + }); + sizes.image1.parent().css({ + margin: `${sizes.ratio[1] * factor}px ${sizes.ratio[0] * factor}px`, + width: sizes.size1.width * factor + 2, + height: sizes.size1.height * factor + 2 + }); + sizes.image2.parent().css({ + margin: `${sizes.ratio[3] * factor}px ${sizes.ratio[2] * factor}px`, + width: sizes.size2.width * factor + 2, + height: sizes.size2.height * factor + 2 + }); + sizes.image2.parent().parent().css({ + width: sizes.max.width * factor + 2, + height: sizes.max.height * factor + 2 + }); + $container.find('.onion-skin').css({ + width: sizes.max.width * factor + 2, + height: sizes.max.height * factor + 4 + }); + + const $range = $container.find("input[type='range'"); + const onInput = () => sizes.image1.parent().css({ + opacity: $range.val() / 100 + }); + $range.on('input', onInput); + onInput(); + } } }); } From af3a6aee30b3d87f2028eb419f5e9add1a0fd6ad Mon Sep 17 00:00:00 2001 From: silverwind Date: Fri, 21 May 2021 18:21:25 +0200 Subject: [PATCH 08/11] add margin to spinner --- templates/repo/diff/image_diff.tmpl | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/templates/repo/diff/image_diff.tmpl b/templates/repo/diff/image_diff.tmpl index f6486ca19874f..33fa8c9e2c40f 100644 --- a/templates/repo/diff/image_diff.tmpl +++ b/templates/repo/diff/image_diff.tmpl @@ -76,7 +76,7 @@
    {{end}}
    -
    +
    {{end}}
    - {{if or $isImage $isCsv}} -
    + {{if $showFileViewToggle}} +
    {{if $isImage}} {{template "repo/diff/image_diff" dict "file" . "root" $ "blobBase" $blobBase "blobHead" $blobHead}} diff --git a/web_src/js/features/imagediff.js b/web_src/js/features/imagediff.js index d41655259d131..67e9548596ee5 100644 --- a/web_src/js/features/imagediff.js +++ b/web_src/js/features/imagediff.js @@ -62,222 +62,203 @@ export default async function initImageDiff() { $('.image-diff').each(function() { const $container = $(this); - if ($container.is(':visible')) { - onContainerVisibleHandler(); - } else { - const observer = new IntersectionObserver((entries) => { - for (const entry of entries) { - if (entry.intersectionRatio > 0) { - observer.disconnect(); - onContainerVisibleHandler(); - break; - } - } - }, { - root: document.documentElement - }); - observer.observe(this); - } - - function onContainerVisibleHandler() { - const diffContainerWidth = $container.width() - 300; - const pathAfter = $container.data('path-after'); - const pathBefore = $container.data('path-before'); + const diffContainerWidth = $container.width() - 300; + const pathAfter = $container.data('path-after'); + const pathBefore = $container.data('path-before'); - const imageInfos = [{ - loaded: false, - path: pathAfter, - $image: $container.find('img.image-after'), - $boundsInfo: $container.find('.bounds-info-after') - }, { - loaded: false, - path: pathBefore, - $image: $container.find('img.image-before'), - $boundsInfo: $container.find('.bounds-info-before') - }]; + const imageInfos = [{ + loaded: false, + path: pathAfter, + $image: $container.find('img.image-after'), + $boundsInfo: $container.find('.bounds-info-after') + }, { + loaded: false, + path: pathBefore, + $image: $container.find('img.image-before'), + $boundsInfo: $container.find('.bounds-info-before') + }]; - for (const info of imageInfos) { - if (info.$image.length > 0) { - $.ajax({ - url: info.path, - success: (data, _, jqXHR) => { - info.$image.on('load', () => { - info.loaded = true; - setReadyIfLoaded(); - }); - info.$image.attr('src', info.path); + for (const info of imageInfos) { + if (info.$image.length > 0) { + $.ajax({ + url: info.path, + success: (data, _, jqXHR) => { + info.$image.on('load', () => { + info.loaded = true; + setReadyIfLoaded(); + }); + info.$image.attr('src', info.path); - if (jqXHR.getResponseHeader('Content-Type') === 'image/svg+xml') { - const bounds = getDefaultSvgBoundsIfUndefined(data, info.path); - if (bounds) { - info.$image.attr('width', bounds.width); - info.$image.attr('height', bounds.height); - info.$boundsInfo.hide(); - } + if (jqXHR.getResponseHeader('Content-Type') === 'image/svg+xml') { + const bounds = getDefaultSvgBoundsIfUndefined(data, info.path); + if (bounds) { + info.$image.attr('width', bounds.width); + info.$image.attr('height', bounds.height); + info.$boundsInfo.hide(); } } - }); - } else { - info.loaded = true; - setReadyIfLoaded(); - } + } + }); + } else { + info.loaded = true; + setReadyIfLoaded(); } + } - function setReadyIfLoaded() { - if (imageInfos[0].loaded && imageInfos[1].loaded) { - initViews(imageInfos[0].$image, imageInfos[1].$image); - } + function setReadyIfLoaded() { + if (imageInfos[0].loaded && imageInfos[1].loaded) { + initViews(imageInfos[0].$image, imageInfos[1].$image); } + } - function initViews($imageAfter, $imageBefore) { - initSideBySide(createContext($imageAfter[0], $imageBefore[0])); - if ($imageAfter.length > 0 && $imageBefore.length > 0) { - initSwipe(createContext($imageAfter[1], $imageBefore[1])); - initOverlay(createContext($imageAfter[2], $imageBefore[2])); - } - - $container.find('> .loader').hide(); - $container.find('> .hide').removeClass('hide'); + function initViews($imageAfter, $imageBefore) { + initSideBySide(createContext($imageAfter[0], $imageBefore[0])); + if ($imageAfter.length > 0 && $imageBefore.length > 0) { + initSwipe(createContext($imageAfter[1], $imageBefore[1])); + initOverlay(createContext($imageAfter[2], $imageBefore[2])); } - function initSideBySide(sizes) { - let factor = 1; - if (sizes.max.width > (diffContainerWidth - 24) / 2) { - factor = (diffContainerWidth - 24) / 2 / sizes.max.width; - } + $container.find('> .loader').hide(); + $container.find('> .hide').removeClass('hide'); + } - const widthChanged = sizes.image1.length !== 0 && sizes.image2.length !== 0 && sizes.image1[0].naturalWidth !== sizes.image2[0].naturalWidth; - const heightChanged = sizes.image1.length !== 0 && sizes.image2.length !== 0 && sizes.image1[0].naturalHeight !== sizes.image2[0].naturalHeight; - if (sizes.image1.length !== 0) { - $container.find('.bounds-info-after .bounds-info-width').text(`${sizes.image1[0].naturalWidth}px`).addClass(widthChanged ? 'green' : ''); - $container.find('.bounds-info-after .bounds-info-height').text(`${sizes.image1[0].naturalHeight}px`).addClass(heightChanged ? 'green' : ''); - } - if (sizes.image2.length !== 0) { - $container.find('.bounds-info-before .bounds-info-width').text(`${sizes.image2[0].naturalWidth}px`).addClass(widthChanged ? 'red' : ''); - $container.find('.bounds-info-before .bounds-info-height').text(`${sizes.image2[0].naturalHeight}px`).addClass(heightChanged ? 'red' : ''); - } + function initSideBySide(sizes) { + let factor = 1; + if (sizes.max.width > (diffContainerWidth - 24) / 2) { + factor = (diffContainerWidth - 24) / 2 / sizes.max.width; + } - sizes.image1.css({ - width: sizes.size1.width * factor, - height: sizes.size1.height * factor - }); - sizes.image1.parent().css({ - margin: `${sizes.ratio[1] * factor + 15}px ${sizes.ratio[0] * factor}px ${sizes.ratio[1] * factor}px`, - width: sizes.size1.width * factor + 2, - height: sizes.size1.height * factor + 2 - }); - sizes.image2.css({ - width: sizes.size2.width * factor, - height: sizes.size2.height * factor - }); - sizes.image2.parent().css({ - margin: `${sizes.ratio[3] * factor}px ${sizes.ratio[2] * factor}px`, - width: sizes.size2.width * factor + 2, - height: sizes.size2.height * factor + 2 - }); + const widthChanged = sizes.image1.length !== 0 && sizes.image2.length !== 0 && sizes.image1[0].naturalWidth !== sizes.image2[0].naturalWidth; + const heightChanged = sizes.image1.length !== 0 && sizes.image2.length !== 0 && sizes.image1[0].naturalHeight !== sizes.image2[0].naturalHeight; + if (sizes.image1.length !== 0) { + $container.find('.bounds-info-after .bounds-info-width').text(`${sizes.image1[0].naturalWidth}px`).addClass(widthChanged ? 'green' : ''); + $container.find('.bounds-info-after .bounds-info-height').text(`${sizes.image1[0].naturalHeight}px`).addClass(heightChanged ? 'green' : ''); + } + if (sizes.image2.length !== 0) { + $container.find('.bounds-info-before .bounds-info-width').text(`${sizes.image2[0].naturalWidth}px`).addClass(widthChanged ? 'red' : ''); + $container.find('.bounds-info-before .bounds-info-height').text(`${sizes.image2[0].naturalHeight}px`).addClass(heightChanged ? 'red' : ''); } - function initSwipe(sizes) { - let factor = 1; - if (sizes.max.width > diffContainerWidth - 12) { - factor = (diffContainerWidth - 12) / sizes.max.width; - } + sizes.image1.css({ + width: sizes.size1.width * factor, + height: sizes.size1.height * factor + }); + sizes.image1.parent().css({ + margin: `${sizes.ratio[1] * factor + 15}px ${sizes.ratio[0] * factor}px ${sizes.ratio[1] * factor}px`, + width: sizes.size1.width * factor + 2, + height: sizes.size1.height * factor + 2 + }); + sizes.image2.css({ + width: sizes.size2.width * factor, + height: sizes.size2.height * factor + }); + sizes.image2.parent().css({ + margin: `${sizes.ratio[3] * factor}px ${sizes.ratio[2] * factor}px`, + width: sizes.size2.width * factor + 2, + height: sizes.size2.height * factor + 2 + }); + } - sizes.image1.css({ - width: sizes.size1.width * factor, - height: sizes.size1.height * factor - }); - sizes.image1.parent().css({ - margin: `0px ${sizes.ratio[0] * factor}px`, - width: sizes.size1.width * factor + 2, - height: sizes.size1.height * factor + 2 - }); - sizes.image1.parent().parent().css({ - padding: `${sizes.ratio[1] * factor}px 0 0 0`, - width: sizes.max.width * factor + 2 - }); - sizes.image2.css({ - width: sizes.size2.width * factor, - height: sizes.size2.height * factor - }); - sizes.image2.parent().css({ - margin: `${sizes.ratio[3] * factor}px ${sizes.ratio[2] * factor}px`, - width: sizes.size2.width * factor + 2, - height: sizes.size2.height * factor + 2 - }); - sizes.image2.parent().parent().css({ - width: sizes.max.width * factor + 2, - height: sizes.max.height * factor + 2 - }); - $container.find('.diff-swipe').css({ - width: sizes.max.width * factor + 2, - height: sizes.max.height * factor + 4 - }); - $container.find('.swipe-bar').on('mousedown', function(e) { - e.preventDefault(); + function initSwipe(sizes) { + let factor = 1; + if (sizes.max.width > diffContainerWidth - 12) { + factor = (diffContainerWidth - 12) / sizes.max.width; + } - const $swipeBar = $(this); - const $swipeFrame = $swipeBar.parent(); - const width = $swipeFrame.width() - $swipeBar.width() - 2; + sizes.image1.css({ + width: sizes.size1.width * factor, + height: sizes.size1.height * factor + }); + sizes.image1.parent().css({ + margin: `0px ${sizes.ratio[0] * factor}px`, + width: sizes.size1.width * factor + 2, + height: sizes.size1.height * factor + 2 + }); + sizes.image1.parent().parent().css({ + padding: `${sizes.ratio[1] * factor}px 0 0 0`, + width: sizes.max.width * factor + 2 + }); + sizes.image2.css({ + width: sizes.size2.width * factor, + height: sizes.size2.height * factor + }); + sizes.image2.parent().css({ + margin: `${sizes.ratio[3] * factor}px ${sizes.ratio[2] * factor}px`, + width: sizes.size2.width * factor + 2, + height: sizes.size2.height * factor + 2 + }); + sizes.image2.parent().parent().css({ + width: sizes.max.width * factor + 2, + height: sizes.max.height * factor + 2 + }); + $container.find('.diff-swipe').css({ + width: sizes.max.width * factor + 2, + height: sizes.max.height * factor + 4 + }); + $container.find('.swipe-bar').on('mousedown', function(e) { + e.preventDefault(); - $(document).on('mousemove.diff-swipe', (e2) => { - e2.preventDefault(); + const $swipeBar = $(this); + const $swipeFrame = $swipeBar.parent(); + const width = $swipeFrame.width() - $swipeBar.width() - 2; - const value = Math.max(0, Math.min(e2.clientX - $swipeFrame.offset().left, width)); + $(document).on('mousemove.diff-swipe', (e2) => { + e2.preventDefault(); - $swipeBar.css({ - left: value - }); - $container.find('.swipe-container').css({ - width: $swipeFrame.width() - value - }); - $(document).on('mouseup.diff-swipe', () => { - $(document).off('.diff-swipe'); - }); + const value = Math.max(0, Math.min(e2.clientX - $swipeFrame.offset().left, width)); + + $swipeBar.css({ + left: value + }); + $container.find('.swipe-container').css({ + width: $swipeFrame.width() - value + }); + $(document).on('mouseup.diff-swipe', () => { + $(document).off('.diff-swipe'); }); }); - } + }); + } - function initOverlay(sizes) { - let factor = 1; - if (sizes.max.width > diffContainerWidth - 12) { - factor = (diffContainerWidth - 12) / sizes.max.width; - } + function initOverlay(sizes) { + let factor = 1; + if (sizes.max.width > diffContainerWidth - 12) { + factor = (diffContainerWidth - 12) / sizes.max.width; + } - sizes.image1.css({ - width: sizes.size1.width * factor, - height: sizes.size1.height * factor - }); - sizes.image2.css({ - width: sizes.size2.width * factor, - height: sizes.size2.height * factor - }); - sizes.image1.parent().css({ - margin: `${sizes.ratio[1] * factor}px ${sizes.ratio[0] * factor}px`, - width: sizes.size1.width * factor + 2, - height: sizes.size1.height * factor + 2 - }); - sizes.image2.parent().css({ - margin: `${sizes.ratio[3] * factor}px ${sizes.ratio[2] * factor}px`, - width: sizes.size2.width * factor + 2, - height: sizes.size2.height * factor + 2 - }); - sizes.image2.parent().parent().css({ - width: sizes.max.width * factor + 2, - height: sizes.max.height * factor + 2 - }); - $container.find('.onion-skin').css({ - width: sizes.max.width * factor + 2, - height: sizes.max.height * factor + 4 - }); + sizes.image1.css({ + width: sizes.size1.width * factor, + height: sizes.size1.height * factor + }); + sizes.image2.css({ + width: sizes.size2.width * factor, + height: sizes.size2.height * factor + }); + sizes.image1.parent().css({ + margin: `${sizes.ratio[1] * factor}px ${sizes.ratio[0] * factor}px`, + width: sizes.size1.width * factor + 2, + height: sizes.size1.height * factor + 2 + }); + sizes.image2.parent().css({ + margin: `${sizes.ratio[3] * factor}px ${sizes.ratio[2] * factor}px`, + width: sizes.size2.width * factor + 2, + height: sizes.size2.height * factor + 2 + }); + sizes.image2.parent().parent().css({ + width: sizes.max.width * factor + 2, + height: sizes.max.height * factor + 2 + }); + $container.find('.onion-skin').css({ + width: sizes.max.width * factor + 2, + height: sizes.max.height * factor + 4 + }); - const $range = $container.find("input[type='range'"); - const onInput = () => sizes.image1.parent().css({ - opacity: $range.val() / 100 - }); - $range.on('input', onInput); - onInput(); - } + const $range = $container.find("input[type='range'"); + const onInput = () => sizes.image1.parent().css({ + opacity: $range.val() / 100 + }); + $range.on('input', onInput); + onInput(); } }); } From 20d9cbb628a55214242a0c414c880d0c173a9f63 Mon Sep 17 00:00:00 2001 From: KN4CK3R Date: Tue, 25 May 2021 17:39:15 +0000 Subject: [PATCH 11/11] Show image diff on incomplete diff. --- templates/repo/diff/box.tmpl | 151 +++++++++++++++-------------------- 1 file changed, 64 insertions(+), 87 deletions(-) diff --git a/templates/repo/diff/box.tmpl b/templates/repo/diff/box.tmpl index 33862ea80ebd0..1ca2dcc4d8144 100644 --- a/templates/repo/diff/box.tmpl +++ b/templates/repo/diff/box.tmpl @@ -44,107 +44,84 @@ {{end}} {{range $i, $file := .Diff.Files}} - {{if $file.IsIncomplete}} -
    -

    + {{$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)}} +
    +

    +
    {{svg "octicon-chevron-down" 18}} -
    - {{template "repo/diff/stats" dict "file" . "root" $}} -
    - {{$file.Name}} -
    -
    - {{if $file.IsIncompleteLineTooLong}} - {{$.i18n.Tr "repo.diff.file_suppressed_line_too_long"}} - {{else}} - {{$.i18n.Tr "repo.diff.file_suppressed"}} - {{end}} -
    - {{if $file.IsProtected}} - {{$.i18n.Tr "repo.diff.protected"}} - {{end}} - {{if and (not $file.IsSubmodule) (not $.PageIsWiki)}} - {{if $file.IsDeleted}} - {{$.i18n.Tr "repo.diff.view_file"}} - {{else}} - {{$.i18n.Tr "repo.diff.view_file"}} - {{end}} - {{end}} -
    -

    -
    - {{else}} -
    -

    -
    - {{$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 $isCsv}} - - {{svg "octicon-chevron-down" 18}} - -
    - {{if $file.IsBin}} - - {{$.i18n.Tr "repo.diff.bin"}} - - {{else}} - {{template "repo/diff/stats" dict "file" . "root" $}} - {{end}} -
    - {{if $file.IsRenamed}}{{$file.OldName}} → {{end}}{{$file.Name}}{{if .IsLFSFile}} ({{$.i18n.Tr "repo.stored_lfs"}}){{end}} -
    -
    - {{if $showFileViewToggle}} -
    - {{svg "octicon-code"}} - {{svg "octicon-file"}} -
    - {{end}} - {{if $file.IsProtected}} - {{$.i18n.Tr "repo.diff.protected"}} - {{end}} - {{if and (not $file.IsSubmodule) (not $.PageIsWiki)}} - {{if $file.IsDeleted}} - {{$.i18n.Tr "repo.diff.view_file"}} - {{else}} - {{$.i18n.Tr "repo.diff.view_file"}} - {{end}} - {{end}} -
    -

    -
    -
    +
    {{if $file.IsBin}} -
    {{$.i18n.Tr "repo.diff.bin_not_shown"}}
    + + {{$.i18n.Tr "repo.diff.bin"}} + {{else}} -

    - {{if $.IsSplitStyle}} - {{template "repo/diff/section_split" dict "file" . "root" $}} - {{else}} - {{template "repo/diff/section_unified" dict "file" . "root" $}} - {{end}} -
    + {{template "repo/diff/stats" dict "file" . "root" $}} {{end}}
    + {{if $file.IsRenamed}}{{$file.OldName}} → {{end}}{{$file.Name}}{{if .IsLFSFile}} ({{$.i18n.Tr "repo.stored_lfs"}}){{end}} +
    +
    {{if $showFileViewToggle}} -
    - - {{if $isImage}} - {{template "repo/diff/image_diff" dict "file" . "root" $ "blobBase" $blobBase "blobHead" $blobHead}} +
    + {{svg "octicon-code"}} + {{svg "octicon-file"}} +
    + {{end}} + {{if $file.IsProtected}} + {{$.i18n.Tr "repo.diff.protected"}} + {{end}} + {{if and (not $file.IsSubmodule) (not $.PageIsWiki)}} + {{if $file.IsDeleted}} + {{$.i18n.Tr "repo.diff.view_file"}} + {{else}} + {{$.i18n.Tr "repo.diff.view_file"}} + {{end}} + {{end}} + + +
    +
    + {{if or $file.IsIncomplete $file.IsBin}} +
    + {{if $file.IsIncomplete}} + {{if $file.IsIncompleteLineTooLong}} + {{$.i18n.Tr "repo.diff.file_suppressed_line_too_long"}} {{else}} - {{template "repo/diff/csv_diff" dict "file" . "root" $}} + {{$.i18n.Tr "repo.diff.file_suppressed"}} {{end}} -
    + {{else}} + {{$.i18n.Tr "repo.diff.bin_not_shown"}} + {{end}}
    + {{else}} + + {{if $.IsSplitStyle}} + {{template "repo/diff/section_split" dict "file" . "root" $}} + {{else}} + {{template "repo/diff/section_unified" dict "file" . "root" $}} + {{end}} +
    {{end}}
    + {{if $showFileViewToggle}} +
    + + {{if $isImage}} + {{template "repo/diff/image_diff" dict "file" . "root" $ "blobBase" $blobBase "blobHead" $blobHead}} + {{else}} + {{template "repo/diff/csv_diff" dict "file" . "root" $}} + {{end}} +
    +
    + {{end}}
    - {{end}} +
    {{end}} {{if .Diff.IsIncomplete}}