use key-queue for input

src/background/index.js

@@ -1,28 +1,46 @@
+import * as actions from '../shared/actions';
 import * as tabs from './tabs';
+import KeyQueue from './key-queue';
 
-const KEY_MAP = {
-  'tabs.prev': KeyboardEvent.DOM_VK_H,
-  'tabs.next': KeyboardEvent.DOM_VK_L,
-  'scroll.up': KeyboardEvent.DOM_VK_K,
-  'scroll.down': KeyboardEvent.DOM_VK_J
-};
+const queue = new KeyQueue();
 
-browser.runtime.onMessage.addListener((request, sender, sendResponse) => {
-  let response = null;
+const keyDownHandle = (request) => {
+  return queue.push({
+    code: request.code,
+    shift: request.shift,
+    ctrl: request.ctrl,
+    alt: request.alt,
+    meta: request.meta
+  })
+}
 
-  switch (request.code) {
-  case KEY_MAP['tabs.prev']:
-    tabs.selectPrevTab(sender.tab.index);
-    break;
-  case KEY_MAP['tabs.next']:
-    tabs.selectNextTab(sender.tab.index);
+const doBackgroundAction = (sender, action) => {
+  switch(action[0]) {
+  case actions.TABS_PREV:
+    tabs.selectPrevTab(sender.tab.index, actions[1] || 1);
     break;
-  case KEY_MAP['scroll.up']:
-    response = 'scroll.up'
+  case actions.TABS_NEXT:
+    tabs.selectNextTab(sender.tab.index, actions[1] || 1);
     break;
-  case KEY_MAP['scroll.down']:
-    response = 'scroll.down'
+  }
+}
+
+browser.runtime.onMessage.addListener((request, sender, sendResponse) => {
+  let action = null;
+
+  switch (request.type) {
+  case 'event.keydown':
+    action = keyDownHandle(request);
     break;
   }
-  sendResponse(response);
+
+  if (action == null) {
+    return;
+  }
+
+  if (actions.isBackgroundAction(action[0])) {
+    doBackgroundAction(sender, action);
+  } else if (actions.isContentAction(action[0])) {
+    sendResponse(action);
+  }
 });

src/background/key-queue.js

@@ -0,0 +1,28 @@
+import * as keys from './keys';
+import * as actions from '../shared/actions';
+
+const DEFAULT_KEYMAP = [
+  { keys: [{ code: KeyboardEvent.DOM_VK_K }], action: [ actions.SCROLL_UP, 1 ]},
+  { keys: [{ code: KeyboardEvent.DOM_VK_J }], action: [ actions.SCROLL_DOWN, 1 ]},
+  { keys: [{ code: KeyboardEvent.DOM_VK_H }], action: [ actions.TABS_PREV, 1 ]},
+  { keys: [{ code: KeyboardEvent.DOM_VK_L }], action: [ actions.TABS_NEXT, 1 ]},
+]
+
+export default class KeyQueue {
+
+  constructor(keymap) {
+    this.data = [];
+    this.keymap = keymap;
+  }
+
+  push(key) {
+    this.data.push(key);
+    for (let map of DEFAULT_KEYMAP) {
+      if (keys.keysEquals(map.keys, this.data)) {
+        this.data = [];
+        return map.action
+      }
+    }
+    return null;
+  }
+}

src/background/keys.js

@@ -0,0 +1,21 @@
+const keyEquals = (key1, key2) => {
+  return (key1.code === key2.code) &&
+    ((key1.shift || false) === (key2.shift || false)) &&
+    ((key1.ctrl || false) === (key2.ctrl || false)) &&
+    ((key1.alt || false) === (key2.alt || false)) &&
+    ((key1.meta || false) === (key2.meta || false));
+};
+
+const keysEquals = (keys1, keys2) => {
+  if (keys1.length !== keys2.length) {
+    return false;
+  }
+  for (let i = 0; i < keys1.length; ++i) {
+    if (!keyEquals(keys1[i], keys2[i])) {
+      return false;
+    }
+  }
+  return true;
+}
+
+export { keyEquals, keysEquals };

src/background/tabs.js

@@ -1,20 +1,20 @@
-const selectPrevTab = (current) => {
+const selectPrevTab = (current, count) => {
   chrome.tabs.query({ currentWindow: true }, (tabs) => {
     if (tabs.length < 2) {
       return;
     }
-    let select = (current - 1) % tabs.length
+    let select = (current - count) % tabs.length
     let id = tabs[select].id;
     chrome.tabs.update(id, { active: true })
   });
 };
 
-const selectNextTab = (current) => {
+const selectNextTab = (current, count) => {
   chrome.tabs.query({ currentWindow: true }, (tabs) => {
     if (tabs.length < 2) {
       return;
     }
-    let select = (current + 1 + tabs.length) % tabs.length
+    let select = (current + count + tabs.length) % tabs.length
     let id = tabs[select].id;
     chrome.tabs.update(id, { active: true })
   });

src/content/index.js

@@ -1,28 +1,33 @@
 import * as scrolls from './scrolls';
 
-const invokeEvent = (type) => {
-  switch (type) {
+const invokeEvent = (action) => {
+  if (typeof action === 'undefined' || action === null) {
+    return;
+  }
+
+  switch (action[0]) {
   case 'scroll.up':
-    scrolls.scrollUp(window);
+    scrolls.scrollUp(window, action[1] || 1);
     break;
   case 'scroll.down':
-    scrolls.scrollDown(window);
+    scrolls.scrollDown(window, action[1] || 1);
     break;
   }
 }
 
 window.addEventListener("keydown", (e) => {
-  browser.runtime.sendMessage({
+  let request = {
+    type: 'event.keydown',
     code: e.keyCode,
     shift: e.shift,
     alt: e.alt,
     meta: e.meta,
     ctrl: e.ctrl,
-  }).then((response) => {
-    if (response) {
-      invokeEvent(response);
-    }
-  }, (err) => {
-    console.log(`Vim Vixen: ${err}`);
-  });
+  }
+
+  browser.runtime.sendMessage(request)
+    .then(invokeEvent,
+      (err) => {
+        console.log(`Vim Vixen: ${err}`);
+      });
 });

src/content/scrolls.js

@@ -1,14 +1,14 @@
 const SCROLL_DELTA = 48;
 
-const scrollUp = (page) => {
+const scrollUp = (page, count) => {
   let x = page.scrollX;
-  var y = page.scrollY - SCROLL_DELTA;
+  var y = page.scrollY - SCROLL_DELTA * count;
   page.scrollTo(x, y);
 };
 
-const scrollDown = (page) => {
+const scrollDown = (page, count) => {
   let x = page.scrollX;
-  var y = page.scrollY + SCROLL_DELTA;
+  var y = page.scrollY + SCROLL_DELTA * count;
   page.scrollTo(x, y);
 };
 

src/shared/actions.js

@@ -0,0 +1,22 @@
+export const TABS_PREV = 'tabs.prev';
+export const TABS_NEXT = 'tabs.next';
+export const SCROLL_UP = 'scroll.up';
+export const SCROLL_DOWN = 'scroll.down';
+
+const BACKGROUND_ACTION_SET = new Set([
+  TABS_PREV,
+  TABS_NEXT
+]);
+
+const CONTENT_ACTION_SET = new Set([
+  SCROLL_UP,
+  SCROLL_DOWN
+]);
+
+export const isBackgroundAction = (action) => {
+  return BACKGROUND_ACTION_SET.has(action);
+};
+
+export const isContentAction = (action) => {
+  return CONTENT_ACTION_SET.has(action);
+};