diff --git a/_locales/en/messages.json b/_locales/en/messages.json index a5b09863..84fff643 100644 --- a/_locales/en/messages.json +++ b/_locales/en/messages.json @@ -161,6 +161,14 @@ "message": "Help", "description": "Alternate text for help buttons" }, + "helpKeyMapHotkey": { + "message": "Press a hotkey", + "description": "Placeholder text of inputbox in keymap help popup on the edit style page. Must be very short" + }, + "helpKeyMapCommand": { + "message": "Type a command name", + "description": "Placeholder text of inputbox in keymap help popup on the edit style page. Must be very short" + }, "installUpdate": { "message": "Install update", "description": "Label for the button to install an update for a single style" diff --git a/edit.js b/edit.js index 4859830a..52e70d0b 100644 --- a/edit.js +++ b/edit.js @@ -907,27 +907,50 @@ function showKeyMapHelp() { .sort(function(a, b) { return a.cmd < b.cmd || (a.cmd == b.cmd && a.key < b.key) ? -1 : 1 }); showHelp(t("cm_keyMap") + ": " + prefs.getPref("editor.keyMap"), '' + - "" + + '' + + '' + "" + keyMapSorted.map(function(value) { return ""; }).join("") + "" + "
" + value.key + "" + value.cmd + "
"); - document.querySelector("#help-popup table").addEventListener("input", function(event) { + + var table = document.querySelector("#help-popup table"); + table.addEventListener("input", filterTable); + + var inputs = table.querySelectorAll("input"); + inputs[0].addEventListener("keydown", hotkeyHandler); + inputs[1].focus(); + + function hotkeyHandler(event) { + var keyName = CodeMirror.keyName(event); + if (keyName == "Esc" || keyName == "Tab" || keyName == "Shift-Tab") { + return; + } + event.preventDefault(); + event.stopPropagation(); + // normalize order of modifiers, + // for modifier-only keys ("Ctrl-Shift") a dummy main key has to be temporarily added + var keyMap = {}; + keyMap[keyName.replace(/(Shift|Ctrl|Alt|Cmd)$/, "$&-dummy")] = ""; + var normalizedKey = Object.keys(CodeMirror.normalizeKeyMap(keyMap))[0]; + this.value = normalizedKey.replace("-dummy", ""); + filterTable(event); + } + function filterTable(event) { var input = event.target; var query = stringAsRegExp(input.value, "gi"); var col = input.parentNode.cellIndex; - this.tBodies[0].childNodes.forEach(function(row) { + inputs[1 - col].value = ""; + table.tBodies[0].childNodes.forEach(function(row) { var cell = row.children[col]; - if (query.test(cell.textContent)) { - row.style.display = ""; - cell.innerHTML = cell.textContent.replace(query, "$&"); - } else { - row.style.display = "none"; - } + cell.innerHTML = cell.textContent.replace(query, "$&"); + row.style.display = query.test(cell.textContent) ? "" : "none"; + // clear highlight from the other column + cell = row.children[1 - col]; + cell.innerHTML = cell.textContent; }); - }); - + } function mergeKeyMaps(merged) { [].slice.call(arguments, 1).forEach(function(keyMap) { if (typeof keyMap == "string") {