Don't animate admin monitor popup on page load, properly remove inter…

…actable UI elements (#8954)

* followup for #8941, don't animate on page load

PR #8941 caused a regression that the hiding animation was played on
page load.
This change ensures that the hiding animation is only applied when the
widget was visible before

* scale to 0

core/src/main/resources/jenkins/management/AdministrativeMonitorsDecorator/resources.css

@@ -50,8 +50,12 @@
   box-shadow: var(--dropdown-box-shadow);
   border-radius: 15px;
   opacity: 0;
-  animation: hide-am-list 300ms ease-in 1 normal;
   z-index: 0;
+  transform: scale(0);
+}
+
+.am-container.am-hidden div.am-list {
+  animation: hide-am-list 300ms ease-in 1 normal;
 }
 
 .am-container.visible div.am-list {

core/src/main/resources/jenkins/management/AdministrativeMonitorsDecorator/resources.js

@@ -38,6 +38,7 @@
             var popupContent = responseText;
             amList.innerHTML = popupContent;
             amMonitorRoot.classList.add("visible");
+            amMonitorRoot.classList.remove("am-hidden");
             document.addEventListener("click", onClose);
             document.addEventListener("keydown", onEscClose);
 
@@ -50,6 +51,9 @@
     }
 
     function close() {
+      if (amMonitorRoot.classList.contains("visible")) {
+        amMonitorRoot.classList.add("am-hidden");
+      }
       amMonitorRoot.classList.remove("visible");
       document.removeEventListener("click", onClose);
       document.removeEventListener("keydown", onEscClose);