Some bug fixes, add keyboard control to mention_menu, and some css changes

src/inject/css.js

@@ -62,7 +62,7 @@ CSSInjector.commonCSS = `
       display: none !important
     }
     /* Group mention: user selection box */
-    div#userSelectionBox select option:hover {
+    div#userSelectionBox select option:hover, div#userSelectionBox select option.hovered{
       background: #eeeeee;
     }
     div#userSelectionBox select option {
@@ -80,15 +80,19 @@ CSSInjector.commonCSS = `
       border: none;
       outline: none;
       height: inherit;
+      display: table;
     }
     div#userSelectionBox {
       box-shadow: 1px 1px 10px #ababab;
       background: #fff;
       display: none;
       position: fixed;
+      overflow-x:hidden;
+      overflow-y:auto;
       bottom: ${Common.MENTION_MENU_INITIAL_Y}px;
       left: ${Common.MENTION_MENU_INITIAL_X}px;
     }
+
     span.measure_text {
       padding-left: 20px;
       outline: 0;
@@ -111,4 +115,12 @@ CSSInjector.osxCSS = `
     }
 `;
 
+
+CSSInjector.enlargeEmoji = `
+    .message .custom_emoji{
+        width: 120px !important;
+        height: auto !important;
+    }
+`
+
 module.exports = CSSInjector;

src/inject/mention_menu.js

@@ -27,12 +27,21 @@ class MentionMenu {
     });
     $box.append($select);
     $('body').append($box);
+    MentionMenu.hideMenuWhenBlur();
   }
 
+
+
   static inject($event) {
     const $editArea = $($event.currentTarget);
     const $box = $('#userSelectionBox');
 
+    if($box.css('display') != 'none' && /^(40|38|32|27)$/.test($event.keyCode)){
+
+      MentionMenu.nevigateMenu($event,$box);
+      return;
+    }
+
     let $probe = $('<span id="probe"/>');
     $editArea.append($probe);
     let probePosition = $probe.position();
@@ -129,6 +138,59 @@ class MentionMenu {
 
     return $option;
   }
+
+  static hideMenuWhenBlur() {
+
+    $('#editArea').scope()['editAreaBlur'] = function() {
+      var oriFun = $('#editArea').scope()['editAreaBlur'];
+      return ($event) => {
+
+        oriFun.apply(this, $event);
+        if ($('#userSelectionBox').css('display') != 'none' && !$('#userSelectionBox').is(":hover")) {
+          $('#userSelectionBox').hide();
+        }
+      }
+    }()
+  }
+
+  static nevigateMenu($event, $box) {
+    switch ($event.keyCode) {
+
+      case 32:
+        if ($($box.find('.hovered')).length || $($box.find('option:hover')).length) {
+          var val = $($box.find('.hovered')).length ? $($box.find('.hovered')).val() : $($('#userSelectionBox').find('option:hover')).val();
+          $('#userSelectionBox > select').val(val).trigger('change');
+        }
+        break;
+
+      case 40:
+        $event.preventDefault();
+        var $currenSelc = $box.find('.hovered');
+        $currenSelc.removeClass('hovered');
+        if ($currenSelc.next().length) {
+          $currenSelc.next().addClass('hovered');
+        } else {
+          $($box.find('option')[0]).addClass('hovered');
+        }
+        break;
+
+      case 38:
+        $event.preventDefault();
+        var $currenSelc = $box.find('.hovered');
+        $currenSelc.removeClass('hovered');
+        if ($currenSelc.prev().length) {
+          $currenSelc.prev().addClass('hovered');
+        } else {
+          $box.find('option').last().addClass('hovered');
+        }
+        break;
+
+      case 27:
+        $box.hide();
+        $('#userSelectionBox > select').val('');
+        break;
+    }
+  }
 }
 
 module.exports = MentionMenu;

src/inject/preload.js

@@ -50,21 +50,23 @@ class Injector {
   }
 
   initInjectBundle() {
-    let initModules = ()=> {
-      if (!window.$) {
-        return setTimeout(initModules, 3000);
-      }
+    var self = this;
+    setTimeout(function(){
+
+        if (!window.$) {
+
+          self.initInjectBundle();
 
-      MentionMenu.init();
-      BadgeCount.init();
-    };
+        }else{
+
+          window.addEventListener('online', ()=> {
+                ipcRenderer.send('reload', true);
+          });
+          MentionMenu.init();
+          BadgeCount.init();
+        }
 
-    window.onload = () => {
-      initModules();
-      window.addEventListener('online', ()=> {
-        ipcRenderer.send('reload', true);
-      });
-    };
+    },1000)
   }
 
   transformResponse(value, constants) {