[JENKINS-56109] Change Jenkins configuration UI from tables to divs

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

@@ -31,15 +31,15 @@ l.layout(permission:app.SYSTEM_READ, title:my.displayName, cssclass:request.getP
                 }
 
                 f.entry(title:_("Security Realm")) {
-                    table(style:"width:100%") {
+                    div(style:"width:100%") {
                         f.descriptorRadioList(title:_("Security Realm"),varName:"realm",         instance:app.securityRealm,         descriptors:h.filterDescriptors(app, SecurityRealm.all()))
                     }
                 }
             }
 
             f.section(title:_("Authorization")) {
                 f.entry(title:_("Strategy")) {
-                    table(style:"width:100%") {
+                    div(style:"width:100%") {
                         f.descriptorRadioList(title:_("Authorization"), varName:"authorization", instance:app.authorizationStrategy, descriptors:h.filterDescriptors(app, AuthorizationStrategy.all()))
                     }
                 }
@@ -66,7 +66,7 @@ l.layout(permission:app.SYSTEM_READ, title:my.displayName, cssclass:request.getP
                 f.advanced(title: _("Agent protocols"), align:"left") {
                     f.entry(title: _("Agent protocols")) {
                         def agentProtocols = my.agentProtocols
-                        table(width:"100%") {
+                        div() {
                             for (AgentProtocol p : AgentProtocol.all()) {
                                 if (p.name != null && !p.required) {
                                     f.block() {
@@ -75,17 +75,15 @@ l.layout(permission:app.SYSTEM_READ, title:my.displayName, cssclass:request.getP
                                                 checked: agentProtocols.contains(p.name),
                                                 json: p.name)
                                     }
-                                    tr() {
-                                        td(colspan:"2")
-                                        td(class:"setting-description"){
+                                    div(class: "tr") {
+                                        div(class:"setting-description"){
                                             st.include(from:p, page: "description", optional:true)
                                             if (p.deprecated) {
                                               br()
                                               text(b(_("Deprecated. ")))
                                               st.include(from:p, page: "deprecationCause", optional:true)
                                             }
                                         }
-                                        td()
                                     }
                                 }
                             }

core/src/main/resources/hudson/triggers/SCMTrigger/help.html

@@ -5,5 +5,5 @@
   Note that this is going to be an expensive operation for CVS, as every polling
   requires Jenkins to scan the entire workspace and verify it with the server.
   Consider setting up a "push" trigger to avoid this overhead, as described in
-  <a href="https://jenkins.io/redirect/scm-change-trigger">this document</a>
+  <a href="https://jenkins.io/redirect/scm-change-trigger">this document</a>.
 </div>

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

@@ -33,7 +33,7 @@ f.section(title: _("Administrative monitors configuration")) {
     f.advanced(title: _("Administrative monitors")) {
         f.entry(title: _("Enabled administrative monitors")) {
             p(_("blurb"))
-            table(width: "100%") {
+            div(width: "100%") {
                 for (AdministrativeMonitor am : new ArrayList<>(AdministrativeMonitor.all())
                         .sort({ o1, o2 -> o1.getDisplayName() <=> o2.getDisplayName() })) {
                     f.block() {
@@ -42,12 +42,10 @@ f.section(title: _("Administrative monitors configuration")) {
                                 checked: am.enabled,
                                 json: am.id)
                     }
-                    tr() {
-                        td(colspan: "2")
-                        td(class: "setting-description") {
+                    div(class: "tr") {
+                        div(class: "setting-description") {
                             st.include(from: am, page: "description", optional: true)
                         }
-                        td()
                     }
                 }
             }

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

@@ -7,7 +7,7 @@ def f=namespace(lib.FormTagLib)
 f.optionalBlock( field:"useProjectNamingStrategy", title:_("useNamingStrategy"), checked:app.useProjectNamingStrategy) {
 
     f.entry(title:_("namingStrategyTitle")) {
-        table(style:"width:100%") {
+        div(style:"width:100%") {
             f.descriptorRadioList(title:_("strategy"), varName:"namingStrategy", instance:app.projectNamingStrategy, descriptors:ProjectNamingStrategy.all())
         }
     }

core/src/main/resources/jenkins/security/ApiTokenProperty/resources.css

@@ -143,6 +143,7 @@
 }
 .token-list .repeated-chunk {
     border-width: 0;
+    padding-left: 0;
 }
 .token-list .repeatable-add{
     margin: 6px 6px 3px 6px;

core/src/main/resources/lib/form/advanced.jelly

@@ -40,9 +40,8 @@ THE SOFTWARE.
     </st:attribute>
   </st:documentation>
 
-	<tr><td/><td/>
-	  <td>
-      <st:adjunct includes="lib.form.advanced.advanced"/>
+	<div class='tr'>
+          <st:adjunct includes="lib.form.advanced.advanced"/>
 
 	    <div class="advancedLink" style="${attrs.align!=null?('text-align:'+attrs.align):''}">
               <j:set var="id" value="${h.generateId()}"/>
@@ -53,10 +52,10 @@ THE SOFTWARE.
 	      <input type="button" value="${attrs.title?:'%Advanced'}..." class="advanced-button advancedButton" /><!-- advancedButton is legacy -->
 	    </div>
             <j:new var="customizedFields" className="java.util.TreeSet"/>
-	    <table class="advancedBody"><tbody>
+	    <div class="advancedBody"><div class="tbody">
 	    <!-- this is the hidden portion that hosts the "advanced" part. Contents will be moved to the master table when "advanced..." is clicked -->
 	      <d:invokeBody/>
-	    </tbody></table>
+	    </div></div>
             <j:if test="${!customizedFields.isEmpty()}">
               <script>
                   {
@@ -69,7 +68,5 @@ THE SOFTWARE.
                   }
               </script>
             </j:if>
-	  </td>
-	  <td/>
-	</tr>
+	</div>
 </j:jelly>

core/src/main/resources/lib/form/advanced/advanced.js

@@ -1,11 +1,17 @@
 Behaviour.specify("INPUT.advanced-button", 'advanced', 0, function(e) {
         makeButton(e,function(e) {
             var link = $(e.target).up(".advancedLink");
+            var tr;
             link.style.display = "none"; // hide the button
 
-            var container = link.next("table.advancedBody").down(); // TABLE -> TBODY
-
-            var tr = link.up("TR");
+            var container = link.next("table.advancedBody");
+            if (container) {
+                container = container.down(); // TABLE -> TBODY
+                tr = link.up("TR");
+            } else {
+                container = link.next("div.advancedBody");
+                tr = link.up(".tr");
+            }
 
             // move the contents of the advanced portion into the main table
             var nameRef = tr.getAttribute("nameref");

core/src/main/resources/lib/form/block.jelly

@@ -27,9 +27,9 @@ THE SOFTWARE.
   <st:documentation>
     Full-width space in the form table that can be filled with arbitrary HTML.
   </st:documentation>
-	<tr>
-	  <td colspan="4">
+	<div class='tr'>
+	  <div colspan="4">
 	    <d:invokeBody />
-	  </td>
-	</tr>
-</j:jelly>
+	  </div>
+	</div>
+</j:jelly>

core/src/main/resources/lib/form/checkbox.jelly

@@ -62,6 +62,7 @@ THE SOFTWARE.
   <j:set var="name" value="${attrs.name ?: '_.'+attrs.field}"/>
   <j:set var="default" value="${attrs.default ?: false}"/>
   <j:set var="value" value="${attrs.checked ?: instance[attrs.field] ?: default}"/>
+
   <input type="checkbox"
          name="${name}"
          value="${attrs.value}"
@@ -70,10 +71,8 @@ THE SOFTWARE.
          checkUrl="${attrs.checkUrl}" checkDependsOn="${attrs.checkDependsOn}" json="${attrs.json}"
          disabled="${readOnlyMode ? 'true' : null}"
          checked="${value ? 'true' : null}"/>
-  <j:if test="${attrs.title!=null}">
-    <label class="attach-previous"
-           title="${attrs.tooltip}">${attrs.title}</label>
-  </j:if>
+  <label class="attach-previous setting-checkbox ${attrs.title == null ? 'js-checkbox-label-empty' : ''}"
+         title="${attrs.tooltip}">${attrs.title}</label>
   <j:if test="${customizedFields != null and attrs.field != null and value != default}">
     <j:mute>${customizedFields.add(name)}</j:mute>
   </j:if>

core/src/main/resources/lib/form/description.jelly

@@ -27,11 +27,11 @@ THE SOFTWARE.
   <st:documentation>
     Renders a row that shows description text below an input field.
   </st:documentation>
-	<tr>
-    <td colspan="2"/>
-    <td class="setting-description">
-	    <d:invokeBody />
-	  </td>
-	  <td />
-	</tr>
-</j:jelly>
+  <div class='tr'>
+    <div colspan="2"></div>
+    <div class="setting-description">
+      <d:invokeBody />
+    </div>
+    <div></div>
+  </div>
+</j:jelly>

core/src/main/resources/lib/form/descriptorList.jelly

@@ -67,11 +67,11 @@ THE SOFTWARE.
   <j:if test="${!empty(descriptors) or context['org.apache.commons.jelly.body']!=null}">
     <f:section title="${attrs.title}" name="${attrs.field?:attrs.name}">
       <j:if test="${attrs.field!=null}">
-        <tr class="stapler-class-bag">
-          <td>
+        <div class="stapler-class-bag tr">
+          <div>
             <input type="hidden" name="stapler-class-bag" value="true" />
-          </td>
-        </tr>
+          </div>
+        </div>
       </j:if>
 
       <d:invokeBody />

core/src/main/resources/lib/form/descriptorRadioList.jelly

@@ -48,14 +48,14 @@ THE SOFTWARE.
   <j:set var="targetType" value="${attrs.targetType?:it.class}"/>
   <f:section title="${attrs.title}">
     <d:invokeBody />
-	  <j:forEach var="d" items="${descriptors}" varStatus="loop">
+    <j:forEach var="d" items="${descriptors}" varStatus="loop">
       <f:radioBlock name="${varName}" help="${d.helpFile}" value="${loop.index}"
-        title="${d.displayName}" checked="${instance.descriptor==d}">
+                    title="${d.displayName}" checked="${instance.descriptor==d}">
         <j:set var="descriptor" value="${d}" />
-	      <j:set var="instance" value="${instance.descriptor==d?instance:null}" />
-	      <f:class-entry descriptor="${descriptor}" />
-	      <st:include from="${d}" page="${d.configPage}" optional="true" />
-	    </f:radioBlock>
-	  </j:forEach>
-	</f:section>
-</j:jelly>
+        <j:set var="instance" value="${instance.descriptor==d?instance:null}" />
+        <f:class-entry descriptor="${descriptor}" />
+        <st:include from="${d}" page="${d.configPage}" optional="true" />
+      </f:radioBlock>
+    </j:forEach>
+  </f:section>
+</j:jelly>

core/src/main/resources/lib/form/dragdrop/dragdrop.js

@@ -40,7 +40,7 @@ var DragDrop = function(id, sGroup, config) {
             // set Y constraint to be within the container
             var totalHeight = el.parentNode.offsetHeight;
             var blockHeight = el.offsetHeight;
-            this.setYConstraint(el.offsetTop, totalHeight-blockHeight-el.offsetTop);
+            this.setYConstraint(el.offsetTop, el.offsetTop - totalHeight - blockHeight);
 
             el.style.visibility = "hidden";
 

core/src/main/resources/lib/form/dropdownList.jelly

@@ -39,40 +39,38 @@ THE SOFTWARE.
     </st:attribute>
   </st:documentation>
 
-    <tr>
-        <td class="setting-leftspace"><st:nbsp/></td>
-        <td class="setting-name">
+    <div class='tr'>
+        <div class="setting-name help-sibling">
             ${attrs.title}
-        </td>
-        <td class="setting-main">
+            <f:helpLink url="${attrs.help}" featureName="${title}"/>
+        </div>
+        <j:if test="${attrs.help!=null}">
+            <f:helpArea/>
+        </j:if>
+        <div class="setting-main">
             <!-- create drop-down list -->
             <select class="setting-input dropdownList"
                     disabled="${readOnlyMode ? 'true' : null}"
             >
                 <j:set var="dropdownListMode" value="createSelectField"/>
                 <d:invokeBody/>
             </select>
-        </td>
-        <f:helpLink url="${attrs.help}" featureName="${title}"/>
-    </tr>
+        </div>
+    </div>
 
     <!-- generate the actual form entries -->
-    <tr class="dropdownList-container">
-      <td colspan="2"/>
-      <td colspan="2">
-        <table width="100%" name="${name}">
+    <div class="dropdownList-container tr">
+      <div>
+        <div width="100%" name="${name}">
             <j:set var="dropdownListMode" value="generateEntries"/>
             <d:invokeBody/>
-        </table>
-      </td>
-    </tr>
+        </div>
+      </div>
+    </div>
 
     <j:if test="${!empty(attrs.description)}">
         <f:description>
             <j:out value="${description}"/>
         </f:description>
     </j:if>
-    <j:if test="${attrs.help!=null}">
-        <f:helpArea/>
-    </j:if>
 </j:jelly>

core/src/main/resources/lib/form/dropdownListBlock.jelly

@@ -50,10 +50,10 @@ THE SOFTWARE.
     </j:when>
     <j:when test="${dropdownListMode=='generateEntries'}">
       <!-- sandwich them by markers so that we know what to show/hide -->
-      <tr class="dropdownList-start rowvg-start" />
+      <div class="dropdownList-start rowvg-start tr"></div>
       <j:choose>
         <j:when test="${attrs.lazy!=null and !attrs.selected}">
-          <l:renderOnDemand capture="${attrs.lazy}" tag="tr">
+          <l:renderOnDemand capture="${attrs.lazy}" tag="div">
             <d:invokeBody />
           </l:renderOnDemand>
         </j:when>
@@ -64,7 +64,7 @@ THE SOFTWARE.
       <j:if test="${!empty(attrs.staplerClass)}">
         <f:class-entry clazz="${attrs.staplerClass}" />
       </j:if>
-      <tr class="dropdownList-end rowvg-end" />
+      <div class="dropdownList-end rowvg-end tr"></div>
     </j:when>
   </j:choose>
 </j:jelly>