jenkinsci · timja · Oct 13, 2022 · Jul 22, 2022 · Jul 22, 2022 · Jul 26, 2022
diff --git a/core/src/main/resources/hudson/PluginManager/advanced.jelly b/core/src/main/resources/hudson/PluginManager/advanced.jelly
@@ -31,11 +31,11 @@ THE SOFTWARE.
     <l:layout title="${%Advanced settings} - ${%Plugin Manager}" permission="${app.SYSTEM_READ}">
         <j:set var="readOnlyMode" value="${!app.hasPermission(app.ADMINISTER)}"/>
 
-        <l:app-bar title="${%Advanced settings}"/>
-
-      <st:include page="sidepanel.jelly"/>
+        <st:include page="sidepanel.jelly"/>
 
         <l:main-panel>
+          <l:app-bar title="${%Advanced settings}"/>
+
           <div class="jenkins-form">
             <section class="jenkins-section jenkins-!-margin-bottom-5">
                 <h2 class="jenkins-section__title">${%HTTP Proxy Configuration}</h2>

diff --git a/core/src/main/resources/hudson/PluginManager/available.jelly b/core/src/main/resources/hudson/PluginManager/available.jelly
@@ -28,12 +28,11 @@ THE SOFTWARE.
 <?jelly escape-by-default='true'?>
 <j:jelly xmlns:j="jelly:core" xmlns:st="jelly:stapler" xmlns:l="/lib/layout" xmlns:f="/lib/form">
   <l:layout title="${%Available plugins} - ${%Plugin Manager}" permission="${app.SYSTEM_READ}">
-
-    <l:app-bar title="${%Plugins}" />
-
     <st:include page="sidepanel.jelly"/>
 
     <l:main-panel>
+      <l:app-bar title="${%Plugins}" />
+
       <div class="jenkins-app-bar jenkins-app-bar--sticky">
         <div class="jenkins-app-bar__content">
           <div class="app-plugin-manager__search">

diff --git a/core/src/main/resources/hudson/PluginManager/installed.jelly b/core/src/main/resources/hudson/PluginManager/installed.jelly
@@ -30,11 +30,11 @@ THE SOFTWARE.
   <l:layout title="${%Installed plugins} - ${%Plugin Manager}" permission="${app.SYSTEM_READ}">
     <j:set var="readOnlyMode" value="${!app.hasPermission(app.ADMINISTER)}"/>
 
-    <l:app-bar title="${%Plugins}" />
-
     <st:include page="sidepanel.jelly"/>
 
     <l:main-panel>
+      <l:app-bar title="${%Plugins}" />
+
       <div class="jenkins-app-bar jenkins-app-bar--sticky">
         <div class="jenkins-app-bar__content">
           <div class="app-plugin-manager__search">

diff --git a/core/src/main/resources/hudson/PluginManager/table.jelly b/core/src/main/resources/hudson/PluginManager/table.jelly
@@ -37,12 +37,11 @@ THE SOFTWARE.
     </st:attribute>
   </st:documentation>
   <l:layout title="${%Updates} - ${%Plugin Manager}" permission="${app.SYSTEM_READ}">
-
-    <l:app-bar title="${%Plugins}" />
-
     <st:include page="sidepanel.jelly"/>
 
     <l:main-panel>
+      <l:app-bar title="${%Plugins}" />
+
       <div class="jenkins-app-bar jenkins-app-bar--sticky">
         <div class="jenkins-app-bar__content">
           <div class="app-plugin-manager__search">

diff --git a/core/src/main/resources/hudson/cli/CLIAction/index.jelly b/core/src/main/resources/hudson/cli/CLIAction/index.jelly
@@ -27,13 +27,7 @@ THE SOFTWARE.
   <l:layout permission="${app.READ}">
     <st:include page="sidepanel.jelly" it="${app}"/>
     <l:main-panel>
-      <div class="jenkins-app-bar">
-        <div class="jenkins-app-bar__content">
-          <h1>
-            ${%Jenkins CLI}
-          </h1>
-        </div>
-      </div>
+      <l:app-bar title="${%Jenkins CLI}" />
       <p class="jenkins-description">
         ${%blurb(rootURL)}
       </p>

diff --git a/core/src/main/resources/hudson/logging/LogRecorder/configure.jelly b/core/src/main/resources/hudson/logging/LogRecorder/configure.jelly
@@ -28,13 +28,13 @@ 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">
 <l:layout permission="${app.ADMINISTER}" title="${%Configure log recorder}">
-  <l:app-bar title="${%Configure log recorder}">
-    <t:help href="https://www.jenkins.io/redirect/log-recorders" tooltip="${%Additional information on log levels}" />
-  </l:app-bar>
-
   <st:include page="sidepanel.jelly" />
 
   <l:main-panel>
