Update keyboard shortcut logic

core/src/main/resources/jenkins/views/JenkinsHeader/headerContent.jelly

@@ -19,7 +19,7 @@
         </div>
 
         <div class="login page-header__hyperlinks">
-          <button id="button-spotlight" tooltip="${%Search}">
+          <button id="button-spotlight" tooltip="${%Search}" data-keyboard-shortcut="CMD+K">
             <l:icon src="symbol-search" />
           </button>
 

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

@@ -255,6 +255,7 @@ THE SOFTWARE.
     </footer>
     </j:if>
 
+    <script src="${resURL}/jsbundles/keyboard-shortcuts.js" type="text/javascript"/>
     <script src="${resURL}/jsbundles/search.js" type="text/javascript"/>
 
     <!-- SVG sprite polyfill for IE 11.

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

@@ -34,27 +34,23 @@ THE SOFTWARE.
        data-get-help="${%Get help using Jenkins search}"
   />
 
-  <div id="command-center-backdrop" class="jenkins-command-center__backdrop" />
-
-  <div id="command-center" class="jenkins-command-center__wrapper">
+  <dialog id="command-center" class="jenkins-command-center__wrapper">
     <div class="jenkins-command-center">
       <div class="jenkins-command-center__search">
         <div class="icon">
           <l:icon src="symbol-search" />
         </div>
         <input id="command-bar" placeholder="${%Search}" type="search" autocomplete="off" autocorrect="off"
                autocapitalize="off" spellcheck="false" />
-        <div class="keyboard-shortcuts">
-          <span id="command-center-shortcut-modifier" class="shortcut">⌘</span>
-          <l:icon src="symbol-add" />
-          <span class="shortcut">K</span>
+        <div class="keyboard-shortcuts" id="command-center-keyboard-shortcut">
+
         </div>
       </div>
       <div id="search-results-container" class="jenkins-command-center__results-container">
         <div id="search-results" class="jenkins-command-center__results" />
       </div>
     </div>
-  </div>
+  </dialog>
 
   <script src="${resURL}/jsbundles/search.js" type="text/javascript" />
 </j:jelly>

war/src/main/js/keyboard-shortcuts.js

