Use auto-updating, natively hoverable, localized time elements

- Added GitHub’s `relative-time` element
- Converted all formatted timestamps to use this element
- No more flashes of unstyled content around time elements
- These elements have native tooltips that show the full timestamp and are localized using the HTML’s `lang` property
- Relative (e.g. the activities in the dashboard) and duration (e.g. server uptime in the admin page) time elements are auto-updated to keep up with the current time without refreshing the page
- Deleted code that is not needed anymore, such as `formatting.js` and simplified `since.go`

Signed-off-by: Yarden Shoham <[email protected]>

Author: yardenshoham

modules/timeutil/since.go

@@ -6,11 +6,9 @@ package timeutil
 import (
 	"fmt"
 	"html/template"
-	"math"
 	"strings"
 	"time"
 
-	"code.gitea.io/gitea/modules/setting"
 	"code.gitea.io/gitea/modules/translation"
 )
 
@@ -24,10 +22,6 @@ const (
 	Year   = 12 * Month
 )
 
-func round(s float64) int64 {
-	return int64(math.Round(s))
-}
-
 func computeTimeDiffFloor(diff int64, lang translation.Locale) (int64, string) {
 	diffStr := ""
 	switch {
@@ -86,94 +80,6 @@ func computeTimeDiffFloor(diff int64, lang translation.Locale) (int64, string) {
 	return diff, diffStr
 }
 
-func computeTimeDiff(diff int64, lang translation.Locale) (int64, string) {
-	diffStr := ""
-	switch {
-	case diff <= 0:
-		diff = 0
-		diffStr = lang.Tr("tool.now")
-	case diff < 2:
-		diff = 0
-		diffStr = lang.Tr("tool.1s")
-	case diff < 1*Minute:
-		diffStr = lang.Tr("tool.seconds", diff)
-		diff = 0
-
-	case diff < Minute+Minute/2:
-		diff -= 1 * Minute
-		diffStr = lang.Tr("tool.1m")
-	case diff < 1*Hour:
-		minutes := round(float64(diff) / Minute)
-		if minutes > 1 {
-			diffStr = lang.Tr("tool.minutes", minutes)
-		} else {
-			diffStr = lang.Tr("tool.1m")
-		}
-		diff -= diff / Minute * Minute
-
-	case diff < Hour+Hour/2:
-		diff -= 1 * Hour
-		diffStr = lang.Tr("tool.1h")
-	case diff < 1*Day:
-		hours := round(float64(diff) / Hour)
-		if hours > 1 {
-			diffStr = lang.Tr("tool.hours", hours)
-		} else {
-			diffStr = lang.Tr("tool.1h")
-		}
-		diff -= diff / Hour * Hour
-
-	case diff < Day+Day/2:
-		diff -= 1 * Day
-		diffStr = lang.Tr("tool.1d")
-	case diff < 1*Week:
-		days := round(float64(diff) / Day)
-		if days > 1 {
-			diffStr = lang.Tr("tool.days", days)
-		} else {
-			diffStr = lang.Tr("tool.1d")
-		}
-		diff -= diff / Day * Day
-
-	case diff < Week+Week/2:
-		diff -= 1 * Week
-		diffStr = lang.Tr("tool.1w")
-	case diff < 1*Month:
-		weeks := round(float64(diff) / Week)
-		if weeks > 1 {
-			diffStr = lang.Tr("tool.weeks", weeks)
-		} else {
-			diffStr = lang.Tr("tool.1w")
-		}
-		diff -= diff / Week * Week
-
-	case diff < 1*Month+Month/2:
-		diff -= 1 * Month
-		diffStr = lang.Tr("tool.1mon")
-	case diff < 1*Year:
-		months := round(float64(diff) / Month)
-		if months > 1 {
-			diffStr = lang.Tr("tool.months", months)
-		} else {
-			diffStr = lang.Tr("tool.1mon")
-		}
-		diff -= diff / Month * Month
-
-	case diff < Year+Year/2:
-		diff -= 1 * Year
-		diffStr = lang.Tr("tool.1y")
-	default:
-		years := round(float64(diff) / Year)
-		if years > 1 {
-			diffStr = lang.Tr("tool.years", years)
-		} else {
-			diffStr = lang.Tr("tool.1y")
-		}
-		diff -= (diff / Year) * Year
-	}
-	return diff, diffStr
-}
-
 // MinutesToFriendly returns a user friendly string with number of minutes
 // converted to hours and minutes.
 func MinutesToFriendly(minutes int, lang translation.Locale) string {
@@ -208,43 +114,13 @@ func timeSincePro(then, now time.Time, lang translation.Locale) string {
 	return strings.TrimPrefix(timeStr, ", ")
 }
 
-func timeSince(then, now time.Time, lang translation.Locale) string {
-	return timeSinceUnix(then.Unix(), now.Unix(), lang)
-}
-
-func timeSinceUnix(then, now int64, lang translation.Locale) string {
-	lbl := "tool.ago"
-	diff := now - then
-	if then > now {
-		lbl = "tool.from_now"
-		diff = then - now
-	}
-	if diff <= 0 {
-		return lang.Tr("tool.now")
-	}
-
-	_, diffStr := computeTimeDiff(diff, lang)
-	return lang.Tr(lbl, diffStr)
-}
-
 // TimeSince calculates the time interval and generate user-friendly string.
-func TimeSince(then time.Time, lang translation.Locale) template.HTML {
-	return htmlTimeSince(then, time.Now(), lang)
-}
-
-func htmlTimeSince(then, now time.Time, lang translation.Locale) template.HTML {
-	return template.HTML(fmt.Sprintf(`<span class="time-since" data-tooltip-content="%s" data-tooltip-interactive="true">%s</span>`,
-		then.In(setting.DefaultUILocation).Format(GetTimeFormat(lang.Language())),
-		timeSince(then, now, lang)))
+func TimeSince(then time.Time) template.HTML {
+	timestamp := then.Format(time.RFC1123)
+	return template.HTML(fmt.Sprintf(`<relative-time class="time-since" datetime="%s">%s</relative-time>`, timestamp, timestamp))
 }
 
 // TimeSinceUnix calculates the time interval and generate user-friendly string.
-func TimeSinceUnix(then TimeStamp, lang translation.Locale) template.HTML {
-	return htmlTimeSinceUnix(then, TimeStamp(time.Now().Unix()), lang)
-}
-
-func htmlTimeSinceUnix(then, now TimeStamp, lang translation.Locale) template.HTML {
-	return template.HTML(fmt.Sprintf(`<span class="time-since" data-tooltip-content="%s" data-tooltip-interactive="true">%s</span>`,
-		then.FormatInLocation(GetTimeFormat(lang.Language()), setting.DefaultUILocation),
-		timeSinceUnix(int64(then), int64(now), lang)))
+func TimeSinceUnix(then TimeStamp) template.HTML {
+	return TimeSince(then.AsTime())
 }

modules/timeutil/since_test.go

@@ -5,7 +5,6 @@ package timeutil
 
 import (
 	"context"
-	"fmt"
 	"os"
 	"testing"
 	"time"
@@ -40,46 +39,6 @@ func TestMain(m *testing.M) {
 	os.Exit(retVal)
 }
 
-func TestTimeSince(t *testing.T) {
-	assert.Equal(t, "now", timeSince(BaseDate, BaseDate, translation.NewLocale("en-US")))
-
-	// test that each diff in `diffs` yields the expected string
-	test := func(expected string, diffs ...time.Duration) {
-		t.Run(expected, func(t *testing.T) {
-			for _, diff := range diffs {
-				actual := timeSince(BaseDate, BaseDate.Add(diff), translation.NewLocale("en-US"))
-				assert.Equal(t, translation.NewLocale("en-US").Tr("tool.ago", expected), actual)
-				actual = timeSince(BaseDate.Add(diff), BaseDate, translation.NewLocale("en-US"))
-				assert.Equal(t, translation.NewLocale("en-US").Tr("tool.from_now", expected), actual)
-			}
-		})
-	}
-	test("1 second", time.Second, time.Second+50*time.Millisecond)
-	test("2 seconds", 2*time.Second, 2*time.Second+50*time.Millisecond)
-	test("1 minute", time.Minute, time.Minute+29*time.Second)
-	test("2 minutes", 2*time.Minute, time.Minute+30*time.Second)
-	test("2 minutes", 2*time.Minute, 2*time.Minute+29*time.Second)
-	test("1 hour", time.Hour, time.Hour+29*time.Minute)
-	test("2 hours", 2*time.Hour, time.Hour+30*time.Minute)
-	test("2 hours", 2*time.Hour, 2*time.Hour+29*time.Minute)
-	test("3 hours", 3*time.Hour, 2*time.Hour+30*time.Minute)
-	test("1 day", DayDur, DayDur+11*time.Hour)
-	test("2 days", 2*DayDur, DayDur+12*time.Hour)
-	test("2 days", 2*DayDur, 2*DayDur+11*time.Hour)
-	test("3 days", 3*DayDur, 2*DayDur+12*time.Hour)
-	test("1 week", WeekDur, WeekDur+3*DayDur)
-	test("2 weeks", 2*WeekDur, WeekDur+4*DayDur)
-	test("2 weeks", 2*WeekDur, 2*WeekDur+3*DayDur)
-	test("3 weeks", 3*WeekDur, 2*WeekDur+4*DayDur)
-	test("1 month", MonthDur, MonthDur+14*DayDur)
-	test("2 months", 2*MonthDur, MonthDur+15*DayDur)
-	test("2 months", 2*MonthDur, 2*MonthDur+14*DayDur)
-	test("1 year", YearDur, YearDur+5*MonthDur)
-	test("2 years", 2*YearDur, YearDur+6*MonthDur)
-	test("2 years", 2*YearDur, 2*YearDur+5*MonthDur)
-	test("3 years", 3*YearDur, 2*YearDur+6*MonthDur)
-}
-
 func TestTimeSincePro(t *testing.T) {
 	assert.Equal(t, "now", timeSincePro(BaseDate, BaseDate, translation.NewLocale("en-US")))
 
@@ -113,60 +72,6 @@ func TestTimeSincePro(t *testing.T) {
 			12*time.Minute+17*time.Second)
 }
 
-func TestHtmlTimeSince(t *testing.T) {
-	setting.TimeFormat = time.UnixDate
-	setting.DefaultUILocation = time.UTC
-	// test that `diff` yields a result containing `expected`
-	test := func(expected string, diff time.Duration) {
-		actual := htmlTimeSince(BaseDate, BaseDate.Add(diff), translation.NewLocale("en-US"))
-		assert.Contains(t, actual, `data-tooltip-content="Sat Jan  1 00:00:00 UTC 2000"`)
-		assert.Contains(t, actual, expected)
-	}
-	test("1 second", time.Second)
-	test("3 minutes", 3*time.Minute+5*time.Second)
-	test("1 day", DayDur+11*time.Hour)
-	test("1 week", WeekDur+3*DayDur)
-	test("3 months", 3*MonthDur+2*WeekDur)
-	test("2 years", 2*YearDur)
-	test("3 years", 2*YearDur+11*MonthDur+4*WeekDur)
-}
-
-func TestComputeTimeDiff(t *testing.T) {
-	// test that for each offset in offsets,
-	// computeTimeDiff(base + offset) == (offset, str)
-	test := func(base int64, str string, offsets ...int64) {
-		for _, offset := range offsets {
-			t.Run(fmt.Sprintf("%s:%d", str, offset), func(t *testing.T) {
-				diff, diffStr := computeTimeDiff(base+offset, translation.NewLocale("en-US"))
-				assert.Equal(t, offset, diff)
-				assert.Equal(t, str, diffStr)
-			})
-		}
-	}
-	test(0, "now", 0)
-	test(1, "1 second", 0)
-	test(2, "2 seconds", 0)
-	test(Minute, "1 minute", 0, 1, 29)
-	test(Minute, "2 minutes", 30, Minute-1)
-	test(2*Minute, "2 minutes", 0, 29)
-	test(2*Minute, "3 minutes", 30, Minute-1)
-	test(Hour, "1 hour", 0, 1, 29*Minute)
-	test(Hour, "2 hours", 30*Minute, Hour-1)
-	test(5*Hour, "5 hours", 0, 29*Minute)
-	test(Day, "1 day", 0, 1, 11*Hour)
-	test(Day, "2 days", 12*Hour, Day-1)
-	test(5*Day, "5 days", 0, 11*Hour)
-	test(Week, "1 week", 0, 1, 3*Day)
-	test(Week, "2 weeks", 4*Day, Week-1)
-	test(3*Week, "3 weeks", 0, 3*Day)
-	test(Month, "1 month", 0, 1)
-	test(Month, "2 months", 16*Day, Month-1)
-	test(10*Month, "10 months", 0, 13*Day)
-	test(Year, "1 year", 0, 179*Day)
-	test(Year, "2 years", 180*Day, Year-1)
-	test(3*Year, "3 years", 0, 179*Day)
-}
-
 func TestMinutesToFriendly(t *testing.T) {
 	// test that a number of minutes yields the expected string
 	test := func(expected string, minutes int) {

package-lock.json

@@ -13,6 +13,7 @@
     "@citation-js/plugin-software-formats": "0.6.1",
     "@claviska/jquery-minicolors": "2.3.6",
     "@github/markdown-toolbar-element": "2.1.1",
+    "@github/relative-time-element": "4.2.4",
     "@mcaptcha/vanilla-glue": "0.1.0-alpha-3",
     "@primer/octicons": "18.3.0",
     "@vue/compiler-sfc": "3.2.47",

package.json

@@ -18,8 +18,6 @@ import (
 	"code.gitea.io/gitea/modules/process"
 	"code.gitea.io/gitea/modules/queue"
 	"code.gitea.io/gitea/modules/setting"
-	"code.gitea.io/gitea/modules/timeutil"
-	"code.gitea.io/gitea/modules/translation"
 	"code.gitea.io/gitea/modules/updatechecker"
 	"code.gitea.io/gitea/modules/web"
 	"code.gitea.io/gitea/services/cron"
@@ -34,7 +32,7 @@ const (
 )
 
 var sysStatus struct {
-	Uptime       string
+	StartTime    string
 	NumGoroutine int
 
 	// General statistics.
@@ -75,7 +73,7 @@ var sysStatus struct {
 }
 
 func updateSystemStatus() {
-	sysStatus.Uptime = timeutil.TimeSincePro(setting.AppStartTime, translation.NewLocale("en-US"))
+	sysStatus.StartTime = setting.AppStartTime.Format(time.RFC1123)
 
 	m := new(runtime.MemStats)
 	runtime.ReadMemStats(m)

routers/web/admin/admin.go

@@ -258,7 +258,7 @@ func renderBlame(ctx *context.Context, blameParts []git.BlamePart, commitNames m
 				commitCnt++
 
 				// User avatar image
-				commitSince := timeutil.TimeSinceUnix(timeutil.TimeStamp(commit.Author.When.Unix()), ctx.Locale)
+				commitSince := timeutil.TimeSinceUnix(timeutil.TimeStamp(commit.Author.When.Unix()))
 
 				var avatar string
 				if commit.User != nil {

routers/web/repo/blame.go

@@ -74,7 +74,7 @@ func GetContentHistoryList(ctx *context.Context) {
 		class := avatars.DefaultAvatarClass + " gt-mr-3"
 		name := html.EscapeString(username)
 		avatarHTML := string(templates.AvatarHTML(src, 28, class, username))
-		timeSinceText := string(timeutil.TimeSinceUnix(item.EditedUnix, ctx.Locale))
+		timeSinceText := string(timeutil.TimeSinceUnix(item.EditedUnix))
 
 		results = append(results, map[string]interface{}{
 			"name":  avatarHTML + "<strong>" + name + "</strong> " + actionText + " " + timeSinceText,

routers/web/repo/issue_content_history.go

@@ -29,8 +29,8 @@
 							<td><a href="{{AppSubUrl}}/admin/auths/{{.ID}}">{{.Name}}</a></td>
 							<td>{{.TypeName}}</td>
 							<td>{{if .IsActive}}{{svg "octicon-check"}}{{else}}{{svg "octicon-x"}}{{end}}</td>
-							<td><span data-tooltip-content="{{.UpdatedUnix.FormatShort}}"><time data-format="short-date" datetime="{{.UpdatedUnix.FormatLong}}">{{.UpdatedUnix.FormatShort}}</time></span></td>
-							<td><span data-tooltip-content="{{.CreatedUnix.FormatLong}}"><time data-format="short-date" datetime="{{.CreatedUnix.FormatLong}}">{{.CreatedUnix.FormatShort}}</time></span></td>
+							<td><relative-time format="datetime" year="numeric" month="short" day="numeric" weekday="" datetime="{{.UpdatedUnix.FormatLong}}">{{.UpdatedUnix.FormatShort}}</relative-time></td>
+							<td><relative-time format="datetime" year="numeric" month="short" day="numeric" weekday="" datetime="{{.CreatedUnix.FormatLong}}">{{.CreatedUnix.FormatShort}}</relative-time></td>
 							<td><a href="{{AppSubUrl}}/admin/auths/{{.ID}}">{{svg "octicon-pencil"}}</a></td>
 						</tr>
 					{{end}}

templates/admin/auth/list.tmpl

@@ -83,7 +83,7 @@
 		<div class="ui attached table segment">
 			<dl class="dl-horizontal admin-dl-horizontal">
 				<dt>{{.locale.Tr "admin.dashboard.server_uptime"}}</dt>
-				<dd>{{.SysStatus.Uptime}}</dd>
+				<dd><relative-time format="duration" datetime="{{.SysStatus.StartTime}}">{{.SysStatus.StartTime}}</relative-time></dd>
 				<dt>{{.locale.Tr "admin.dashboard.current_goroutine"}}</dt>
 				<dd>{{.SysStatus.NumGoroutine}}</dd>
 				<div class="ui divider"></div>

templates/admin/dashboard.tmpl

@@ -29,7 +29,7 @@
 							<td>{{.ID}}</td>
 							<td>{{$.locale.Tr .TrStr}}</td>
 							<td class="view-detail"><span class="notice-description text truncate">{{.Description}}</span></td>
-							<td><span class="notice-created-time" data-tooltip-content="{{.CreatedUnix.AsTime}}"><time data-format="short-date" datetime="{{.CreatedUnix.FormatLong}}">{{.CreatedUnix.FormatShort}}</time></span></td>
+							<td><span class="notice-created-time"><relative-time format="datetime" year="numeric" month="short" day="numeric" weekday="" datetime="{{.CreatedUnix.FormatLong}}">{{.CreatedUnix.FormatShort}}</relative-time></span></td>
 							<td><a href="#">{{svg "octicon-note" 16 "view-detail"}}</a></td>
 						</tr>
 					{{end}}

templates/admin/notice.tmpl

@@ -44,7 +44,7 @@
 							<td>{{.NumTeams}}</td>
 							<td>{{.NumMembers}}</td>
 							<td>{{.NumRepos}}</td>
-							<td><span title="{{.CreatedUnix.FormatLong}}"><time data-format="short-date" datetime="{{.CreatedUnix.FormatLong}}">{{.CreatedUnix.FormatShort}}</time></span></td>
+							<td><span title="{{.CreatedUnix.FormatLong}}"><relative-time format="datetime" year="numeric" month="short" day="numeric" weekday="" datetime="{{.CreatedUnix.FormatLong}}">{{.CreatedUnix.FormatShort}}</relative-time></span></td>
 							<td><a href="{{.OrganisationLink}}/settings">{{svg "octicon-pencil"}}</a></td>
 						</tr>
 					{{end}}