+    <l:app-bar title="${%Configure log recorder}">
+      <t:help href="https://www.jenkins.io/redirect/log-recorders" tooltip="${%Additional information on log levels}" />
+    </l:app-bar>
+
     <f:form method="post" name="config" action="configSubmit">
       <div class="alert alert-info jenkins-form-item">
         ${%fine_warning}

diff --git a/core/src/main/resources/hudson/logging/LogRecorder/delete.jelly b/core/src/main/resources/hudson/logging/LogRecorder/delete.jelly
@@ -29,8 +29,8 @@ 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" xmlns:i="jelly:fmt">
   <l:layout permission="${app.ADMINISTER}" title="${%Delete log recorder}">
     <st:include page="sidepanel.jelly" />
-    <l:app-bar title="${%Delete log recorder}" />
     <l:main-panel>
+      <l:app-bar title="${%Delete log recorder}" />
       <form method="post" action="doDelete">
         <p>${%delete.logrecorder(it.displayName)}</p>
         <div>

diff --git a/core/src/main/resources/hudson/logging/LogRecorderManager/index.jelly b/core/src/main/resources/hudson/logging/LogRecorderManager/index.jelly
@@ -28,17 +28,18 @@ 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">
 <l:layout title="${%Log}">
-  <l:app-bar title="${%Log Recorders}">
-    <l:isAdmin>
-      <a href="new" class="jenkins-button jenkins-button--primary">
-        <l:icon src="symbol-add" />
-        ${%Add new log recorder}
-      </a>
-    </l:isAdmin>
-    <t:help tooltip="${%Additional information on log recorders}" href="https://www.jenkins.io/redirect/log-recorders" />
-  </l:app-bar>
   <st:include page="sidepanel.jelly" />
   <l:main-panel xmlns:local="local">
+    <l:app-bar title="${%Log Recorders}">
+      <l:isAdmin>
+        <a href="new" class="jenkins-button jenkins-button--primary">
+          <l:icon src="symbol-add" />
+          ${%Add new log recorder}
+        </a>
+      </l:isAdmin>
+      <t:help tooltip="${%Additional information on log recorders}" href="https://www.jenkins.io/redirect/log-recorders" />
+    </l:app-bar>
+
     <d:taglib uri="local">
       <d:tag name="row">
         <tr>

diff --git a/core/src/main/resources/hudson/logging/LogRecorderManager/levels.jelly b/core/src/main/resources/hudson/logging/LogRecorderManager/levels.jelly
@@ -28,13 +28,13 @@ THE SOFTWARE.
 <?jelly escape-by-default='true'?>
 <j:jelly xmlns:j="jelly:core" xmlns:st="jelly:stapler" xmlns:l="/lib/layout" xmlns:t="/lib/hudson" xmlns:f="/lib/form">
   <l:layout title="${%Logger Configuration}">
-    <l:app-bar title="${%Logger Configuration}">
-      <t:help tooltip="${%Additional information on log levels}" href="${%url}"/>
-    </l:app-bar>
-
     <st:include page="sidepanel.jelly"/>
 
     <l:main-panel>
+      <l:app-bar title="${%Logger Configuration}">
+        <t:help tooltip="${%Additional information on log levels}" href="${%url}"/>
+      </l:app-bar>
+
       <table class="sortable jenkins-table" id="logLevels">
         <thead>
           <tr>

diff --git a/core/src/main/resources/hudson/logging/LogRecorderManager/new.jelly b/core/src/main/resources/hudson/logging/LogRecorderManager/new.jelly
@@ -30,8 +30,8 @@ THE SOFTWARE.
   <l:layout title="${%New log recorder}">
     <st:include page="sidepanel.jelly" />
 
-    <l:app-bar title="${%New log recorder}"/>
     <l:main-panel>
+      <l:app-bar title="${%New log recorder}"/>
       <f:form name="configSubmit" method="post" action="newLogRecorder">
         <f:entry title="${%Name}">
           <f:textbox name="name" checkDependsOn="name" checkUrl="checkNewName" />

diff --git a/core/src/main/resources/hudson/model/ComputerSet/index.jelly b/core/src/main/resources/hudson/model/ComputerSet/index.jelly
@@ -30,21 +30,16 @@ THE SOFTWARE.
 <l:layout title="${%Nodes}">
   <st:include page="sidepanel.jelly" />
   <l:main-panel>
-    <j:set var="monitors" value="${it._monitors}"/>
-    <j:set var="tableWidth" value="${3}"/>
-
-    <div class="jenkins-app-bar">
-      <div class="jenkins-app-bar__content">
-        <h1>${%Manage nodes and clouds}</h1>
-      </div>
+    <l:app-bar title="${%Manage nodes and clouds}">
       <l:hasAdministerOrManage>
