Move icon size to app bar

core/src/main/resources/hudson/model/Computer/builds.jelly

@@ -28,9 +28,10 @@ THE SOFTWARE.
     <st:include page="sidepanel.jelly" />
     <l:breadcrumb title="${%Build History}" />
     <l:main-panel>
-      <h1>
-        ${%title(it.displayName)}
-      </h1>
+      <l:app-bar title="${%title(it.displayName)}">
+        <t:iconSize><t:rssBar/></t:iconSize>
+      </l:app-bar>
+
       <p>
         <em>${%disclaimer}</em>
       </p>

core/src/main/resources/hudson/model/ComputerSet/index.jelly

@@ -26,7 +26,7 @@ THE SOFTWARE.
   Entrance to the configuration page
 -->
 <?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:s="/lib/form">
+<j:jelly xmlns:j="jelly:core" xmlns:st="jelly:stapler" xmlns:d="jelly:define" xmlns:l="/lib/layout" xmlns:t="/lib/hudson" xmlns:s="/lib/form" xmlns:dd="/lib/layout/dropdowns">
 <l:layout title="${%Nodes}">
   <st:include page="sidepanel.jelly" />
   <!-- no need for additional breadcrumb here as we're on an index page already including breadcrumb -->
@@ -52,6 +52,9 @@ THE SOFTWARE.
           </button>
         </form>
       </l:hasAdministerOrManage>
+      <t:iconSize>
+        <dd:item icon="symbol-information-circle" id="button-computer-icon-legend" text="${%Legend}" />
+      </t:iconSize>
     </l:app-bar>
 
     <j:set var="monitors" value="${it._monitors}"/>
@@ -123,13 +126,6 @@ THE SOFTWARE.
       </tr>
       </tbody>
     </table>
-    <t:iconSize>
-      <div class="jenkins-buttons-row jenkins-buttons-row--invert">
-        <button class="jenkins-button jenkins-button--tertiary" id="button-computer-icon-legend">
-          ${%Legend}
-        </button>
-      </div>
-    </t:iconSize>
     <template id="template-computer-icon-legend" data-title="${%Computer icon legend}">
       <st:include page="_legend.jelly"/>
     </template>

core/src/main/resources/hudson/model/View/builds.jelly

@@ -29,13 +29,9 @@ THE SOFTWARE.
     <st:include page="sidepanel.jelly" />
     <l:breadcrumb title="${%Build History}" />
     <l:main-panel>
-      <div class="jenkins-app-bar">
-        <div class="jenkins-app-bar__content">
-          <h1>
-            ${%buildHistory(it.class.name=='hudson.model.AllView' ? app.displayName : it.displayName)}
-          </h1>
-        </div>
-      </div>
+      <l:app-bar title="${%buildHistory(it.class.name=='hudson.model.AllView' ? app.displayName : it.displayName)}">
+        <t:iconSize><t:rssBar/></t:iconSize>
+      </l:app-bar>
 
       <t:buildListTable builds="${it.builds}"/>
     </l:main-panel>

core/src/main/resources/hudson/model/View/index.jelly

@@ -30,12 +30,17 @@ THE SOFTWARE.
         <!-- no need for additional breadcrumb here as we're on an index page already including breadcrumb -->
         <l:main-panel>
           <st:include page="view-index-top.jelly" it="${it.owner}" optional="true">
+            <l:app-bar title="${%Dashboard}">
+              <t:editDescriptionButton permission="${it.CONFIGURE}" />
+              <t:iconSize><t:rssBar/></t:iconSize>
+            </l:app-bar>
+
             <!-- allow the owner to take over the top section, but we also need the default to be backward compatible -->
             <div id="view-message">
                 <div id="systemmessage">
                   <j:out value="${app.systemMessage!=null ? app.markupFormatter.translate(app.systemMessage) : ''}" />
                 </div>
-              <t:editableDescription permission="${it.CONFIGURE}"/>
+              <t:editableDescription permission="${it.CONFIGURE}" hideButton="true" />
             </div>
           </st:include>
 

core/src/main/resources/lib/hudson/buildListTable.jelly

@@ -46,7 +46,7 @@ THE SOFTWARE.
     <l:icon src="symbol-terminal" id="console" />
   </template>
 
-  <t:setIconSize/>
+  <t:setIconSize />
   <st:adjunct includes="hudson.model.Job.buildTimeTrend_resources" />
   <j:new var="handler" className="jenkins.widgets.BuildListTable"/>
   ${handler.setBuilds(attrs.builds)}