@@ -0,0 +1,44 @@
+import hotkeys from "hotkeys-js"
+
+const ADD_SVG = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="M256 112v288M400 256H112"/></svg>`
+
+window.addEventListener("load", () => {
+  document.querySelectorAll("[data-keyboard-shortcut]").forEach(function(element) {
+    hotkeys(translateKeyboardShortcutForOS(element.dataset.keyboardShortcut), () => {
+      element.click()
+      // Returning false stops the event and prevents default browser events
+      return false
+    })
+  })
+})
+
+/**
+ * Translates a given keyboard shortcut, e.g. CMD+K, into an OS friendly version, e.g. CTRL+K
+ * @param {string} keyboardShortcut The shortcut for translation
+ */
+function translateKeyboardShortcutForOS(keyboardShortcut) {
+  const isMac = navigator.platform.toUpperCase().indexOf("MAC") >= 0
+  return keyboardShortcut.replace("CMD", isMac ? "CMD" : "CTRL")
+}
+
+/**
+ * Translates a given keyboard shortcut, e.g. CMD+K, into a UI friendly version, e.g. ⌘+K
+ * @param {string} keyboardShortcut The shortcut for translation
+ */
+function translateKeyboardShortcutForUI(keyboardShortcut) {
+  const isMac = navigator.platform.toUpperCase().indexOf("MAC") >= 0
+  return keyboardShortcut.replace("CMD", isMac ? "⌘" : "CTRL")
+}
+
+/**
+ * Generates a UI representation of the given keyboard shortcut
+ * @param {string} keyboardShortcut The shortcut for generation
+ */
+export function generateKeyboardShortcutUI(keyboardShortcut) {
+  return translateKeyboardShortcutForUI(keyboardShortcut)
+    .split("+")
+    .map(shortcut => `<span class="shortcut">${shortcut}</span>`)
+    .join(ADD_SVG)
+}
+
+export default { generateKeyboardShortcutUI }

war/src/main/js/search.js

@@ -1,27 +1,31 @@
 import "core-js/stable"
 import "regenerator-runtime/runtime"
-import hotkeys from "hotkeys-js"
+import {generateKeyboardShortcutUI} from "./keyboard-shortcuts"
 
 window.addEventListener('load', () => {
   const i18n = document.getElementById("command-center-i18n")
   const spotlightButton = document.getElementById("button-spotlight")
-  const commandCenterBackdrop = document.getElementById("command-center-backdrop")
   const commandCenter = document.getElementById("command-center")
   const commandBarInput = document.getElementById("command-bar")
   const commandBarMagnifyingGlass = commandCenter.querySelector(".jenkins-command-center__search .icon")
   const searchResults = document.getElementById("search-results")
   const searchResultsContainer = document.getElementById("search-results-container")
-  const keyboardModifier = document.getElementById("command-center-shortcut-modifier")
+  const commandBarKeyboardShortcut = document.getElementById("command-center-keyboard-shortcut")
 
   const hoverClass = "jenkins-command-center__results__item--hover"
 
 // Update the keyboard shortcut text depending on OS
-  const isMac = navigator.platform.toUpperCase().indexOf("MAC") >= 0
-  keyboardModifier.textContent = isMac ? "⌘" : "CTRL"
+//   commandBarKeyboardShortcut.innerHTML = generateKeyboardShortcutUI("CMD+K")
 
 // Events
   spotlightButton.addEventListener("click", function () {
-    showCommandCenter()
+    console.log("hello")
+
+    if (commandCenter.open) {
+      hideCommandCenter()
+    } else {
+      showCommandCenter()
+    }
   })
 
   commandCenter.addEventListener("click", function (e) {
@@ -32,7 +36,7 @@ window.addEventListener('load', () => {
     hideCommandCenter()
   })
 
-  commandBarInput.addEventListener("input", async function (e) {
+  commandBarInput.addEventListener("input", async (e) => {
     commandBarMagnifyingGlass.classList.add("icon--loading")
     let results
 
@@ -134,25 +138,21 @@ window.addEventListener('load', () => {
     }
   })
 
-  hotkeys("ctrl+k, command+k", async function () {
-    showCommandCenter()
-    // Returning false stops the event and prevents default browser events
-    return false
-  })
-
 // Helper methods for visibility of command center
   function showCommandCenter() {
-    commandCenter.style.display = "flex"
-    commandCenterBackdrop.style.display = "block"
+    commandCenter.showModal()
+    // commandCenter.style.display = "flex"
+    // commandCenterBackdrop.style.display = "block"
     commandBarInput.focus()
 
     // Fire empty input event to command bar to set appropriate UI states (OOBE, results, no results)
     commandBarInput.dispatchEvent(new Event("input"))
   }
 
   function hideCommandCenter() {
-    commandCenter.style.display = "none"
-    commandCenterBackdrop.style.display = "none"
+    commandCenter.close()
+    // commandCenter.style.display = "none"
+    // commandCenterBackdrop.style.display = "none"
   }
 
 // Group suggestions by 'category' field into map

war/src/main/less/modules/command-center.less

@@ -16,31 +16,15 @@
   }
 }
 
-.jenkins-command-center__backdrop {
-  display: none;
-  position: fixed;
-  top: 0;
-  left: 0;
-  bottom: 0;
-  right: 0;
-  background: var(--command-center-backdrop);
-  z-index: 1000;
-  backdrop-filter: saturate(2) blur(2px);
-}
-
 .jenkins-command-center__wrapper {
-  display: none;
-  position: fixed;
-  top: 0;
-  left: 0;
-  bottom: 0;
-  right: 0;
-  z-index: 1000;
-  align-items: flex-start;
-  justify-content: center;
-  padding-top: 15vh;
-  padding-bottom: 15vh;
-  overflow-y: scroll;
+  background: none;
+  border: none;
+  filter: drop-shadow(var(--command-center-drop-shadow));
+  margin: 20vh auto;
+
+  &::backdrop {
+    backdrop-filter: saturate(1.5) contrast(0.75) brightness(0.45) blur(3px);
+  }
 }
 
 .jenkins-command-center {
@@ -49,7 +33,6 @@
   min-width: 400px;
   max-width: 650px;
   color: var(--text-color);
-  filter: drop-shadow(var(--command-center-drop-shadow));
   pointer-events: auto;
 
   &__search {

war/src/main/less/modules/page-header.less

@@ -1,7 +1,6 @@
 @import "../abstracts/theme.less";
 
 .page-header {
-    display: block;
     display: flex;
     align-items: center;
     height: 3.5rem;
@@ -50,22 +49,27 @@ a.page-header__brand-link {
     align-items: center;
 }
 
-.page-header__hyperlinks a {
+.page-header__hyperlinks a, .page-header__hyperlinks button {
     --text-color: var(--header-link-color);
     display: inline-flex;
     align-items: center;
 
+    background: transparent;
+    border: none;
+    outline: none;
+
     // need to override an existing rule
-    padding-right: 0.5rem;
     padding: 0.5rem;
     margin-right: 0.25rem;
     font-weight: bold;
-    outline-color: var(--header-link-outline);
+    border-radius: var(--header-item-border-radius);
+    color: var(--header-link-color);
+    cursor: pointer;
+
+    transition: 0.2s ease;
 
     &:link,
     &:visited {
-        color: var(--header-link-color);
-        border-radius: var(--header-item-border-radius);
         text-decoration: none;
     }
 
@@ -81,6 +85,11 @@ a.page-header__brand-link {
     &:active {
         background-color: var(--header-link-bg-classic-active);
     }
+
+    svg {
+      width: 18px;
+      height: 18px;
+    }
 }
 
 .page-header__hyperlinks a span {

war/webpack.config.js

@@ -30,6 +30,7 @@ module.exports = (env, argv) => ({
       path.join(__dirname, "src/main/js/config-tabbar.less"),
     ],
     "search": [path.join(__dirname, "src/main/js/search.js")],
+    "keyboard-shortcuts": [path.join(__dirname, "src/main/js/keyboard-shortcuts.js")],
     "sortable-drag-drop": [path.join(__dirname, "src/main/js/sortable-drag-drop.js")],
     "section-to-tabs": [path.join(__dirname, "src/main/js/section-to-tabs.js")],
     "filter-build-history": [path.join(__dirname, "src/main/js/filter-build-history.js")],