Refine experimental add/edit description button

core/src/main/resources/hudson/model/Run/new-build-page.jelly

@@ -33,7 +33,6 @@ THE SOFTWARE.
       <script src="${resURL}/jsbundles/pages/job.js" type="text/javascript" defer="true" />
 
       <j:set var="controls">
-        <t:editDescriptionButton permission="${it.UPDATE}"/>
         <l:hasPermission permission="${it.UPDATE}">
           <st:include page="logKeep.jelly" />
         </l:hasPermission>
@@ -41,7 +40,11 @@ THE SOFTWARE.
 
       <t:buildCaption controls="${controls}">${it.displayName}</t:buildCaption>
 
-      <l:details-bar it="${it}" />
+      <l:details-bar it="${it}">
+        <t:editDescriptionButton permission="${it.UPDATE}"
+                                 hideText="true"
+                                 clazz="jenkins-details__button" />
+      </l:details-bar>
 
       <div>
         <t:editableDescription permission="${it.UPDATE}" hideButton="true"/>

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

@@ -13,12 +13,17 @@
         <st:attribute name="submissionUrl">
             Optional submission URL. If not specified, will use 'submitDescription'.
         </st:attribute>
+        <st:attribute name="clazz">
+            Additional CSS classes.
+        </st:attribute>
+        <st:attribute name="hideText">
+            If enabled, the button label will be hidden and a tooltip visible.
+        </st:attribute>
     </st:documentation>
+
     <j:set var="actualDescription" value="${description}" defaultValue="${it.description}" />
-    <l:hasPermission permission="${permission}">
-        <st:adjunct includes="lib.hudson.editable-description"/>
-        <a class="jenkins-button jenkins-hidden" id="description-link" href="editDescription" data-description="${actualDescription}" data-url="${submissionUrl}">
-            <l:icon src="symbol-edit" />
+
+    <j:set var="label">
         <j:choose>
             <j:when test="${empty(actualDescription)}">
                 ${%add description}
@@ -27,6 +32,20 @@
                 ${%edit description}
             </j:otherwise>
         </j:choose>
+    </j:set>
+
+    <l:hasPermission permission="${permission}">
+        <st:adjunct includes="lib.hudson.editable-description" />
+        <a class="jenkins-button jenkins-hidden ${attrs.clazz}"
+             id="description-link"
+             href="editDescription"
+             data-description="${actualDescription}"
+             data-url="${submissionUrl}"
+             tooltip="${attrs.hideText ? label : null}">
+            <l:icon src="symbol-description" />
+            <j:if test="${!attrs.hideText}">
+                ${label}
+            </j:if>
         </a>
     </l:hasPermission>
 </j:jelly>

core/src/main/resources/lib/layout/details-bar.jelly

@@ -22,7 +22,7 @@ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 THE SOFTWARE.
 -->
 <?jelly escape-by-default='true'?>
-<j:jelly xmlns:j="jelly:core" xmlns:st="jelly:stapler" xmlns:l="/lib/layout" xmlns:x="jelly:xml">
+<j:jelly xmlns:j="jelly:core" xmlns:st="jelly:stapler" xmlns:l="/lib/layout" xmlns:x="jelly:xml" xmlns:d="jelly:define">
   <st:documentation>
     A wrappable bar of details about the given object.
 
@@ -51,5 +51,6 @@ THE SOFTWARE.
         </st:include>
       </j:forEach>
     </j:forEach>
+    <d:invokeBody />
   </div>
 </j:jelly>

src/main/scss/components/_details.scss

@@ -1,16 +1,22 @@
+@use "../abstracts/mixins";
+
 $icon-size: 1.125rem;
 
 .jenkins-details {
   display: flex;
+  align-items: center;
   gap: 0.75rem 1.25rem;
   flex-wrap: wrap;
 
   &__item {
-    display: grid;
-    grid-template-columns: auto 1fr;
+    display: flex;
+    align-items: center;
+    justify-content: center;
     gap: 0.5rem;
     font-weight: normal;
-    color: var(--text-color-secondary);
+    color: var(--text-color-secondary) !important;
+    padding: 0;
+    min-height: 2rem;
 
     &__icon {
       display: flex;
@@ -18,14 +24,14 @@ $icon-size: 1.125rem;
       justify-content: center;
       align-self: start;
       width: $icon-size;
-      height: 1lh;
+      height: 2rem;
 
       svg {
         width: $icon-size;
         height: $icon-size;
 
         * {
-          stroke-width: 40px;
+          stroke-width: 36px;
         }
       }
     }
@@ -35,4 +41,26 @@ $icon-size: 1.125rem;
     color: var(--text-color-secondary);
     opacity: 0.5;
   }
+
+  &__button {
+    --button-background: transparent !important;
+
+    min-width: 51px;
+    min-height: 2rem;
+    padding-block: 0;
+    color: var(--text-color-secondary) !important;
+
+    &:not(:hover, :active, :focus-visible) {
+      --jenkins-border--subtle: var(--jenkins-border);
+    }
+
+    svg {
+      width: $icon-size;
+      height: $icon-size;
+
+      * {
+        stroke-width: 36px;
+      }
+    }
+  }
 }

war/src/main/resources/images/symbols/description.svg

@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="512px" height="512px" viewBox="0 0 512 512" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <g stroke="none" fill="none" stroke-width="32">
+        <path d="M406.5,264.938815 L406.5,347 C406.5,382.070082 378.070082,410.5 343,410.5 L149,410.5 C113.929918,410.5 85.5,382.070082 85.5,347 L85.5,227 C85.5,191.929918 113.929918,163.5 149,163.5 L237.059224,163.5" stroke="currentColor" stroke-linecap="round" fill-rule="nonzero"></path>
+        <path d="M414.210207,90.5004486 C422.473806,90.5004486 430.737415,93.6256822 437.042278,99.8761853 C443.347125,106.126673 446.49955,114.318928 446.49955,122.511205 C446.49955,130.703511 443.347104,138.895832 437.042278,145.146379 L437.042278,145.146379 L292.628663,288.314875 C287.494083,293.405186 281.281811,297.29966 274.441786,299.716231 L274.441786,299.716231 L215.617478,320.500449 C215.30681,320.511448 215.021375,320.388803 214.816804,320.185992 C214.612147,319.983094 214.488432,319.699988 214.49955,319.391869 L214.49955,319.391869 L235.464235,261.074683 C237.901822,254.293533 241.8302,248.134734 246.964841,243.044363 L246.964841,243.044363 L391.378135,99.8761853 C397.682998,93.6256822 405.946607,90.5004486 414.210207,90.5004486 Z" stroke="currentColor"></path>
+    </g>
+</svg>