diff --git a/src/console/index.js b/src/console/index.js index 895fcc2..2ae5779 100644 --- a/src/console/index.js +++ b/src/console/index.js @@ -36,6 +36,6 @@ store.subscribe(() => { }); browser.runtime.onMessage.addListener(onMessage); -window.addEventListener('message', (message) => { - onMessage(JSON.parse(message.data)); +window.addEventListener('message', (event) => { + onMessage(JSON.parse(event.data)); }, false); diff --git a/src/content/actions/operation.js b/src/content/actions/operation.js index 3aa9c1f..81bcc2f 100644 --- a/src/content/actions/operation.js +++ b/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: diff --git a/src/content/components/common/follow.js b/src/content/components/common/follow.js index 3f28cc2..a5fbab4 100644 --- a/src/content/components/common/follow.js +++ b/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.state = {}; + this.newTab = false; + 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; } - - 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; - } + this.win.parent.postMessage(JSON.stringify({ + type: messages.FOLLOW_KEY_PRESS, + key, + }), '*'); 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() { - 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(); - }); + onMessage(message, sender) { + switch (message.type) { + case messages.FOLLOW_REQUEST_COUNT_TARGETS: + return this.countHints(sender); + case messages.FOLLOW_CREATE_HINTS: + return this.createHints(message.keysArray, message.newTab); + case messages.FOLLOW_SHOW_HINTS: + return this.showHints(message.keys); + case messages.FOLLOW_ACTIVATE: + return this.activateHints(message.keys); + case messages.FOLLOW_REMOVE_HINTS: + return this.removeHints(message.keys); + } } static getTargetElements(win) { diff --git a/src/content/components/common/index.js b/src/content/components/common/index.js index 7673134..a05febd 100644 --- a/src/content/components/common/index.js +++ b/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) => { - follow.key(key, ctrl); - keymapper.key(key, ctrl); - }); + input.onKey((key, ctrl) => follow.key(key, ctrl)); + input.onKey((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() { diff --git a/src/content/components/common/input.js b/src/content/components/common/input.js index df09894..8a7f82a 100644 --- a/src/content/components/common/input.js +++ b/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() { + } } diff --git a/src/content/components/common/keymapper.js b/src/content/components/common/keymapper.js index 655c3f2..2a57b28 100644 --- a/src/content/components/common/keymapper.js +++ b/src/content/components/common/keymapper.js @@ -28,4 +28,7 @@ export default class KeymapperComponent { this.store.dispatch(inputActions.clearKeys()); return true; } + + onMessage() { + } } diff --git a/src/content/components/frame-content.js b/src/content/components/frame-content.js index d2fb245..46786d2 100644 --- a/src/content/components/frame-content.js +++ b/src/content/components/frame-content.js @@ -10,7 +10,7 @@ export default class FrameContent { this.children.forEach(c => c.update()); } - onMessage(message) { - this.children.forEach(c => c.onMessage(message)); + onMessage(message, sender) { + this.children.forEach(c => c.onMessage(message, sender)); } } diff --git a/src/content/components/top-content/follow-controller.js b/src/content/components/top-content/follow-controller.js new file mode 100644 index 0000000..0474690 --- /dev/null +++ b/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, + }); + } +} diff --git a/src/content/components/top-content.js b/src/content/components/top-content/index.js similarity index 56% rename from src/content/components/top-content.js rename to src/content/components/top-content/index.js index 9b58947..a2179da 100644 --- a/src/content/components/top-content.js +++ b/src/content/components/top-content/index.js @@ -1,12 +1,16 @@ -import CommonComponent from './common'; -import * as consoleFrames from '../console-frames'; +import CommonComponent from '../common'; +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)); } } diff --git a/src/content/index.js b/src/content/index.js index 589eb98..e01172d 100644 --- a/src/content/index.js +++ b/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); +}); diff --git a/src/shared/messages.js b/src/shared/messages.js index 2467a67..581e167 100644 --- a/src/shared/messages.js +++ b/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',