rework stopwatch using relative-time

package-lock.json

@@ -42,7 +42,6 @@
         "postcss": "8.4.38",
         "postcss-loader": "8.1.1",
         "postcss-nesting": "12.1.2",
-        "pretty-ms": "9.0.0",
         "sortablejs": "1.15.2",
         "swagger-ui-dist": "5.17.2",
         "tailwindcss": "3.4.3",
@@ -9170,17 +9169,6 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/parse-ms": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/parse-ms/-/parse-ms-4.0.0.tgz",
-      "integrity": "sha512-TXfryirbmq34y8QBwgqCVLi+8oA3oWx2eAnSn62ITyEhEYaWRlVZ2DvMM9eZbMs/RfxPu/PK/aBLyGj4IrqMHw==",
-      "engines": {
-        "node": ">=18"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
     "node_modules/path-exists": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
@@ -9772,20 +9760,6 @@
         "url": "https://github.com/chalk/ansi-styles?sponsor=1"
       }
     },
-    "node_modules/pretty-ms": {
-      "version": "9.0.0",
-      "resolved": "https://registry.npmjs.org/pretty-ms/-/pretty-ms-9.0.0.tgz",
-      "integrity": "sha512-E9e9HJ9R9NasGOgPaPE8VMeiPKAyWR5jcFpNnwIejslIhWqdqOrb2wShBsncMPUb+BcCd2OPYfh7p2W6oemTng==",
-      "dependencies": {
-        "parse-ms": "^4.0.0"
-      },
-      "engines": {
-        "node": ">=18"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
     "node_modules/printable-characters": {
       "version": "1.0.42",
       "resolved": "https://registry.npmjs.org/printable-characters/-/printable-characters-1.0.42.tgz",

package.json

@@ -41,7 +41,6 @@
     "postcss": "8.4.38",
     "postcss-loader": "8.1.1",
     "postcss-nesting": "12.1.2",
-    "pretty-ms": "9.0.0",
     "sortablejs": "1.15.2",
     "swagger-ui-dist": "5.17.2",
     "tailwindcss": "3.4.3",

routers/web/repo/issue_stopwatch.go

@@ -6,6 +6,7 @@ package repo
 import (
 	"net/http"
 	"strings"
+	"time"
 
 	"code.gitea.io/gitea/models/db"
 	issues_model "code.gitea.io/gitea/models/issues"
@@ -100,7 +101,7 @@ func GetActiveStopwatch(ctx *context.Context) {
 		issue.Link(),
 		issue.Repo.FullName(),
 		issue.Index,
-		sw.Seconds() + 1, // ensure time is never zero in ui
+		time.Unix(time.Now().Unix() - sw.Seconds(), 0).Format(time.RFC3339),
 	}
 }
 
@@ -109,5 +110,5 @@ type StopwatchTmplInfo struct {
 	IssueLink  string
 	RepoSlug   string
 	IssueIndex int64
-	Seconds    int64
+	Datetime   string
 }

templates/base/head_navbar.tmpl

@@ -12,6 +12,20 @@
 
 		<!-- mobile right menu, it must be here because in mobile view, each item is a flex column, the first item is a full row column -->
 		<div class="ui secondary menu item navbar-mobile-right only-mobile">
+			{{if and .IsSigned EnableTimetracking .ActiveStopwatch}}
+			<a id="mobile-stopwatch-icon" class="active-stopwatch item tw-mx-0" href="{{.ActiveStopwatch.IssueLink}}" title="{{ctx.Locale.Tr "active_stopwatch"}}" data-datetime="{{.ActiveStopwatch.Datetime}}">
+				<div class="tw-relative">
+					{{svg "octicon-stopwatch"}}
+					<span class="header-stopwatch-dot">
+						<relative-time
+							format="micro"
+							datetime="{{.ActiveStopwatch.Datetime}}"
+							data-no-tooltip="true"
+						></relative-time>
+					</span>
+				</div>
+			</a>
+			{{end}}
 			{{if .IsSigned}}
 			<a id="mobile-notifications-icon" class="item tw-w-auto tw-p-2" href="{{AppSubUrl}}/notifications" data-tooltip-content="{{ctx.Locale.Tr "notifications"}}" aria-label="{{ctx.Locale.Tr "notifications"}}">
 				<div class="tw-relative">
@@ -74,43 +88,19 @@
 				</div><!-- end content avatar menu -->
 			</div><!-- end dropdown avatar menu -->
 		{{else if .IsSigned}}
-			{{if EnableTimetracking}}
+			{{if and EnableTimetracking .ActiveStopwatch}}
-			<a class="active-stopwatch-trigger item tw-mx-0{{if not .ActiveStopwatch}} tw-hidden{{end}}" href="{{.ActiveStopwatch.IssueLink}}" title="{{ctx.Locale.Tr "active_stopwatch"}}">
+			<a class="item not-mobile active-stopwatch tw-mx-0" href="{{.ActiveStopwatch.IssueLink}}" title="{{ctx.Locale.Tr "active_stopwatch"}}" data-datetime="{{.ActiveStopwatch.Datetime}}">
 				<div class="tw-relative">
 					{{svg "octicon-stopwatch"}}
-					<span class="header-stopwatch-dot"></span>
+					<span class="header-stopwatch-dot">
-				</div>
+						<relative-time
-				<span class="only-mobile tw-ml-2">{{ctx.Locale.Tr "active_stopwatch"}}</span>
+							format="micro"
-			</a>
+							datetime="{{.ActiveStopwatch.Datetime}}"
-			<div class="active-stopwatch-popup tippy-target">
+							data-no-tooltip="true"
-				<div class="tw-flex tw-items-center tw-gap-2 tw-p-3">
+						></relative-time>
-					<a class="stopwatch-link tw-flex tw-items-center tw-gap-1 muted" href="{{.ActiveStopwatch.IssueLink}}">
-						{{svg "octicon-issue-opened" 16}}
-						<span class="stopwatch-issue">{{.ActiveStopwatch.RepoSlug}}#{{.ActiveStopwatch.IssueIndex}}</span>
-					</a>
-					<span class="ui primary label stopwatch-time" data-seconds="{{.ActiveStopwatch.Seconds}}">
-						{{if .ActiveStopwatch}}{{Sec2Time .ActiveStopwatch.Seconds}}{{end}}
 					</span>
-					<div class="tw-flex tw-gap-1">
-						<form class="stopwatch-commit" method="post" action="{{.ActiveStopwatch.IssueLink}}/times/stopwatch/toggle">
-							{{.CsrfTokenHtml}}
-							<button
-								type="submit"
-								class="ui button mini compact basic icon tw-mr-0"
-								data-tooltip-content="{{ctx.Locale.Tr "repo.issues.stop_tracking"}}"
-							>{{svg "octicon-square-fill"}}</button>
-						</form>
-						<form class="stopwatch-cancel" method="post" action="{{.ActiveStopwatch.IssueLink}}/times/stopwatch/cancel">
-							{{.CsrfTokenHtml}}
-							<button
-								type="submit"
-								class="ui button mini compact basic icon tw-mr-0"
-								data-tooltip-content="{{ctx.Locale.Tr "repo.issues.cancel_tracking"}}"
-							>{{svg "octicon-trash"}}</button>
-						</form>
-					</div>
 				</div>
-			</div>
+			</a>
 			{{end}}
 
 			<a class="item not-mobile tw-mx-0" href="{{AppSubUrl}}/notifications" data-tooltip-content="{{ctx.Locale.Tr "notifications"}}" aria-label="{{ctx.Locale.Tr "notifications"}}">
@@ -204,4 +194,33 @@
 			</a>
 		{{end}}
 	</div><!-- end full right menu -->
+
+	{{if and .IsSigned .ActiveStopwatch}}
+		<div class="active-stopwatch-popup tippy-target">
+			<div class="tw-flex tw-items-center tw-gap-2 tw-p-3">
+				<a class="stopwatch-link tw-flex tw-items-center tw-gap-1 muted" href="{{.ActiveStopwatch.IssueLink}}">
+					{{svg "octicon-issue-opened" 16}}
+					<span class="stopwatch-issue">{{.ActiveStopwatch.RepoSlug}}#{{.ActiveStopwatch.IssueIndex}}</span>
+				</a>
+				<div class="tw-flex tw-gap-1">
+					<form class="stopwatch-commit" method="post" action="{{.ActiveStopwatch.IssueLink}}/times/stopwatch/toggle">
+						{{.CsrfTokenHtml}}
+						<button
+							type="submit"
+							class="ui button mini compact basic icon tw-mr-0"
+							data-tooltip-content="{{ctx.Locale.Tr "repo.issues.stop_tracking"}}"
+						>{{svg "octicon-square-fill"}}</button>
+					</form>
+					<form class="stopwatch-cancel" method="post" action="{{.ActiveStopwatch.IssueLink}}/times/stopwatch/cancel">
+						{{.CsrfTokenHtml}}
+						<button
+							type="submit"
+							class="ui button mini compact basic icon tw-mr-0"
+							data-tooltip-content="{{ctx.Locale.Tr "repo.issues.cancel_tracking"}}"
+						>{{svg "octicon-trash"}}</button>
+					</form>
+				</div>
+			</div>
+		</div>
+	{{end}}
 </nav>

web_src/css/modules/navbar.css

@@ -103,19 +103,12 @@
     width: 50%;
     min-height: 48px;
   }
+  #navbar #mobile-stopwatch-icon,
   #navbar #mobile-notifications-icon {
     margin-right: 6px !important;
   }
 }
 
