From 890f84c34382253d6c178a5a09149832d145c60f Mon Sep 17 00:00:00 2001
From: Shin'ya Ueoka <ueokande@i-beam.org>
Date: Sat, 14 Oct 2017 06:40:49 +0900
Subject: move hint component

---
 test/content/components/hint.html    |  1 +
 test/content/components/hint.test.js | 58 ++++++++++++++++++++++++++++++++++++
 test/content/hint.html               |  1 -
 test/content/hint.test.js            | 58 ------------------------------------
 4 files changed, 59 insertions(+), 59 deletions(-)
 create mode 100644 test/content/components/hint.html
 create mode 100644 test/content/components/hint.test.js
 delete mode 100644 test/content/hint.html
 delete mode 100644 test/content/hint.test.js

(limited to 'test')

diff --git a/test/content/components/hint.html b/test/content/components/hint.html
new file mode 100644
index 0000000..b50c5fe
--- /dev/null
+++ b/test/content/components/hint.html
@@ -0,0 +1 @@
+<a id='test-link' href='javascript:window.vimvixenTest="hello"' >link</a>
diff --git a/test/content/components/hint.test.js b/test/content/components/hint.test.js
new file mode 100644
index 0000000..f98b79b
--- /dev/null
+++ b/test/content/components/hint.test.js
@@ -0,0 +1,58 @@
+import { expect } from "chai";
+import Hint from 'content/components/hint';
+
+describe('Hint class', () => {
+  beforeEach(() => {
+    document.body.innerHTML = __html__['test/content/components/hint.html'];
+  });
+
+  describe('#constructor', () => {
+    it('creates a hint element with tag name', () => {
+      let link = document.getElementById('test-link');
+      let hint = new Hint(link, 'abc');
+      expect(hint.element.textContent.trim()).to.be.equal('abc');
+    });
+
+    it('throws an exception when non-element given', () => {
+      expect(() => new Hint(window, 'abc')).to.throw(TypeError);
+    });
+  });
+
+  describe('#show', () => {
+    it('shows an element', () => {
+      let link = document.getElementById('test-link');
+      let hint = new Hint(link, 'abc');
+      hint.hide();
+      hint.show();
+
+      expect(hint.element.style.display).to.not.equal('none');
+    });
+  });
+
+  describe('#hide', () => {
+    it('hides an element', () => {
+      let link = document.getElementById('test-link');
+      let hint = new Hint(link, 'abc');
+      hint.hide();
+
+      expect(hint.element.style.display).to.equal('none');
+    });
+  });
+
+  describe('#remove', () => {
+    it('removes an element', () => {
+      let link = document.getElementById('test-link');
+      let hint = new Hint(link, 'abc');
+
+      expect(hint.element.parentElement).to.not.be.null;
+      hint.remove();
+      expect(hint.element.parentElement).to.be.null;
+    });
+  });
+
+  describe('#activate', () => {
+    // TODO test activations
+  });
+});
+
+
diff --git a/test/content/hint.html b/test/content/hint.html
deleted file mode 100644
index b50c5fe..0000000
--- a/test/content/hint.html
+++ /dev/null
@@ -1 +0,0 @@
-<a id='test-link' href='javascript:window.vimvixenTest="hello"' >link</a>
diff --git a/test/content/hint.test.js b/test/content/hint.test.js
deleted file mode 100644
index 1547971..0000000
--- a/test/content/hint.test.js
+++ /dev/null
@@ -1,58 +0,0 @@
-import { expect } from "chai";
-import Hint from 'content/hint';
-
-describe('Hint class', () => {
-  beforeEach(() => {
-    document.body.innerHTML = __html__['test/content/hint.html'];
-  });
-
-  describe('#constructor', () => {
-    it('creates a hint element with tag name', () => {
-      let link = document.getElementById('test-link');
-      let hint = new Hint(link, 'abc');
-      expect(hint.element.textContent.trim()).to.be.equal('abc');
-    });
-
-    it('throws an exception when non-element given', () => {
-      expect(() => new Hint(window, 'abc')).to.throw(TypeError);
-    });
-  });
-
-  describe('#show', () => {
-    it('shows an element', () => {
-      let link = document.getElementById('test-link');
-      let hint = new Hint(link, 'abc');
-      hint.hide();
-      hint.show();
-
-      expect(hint.element.style.display).to.not.equal('none');
-    });
-  });
-
-  describe('#hide', () => {
-    it('hides an element', () => {
-      let link = document.getElementById('test-link');
-      let hint = new Hint(link, 'abc');
-      hint.hide();
-
-      expect(hint.element.style.display).to.equal('none');
-    });
-  });
-
-  describe('#remove', () => {
-    it('removes an element', () => {
-      let link = document.getElementById('test-link');
-      let hint = new Hint(link, 'abc');
-
-      expect(hint.element.parentElement).to.not.be.null;
-      hint.remove();
-      expect(hint.element.parentElement).to.be.null;
-    });
-  });
-
-  describe('#activate', () => {
-    // TODO test activations
-  });
-});
-
-
-- 
cgit v1.2.3


From bebf8e23275156d39decbc974bcc05fa1d977d26 Mon Sep 17 00:00:00 2001
From: Shin'ya Ueoka <ueokande@i-beam.org>
Date: Sat, 14 Oct 2017 06:46:31 +0900
Subject: get hints from window

---
 src/content/components/follow.js       | 22 +++++++++++-----------
 src/content/index.js                   |  2 +-
 test/content/components/follow.test.js |  2 +-
 3 files changed, 13 insertions(+), 13 deletions(-)

(limited to 'test')

diff --git a/src/content/components/follow.js b/src/content/components/follow.js
index 119a493..3307893 100644
--- a/src/content/components/follow.js
+++ b/src/content/components/follow.js
@@ -9,20 +9,21 @@ const TARGET_SELECTOR = [
   '[contenteditable=true]', '[contenteditable=""]'
 ].join(',');
 
