Fix stopwatch and introduce default tippy theme

templates/base/head_navbar.tmpl

@@ -82,20 +82,21 @@
 				</div>
 				<span class="only-mobile tw-ml-2">{{ctx.Locale.Tr "active_stopwatch"}}</span>
 			</a>
-			<div class="active-stopwatch-popup item tippy-target tw-p-2">
-				<div class="tw-flex tw-items-center">
-					<a class="stopwatch-link tw-flex tw-items-center" href="{{.ActiveStopwatch.IssueLink}}">
-						{{svg "octicon-issue-opened" 16 "tw-mr-2"}}
+			<div class="active-stopwatch-popup tippy-target">
+				<div class="tw-flex tw-items-center item tw-gap-2 tw-p-2">
+					{{svg "octicon-issue-opened" 16}}
+					<a class="stopwatch-link tw-flex muted" href="{{.ActiveStopwatch.IssueLink}}">
 						<span class="stopwatch-issue">{{.ActiveStopwatch.RepoSlug}}#{{.ActiveStopwatch.IssueIndex}}</span>
-						<span class="ui primary label stopwatch-time tw-my-0 tw-mx-4" data-seconds="{{.ActiveStopwatch.Seconds}}">
+					</a>
+					<span class="ui primary label stopwatch-time" data-seconds="{{.ActiveStopwatch.Seconds}}">
 						{{if .ActiveStopwatch}}{{Sec2Time .ActiveStopwatch.Seconds}}{{end}}
 					</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"
+								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>
@@ -103,12 +104,13 @@
 							{{.CsrfTokenHtml}}
 							<button
 								type="submit"
-							class="ui button mini compact basic icon"
+								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}}
 
 			<a class="item not-mobile tw-mx-0" href="{{AppSubUrl}}/notifications" data-tooltip-content="{{ctx.Locale.Tr "notifications"}}" aria-label="{{ctx.Locale.Tr "notifications"}}">

web_src/css/modules/tippy.css

@@ -16,8 +16,8 @@
 
 .tippy-box {
   position: relative;
-  background-color: var(--color-body);
-  color: var(--color-secondary-dark-6);
+  background-color: var(--color-menu);
+  color: var(--color-text);
   border: 1px solid var(--color-secondary);
   border-radius: var(--border-radius);
   font-size: 1rem;
@@ -25,7 +25,6 @@
 
 .tippy-content {
   position: relative;
-  padding: 1rem; /* if you need different padding, use different data-theme */
   z-index: 1;
 }
 

web_src/js/features/contextpopup.js

@@ -18,6 +18,7 @@ export function attachRefIssueContextPopup(refIssues) {
     if (!owner) return;
 
     const el = document.createElement('div');
+    el.classList.add('tw-p-3');
     refIssue.parentNode.insertBefore(el, refIssue.nextSibling);
 
     const view = createApp(ContextPopup);
@@ -30,6 +31,7 @@ export function attachRefIssueContextPopup(refIssues) {
     }
 
     createTippy(refIssue, {
+      theme: 'default',
       content: el,
       placement: 'top-start',
       interactive: true,

web_src/js/features/repo-code.js

@@ -113,6 +113,7 @@ function showLineButton() {
   btn.closest('.code-view').append(menu.cloneNode(true));
 
   createTippy(btn, {
+    theme: 'menu',
     trigger: 'click',
     hideOnClick: true,
     content: menu,

web_src/js/features/repo-issue.js

@@ -502,6 +502,7 @@ export function initRepoPullRequestReview() {
   if ($reviewBtn.length && $panel.length) {
     const tippy = createTippy($reviewBtn[0], {
       content: $panel[0],
+      theme: 'default',
       placement: 'bottom',
       trigger: 'click',
       maxWidth: 'none',

web_src/js/features/stopwatch.js

@@ -5,6 +5,8 @@ import {hideElem, showElem} from '../utils/dom.js';
 
 const {appSubUrl, notificationSettings, enableTimeTracking, assetVersionEncoded} = window.config;
 
+let stopwatchTippy;
+
 export function initStopwatch() {
   if (!enableTimeTracking) {
     return;
@@ -19,13 +21,14 @@ export function initStopwatch() {
 
   stopwatchEl.removeAttribute('href'); // intended for noscript mode only
 
-  createTippy(stopwatchEl, {
+  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.
@@ -161,6 +164,9 @@ function updateStopwatchTime(seconds) {
     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
+    stopwatchTippy.hide();
+    stopwatchTippy.show();
   };
   updateUi();
   updateTimeIntervalId = setInterval(updateUi, 1000);

web_src/js/modules/tippy.js

@@ -37,8 +37,10 @@ export function createTippy(target, opts = {}) {
       return onShow?.(instance);
     },
     arrow: arrow || (theme === 'bare' ? false : arrowSvg),
-    role: role || 'menu', // HTML role attribute
-    theme: theme || role || 'menu', // CSS theme, either "tooltip", "menu", "box-with-header" or "bare"
+    // HTML role attribute, ideally the default role would be "popover" but it does not exist
+    role: role || 'menu',
+    // CSS theme, either "default", "tooltip", "menu", "box-with-header" or "bare"
+    theme: theme || role || 'default',
     plugins: [followCursor],
     ...other,
   });

web_src/js/webcomponents/overflow-menu.js

@@ -117,6 +117,7 @@ window.customElements.define('overflow-menu', class extends HTMLElement {
       interactive: true,
       placement: 'bottom-end',
       role: 'menu',
+      theme: 'menu',
       content: this.tippyContent,
       onShow: () => { // FIXME: onShown doesn't work (never be called)
         setTimeout(() => {