Fix stopwatch and introduce default tippy theme

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(() => {