[JENKINS-60866][JENKINS-71051][JENKINS-71048] Un-inline 'Build Now' JS

core/src/main/resources/lib/hudson/project/configurable.jelly

@@ -24,20 +24,10 @@ THE SOFTWARE.
 -->
 <?jelly escape-by-default='true'?>
 <!-- Displayed by projects (assignable to ParameterizedJobMixIn.ParameterizedJob) which can be configured and built. -->
-<j:jelly xmlns:j="jelly:core" xmlns:l="/lib/layout">
+<j:jelly xmlns:j="jelly:core" xmlns:l="/lib/layout" xmlns:st="jelly:stapler">
     <j:if test="${it.buildable}">
-        <j:set var="id" value="${h.generateId()}"/>
-        <l:task href="${url}/build?delay=0sec" icon="icon-clock icon-md" onclick="${it.parameterized?null:'return build_' + id + '(this)'}" permission="${it.BUILD}" post="${!it.parameterized}" title="${it.buildNowText}"/>
-        <script>
-            function build_${id}(a) {
-                fetch(a.href, {
-                  method: 'post',
-                  headers: crumb.wrap({}),
-                })
-                hoverNotification('${%Build scheduled}',a.parentNode);
-                return false;
-            }
-        </script>
+        <st:adjunct includes="lib.hudson.project.configurable.configurable"/>
+        <l:task href="${url}/build?delay=0sec" icon="icon-clock icon-md" permission="${it.BUILD}" post="${!it.parameterized}" data-callback="lib_hudson_project_configurable_build_now_callback" data-build-success="${%Build scheduled}" data-parameterized="${it.parameterized}" title="${it.buildNowText}"/>
     </j:if>
     <j:choose>
         <j:when test="${h.hasPermission(it,it.CONFIGURE)}">

core/src/main/resources/lib/hudson/project/configurable/configurable.js

@@ -0,0 +1,17 @@
+(function () {
+  /* The JS formatting rules enforced in this repo can result in function declarations incompatible with HTMLUnit.
+     As a workaround, split function definition and assignment. */
+  function foo(el, ev) {
+    let parameterized = el.dataset.parameterized;
+    let success = el.dataset.buildSuccess;
+    if (parameterized === "false") {
+      fetch(el.href, {
+        method: "post",
+        headers: crumb.wrap({}),
+      });
+      hoverNotification(success, ev.target.parentNode);
+      ev.preventDefault();
+    }
+  }
+  window.lib_hudson_project_configurable_build_now_callback = foo;
+})();

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

@@ -77,6 +77,18 @@ THE SOFTWARE.
       (onclick supersedes this except in the context menu.)
       (since 1.512)
     </st:attribute>
+    <st:attribute name="onclick" deprecated="true">
+      Onclick inline JS handler. Deprecated, specify data-callback attribute instead.
+    </st:attribute>
+    <st:attribute name="data-callback" since="TODO">
+      Name of a global function to call when clicked.
+      It will be called with an element (currently 'a') as first argument, and the event as second argument.
+      You can specify further data-* attributes to customize behavior, those will be defined on the element passed as first argument.
+      See https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/dataset for more information about these attributes.
+      Has no effect if you specify the 'requiresConfirmation' attribute.
+      Has no effect on menu items showing in context menus, only 'href', 'post', and 'requiresConfirmation' attributes substantially change behavior there.
+      Set 'contextMenu' to 'false' to remove this task from those menus.
+    </st:attribute>
     <st:attribute name="badge" type="jenkins.management.Badge">
       If set, displays the value as a small badge on the right side of the sidepanel item.
       (since 2.401)
@@ -161,19 +173,6 @@ THE SOFTWARE.
               <l:icon src="${icon}" />
             </j:set>
             ${taskTags!=null and attrs.contextMenu!='false' ? taskTags.add(href, iconSrc, iconXml, title, post == 'true', requiresConfirmation == 'true', null, confirmationMessage ?: null) : null}
-            <j:set var="id" value="${h.generateId()}"/>
-            <j:if test="${attrs.onclick == null and post and not requiresConfirmation}">
-                <script>
-                    function postRequest_${id}(a) {
-                      fetch(a.href, {
-                        method: 'post',
-                        headers: crumb.wrap({}),
-                      })
-                      hoverNotification('${%Done.}', a.parentNode);
-                      return false;
-                    }
-                </script>
-            </j:if>
 
             <j:choose>
               <j:when test="${requiresConfirmation and not attrs.onClick}">
@@ -191,7 +190,14 @@ THE SOFTWARE.
               </j:when>
 
               <j:otherwise>
-                <a href="${href}" class="task-link ${isCurrent ? 'task-link--active' : ''}" onclick="${attrs.onclick ?: (post ? 'return postRequest_' + id + '(this)' : null)}">
+                <m:a xmlns:m="jelly:hudson.util.jelly.MorphTagLibrary"
+                     href="${href}"
+                     class="task-link task-link-no-confirm ${isCurrent ? 'task-link--active' : ''}"
+                     data-task-success="${%Done.}"
+                     data-task-post="${attrs.post}"
+                     ATTRIBUTES="${attrs}"
+                     EXCEPT="badge confirmationMessage contextMenu destructive enabled href icon permission permissions post requiresConfirmation title">
+                  <!-- all documented attributes except onclick and data-* are in EXCEPT -->
                   <span class="task-icon-link">
                     <l:icon src="${icon}" />
                   </span>
@@ -201,7 +207,8 @@ THE SOFTWARE.
                       ${attrs.badge.text}
                     </span>
                   </j:if>
-                </a>
+                </m:a>
+                <st:adjunct includes="lib.layout.task.task" />
               </j:otherwise>
             </j:choose>
           </span>

core/src/main/resources/lib/layout/task/task.js

@@ -0,0 +1,28 @@
+Behaviour.specify("a.task-link-no-confirm", "task-link", 0, function (el) {
+  if (el.onclick !== null) {
+    return;
+  }
+
+  let post = el.dataset.taskPost;
+  let callback = el.dataset.callback;
+  let success = el.dataset.taskSuccess;
+  let href = el.href;
+
+  if (callback !== undefined) {
+    el.onclick = function (ev) {
+      window[callback](el, ev);
+    };
+    return;
+  }
+
+  if (post === "true") {
+    el.onclick = function (ev) {
+      fetch(href, {
+        method: "post",
+        headers: crumb.wrap({}),
+      });
+      hoverNotification(success, el.parentNode);
+      ev.preventDefault();
+    };
+  }
+});