[JENKINS-73613] refresh buildhistory in all cases

refresh the buildHistory widget instantly when the window gets focus,
e.g. after switching browser tabs but also when one was in another
application and clicks in the browser window.
When the window is visible it will update even when it has no focus,
when the window is hidden no calls to the controller will be done.

Additionally the buildHistory will be updated when it is not on the
first page. So e.g. when someone deletes a build, changes the display
name or the description or when a build is still running the page gets
updated.

core/src/main/resources/hudson/widgets/HistoryWidget/index.jelly

@@ -56,7 +56,7 @@ THE SOFTWARE.
         <div id="jenkins-build-history" class="app-builds-container__items">
         </div>
 
-        <div class="app-builds-container__controls" id="controls">
+        <div class="app-builds-container__controls jenkins-hidden" id="controls">
           <button class="jenkins-button jenkins-button--tertiary jenkins-card__unveil" id="up">
             <l:icon src="symbol-arrow-left" />
             <span class="jenkins-visually-hidden">${%Newer builds}</span>

war/src/main/js/pages/project/builds-card.js

@@ -26,16 +26,33 @@ const updateBuildsRefreshInterval = 5000;
  */
 function load(options = {}) {
   /** @type {QueryParameters} */
+  cancelRefreshTimeout();
+  let newSearch = false;
+  if ("newSearch" in options) {
+    newSearch = true;
+    delete options.newSearch;
+  }
   const params = Object.assign({}, options, { search: pageSearchInput.value });
+  const paginationOrFirst =
+    buildHistoryPage.dataset.pageHasUp === "false" ||
+    "older-than" in params ||
+    "newer-than" in params;
 
-  // Avoid fetching if the page isn't active
+  // Avoid fetching if the page isn't visible
   if (document.hidden) {
-    if (buildHistoryPage.dataset.pageHasUp === "false") {
-      createRefreshTimeout();
-    }
     return;
   }
 
+  createRefreshTimeout();
+
+  // When we're not on the first page and this is not a load due to pagination
+  // we need to set the correct value for older-than so we fetch the same set of runs
+  if (!paginationOrFirst) {
+    params["older-than"] = (
+      BigInt(buildHistoryPage.dataset.pageEntryNewest) + 1n
+    ).toString();
+  }
+
   fetch(ajaxUrl + toQueryString(params)).then((rsp) => {
     if (rsp.ok) {
       rsp.text().then((responseText) => {
@@ -69,6 +86,7 @@ function load(options = {}) {
           pageHasDown: innerChild.dataset.pageHasDown === "true",
           pageEntryNewest: innerChild.dataset.pageEntryNewest,
           pageEntryOldest: innerChild.dataset.pageEntryOldest,
+          activeRuns: innerChild.dataset.activeRuns,
         });
       });
     } else {
@@ -95,13 +113,6 @@ function updateCardControls(parameters) {
     !parameters.pageHasDown,
   );
 
-  // We only want the list to refresh if the user is on the first page of results
-  if (!parameters.pageHasUp) {
-    createRefreshTimeout();
-  } else {
-    cancelRefreshTimeout();
-  }
-
   buildHistoryPage.dataset.pageEntryNewest = parameters.pageEntryNewest;
   buildHistoryPage.dataset.pageEntryOldest = parameters.pageEntryOldest;
   buildHistoryPage.dataset.pageHasUp = parameters.pageHasUp;
@@ -112,7 +123,6 @@ paginationPrevious.addEventListener("click", () => {
 });
 
 paginationNext.addEventListener("click", () => {
-  cancelRefreshTimeout();
   load({ "older-than": buildHistoryPage.dataset.pageEntryOldest });
 });
 
@@ -132,7 +142,7 @@ function cancelRefreshTimeout() {
 }
 
 const debouncedLoad = debounce(() => {
-  load();
+  load({ newSearch: true });
 }, 150);
 
 document.addEventListener("DOMContentLoaded", function () {
@@ -143,4 +153,8 @@ document.addEventListener("DOMContentLoaded", function () {
   });
 
   load();
+
+  window.addEventListener("focus", function () {
+    load();
+  });
 });