Merge pull request #749 from ueokande/qa-0.28

QA 0.28

14 files changed, 515 insertions, 451 deletions

diff --git a/src/console/Completions.ts b/src/console/Completions.ts
index ec9135f..a18f160 100644
--- a/src/console/Completions.ts
+++ b/src/console/Completions.ts
@@ -1,11 +1,11 @@
 type Completions = {
-    readonly name: string;
-    readonly items: {
-        readonly caption?: string;
-        readonly content?: string;
-        readonly url?: string;
-        readonly icon?: string;
-    }[];
-}[]
+  readonly name: string;
+  readonly items: {
+    readonly caption?: string;
+    readonly content?: string;
+    readonly url?: string;
+    readonly icon?: string;
+  }[];
+}[];
 
-export default Completions;
\ No newline at end of file
+export default Completions;
diff --git a/src/console/actions/console.ts b/src/console/actions/console.ts
index e44c974..205676b 100644
--- a/src/console/actions/console.ts
+++ b/src/console/actions/console.ts
@@ -1,6 +1,6 @@
-import * as messages from '../../shared/messages';
-import * as actions from './index';
-import {Command} from "../../shared/Command";
+import * as messages from "../../shared/messages";
+import * as actions from "./index";
+import { Command } from "../../shared/Command";
 import CompletionClient from "../clients/CompletionClient";
 import CompletionType from "../../shared/CompletionType";
 import Completions from "../Completions";
@@ -9,23 +9,23 @@ import TabFlag from "../../shared/TabFlag";
 const completionClient = new CompletionClient();
 
 const commandDocs = {
-  [Command.Set]: 'Set a value of the property',
-  [Command.Open]: 'Open a URL or search by keywords in current tab',
-  [Command.TabOpen]: 'Open a URL or search by keywords in new tab',
-  [Command.WindowOpen]: 'Open a URL or search by keywords in new window',
-  [Command.Buffer]: 'Select tabs by matched keywords',
-  [Command.BufferDelete]: 'Close a certain tab matched by keywords',
-  [Command.BuffersDelete]: 'Close all tabs matched by keywords',
-  [Command.Quit]: 'Close the current tab',
-  [Command.QuitAll]: 'Close all tabs',
-  [Command.AddBookmark]: 'Add current page to bookmarks',
-  [Command.Help]: 'Open Vim Vixen help in new tab',
+  [Command.Set]: "Set a value of the property",
+  [Command.Open]: "Open a URL or search by keywords in current tab",
+  [Command.TabOpen]: "Open a URL or search by keywords in new tab",
+  [Command.WindowOpen]: "Open a URL or search by keywords in new window",
+  [Command.Buffer]: "Select tabs by matched keywords",
+  [Command.BufferDelete]: "Close a certain tab matched by keywords",
+  [Command.BuffersDelete]: "Close all tabs matched by keywords",
+  [Command.Quit]: "Close the current tab",
+  [Command.QuitAll]: "Close all tabs",
+  [Command.AddBookmark]: "Add current page to bookmarks",
+  [Command.Help]: "Open Vim Vixen help in new tab",
 };
 