-#navbar a.item .notification_count {
-  color: var(--color-nav-bg);
-  padding: 0 3.75px;
-  font-size: 12px;
-  line-height: 12px;
-  font-weight: var(--font-weight-bold);
-}
-
 #navbar a.item:hover .notification_count,
 #navbar a.item:hover .header-stopwatch-dot {
   border-color: var(--color-nav-hover-bg);
@@ -123,6 +116,11 @@
 
 #navbar a.item .notification_count,
 #navbar a.item .header-stopwatch-dot {
+  color: var(--color-nav-bg);
+  padding: 0 3.75px;
+  font-size: 12px;
+  line-height: 12px;
+  font-weight: var(--font-weight-bold);
   background: var(--color-primary);
   border: 2px solid var(--color-nav-bg);
   position: absolute;
@@ -135,6 +133,7 @@
   align-items: center;
   justify-content: center;
   z-index: 1; /* prevent menu button background from overlaying icon */
+  user-select: none;
 }
 
 .secondary-nav {

web_src/js/features/stopwatch.js

@@ -1,40 +1,39 @@
-import prettyMilliseconds from 'pretty-ms';
 import {createTippy} from '../modules/tippy.js';
 import {GET} from '../modules/fetch.js';
 import {hideElem, showElem} from '../utils/dom.js';
 
 const {appSubUrl, notificationSettings, enableTimeTracking, assetVersionEncoded} = window.config;
 
-let stopwatchTippy;
-
 export function initStopwatch() {
   if (!enableTimeTracking) {
     return;
   }
 
-  const stopwatchEl = document.querySelector('.active-stopwatch-trigger');
+  const stopwatchEls = document.querySelectorAll('.active-stopwatch');
   const stopwatchPopup = document.querySelector('.active-stopwatch-popup');
 
-  if (!stopwatchEl || !stopwatchPopup) {
+  if (!stopwatchEls.length || !stopwatchPopup) {
     return;
   }
 
-  stopwatchEl.removeAttribute('href'); // intended for noscript mode only
-
-  stopwatchTippy = createTippy(stopwatchEl, {
-    content: stopwatchPopup,
-    placement: 'bottom-end',
-    trigger: 'click',
-    maxWidth: 'none',
-    interactive: true,
-    hideOnClick: true,
-    theme: 'default',
-  });
-
   // global stop watch (in the head_navbar), it should always work in any case either the EventSource or the PeriodicPoller is used.
-  const currSeconds = document.querySelector('.stopwatch-time')?.getAttribute('data-seconds');
+  const datetime = stopwatchEls[0]?.getAttribute('data-datetime');
-  if (currSeconds) {
+  if (datetime) {
-    updateStopwatchTime(currSeconds);
+    updateStopwatchTime(datetime);
+  }
+
+  for (const stopwatchEl of stopwatchEls) {
+    stopwatchEl.removeAttribute('href'); // intended for noscript mode only
+
+    createTippy(stopwatchEl, {
+      content: stopwatchPopup.cloneNode(true),
+      placement: 'bottom-end',
+      trigger: 'click',
+      maxWidth: 'none',
+      interactive: true,
+      hideOnClick: true,
+      theme: 'default',
+    });
   }
 
   let usingPeriodicPoller = false;
@@ -127,9 +126,8 @@ async function updateStopwatch() {
 
 function updateStopwatchData(data) {
   const watch = data[0];
-  const btnEl = document.querySelector('.active-stopwatch-trigger');
+  const btnEl = document.querySelector('.active-stopwatch');
   if (!watch) {
-    clearStopwatchTimer();
     hideElem(btnEl);
   } else {
     const {repo_owner_name, repo_name, issue_index, seconds} = watch;
@@ -139,37 +137,26 @@ function updateStopwatchData(data) {
     document.querySelector('.stopwatch-cancel')?.setAttribute('action', `${issueUrl}/times/stopwatch/cancel`);
     const stopwatchIssue = document.querySelector('.stopwatch-issue');
     if (stopwatchIssue) stopwatchIssue.textContent = `${repo_owner_name}/${repo_name}#${issue_index}`;
-    updateStopwatchTime(seconds);
+    updateStopwatchTime(secondsToDatetime(seconds));
     showElem(btnEl);
   }
   return Boolean(data.length);
 }
 
-let updateTimeIntervalId = null; // holds setInterval id when active
+function secondsToDatetime(seconds) {
-function clearStopwatchTimer() {
+  return (new Date(Date.now() - seconds * 1000)).toISOString();
-  if (updateTimeIntervalId !== null) {
+}
-    clearInterval(updateTimeIntervalId);
+
-    updateTimeIntervalId = null;
+function updateStopwatchTime(datetime) {
+  for (const parent of document.querySelectorAll('.header-stopwatch-dot')) {
+    const existing = parent.querySelector(':scope > relative-time');
+    if (existing) {
+      existing.setAttribute('datetime', datetime);
+    } else {
+      const el = document.createElement('relative-time');
+      el.setAttribute('format', 'micro');
+      el.setAttribute('datetime', datetime);
+      parent.append(el);
+    }
   }
 }
-function updateStopwatchTime(seconds) {
-  const secs = parseInt(seconds);
-  if (!Number.isFinite(secs)) return;
-
-  clearStopwatchTimer();
-  const stopwatch = document.querySelector('.stopwatch-time');
-  // TODO: replace with <relative-time> similar to how system status up time is shown
-  const start = Date.now();
-  const updateUi = () => {
-    const delta = Date.now() - start;
-    const dur = prettyMilliseconds(secs * 1000 + delta, {compact: true});
-    if (stopwatch) stopwatch.textContent = dur;
-    // refresh the tippy so that the triangle updates to the correct position
-    if (stopwatchTippy?.state.isShown) {
-      stopwatchTippy.hide();
-      stopwatchTippy.show();
-    }
-  };
-  updateUi();
-  updateTimeIntervalId = setInterval(updateUi, 1000);
-}

web_src/js/modules/tippy.js

@@ -96,6 +96,7 @@ function attachTooltip(target, content = null) {
 
 function switchTitleToTooltip(target) {
   let title = target.getAttribute('title');
+  if (target.getAttribute('data-no-tooltip')) return;
   if (title) {
     // apply custom formatting to relative-time's tooltips
     if (target.tagName.toLowerCase() === 'relative-time') {