[JENKINS-60866] Clean up build button column JS (#5514)

Co-authored-by: Daniel Beck <[email protected]>

core/src/main/resources/hudson/views/BuildButtonColumn/column.jelly

@@ -27,29 +27,22 @@ THE SOFTWARE.
       <td>
           <j:if test="${job.buildable and job.hasPermission(job.BUILD)}">
               <j:set var="id" value="${h.generateId()}"/>
-              <a href="${jobBaseUrl}${job.shortUrl}build?delay=0sec">
+              <j:set var="href" value="${jobBaseUrl}${job.shortUrl}build?delay=0sec"/>
+              <a href="${href}">
                   <j:choose>
                       <j:when test="${job.parameterized}">
                           <j:set var="title" value="${%Schedule_a_task_with_parameters(h.getRelativeDisplayNameFrom(job, itemGroup),it.taskNoun(job))}"/>
-                          <j:set var="onclick" value="${null}"/>
                       </j:when>
                       <j:otherwise>
+                          <span class="build-button-column-icon-reference-holder" data-id="${id}" data-url="${href}" data-notification="${%Task_scheduled(it.taskNoun(job))}"/>
                           <j:set var="title" value="${%Schedule_a_task(h.getRelativeDisplayNameFrom(job, itemGroup),it.taskNoun(job))}"/>
-                          <j:set var="onclick" value="return build_${id}(this)"/>
                       </j:otherwise>
                   </j:choose>
                   <j:set var="icon" value="${app.queue.contains(job) ? 'icon-clock-anime' : 'icon-clock'}"/>
                   <l:icon class="${icon} ${subIconSizeClass}"
-                         title="${title}" alt="${title}"
-                         onclick="${onclick}"/>
+                         title="${title}" alt="${title}" id="${id}" />
+                  <st:adjunct includes="hudson.views.BuildButtonColumn.icon"/>
               </a>
-              <script>
-                function build_${id}(img) {
-                  new Ajax.Request(img.parentNode.href);
-                  hoverNotification('${%Task_scheduled(it.taskNoun(job))}', img, -100);
-                  return false;
-                }
-              </script>
           </j:if>
       </td>
 </j:jelly>

core/src/main/resources/hudson/views/BuildButtonColumn/icon.js

@@ -0,0 +1,12 @@
+Behaviour.specify(".build-button-column-icon-reference-holder", 'build-button-column', 0, function (e) {
+    var url = e.getAttribute('data-url');
+    var message = e.getAttribute('data-notification')
+    var id = e.getAttribute('data-id');
+    var icon = document.getElementById(id);
+
+    icon.onclick = function(el) {
+        new Ajax.Request(url);
+        hoverNotification(message, this, -100);
+        return false;
+    }
+});

core/src/main/resources/lib/layout/icon.jelly

@@ -30,11 +30,15 @@ THE SOFTWARE.
       The icon class specification e.g. 'icon-help icon-sm', 'icon-blue icon-md', 'icon-blue-anime icon-xlg'.
     </st:attribute>
 
+    <st:attribute name="id">
+      ID of the icon element. Since TODO.
+    </st:attribute>
+
     <st:attribute name="src">
       Icon source raw URL. Only relevant if the 'class' attribute is NOT specified.
     </st:attribute>
 
-    <st:attribute name="onclick">onclick handler.</st:attribute>
+    <st:attribute name="onclick" deprecated="true">onclick handler. Deprecated; assign an ID and look up the element that way to attach event handlers.</st:attribute>
     <st:attribute name="title">title</st:attribute>
     <st:attribute name="style">style</st:attribute>
     <st:attribute name="tooltip">tooltip</st:attribute>
@@ -66,19 +70,19 @@ THE SOFTWARE.
 
       <span class="build-status-icon__wrapper ${attrs.class}" style="${imgStyle}">
           <span class="build-status-icon__outer">
-            <l:svgIcon href="${rootURL}/images/build-status/build-status-sprite.svg#${outerLayer}" />
+            <l:svgIcon href="${rootURL}/images/build-status/build-status-sprite.svg#${outerLayer}" id="${attrs.id}" />
           </span>
-          <l:svgIcon class="${attrs.class}" href="${iconSrc}"/>
+          <l:svgIcon class="${attrs.class}" href="${iconSrc}" id="${attrs.id}"/>
       </span>
     </j:when>
 
     <j:when test="${iconMetadata.svgSprite and !iconMetadata.buildStatus}">
-      <l:svgIcon class="${attrs.class}" href="${iconSrc}"/>
+      <l:svgIcon class="${attrs.class}" href="${iconSrc}" id="${attrs.id}"/>
     </j:when>
 
     <j:otherwise>
       <img class="${attrs.class}" src="${iconSrc}" style="${imgStyle}" title="${attrs.title}" height="${attrs.height}"
-           alt="${attrs.alt}" width="${attrs.width}" onclick="${attrs.onclick}" tooltip="${attrs.tooltip }"/>
+           alt="${attrs.alt}" width="${attrs.width}" onclick="${attrs.onclick}" tooltip="${attrs.tooltip}" id="${attrs.id}" />
     </j:otherwise>
   </j:choose>
 

core/src/main/resources/lib/layout/svgIcon.jelly

@@ -12,6 +12,10 @@
             Extra CSS classes passed to the icon. Currently only the 'svg-icon' class is applied by default.
         </st:attribute>
 
+        <st:attribute name="id">
+            ID of the icon element. Since TODO.
+        </st:attribute>
+
         <st:attribute name="href">
             Href of the 'use' tag. Normally path to a sprite plus an icon id
         </st:attribute>
@@ -22,7 +26,7 @@
             Whether the icon can receive keyboard focus. Possible values 'true' or 'false'
         </st:attribute>
 
-        <st:attribute name="onclick">onclick handler.</st:attribute>
+        <st:attribute name="onclick" deprecated="true">onclick handler. Deprecated; assign an ID and look up the element that way to attach event handlers.</st:attribute>
         <st:attribute name="style">style</st:attribute>
         <st:attribute name="tooltip">tooltip</st:attribute>
         <st:attribute name="ariaHidden">aria-hidden</st:attribute>
@@ -34,6 +38,7 @@
          aria-hidden="${attrs.ariaHidden}"
          style="${attrs.style}"
          onclick="${attrs.onclick}"
+         id="${attrs.id}"
          tooltip="${attrs.tooltip != null ? h.xmlEscape(attrs.tooltip) : null}">
 
         <j:choose>