7 files changed, 83 insertions, 29 deletions
diff --git a/src/content/components/common/follow.js b/src/content/components/common/follow.js
index 15b2a98..7717154 100644
--- a/src/content/components/common/follow.js
+++ b/src/content/components/common/follow.js
@@ -47,7 +47,7 @@ export default class Follow {
     }
     this.win.parent.postMessage(JSON.stringify({
       type: messages.FOLLOW_KEY_PRESS,
-      key,
+      key: key.key,
     }), '*');
     return true;
   }
diff --git a/src/content/components/common/hint.css b/src/content/components/common/hint.css
index 119dd21..1f2ab20 100644
--- a/src/content/components/common/hint.css
+++ b/src/content/components/common/hint.css
@@ -4,7 +4,7 @@
   font-weight: bold;
   position: absolute;
   text-transform: uppercase;
-  z-index: 100000;
+  z-index: 2147483647;
   font-size: 12px;
   color: black;
 }
diff --git a/src/content/components/common/input.js b/src/content/components/common/input.js
index 8b1d35d..22b0a91 100644
--- a/src/content/components/common/input.js
+++ b/src/content/components/common/input.js
@@ -1,22 +1,5 @@
 import * as dom from 'shared/utils/dom';
-
-const modifierdKeyName = (name) => {
-  if (name.length === 1) {
-    return name.toUpperCase();
-  } else if (name === 'Escape') {
-    return 'Esc';
-  }
-  return name;
-};
-
-const mapKey = (e) => {
-  if (e.ctrlKey) {
-    return '<C-' + modifierdKeyName(e.key) + '>';
-  } else if (e.shiftKey && e.key.length !== 1) {
-    return '<S-' + modifierdKeyName(e.key) + '>';
-  }
-  return e.key;
-};
+import * as keys from 'shared/utils/keys';
 
 export default class InputComponent {
   constructor(target) {
@@ -64,7 +47,7 @@ export default class InputComponent {
       return;
     }
 
-    let key = mapKey(e);
+    let key = keys.fromKeyboardEvent(e);
 
     for (let listener of this.onKeyListeners) {
       let stop = listener(key);
diff --git a/src/content/components/common/keymapper.js b/src/content/components/common/keymapper.js
index 1da3c0d..fb8fabe 100644
--- a/src/content/components/common/keymapper.js
+++ b/src/content/components/common/keymapper.js
@@ -1,6 +1,19 @@
 import * as inputActions from 'content/actions/input';
 import * as operationActions from 'content/actions/operation';
 import operations from 'shared/operations';
+import * as keyUtils from 'shared/utils/keys';
+
+const mapStartsWith = (mapping, keys) => {
+  if (mapping.length < keys.length) {
+    return false;
+  }
+  for (let i = 0; i < keys.length; ++i) {
+    if (!keyUtils.equals(mapping[i], keys[i])) {
+      return false;
+    }
+  }
+  return true;
+};
 
 export default class KeymapperComponent {
   constructor(store) {
@@ -12,16 +25,16 @@ export default class KeymapperComponent {
 
     let state = this.store.getState();
     let input = state.input;
-    let keymaps = state.setting.keymaps;
+    let keymaps = new Map(state.setting.keymaps);
 
-    let matched = Object.keys(keymaps).filter((keyStr) => {
-      return keyStr.startsWith(input.keys);
+    let matched = Array.from(keymaps.keys()).filter((mapping) => {
+      return mapStartsWith(mapping, input.keys);
     });
     if (!state.addon.enabled) {
       // available keymaps are only ADDON_ENABLE and ADDON_TOGGLE_ENABLED if
       // the addon disabled
       matched = matched.filter((keys) => {
-        let type = keymaps[keys].type;
+        let type = keymaps.get(keys).type;
         return type === operations.ADDON_ENABLE ||
           type === operations.ADDON_TOGGLE_ENABLED;
       });
@@ -30,10 +43,10 @@ export default class KeymapperComponent {
       this.store.dispatch(inputActions.clearKeys());
       return false;
     } else if (matched.length > 1 ||
-      matched.length === 1 && input.keys !== matched[0]) {
+      matched.length === 1 && input.keys.length < matched[0].length) {
       return true;
     }
-    let operation = keymaps[matched];
+    let operation = keymaps.get(matched[0]);
     this.store.dispatch(operationActions.exec(operation));
     this.store.dispatch(inputActions.clearKeys());
     return true;
diff --git a/src/content/components/top-content/find.js b/src/content/components/top-content/find.js
new file mode 100644
index 0000000..bccf040
--- /dev/null
+++ b/src/content/components/top-content/find.js
@@ -0,0 +1,54 @@
+import * as findActions from 'content/actions/find';
+import messages from 'shared/messages';
+import * as consoleFrames from '../../console-frames';
+
+export default class FindComponent {
+  constructor(win, store) {
+    this.win = win;
+    this.store = store;
+
+    messages.onMessage(this.onMessage.bind(this));
+  }
+
+  onMessage(message) {
+    switch (message.type) {
+    case messages.CONSOLE_ENTER_FIND:
+      return this.start(message.text);
+    case messages.FIND_NEXT:
+      return this.next();
+    case messages.FIND_PREV:
+      return this.prev();
+    }
+  }
+
+  start(text) {
+    let state = this.store.getState().find;
+
+    if (text.length === 0) {
+      return this.store.dispatch(findActions.next(state.keyword, true));
+    }
+    return this.store.dispatch(findActions.next(text, true));
+  }
+
+  next() {
+    let state = this.store.getState().find;
+
+    if (!state.found) {
+      return consoleFrames.postError(
+        window.document,
+        'Pattern not found: ' + state.keyword);
+    }
+    return this.store.dispatch(findActions.next(state.keyword, false));
+  }
+
+  prev() {
+    let state = this.store.getState().find;
+
+    if (!state.found) {
+      return consoleFrames.postError(
+        window.document,
+        'Pattern not found: ' + state.keyword);
+    }
+    return this.store.dispatch(findActions.prev(state.keyword, false));
+  }
+}
diff --git a/src/content/components/top-content/follow-controller.js b/src/content/components/top-content/follow-controller.js
index 38869e6..d373177 100644
--- a/src/content/components/top-content/follow-controller.js
+++ b/src/content/components/top-content/follow-controller.js
@@ -76,7 +76,7 @@ export default class FollowController {
       this.activate();
       this.store.dispatch(followControllerActions.disable());
       break;
-    case 'Escape':
+    case 'Esc':
       this.store.dispatch(followControllerActions.disable());
       break;
     case 'Backspace':
diff --git a/src/content/components/top-content/index.js b/src/content/components/top-content/index.js
index f6afbfa..cf21ec4 100644
--- a/src/content/components/top-content/index.js
+++ b/src/content/components/top-content/index.js
@@ -1,5 +1,6 @@
 import CommonComponent from '../common';
 import FollowController from './follow-controller';
+import FindComponent from './find';
 import * as consoleFrames from '../../console-frames';
 import * as addonActions from '../../actions/addon';
 import messages from 'shared/messages';
@@ -14,11 +15,14 @@ export default class TopContent {
 
     new CommonComponent(win, store); // eslint-disable-line no-new
     new FollowController(win, store); // eslint-disable-line no-new
+    new FindComponent(win, store); // eslint-disable-line no-new
 
     // TODO make component
     consoleFrames.initialize(this.win.document);
 
     messages.onMessage(this.onMessage.bind(this));
+
+    this.store.subscribe(() => this.update());
   }
 
   update() {
@@ -45,7 +49,7 @@ export default class TopContent {
 
   onMessage(message) {
     switch (message.type) {
-    case messages.CONSOLE_HIDE_COMMAND:
+    case messages.CONSOLE_UNFOCUS:
       this.win.focus();
       consoleFrames.blur(window.document);
       return Promise.resolve();