Replace usages of YUI framework by simple JS/CSS (#9395)

jenkinsci · Jun 18, 2024 · d041c43 · d041c43
1 parent 500169b
commit d041c43
Show file tree

Hide file tree

Showing 12 changed files with 62 additions and 87 deletions.
diff --git a/core/src/main/java/hudson/console/ExpandableDetailsNote.java b/core/src/main/java/hudson/console/ExpandableDetailsNote.java
@@ -26,8 +26,8 @@
 
 import edu.umd.cs.findbugs.annotations.NonNull;
 import hudson.Extension;
-import hudson.Functions;
 import hudson.MarkupText;
+import hudson.Util;
 import java.io.IOException;
 import java.util.logging.Level;
 import java.util.logging.Logger;
@@ -53,7 +53,8 @@ public ExpandableDetailsNote(String caption, String html) {
     @Override
     public ConsoleAnnotator annotate(Object context, MarkupText text, int charPos) {
         text.addMarkup(charPos,
-                "<input type=button value='" + Functions.htmlAttributeEscape(caption) + "' class='reveal-expandable-detail'><div class='expandable-detail'>" + html + "</div>");
+                "<button type='button' class='jenkins-button reveal-expandable-detail'>"
+                        + Util.xmlEscape(caption) + "</button><div class='expandable-detail'>" + html + "</div>");
         return null;
     }
 

diff --git a/core/src/main/resources/hudson/console/ExpandableDetailsNote/script.js b/core/src/main/resources/hudson/console/ExpandableDetailsNote/script.js
@@ -1,11 +1,11 @@
 (function () {
   Behaviour.specify(
-    "INPUT.reveal-expandable-detail",
+    "BUTTON.reveal-expandable-detail",
     "ExpandableDetailsNote",
     0,
     function (e) {
-      var detail = e.nextSibling;
-      makeButton(e, function () {
+      e.addEventListener("click", () => {
+        const detail = e.nextSibling;
         detail.style.display =
           detail.style.display == "block" ? "none" : "block";
       });

diff --git a/core/src/main/resources/hudson/console/ExpandableDetailsNote/style.css b/core/src/main/resources/hudson/console/ExpandableDetailsNote/style.css
@@ -1,6 +1,6 @@
 DIV.expandable-detail {
   display: none;
-  background-color: #d3d7cf;
+  background-color: var(--background);
   margin: 0.5em;
   padding: 0.5em;
 }
diff --git a/core/src/main/resources/hudson/model/View/index.jelly b/core/src/main/resources/hudson/model/View/index.jelly
@@ -44,7 +44,6 @@ THE SOFTWARE.
         </l:main-panel>
         <l:header>
           <!-- for screen resolution detection -->
-          <l:yui module="cookie" />
           <script id="screenResolution-script" data-use-secure-cookie="${request.secure}"/>
           <st:adjunct includes="hudson.model.View.screen-resolution"/>
         </l:header>

diff --git a/core/src/main/resources/hudson/triggers/SlowTriggerAdminMonitor/message.groovy b/core/src/main/resources/hudson/triggers/SlowTriggerAdminMonitor/message.groovy
@@ -10,7 +10,9 @@ SlowTriggerAdminMonitor tam = my
 dl {
     div(class: "jenkins-alert jenkins-alert-warning") {
         form(method: "post", name: "clear", action: rootURL + "/" + tam.url + "/clear") {
-            input(name: "clear", type: "submit", value: _("Dismiss"), class: "submit-button primary")
+            button(name: "clear", type: "submit", class: "jenkins-button jenkins-submit-button jenkins-button--primary") {
+                raw _("Dismiss")
+            }
         }
 
         text(_("blurb"))

diff --git a/core/src/main/resources/jenkins/security/RekeySecretAdminMonitor/message.groovy b/core/src/main/resources/jenkins/security/RekeySecretAdminMonitor/message.groovy
@@ -50,7 +50,9 @@ if (my.isFixingActive()) {
 form(method: "post", action: "${rootURL}/${my.url}/scan", name:"rekey") {
     f.submit(name: "background", value:_("Re-key in background now"))
     if (my.isScanOnBoot()) {
-        input(type: "button", class: "yui-button", disabled: "true", value:_("Re-keying currently scheduled during the next startup"))
+        button(type: "button", class: "jenkins-button jenkins-button--primary", disabled: "true") {
+            raw _("Re-keying currently scheduled during the next startup")
+        }
     } else {
         f.submit(name: "schedule", value:_("Schedule a re-key during the next startup"))
     }

diff --git a/core/src/main/resources/lib/form/repeatable/repeatable.js b/core/src/main/resources/lib/form/repeatable/repeatable.js
@@ -43,8 +43,7 @@ var repeatableSupport = {
     // importNode isn't supported in IE.
     // nc = document.importNode(node,true);
     var nc = document.createElement("div");
-    nc.className = "repeated-chunk";
-    nc.style.opacity = 0;
+    nc.className = "repeated-chunk fade-in";
     nc.setAttribute("name", this.name);
     nc.innerHTML = this.blockHTML;
     if (!addOnTop) {
@@ -60,15 +59,7 @@ var repeatableSupport = {
       registerSortableDragDrop(nc);
     }
 
-    new YAHOO.util.Anim(
-      nc,
-      {
-        opacity: { to: 1 },
-      },
-      0.2,
-      YAHOO.util.Easing.easeIn,
-    ).animate();
-
+    nc.classList.remove("fade-in");
     Behaviour.applySubtree(nc, true);
     this.update();
   },
@@ -126,24 +117,27 @@ var repeatableSupport = {
   // called when 'delete' button is clicked
   onDelete: function (n) {
     n = n.closest(".repeated-chunk");
-    var a = new YAHOO.util.Anim(
-      n,
-      {
-        opacity: { to: 0 },
-        height: { to: 0 },
-      },
-      0.2,
-      YAHOO.util.Easing.easeIn,
-    );
-    a.onComplete.subscribe(function () {
+    n.ontransitionend = function (evt) {
+      if (evt.pseudoElement || !n.parentNode) {
+        return;
+      }
       var p = n.parentNode;
       p.removeChild(n);
       if (p.tag) {
         p.tag.update();
       }
+
       layoutUpdateCallback.call();
-    });
-    a.animate();
+    };
+    if (isRunAsTest) {
+      // transition end not triggered in tests
+      n.ontransitionend.call(n, {});
+    }
+    n.style.maxHeight = n.offsetHeight + "px";
+    n.classList.add("fade-out");
+    setTimeout(() => {
+      n.style.maxHeight = "0";
+    }, 0);
   },
 
   // called when 'add' button is clicked

diff --git a/test/src/test/java/jenkins/security/Security3245Test.java b/test/src/test/java/jenkins/security/Security3245Test.java
@@ -30,22 +30,19 @@ public class Security3245Test {
 
     @Issue("SECURITY-3245")
     @Test
-    public void captionCannotAttributeEscape() throws Exception {
+    public void captionCannotElementEscape() throws Exception {
         FreeStyleProject p = j.createFreeStyleProject("p");
-        p.getBuildersList().add(new ExpandableDetailsNoteTestAction("' onclick=alert(1) foo='bar", "<h1></h1>"));
+        p.getBuildersList().add(new ExpandableDetailsNoteTestAction("<script>alert(1)</script>", "<h1></h1>"));
         FreeStyleBuild build = j.buildAndAssertSuccess(p);
 
         AtomicBoolean alerts = new AtomicBoolean();
         try (JenkinsRule.WebClient wc = j.createWebClient()) {
             wc.setAlertHandler((pr, s) -> alerts.set(true));
             final HtmlPage page = wc.goTo(build.getUrl() + "console");
             String content = page.getWebResponse().getContentAsString();
-            assertThat(content, containsString("<input type=button value='&#39; onclick=alert(1) foo=&#39;bar' class='reveal-expandable-detail'>"));
-
-            // Execute JavaScript code to simulate click event
-            String jsCode = "document.querySelector('.reveal-expandable-detail').dispatchEvent(new MouseEvent('click'));";
-            page.executeJavaScript(jsCode);
-
+            assertThat(content, containsString("<button type='button' class='jenkins-button " +
+                    "reveal-expandable-detail'>&lt;script&gt;alert(1)&lt;/script&gt;</button>"));
+            // check that alert was not executed
             Assert.assertFalse("Alert not expected", alerts.get());
         }
     }

diff --git a/war/src/main/js/components/dropdowns/hetero-list.js b/war/src/main/js/components/dropdowns/hetero-list.js
@@ -77,11 +77,10 @@ function generateButtons() {
 
       function insert(instance, template) {
         let nc = document.createElement("div");
-        nc.className = "repeated-chunk";
+        nc.className = "repeated-chunk fade-in";
         nc.setAttribute("name", template.name);
         nc.setAttribute("descriptorId", template.descriptorId);
         nc.innerHTML = template.html;
-        nc.style.opacity = "0";
 
         instance.hide();
 
@@ -150,18 +149,9 @@ function generateButtons() {
             if (withDragDrop) {
               registerSortableDragDrop(nc);
             }
-
-            new YAHOO.util.Anim(
-              nc,
-              {
-                opacity: { to: 1 },
-              },
-              0.2,
-              YAHOO.util.Easing.easeIn,
-            ).animate();
-
             Behaviour.applySubtree(nc, true);
             ensureVisible(nc);
+            nc.classList.remove("fade-in");
             layoutUpdateCallback.call();
           },
           true,

diff --git a/war/src/main/scss/form/_reorderable-list.scss b/war/src/main/scss/form/_reorderable-list.scss
@@ -7,6 +7,14 @@
   border-radius: 10px;
   margin-bottom: 1rem;
   margin-top: 1rem;
+  transition:
+    opacity 0.2s ease-in,
+    max-height 0.2s ease-in;
+}
+
+.repeated-chunk.fade-in,
+.repeated-chunk.fade-out {
+  opacity: 0;
 }
 
 .repeated-chunk .show-if-last {

diff --git a/war/src/main/webapp/scripts/hudson-behavior.js b/war/src/main/webapp/scripts/hudson-behavior.js
@@ -1661,7 +1661,8 @@ function rowvgStartEachRow(recursive, f) {
         }
       }
       changeTo(e, "-hover.png");
-      YAHOO.util.Event.stopEvent(event);
+      event.stopPropagation();
+      event.preventDefault();
       return false;
     };
     e = null; // memory leak prevention

diff --git a/war/src/main/webapp/scripts/sortable.js b/war/src/main/webapp/scripts/sortable.js
@@ -133,16 +133,14 @@ var Sortable = (function () {
      */
     getStoredPreference: function () {
       var key = this.getStorageKey();
-      if (storage.hasKey(key)) {
-        var val = storage.getItem(key);
-        if (val) {
-          var vals = val.split(":");
-          if (vals.length == 2) {
-            return {
-              column: parseInt(vals[0]),
-              direction: arrowTable[vals[1]],
-            };
-          }
+      var val = sessionStorage.getItem(key);
+      if (val) {
+        var vals = val.split(":");
+        if (vals.length == 2) {
+          return {
+            column: parseInt(vals[0]),
+            direction: arrowTable[vals[1]],
+          };
         }
       }
       return null;
@@ -156,7 +154,13 @@ var Sortable = (function () {
 
     savePreference: function () {
       var key = this.getStorageKey();
-      storage.setItem(key, this.pref.column + ":" + this.pref.direction.id);
+      var value = this.pref.column + ":" + this.pref.direction.id;
+      try {
+        sessionStorage.setItem(key, value);
+      } catch (e) {
+        // storage could be full
+        console.warn(e);
+      }
     },
 
     /**
@@ -442,29 +446,6 @@ var Sortable = (function () {
     },
   };
 
-  var storage;
-  try {
-    storage = YAHOO.util.StorageManager.get(
-      YAHOO.util.StorageEngineHTML5.ENGINE_NAME,
-      YAHOO.util.StorageManager.LOCATION_SESSION,
-      {
-        order: [YAHOO.util.StorageEngineGears],
-      },
-    );
-    // eslint-disable-next-line no-unused-vars
-  } catch (e) {
-    // no storage available
-    storage = {
-      setItem: function () {},
-      getItem: function () {
-        return null;
-      },
-      hasKey: function () {
-        return false;
-      },
-    };
-  }
-
   return {
     Sortable: Sortable,
     sorter: sorter,