-const inWindow = (window, element) => {
+const inWindow = (win, element) => {
   let {
     top, left, bottom, right
   } = element.getBoundingClientRect();
+  let doc = win.doc;
   return (
     top >= 0 && left >= 0 &&
-    bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
-    right <= (window.innerWidth || document.documentElement.clientWidth)
+    bottom <= (win.innerHeight || doc.documentElement.clientHeight) &&
+    right <= (win.innerWidth || doc.documentElement.clientWidth)
   );
 };
 
 export default class FollowComponent {
-  constructor(wrapper, store) {
-    this.wrapper = wrapper;
+  constructor(win, store) {
+    this.win = win;
     this.store = store;
     this.hintElements = {};
     this.state = {};
@@ -141,8 +142,7 @@ export default class FollowComponent {
   }
 
   create() {
-    let doc = this.wrapper.ownerDocument;
-    let elements = FollowComponent.getTargetElements(doc);
+    let elements = FollowComponent.getTargetElements(this.win);
     let producer = new HintKeyProducer(DEFAULT_HINT_CHARSET);
     let hintElements = {};
     Array.prototype.forEach.call(elements, (ele) => {
@@ -160,15 +160,15 @@ export default class FollowComponent {
     });
   }
 
-  static getTargetElements(doc) {
-    let all = doc.querySelectorAll(TARGET_SELECTOR);
+  static getTargetElements(win) {
+    let all = win.document.querySelectorAll(TARGET_SELECTOR);
     let filtered = Array.prototype.filter.call(all, (element) => {
-      let style = window.getComputedStyle(element);
+      let style = win.getComputedStyle(element);
       return style.display !== 'none' &&
         style.visibility !== 'hidden' &&
         element.type !== 'hidden' &&
         element.offsetHeight > 0 &&
-        inWindow(window, element);
+        inWindow(win, element);
     });
     return filtered;
   }
diff --git a/src/content/index.js b/src/content/index.js
index 64d86bb..65be89f 100644
--- a/src/content/index.js
+++ b/src/content/index.js
@@ -9,7 +9,7 @@ import reducers from 'content/reducers';
 import messages from 'shared/messages';
 
 const store = createStore(reducers);
-const followComponent = new FollowComponent(window.document.body, store);
+const followComponent = new FollowComponent(window, store);
 const contentInputComponent =
   new ContentInputComponent(window.document.body, store);
 const keymapperComponent = new KeymapperComponent(store);
diff --git a/test/content/components/follow.test.js b/test/content/components/follow.test.js
index 5c3e1d5..c8ae58b 100644
--- a/test/content/components/follow.test.js
+++ b/test/content/components/follow.test.js
@@ -8,7 +8,7 @@ describe('FollowComponent', () => {
     });
 
     it('returns visible links', () => {
-      let targets = FollowComponent.getTargetElements(window.document);
+      let targets = FollowComponent.getTargetElements(window);
       expect(targets).to.have.lengthOf(3);
 
       let ids = Array.prototype.map.call(targets, (e) => e.id);
-- 
cgit v1.2.3


From 4c9d0433a6ac851e72d50d6fb0451baa9d35fd35 Mon Sep 17 00:00:00 2001
From: Shin'ya Ueoka <ueokande@i-beam.org>
Date: Sun, 15 Oct 2017 09:02:09 +0900
Subject: make top-content component and frame-content component

---
 src/content/components/common/follow.js       | 171 ++++++++++++++++++++++++++
 src/content/components/common/hint.css        |  10 ++
 src/content/components/common/hint.js         |  36 ++++++
 src/content/components/common/index.js        |  46 +++++++
 src/content/components/common/input.js        |  72 +++++++++++
 src/content/components/common/keymapper.js    |  31 +++++
 src/content/components/content-input.js       |  72 -----------
 src/content/components/follow.js              | 171 --------------------------
 src/content/components/frame-content.js       |  16 +++
 src/content/components/hint.css               |  10 --
 src/content/components/hint.js                |  36 ------
 src/content/components/keymapper.js           |  31 -----
 src/content/components/top-content.js         |  28 +++++
 src/content/index.js                          |  78 ++----------
 test/content/components/common/follow.html    |  12 ++
 test/content/components/common/follow.test.js |  18 +++
 test/content/components/common/hint.html      |   1 +
 test/content/components/common/hint.test.js   |  58 +++++++++
 test/content/components/follow.html           |  12 --
 test/content/components/follow.test.js        |  18 ---
 test/content/components/hint.html             |   1 -
 test/content/components/hint.test.js          |  58 ---------
 22 files changed, 506 insertions(+), 480 deletions(-)
 create mode 100644 src/content/components/common/follow.js
 create mode 100644 src/content/components/common/hint.css
 create mode 100644 src/content/components/common/hint.js
 create mode 100644 src/content/components/common/index.js
 create mode 100644 src/content/components/common/input.js
 create mode 100644 src/content/components/common/keymapper.js
 delete mode 100644 src/content/components/content-input.js
 delete mode 100644 src/content/components/follow.js
 create mode 100644 src/content/components/frame-content.js
 delete mode 100644 src/content/components/hint.css
 delete mode 100644 src/content/components/hint.js
 delete mode 100644 src/content/components/keymapper.js
 create mode 100644 src/content/components/top-content.js
 create mode 100644 test/content/components/common/follow.html
 create mode 100644 test/content/components/common/follow.test.js
 create mode 100644 test/content/components/common/hint.html
 create mode 100644 test/content/components/common/hint.test.js
 delete mode 100644 test/content/components/follow.html
 delete mode 100644 test/content/components/follow.test.js
 delete mode 100644 test/content/components/hint.html
 delete mode 100644 test/content/components/hint.test.js

(limited to 'test')

diff --git a/src/content/components/common/follow.js b/src/content/components/common/follow.js
new file mode 100644
index 0000000..3f28cc2
--- /dev/null
+++ b/src/content/components/common/follow.js
@@ -0,0 +1,171 @@
+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=""]'
+].join(',');
+
+const inWindow = (win, element) => {
+  let {
+    top, left, bottom, right
+  } = element.getBoundingClientRect();
+  let doc = win.doc;
+  return (
+    top >= 0 && left >= 0 &&
+    bottom <= (win.innerHeight || doc.documentElement.clientHeight) &&
+    right <= (win.innerWidth || doc.documentElement.clientWidth)
+  );
+};
+
+export default class FollowComponent {
+  constructor(win, store) {
+    this.win = win;
+    this.store = store;
+    this.hintElements = {};
+    this.state = {};
+  }
+
+  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) {
+      return false;
+    }
+
+    switch (key) {
+    case 'Enter':
+      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) {
+      element.click();
+      return;
+    }
+
+    let href = element.getAttribute('href');
+
+    // eslint-disable-next-line no-script-url
+    if (!href || href === '#' || href.toLowerCase().startsWith('javascript:')) {
+      return;
+    }
+    return browser.runtime.sendMessage({
+      type: messages.OPEN_URL,
+      url: element.href,
+      newTab: this.state.newTab,
+    });
+  }
+
+  activate(element) {
+    switch (element.tagName.toLowerCase()) {
+    case 'a':
+      return this.openLink(element, this.state.newTab);
+    case 'input':
+      switch (element.type) {
+      case 'file':
+      case 'checkbox':
+      case 'radio':
+      case 'submit':
+      case 'reset':
+      case 'button':
+      case 'image':
+      case 'color':
+        return element.click();
+      default:
+        return element.focus();
+      }
+    case 'textarea':
+      return element.focus();
+    case 'button':
+      return element.click();
+    default:
+      // it may contenteditable
+      return element.focus();
+    }
+  }
+
+  create() {
+    let elements = FollowComponent.getTargetElements(this.win);
+    let producer = new HintKeyProducer(DEFAULT_HINT_CHARSET);
+    let hintElements = {};
+    Array.prototype.forEach.call(elements, (ele) => {
+      let keys = producer.produce();
+      let hint = new Hint(ele, keys);
+      hintElements[keys] = hint;
+    });
+    this.hintElements = hintElements;
+  }
+
+  remove() {
+    let hintElements = this.hintElements;
+    Object.keys(this.hintElements).forEach((key) => {
+      hintElements[key].remove();
+    });
+  }
+
+  static getTargetElements(win) {
+    let all = win.document.querySelectorAll(TARGET_SELECTOR);
+    let filtered = Array.prototype.filter.call(all, (element) => {
+      let style = win.getComputedStyle(element);
+      return style.display !== 'none' &&
+        style.visibility !== 'hidden' &&
+        element.type !== 'hidden' &&
+        element.offsetHeight > 0 &&
+        inWindow(win, element);
+    });
+    return filtered;
+  }
+}
diff --git a/src/content/components/common/hint.css b/src/content/components/common/hint.css
new file mode 100644
index 0000000..119dd21
--- /dev/null
+++ b/src/content/components/common/hint.css
@@ -0,0 +1,10 @@
+.vimvixen-hint {
+  background-color: yellow;
+  border: 1px solid gold;
+  font-weight: bold;
+  position: absolute;
+  text-transform: uppercase;
+  z-index: 100000;
+  font-size: 12px;
+  color: black;
+}
diff --git a/src/content/components/common/hint.js b/src/content/components/common/hint.js
new file mode 100644
index 0000000..cc46fd6
--- /dev/null
+++ b/src/content/components/common/hint.js
@@ -0,0 +1,36 @@
+import './hint.css';
+
+export default class Hint {
+  constructor(target, tag) {
+    if (!(document.body instanceof HTMLElement)) {
+      throw new TypeError('target is not an HTMLElement');
+    }
+
+    this.target = target;
+
+    let doc = target.ownerDocument;
+    let { top, left } = target.getBoundingClientRect();
+    let { scrollX, scrollY } = window;
+
+    this.element = doc.createElement('span');
+    this.element.className = 'vimvixen-hint';
+    this.element.textContent = tag;
+    this.element.style.left = left + scrollX + 'px';
+    this.element.style.top = top + scrollY + 'px';
+
+    this.show();
+    doc.body.append(this.element);
+  }
+
+  show() {
+    this.element.style.display = 'inline';
+  }
+
+  hide() {
+    this.element.style.display = 'none';
+  }
+
+  remove() {
+    this.element.remove();
+  }
+}
diff --git a/src/content/components/common/index.js b/src/content/components/common/index.js
new file mode 100644
index 0000000..7673134
--- /dev/null
+++ b/src/content/components/common/index.js
@@ -0,0 +1,46 @@
+import InputComponent from './input';
+import KeymapperComponent from './keymapper';
+import FollowComponent from './follow';
+import * as inputActions from 'content/actions/input';
+import messages from 'shared/messages';
+
+export default class Common {
+  constructor(win, store) {
+    const follow = new FollowComponent(win, store);
+    const input = new InputComponent(win.document.body, store);
+    const keymapper = new KeymapperComponent(store);
+
+    input.onKey((key, ctrl) => {
+      follow.key(key, ctrl);
+      keymapper.key(key, ctrl);
+    });
+
+    this.store = store;
+    this.children = [
+      follow,
+      input,
+      keymapper,
+    ];
+
+    this.reloadSettings();
+  }
+
+  update() {
+    this.children.forEach(c => c.update());
+  }
+
+  onMessage(message) {
+    switch (message) {
+    case messages.SETTINGS_CHANGED:
+      this.reloadSettings();
+    }
+  }
+
+  reloadSettings() {
+    browser.runtime.sendMessage({
+      type: messages.SETTINGS_QUERY,
+    }).then((settings) => {
+      this.store.dispatch(inputActions.setKeymaps(settings.keymaps));
+    });
+  }
+}
diff --git a/src/content/components/common/input.js b/src/content/components/common/input.js
new file mode 100644
index 0000000..df09894
--- /dev/null
+++ b/src/content/components/common/input.js
@@ -0,0 +1,72 @@
+export default class InputComponent {
+  constructor(target) {
+    this.pressed = {};
+    this.onKeyListeners = [];
+
+    target.addEventListener('keypress', this.onKeyPress.bind(this));
+    target.addEventListener('keydown', this.onKeyDown.bind(this));
+    target.addEventListener('keyup', this.onKeyUp.bind(this));
+  }
+
+  update() {
+  }
+
+  onKey(cb) {
+    this.onKeyListeners.push(cb);
+  }
+
+  onKeyPress(e) {
+    if (this.pressed[e.key] && this.pressed[e.key] !== 'keypress') {
+      return;
+    }
+    this.pressed[e.key] = 'keypress';
+    this.capture(e);
+  }
+
+  onKeyDown(e) {
+    if (this.pressed[e.key] && this.pressed[e.key] !== 'keydown') {
+      return;
+    }
+    this.pressed[e.key] = 'keydown';
+    this.capture(e);
+  }
+
+  onKeyUp(e) {
+    delete this.pressed[e.key];
+  }
+
+  capture(e) {
+    if (this.fromInput(e)) {
+      if (e.key === 'Escape' && e.target.blur) {
+        e.target.blur();
+      }
+      return;
+    }
+    if (['Shift', 'Control', 'Alt', 'OS'].includes(e.key)) {
+      // pressing only meta key is ignored
+      return;
+    }
+
+    let stop = false;
+    for (let listener of this.onKeyListeners) {
+      stop = stop || listener(e.key, e.ctrlKey);
+      if (stop) {
+        break;
+      }
+    }
+    if (stop) {
+      e.preventDefault();
+      e.stopPropagation();
+    }
+  }
+
+  fromInput(e) {
+    return e.target instanceof HTMLInputElement ||
+      e.target instanceof HTMLTextAreaElement ||
+      e.target instanceof HTMLSelectElement ||
+      e.target instanceof HTMLElement &&
+      e.target.hasAttribute('contenteditable') && (
+          e.target.getAttribute('contenteditable').toLowerCase() === 'true' ||
+          e.target.getAttribute('contenteditable').toLowerCase() === '');
+  }
+}
diff --git a/src/content/components/common/keymapper.js b/src/content/components/common/keymapper.js
new file mode 100644
index 0000000..655c3f2
--- /dev/null
+++ b/src/content/components/common/keymapper.js
@@ -0,0 +1,31 @@
+import * as inputActions from 'content/actions/input';
+import * as operationActions from 'content/actions/operation';
+
+export default class KeymapperComponent {
+  constructor(store) {
+    this.store = store;
+  }
+
+  update() {
+  }
+
+  key(key, ctrl) {
+    this.store.dispatch(inputActions.keyPress(key, ctrl));
+
+    let input = this.store.getState().input;
+    let matched = Object.keys(input.keymaps).filter((keyStr) => {
+      return keyStr.startsWith(input.keys);
+    });
+    if (matched.length === 0) {
+      this.store.dispatch(inputActions.clearKeys());
+      return false;
+    } else if (matched.length > 1 ||
+      matched.length === 1 && input.keys !== matched[0]) {
+      return true;
+    }
+    let operation = input.keymaps[matched];
+    this.store.dispatch(operationActions.exec(operation));
+    this.store.dispatch(inputActions.clearKeys());
+    return true;
+  }
+}
diff --git a/src/content/components/content-input.js b/src/content/components/content-input.js
deleted file mode 100644
index 3e70bbb..0000000
--- a/src/content/components/content-input.js
+++ /dev/null
@@ -1,72 +0,0 @@
-export default class ContentInputComponent {
-  constructor(target) {
-    this.pressed = {};
-    this.onKeyListeners = [];
-
-    target.addEventListener('keypress', this.onKeyPress.bind(this));
-    target.addEventListener('keydown', this.onKeyDown.bind(this));
-    target.addEventListener('keyup', this.onKeyUp.bind(this));
-  }
-
-  update() {
-  }
-
-  onKey(cb) {
-    this.onKeyListeners.push(cb);
-  }
-
-  onKeyPress(e) {
-    if (this.pressed[e.key] && this.pressed[e.key] !== 'keypress') {
-      return;
-    }
-    this.pressed[e.key] = 'keypress';
-    this.capture(e);
-  }
-
-  onKeyDown(e) {
-    if (this.pressed[e.key] && this.pressed[e.key] !== 'keydown') {
-      return;
-    }
-    this.pressed[e.key] = 'keydown';
-    this.capture(e);
-  }
-
-  onKeyUp(e) {
-    delete this.pressed[e.key];
-  }
-
-  capture(e) {
-    if (this.fromInput(e)) {
-      if (e.key === 'Escape' && e.target.blur) {
-        e.target.blur();
-      }
-      return;
-    }
-    if (['Shift', 'Control', 'Alt', 'OS'].includes(e.key)) {
-      // pressing only meta key is ignored
-      return;
-    }
-
-    let stop = false;
-    for (let listener of this.onKeyListeners) {
-      stop = stop || listener(e.key, e.ctrlKey);
-      if (stop) {
-        break;
-      }
-    }
-    if (stop) {
-      e.preventDefault();
-      e.stopPropagation();
-    }
-  }
-
-  fromInput(e) {
-    return e.target instanceof HTMLInputElement ||
-      e.target instanceof HTMLTextAreaElement ||
-      e.target instanceof HTMLSelectElement ||
-      e.target instanceof HTMLElement &&
-      e.target.hasAttribute('contenteditable') && (
-          e.target.getAttribute('contenteditable').toLowerCase() === 'true' ||
-          e.target.getAttribute('contenteditable').toLowerCase() === '');
-  }
-}
diff --git a/src/content/components/follow.js b/src/content/components/follow.js
deleted file mode 100644
index 3f28cc2..0000000
--- a/src/content/components/follow.js
+++ /dev/null
@@ -1,171 +0,0 @@
-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=""]'
-].join(',');
-
-const inWindow = (win, element) => {
-  let {
-    top, left, bottom, right
-  } = element.getBoundingClientRect();
-  let doc = win.doc;
-  return (
-    top >= 0 && left >= 0 &&
-    bottom <= (win.innerHeight || doc.documentElement.clientHeight) &&
-    right <= (win.innerWidth || doc.documentElement.clientWidth)
-  );
-};
-
-export default class FollowComponent {
-  constructor(win, store) {
-    this.win = win;
-    this.store = store;
-    this.hintElements = {};
-    this.state = {};
-  }
-
-  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) {
-      return false;
-    }
-
-    switch (key) {
-    case 'Enter':
-      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) {
-      element.click();
-      return;
-    }
-
-    let href = element.getAttribute('href');
-
-    // eslint-disable-next-line no-script-url
-    if (!href || href === '#' || href.toLowerCase().startsWith('javascript:')) {
-      return;
-    }
-    return browser.runtime.sendMessage({
-      type: messages.OPEN_URL,
-      url: element.href,
-      newTab: this.state.newTab,
-    });
-  }
-
-  activate(element) {
-    switch (element.tagName.toLowerCase()) {
-    case 'a':
-      return this.openLink(element, this.state.newTab);
-    case 'input':
-      switch (element.type) {
-      case 'file':
-      case 'checkbox':
-      case 'radio':
-      case 'submit':
-      case 'reset':
-      case 'button':
-      case 'image':
-      case 'color':
-        return element.click();
-      default:
-        return element.focus();
-      }
-    case 'textarea':
-      return element.focus();
-    case 'button':
-      return element.click();
-    default:
-      // it may contenteditable
-      return element.focus();
-    }
-  }
-
-  create() {
-    let elements = FollowComponent.getTargetElements(this.win);
-    let producer = new HintKeyProducer(DEFAULT_HINT_CHARSET);
-    let hintElements = {};
-    Array.prototype.forEach.call(elements, (ele) => {
-      let keys = producer.produce();
-      let hint = new Hint(ele, keys);
-      hintElements[keys] = hint;
-    });
-    this.hintElements = hintElements;
-  }
-
-  remove() {
-    let hintElements = this.hintElements;
-    Object.keys(this.hintElements).forEach((key) => {
-      hintElements[key].remove();
-    });
-  }
-
-  static getTargetElements(win) {
-    let all = win.document.querySelectorAll(TARGET_SELECTOR);
-    let filtered = Array.prototype.filter.call(all, (element) => {
-      let style = win.getComputedStyle(element);
-      return style.display !== 'none' &&
-        style.visibility !== 'hidden' &&
-        element.type !== 'hidden' &&
-        element.offsetHeight > 0 &&
-        inWindow(win, element);
-    });
-    return filtered;
-  }
-}
diff --git a/src/content/components/frame-content.js b/src/content/components/frame-content.js
new file mode 100644
index 0000000..d2fb245
--- /dev/null
+++ b/src/content/components/frame-content.js
@@ -0,0 +1,16 @@
+import CommonComponent from './common';
+
+export default class FrameContent {
+
+  constructor(win, store) {
+    this.children = [new CommonComponent(win, store)];
+  }
+
+  update() {
+    this.children.forEach(c => c.update());
+  }
+
+  onMessage(message) {
+    this.children.forEach(c => c.onMessage(message));
+  }
+}
diff --git a/src/content/components/hint.css b/src/content/components/hint.css
deleted file mode 100644
index 119dd21..0000000
--- a/src/content/components/hint.css
+++ /dev/null
@@ -1,10 +0,0 @@
-.vimvixen-hint {
-  background-color: yellow;
-  border: 1px solid gold;
-  font-weight: bold;
-  position: absolute;
-  text-transform: uppercase;
-  z-index: 100000;
-  font-size: 12px;
-  color: black;
-}
diff --git a/src/content/components/hint.js b/src/content/components/hint.js
deleted file mode 100644
index cc46fd6..0000000
--- a/src/content/components/hint.js
+++ /dev/null
@@ -1,36 +0,0 @@
-import './hint.css';
-
-export default class Hint {
-  constructor(target, tag) {
-    if (!(document.body instanceof HTMLElement)) {
-      throw new TypeError('target is not an HTMLElement');
-    }
-
-    this.target = target;
-
-    let doc = target.ownerDocument;
-    let { top, left } = target.getBoundingClientRect();
-    let { scrollX, scrollY } = window;
-
-    this.element = doc.createElement('span');
-    this.element.className = 'vimvixen-hint';
-    this.element.textContent = tag;
-    this.element.style.left = left + scrollX + 'px';
-    this.element.style.top = top + scrollY + 'px';
-
-    this.show();
-    doc.body.append(this.element);
-  }
-
-  show() {
-    this.element.style.display = 'inline';
-  }
-
-  hide() {
-    this.element.style.display = 'none';
-  }
-
-  remove() {
-    this.element.remove();
-  }
-}
diff --git a/src/content/components/keymapper.js b/src/content/components/keymapper.js
deleted file mode 100644
index 655c3f2..0000000
--- a/src/content/components/keymapper.js
+++ /dev/null
@@ -1,31 +0,0 @@
-import * as inputActions from 'content/actions/input';
-import * as operationActions from 'content/actions/operation';
-
-export default class KeymapperComponent {
-  constructor(store) {
-    this.store = store;
-  }
-
-  update() {
-  }
-
-  key(key, ctrl) {
-    this.store.dispatch(inputActions.keyPress(key, ctrl));
-
-    let input = this.store.getState().input;
-    let matched = Object.keys(input.keymaps).filter((keyStr) => {
-      return keyStr.startsWith(input.keys);
-    });
-    if (matched.length === 0) {
-      this.store.dispatch(inputActions.clearKeys());
-      return false;
-    } else if (matched.length > 1 ||
-      matched.length === 1 && input.keys !== matched[0]) {
-      return true;
-    }
-    let operation = input.keymaps[matched];
-    this.store.dispatch(operationActions.exec(operation));
-    this.store.dispatch(inputActions.clearKeys());
-    return true;
-  }
-}
diff --git a/src/content/components/top-content.js b/src/content/components/top-content.js
new file mode 100644
index 0000000..9b58947
--- /dev/null
+++ b/src/content/components/top-content.js
@@ -0,0 +1,28 @@
+import CommonComponent from './common';
+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)];
+
+    // TODO make component
+    consoleFrames.initialize(window.document);
+  }
+
+  update() {
+    this.children.forEach(c => c.update());
+  }
+
+  onMessage(message) {
+    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));
+  }
+}
diff --git a/src/content/index.js b/src/content/index.js
index 4d1658e..589eb98 100644
--- a/src/content/index.js
+++ b/src/content/index.js
@@ -1,78 +1,14 @@
 import './console-frame.scss';