-        <div class="jenkins-app-bar__controls">
-          <form method="post" action="updateNow">
-            <s:submit value="${%Refresh status}"/>
-          </form>
-        </div>
+        <form method="post" action="updateNow">
+          <s:submit value="${%Refresh status}"/>
+        </form>
       </l:hasAdministerOrManage>
-    </div>
+    </l:app-bar>
+
+    <j:set var="monitors" value="${it._monitors}"/>
+    <j:set var="tableWidth" value="${3}"/>
 
     <table id="computers" class="jenkins-table sortable">
       <thead>

diff --git a/core/src/main/resources/hudson/model/Job/configure.jelly b/core/src/main/resources/hudson/model/Job/configure.jelly
@@ -35,32 +35,17 @@ THE SOFTWARE.
     </l:header>
 
     <l:side-panel>
-      <div id="tasks">
-        <div class="jenkins-app-bar">
-          <div class="jenkins-app-bar__content">
-            <h1>${%Configuration}</h1>
-          </div>
-        </div>
-      </div>
+      <l:app-bar title="${%Configure}" />
+      <div id="tasks" />
     </l:side-panel>
 
     <l:main-panel>
       <div class="behavior-loading"><l:spinner text="${%LOADING}"/></div>
 
       <f:form method="post" class="jenkins-form" action="configSubmit" name="config" tableClass="config-table">
-        <div class="jenkins-app-bar">
-          <div class="jenkins-app-bar__content">
-            <h2>
-              <div class="jenkins-hidden">
-                <l:icon src="symbol-settings" />
-              </div>
-              <span>${%General}</span>
-            </h2>
-          </div>
-          <div class="jenkins-app-bar__controls">
-            <p:config-disableBuild />
-          </div>
-        </div>
+        <l:app-bar title="${%General}" headingLevel="h2">
+          <p:config-disableBuild />
+        </l:app-bar>
 
         <j:set var="descriptor" value="${it.descriptor}" />
         <j:set var="instance" value="${it}" />

diff --git a/core/src/main/resources/hudson/model/ManageJenkinsAction/index.jelly b/core/src/main/resources/hudson/model/ManageJenkinsAction/index.jelly
@@ -28,13 +28,13 @@ 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">
   <l:layout title="${%Manage Jenkins}" permissions="${app.MANAGE_AND_SYSTEM_READ}">
-    <l:app-bar title="${%Manage Jenkins}" />
-
     <j:if test="${taskTags==null}">
       <st:include page="sidepanel.jelly" it="${app}" />
     </j:if>
 
     <l:main-panel>
+      <l:app-bar title="${%Manage Jenkins}" />
+
       <section class="manage-messages">
         <j:forEach var="am" items="${app.activeAdministrativeMonitors}">
           <st:include page="message.jelly" it="${am}" />

diff --git a/core/src/main/resources/hudson/security/GlobalSecurityConfiguration/index.groovy b/core/src/main/resources/hudson/security/GlobalSecurityConfiguration/index.groovy
@@ -12,9 +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'), type:"one-column") {
-    l.app_bar(title: my.displayName)
-
     l.main_panel {
+        l.app_bar(title: my.displayName)
+
         set("readOnlyMode", !app.hasPermission(app.ADMINISTER))
 
         p()

diff --git a/core/src/main/resources/jenkins/model/GlobalCloudConfiguration/index.groovy b/core/src/main/resources/jenkins/model/GlobalCloudConfiguration/index.groovy
@@ -15,8 +15,8 @@ l.layout(norefresh:true, permission:app.SYSTEM_READ, title:my.displayName) {
             l.task(icon:"symbol-settings", href: "../computer/", title:_("Manage Nodes"))
         }
     }
