[JENKINS-73973] Improve CSP compatibility

* extract inline event handlers from ScriptlerBuilder/config.jelly to
  scriptler.js
* extract inline script block from ScriptlerBuilder/config.jelly to
  scriptler.js

Co-authored-by: Basil Crow <me@basilcrow.com>

Author: yaroslavafenkin

src/main/resources/org/jenkinsci/plugins/scriptler/ScriptlerManagement/confirm-remove.js

@@ -2,7 +2,7 @@ document.addEventListener("DOMContentLoaded", () => {
   const removeScriptButtons = document.querySelectorAll(".scriptler-remove-script-form");
   removeScriptButtons.forEach((button) =>
     button.addEventListener("click", (e) => {
-      const name = e.currentTarget.getAttribute("data-name");
+      const name = e.currentTarget.dataset.name;
       if (!confirm("Sure you want to delete [" + name + "]?")) {
         e.preventDefault();
       }

src/main/resources/org/jenkinsci/plugins/scriptler/builder/ScriptlerBuilder/config.jelly

@@ -3,7 +3,11 @@
 
     <st:adjunct includes="org.kohsuke.stapler.bind"/>
 	<st:once>
-		<script type="text/javascript" src="${resURL}/plugin/scriptler/lib/scriptler.js" />
+		<script id="scriptler-builder-behaviour"
+				type="text/javascript"
+				data-root-url="${rootURL}"
+				data-has-permission="${h.hasPermission(it.build,descriptor.requiredPermission)}"
+				src="${resURL}/plugin/scriptler/lib/scriptler.js" />
 	</st:once>
 	<j:choose>
 		<j:when test="${empty(descriptor.scripts)}">
@@ -20,7 +24,7 @@
 			<f:entry title="${%Script}" field="buildStepContent">
 			    <input type="hidden" name="backupJobName" />
 			    <input type="hidden" name="builderId" value="${instance.builderId}" />
-				<select name="scriptlerScriptId" data-item-url="${it.url}" onChange="scriptler_initDetailLink('${rootURL}', this);scriptler_showParams(this, this.value);" >
+				<select name="scriptlerScriptId" data-item-url="${it.url}">
 					<option value="">(Default)</option>
 					<j:forEach var="inst" items="${descriptor.scripts}" varStatus="loop">
 						<j:choose>
@@ -33,7 +37,7 @@
 						</j:choose>
 					</j:forEach>
 				</select>
-				<a target="_blank" name="showScriptlerDetailLink" href="" style="display:none;" onclick="window.open(this.href,'window','width=900,height=640,resizable,scrollbars,toolbar,menubar') ;return false;"> ${%ViewScript}</a>
+				<a target="_blank" name="showScriptlerDetailLink" href="" style="display:none;"> ${%ViewScript}</a>
 				<div id="scriptlerDescription">${%RequiredParameters} <div name="scriptlerParameters" /></div>
                 <f:block>
                    <f:entry title="${%PropagateParams}" field="propagateParams" help="/plugin/scriptler/help-propagateParams.html">
@@ -62,25 +66,4 @@
 		</j:otherwise>
 	</j:choose>
 	<st:bind var="scriptlerBuilderDesc" value="${descriptor}"/>
-	<st:once>
-		<script type="text/javascript">
-			window.addEventListener('load', function() { 
-				var all = new Array();
-	   			all = document.getElementsByName('scriptlerScriptId');
-				for(var i = 0; i &lt; all.length; i++) {
-				    all.item(i).disabled=${!h.hasPermission(it.build,descriptor.requiredPermission)};
-					scriptler_initDetailLink('${rootURL}', all.item(i));
-				    scriptler_showParams(all.item(i), all.item(i).value);
-				}
-				
-				// remember the job name to send it along with the form
-				var jobName = document.getElementsByName('name').item(0).value;
-				var allBackupJobNames = document.getElementsByName('backupJobName');
-				for(var i = 0; i &lt; allBackupJobNames.length; i++) {
-				    allBackupJobNames.item(i).value = jobName; 
-				} 
-				
-			});
-		</script>
-	</st:once>
 </j:jelly>

src/main/webapp/lib/scriptler.js

@@ -1,13 +1,13 @@
-function scriptler_initDetailLink(rootURL, referenceTag) {
-  var itemURL = referenceTag.getAttribute("data-item-url");
+function scriptler_initDetailLink(rootUrl, referenceTag) {
+  var itemUrl = referenceTag.dataset.itemUrl;
   var selId = referenceTag.value;
   var all = new Array();
   all = document.getElementsByName("scriptlerScriptId");
   for (var i = 0; i < all.length; i++) {
     if (referenceTag == all.item(i)) {
       var detailsLinkTag = document.getElementsByName("showScriptlerDetailLink").item(i);
       if (selId.length != 0) {
-        detailsLinkTag.href = rootURL + "/" + itemURL + "scriptler/showScript?id=".concat(selId);
+        detailsLinkTag.href = rootUrl + "/" + itemUrl + "scriptler/showScript?id=".concat(selId);
         detailsLinkTag.style.display = "block";
       } else {
         detailsLinkTag.style.display = "none";
@@ -39,3 +39,42 @@ function scriptler_showParams(referenceTag, scriptId) {
     }
   });
 }
+
+Behaviour.specify("select[name='scriptlerScriptId']", "ScriptlerBuilderSelect", 0, function (element) {
+  const script = document.querySelector("#scriptler-builder-behaviour");
+  const rootUrl = script.dataset.rootUrl;
+  element.addEventListener("change", function (event) {
+    const target = event.target;
+    scriptler_initDetailLink(rootUrl, target);
+    scriptler_showParams(target, target.value);
+  });
+});
+
+Behaviour.specify("a[name='showScriptlerDetailLink']", "ScriptlerBuilderDetailLink", 0, function (element) {
+  element.addEventListener("click", function (event) {
+    event.preventDefault();
+    const target = event.target;
+    window.open(target.href, "window", "width=900,height=640,resizable,scrollbars,toolbar,menubar");
+  });
+});
+
+document.addEventListener("DOMContentLoaded", function () {
+  const script = document.querySelector("#scriptler-builder-behaviour");
+  const rootUrl = script.dataset.rootUrl;
+  const hasPermission = script.dataset.hasPermission;
+
+  var all = new Array();
+  all = document.getElementsByName("scriptlerScriptId");
+  for (var i = 0; i < all.length; i++) {
+    all.item(i).disabled = !hasPermission;
+    scriptler_initDetailLink(rootUrl, all.item(i));
+    scriptler_showParams(all.item(i), all.item(i).value);
+  }
+
+  // remember the job name to send it along with the form
+  var jobName = document.getElementsByName("name").item(0).value;
+  var allBackupJobNames = document.getElementsByName("backupJobName");
+  for (var i = 0; i < allBackupJobNames.length; i++) {
+    allBackupJobNames.item(i).value = jobName;
+  }
+});