-import * as consoleFrames from './console-frames';
-import * as inputActions from './actions/input';
 import { createStore } from 'shared/store';
-import ContentInputComponent from 'content/components/content-input';
-import KeymapperComponent from 'content/components/keymapper';
-import FollowComponent from 'content/components/follow';
 import reducers from 'content/reducers';
-import messages from 'shared/messages';
+import TopContentComponent from './components/top-content';
+import FrameContentComponent from './components/frame-content';
 
 const store = createStore(reducers);
-const followComponent = new FollowComponent(window, store);
-const contentInputComponent =
-  new ContentInputComponent(window.document.body, store);
-const keymapperComponent = new KeymapperComponent(store);
-contentInputComponent.onKey((key, ctrl) => {
-  return followComponent.key(key, ctrl);
-});
-contentInputComponent.onKey((key, ctrl) => {
-  return keymapperComponent.key(key, ctrl);
-});
-store.subscribe(() => {
-  try {
-    followComponent.update();
-    contentInputComponent.update();
-  } catch (e) {
-    console.error(e);
-  }
-});
 
-const reloadSettings = () => {
-  return browser.runtime.sendMessage({
-    type: messages.SETTINGS_QUERY,
-  }).then((settings) => {
-    store.dispatch(inputActions.setKeymaps(settings.keymaps));
-  });
-};
+let rootComponent = window.self === window.top
+  ? new TopContentComponent(window, store)
+  : new FrameContentComponent(window, store);
 