@@ -66,5 +66,4 @@ THE SOFTWARE.
     </thead>
     <tbody></tbody>
   </table>
-  <t:rssBar-with-iconSize/>
 </j:jelly>

core/src/main/resources/lib/hudson/iconSize.jelly

@@ -24,36 +24,15 @@ THE SOFTWARE.
 
 <?jelly escape-by-default='true'?>
 <j:jelly xmlns:j="jelly:core" xmlns:x="jelly:xml" xmlns:st="jelly:stapler" xmlns:d="jelly:define" 
-         xmlns:l="/lib/layout" xmlns:t="/lib/hudson" xmlns:f="/lib/form">
-  <div class="jenkins-icon-size">
-    <d:taglib uri="local">
-      <d:tag name="iconSizeLink">
-        <j:choose>
-          <j:when test="${sz==iconSize}">
-            <li class="jenkins-icon-size__items-item" tooltip="${title}">
-              ${title.charAt(0)}<span class="jenkins-visually-hidden">${title.substring(1)}</span>
-            </li>
-          </j:when>
-          <j:otherwise>
-            <li>
-              <a class="jenkins-button jenkins-button--tertiary" href="${rootURL}/iconSize?${sz}" tooltip="${title}">
-                ${title.charAt(0)}<span class="jenkins-visually-hidden">${title.substring(1)}</span>
-              </a>
-            </li>
-          </j:otherwise>
-        </j:choose>
-      </d:tag>
-    </d:taglib>
-
-    <div class="jenkins-icon-size__items jenkins-buttons-row" xmlns:local="local">
-      <span>${%Icon}:</span>
-      <ol>
-        <local:iconSizeLink title="${%S}" sz="16x16" />
-        <local:iconSizeLink title="${%M}" sz="24x24" />
-        <local:iconSizeLink title="${%L}" sz="32x32" />
-      </ol>
-    </div>
-
+         xmlns:l="/lib/layout" xmlns:t="/lib/hudson" xmlns:f="/lib/form" xmlns:dd="/lib/layout/dropdowns">
+  <t:setIconSize />
+  <l:overflowButton>
+    <dd:submenu icon="symbol-check-circle" text="${%Icon size}">
+      <dd:item icon="${iconSize == '32x32' ? 'symbol-check' : null}" text="${%Large}" href="${rootURL}/iconSize?32x32" />
+      <dd:item icon="${iconSize == '24x24' ? 'symbol-check' : null}" text="${%Medium}" href="${rootURL}/iconSize?24x24" />
+      <dd:item icon="${iconSize == '16x16' ? 'symbol-check' : null}" text="${%Small}" href="${rootURL}/iconSize?16x16" />
+    </dd:submenu>
     <d:invokeBody />
-  </div>
+  </l:overflowButton>
+  <script src="${resURL}/jsbundles/pages/dashboard.js" type="text/javascript" defer="true" />
 </j:jelly>

core/src/main/resources/lib/hudson/projectView.jelly

@@ -86,7 +86,6 @@ THE SOFTWARE.
             </j:forEach>
           </table>
         </div>
-        <t:iconSize><t:rssBar/></t:iconSize>
       </div>
 
       <div class="jenkins-jobs-list jenkins-mobile-show">

core/src/main/resources/lib/hudson/rssBar.jelly

@@ -24,21 +24,16 @@ THE SOFTWARE.
 
 <?jelly escape-by-default='true'?>
 <j:jelly xmlns:j="jelly:core" xmlns:dd="/lib/layout/dropdowns" xmlns:st="jelly:stapler" xmlns:l="/lib/layout">
-  <div id="rss-bar" class="jenkins-buttons-row jenkins-buttons-row--invert">
-    <l:overflowButton clazz="jenkins-button--tertiary">
-      <dd:item icon="symbol-information-circle" id="button-icon-legend" text="${%Legend}" />
-      <dd:separator />
-      <dd:submenu icon="symbol-rss" text="${%Atom feed}">
-        <dd:item icon="symbol-rss" text="${%All}" href="rssAll" />
-        <dd:item icon="symbol-rss" text="${%Failures}" href="rssFailed" />
-        <dd:item icon="symbol-rss" text="${%LatestBuilds}" href="rssLatest" />
-      </dd:submenu>
-    </l:overflowButton>
-  </div>
-
-  <template id="template-icon-legend" data-title="${%Icon legend}">
-    <st:include page="_legend.jelly" it="${app}" />
-  </template>
-
-  <script src="${resURL}/jsbundles/pages/dashboard.js" type="text/javascript" defer="true" />
+  <dd:item icon="symbol-information-circle" id="button-icon-legend" text="${%Legend}" />
+  <dd:separator />
+  <dd:submenu icon="symbol-rss" text="${%Atom feed}">
+    <dd:item icon="symbol-rss" text="${%All}" href="rssAll" />
+    <dd:item icon="symbol-rss" text="${%Failures}" href="rssFailed" />
+    <dd:item icon="symbol-rss" text="${%LatestBuilds}" href="rssLatest" />
+  </dd:submenu>
+  <dd:custom>
+    <template id="template-icon-legend" data-title="${%Icon legend}">
+      <st:include page="_legend.jelly" it="${app}" />
+    </template>
+  </dd:custom>
 </j:jelly>

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

