Nasty typo fix, added shortcut information in the autotype selector

app/scripts/comp/key-handler.js

@@ -12,7 +12,7 @@ const KeyHandler = {
     modal: false,
 
     init: function() {
-        $(document).bind('keyxpress', this.keypress.bind(this));
+        $(document).bind('keypress', this.keypress.bind(this));
         $(document).bind('keydown', this.keydown.bind(this));
 
         this.shortcuts[Keys.DOM_VK_A] = [{ handler: this.handleAKey, thisArg: this, shortcut: this.SHORTCUT_ACTION,

app/scripts/locales/base.json

@@ -114,6 +114,7 @@
   "keyChangeTitleExpired": "Master Key Expired",
   "keyChangeMessageExpired": "Master key for this database is expired. Please enter a new key",
   "keyChangeRepeatPassword": "Password, once again",
+  "keyEnter": "Enter",
 
   "iconFavTitle": "Download and use website favicon",
   "iconSelCustom": "Select custom icon",
@@ -280,6 +281,9 @@
   "autoTypeMsgNoWindow": "We were unable to get active window title, start typing to search",
   "autoTypeMsgMatchedByWindow": "Select a password for {}",
   "autoTypeNoMatches": "no matches",
+  "autoTypeSelectionHint": "Type the autotype sequence",
+  "autoTypeSelectionHintAction": "Only type the password",
+  "autoTypeSelectionHintOpt": "Only type the username",
 
   "appSecWarn": "Not Secure!",
   "appSecWarnBody1": "You have loaded this app with an insecure connection. Someone may be watching you and stealing your passwords. We strongly advise you to stop, unless you clearly understand what you're doing.",

app/scripts/views/auto-type/auto-type-select-view.js

@@ -6,6 +6,7 @@ const AppSettingsModel = require('../../models/app-settings-model');
 const EntryPresenter = require('../../presenters/entry-presenter');
 const Scrollable = require('../../mixins/scrollable');
 const AutoTypeSequenceType = require('../../const/autotype-sequencetype');
+const FeatureDetector = require('../../util/feature-detector');
 
 const AutoTypePopupView = Backbone.View.extend({
     el: 'body',
@@ -57,7 +58,13 @@ const AutoTypePopupView = Backbone.View.extend({
         this.renderTemplate({
             filterText: this.model.filter.text,
             topMessage: topMessage,
-            itemsHtml: itemsHtml
+            selectionHintDefault: Locale.autoTypeSelectionHint,
+            selectionHintAction: Locale.autoTypeSelectionHintAction,
+            selectionHintOpt: Locale.autoTypeSelectionHintOpt,
+            itemsHtml: itemsHtml,
+            actionSymbol: FeatureDetector.actionShortcutSymbol(true),
+            altSymbol: FeatureDetector.altShortcutSymbol(true),
+            keyEnter: Locale.keyEnter
         });
         document.activeElement.blur();
         this.createScroll({

app/styles/areas/_auto-type.scss

@@ -1,7 +1,9 @@
 .at-select {
   @include position(absolute, 0 null null 0);
   @include size(100%);
-  @include th { background-color: th(background-color); }
+  @include th {
+    background-color: th(background-color);
+  }
   display: flex;
   flex-direction: column;
   align-items: stretch;
@@ -52,13 +54,26 @@
       margin-right: $base-padding-h;
     }
   }
+  &__hint {
+    flex: 0.5 0;
+    margin-bottom: $base-padding-v * 2;
+    text-align: right;
+    &-text {
+      flex: 1 1;
+      font-size: .8em;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      margin-right: $base-padding-h;
+    }
+  }
   &__items {
     flex: 1;
     @include scrollbar-on-hover;
     margin-bottom: $base-padding-v;
     position: relative;
     overflow: hidden;
-    >.scroller {
+    > .scroller {
       display: flex;
       flex-direction: row;
       justify-content: center;
@@ -78,10 +93,19 @@
       overflow: hidden;
       text-overflow: ellipsis;
       word-wrap: break-word;
-      &:first-of-type { width: 1em; text-align: center; }
-      &:nth-of-type(2) { width: 50%; }
-      &:nth-of-type(3) { width: 25%; }
-      &:nth-of-type(4) { width: 25%; }
+      &:first-of-type {
+        width: 1em;
+        text-align: center;
+      }
+      &:nth-of-type(2) {
+        width: 50%;
+      }
+      &:nth-of-type(3) {
+        width: 25%;
+      }
+      &:nth-of-type(4) {
+        width: 25%;
+      }
     }
   }
   &__item {

app/templates/auto-type/auto-type-select.hbs

@@ -1,6 +1,11 @@
 <div class="at-select">
     <div class="at-select__header">
         <h1 class="at-select__header-text">{{res 'autoTypeHeader'}}</h1>
+        <div class="at-select__hint">
+            <div class="at-select__hint-text"><span class="shortcut">{{keyEnter}}</span>: {{selectionHintDefault}}</div>
+            <div class="at-select__hint-text"><span class="shortcut">{{actionSymbol}} {{keyEnter}}</span>: {{selectionHintAction}}</div>
+            <div class="at-select__hint-text"><span class="shortcut">{{altSymbol}} {{keyEnter}}</span>: {{selectionHintOpt}}</div>
+        </div>
         {{#if filterText}}
         <div class="at-select__header-filter">
             <input type="text" readonly value="{{filterText}}" class="at-select__header-filter-input" />