-// TODO: the followin methods should be implemented in each top component and
-// frame component
-const initTopComponents = () => {
-  consoleFrames.initialize(window.document);
-
-  browser.runtime.onMessage.addListener((action) => {
-    switch (action.type) {
-    case messages.CONSOLE_HIDE_COMMAND:
-      window.focus();
-      consoleFrames.blur(window.document);
-      return Promise.resolve();
-    case messages.SETTINGS_CHANGED:
-      return reloadSettings();
-    default:
-      return Promise.resolve();
-    }
-  });
-};
-
-const initFrameConponents = () => {
-  browser.runtime.onMessage.addListener((action) => {
-    switch (action.type) {
-    case messages.CONSOLE_HIDE_COMMAND:
-      window.focus();
-      return Promise.resolve();
-    case messages.SETTINGS_CHANGED:
-      return reloadSettings();
-    default:
-      return Promise.resolve();
-    }
-  });
-};
-
-if (window.self === window.top) {
-  initTopComponents();
-} else {
-  initFrameConponents();
-}
-
-reloadSettings();
+browser.runtime.onMessage.addListener(msg => rootComponent.onMessage(msg));
+rootComponent.update();
diff --git a/test/content/components/common/follow.html b/test/content/components/common/follow.html
new file mode 100644
index 0000000..eb0decd
--- /dev/null
+++ b/test/content/components/common/follow.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+  <body>
+    <a id='visible_a' href='#' >link</a>
+    <a href='#' style='display:none'>invisible 1</a>
+    <a href='#' style='visibility:hidden'>invisible 2</a>
+    <i>not link<i>
+    <div id='editable_div_1' contenteditable>link</div>
+    <div id='editable_div_2' contenteditable='true'>link</div>
+    <div id='x' contenteditable='false'>link</div>
+  </body>
+</html>
diff --git a/test/content/components/common/follow.test.js b/test/content/components/common/follow.test.js
new file mode 100644
index 0000000..97bd1d2
--- /dev/null
+++ b/test/content/components/common/follow.test.js
@@ -0,0 +1,18 @@
+import { expect } from "chai";
+import FollowComponent from 'content/components/common/follow';
+
+describe('FollowComponent', () => {
+  describe('#getTargetElements', () => {
+    beforeEach(() => {
+      document.body.innerHTML = __html__['test/content/components/common/follow.html'];
+    });
+
+    it('returns visible links', () => {
+      let targets = FollowComponent.getTargetElements(window);
+      expect(targets).to.have.lengthOf(3);
+
+      let ids = Array.prototype.map.call(targets, (e) => e.id);
+      expect(ids).to.include.members(['visible_a', 'editable_div_1', 'editable_div_2']);
+    });
+  });
+});
diff --git a/test/content/components/common/hint.html b/test/content/components/common/hint.html
new file mode 100644
index 0000000..b50c5fe
--- /dev/null
+++ b/test/content/components/common/hint.html
@@ -0,0 +1 @@
+<a id='test-link' href='javascript:window.vimvixenTest="hello"' >link</a>
diff --git a/test/content/components/common/hint.test.js b/test/content/components/common/hint.test.js
new file mode 100644
index 0000000..ced2fde
--- /dev/null
+++ b/test/content/components/common/hint.test.js
@@ -0,0 +1,58 @@
+import { expect } from "chai";
+import Hint from 'content/components/common/hint';
+
+describe('Hint class', () => {
+  beforeEach(() => {
+    document.body.innerHTML = __html__['test/content/components/common/hint.html'];
+  });
+
+  describe('#constructor', () => {
+    it('creates a hint element with tag name', () => {
+      let link = document.getElementById('test-link');
+      let hint = new Hint(link, 'abc');
+      expect(hint.element.textContent.trim()).to.be.equal('abc');
+    });
+
+    it('throws an exception when non-element given', () => {
+      expect(() => new Hint(window, 'abc')).to.throw(TypeError);
+    });
+  });
+
+  describe('#show', () => {
+    it('shows an element', () => {
+      let link = document.getElementById('test-link');
+      let hint = new Hint(link, 'abc');
+      hint.hide();
+      hint.show();
+
+      expect(hint.element.style.display).to.not.equal('none');
+    });
+  });
+
+  describe('#hide', () => {
+    it('hides an element', () => {
+      let link = document.getElementById('test-link');
+      let hint = new Hint(link, 'abc');
+      hint.hide();
+
+      expect(hint.element.style.display).to.equal('none');
+    });
+  });
+
+  describe('#remove', () => {
+    it('removes an element', () => {
+      let link = document.getElementById('test-link');
+      let hint = new Hint(link, 'abc');
+
+      expect(hint.element.parentElement).to.not.be.null;
+      hint.remove();
+      expect(hint.element.parentElement).to.be.null;
+    });
+  });
+
+  describe('#activate', () => {
+    // TODO test activations
+  });
+});
+
+
diff --git a/test/content/components/follow.html b/test/content/components/follow.html
deleted file mode 100644
index eb0decd..0000000
--- a/test/content/components/follow.html
+++ /dev/null
@@ -1,12 +0,0 @@
-<!DOCTYPE html>
-<html>
-  <body>
-    <a id='visible_a' href='#' >link</a>
-    <a href='#' style='display:none'>invisible 1</a>
-    <a href='#' style='visibility:hidden'>invisible 2</a>
-    <i>not link<i>
-    <div id='editable_div_1' contenteditable>link</div>
-    <div id='editable_div_2' contenteditable='true'>link</div>
-    <div id='x' contenteditable='false'>link</div>
-  </body>
-</html>
diff --git a/test/content/components/follow.test.js b/test/content/components/follow.test.js
deleted file mode 100644
index c8ae58b..0000000
--- a/test/content/components/follow.test.js
+++ /dev/null
@@ -1,18 +0,0 @@
-import { expect } from "chai";
-import FollowComponent from 'content/components/follow';
-
-describe('FollowComponent', () => {
-  describe('#getTargetElements', () => {
-    beforeEach(() => {
-      document.body.innerHTML = __html__['test/content/components/follow.html'];
-    });
-
-    it('returns visible links', () => {
-      let targets = FollowComponent.getTargetElements(window);
-      expect(targets).to.have.lengthOf(3);
-
-      let ids = Array.prototype.map.call(targets, (e) => e.id);
-      expect(ids).to.include.members(['visible_a', 'editable_div_1', 'editable_div_2']);
-    });
-  });
-});
diff --git a/test/content/components/hint.html b/test/content/components/hint.html
deleted file mode 100644
index b50c5fe..0000000
--- a/test/content/components/hint.html
+++ /dev/null
@@ -1 +0,0 @@
-<a id='test-link' href='javascript:window.vimvixenTest="hello"' >link</a>
diff --git a/test/content/components/hint.test.js b/test/content/components/hint.test.js
deleted file mode 100644
index f98b79b..0000000
--- a/test/content/components/hint.test.js
+++ /dev/null
@@ -1,58 +0,0 @@
-import { expect } from "chai";
-import Hint from 'content/components/hint';
-
-describe('Hint class', () => {
-  beforeEach(() => {
-    document.body.innerHTML = __html__['test/content/components/hint.html'];
-  });
-
-  describe('#constructor', () => {
-    it('creates a hint element with tag name', () => {
-      let link = document.getElementById('test-link');
-      let hint = new Hint(link, 'abc');
-      expect(hint.element.textContent.trim()).to.be.equal('abc');
-    });
-
-    it('throws an exception when non-element given', () => {
-      expect(() => new Hint(window, 'abc')).to.throw(TypeError);
-    });
-  });
-
-  describe('#show', () => {
-    it('shows an element', () => {
-      let link = document.getElementById('test-link');
-      let hint = new Hint(link, 'abc');
-      hint.hide();
-      hint.show();
-
-      expect(hint.element.style.display).to.not.equal('none');
-    });
-  });
-
-  describe('#hide', () => {
-    it('hides an element', () => {
-      let link = document.getElementById('test-link');
-      let hint = new Hint(link, 'abc');
-      hint.hide();
-
-      expect(hint.element.style.display).to.equal('none');
-    });
-  });
-
-  describe('#remove', () => {
-    it('removes an element', () => {
-      let link = document.getElementById('test-link');
-      let hint = new Hint(link, 'abc');
-
-      expect(hint.element.parentElement).to.not.be.null;
-      hint.remove();
-      expect(hint.element.parentElement).to.be.null;
-    });
-  });
-
-  describe('#activate', () => {
-    // TODO test activations
-  });
-});
-
-
-- 
cgit v1.2.3


