Direct avatar rendering (#13649)

* Direct avatar rendering

This adds new template helpers for avatar rendering which output image
elements with direct links to avatars which makes them cacheable by the
browsers.

This should be a major performance improvment for pages with many avatars.

* fix avatars of other user's profile pages

* fix top border on user avatar name

* uncircle avatars

* remove old incomplete avatar selector

* use title attribute for name and add it back on blame

* minor refactor

* tweak comments

* fix url path join and adjust test to new result

* dedupe functions

5 files changed, 25 insertions, 16 deletions

diff --git a/templates/user/dashboard/feeds.tmpl b/templates/user/dashboard/feeds.tmpl
index 739caeba5f..76c751de8a 100644
--- a/templates/user/dashboard/feeds.tmpl
+++ b/templates/user/dashboard/feeds.tmpl
@@ -1,7 +1,7 @@
 {{range .Feeds}}
 	<div class="news">
 		<div class="ui left">
-			<img class="ui avatar image" src="{{.GetActAvatar}}" alt="">
+			{{avatar .ActUser}}
 		</div>
 		<div class="ui grid">
 			<div class="ui fourteen wide column">
@@ -84,7 +84,13 @@
 								{{if $push.Commits}}
 									{{range $push.Commits}}
 										{{ $commitLink := printf "%s/commit/%s" $repoLink .Sha1}}
-										<li><img class="img-8" src="{{$push.AvatarLink .AuthorEmail}}"> <a class="commit-id" href="{{$commitLink}}">{{ShortSha .Sha1}}</a> <span class="text truncate light grey">{{RenderCommitMessage .Message $repoLink $.ComposeMetas}}</span></li>
+										<li>
+											{{avatarByEmail .AuthorEmail .AuthorName 28 "img-8 mr-2"}}
+											<a class="commit-id mr-2" href="{{$commitLink}}">{{ShortSha .Sha1}}</a>
+											<span class="text truncate light grey">
+												{{RenderCommitMessage .Message $repoLink $.ComposeMetas}}
+											</span>
+										</li>
 									{{end}}
 								{{end}}
 								{{if and (gt $push.Len 1) $push.CompareURL}}<li><a href="{{AppSubUrl}}/{{$push.CompareURL}}">{{$.i18n.Tr "action.compare_commits" $push.Len}} »</a></li>{{end}}
diff --git a/templates/user/dashboard/navbar.tmpl b/templates/user/dashboard/navbar.tmpl
index 0fc328e9c6..030219c816 100644
--- a/templates/user/dashboard/navbar.tmpl
+++ b/templates/user/dashboard/navbar.tmpl
@@ -3,7 +3,7 @@
 		<div class="item">
 			<div class="ui floating dropdown link jump">
 				<span class="text">
-					<img class="ui avatar image" src="{{.ContextUser.RelAvatarLink}}" title="{{.ContextUser.Name}}" width="28" height="28">
+					{{avatar .ContextUser}}
 					{{.ContextUser.ShortName 20}}
 					{{if .ContextUser.IsOrganization}}
 						<span class="org-visibility">
@@ -19,12 +19,11 @@
 					</div>
 					<div class="scrolling menu items">
 						<a class="{{if eq .ContextUser.ID .SignedUser.ID}}active selected{{end}} item" href="{{AppSubUrl}}/{{if .PageIsIssues}}issues{{else if .PageIsPulls}}pulls{{else if .PageIsMilestonesDashboard}}milestones{{end}}">
-							<img class="ui avatar image" src="{{.SignedUser.RelAvatarLink}}" width="28" height="28">
-							{{.SignedUser.Name}}
+							{{avatar .SignedUser}}
 						</a>
 						{{range .Orgs}}
 							<a class="{{if eq $.ContextUser.ID .ID}}active selected{{end}} item" title="{{.Name}}" href="{{AppSubUrl}}/org/{{.Name}}/{{if $.PageIsIssues}}issues{{else if $.PageIsPulls}}pulls{{else if $.PageIsMilestonesDashboard}}milestones{{else}}dashboard{{end}}">
-								<img class="ui avatar image" src="{{.RelAvatarLink}}" width="28" height="28">
+								{{avatar .}}
 								{{.ShortName 20}}
 								<span class="org-visibility">
 									{{if .Visibility.IsLimited}}<div class="ui orange tiny horizontal label">{{$.i18n.Tr "org.settings.visibility.limited_shortname"}}</div>{{end}}
diff --git a/templates/user/profile.tmpl b/templates/user/profile.tmpl
index 12498868f4..12e1459764 100644
--- a/templates/user/profile.tmpl
+++ b/templates/user/profile.tmpl
@@ -6,19 +6,19 @@
 				<div class="ui card">
 					{{if eq .SignedUserName .Owner.Name}}
 						<a class="image poping up" href="{{AppSubUrl}}/user/settings" id="profile-avatar" data-content="{{.i18n.Tr "user.change_avatar"}}" data-variation="inverted tiny" data-position="bottom center">
-							<img src="{{.Owner.SizedRelAvatarLink 290}}" title="{{.Owner.Name}}" height="290" width="290"/>
+							{{avatar .Owner 290}}
 						</a>
 					{{else}}
-						<span class="image">
-							<img src="{{.Owner.SizedRelAvatarLink 290}}" title="{{.Owner.Name}}" height="290" width="290"/>
+						<span class="image" id="profile-avatar">
+							{{avatar .Owner 290}}
 						</span>
 					{{end}}
-					<div class="content word-break">
+					<div class="content word-break profile-avatar-name">
 						{{if .Owner.FullName}}<span class="header text center">{{.Owner.FullName}}</span>{{end}}
 						<span class="username text center">{{.Owner.Name}}</span>
 					</div>
 					<div class="extra content word-break">
-						<ul class="text black">
+						<ul>
 							{{if .Owner.Location}}
 								<li>{{svg "octicon-location"}} {{.Owner.Location}}</li>
 							{{end}}
@@ -54,7 +54,9 @@
 								{{range .Orgs}}
 									{{if (or .Visibility.IsPublic (and ($.SignedUser) (or .Visibility.IsLimited (and (.HasMemberWithUserID $.SignedUserID) .Visibility.IsPrivate) ($.IsAdmin))))}}
 									<li>
-										<a href="{{.HomeLink}}"><img class="ui image poping up" src="{{.RelAvatarLink}}" data-content="{{.Name}}" data-position="top center" data-variation="tiny inverted"></a>
+										<a class="poping up" href="{{.HomeLink}}" data-content="{{.Name}}" data-position="top center" data-variation="tiny inverted">
+											{{avatar .}}
+										</a>
 									</li>
 									{{end}}
 								{{end}}
diff --git a/templates/user/project.tmpl b/templates/user/project.tmpl
index d4db08a77f..b444783dbb 100644
--- a/templates/user/project.tmpl
+++ b/templates/user/project.tmpl
@@ -14,17 +14,19 @@
 						<div class="ui selection owner dropdown">
 							<input type="hidden" id="uid" name="uid" value="{{.ContextUser.ID}}" required>
 							<span class="text" title="{{.ContextUser.Name}}">
-								<img class="ui mini image" src="{{.ContextUser.RelAvatarLink}}">
+								{{avatar .ContextUser 28 "mini"}}
 								{{.ContextUser.ShortName 20}}
 							</span>
 							{{svg "octicon-triangle-down" 14 "dropdown icon"}}
 							<div class="menu">
 								<div class="item" data-value="{{.SignedUser.ID}}" title="{{.SignedUser.Name}}">
-									<img class="ui mini image" src="{{.SignedUser.RelAvatarLink}}"> {{.SignedUser.ShortName 20}}
+									{{avatar .SignedUser 28 "mini"}}
+									{{.SignedUser.ShortName 20}}
 								</div>
 								{{range .Orgs}}
 								<div class="item" data-value="{{.ID}}" title="{{.Name}}">
-									<img class="ui mini image" src="{{.RelAvatarLink}}"> {{.ShortName 20}}
+									{{avatar . 28 "mini"}}
+									{{.ShortName 20}}
 								</div>
 								{{end}}
 							</div>
diff --git a/templates/user/settings/organization.tmpl b/templates/user/settings/organization.tmpl
index 8d03ddead9..07b56b90e8 100644
--- a/templates/user/settings/organization.tmpl
+++ b/templates/user/settings/organization.tmpl
@@ -22,7 +22,7 @@
 								<button type="submit" class="ui blue small button" name="uid" value="{{.ID}}">{{$.i18n.Tr "org.members.leave"}}</button>
 							</form>
 						</div>
-						<img class="ui mini image" src="{{.RelAvatarLink}}">
+						{{avatar . 28 "mini"}}
 						<div class="content">
 								<a href="{{.HomeLink}}">{{.Name}}</a>
 						</div>