Merge branch 'new-new-view-page' into update-forms

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

@@ -54,7 +54,7 @@ THE SOFTWARE.
   <j:choose>
     <j:when test="${attrs.url!=null}">
       <j:set var="altText" value="${attrs.featureName != null ? '%Help for feature:' + ' ' + attrs.featureName : '%Help'}" />
-      <a href="#" class="help-button" tooltip="${altText}" helpURL="${rootURL}${attrs.url}">
+      <a href="#" class="jenkins-help-button" tooltip="${altText}" helpURL="${rootURL}${attrs.url}">
         ?
       </a>
     </j:when>

core/src/main/resources/lib/hudson/newFromList/form.jelly

@@ -112,36 +112,7 @@ THE SOFTWARE.
         ${%Create}
       </button>
     </div>
-  </s:form>
-
-  <script><![CDATA[
-    function updateOk() {
-      function state() {
-        let form = document.getElementById("createItemForm");
-        let nameInput = document.getElementById("name");
-        let radios = form.querySelectorAll('input[type="radio"]');
-
-        if (nameInput.value.length === 0) {
-          return true;
-        }
-
-        // this means we only have dummy checkboxes
-        if (radios.length === 2) {
-          return true;
-        }
 
-        for (i = 0; i < radios.length; i++) {
-          if (radios[i].checked) {
-            return false;
-          }
-        }
-
-        return true;
-      }
-
-      document.getElementById("ok").disabled = state();
-    }
-
-    updateOk();
-    ]]></script>
+    <st:adjunct includes="lib.hudson.newFromList.validation" />
+  </s:form>
 </j:jelly>

core/src/main/resources/lib/hudson/newFromList/validation.js

@@ -0,0 +1,28 @@
+function updateOk() {
+    function state() {
+        let form = document.getElementById("createItemForm");
+        let nameInput = document.getElementById("name");
+        let radios = form.querySelectorAll('input[type="radio"]');
+
+        if (nameInput.value.length === 0) {
+            return true;
+        }
+
+        // this means we only have dummy checkboxes
+        if (radios.length === 2) {
+            return true;
+        }
+
+        for (i = 0; i < radios.length; i++) {
+            if (radios[i].checked) {
+                return false;
+            }
+        }
+
+        return true;
+    }
+
+    document.getElementById("ok").disabled = state();
+}
+
+updateOk();

test/src/test/java/hudson/model/HelpLinkTest.java