From 45b3b0510fd0babe392ee46319fa345433af7736 Mon Sep 17 00:00:00 2001
From: Shin'ya Ueoka <ueokande@i-beam.org>
Date: Sun, 15 Oct 2017 21:59:37 +0900
Subject: follow links for multi-frames in viewport

---
 .eslintrc                                          |  1 +
 src/content/components/common/follow.js            | 31 ++++++++++++++--------
 .../components/top-content/follow-controller.js    | 18 ++++++++++++-
 test/content/components/common/follow.test.js      |  5 +++-
 4 files changed, 42 insertions(+), 13 deletions(-)

(limited to 'test')

diff --git a/.eslintrc b/.eslintrc
index d244c8f..5636171 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -29,6 +29,7 @@
     "id-length": "off",
     "indent": ["error", 2],
     "jsx-quotes": ["error", "prefer-single"],
+    "max-params": ["error", 5],
     "max-statements": ["error", 15],
     "multiline-ternary": "off",
     "newline-after-var": "off",
diff --git a/src/content/components/common/follow.js b/src/content/components/common/follow.js
index a5fbab4..92d8822 100644
--- a/src/content/components/common/follow.js
+++ b/src/content/components/common/follow.js
@@ -6,16 +6,25 @@ const TARGET_SELECTOR = [
   '[contenteditable=true]', '[contenteditable=""]'
 ].join(',');
 
