Modernise form components

core/src/main/java/hudson/Functions.java

@@ -2289,4 +2289,10 @@ public static boolean isContextMenuVisible(Action a) {
             return true;
         }
     }
+
+    @SuppressFBWarnings(value = "PREDICTABLE_RANDOM", justification = "True randomness isn't necessary for form item IDs")
+    @Restricted(NoExternalUse.class)
+    public static String generateItemId() {
+        return String.valueOf(Math.floor(Math.random() * 3000));
+    }
 }

core/src/main/resources/hudson/logging/LogRecorderManager/new.jelly

@@ -33,7 +33,7 @@ THE SOFTWARE.
     <l:main-panel>
       <f:form method="post" action="newLogRecorder">
         <f:entry title="${%Name}">
-          <input type="text" name="name" class="setting-input" id="box" autofocus="autofocus" />
+          <input type="text" name="name" class="jenkins-input" id="box" autofocus="autofocus" />
         </f:entry>
 
         <f:block>

core/src/main/resources/hudson/model/AbstractProject/configure-common.jelly

@@ -36,7 +36,7 @@ THE SOFTWARE.
     <!-- if there's only one JDK configured, always use that. -->
     <f:entry title="JDK"
              description="${%JDK to be used for this project}">
-      <select class="setting-input validated" name="jdk" checkUrl="'${rootURL}/defaultJDKCheck?value='+this.value">
+      <select class="jenkins-input validated" name="jdk" checkUrl="'${rootURL}/defaultJDKCheck?value='+this.value">
         <j:getStatic var="DEFAULT_NAME" className="hudson.model.JDK" field="DEFAULT_NAME"/>
         <option>${DEFAULT_NAME}</option>
         <j:forEach var="inst" items="${jdks}">
@@ -55,7 +55,7 @@ THE SOFTWARE.
     <p:config-blockWhenDownstreamBuilding />
     <st:include page="configure-advanced.jelly" optional="true" />
     <f:entry title="${%Display Name}" field="displayNameOrNull">
-       <f:textbox checkUrl="'${rootURL}/checkDisplayName?displayName='+encodeURIComponent(this.value)+'&amp;jobName='+encodeURIComponent('${h.jsStringEscape(it.name)}')"/>
+      <f:textbox checkUrl="'${rootURL}/checkDisplayName?displayName='+encodeURIComponent(this.value)+'&amp;jobName='+encodeURIComponent('${h.jsStringEscape(it.name)}')"/>
     </f:entry>
     <f:optionalBlock name="keepDependencies" checked="${it.keepDependencies}" title="${%Keep the build logs of dependencies}" help="/help/tasks/fingerprint/keepDependencies.html"/>
   </f:advanced>

core/src/main/resources/hudson/model/Computer/configure.jelly

@@ -36,9 +36,11 @@ THE SOFTWARE.
         <j:set var="instance" value="${it.node}" />
         <j:set var="descriptor" value="${instance.descriptor}" />
 
-        <f:entry title="${%Name}" field="name">
-          <f:textbox value="${it.name}" /><!-- anomaly. instance[field] isn't what we want. -->
-        </f:entry>
+        <div class="jenkins-section">
+          <f:entry title="${%Name}" field="name">
+            <f:textbox value="${it.name}" /><!-- anomaly. instance[field] isn't what we want. -->
+          </f:entry>
+        </div>
 
         <!-- main body of the configuration -->
         <st:include it="${instance}" page="configure-entries.jelly" />

core/src/main/resources/hudson/model/Job/configure.jelly

@@ -45,9 +45,11 @@ THE SOFTWARE.
             <j:set var="descriptor" value="${it.descriptor}" />
             <j:set var="instance" value="${it}" />
 
