CLI Client-side Autocomplete

Executes silently various commands on CLI open. Parses the output
and build autocomplete cache. Autcomplete hints are displayed in
popup lists.

locales/en/messages.json

@@ -2266,7 +2266,10 @@
         "message": "<strong>Note:</strong> Leaving CLI tab or pressing Disconnect will <strong>automatically</strong> send \"<strong>exit</strong>\" to the board.  With the latest firmware this will make the controller <strong>restart</strong> and unsaved changes will be <strong>lost</strong>.<p><strong><span class=\"message-negative\">Warning:</span></strong> Some commands in CLI can result in arbitrary signals being sent on the motor output pins. This can cause motors to spin up if a battery is connected. Therefore it is highly recommended to make sure that <strong>no battery is connected before entering commands in CLI</strong>."
     },
     "cliInputPlaceholder": {
-        "message": "Write your command here"
+        "message": "Write your command here. Press Tab for AutoComplete."
+    },
+    "cliInputPlaceholderBuilding": {
+        "message": "Please wait while building AutoComplete cache ..."
     },
     "cliEnter": {
         "message": "CLI mode detected"
@@ -4184,5 +4187,8 @@
     },
     "flashTab": {
         "message": "Update Firmware"
+    },
+    "cliAutoComplete": {
+        "message": "Advanced CLI AutoComplete"
     }
 }

package.json

@@ -40,6 +40,7 @@
   "dependencies": {
     "i18next": "^14.1.1",
     "i18next-xhr-backend": "^2.0.0",
+    "jquery-textcomplete": "^1.8.5",
     "lru_map": "^0.3.3",
     "marked": "^0.6.2",
     "object-hash": "^1.3.1",

src/css/tabs/cli.css

@@ -81,3 +81,55 @@
 
 }
 
+
+/* AutoComplete */
+.cli-textcomplete-dropdown {
+    border: 1px solid #ddd;
+    background-color: white;
+    border-radius: 5px;
+    max-height: 50%;
+    overflow: auto;
+}
+
+.cli-textcomplete-dropdown::-webkit-scrollbar {
+    width: 6px;
+}
+
+.cli-textcomplete-dropdown::-webkit-scrollbar-track {
+    background: lightgrey;
+    border-radius: 3px;
+}
+
+.cli-textcomplete-dropdown::-webkit-scrollbar-thumb {
+    background: grey;
+    border-radius: 3px;
+}
+
+.cli-textcomplete-dropdown li {
+    padding: 2px 5px;
+}
+
+.cli-textcomplete-dropdown li:hover,
+.cli-textcomplete-dropdown .active {
+    background-color: rgb(255, 187, 0);
+}
+
+.cli-textcomplete-dropdown {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+}
+
+.cli-textcomplete-dropdown a:hover {
+    cursor: pointer;
+}
+
+.cli-textcomplete-dropdown a {
+    font-family: monospace;
+}
+
+.cli-textcomplete-dropdown a b {
+    font-family: monospace;
+    font-weight: bold;
+}
+/* End AutoComplete */