-const propertyDocs: {[key: string]: string} = {
-  'hintchars': 'hint characters on follow mode',
-  'smoothscroll': 'smooth scroll',
-  'complete': 'which are completed at the open page',
+const propertyDocs: { [key: string]: string } = {
+  hintchars: "hint characters on follow mode",
+  smoothscroll: "smooth scroll",
+  complete: "which are completed at the open page",
 };
 
 const hide = (): actions.ConsoleAction => {
@@ -52,27 +52,32 @@ const showFind = (): actions.ShowFindAction => {
 const showError = (text: string): actions.ShowErrorAction => {
   return {
     type: actions.CONSOLE_SHOW_ERROR,
-    text: text
+    text: text,
   };
 };
 
 const showInfo = (text: string): actions.ShowInfoAction => {
   return {
     type: actions.CONSOLE_SHOW_INFO,
-    text: text
+    text: text,
   };
 };
 
 const hideCommand = (): actions.HideCommandAction => {
-  window.top.postMessage(JSON.stringify({
-    type: messages.CONSOLE_UNFOCUS,
-  }), '*');
+  window.top.postMessage(
+    JSON.stringify({
+      type: messages.CONSOLE_UNFOCUS,
+    }),
+    "*"
+  );
   return {
     type: actions.CONSOLE_HIDE_COMMAND,
   };
 };
 
-const enterCommand = async(text: string): Promise<actions.HideCommandAction> => {
+const enterCommand = async (
+  text: string
+): Promise<actions.HideCommandAction> => {
   await browser.runtime.sendMessage({
     type: messages.CONSOLE_ENTER_COMMAND,
     text,
@@ -81,10 +86,13 @@ const enterCommand = async(text: string): Promise<actions.HideCommandAction> =>
 };
 
 const enterFind = (text?: string): actions.HideCommandAction => {
-  window.top.postMessage(JSON.stringify({
-    type: messages.CONSOLE_ENTER_FIND,
-    text,
-  }), '*');
+  window.top.postMessage(
+    JSON.stringify({
+      type: messages.CONSOLE_ENTER_FIND,
+      text,
+    }),
+    "*"
+  );
   return hideCommand();
 };
 
@@ -97,25 +105,30 @@ const setConsoleText = (consoleText: string): actions.SetConsoleTextAction => {
 
 const getCommandCompletions = (text: string): actions.SetCompletionsAction => {
   const items = Object.entries(commandDocs)
-      .filter(([name]) => name.startsWith(text.trimLeft()))
-      .map(([name, doc]) => ({
-          caption: name,
-          content: name,
-          url: doc,
-        }));
-  const completions = [{
-    name: "Console Command",
-    items,
-  }];
+    .filter(([name]) => name.startsWith(text.trimLeft()))
+    .map(([name, doc]) => ({
+      caption: name,
+      content: name,
+      url: doc,
+    }));
+  const completions = [
+    {
+      name: "Console Command",
+      items,
+    },
+  ];
   return {
     type: actions.CONSOLE_SET_COMPLETIONS,
     completions,
     completionSource: text,
-  }
+  };
 };
 
-const getOpenCompletions = async(
-    types: CompletionType[], original: string, command: Command, query: string,
+const getOpenCompletions = async (
+  types: CompletionType[],
+  original: string,
+  command: Command,
+  query: string
 ): Promise<actions.SetCompletionsAction> => {
   const completions: Completions = [];
   for (const type of types) {
@@ -126,11 +139,11 @@ const getOpenCompletions = async(
           break;
         }
         completions.push({
-          name: 'Search Engines',
-          items: items.map(key => ({
+          name: "Search Engines",
+          items: items.map((key) => ({
             caption: key.title,
-            content: command + ' ' + key.title,
-          }))
+            content: command + " " + key.title,
+          })),
         });
         break;
       }
@@ -140,11 +153,11 @@ const getOpenCompletions = async(
           break;
         }
         completions.push({
-          name: 'History',
-          items: items.map(item => ({
+          name: "History",
+          items: items.map((item) => ({
             caption: item.title,
-            content: command + ' ' + item.url,
-            url: item.url
+            content: command + " " + item.url,
+            url: item.url,
           })),
         });
         break;
@@ -155,12 +168,12 @@ const getOpenCompletions = async(
           break;
         }
         completions.push({
-          name: 'Bookmarks',
-          items: items.map(item => ({
+          name: "Bookmarks",
+          items: items.map((item) => ({
             caption: item.title,
-            content: command + ' ' + item.url,
-            url: item.url
-          }))
+            content: command + " " + item.url,
+            url: item.url,
+          })),
         });
         break;
       }
@@ -175,61 +188,75 @@ const getOpenCompletions = async(
 };
 
 const getTabCompletions = async (
-  original: string, command: Command, query: string, excludePinned: boolean,
+  original: string,
+  command: Command,
+  query: string,
+  excludePinned: boolean
 ): Promise<actions.SetCompletionsAction> => {
-    const items = await completionClient.requestTabs(query, excludePinned);
-    let completions: Completions = [];
-    if (items.length > 0) {
-      completions = [{
-        name: 'Buffers',
-        items: items.map(item => ({
-          content: command + ' ' + item.url,
-          caption: `${item.index}: ${item.flag != TabFlag.None ? item.flag : ' ' } ${item.title}`,
+  const items = await completionClient.requestTabs(query, excludePinned);
+  let completions: Completions = [];
+  if (items.length > 0) {
+    completions = [
+      {
+        name: "Buffers",
+        items: items.map((item) => ({
+          content: command + " " + item.url,
+          caption: `${item.index}: ${
+            item.flag != TabFlag.None ? item.flag : " "
+          } ${item.title}`,
           url: item.url,
           icon: item.faviconUrl,
         })),
-      }];
-    }
-    return {
-      type: actions.CONSOLE_SET_COMPLETIONS,
-      completions,
-      completionSource: original,
-    }
+      },
+    ];
+  }
+  return {
+    type: actions.CONSOLE_SET_COMPLETIONS,
+    completions,
+    completionSource: original,
+  };
 };
 
-const getPropertyCompletions = async(
-    original: string, command: Command, query: string,
+const getPropertyCompletions = async (
+  original: string,
+  command: Command,
+  query: string
 ): Promise<actions.SetCompletionsAction> => {
   const properties = await completionClient.getProperties();
   const items = properties
-      .map(item => {
-        const desc = propertyDocs[item.name] || '';
-        if (item.type === 'boolean') {
-          return [{
+    .map((item) => {
+      const desc = propertyDocs[item.name] || "";
+      if (item.type === "boolean") {
+        return [
+          {
             caption: item.name,
-            content: command + ' ' + item.name,
-            url: 'Enable ' + desc,
-          }, {
-            caption: 'no' + item.name,
-            content: command + ' no' + item.name,
-            url: 'Disable ' + desc,
-          }];
-        } else {
-          return [{
+            content: command + " " + item.name,
+            url: "Enable " + desc,
+          },
+          {
+            caption: "no" + item.name,
+            content: command + " no" + item.name,
+            url: "Disable " + desc,
+          },
+        ];
+      } else {
+        return [
+          {
             caption: item.name,
-            content: name + ' ' + item.name,
-            url: 'Set ' + desc,
-          }];
-        }
-      })
-      .reduce((acc, val) => acc.concat(val), [])
-      .filter(item => item.caption.startsWith(query));
-  const completions: Completions = [{ name: 'Properties', items }];
+            content: name + " " + item.name,
+            url: "Set " + desc,
+          },
+        ];
+      }
+    })
+    .reduce((acc, val) => acc.concat(val), [])
+    .filter((item) => item.caption.startsWith(query));
+  const completions: Completions = [{ name: "Properties", items }];
   return {
     type: actions.CONSOLE_SET_COMPLETIONS,
     completions,
     completionSource: original,
-  }
+  };
 };
 
 const completionNext = (): actions.CompletionNextAction => {
@@ -245,7 +272,19 @@ const completionPrev = (): actions.CompletionPrevAction => {
 };
 
 export {
-  hide, showCommand, showFind, showError, showInfo, hideCommand, setConsoleText, enterCommand, enterFind,
-  getCommandCompletions, getOpenCompletions, getTabCompletions, getPropertyCompletions,
-  completionNext, completionPrev,
+  hide,
+  showCommand,
+  showFind,
+  showError,
+  showInfo,
+  hideCommand,
+  setConsoleText,
+  enterCommand,
+  enterFind,
+  getCommandCompletions,
+  getOpenCompletions,
+  getTabCompletions,
+  getPropertyCompletions,
+  completionNext,
+  completionPrev,
 };
diff --git a/src/console/actions/index.ts b/src/console/actions/index.ts
index e292608..308a093 100644
--- a/src/console/actions/index.ts
+++ b/src/console/actions/index.ts
@@ -1,16 +1,16 @@
 import Completions from "../Completions";
 import CompletionType from "../../shared/CompletionType";
 
-export const CONSOLE_HIDE = 'console.hide';
-export const CONSOLE_SHOW_COMMAND = 'console.show.command';
-export const CONSOLE_SHOW_ERROR = 'console.show.error';
-export const CONSOLE_SHOW_INFO = 'console.show.info';
-export const CONSOLE_HIDE_COMMAND = 'console.hide.command';
-export const CONSOLE_SET_CONSOLE_TEXT = 'console.set.command';
-export const CONSOLE_SET_COMPLETIONS = 'console.set.completions';
-export const CONSOLE_COMPLETION_NEXT = 'console.completion.next';
-export const CONSOLE_COMPLETION_PREV = 'console.completion.prev';
-export const CONSOLE_SHOW_FIND = 'console.show.find';
+export const CONSOLE_HIDE = "console.hide";
+export const CONSOLE_SHOW_COMMAND = "console.show.command";
+export const CONSOLE_SHOW_ERROR = "console.show.error";
+export const CONSOLE_SHOW_INFO = "console.show.info";
+export const CONSOLE_HIDE_COMMAND = "console.hide.command";
+export const CONSOLE_SET_CONSOLE_TEXT = "console.set.command";
+export const CONSOLE_SET_COMPLETIONS = "console.set.completions";
+export const CONSOLE_COMPLETION_NEXT = "console.completion.next";
+export const CONSOLE_COMPLETION_PREV = "console.completion.prev";
+export const CONSOLE_SHOW_FIND = "console.show.find";
 
 export interface HideAction {
   type: typeof CONSOLE_HIDE;
@@ -60,7 +60,13 @@ export interface CompletionPrevAction {
 }
 
 export type ConsoleAction =
-  HideAction | ShowCommand | ShowFindAction | ShowErrorAction |
-  ShowInfoAction | HideCommandAction | SetConsoleTextAction |
-  SetCompletionsAction | CompletionNextAction | CompletionPrevAction;
-
+  | HideAction
+  | ShowCommand
+  | ShowFindAction
+  | ShowErrorAction
+  | ShowInfoAction
+  | HideCommandAction
+  | SetConsoleTextAction
+  | SetCompletionsAction
+  | CompletionNextAction
+  | CompletionPrevAction;
diff --git a/src/console/clients/CompletionClient.ts b/src/console/clients/CompletionClient.ts
index 56dc665..64119e8 100644
--- a/src/console/clients/CompletionClient.ts
+++ b/src/console/clients/CompletionClient.ts
@@ -1,84 +1,87 @@
 import * as messages from "../../shared/messages";
 import {
-  ConsoleGetCompletionTypesResponse, ConsoleGetPropertiesResponse,
+  ConsoleGetCompletionTypesResponse,
+  ConsoleGetPropertiesResponse,
   ConsoleRequestBookmarksResponse,
-  ConsoleRequestHistoryResponse, ConsoleRequestSearchEnginesResponse, ConsoleRequesttabsResponse
+  ConsoleRequestHistoryResponse,
+  ConsoleRequestSearchEnginesResponse,
+  ConsoleRequesttabsResponse,
 } from "../../shared/messages";
 import CompletionType from "../../shared/CompletionType";
 import TabFlag from "../../shared/TabFlag";
 
 export type SearchEngines = {
-  title: string
-}
+  title: string;
+};
 
 export type BookmarkItem = {
-  title: string
-  url: string
-}
+  title: string;
+  url: string;
+};
 
 export type HistoryItem = {
-  title: string
-  url: string
-}
+  title: string;
+  url: string;
+};
 
 export type TabItem = {
-  index: number
-  flag: TabFlag
-  title: string
-  url: string
-  faviconUrl?: string
-}
+  index: number;
+  flag: TabFlag;
+  title: string;
+  url: string;
+  faviconUrl?: string;
+};
 
 export type Property = {
-  name: string
-  type: 'string' | 'boolean' | 'number';
-}
+  name: string;
+  type: "string" | "boolean" | "number";
+};
 
 export default class CompletionClient {
   async getCompletionTypes(): Promise<CompletionType[]> {
-    const resp = await browser.runtime.sendMessage({
+    const resp = (await browser.runtime.sendMessage({
       type: messages.CONSOLE_GET_COMPLETION_TYPES,
-    }) as ConsoleGetCompletionTypesResponse;
+    })) as ConsoleGetCompletionTypesResponse;
     return resp;
   }
 
   async requestSearchEngines(query: string): Promise<SearchEngines[]> {
-    const resp = await browser.runtime.sendMessage({
+    const resp = (await browser.runtime.sendMessage({
       type: messages.CONSOLE_REQUEST_SEARCH_ENGINES_MESSAGE,
       query,
-    }) as ConsoleRequestSearchEnginesResponse;
+    })) as ConsoleRequestSearchEnginesResponse;
     return resp;
   }
 
   async requestBookmarks(query: string): Promise<BookmarkItem[]> {
-    const resp = await browser.runtime.sendMessage({
+    const resp = (await browser.runtime.sendMessage({
       type: messages.CONSOLE_REQUEST_BOOKMARKS,
       query,
-    }) as ConsoleRequestBookmarksResponse;
+    })) as ConsoleRequestBookmarksResponse;
     return resp;
   }
 
   async requestHistory(query: string): Promise<HistoryItem[]> {
-    const resp = await browser.runtime.sendMessage({
+    const resp = (await browser.runtime.sendMessage({
       type: messages.CONSOLE_REQUEST_HISTORY,
       query,
-    }) as ConsoleRequestHistoryResponse;
+    })) as ConsoleRequestHistoryResponse;
     return resp;
   }
 
   async requestTabs(query: string, excludePinned: boolean): Promise<TabItem[]> {
-    const resp = await browser.runtime.sendMessage({
+    const resp = (await browser.runtime.sendMessage({
       type: messages.CONSOLE_REQUEST_TABS,
       query,
       excludePinned,
-    }) as ConsoleRequesttabsResponse;
+    })) as ConsoleRequesttabsResponse;
     return resp;
   }
 
   async getProperties(): Promise<Property[]> {
-    const resp = await browser.runtime.sendMessage({
+    const resp = (await browser.runtime.sendMessage({
       type: messages.CONSOLE_GET_PROPERTIES,
-    }) as ConsoleGetPropertiesResponse;
+    })) as ConsoleGetPropertiesResponse;
     return resp;
   }
 }
diff --git a/src/console/commandline/CommandLineParser.ts b/src/console/commandline/CommandLineParser.ts
index a166f49..ffff375 100644
--- a/src/console/commandline/CommandLineParser.ts
+++ b/src/console/commandline/CommandLineParser.ts
@@ -2,9 +2,9 @@ import CommandParser from "./CommandParser";
 import { Command } from "../../shared/Command";
 
 export type CommandLine = {
-  readonly command: Command,
-  readonly args: string
-}
+  readonly command: Command;
+  readonly args: string;
+};
 
 export enum InputPhase {
   OnCommand,
@@ -17,11 +17,11 @@ export default class CommandLineParser {
   inputPhase(line: string): InputPhase {
     line = line.trimLeft();
     if (line.length == 0) {
-      return InputPhase.OnCommand
+      return InputPhase.OnCommand;
     }
     const command = line.split(/\s+/, 1)[0];
     if (line.length == command.length) {
-      return InputPhase.OnCommand
+      return InputPhase.OnCommand;
     }
     return InputPhase.OnArgs;
   }
@@ -33,6 +33,6 @@ export default class CommandLineParser {
     return {
       command: this.commandParser.parse(command),
       args: args,
-    }
+    };
   }
 }
diff --git a/src/console/commandline/CommandParser.ts b/src/console/commandline/CommandParser.ts
index 5228c77..7488cbc 100644
--- a/src/console/commandline/CommandParser.ts
+++ b/src/console/commandline/CommandParser.ts
@@ -9,43 +9,43 @@ export class UnknownCommandError extends Error {
 export default class CommandParser {
   parse(value: string): Command {
     switch (value) {
-    case 'o':
-    case 'open':
-      return Command.Open;
-    case 't':
-    case 'tabopen':
-      return Command.TabOpen;
-    case 'w':
-    case 'winopen':
-      return Command.WindowOpen;
-    case 'b':
-    case 'buffer':
-      return Command.Buffer;
-    case 'bd':
-    case 'bdel':
-    case 'bdelete':
-      return Command.BufferDelete;
-    case 'bd!':
-    case 'bdel!':
-    case 'bdelete!':
-      return Command.BufferDeleteForce;
-    case 'bdeletes':
-      return Command.BuffersDelete;
-    case 'bdeletes!':
-      return Command.BuffersDeleteForce;
-    case 'addbookmark':
-      return Command.AddBookmark;
-    case 'q':
-    case 'quit':
-      return Command.Quit;
-    case 'qa':
-    case 'quitall':
-      return Command.QuitAll;
-    case 'set':
-      return Command.Set;
-    case 'h':
-    case 'help':
-      return Command.Help;
+      case "o":
+      case "open":
+        return Command.Open;
+      case "t":
+      case "tabopen":
+        return Command.TabOpen;
+      case "w":
+      case "winopen":
+        return Command.WindowOpen;
+      case "b":
+      case "buffer":
+        return Command.Buffer;
+      case "bd":
+      case "bdel":
+      case "bdelete":
+        return Command.BufferDelete;
+      case "bd!":
+      case "bdel!":
+      case "bdelete!":
+        return Command.BufferDeleteForce;
+      case "bdeletes":
+        return Command.BuffersDelete;
+      case "bdeletes!":
+        return Command.BuffersDeleteForce;
+      case "addbookmark":
+        return Command.AddBookmark;
+      case "q":
+      case "quit":
+        return Command.Quit;
+      case "qa":
+      case "quitall":
+        return Command.QuitAll;
+      case "set":
+        return Command.Set;
+      case "h":
+      case "help":
+        return Command.Help;
     }
     throw new UnknownCommandError(value);
   }
diff --git a/src/console/components/Console.tsx b/src/console/components/Console.tsx
index 3fe5cee..d74040d 100644
--- a/src/console/components/Console.tsx
+++ b/src/console/components/Console.tsx
@@ -1,19 +1,21 @@
-import './console.scss';
-import { connect } from 'react-redux';
-import React from 'react';
-import Input from './console/Input';
-import Completion from './console/Completion';
-import Message from './console/Message';
-import * as consoleActions from '../../console/actions/console';
-import { State as AppState } from '../reducers';
-import CommandLineParser, { InputPhase } from "../commandline/CommandLineParser";
+import "./console.scss";
+import { connect } from "react-redux";
+import React from "react";
+import Input from "./console/Input";
+import Completion from "./console/Completion";
+import Message from "./console/Message";
+import * as consoleActions from "../../console/actions/console";
+import { State as AppState } from "../reducers";
+import CommandLineParser, {
+  InputPhase,
+} from "../commandline/CommandLineParser";
 import { Command } from "../../shared/Command";
 
 const COMPLETION_MAX_ITEMS = 33;
 
 type StateProps = ReturnType<typeof mapStateToProps>;
 interface DispatchProps {
-  dispatch: (action: any) => void,
+  dispatch: (action: any) => void;
 }
 type Props = StateProps & DispatchProps;
 
@@ -29,7 +31,7 @@ class Console extends React.Component<Props> {
   }
 
   onBlur() {
-    if (this.props.mode === 'command' || this.props.mode === 'find') {
+    if (this.props.mode === "command" || this.props.mode === "find") {
       return this.props.dispatch(consoleActions.hideCommand());
     }
   }
@@ -39,11 +41,12 @@ class Console extends React.Component<Props> {
     e.preventDefault();
 
     const value = (e.target as HTMLInputElement).value;
-    if (this.props.mode === 'command') {
+    if (this.props.mode === "command") {
       return this.props.dispatch(consoleActions.enterCommand(value));
-    } else if (this.props.mode === 'find') {
-      return this.props.dispatch(consoleActions.enterFind(
-        value === '' ? undefined : value));
+    } else if (this.props.mode === "find") {
+      return this.props.dispatch(
+        consoleActions.enterFind(value === "" ? undefined : value)
+      );
     }
   }
 
@@ -61,94 +64,95 @@ class Console extends React.Component<Props> {
 
   onKeyDown(e: React.KeyboardEvent<HTMLInputElement>) {
     switch (e.key) {
-    case 'Escape':
-      return this.props.dispatch(consoleActions.hideCommand());
-    case 'Enter':
-      return this.doEnter(e);
-    case 'Tab':
-      if (e.shiftKey) {
-        this.props.dispatch(consoleActions.completionPrev());
-      } else {
-        this.props.dispatch(consoleActions.completionNext());
-      }
-      e.stopPropagation();
-      e.preventDefault();
-      break;
-    case '[':
-      if (e.ctrlKey) {
-        e.preventDefault();
-        return this.props.dispatch(consoleActions.hideCommand());
-      }
-      break;
-    case 'c':
-      if (e.ctrlKey) {
-        e.preventDefault();
+      case "Escape":
         return this.props.dispatch(consoleActions.hideCommand());
-      }
-      break;
-    case 'm':
-      if (e.ctrlKey) {
+      case "Enter":
         return this.doEnter(e);
-      }
-      break;
-    case 'n':
-      if (e.ctrlKey) {
-        this.selectNext(e);
-      }
-      break;
-    case 'p':
-      if (e.ctrlKey) {
-        this.selectPrev(e);
-      }
-      break;
+      case "Tab":
+        if (e.shiftKey) {
+          this.props.dispatch(consoleActions.completionPrev());
+        } else {
+          this.props.dispatch(consoleActions.completionNext());
+        }
+        e.stopPropagation();
+        e.preventDefault();
+        break;
+      case "[":
+        if (e.ctrlKey) {
+          e.preventDefault();
+          return this.props.dispatch(consoleActions.hideCommand());
+        }
+        break;
+      case "c":
+        if (e.ctrlKey) {
+          e.preventDefault();
+          return this.props.dispatch(consoleActions.hideCommand());
+        }
+        break;
+      case "m":
+        if (e.ctrlKey) {
+          return this.doEnter(e);
+        }
+        break;
+      case "n":
+        if (e.ctrlKey) {
+          this.selectNext(e);
+        }
+        break;
+      case "p":
+        if (e.ctrlKey) {
+          this.selectPrev(e);
+        }
+        break;
     }
   }
 
   onChange(e: React.ChangeEvent<HTMLInputElement>) {
     const text = e.target.value;
     this.props.dispatch(consoleActions.setConsoleText(text));
-    if (this.props.mode !== 'command') {
-      return
+    if (this.props.mode !== "command") {
+      return;
     }
-    this.updateCompletions(text)
+    this.updateCompletions(text);
   }
 
-
   componentDidUpdate(prevProps: Props) {
-    if (prevProps.mode !== 'command' && this.props.mode === 'command') {
+    if (prevProps.mode !== "command" && this.props.mode === "command") {
       this.updateCompletions(this.props.consoleText);
       this.focus();
-    } else if (prevProps.mode !== 'find' && this.props.mode === 'find') {
+    } else if (prevProps.mode !== "find" && this.props.mode === "find") {
       this.focus();
     }
   }
 
   render() {
     switch (this.props.mode) {
-    case 'command':
-    case 'find':
-      return <div className='vimvixen-console-command-wrapper'>
-        <Completion
-          size={COMPLETION_MAX_ITEMS}
-          completions={this.props.completions}
-          select={this.props.select}
-        />
-        <Input
-          ref={this.input}
-          mode={this.props.mode}
-          onBlur={this.onBlur.bind(this)}
-          onKeyDown={this.onKeyDown.bind(this)}
-          onChange={this.onChange.bind(this)}
-          value={this.props.consoleText}
-        />
-      </div>;
-    case 'info':
-    case 'error':
-      return <Message mode={ this.props.mode } >
-        { this.props.messageText }
-      </Message>;
-    default:
-      return null;
+      case "command":
+      case "find":
+        return (
+          <div className="vimvixen-console-command-wrapper">
+            <Completion
+              size={COMPLETION_MAX_ITEMS}
+              completions={this.props.completions}
+              select={this.props.select}
+            />
+            <Input
+              ref={this.input}
+              mode={this.props.mode}
+              onBlur={this.onBlur.bind(this)}
+              onKeyDown={this.onKeyDown.bind(this)}
+              onChange={this.onChange.bind(this)}
+              value={this.props.consoleText}
+            />
+          </div>
+        );
+      case "info":
+      case "error":
+        return (
+          <Message mode={this.props.mode}>{this.props.messageText}</Message>
+        );
+      default:
+        return null;
     }
   }
 
@@ -166,25 +170,40 @@ class Console extends React.Component<Props> {
     } else {
       const cmd = this.commandLineParser.parse(text);
       switch (cmd.command) {
-      case Command.Open:
-      case Command.TabOpen:
-      case Command.WindowOpen:
-        this.props.dispatch(consoleActions.getOpenCompletions(this.props.completionTypes, text, cmd.command, cmd.args));
-        break;
-      case Command.Buffer:
-        this.props.dispatch(consoleActions.getTabCompletions(text, cmd.command, cmd.args, false));
-        break;
-      case Command.BufferDelete:
-      case Command.BuffersDelete:
-        this.props.dispatch(consoleActions.getTabCompletions(text, cmd.command, cmd.args, true));
-        break;
-      case Command.BufferDeleteForce:
-      case Command.BuffersDeleteForce:
-        this.props.dispatch(consoleActions.getTabCompletions(text, cmd.command, cmd.args, false));
-        break;
-      case Command.Set:
-        this.props.dispatch(consoleActions.getPropertyCompletions(text, cmd.command, cmd.args));
-        break;
+        case Command.Open:
+        case Command.TabOpen:
+        case Command.WindowOpen:
+          this.props.dispatch(
+            consoleActions.getOpenCompletions(
+              this.props.completionTypes,
+              text,
+              cmd.command,
+              cmd.args
+            )
+          );
+          break;
+        case Command.Buffer:
+          this.props.dispatch(
+            consoleActions.getTabCompletions(text, cmd.command, cmd.args, false)
+          );
+          break;
+        case Command.BufferDelete:
+        case Command.BuffersDelete:
+          this.props.dispatch(
+            consoleActions.getTabCompletions(text, cmd.command, cmd.args, true)
+          );
+          break;
+        case Command.BufferDeleteForce:
+        case Command.BuffersDeleteForce:
+          this.props.dispatch(
+            consoleActions.getTabCompletions(text, cmd.command, cmd.args, false)
+          );
+          break;
+        case Command.Set:
+          this.props.dispatch(
+            consoleActions.getPropertyCompletions(text, cmd.command, cmd.args)
+          );
+          break;
       }
     }
   }
@@ -192,6 +211,4 @@ class Console extends React.Component<Props> {
 
 const mapStateToProps = (state: AppState) => ({ ...state });
 
-export default connect(
-  mapStateToProps,
-)(Console);
+export default connect(mapStateToProps)(Console);
diff --git a/src/console/components/console/Completion.tsx b/src/console/components/console/Completion.tsx
index e2fa1de..9b4cf15 100644
--- a/src/console/components/console/Completion.tsx
+++ b/src/console/components/console/Completion.tsx
@@ -1,6 +1,6 @@
-import React from 'react';
-import CompletionItem from './CompletionItem';
-import CompletionTitle from './CompletionTitle';
+import React from "react";
+import CompletionItem from "./CompletionItem";
+import CompletionTitle from "./CompletionTitle";
 
 interface Item {
   icon?: string;
@@ -52,8 +52,10 @@ class Completion extends React.Component<Props, State> {
     if (nextProps.select < 0) {
       viewOffset = 0;
     } else if (prevState.select < nextProps.select) {
-      viewOffset = Math.max(prevState.viewOffset,
-        viewSelect - nextProps.size + 1);
+      viewOffset = Math.max(
+        prevState.viewOffset,
+        viewSelect - nextProps.size + 1
+      );
     } else if (prevState.select > nextProps.select) {
       viewOffset = Math.min(prevState.viewOffset, viewSelect);
     }
@@ -65,18 +67,17 @@ class Completion extends React.Component<Props, State> {
     let index = 0;
 
     for (const group of this.props.completions) {
-      eles.push(<CompletionTitle
-        key={`group-${index}`}
-        title={ group.name }
-      />);
+      eles.push(<CompletionTitle key={`group-${index}`} title={group.name} />);
       for (const item of group.items) {
-        eles.push(<CompletionItem
-          key={`item-${index}`}
-          icon={item.icon}
-          caption={item.caption}
-          url={item.url}
-          highlight={index === this.props.select}
-        / >);
+        eles.push(
+          <CompletionItem
+            key={`item-${index}`}
+            icon={item.icon}
+            caption={item.caption}
+            url={item.url}
+            highlight={index === this.props.select}
+          />
+        );
         ++index;
       }
     }
@@ -84,11 +85,7 @@ class Completion extends React.Component<Props, State> {
     const viewOffset = this.state.viewOffset;
     eles = eles.slice(viewOffset, viewOffset + this.props.size);
 
-    return (
-      <ul className='vimvixen-console-completion'>
-        { eles }
-      </ul>
-    );
+    return <ul className="vimvixen-console-completion">{eles}</ul>;
   }
 }
 
diff --git a/src/console/components/console/CompletionItem.tsx b/src/console/components/console/CompletionItem.tsx
index 1cbf3de..657f360 100644
--- a/src/console/components/console/CompletionItem.tsx
+++ b/src/console/components/console/CompletionItem.tsx
@@ -1,5 +1,5 @@
-import React from 'react';
-import PropTypes from 'prop-types';
+import React from "react";
+import PropTypes from "prop-types";
 
 interface Props {
   highlight: boolean;
@@ -9,21 +9,21 @@ interface Props {
 }
 
 const CompletionItem = (props: Props) => {
-  let className = 'vimvixen-console-completion-item';
+  let className = "vimvixen-console-completion-item";
   if (props.highlight) {
-    className += ' vimvixen-completion-selected';
+    className += " vimvixen-completion-selected";
   }
-  return <li
-    className={className}
-    style={{ backgroundImage: 'url(' + props.icon + ')' }}
-  >
-    <span
-      className='vimvixen-console-completion-item-caption'
-    >{props.caption}</span>
-    <span
-      className='vimvixen-console-completion-item-url'
-    >{props.url}</span>
-  </li>;
+  return (
+    <li
+      className={className}
+      style={{ backgroundImage: "url(" + props.icon + ")" }}
+    >
+      <span className="vimvixen-console-completion-item-caption">
+        {props.caption}
+      </span>
+      <span className="vimvixen-console-completion-item-url">{props.url}</span>
+    </li>
+  );
 };
 
 CompletionItem.propTypes = {
diff --git a/src/console/components/console/CompletionTitle.tsx b/src/console/components/console/CompletionTitle.tsx
index 2543619..7257006 100644
--- a/src/console/components/console/CompletionTitle.tsx
+++ b/src/console/components/console/CompletionTitle.tsx
@@ -1,13 +1,11 @@
-import React from 'react';
+import React from "react";
 
 interface Props {
   title: string;
 }
 
 const CompletionTitle = (props: Props) => {
-  return <li className='vimvixen-console-completion-title'>
-    {props.title}
-  </li>;
+  return <li className="vimvixen-console-completion-title">{props.title}</li>;
 };
 
 export default CompletionTitle;
diff --git a/src/console/components/console/Input.tsx b/src/console/components/console/Input.tsx
index 54ea251..e412a0c 100644
--- a/src/console/components/console/Input.tsx
+++ b/src/console/components/console/Input.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React from "react";
 
 interface Props {
   mode: string;
@@ -24,20 +24,18 @@ class Input extends React.Component<Props> {
   }
 
   render() {
-    let prompt = '';
-    if (this.props.mode === 'command') {
-      prompt = ':';
-    } else if (this.props.mode === 'find') {
-      prompt = '/';
+    let prompt = "";
+    if (this.props.mode === "command") {
+      prompt = ":";
+    } else if (this.props.mode === "find") {
+      prompt = "/";
     }
 
     return (
-      <div className='vimvixen-console-command'>
-        <i className='vimvixen-console-command-prompt'>
-          { prompt }
-        </i>
+      <div className="vimvixen-console-command">
+        <i className="vimvixen-console-command-prompt">{prompt}</i>
         <input
-          className='vimvixen-console-command-input'
+          className="vimvixen-console-command-input"
           ref={this.input}
           onBlur={this.props.onBlur}
           onKeyDown={this.props.onKeyDown}
diff --git a/src/console/components/console/Message.tsx b/src/console/components/console/Message.tsx
index 9fa2788..fd1c9d7 100644
--- a/src/console/components/console/Message.tsx
+++ b/src/console/components/console/Message.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React from "react";
 
 interface Props {
   mode: string;
@@ -7,18 +7,18 @@ interface Props {
 
 const Message = (props: Props) => {
   switch (props.mode) {
-  case 'error':
-    return (
-      <p className='vimvixen-console-message vimvixen-console-error'>
-        { props.children }
-      </p>
-    );
-  case 'info':
-    return (
-      <p className='vimvixen-console-message vimvixen-console-info'>
-        { props.children }
-      </p>
-    );
+    case "error":
+      return (
+        <p className="vimvixen-console-message vimvixen-console-error">
+          {props.children}
+        </p>
+      );
+    case "info":
+      return (
+        <p className="vimvixen-console-message vimvixen-console-info">
+          {props.children}
+        </p>
+      );
   }
   return null;
 };
diff --git a/src/console/index.tsx b/src/console/index.tsx
index 7bee746..e1a9dd3 100644
--- a/src/console/index.tsx
+++ b/src/console/index.tsx
@@ -1,43 +1,41 @@
-import * as messages from '../shared/messages';
-import reducers from './reducers';
-import { createStore, applyMiddleware } from 'redux';
-import promise from 'redux-promise';
-import * as consoleActions from './actions/console';
-import { Provider } from 'react-redux';
-import Console from './components/Console';
-import React from 'react';
-import ReactDOM from 'react-dom';
+import * as messages from "../shared/messages";
+import reducers from "./reducers";
+import { createStore, applyMiddleware } from "redux";
+import promise from "redux-promise";
+import * as consoleActions from "./actions/console";
+import { Provider } from "react-redux";
+import Console from "./components/Console";
+import React from "react";
+import ReactDOM from "react-dom";
 
-const store = createStore(
-  reducers,
-  applyMiddleware(promise),
-);
+const store = createStore(reducers, applyMiddleware(promise));
 
-window.addEventListener('load', () => {
-  const wrapper = document.getElementById('vimvixen-console');
+window.addEventListener("load", () => {
+  const wrapper = document.getElementById("vimvixen-console");
   ReactDOM.render(
-    <Provider store={store} >
+    <Provider store={store}>
       <Console></Console>
     </Provider>,
-    wrapper);
+    wrapper
+  );
 });
 
 const onMessage = async (message: any): Promise<any> => {
   const msg = messages.valueOf(message);
   switch (msg.type) {
-  case messages.CONSOLE_SHOW_COMMAND:
-    return store.dispatch(await consoleActions.showCommand(msg.command));
-  case messages.CONSOLE_SHOW_FIND:
-    return store.dispatch(consoleActions.showFind());
-  case messages.CONSOLE_SHOW_ERROR:
-    return store.dispatch(consoleActions.showError(msg.text));
-  case messages.CONSOLE_SHOW_INFO:
-    return store.dispatch(consoleActions.showInfo(msg.text));
-  case messages.CONSOLE_HIDE:
-    return store.dispatch(consoleActions.hide());
+    case messages.CONSOLE_SHOW_COMMAND:
+      return store.dispatch(await consoleActions.showCommand(msg.command));
+    case messages.CONSOLE_SHOW_FIND:
+      return store.dispatch(consoleActions.showFind());
+    case messages.CONSOLE_SHOW_ERROR:
+      return store.dispatch(consoleActions.showError(msg.text));
+    case messages.CONSOLE_SHOW_INFO:
+      return store.dispatch(consoleActions.showInfo(msg.text));
+    case messages.CONSOLE_HIDE:
+      return store.dispatch(consoleActions.hide());
   }
 };
 
 browser.runtime.onMessage.addListener(onMessage);
-const port = browser.runtime.connect(undefined, { name: 'vimvixen-console' });
+const port = browser.runtime.connect(undefined, { name: "vimvixen-console" });
 port.onMessage.addListener(onMessage);
diff --git a/src/console/reducers/index.ts b/src/console/reducers/index.ts
index f1508bb..f2ffed7 100644
--- a/src/console/reducers/index.ts
+++ b/src/console/reducers/index.ts
@@ -1,4 +1,4 @@
-import * as actions from '../actions';
+import * as actions from "../actions";
 import Completions from "../Completions";
 import CompletionType from "../../shared/CompletionType";
 
@@ -14,11 +14,11 @@ export interface State {
 }
 
 const defaultState = {
-  mode: '',
-  messageText: '',
-  consoleText: '',
+  mode: "",
+  messageText: "",
+  consoleText: "",
   completionTypes: [],
-  completionSource: '',
+  completionSource: "",
   completions: [],
   select: -1,
   viewIndex: 0,
@@ -33,7 +33,7 @@ const nextSelection = (state: State): number => {
   }
 
   const length = state.completions
-    .map(g => g.items.length)
+    .map((g) => g.items.length)
     .reduce((x, y) => x + y);
   if (state.select + 1 < length) {
     return state.select + 1;
@@ -43,7 +43,7 @@ const nextSelection = (state: State): number => {
 
 const prevSelection = (state: State): number => {
   const length = state.completions
-    .map(g => g.items.length)
+    .map((g) => g.items.length)
     .reduce((x, y) => x + y);
   if (state.select < 0) {
     return length - 1;
@@ -55,66 +55,74 @@ const nextConsoleText = (completions: any[], select: number, defaults: any) => {
   if (select < 0) {
     return defaults;
   }
-  const items = completions.map(g => g.items).reduce((g1, g2) => g1.concat(g2));
+  const items = completions
+    .map((g) => g.items)
+    .reduce((g1, g2) => g1.concat(g2));
   return items[select].content;
 };
 
 // eslint-disable-next-line max-lines-per-function
 export default function reducer(
   state: State = defaultState,
-  action: actions.ConsoleAction,
+  action: actions.ConsoleAction
 ): State {
   switch (action.type) {
-  case actions.CONSOLE_HIDE:
-    return { ...state,
-      mode: '', };
-  case actions.CONSOLE_SHOW_COMMAND:
-    return { ...state,
-      mode: 'command',
-      consoleText: action.text,
-      completionTypes: action.completionTypes,
-      completions: []};
-  case actions.CONSOLE_SHOW_FIND:
-    return { ...state,
-      mode: 'find',
-      consoleText: '',
-      completions: []};
-  case actions.CONSOLE_SHOW_ERROR:
-    return { ...state,
-      mode: 'error',
-      messageText: action.text, };
-  case actions.CONSOLE_SHOW_INFO:
-    return { ...state,
-      mode: 'info',
-      messageText: action.text, };
-  case actions.CONSOLE_HIDE_COMMAND:
-    return {
-      ...state,
-      mode: state.mode === 'command' || state.mode === 'find' ? '' : state.mode,
-    };
-  case actions.CONSOLE_SET_CONSOLE_TEXT:
-    return { ...state,
-      consoleText: action.consoleText, };
-  case actions.CONSOLE_SET_COMPLETIONS:
-    return { ...state,
-      completions: action.completions,
-      completionSource: action.completionSource,
-      select: -1 };
-  case actions.CONSOLE_COMPLETION_NEXT: {
-    const select = nextSelection(state);
-    return { ...state,
-      select: select,
-      consoleText: nextConsoleText(
-        state.completions, select, state.completionSource) };
-  }
-  case actions.CONSOLE_COMPLETION_PREV: {
-    const select = prevSelection(state);
-    return { ...state,
-      select: select,
-      consoleText: nextConsoleText(
-        state.completions, select, state.completionSource) };
-  }
-  default:
-    return state;
+    case actions.CONSOLE_HIDE:
+      return { ...state, mode: "" };
+    case actions.CONSOLE_SHOW_COMMAND:
+      return {
+        ...state,
+        mode: "command",
+        consoleText: action.text,
+        completionTypes: action.completionTypes,
+        completions: [],
+      };
+    case actions.CONSOLE_SHOW_FIND:
+      return { ...state, mode: "find", consoleText: "", completions: [] };
+    case actions.CONSOLE_SHOW_ERROR:
+      return { ...state, mode: "error", messageText: action.text };
+    case actions.CONSOLE_SHOW_INFO:
+      return { ...state, mode: "info", messageText: action.text };
+    case actions.CONSOLE_HIDE_COMMAND:
+      return {
+        ...state,
+        mode:
+          state.mode === "command" || state.mode === "find" ? "" : state.mode,
+      };
+    case actions.CONSOLE_SET_CONSOLE_TEXT:
+      return { ...state, consoleText: action.consoleText };
+    case actions.CONSOLE_SET_COMPLETIONS:
+      return {
+        ...state,
+        completions: action.completions,
+        completionSource: action.completionSource,
+        select: -1,
+      };
+    case actions.CONSOLE_COMPLETION_NEXT: {
+      const select = nextSelection(state);
+      return {
+        ...state,
+        select: select,
+        consoleText: nextConsoleText(
+          state.completions,
+          select,
+          state.completionSource
+        ),
+      };
+    }
+    case actions.CONSOLE_COMPLETION_PREV: {
+      const select = prevSelection(state);
+      return {
+        ...state,
+        select: select,
+        consoleText: nextConsoleText(
+          state.completions,
+          select,
+          state.completionSource
+        ),
+      };
+    }
+    default:
+      return state;
   }
 }