Use new icons for help (#4663)

Co-Authored-By: NFélix Queiruga <felix.queiruga@gmail.com>

core/src/main/resources/hudson/logging/LogRecorderManager/index.jelly

@@ -32,7 +32,7 @@ THE SOFTWARE.
   <l:main-panel xmlns:local="local">
     <h1><l:icon class="icon-clipboard icon-xlg"/>
       ${%Log Recorders}
-      <t:help href="https://jenkins.io/redirect/log-recorders" />
+      <t:help iconSize="large" tooltip="${%Additional information on log recorders}" href="https://jenkins.io/redirect/log-recorders"/>
     </h1>
 
     <d:taglib uri="local">

core/src/main/resources/hudson/logging/LogRecorderManager/levels.jelly

@@ -32,7 +32,7 @@ THE SOFTWARE.
   <l:main-panel>
     <h1>
       ${%Logger Configuration}
-      <t:help href="${%url}" />
+      <t:help iconSize="large" tooltip="${%Additional information on log levels}" href="${%url}" />
     </h1>
     <table class="sortable pane bigtable" style="width:auto" id="logLevels">
       <tr>

core/src/main/resources/jenkins/model/identity/IdentityRootAction/index.jelly

@@ -11,7 +11,7 @@
       </j:otherwise>
     </j:choose>
     <l:main-panel>
-      <h1><l:icon class="icon-help icon-xlg"/> ${%Instance Identity}</h1>
+      <h1>${%Instance Identity}</h1>
       <p>${%blurb}</p>
       <h2>${%Public Key}</h2>
       <pre id="key">${it.publicKey}</pre>

core/src/main/resources/jenkins/security/apitoken/LegacyApiTokenAdministrativeMonitor/manage.jelly

@@ -46,11 +46,11 @@ THE SOFTWARE.
                         <th>${%NumDaysSinceLastUse}</th>
                         <th title="${%HasFreshToken_tooltip}">
                             ${%HasFreshToken}
-                            <l:icon class="icon-help icon-sm"/>
+                            <l:helpIcon tooltip="${%HasFreshToken_tooltip}" />
                         </th>
                         <th title="${%HasMoreRecentlyUsedToken_tooltip}">
                             ${%HasMoreRecentlyUsedToken}
-                            <l:icon class="icon-help icon-sm"/>
+                            <l:helpIcon tooltip="${%HasMoreRecentlyUsedToken_tooltip}" />
                         </th>
                     </tr>
                     <j:choose>

core/src/main/resources/lib/form/helpLink.jelly

@@ -55,7 +55,9 @@ THE SOFTWARE.
     <j:when test="${attrs.url!=null}">
       <j:set var="altText" value="${attrs.featureName != null ? '%Help for feature:' + ' ' + attrs.featureName : '%[Help]'}" />
       <td class="setting-help">
-        <a href="#" class="help-button" helpURL="${rootURL}${attrs.url}"><l:icon class="icon-help icon-sm" alt="${altText}"/></a>
+        <a href="#" class="help-button" helpURL="${rootURL}${attrs.url}">
+          <l:helpIcon class="icon-help" tooltip="${altText}"/>
+        </a>
       </td>
     </j:when>
     <j:otherwise>

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

@@ -21,11 +21,22 @@ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 THE SOFTWARE.
 -->
-
-<!--
-  (?) icon linked to the specified @href
--->
 <?jelly escape-by-default='true'?>
-<a href="${href}">
-  <l:icon class="icon-help icon-sm" xmlns:l="/lib/layout"/>
-</a>
+<j:jelly xmlns:j="jelly:core" xmlns:st="jelly:stapler" xmlns:l="/lib/layout">
+  <st:documentation>
+    Icon linked to the specified @href
+
+    <st:attribute name="href" use="required">
+      Destination of the help icon's link
+    </st:attribute>
+    <st:attribute name="tooltip">
+      The tooltip to display
+    </st:attribute>
+    <st:attribute name="iconSize">
+      Icon size, available are: small, medium, large, xlarge 
+    </st:attribute>
+  </st:documentation>
+  <a href="${href}">
+    <l:helpIcon iconSize="${iconSize}" class="icon-help" tooltip="${tooltip}"/>
+  </a>
+</j:jelly>

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

+<?jelly escape-by-default='true'?>
+<j:jelly xmlns:j="jelly:core" xmlns:st="jelly:stapler" xmlns:l="/lib/layout">
+  <st:documentation>
+    Outputs a help icon
+
+    The help link is rendered as an SVG with an (?) icon.
+    
+    @since TODO
+    <st:attribute name="iconSize">
+      Icon size, available are: small, medium, large, xlarge
+    </st:attribute>
+    <st:attribute name="tooltip">
+      The tooltip to display
+    </st:attribute>
+    <st:attribute name="class">
+      Class name to apply
+    </st:attribute>
+  </st:documentation>
+  <j:if test="${attrs.iconSize != null}">
+    <j:set var="iconSize" value="icon-${iconSize}"/>
+  </j:if>
+  <l:svgIcon tooltip="${tooltip}"
+             class="${class} ${iconSize}"
+             href="${resURL}/images/material-icons/svg-sprite-action-symbol.svg#ic_help_24px" />
+</j:jelly>

war/src/main/less/base-styles-v2.less

@@ -22,6 +22,7 @@ html {
 @import './base/style.less';
 @import './base/yui-compatibility.less';
 
+@import './modules/icons.less';
 @import './modules/buttons.less';
 @import './modules/page-header.less';
 @import './modules/page-footer.less';

war/src/main/less/modules/icons.less

+@import '../abstracts/colors.less';
+
+.icon-help {
+  color: @primary;
+
+  &:hover,
+  &:focus {
+    color: @primary-hover;
+    border-color: @primary-hover;
+  }
+}
+
+.icon-small {
+  width: 16px;
+  height: 16px;
+}
+
+.icon-medium {
+  width: 24px;
+  height: 24px;
+}
+
+.icon-large {
+  width: 32px;
+  height: 32px;
+}
+
+.icon-xlarge {
+  width: 64px;
+  height: 64px;
+}