support multi-frame following

src/console/index.js

@@ -36,6 +36,6 @@ store.subscribe(() => {
 });
 
 browser.runtime.onMessage.addListener(onMessage);
-window.addEventListener('message', (message) => {
+window.addEventListener('message', (event) => {
-  onMessage(JSON.parse(message.data));
+  onMessage(JSON.parse(event.data));
 }, false);

src/content/actions/operation.js

@@ -3,7 +3,6 @@ import messages from 'shared/messages';
 import * as scrolls from 'content/scrolls';
 import * as navigates from 'content/navigates';
 import * as urls from 'content/urls';
-import * as followActions from 'content/actions/follow';
 import * as consoleFrames from 'content/console-frames';
 
 const exec = (operation) => {
@@ -23,7 +22,10 @@ const exec = (operation) => {
   case operations.SCROLL_END:
     return scrolls.scrollEnd(window);
   case operations.FOLLOW_START:
-    return followActions.enable(operation.newTab);
+    return window.top.postMessage(JSON.stringify({
+      type: messages.FOLLOW_START,
+      newTab: operation.newTab
+    }), '*');
   case operations.NAVIGATE_HISTORY_PREV:
     return navigates.historyPrev(window);
   case operations.NAVIGATE_HISTORY_NEXT:

src/content/components/common/follow.js

@@ -1,9 +1,6 @@
-import * as followActions from 'content/actions/follow';
 import messages from 'shared/messages';
 import Hint from './hint';
-import HintKeyProducer from 'content/hint-key-producer';
 
-const DEFAULT_HINT_CHARSET = 'abcdefghijklmnopqrstuvwxyz';
 const TARGET_SELECTOR = [
   'a', 'button', 'input', 'textarea',
   '[contenteditable=true]', '[contenteditable=""]'
@@ -21,77 +18,31 @@ const inWindow = (win, element) => {
   );
 };
 
-export default class FollowComponent {
+export default class Follow {
   constructor(win, store) {
     this.win = win;
     this.store = store;
-    this.hintElements = {};
+    this.newTab = false;
-    this.state = {};
+    this.hints = {};
+    this.targets = [];
   }
 
   update() {
-    let prevState = this.state;
-    this.state = this.store.getState().follow;
-    if (!prevState.enabled && this.state.enabled) {
-      this.create();
-    } else if (prevState.enabled && !this.state.enabled) {
-      this.remove();
-    } else if (prevState.keys !== this.state.keys) {
-      this.updateHints();
-    }
   }
 
   key(key) {
-    if (!this.state.enabled) {
+    if (Object.keys(this.hints).length === 0) {
       return false;
     }
-
+    this.win.parent.postMessage(JSON.stringify({
-    switch (key) {
+      type: messages.FOLLOW_KEY_PRESS,
-    case 'Enter':
+      key,
-      this.activate(this.hintElements[this.state.keys].target);
+    }), '*');
-      return;
-    case 'Escape':
-      this.store.dispatch(followActions.disable());
-      return;
-    case 'Backspace':
-    case 'Delete':
-      this.store.dispatch(followActions.backspace());
-      break;
-    default:
-      if (DEFAULT_HINT_CHARSET.includes(key)) {
-        this.store.dispatch(followActions.keyPress(key));
-      }
-      break;
-    }
     return true;
   }
 
-  updateHints() {
-    let keys = this.state.keys;
-    let shown = Object.keys(this.hintElements).filter((key) => {
-      return key.startsWith(keys);
-    });
-    let hidden = Object.keys(this.hintElements).filter((key) => {
-      return !key.startsWith(keys);
-    });
-    if (shown.length === 0) {
-      this.remove();
-      return;
-    } else if (shown.length === 1) {
-      this.activate(this.hintElements[keys].target);
-      this.store.dispatch(followActions.disable());
-    }
-
-    shown.forEach((key) => {
-      this.hintElements[key].show();
-    });
-    hidden.forEach((key) => {
-      this.hintElements[key].hide();
-    });
-  }
-
   openLink(element) {
-    if (!this.state.newTab) {
+    if (!this.newTab) {
       element.click();
       return;
     }
@@ -105,14 +56,56 @@ export default class FollowComponent {
     return browser.runtime.sendMessage({
       type: messages.OPEN_URL,
       url: element.href,
-      newTab: this.state.newTab,
+      newTab: this.newTab,
     });
   }
 
-  activate(element) {
+  countHints(sender) {
+    this.targets = Follow.getTargetElements(this.win);
+    sender.postMessage(JSON.stringify({
+      type: messages.FOLLOW_RESPONSE_COUNT_TARGETS,
+      count: this.targets.length,
+    }), '*');
+  }
+
+  createHints(keysArray, newTab) {
+    if (keysArray.length !== this.targets.length) {
+      throw new Error('illegal hint count');
+    }
+
+    this.newTab = newTab;
+    this.hints = {};
+    for (let i = 0; i < keysArray.length; ++i) {
+      let keys = keysArray[i];
+      let hint = new Hint(this.targets[i], keys);
+      this.hints[keys] = hint;
+    }
+  }
+
+  showHints(keys) {
+    Object.keys(this.hints).filter(key => key.startsWith(keys))
+      .forEach(key => this.hints[key].show());
+    Object.keys(this.hints).filter(key => !key.startsWith(keys))
+      .forEach(key => this.hints[key].hide());
+  }
+
+  removeHints() {
+    Object.keys(this.hints).forEach((key) => {
+      this.hints[key].remove();
+    });
+    this.hints = {};
+    this.targets = [];
+  }
+
+  activateHints(keys) {
+    let hint = this.hints[keys];
+    if (!hint) {
+      return;
+    }
+    let element = hint.target;
     switch (element.tagName.toLowerCase()) {
     case 'a':
-      return this.openLink(element, this.state.newTab);
+      return this.openLink(element, this.newTab);
     case 'input':
       switch (element.type) {
       case 'file':
@@ -137,23 +130,19 @@ export default class FollowComponent {
     }
   }
 
-  create() {
+  onMessage(message, sender) {
-    let elements = FollowComponent.getTargetElements(this.win);
+    switch (message.type) {
-    let producer = new HintKeyProducer(DEFAULT_HINT_CHARSET);
+    case messages.FOLLOW_REQUEST_COUNT_TARGETS:
-    let hintElements = {};
+      return this.countHints(sender);
-    Array.prototype.forEach.call(elements, (ele) => {
+    case messages.FOLLOW_CREATE_HINTS:
-      let keys = producer.produce();
+      return this.createHints(message.keysArray, message.newTab);
-      let hint = new Hint(ele, keys);
+    case messages.FOLLOW_SHOW_HINTS:
-      hintElements[keys] = hint;
+      return this.showHints(message.keys);
-    });
+    case messages.FOLLOW_ACTIVATE:
-    this.hintElements = hintElements;
+      return this.activateHints(message.keys);
+    case messages.FOLLOW_REMOVE_HINTS:
+      return this.removeHints(message.keys);
     }
-
-  remove() {
-    let hintElements = this.hintElements;
-    Object.keys(this.hintElements).forEach((key) => {
-      hintElements[key].remove();
-    });
   }
 
   static getTargetElements(win) {

src/content/components/common/index.js

@@ -10,10 +10,8 @@ export default class Common {
     const input = new InputComponent(win.document.body, store);
     const keymapper = new KeymapperComponent(store);
 
-    input.onKey((key, ctrl) => {
+    input.onKey((key, ctrl) => follow.key(key, ctrl));
-      follow.key(key, ctrl);
+    input.onKey((key, ctrl) => keymapper.key(key, ctrl));
-      keymapper.key(key, ctrl);
-    });
 
     this.store = store;
     this.children = [
@@ -29,11 +27,12 @@ export default class Common {
     this.children.forEach(c => c.update());
   }
 
-  onMessage(message) {
+  onMessage(message, sender) {
     switch (message) {
     case messages.SETTINGS_CHANGED:
       this.reloadSettings();
     }
+    this.children.forEach(c => c.onMessage(message, sender));
   }
 
   reloadSettings() {

src/content/components/common/input.js

@@ -69,4 +69,7 @@ export default class InputComponent {
           e.target.getAttribute('contenteditable').toLowerCase() === 'true' ||
           e.target.getAttribute('contenteditable').toLowerCase() === '');
   }
+
+  onMessage() {
+  }
 }

src/content/components/common/keymapper.js

@@ -28,4 +28,7 @@ export default class KeymapperComponent {
     this.store.dispatch(inputActions.clearKeys());
     return true;
   }
+
+  onMessage() {
+  }
 }

src/content/components/frame-content.js

@@ -10,7 +10,7 @@ export default class FrameContent {
     this.children.forEach(c => c.update());
   }
 
-  onMessage(message) {
+  onMessage(message, sender) {
-    this.children.forEach(c => c.onMessage(message));
+    this.children.forEach(c => c.onMessage(message, sender));
   }
 }

src/content/components/top-content/follow-controller.js

@@ -0,0 +1,115 @@
+import * as followActions from 'content/actions/follow';
+import messages from 'shared/messages';
+import HintKeyProducer from 'content/hint-key-producer';
+
+const DEFAULT_HINT_CHARSET = 'abcdefghijklmnopqrstuvwxyz';
+
+const broadcastMessage = (win, message) => {
+  let json = JSON.stringify(message);
+  let frames = [window.self].concat(Array.from(window.frames));
+  frames.forEach(frame => frame.postMessage(json, '*'));
+};
+
+export default class FollowController {
+  constructor(win, store) {
+    this.win = win;
+    this.store = store;
+    this.state = {};
+    this.keys = [];
+    this.producer = null;
+  }
+
+  onMessage(message, sender) {
+    switch (message.type) {
+    case messages.FOLLOW_START:
+      return this.store.dispatch(followActions.enable(message.newTab));
+    case messages.FOLLOW_RESPONSE_COUNT_TARGETS:
+      return this.create(message.count, sender);
+    case messages.FOLLOW_KEY_PRESS:
+      return this.keyPress(message.key);
+    }
+  }
+
+  update() {
+    let prevState = this.state;
+    this.state = this.store.getState().follow;
+
+    if (!prevState.enabled && this.state.enabled) {
+      this.count();
+    } else if (prevState.enabled && !this.state.enabled) {
+      this.remove();
+    } else if (prevState.keys !== this.state.keys) {
+      this.updateHints();
+    }
+  }
+
+  updateHints() {
+    let shown = this.keys.filter(key => key.startsWith(this.state.keys));
+    if (shown.length === 1) {
+      this.activate();
+      this.store.dispatch(followActions.disable());
+    }
+
+    broadcastMessage(this.win, {
+      type: messages.FOLLOW_SHOW_HINTS,
+      keys: this.state.keys,
+    });
+  }
+
+  activate() {
+    broadcastMessage(this.win, {
+      type: messages.FOLLOW_ACTIVATE,
+      keys: this.state.keys,
+    });
+  }
+
+  keyPress(key) {
+    switch (key) {
+    case 'Enter':
+      this.activate();
+      this.store.dispatch(followActions.disable());
+      break;
+    case 'Escape':
+      this.store.dispatch(followActions.disable());
+      break;
+    case 'Backspace':
+    case 'Delete':
+      this.store.dispatch(followActions.backspace());
+      break;
+    default:
+      if (DEFAULT_HINT_CHARSET.includes(key)) {
+        this.store.dispatch(followActions.keyPress(key));
+      }
+      break;
+    }
+    return true;
+  }
+
+  count() {
+    this.producer = new HintKeyProducer(DEFAULT_HINT_CHARSET);
+    broadcastMessage(this.win, {
+      type: messages.FOLLOW_REQUEST_COUNT_TARGETS,
+    });
+  }
+
+  create(count, sender) {
+    let produced = [];
+    for (let i = 0; i < count; ++i) {
+      produced.push(this.producer.produce());
+    }
+    this.keys = this.keys.concat(produced);
+
+    sender.postMessage(JSON.stringify({
+      type: messages.FOLLOW_CREATE_HINTS,
+      keysArray: produced,
+      newTab: this.state.newTab,
+    }), '*');
+  }
+
+  remove() {
+    this.keys = [];
+    broadcastMessage(this.win, {
+      type: messages.FOLLOW_REMOVE_HINTS,
+    });
+  }
+}

src/content/components/top-content/index.js

@@ -1,12 +1,16 @@
-import CommonComponent from './common';
+import CommonComponent from '../common';
-import * as consoleFrames from '../console-frames';
+import FollowController from './follow-controller';
+import * as consoleFrames from '../../console-frames';
 import messages from 'shared/messages';
 
 export default class TopContent {
 
   constructor(win, store) {
     this.win = win;
-    this.children = [new CommonComponent(win, store)];
+    this.children = [
+      new CommonComponent(win, store),
+      new FollowController(win, store),
+    ];
 
     // TODO make component
     consoleFrames.initialize(window.document);
@@ -16,13 +20,13 @@ export default class TopContent {
     this.children.forEach(c => c.update());
   }
 
-  onMessage(message) {
+  onMessage(message, sender) {
     switch (message.type) {
     case messages.CONSOLE_HIDE_COMMAND:
       this.win.focus();
       consoleFrames.blur(window.document);
       return Promise.resolve();
     }
-    this.children.forEach(c => c.onMessage(message));
+    this.children.forEach(c => c.onMessage(message, sender));
   }
 }

src/content/index.js

@@ -10,5 +10,20 @@ let rootComponent = window.self === window.top
   ? new TopContentComponent(window, store)
   : new FrameContentComponent(window, store);
 
+store.subscribe(() => {
+  rootComponent.update();
+});
+
 browser.runtime.onMessage.addListener(msg => rootComponent.onMessage(msg));
 rootComponent.update();
+
+window.addEventListener('message', (event) => {
+  let message = null;
+  try {
+    message = JSON.parse(event.data);
+  } catch (e) {
+    // ignore unexpected message
+    return;
+  }
+  rootComponent.onMessage(message, event.source);
+});

src/shared/messages.js

@@ -11,6 +11,15 @@ export default {
   CONSOLE_SHOW_INFO: 'console.show.info',
   CONSOLE_HIDE_COMMAND: 'console.hide.command',
 
+  FOLLOW_START: 'follow.start',
+  FOLLOW_REQUEST_COUNT_TARGETS: 'follow.request.count.targets',
+  FOLLOW_RESPONSE_COUNT_TARGETS: 'follow.response.count.targets',
+  FOLLOW_CREATE_HINTS: 'follow.create.hints',
+  FOLLOW_SHOW_HINTS: 'follow.update.hints',
+  FOLLOW_REMOVE_HINTS: 'follow.remove.hints',
+  FOLLOW_ACTIVATE: 'follow.activate',
+  FOLLOW_KEY_PRESS: 'follow.key.press',
+
   OPEN_URL: 'open.url',
 
   SETTINGS_RELOAD: 'settings.reload',