-    l.app_bar(title: my.displayName)
     l.main_panel {
+        l.app_bar(title: my.displayName)
         def clouds = Cloud.all()
         if (!clouds.isEmpty()) {
             p()

diff --git a/core/src/main/resources/jenkins/model/Jenkins/configure.jelly b/core/src/main/resources/jenkins/model/Jenkins/configure.jelly
@@ -31,9 +31,9 @@ THE SOFTWARE.
   <st:include page="sidepanel.jelly" />
   <f:breadcrumb-config-outline title="${%Configure System}" />
 
-  <l:app-bar title="${%Configure System}" />
-
   <l:main-panel>
+    <l:app-bar title="${%Configure System}" />
+
     <div class="behavior-loading"><l:spinner text="${%LOADING}"/></div>
     <f:form method="post" name="config" action="configSubmit" class="jenkins-form">
       <j:set var="instance" value="${it}" />

diff --git a/core/src/main/resources/jenkins/model/Jenkins/projectRelationship.jelly b/core/src/main/resources/jenkins/model/Jenkins/projectRelationship.jelly
@@ -28,13 +28,13 @@ 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">
   <l:layout title="${%Project Relationship}">
-    <l:app-bar title="${%Project Relationship}">
-      <t:help href="projectRelationship-help" />
-    </l:app-bar>
-
     <st:include page="sidepanel.jelly" />
 
     <l:main-panel>
+      <l:app-bar title="${%Project Relationship}">
+        <t:help href="projectRelationship-help" />
+      </l:app-bar>
+
       <form action="projectRelationship" method="get">
         <table width="100%">
           <tr>

diff --git a/core/src/main/resources/jenkins/tools/GlobalToolConfiguration/index.groovy b/core/src/main/resources/jenkins/tools/GlobalToolConfiguration/index.groovy
@@ -8,9 +8,10 @@ def l=namespace(lib.LayoutTagLib)
 def st=namespace("jelly:stapler")
 
 l.layout(permission:app.SYSTEM_READ, title:my.displayName, type:"one-column") {
-    l.app_bar(title: my.displayName)
     set("readOnlyMode", !app.hasPermission(app.ADMINISTER))
     l.main_panel {
+        l.app_bar(title: my.displayName)
+
         div(class:"behavior-loading") {
             l.spinner(text: _("LOADING"))
         }

diff --git a/core/src/main/resources/lib/layout/app-bar.jelly b/core/src/main/resources/lib/layout/app-bar.jelly
@@ -23,18 +23,23 @@ THE SOFTWARE.
 -->
 
 <?jelly escape-by-default='true'?>
-<j:jelly xmlns:j="jelly:core" xmlns:st="jelly:stapler" xmlns:d="jelly:define">
+<j:jelly xmlns:j="jelly:core" xmlns:st="jelly:stapler" xmlns:d="jelly:define" xmlns:x="jelly:xml">
   <st:documentation>
     <st:attribute name="title" use="required">
       The title for the application bar
     </st:attribute>
+    <st:attribute name="headingLevel">
+      Defaults to h1
+    </st:attribute>
     Generates a row containing the page title and an optional set of controls
   </st:documentation>
 
-  <j:if test="${mode=='app-bar'}">
+  <j:if test="${mode=='main-panel' or mode=='side-panel'}">
     <div class="jenkins-app-bar">
       <div class="jenkins-app-bar__content">
-        <h1>${title}</h1>
+        <x:element name="${headingLevel ?: 'h1'}">
+          ${title}
+        </x:element>
       </div>
       <div class="jenkins-app-bar__controls">
         <d:invokeBody/>

diff --git a/core/src/main/resources/lib/layout/layout.jelly b/core/src/main/resources/lib/layout/layout.jelly
@@ -194,7 +194,7 @@ 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">
+        <div id="side-panel" class="app-page-body__sidebar">
           <j:set var="mode" value="side-panel" />
           <d:invokeBody />
 
@@ -206,8 +206,6 @@ THE SOFTWARE.
         </div>
       </j:if>
       <div id="main-panel">
-        <j:set var="mode" value="app-bar" />
-        <d:invokeBody/>
         <j:set var="mode" value="main-panel" />
         <d:invokeBody/>
       </div>

diff --git a/war/src/main/js/section-to-sidebar-items.js b/war/src/main/js/section-to-sidebar-items.js
@@ -1,17 +1,16 @@
 import { createElementFromHtml, toId } from "./util/dom";
-import page from "./util/page";
 
 const HEADER_SELECTOR =
   ".config-table .jenkins-app-bar h2, .config-table > .jenkins-section > .jenkins-section__title";
 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("#tasks");
+  const sidebar = document.querySelector("#side-panel");
+  const sidebarItems = document.querySelector("#tasks");
   const sectionHeaders = document.querySelectorAll(HEADER_SELECTOR);
 
   // Ensure sidebar is sticky
-  sidebar.style.position = "sticky";
-  sidebar.style.top = `calc(${page.breadcrumbBarHeight()}px + 1.6rem)`;
+  sidebar.classList.add("app-page-body__sidebar--sticky");
 
   // Create the sidebar items
   sectionHeaders.forEach(function (header, i) {
@@ -44,7 +43,7 @@ window.addEventListener("load", function () {
           : headerToScrollTo.getBoundingClientRect().top + window.scrollY - 70;
     });
 
-    sidebar.insertAdjacentElement("beforeend", item);
+    sidebarItems.insertAdjacentElement("beforeend", item);
   });
 
   // TODO - Remove when Matrix-Project plugin has been updated to only have one enable/disable project toggle