Update appearance of keyboard shortcut tooltips

core/src/main/java/hudson/Functions.java

@@ -117,6 +117,7 @@
 import java.nio.charset.StandardCharsets;
 import java.text.DateFormat;
 import java.text.DecimalFormat;
+import java.text.MessageFormat;
 import java.time.ZoneId;
 import java.time.ZonedDateTime;
 import java.time.format.DateTimeFormatter;
@@ -2489,4 +2490,25 @@
     public static String generateItemId() {
         return String.valueOf(Math.floor(Math.random() * 3000));
     }
+
+    /**
+     * @param keyboardShortcut the shortcut to be translated
+     * @return the translated shortcut, e.g. CMD+K to ⌘+K for macOS, CTRL+K for Windows
+     */
+    @Restricted(NoExternalUse.class)
+    public static String translateModifierKeysForUsersPlatform(String keyboardShortcut) {
+        StaplerRequest currentRequest = Stapler.getCurrentRequest();
+        currentRequest.getWebApp().getDispatchValidator().allowDispatch(currentRequest, Stapler.getCurrentResponse());
+        String userAgent = currentRequest.getHeader("User-Agent");
+
+        List<String> platformsThatUseCommand = List.of("MAC", "IPHONE", "IPAD");
+        boolean useCmdKey = platformsThatUseCommand.stream().anyMatch(e -> userAgent.toUpperCase().contains(e));
+
+        return keyboardShortcut.replace("CMD", useCmdKey ? "⌘" : "CTRL");
+    }
+
+    @Restricted(NoExternalUse.class)
+    public static String formatMessage(String format, Object args) {
+        return MessageFormat.format(format, args);
+    }
 }

core/src/main/resources/lib/layout/keyboard-shortcut.jelly

@@ -0,0 +1,43 @@
+<!--
+The MIT License
+
+Copyright (c) 2023, Jenkins Contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+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.
+-->
+
+<?jelly escape-by-default='true'?>
+<j:jelly xmlns:j="jelly:core" xmlns:st="jelly:stapler" xmlns:d="jelly:define">
+  <st:documentation>
+    <st:attribute name="message">
+      Optional message for the shortcut
+    </st:attribute>
+    Displays a keyboard shortcut chip based on the component's body.
+    CMD will automatically be translated to the user's operating system's appropriate variant.
+  </st:documentation>
+
+  <div class="jenkins-tooltip__keyboard-shortcut">
+    <j:set var="body">
+      <div class="jenkins-tooltip__keyboard-shortcut__symbol">
+        <d:invokeBody trim="true" />
+      </div>
+    </j:set>
+    <j:out value="${h.formatMessage(message, h.translateModifierKeysForUsersPlatform(body))}" />
+  </div>
+</j:jelly>

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

@@ -58,7 +58,12 @@ THE SOFTWARE.
              spellcheck="false"
              disabled="${attrs.enabled == false ? true : null}" />
       <j:if test="${attrs.hasKeyboardShortcut != 'false'}">
-        <div class="jenkins-search__shortcut" tooltip="${%Press / on your keyboard to focus}">
+        <j:set var="tooltip">
+          <l:keyboard-shortcut message="${%shortcut}">
+            <l:icon src="symbol-search-shortcut" />
+          </l:keyboard-shortcut>
+        </j:set>
+        <div class="jenkins-search__shortcut" data-html-tooltip="${tooltip}">
           <l:icon src="symbol-search-shortcut" />
         </div>
       </j:if>

core/src/main/resources/lib/layout/search-bar_pl.properties

@@ -20,4 +20,4 @@
 # OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 # THE SOFTWARE.
 
-Press\ /\ on\ your\ keyboard\ to\ focus=Naciśnij / na klawiaturze, aby przesunąć tutaj kursor
+shortcut=Naciśnij '{0}' na klawiaturze, aby przesunąć tutaj kursor

core/src/main/resources/lib/layout/search-bar_pt_BR.properties

@@ -21,4 +21,4 @@
 # THE SOFTWARE.
 
 Search=Busca
-Press\ /\ on\ your\ keyboard\ to\ focus=Digite /\ no seu teclado para realçar
+shortcut=Digite '{0}' no seu teclado para realçar

war/src/main/scss/components/_tooltips.scss

@@ -51,3 +51,62 @@
 .jenkins-table .healthReportDetails {
   display: none !important;
 }
+
+.jenkins-tooltip__keyboard-shortcut {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.6ch;
+
+  &__symbol {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 1.7em;
+    height: 1.7em;
+    padding-inline: 0.5ch;
+
+    &::before,
+    &::after {
+      content: "";
+      position: absolute;
+      inset: 0;
+      border-radius: 0.375rem;
+      border: 0.1rem solid var(--text-color-secondary);
+      opacity: 0.3;
+    }
+
+    &::after {
+      mask-image: linear-gradient(
+        -45deg,
+        transparent 40%,
+        white,
+        transparent 60%
+      );
+      mask-size: 200% 200%;
+      animation: shortcut-glow-animation 1.25s forwards linear;
+    }
+
+    svg {
+      width: 1em;
+      height: 1em;
+    }
+
+    @keyframes shortcut-glow-animation {
+      0% {
+        opacity: 0;
+        mask-position: 100% 100%;
+      }
+
+      50% {
+        opacity: 1;
+      }
+
+      100% {
+        opacity: 0;
+        mask-position: 0;
+      }
+    }
+  }
+}