-            <f:entry title="${%Description}" help="${app.markupFormatter.helpUrl}">
-              <f:textarea name="description" value="${it.description}" codemirror-mode="${app.markupFormatter.codeMirrorMode}" codemirror-config="${app.markupFormatter.codeMirrorConfig}" previewEndpoint="/markupFormatter/previewDescription"/>
-            </f:entry>
+            <div class="jenkins-section">
+              <f:entry title="${%Description}" help="${app.markupFormatter.helpUrl}">
+                <f:textarea name="description" value="${it.description}" codemirror-mode="${app.markupFormatter.codeMirrorMode}" codemirror-config="${app.markupFormatter.codeMirrorConfig}" previewEndpoint="/markupFormatter/previewDescription"/>
+              </f:entry>
+            </div>
 
             <f:descriptorList field="properties" descriptors="${h.getJobPropertyDescriptors(it)}" forceRowSet="true"/>
 

core/src/main/resources/hudson/model/ProxyView/configure-entries.jelly

@@ -26,7 +26,7 @@ THE SOFTWARE.
 <j:jelly xmlns:j="jelly:core" xmlns:st="jelly:stapler" xmlns:d="jelly:define" xmlns:l="/lib/layout" xmlns:t="/lib/hudson" xmlns:f="/lib/form">
     <f:entry title="${%View name}"
     description="${%The name of a global view that will be shown.}">
-      <select class="setting-input" name="proxiedViewName">
+      <select class="jenkins-input" name="proxiedViewName">
         <j:forEach var="inst" items="${app.views}">
           <f:option selected="${inst.viewName==it.proxiedViewName}" value="${inst.viewName}">${inst.viewName}</f:option>
         </j:forEach>

core/src/main/resources/hudson/model/UsageStatistics/global.properties

@@ -21,5 +21,5 @@
 # THE SOFTWARE.
 
 statsBlurb=\
-  Help make Jenkins better by sending anonymous usage statistics and crash reports to the Jenkins project.
+  Help make Jenkins better by sending anonymous usage statistics and crash reports to the Jenkins project
 

core/src/main/resources/hudson/model/View/newJob.jelly

@@ -39,7 +39,7 @@ THE SOFTWARE.
             <div class="header">
               <div class="add-item-name">
                 <label for="name" class="h3">${%ItemName.label}</label>
-                <input name="name" id="name" data-valid="false" type="text" tabindex="0" />
+                <input name="name" class="jenkins-input" id="name" data-valid="false" type="text" tabindex="0" />
                 <div class="input-help">&#187; ${%ItemName.help}</div>
                 <div id="itemname-required" class="input-validation-message input-message-disabled">&#187; ${%ItemName.validation.required}</div>
                 <div id="itemname-invalid" class="input-validation-message input-message-disabled"></div>

core/src/main/resources/hudson/security/GlobalSecurityConfiguration/index.groovy

