support multi-frame following

jh-changes
Shin'ya Ueoka 7 years ago
parent 4c9d0433a6
commit ac5354020e
  1. 4
      src/console/index.js
  2. 6
      src/content/actions/operation.js
  3. 145
      src/content/components/common/follow.js
  4. 9
      src/content/components/common/index.js
  5. 3
      src/content/components/common/input.js
  6. 3
      src/content/components/common/keymapper.js
  7. 4
      src/content/components/frame-content.js
  8. 115
      src/content/components/top-content/follow-controller.js
  9. 14
      src/content/components/top-content/index.js
  10. 15
      src/content/index.js
  11. 9
      src/shared/messages.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);

@ -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:

@ -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;
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);
}
remove() {
let hintElements = this.hintElements;
Object.keys(this.hintElements).forEach((key) => {
hintElements[key].remove();
});
}
static getTargetElements(win) {

@ -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() {

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

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

@ -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));
}
}

@ -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,
});
}
}

@ -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));
}
}

@ -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);
});

@ -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',