Show actual binding if user clicks a binding item

3 files changed, 8 insertions, 6 deletions

diff --git a/share/tools/web_config/js/filters.js b/share/tools/web_config/js/filters.js
index 7a54f7fe..f8c00766 100644
--- a/share/tools/web_config/js/filters.js
+++ b/share/tools/web_config/js/filters.js
@@ -25,7 +25,7 @@ filters.filter("filterBinding", function() {
 
         for(i=0; i<bindings.length; ++i) {
             binding = bindings[i];
-            if (binding.command.indexOf(query) != -1 || binding.binding.toLowerCase().indexOf(query.toLowerCase()) != -1) {
+            if (binding.command.indexOf(query) != -1 || binding.readable_binding.toLowerCase().indexOf(query.toLowerCase()) != -1) {
                 result.push(binding);
             }
         }
diff --git a/share/tools/web_config/partials/bindings.html b/share/tools/web_config/partials/bindings.html
index 3a78ca5f..250383ef 100644
--- a/share/tools/web_config/partials/bindings.html
+++ b/share/tools/web_config/partials/bindings.html
@@ -6,7 +6,8 @@
     <tbody>
     <tr class="data_table_row" ng-repeat="binding in bindings | filterBinding:query">
         <td ng-class="{ data_table_cell: true, no_overflow: !binding._is_selected }" style="text-align: right; padding-right: 30px;" ng-click="binding._is_selected = !binding._is_selected">{{ binding.command }}</td>
-        <td class="data_table_cell no_overflow" style="text-align: left; padding-right: 30px;">{{ binding.binding }}</td>
+        <!-- Some bindings are listed multiple times for e.g. function backward-char is bound to \e\[D as well as key left. Users may want to know why some bindings are listed twice, so the actual binding is shown in next line on a click -->
+        <td ng-class="{ data_table_cell: true, no_overflow: !binding._is_selected }" style="text-align: left; padding-right: 30px;" ng-click="binding._is_selected = !binding._is_selected">{{ binding.readable_binding }} <div ng-show="binding._is_selected"> {{ binding.binding }} </div> </td>
     </tr>
     </tbody>
 </table>
diff --git a/share/tools/web_config/webconfig.py b/share/tools/web_config/webconfig.py
index c2b75878..0785175f 100755
--- a/share/tools/web_config/webconfig.py
+++ b/share/tools/web_config/webconfig.py
@@ -253,13 +253,14 @@ class FishVar:
 class FishBinding:
     """A class that represents keyboard binding """
 
-    def __init__(self, command, binding, description=None):
+    def __init__(self, command, binding, readable_binding, description=None):
         self.command =  command
         self.binding = binding
+        self.readable_binding = readable_binding
         self.description = description
 
     def get_json_obj(self):
-        return {"command" : self.command, "binding": self.binding, "description": self.description }
+        return {"command" : self.command, "binding": self.binding, "readable_binding": self.readable_binding, "description": self.description }
 
     def get_readable_binding(command):
         return command
@@ -535,10 +536,10 @@ class FishConfigHTTPRequestHandler(SimpleHTTPServer.SimpleHTTPRequestHandler):
             if comps[1] == '-k':
                 key_name, command = comps[2].split(' ', 2)
                 binding_parser.set_buffer(key_name, True)
-                fish_binding = FishBinding(command=command, binding=binding_parser.get_readable_binding())
+                fish_binding = FishBinding(command=command, binding=key_name, readable_binding=binding_parser.get_readable_binding())
             else:
                 binding_parser.set_buffer(comps[1])
-                fish_binding = FishBinding(command=comps[2], binding=binding_parser.get_readable_binding())
+                fish_binding = FishBinding(command=comps[2], binding=comps[1], readable_binding=binding_parser.get_readable_binding())
 
             bindings.append(fish_binding)