@@ -93,7 +93,7 @@ private void clickAllHelpLinks(JenkinsRule.WebClient webClient, AbstractProject
     }
 
     private void clickAllHelpLinks(HtmlPage p) throws Exception {
-        List<?> helpLinks = DomNodeUtil.selectNodes(p, "//a[@class='help-button']");
+        List<?> helpLinks = DomNodeUtil.selectNodes(p, "//a[@class='jenkins-help-button']");
         assertTrue(helpLinks.size()>0);
         System.out.println("Clicking "+helpLinks.size()+" help links");
 

war/src/main/less/abstracts/theme.less

@@ -254,6 +254,14 @@
   --form-item-max-width: 650px;
   --form-item-max-width--small: 300px;
   --form-item-max-width--medium: 450px;
+  --form-label-font-weight: bold;
+  --form-input-padding: 8px;
+  --form-input-border-radius: 6px;
+  --form-input-glow: 0 0 0 10px transparent;
+  --form-input-glow--focus: 0 0 0 5px var(--focus-input-glow);
+
+  // Animations
+  --standard-transition: 0.2s ease;
 
   // Pop out menus
   --menu-text-color: black;

war/src/main/less/modules/form.less

@@ -31,7 +31,7 @@
 .jenkins-form-label {
   display: flex;
   align-items: center;
-  font-weight: bold;
+  font-weight: var(--form-label-font-weight);
   margin-top: 0;
   margin-bottom: 0.75rem;
   padding-inline-start: 0;
@@ -68,11 +68,11 @@
   display: block;
   background: var(--input-color);
   border: 2px solid var(--input-border);
-  padding: 8px;
-  border-radius: 6px;
+  padding: var(--form-input-padding);
+  border-radius: var(--form-input-border-radius);
   width: 100%;
-  box-shadow: 0 0 0 10px transparent;
-  transition: 0.2s ease;
+  box-shadow: var(--form-input-glow);
+  transition: var(--standard-transition);
 
   &:hover {
     border-color: var(--input-border-hover);
@@ -82,7 +82,7 @@
   &:focus {
     outline: none;
     border-color: var(--focus-input-border);
-    box-shadow: 0 0 0 5px var(--focus-input-glow);
+    box-shadow: var(--form-input-glow--focus);
   }
 }
 
@@ -95,13 +95,13 @@
     display: block;
     background: var(--input-color);
     border: 2px solid var(--input-border);
-    border-radius: 6px;
+    border-radius: var(--form-input-border-radius);
     width: 100%;
     margin: 0;
     padding: 0 4px 0 29px;
     line-height: 30px;
-    box-shadow: 0 0 0 10px transparent;
-    transition: 0.2s ease;
+    box-shadow: var(--form-input-glow);
+    transition: var(--standard-transition);
 
     // Safari adds unwanted padding - let's remove it
     &::-webkit-search-decoration {
@@ -121,7 +121,7 @@
     &:focus {
       outline: none;
       border-color: var(--focus-input-border);
-      box-shadow: 0 0 0 5px var(--focus-input-glow);
+      box-shadow: var(--form-input-glow--focus);
     }
   }
 
@@ -132,7 +132,7 @@
     width: 16px;
     height: 16px;
     fill: var(--input-border-hover);
-    transition: 0.2s ease;
+    transition: var(--standard-transition);
   }
 
   &::before {
@@ -146,7 +146,7 @@
     border: 2px solid currentColor;
     border-radius: 100%;
     opacity: 0;
-    transition: 0.2s ease;
+    transition: var(--standard-transition);
   }
 
   &::after {
@@ -162,7 +162,7 @@
     animation: loading-spinner 0.5s infinite linear;
     clip-path: inset(0 0 8px 8px);
     opacity: 0;
-    transition: 0.2s ease;
+    transition: var(--standard-transition);
   }
 
   &--loading {
@@ -283,9 +283,9 @@
       border: 2px solid var(--input-border);
       border-radius: 50%;
       background: transparent;
-      box-shadow: 0 0 0 10px transparent;
+      box-shadow: var(--form-input-glow);
 
-      transition: 0.2s ease;
+      transition: var(--standard-transition);
     }
 
     &:hover::before {
@@ -297,7 +297,7 @@
   &__input:focus + &__label:before, &__input:active + &__label:before {
     border-width: 8px;
     border-color: var(--focus-input-border);
-    box-shadow: 0 0 0 5px var(--focus-input-glow);
+    box-shadow: var(--form-input-glow--focus);
   }
 
   &__input:checked + &__label:before {
@@ -316,7 +316,7 @@
     margin-top: 0;
     opacity: 0;
     padding-left: 32px;
-    transition: 0.2s ease;
+    transition: var(--standard-transition);
     visibility: hidden;
     max-height: 0;
 
@@ -329,7 +329,7 @@
       width: 2px;
       background: var(--input-border);
       border-radius: 2px;
-      transition: 0.2s ease;
+      transition: var(--standard-transition);
     }
 
     &:focus-within {
@@ -538,11 +538,11 @@
   border-radius: 10px;
   cursor: pointer;
   text-shadow: 0 1px 0 var(--background-color);
-  box-shadow: 0 0 0 10px transparent;
+  box-shadow: var(--form-input-glow);
   text-decoration: none;
   outline: none;
   font-weight: 500;
-  transition: 0.2s ease;
+  transition: var(--standard-transition);
   border: 2px solid var(--btn-secondary-border);
 
   &::after {
@@ -566,7 +566,7 @@
   &:active {
     background: var(--btn-secondary-bg--focus);
     color: var(--btn-secondary-color--focus);
-    box-shadow: 0 0 0 5px var(--focus-input-glow);
+    box-shadow: var(--form-input-glow--focus);
   }
 
   &--large {
@@ -601,7 +601,7 @@
   }
 }
 
-.help-button {
+.jenkins-help-button {
   position: relative;
   width: 18px;
   height: 18px;
@@ -623,7 +623,7 @@
     background: var(--text-color);
     opacity: 0.1;
     border-radius: inherit;
-    transition: 0.2s ease;
+    transition: var(--standard-transition);
   }
 
   &::after {
@@ -633,10 +633,10 @@
     left: 0;
     bottom: 0;
     right: 0;
-    box-shadow: 0 0 0 10px transparent;
+    box-shadow: var(--form-input-glow);
     border-radius: inherit;
     opacity: 0.1;
-    transition: 0.2s ease;
+    transition: var(--standard-transition);
   }
 
   &:hover {

war/src/main/webapp/scripts/hudson-behavior.js

@@ -1034,7 +1034,7 @@ function rowvgStartEachRow(recursive,f) {
     });
 
 
-    Behaviour.specify("A.help-button", "a-help-button", ++p, function(e) {
+    Behaviour.specify("A.jenkins-help-button", "a-jenkins-help-button", ++p, function(e) {
         e.onclick = helpButtonOnClick;
         e.tabIndex = 9999; // make help link unnavigable from keyboard
         e.parentNode.parentNode.addClassName('has-help');