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: [PATCH] make top-content component and frame-content component

---
 src/content/components/{ => common}/follow.js |  0
 src/content/components/{ => common}/hint.css  |  0
 src/content/components/{ => common}/hint.js   |  0
 src/content/components/common/index.js        | 46 +++++++++++
 .../{content-input.js => common/input.js}     |  2 +-
 .../components/{ => common}/keymapper.js      |  0
 src/content/components/frame-content.js       | 16 ++++
 src/content/components/top-content.js         | 28 +++++++
 src/content/index.js                          | 78 ++-----------------
 .../components/{ => common}/follow.html       |  0
 .../components/{ => common}/follow.test.js    |  4 +-
 .../content/components/{ => common}/hint.html |  0
 .../components/{ => common}/hint.test.js      |  4 +-
 13 files changed, 102 insertions(+), 76 deletions(-)
 rename src/content/components/{ => common}/follow.js (100%)
 rename src/content/components/{ => common}/hint.css (100%)
 rename src/content/components/{ => common}/hint.js (100%)
 create mode 100644 src/content/components/common/index.js
 rename src/content/components/{content-input.js => common/input.js} (97%)
 rename src/content/components/{ => common}/keymapper.js (100%)
 create mode 100644 src/content/components/frame-content.js
 create mode 100644 src/content/components/top-content.js
 rename test/content/components/{ => common}/follow.html (100%)
 rename test/content/components/{ => common}/follow.test.js (85%)
 rename test/content/components/{ => common}/hint.html (100%)
 rename test/content/components/{ => common}/hint.test.js (95%)

diff --git a/src/content/components/follow.js b/src/content/components/common/follow.js
similarity index 100%
rename from src/content/components/follow.js
rename to src/content/components/common/follow.js
diff --git a/src/content/components/hint.css b/src/content/components/common/hint.css
similarity index 100%
rename from src/content/components/hint.css
rename to src/content/components/common/hint.css
diff --git a/src/content/components/hint.js b/src/content/components/common/hint.js
similarity index 100%
rename from src/content/components/hint.js
rename to src/content/components/common/hint.js
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/content-input.js b/src/content/components/common/input.js
similarity index 97%
rename from src/content/components/content-input.js
rename to src/content/components/common/input.js
index 3e70bbb..df09894 100644
--- a/src/content/components/content-input.js
+++ b/src/content/components/common/input.js
@@ -1,4 +1,4 @@
-export default class ContentInputComponent {
+export default class InputComponent {
   constructor(target) {
     this.pressed = {};
     this.onKeyListeners = [];
diff --git a/src/content/components/keymapper.js b/src/content/components/common/keymapper.js
similarity index 100%
rename from src/content/components/keymapper.js
rename to src/content/components/common/keymapper.js
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/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/follow.html b/test/content/components/common/follow.html
similarity index 100%
rename from test/content/components/follow.html
rename to test/content/components/common/follow.html
diff --git a/test/content/components/follow.test.js b/test/content/components/common/follow.test.js
similarity index 85%
rename from test/content/components/follow.test.js
rename to test/content/components/common/follow.test.js
index c8ae58b..97bd1d2 100644
--- a/test/content/components/follow.test.js
+++ b/test/content/components/common/follow.test.js
@@ -1,10 +1,10 @@
 import { expect } from "chai";
-import FollowComponent from 'content/components/follow';
+import FollowComponent from 'content/components/common/follow';
 
 describe('FollowComponent', () => {
   describe('#getTargetElements', () => {
     beforeEach(() => {
-      document.body.innerHTML = __html__['test/content/components/follow.html'];
+      document.body.innerHTML = __html__['test/content/components/common/follow.html'];
     });
 
     it('returns visible links', () => {
diff --git a/test/content/components/hint.html b/test/content/components/common/hint.html
similarity index 100%
rename from test/content/components/hint.html
rename to test/content/components/common/hint.html
diff --git a/test/content/components/hint.test.js b/test/content/components/common/hint.test.js
similarity index 95%
rename from test/content/components/hint.test.js
rename to test/content/components/common/hint.test.js
index f98b79b..ced2fde 100644
--- a/test/content/components/hint.test.js
+++ b/test/content/components/common/hint.test.js
@@ -1,9 +1,9 @@
 import { expect } from "chai";
-import Hint from 'content/components/hint';
+import Hint from 'content/components/common/hint';
 
 describe('Hint class', () => {
   beforeEach(() => {
-    document.body.innerHTML = __html__['test/content/components/hint.html'];
+    document.body.innerHTML = __html__['test/content/components/common/hint.html'];
   });
 
   describe('#constructor', () => {