[JENKINS-71578] allow making sidepanel sticky (#8269)

core/src/main/resources/hudson/PluginManager/sidepanel.jelly

@@ -27,7 +27,7 @@ THE SOFTWARE.
 -->
 <?jelly escape-by-default='true'?>
 <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" xmlns:i="jelly:fmt">
-  <l:side-panel>
+  <l:side-panel sticky="true">
     <l:app-bar title="${%Plugins}" />
     <l:tasks>
       <l:task href="${rootURL}/manage/pluginManager/" icon="symbol-download" title="${%Updates}" badge="${app.updateCenter.badge}"/>

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

@@ -36,7 +36,7 @@ THE SOFTWARE.
 
     <l:breadcrumb title="${%Configuration}" />
 
-    <l:side-panel>
+    <l:side-panel sticky="true">
       <l:app-bar title="${%Configure}" />
       <div id="tasks" />
     </l:side-panel>

core/src/main/resources/lib/layout/layout.jelly

@@ -192,16 +192,8 @@ THE SOFTWARE.
 
     <div id="page-body" class="app-page-body app-page-body--${layoutType} clear">
       <j:if test="${layoutType=='two-column'}">
-        <div id="side-panel" class="app-page-body__sidebar">
-          <j:set var="mode" value="side-panel" />
-          <d:invokeBody />
-
-          <!-- add YUI logger if debugging YUI -->
-          <j:if test="${h.yuiSuffix=='debug'}">
-          <!-- script to transform this into the Logger Console is done in hudson-behavior.js -->
-          <div id="yui-logreader" style="margin-top:1em"/>
-          </j:if>
-        </div>
+        <j:set var="mode" value="side-panel" />
+        <d:invokeBody />
       </j:if>
       <div id="main-panel">
         <j:set var="mode" value="main-panel" />

core/src/main/resources/lib/layout/side-panel.jelly

@@ -26,10 +26,22 @@ THE SOFTWARE.
 <j:jelly xmlns:j="jelly:core" xmlns:st="jelly:stapler" xmlns:d="jelly:define">
   <st:documentation>
     Generates a left side content as part of a Jenkins page. Typically known as two-column or left-side +  main-content layouts
+    <st:attribute name="sticky">
+      Make the side panel sticky. Should not be used on pages that include widgets in the sidepanel and when plugins can
+      add their own tasks, so the number of tasks is not fixed.
+    </st:attribute>
+
   </st:documentation>
 
   <j:if test="${mode=='side-panel'}">
-    <d:invokeBody />
+    <div id="side-panel" class="app-page-body__sidebar ${attrs.sticky == 'true' ? 'app-page-body__sidebar--sticky' : ''}">
+        <d:invokeBody />
+      <!-- add YUI logger if debugging YUI -->
+      <j:if test="${h.yuiSuffix=='debug'}">
+        <!-- script to transform this into the Logger Console is done in hudson-behavior.js -->
+        <div id="yui-logreader" style="margin-top:1em"/>
+      </j:if>
+    </div>
   </j:if>
 
-</j:jelly>
+</j:jelly>

war/src/main/js/section-to-sidebar-items.js

@@ -5,13 +5,9 @@ const HEADER_SELECTOR =
 const DEFAULT_ICON = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M262.29 192.31a64 64 0 1057.4 57.4 64.13 64.13 0 00-57.4-57.4zM416.39 256a154.34 154.34 0 01-1.53 20.79l45.21 35.46a10.81 10.81 0 012.45 13.75l-42.77 74a10.81 10.81 0 01-13.14 4.59l-44.9-18.08a16.11 16.11 0 00-15.17 1.75A164.48 164.48 0 01325 400.8a15.94 15.94 0 00-8.82 12.14l-6.73 47.89a11.08 11.08 0 01-10.68 9.17h-85.54a11.11 11.11 0 01-10.69-8.87l-6.72-47.82a16.07 16.07 0 00-9-12.22 155.3 155.3 0 01-21.46-12.57 16 16 0 00-15.11-1.71l-44.89 18.07a10.81 10.81 0 01-13.14-4.58l-42.77-74a10.8 10.8 0 012.45-13.75l38.21-30a16.05 16.05 0 006-14.08c-.36-4.17-.58-8.33-.58-12.5s.21-8.27.58-12.35a16 16 0 00-6.07-13.94l-38.19-30A10.81 10.81 0 0149.48 186l42.77-74a10.81 10.81 0 0113.14-4.59l44.9 18.08a16.11 16.11 0 0015.17-1.75A164.48 164.48 0 01187 111.2a15.94 15.94 0 008.82-12.14l6.73-47.89A11.08 11.08 0 01213.23 42h85.54a11.11 11.11 0 0110.69 8.87l6.72 47.82a16.07 16.07 0 009 12.22 155.3 155.3 0 0121.46 12.57 16 16 0 0015.11 1.71l44.89-18.07a10.81 10.81 0 0113.14 4.58l42.77 74a10.8 10.8 0 01-2.45 13.75l-38.21 30a16.05 16.05 0 00-6.05 14.08c.33 4.14.55 8.3.55 12.47z" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32"/></svg>`;
 
 window.addEventListener("load", function () {
-  const sidebar = document.querySelector("#side-panel");
   const sidebarItems = document.querySelector("#tasks");
   const sectionHeaders = document.querySelectorAll(HEADER_SELECTOR);
 
-  // Ensure sidebar is sticky
-  sidebar.classList.add("app-page-body__sidebar--sticky");
-
   // Create the sidebar items
   sectionHeaders.forEach(function (header, i) {
     const headerId = toId(header.textContent);