-const inWindow = (win, element) => {
+const inViewport = (win, element, viewSize, framePosition) => {
   let {
     top, left, bottom, right
   } = element.getBoundingClientRect();
   let doc = win.doc;
-  return (
-    top >= 0 && left >= 0 &&
-    bottom <= (win.innerHeight || doc.documentElement.clientHeight) &&
-    right <= (win.innerWidth || doc.documentElement.clientWidth)
-  );
+  let frameWidth = win.innerWidth || doc.documentElement.clientWidth;
+  let frameHeight = win.innerHeight || doc.documentElement.clientHeight;
+
+  if (right < 0 || bottom < 0 || top > frameHeight || left > frameWidth) {
+    // out of frame
+    return false;
+  }
+  if (right + framePosition.x < 0 || bottom + framePosition.y < 0 ||
+      left + framePosition.x > viewSize.width ||
+      top + framePosition.y > viewSize.height) {
+    // out of viewport
+    return false;
+  }
+  return true;
 };
 
 export default class Follow {
@@ -60,8 +69,8 @@ export default class Follow {
     });
   }
 
-  countHints(sender) {
-    this.targets = Follow.getTargetElements(this.win);
+  countHints(sender, viewSize, framePosition) {
+    this.targets = Follow.getTargetElements(this.win, viewSize, framePosition);
     sender.postMessage(JSON.stringify({
       type: messages.FOLLOW_RESPONSE_COUNT_TARGETS,
       count: this.targets.length,
@@ -133,7 +142,7 @@ export default class Follow {
   onMessage(message, sender) {
     switch (message.type) {
     case messages.FOLLOW_REQUEST_COUNT_TARGETS:
-      return this.countHints(sender);
+      return this.countHints(sender, message.viewSize, message.framePosition);
     case messages.FOLLOW_CREATE_HINTS:
       return this.createHints(message.keysArray, message.newTab);
     case messages.FOLLOW_SHOW_HINTS:
@@ -145,7 +154,7 @@ export default class Follow {
     }
   }
 
-  static getTargetElements(win) {
+  static getTargetElements(win, viewSize, framePosition) {
     let all = win.document.querySelectorAll(TARGET_SELECTOR);
     let filtered = Array.prototype.filter.call(all, (element) => {
       let style = win.getComputedStyle(element);
@@ -153,7 +162,7 @@ export default class Follow {
         style.visibility !== 'hidden' &&
         element.type !== 'hidden' &&
         element.offsetHeight > 0 &&
-        inWindow(win, element);
+        inViewport(win, element, viewSize, framePosition);
     });
     return filtered;
   }
diff --git a/src/content/components/top-content/follow-controller.js b/src/content/components/top-content/follow-controller.js
index 0474690..29f40b3 100644
--- a/src/content/components/top-content/follow-controller.js
+++ b/src/content/components/top-content/follow-controller.js
@@ -87,8 +87,24 @@ export default class FollowController {
 
   count() {
     this.producer = new HintKeyProducer(DEFAULT_HINT_CHARSET);
-    broadcastMessage(this.win, {
+    let doc = this.win.document;
+    let viewWidth = this.win.innerWidth || doc.documentElement.clientWidth;
+    let viewHeight = this.win.innerHeight || doc.documentElement.clientHeight;
+    let frameElements = this.win.document.querySelectorAll('frame,iframe');
+
+    this.win.postMessage(JSON.stringify({
       type: messages.FOLLOW_REQUEST_COUNT_TARGETS,
+      viewSize: { width: viewWidth, height: viewHeight },
+      framePosition: { x: 0, y: 0 },
+    }), '*');
+    frameElements.forEach((element) => {
+      let { left: frameX, top: frameY } = element.getBoundingClientRect();
+      let message = JSON.stringify({
+        type: messages.FOLLOW_REQUEST_COUNT_TARGETS,
+        viewSize: { width: viewWidth, height: viewHeight },
+        framePosition: { x: frameX, y: frameY },
+      });
+      element.contentWindow.postMessage(message, '*');
     });
   }
 
diff --git a/test/content/components/common/follow.test.js b/test/content/components/common/follow.test.js
index 97bd1d2..1fc935e 100644
--- a/test/content/components/common/follow.test.js
+++ b/test/content/components/common/follow.test.js
@@ -8,7 +8,10 @@ describe('FollowComponent', () => {
     });
 
     it('returns visible links', () => {
-      let targets = FollowComponent.getTargetElements(window);
+      let targets = FollowComponent.getTargetElements(
+        window,
+        { width: window.innerWidth, height: window.innerHeight },
+        { x: 0, y: 0 });
       expect(targets).to.have.lengthOf(3);
 
       let ids = Array.prototype.map.call(targets, (e) => e.id);
-- 
cgit v1.2.3