@@ -12,11 +12,9 @@ def l=namespace(lib.LayoutTagLib)
 def st=namespace("jelly:stapler")
 
 l.layout(permission:app.SYSTEM_READ, title:my.displayName, cssclass:request.getParameter('decorate')) {
+    l.app_bar(title: my.displayName)
+
     l.main_panel {
-        h1 {
-            l.icon(class: 'icon-secure icon-xlg')
-            text(my.displayName)
-        }
         set("readOnlyMode", !app.hasPermission(app.ADMINISTER))
 
         p()
@@ -32,12 +30,8 @@ l.layout(permission:app.SYSTEM_READ, title:my.displayName, cssclass:request.getP
                     f.checkbox(title:_("Disable remember me"), field: "disableRememberMe")
                 }
 
-                div(style:"width:100%") {
-                    f.descriptorRadioList(title:_("Security Realm"), varName:"realm", instance:app.securityRealm, descriptors: h.filterDescriptors(app, SecurityRealm.all()))
-                }
-            }
+                f.descriptorRadioList(title:_("Security Realm"), varName:"realm", instance:app.securityRealm, descriptors: h.filterDescriptors(app, SecurityRealm.all()))
 
-            div(style:"width:100%") {
                 f.descriptorRadioList(title:_("Authorization"), varName:"authorization", instance:app.authorizationStrategy, descriptors:h.filterDescriptors(app, AuthorizationStrategy.all()))
             }
 

core/src/main/resources/hudson/security/LegacySecurityRealm/config.groovy

@@ -7,7 +7,9 @@ import jenkins.model.Jenkins
 def f = namespace(lib.FormTagLib)
 
 f.entry(title: _('Unprotected URLs')) {
-    p(_('blurb'))
+    p(class: "jenkins-form-description") {
+        _('blurb')
+    }
     ul {
         for (def action : Jenkins.get().getActions().sort { x, y -> x.getUrlName() <=> y.getUrlName() }) {
             if (action instanceof UnprotectedRootAction) {

core/src/main/resources/hudson/tasks/BuildTrigger/config.jelly

@@ -31,17 +31,11 @@ THE SOFTWARE.
                field="childProjects"/>
 	</f:entry>
   <j:if test="${descriptor.showEvenIfUnstableOption(targetType)}"> <!-- TODO JENKINS-16444 this will always be true when first adding step -->
-  	<f:entry title="">
       <f:radio name="BuildTrigger.threshold" checked="${instance.threshold==null || instance.threshold.toString()=='SUCCESS'}"
-              title="${%Trigger only if build is stable}" value="SUCCESS"/>
-    </f:entry>
-    <f:entry title="">
+              title="${%Trigger only if build is stable}" id="threshold-SUCCESS" value="SUCCESS"/>
       <f:radio name="BuildTrigger.threshold" checked="${instance.threshold.toString()=='UNSTABLE'}"
-              title="${%Trigger even if the build is unstable}" value="UNSTABLE"/>
-    </f:entry>
-    <f:entry title="">
+              title="${%Trigger even if the build is unstable}" id="threshold-UNSTABLE" value="UNSTABLE"/>
       <f:radio name="BuildTrigger.threshold" checked="${instance.threshold.toString()=='FAILURE'}"
-              title="${%Trigger even if the build fails}" value="FAILURE"/>
-    </f:entry>
+              title="${%Trigger even if the build fails}" id="threshold-FAILURE" value="FAILURE"/>
   </j:if>
 </j:jelly>

core/src/main/resources/hudson/tasks/Maven/config.jelly

@@ -26,7 +26,7 @@ THE SOFTWARE.
 <j:jelly xmlns:j="jelly:core" xmlns:st="jelly:stapler" xmlns:d="jelly:define" xmlns:l="/lib/layout" xmlns:t="/lib/hudson" xmlns:f="/lib/form">
   <j:if test="${!empty(descriptor.installations)}">
     <f:entry title="${%Maven Version}">
-      <select class="setting-input" name="maven.name">
+      <select class="jenkins-input" name="maven.name">
         <option value="(Default)">(${%Default})</option>
         <j:forEach var="inst" items="${descriptor.installations}">
           <f:option selected="${inst.name==instance.maven.name}" value="${inst.name}">${inst.name}</f:option>

core/src/main/resources/hudson/tools/ToolLocationNodeProperty/config.jelly

@@ -28,7 +28,7 @@
 		<f:repeatable var="location" name="locations" items="${instance.locations}">
 			<table width="100%">
 				<f:entry title="${%Name}">
-                  <select class="setting-input" name="locations.key">
+                  <select class="jenkins-input" name="locations.key">
                     <j:forEach var="toolDescriptor" items="${descriptor.toolDescriptors}">
                         <j:forEach var="toolInstallation" items="${toolDescriptor.installations}">
                             <f:option selected="${descriptor.getKey(toolInstallation)==location.key}" value="${descriptor.getKey(toolInstallation)}">(${toolDescriptor.displayName}) ${toolInstallation.name}</f:option>

core/src/main/resources/hudson/views/GlobalDefaultViewConfiguration/config.groovy

@@ -4,10 +4,12 @@ def f=namespace(lib.FormTagLib)
 
 if (app.views.size()>1) {
     f.entry(title:_("Default view"), field:"defaultView") {
-        select("class":"setting-input", name:"primaryView") {
-            app.views.each { v ->
-                f.option(value:v.viewName, selected:app.primaryView==v) {
-                    text(v.viewName)
+        div(class:"jenkins-select") {
+            select(name:"primaryView", class:"jenkins-select__input") {
+                app.views.each { v ->
+                    f.option(value:v.viewName, selected:app.primaryView==v) {
+                        text(v.viewName)
+                    }
                 }
             }
         }

core/src/main/resources/hudson/views/StatusFilter/config.jelly

@@ -26,7 +26,7 @@ THE SOFTWARE.
 <j:jelly xmlns:j="jelly:core" xmlns:st="jelly:stapler" xmlns:d="jelly:define"
 	xmlns:l="/lib/layout" xmlns:t="/lib/hudson" xmlns:f="/lib/form">
 	<f:entry title="${%Status Filter}" help="/help/view-config/statusFilter.html">
-        <select name="statusFilter" class="setting-input">
+        <select name="statusFilter" class="jenkins-input">
             <f:option value="1" selected="${it.statusFilter==true}">${%Enabled jobs only}</f:option>
             <f:option value="2" selected="${it.statusFilter==false}">${%Disabled jobs only}</f:option>
         </select>

core/src/main/resources/jenkins/fingerprints/GlobalFingerprintConfiguration/config.jelly

@@ -20,8 +20,8 @@ THE SOFTWARE.
 <?jelly escape-by-default='true'?>
 <j:jelly xmlns:j="jelly:core" xmlns:f="/lib/form">
     <f:section title="${%Fingerprints}">
-        <f:entry title="Disable Fingerprint Cleanup">
-            <f:checkbox field="fingerprintCleanupDisabled" default="${it.fingerprintCleanupDisabled}" />
+        <f:entry>
+            <f:checkbox title="Disable Fingerprint Cleanup" field="fingerprintCleanupDisabled" default="${it.fingerprintCleanupDisabled}" />
         </f:entry>
         <j:if test="${descriptor.fingerprintStorageDescriptors.size() gt 1}">
             <f:entry>

core/src/main/resources/jenkins/formelementpath/form-element-path.js

@@ -62,7 +62,8 @@ document.addEventListener("DOMContentLoaded", function(){
                 case "button":
                     var element
                     // modern buttons aren't wrapped in spans
-                    if (e.classList.contains('jenkins-button')) {
+                    if (e.classList.contains('jenkins-button') || e.classList.contains('repeatable-delete')) {
+                        p = findParent(e);
                         element = e
                     } else {
                         p = findParent(e);

core/src/main/resources/jenkins/management/AdministrativeMonitorsConfiguration/config.groovy

@@ -32,23 +32,21 @@ st = namespace("jelly:stapler")
 f.section(title: _("Administrative monitors configuration")) {
     f.advanced(title: _("Administrative monitors")) {
         f.entry(title: _("Enabled administrative monitors")) {
-            p(_("blurb"))
-            div(width: "100%") {
-                for (AdministrativeMonitor am : new ArrayList<>(AdministrativeMonitor.all())
-                        .sort({ o1, o2 -> o1.getDisplayName() <=> o2.getDisplayName() })) {
-                    f.block() {
-                        f.checkbox(name: "administrativeMonitor",
-                                title: am.displayName,
-                                checked: am.enabled,
-                                json: am.id)
-                        if (am.isSecurity()) {
-                            span(style: 'margin-left: 0.5rem', class: 'am-badge', _("Security"))
-                        }
+            p(class: "jenkins-form-description", _("blurb"))
+            for (AdministrativeMonitor am : new ArrayList<>(AdministrativeMonitor.all())
+                    .sort({ o1, o2 -> o1.getDisplayName() <=> o2.getDisplayName() })) {
+                div(class: "jenkins-checkbox-help-wrapper") {
+                    f.checkbox(name: "administrativeMonitor",
+                            title: am.displayName,
+                            checked: am.enabled,
+                            json: am.id)
+                    if (am.isSecurity()) {
+                        span(style: 'margin-left: 0.5rem', class: 'am-badge', _("Security"))
                     }
-                    div(class: "tr") {
-                        div(class: "setting-description") {
-                            st.include(from: am, page: "description", optional: true)
-                        }
+                }
+                div(class: "tr") {
+                    div(class: "jenkins-checkbox__description") {
+                        st.include(from: am, page: "description", optional: true)
                     }
                 }
             }

core/src/main/resources/jenkins/model/GlobalCloudConfiguration/index.groovy

@@ -16,12 +16,8 @@ l.layout(norefresh:true, permission:app.SYSTEM_READ, title:my.displayName) {
             l.task(icon:"icon-gear icon-md", href:"${rootURL}/computer/", title:_("Manage Nodes"))
         }
     }
+    l.app_bar(title: my.displayName)
     l.main_panel {
-        h1 {
-            l.icon(class: 'icon-health-40to59 icon-xlg')
-            // TODO more appropriate icon
-            text(my.displayName)
-        }
         def clouds = Cloud.all()
         if (!clouds.isEmpty()) {
             p()

core/src/main/resources/jenkins/model/GlobalProjectNamingStrategyConfiguration/config.groovy

@@ -4,12 +4,14 @@ import jenkins.model.ProjectNamingStrategy
 
 def f=namespace(lib.FormTagLib)
 
-f.optionalBlock( field:"useProjectNamingStrategy", title:_("useNamingStrategy"), checked:app.useProjectNamingStrategy) {
+div(class: "jenkins-form-item") {
+    f.optionalBlock( field:"useProjectNamingStrategy", title:_("useNamingStrategy"), checked:app.useProjectNamingStrategy) {
 
-    f.entry(title:_("namingStrategyTitle")) {
-        div(style:"width:100%") {
-            f.descriptorRadioList(title:_("strategy"), varName:"namingStrategy", instance:app.projectNamingStrategy, descriptors:ProjectNamingStrategy.all())
+        f.entry(title:_("namingStrategyTitle")) {
+            div(style:"width:100%") {
+                f.descriptorRadioList(title:_("strategy"), varName:"namingStrategy", instance:app.projectNamingStrategy, descriptors:ProjectNamingStrategy.all())
+            }
         }
-    }
 
+    }
 }

core/src/main/resources/jenkins/model/Jenkins/configure.jelly

@@ -29,17 +29,20 @@ THE SOFTWARE.
 <j:jelly xmlns:j="jelly:core" xmlns:st="jelly:stapler" xmlns:d="jelly:define" xmlns:l="/lib/layout" xmlns:t="/lib/hudson" xmlns:f="/lib/form">
 <l:layout permissions="${app.MANAGE_AND_SYSTEM_READ}" title="${%Configure System}">
   <st:include page="sidepanel.jelly" />
-  <f:breadcrumb-config-outline />
+  <f:breadcrumb-config-outline title="${%Configure System}" />
+
+  <l:app-bar title="${%Configure System}" />
+
   <l:main-panel>
     <div class="behavior-loading"><l:spinner text="${%LOADING}"/></div>
-    <f:form method="post" name="config" action="configSubmit">
+    <f:form method="post" name="config" action="configSubmit" class="jenkins-form">
       <j:set var="instance" value="${it}" />
       <j:set var="descriptor" value="${instance.descriptor}" />
 
-      <f:entry title="${%Home directory}" help="/help/system-config/homeDirectory.html">
-        ${it.rootDir}
+      <f:entry title="${%Home directory}" description="${%By default, Jenkins stores all of its data in this directory on the file system}" help="/help/system-config/homeDirectory.html">
+        <div class="jenkins-quote jenkins-quote--monospace">${it.rootDir}</div>
       </f:entry>
-      <f:entry title="${%System Message}" help="/help/system-config/systemMessage.html">
+      <f:entry title="${%System Message}" description="${%This message will be displayed at the top of the Jenkins main page. This can be useful for posting notifications to your users}">
         <j:set var="readOnlyMode" value="${!h.hasPermission(app.MANAGE)}" />
         <f:textarea name="system_message" value="${it.systemMessage}" disabled="${readOnlyMode?'true':null}" readonly="${readOnlyMode?'true':null}"
                     codemirror-mode="${app.markupFormatter.codeMirrorMode}" codemirror-config="${app.markupFormatter.codeMirrorConfig}" previewEndpoint="/markupFormatter/previewDescription"/>
@@ -50,7 +53,7 @@ THE SOFTWARE.
       <j:forEach var="descriptor" items="${h.getSortedDescriptorsForGlobalConfigUnclassifiedReadable()}">
         <j:set var="readOnlyMode" value="${!editable.contains(descriptor)}" />
         <j:set var="instance" value="${descriptor}" /><!-- this makes the <f:textbox field=.../> work -->
-        <f:rowSet name="${descriptor.jsonSafeClassName}">
+        <f:rowSet name="${descriptor.jsonSafeClassName}" isFormItem="false">
           <st:include page="${descriptor.globalConfigPage}" from="${descriptor}" />
         </f:rowSet>
       </j:forEach>

core/src/main/resources/jenkins/model/Jenkins/fingerprintCheck.jelly

@@ -41,7 +41,7 @@ THE SOFTWARE.
           </div>
         </f:block>
         <f:entry title="${%File to check}">
-          <input type="file" name="name" class="setting-input" />
+          <input type="file" name="name" class="jenkins-input" />
         </f:entry>
         <f:block>
           <f:submit value="${%Check}" />

core/src/main/resources/jenkins/model/Jenkins/manage.jelly

@@ -49,7 +49,7 @@ THE SOFTWARE.
       </section>
 
       <j:forEach var="category" items="${it.categorizedManagementLinks.entrySet()}">
-        <section class="jenkins-section">
+        <section class="jenkins-section jenkins-section--bottom-padding">
           <h2 class="jenkins-section__title">${category.key.label}</h2>
           ${taskTags!=null and attrs.contextMenu!='false' ? taskTags.addHeader(category.key.label) : null}
           <div class="jenkins-section__items">

core/src/main/resources/jenkins/model/OptionalJobProperty/config.jelly

@@ -25,9 +25,7 @@ THE SOFTWARE.
 
 <?jelly escape-by-default='true'?>
 <j:jelly xmlns:j="jelly:core" xmlns:st="jelly:stapler" xmlns:f="/lib/form">
-    <f:block>
-        <f:optionalBlock title="${descriptor.displayName}" name="specified" checked="${instance != null}" inline="true" help="${descriptor.helpFile}">
-            <st:include page="config-details" from="${descriptor}" class="${descriptor.clazz}"/>
-        </f:optionalBlock>
-    </f:block>
+    <f:optionalBlock title="${descriptor.displayName}" name="specified" checked="${instance != null}" inline="true" help="${descriptor.helpFile}">
+        <st:include page="config-details" from="${descriptor}" class="${descriptor.clazz}"/>
+    </f:optionalBlock>
 </j:jelly>

core/src/main/resources/jenkins/mvn/FilePathGlobalSettingsProvider/config.jelly

@@ -24,7 +24,7 @@ THE SOFTWARE.
 
 <?jelly escape-by-default='true'?>
 <j:jelly xmlns:j="jelly:core" xmlns:st="jelly:stapler" xmlns:f="/lib/form">
-    <f:entry title="${%File path}" field="path">
+    <f:entry title="${%File path}" field="path" class="jenkins-!-margin-bottom-0">
         <f:textbox />
     </f:entry>
 </j:jelly>