@@ -48,7 +48,7 @@ THE SOFTWARE.
 
     <template data-dropdown-type="ITEM"
               data-dropdown-id="${attrs.id}"
-              data-dropdown-icon="${icon}"
+              data-dropdown-icon="${attrs.icon != null ? icon : null}"
               data-dropdown-text="${attrs.text}"
               data-dropdown-href="${attrs.href}"
               data-dropdown-clazz="${attrs.clazz}"

src/main/js/components/dropdowns/templates.js

@@ -53,7 +53,9 @@ function menuItem(options) {
               ? `<div class="jenkins-dropdown__item__icon">${
                   itemOptions.iconXml
                     ? itemOptions.iconXml
-                    : `<img alt="${label}" src="${itemOptions.icon}" />`
+                    : itemOptions.icon
+                      ? `<img alt="${label}" src="${itemOptions.icon}" />`
+                      : ``
                 }</div>`
               : ``
           }

src/main/js/pages/computer-set/index.js

@@ -1,16 +1,22 @@
 import { createElementFromHtml } from "@/util/dom";
+import behaviorShim from "@/util/behavior-shim";
 
-document
-  .querySelector("#button-computer-icon-legend")
-  .addEventListener("click", () => {
-    const template = document.querySelector("#template-computer-icon-legend");
-    const title = template.getAttribute("data-title");
-    const content = createElementFromHtml(
-      "<div>" + template.innerHTML + "</div>",
-    );
+behaviorShim.specify(
+  "#button-computer-icon-legend",
+  "icon-legend",
+  999,
+  (button) => {
+    button.addEventListener("click", () => {
+      const template = document.querySelector("#template-computer-icon-legend");
+      const title = template.getAttribute("data-title");
+      const content = createElementFromHtml(
+        "<div>" + template.innerHTML + "</div>",
+      );
 
-    dialog.modal(content, {
-      maxWidth: "550px",
-      title: title,
+      dialog.modal(content, {
+        maxWidth: "550px",
+        title: title,
+      });
     });
-  });
+  },
+);

src/main/scss/abstracts/_mixins.scss

@@ -94,7 +94,8 @@
 
   &:not(:disabled) {
     &:hover,
-    &:focus-visible {
+    &:focus-visible,
+    &[aria-expanded="true"] {
       &::before {
         background-color: var(--item-background--hover);
       }

src/main/scss/pages/_dashboard.scss

@@ -1,71 +1,5 @@
 @use "../abstracts/mixins";
 
-$min-button-size: 2.375rem;
-
-.jenkins-icon-size {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  margin: var(--section-padding) 0;
-
-  &__items {
-    display: flex;
-    align-items: center;
-    gap: 0.5rem;
-
-    ol {
-      position: relative;
-      display: flex;
-      align-items: center;
-      margin: 0;
-      padding: 0;
-      list-style-type: none;
-      gap: 0.25rem;
-
-      &::before {
-        content: "";
-        position: absolute;
-        inset: 0;
-        border-radius: 0.8rem;
-        background: var(--button-background);
-        opacity: 0;
-        transition: var(--standard-transition);
-      }
-
-      &:hover {
-        &::before {
-          inset: -0.2rem;
-          opacity: 1;
-        }
-      }
-    }
-
-    li {
-      .jenkins-button {
-        margin: 0 !important;
-        padding: 0 !important;
-        min-width: 0 !important;
-        aspect-ratio: 1;
-        height: $min-button-size;
-      }
-    }
-
-    .jenkins-icon-size__items-item {
-      position: relative;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      aspect-ratio: 1;
-      height: $min-button-size;
-      border-radius: var(--form-input-border-radius);
-      font-weight: var(--btn-link-font-weight);
-      font-size: var(--btn-font-size);
-      background: var(--button-background--hover);
-      cursor: default;
-    }
-  }
-}
-
 .jenkins-jobs-list {
   display: flex;
   flex-direction: column;