From be37c42d28e4d32609b5972ee937a269d18c0f67 Mon Sep 17 00:00:00 2001 From: Shin'ya Ueoka Date: Mon, 6 Nov 2017 20:13:15 +0900 Subject: show find in console --- test/console/actions/console.test.js | 7 +++++++ test/console/reducers/console.test.js | 4 ++-- 2 files changed, 9 insertions(+), 2 deletions(-) (limited to 'test') diff --git a/test/console/actions/console.test.js b/test/console/actions/console.test.js index 3b02d4a..c96dd99 100644 --- a/test/console/actions/console.test.js +++ b/test/console/actions/console.test.js @@ -11,6 +11,13 @@ describe("console actions", () => { }); }); + describe("showFind", () => { + it('create CONSOLE_SHOW_FIND action', () => { + let action = consoleActions.showFind(); + expect(action.type).to.equal(actions.CONSOLE_SHOW_FIND); + }); + }); + describe("showInfo", () => { it('create CONSOLE_SHOW_INFO action', () => { let action = consoleActions.showInfo('an info'); diff --git a/test/console/reducers/console.test.js b/test/console/reducers/console.test.js index 4f85e55..280d1b7 100644 --- a/test/console/reducers/console.test.js +++ b/test/console/reducers/console.test.js @@ -7,7 +7,7 @@ describe("console reducer", () => { let state = reducer(undefined, {}); expect(state).to.have.property('mode', ''); expect(state).to.have.property('messageText', ''); - expect(state).to.have.property('commandText', ''); + expect(state).to.have.property('consoleText', ''); expect(state).to.have.deep.property('completions', []); expect(state).to.have.property('groupSelection', -1); expect(state).to.have.property('itemSelection', -1); @@ -17,7 +17,7 @@ describe("console reducer", () => { let action = { type: actions.CONSOLE_SHOW_COMMAND, text: 'open ' }; let state = reducer({}, action); expect(state).to.have.property('mode', 'command'); - expect(state).to.have.property('commandText', 'open '); + expect(state).to.have.property('consoleText', 'open '); }); it('return next state for CONSOLE_SHOW_INFO', () => { -- cgit v1.2.3 From e1c70769ea235a78da463ab21de40582381bec78 Mon Sep 17 00:00:00 2001 From: Shin'ya Ueoka Date: Mon, 6 Nov 2017 22:03:53 +0900 Subject: add find action and reducer --- src/content/actions/find.js | 36 ++++++++++++++++++++++++++++++++++++ src/content/actions/index.js | 5 +++++ src/content/reducers/find.js | 25 +++++++++++++++++++++++++ src/content/reducers/index.js | 3 +++ test/content/actions/find.test.js | 19 +++++++++++++++++++ test/content/reducers/find.test.js | 36 ++++++++++++++++++++++++++++++++++++ 6 files changed, 124 insertions(+) create mode 100644 src/content/actions/find.js create mode 100644 src/content/reducers/find.js create mode 100644 test/content/actions/find.test.js create mode 100644 test/content/reducers/find.test.js (limited to 'test') diff --git a/src/content/actions/find.js b/src/content/actions/find.js new file mode 100644 index 0000000..90c9de9 --- /dev/null +++ b/src/content/actions/find.js @@ -0,0 +1,36 @@ +// +// window.find(aString, aCaseSensitive, aBackwards, aWrapAround, +// aWholeWord, aSearchInFrames, aShowDialog); +// +// NOTE: window.find is not standard API +// https://developer.mozilla.org/en-US/docs/Web/API/Window/find + +import actions from 'content/actions'; + +const show = () => { + return { type: actions.FIND_SHOW }; +}; + +const hide = () => { + return { type: actions.FIND_HIDE }; +}; + +const next = (keyword) => { + // TODO Error on no matched + window.find(keyword, false, false, true, false, true, false); + return { + type: actions.FIND_SET_KEYWORD, + keyword, + }; +}; + +const prev = (keyword) => { + // TODO Error on no matched + window.find(keyword, false, true, true, false, true, false); + return { + type: actions.FIND_SET_KEYWORD, + keyword, + }; +}; + +export { show, hide, next, prev }; diff --git a/src/content/actions/index.js b/src/content/actions/index.js index 8cc2303..a727e13 100644 --- a/src/content/actions/index.js +++ b/src/content/actions/index.js @@ -21,4 +21,9 @@ export default { FOLLOW_CONTROLLER_DISABLE: 'follow.controller.disable', FOLLOW_CONTROLLER_KEY_PRESS: 'follow.controller.key.press', FOLLOW_CONTROLLER_BACKSPACE: 'follow.controller.backspace', + + // Find + FIND_SHOW: 'find.show', + FIND_HIDE: 'find.hide', + FIND_SET_KEYWORD: 'find.set.keyword', }; diff --git a/src/content/reducers/find.js b/src/content/reducers/find.js new file mode 100644 index 0000000..6042f50 --- /dev/null +++ b/src/content/reducers/find.js @@ -0,0 +1,25 @@ +import actions from 'content/actions'; + +const defaultState = { + enabled: false, + keyword: '', +}; + +export default function reducer(state = defaultState, action = {}) { + switch (action.type) { + case actions.FIND_SHOW: + return Object.assign({}, state, { + enabled: true, + }); + case actions.FIND_HIDE: + return Object.assign({}, state, { + enabled: false, + }); + case actions.FIND_SET_KEYWORD: + return Object.assign({}, state, { + keyword: action.keyword, + }); + default: + return state; + } +} diff --git a/src/content/reducers/index.js b/src/content/reducers/index.js index 17c0429..2487d85 100644 --- a/src/content/reducers/index.js +++ b/src/content/reducers/index.js @@ -1,4 +1,5 @@ import addonReducer from './addon'; +import findReducer from './find'; import settingReducer from './setting'; import inputReducer from './input'; import followControllerReducer from './follow-controller'; @@ -6,6 +7,7 @@ import followControllerReducer from './follow-controller'; // Make setting reducer instead of re-use const defaultState = { addon: addonReducer(undefined, {}), + find: findReducer(undefined, {}), setting: settingReducer(undefined, {}), input: inputReducer(undefined, {}), followController: followControllerReducer(undefined, {}), @@ -14,6 +16,7 @@ const defaultState = { export default function reducer(state = defaultState, action = {}) { return Object.assign({}, state, { addon: addonReducer(state.addon, action), + find: findReducer(state.find, action), setting: settingReducer(state.setting, action), input: inputReducer(state.input, action), followController: followControllerReducer(state.followController, action), diff --git a/test/content/actions/find.test.js b/test/content/actions/find.test.js new file mode 100644 index 0000000..676e105 --- /dev/null +++ b/test/content/actions/find.test.js @@ -0,0 +1,19 @@ +import { expect } from "chai"; +import actions from 'content/actions'; +import * as findActions from 'content/actions/find'; + +describe("find actions", () => { + describe("show", () => { + it('create FIND_SHOW action', () => { + let action = findActions.show(); + expect(action.type).to.equal(actions.FIND_SHOW); + }); + }); + + describe("hide", () => { + it('create FIND_HIDE action', () => { + let action = findActions.hide(); + expect(action.type).to.equal(actions.FIND_HIDE); + }); + }); +}); diff --git a/test/content/reducers/find.test.js b/test/content/reducers/find.test.js new file mode 100644 index 0000000..3aacbd9 --- /dev/null +++ b/test/content/reducers/find.test.js @@ -0,0 +1,36 @@ +import { expect } from "chai"; +import actions from 'content/actions'; +import findReducer from 'content/reducers/find'; + +describe("find reducer", () => { + it('return the initial state', () => { + let state = findReducer(undefined, {}); + expect(state).to.have.property('enabled', false); + expect(state).to.have.property('keyword', ''); + }); + + it('return next state for FIND_SHOW', () => { + let action = { type: actions.FIND_SHOW }; + let prev = { enabled: false }; + let state = findReducer(prev, action); + + expect(state.enabled).is.equal(true); + }); + + it('return next state for FIND_HIDE', () => { + let action = { type: actions.FIND_HIDE }; + let prev = { enabled: true }; + let state = findReducer(prev, action); + + expect(state.enabled).is.equal(false); + }); + + it('return next state for FIND_SET_KEYWORD', () => { + let action = { type: actions.FIND_SET_KEYWORD, keyword: 'my-search' }; + let state = { enabled: true, keyword: '' }; + + state = findReducer(state, action); + + expect(state.keyword).is.equal('my-search'); + }); +}); -- cgit v1.2.3 From 956dd937d33d167440d9d637f67ebff5d72353e5 Mon Sep 17 00:00:00 2001 From: Shin'ya Ueoka Date: Tue, 7 Nov 2017 21:20:22 +0900 Subject: console as redux architecture --- src/console/actions/console.js | 14 +++- src/console/actions/index.js | 1 + src/console/components/console.js | 131 ++++++++++++++-------------------- src/console/index.html | 3 +- src/console/reducers/index.js | 19 +++++ test/console/actions/console.test.js | 14 +++- test/console/reducers/console.test.js | 10 +++ 7 files changed, 107 insertions(+), 85 deletions(-) (limited to 'test') diff --git a/src/console/actions/console.js b/src/console/actions/console.js index dd12e24..2cf8e8d 100644 --- a/src/console/actions/console.js +++ b/src/console/actions/console.js @@ -33,10 +33,18 @@ const hideCommand = () => { }; }; -const setCompletions = (completions) => { +const setConsoleText = (consoleText) => { + return { + type: actions.CONSOLE_SET_CONSOLE_TEXT, + consoleText, + }; +}; + +const setCompletions = (completionSource, completions) => { return { type: actions.CONSOLE_SET_COMPLETIONS, - completions: completions + completionSource, + completions, }; }; @@ -53,6 +61,6 @@ const completionPrev = () => { }; export { - showCommand, showFind, showError, showInfo, hideCommand, + showCommand, showFind, showError, showInfo, hideCommand, setConsoleText, setCompletions, completionNext, completionPrev }; diff --git a/src/console/actions/index.js b/src/console/actions/index.js index 15903be..a85e329 100644 --- a/src/console/actions/index.js +++ b/src/console/actions/index.js @@ -4,6 +4,7 @@ export default { CONSOLE_SHOW_ERROR: 'console.show.error', CONSOLE_SHOW_INFO: 'console.show.info', CONSOLE_HIDE_COMMAND: 'console.hide.command', + CONSOLE_SET_CONSOLE_TEXT: 'console.set.command', CONSOLE_SET_COMPLETIONS: 'console.set.completions', CONSOLE_COMPLETION_NEXT: 'console.completion.next', CONSOLE_COMPLETION_PREV: 'console.completion.prev', diff --git a/src/console/components/console.js b/src/console/components/console.js index d09e252..605feb2 100644 --- a/src/console/components/console.js +++ b/src/console/components/console.js @@ -1,25 +1,27 @@ import messages from 'shared/messages'; import * as consoleActions from 'console/actions/console'; +const inputShownMode = (state) => { + return ['command', 'find'].includes(state.mode); +}; + export default class ConsoleComponent { constructor(wrapper, store) { this.wrapper = wrapper; - this.prevState = {}; - this.completionOrigin = ''; this.store = store; + this.prevMode = ''; let doc = this.wrapper.ownerDocument; let input = doc.querySelector('#vimvixen-console-command-input'); + input.addEventListener('blur', this.onBlur.bind(this)); input.addEventListener('keydown', this.onKeyDown.bind(this)); input.addEventListener('input', this.onInput.bind(this)); - this.hideCommand(); - this.hideMessage(); - store.subscribe(() => { this.update(); }); + this.update(); } onBlur() { @@ -53,105 +55,80 @@ export default class ConsoleComponent { } onInput(e) { - let doc = this.wrapper.ownerDocument; - let input = doc.querySelector('#vimvixen-console-command-input'); - this.completionOrigin = input.value; + this.store.dispatch(consoleActions.setConsoleText(e.target.value)); + let source = e.target.value; return browser.runtime.sendMessage({ type: messages.CONSOLE_QUERY_COMPLETIONS, - text: e.target.value, + text: source, }).then((completions) => { - this.store.dispatch(consoleActions.setCompletions(completions)); + this.store.dispatch(consoleActions.setCompletions(source, completions)); }); } - update() { - let state = this.store.getState(); - if (this.prevState.mode !== 'command' && state.mode === 'command') { - this.showCommand(state.consoleText); - } else if (this.prevState.mode !== 'find' && state.mode === 'find') { - this.showFind(); - } else if (state.mode !== 'command' && state.mode !== 'find') { - this.hideCommand(); - } + onInputShown(state) { + let doc = this.wrapper.ownerDocument; + let input = doc.querySelector('#vimvixen-console-command-input'); - if (state.mode === 'error' || state.mode === 'info') { - this.showMessage(state.mode, state.messageText); - } else { - this.hideMessage(); - } + input.focus(); + window.focus(); - if (state.groupSelection >= 0 && state.itemSelection >= 0) { - let group = state.completions[state.groupSelection]; - let item = group.items[state.itemSelection]; - this.setCommandValue(item.content); - } else if (state.completions.length > 0 && - JSON.stringify(this.prevState.completions) === - JSON.stringify(state.completions)) { - // Reset input only completion groups not changed (unselected an item in - // completion) in order to avoid to override previous input - this.setCommandCompletionOrigin(); + if (state.mode === 'command') { + this.onInput({ target: input }); } - - this.prevState = state; } - showCommand(text) { - this.showConsole('command', text); - } + update() { + let state = this.store.getState(); + + this.updateMessage(state); + this.updateCommand(state); + this.updatePrompt(state); - showFind() { - this.showConsole('find', ''); + if (this.prevMode !== state.mode && inputShownMode(state)) { + this.onInputShown(state); + } + this.prevMode = state.mode; } - showConsole(mode, initial) { + updateMessage(state) { let doc = this.wrapper.ownerDocument; - let command = doc.querySelector('#vimvixen-console-command'); - let input = doc.querySelector('#vimvixen-console-command-input'); - let promptEle = doc.querySelector('.vimvixen-console-command-prompt'); + let box = doc.querySelector('.vimvixen-console-message'); + let display = 'none'; + let classList = ['vimvixen-console-message']; - command.style.display = 'block'; - input.value = initial; - input.focus(); - promptEle.className = `vimvixen-console-command-prompt prompt-${mode}`; + if (state.mode === 'error' || state.mode === 'info') { + display = 'block'; + classList.push('vimvixen-console-' + state.mode); + } - window.focus(); - this.onInput({ target: input }); + box.className = classList.join(' '); + box.style.display = display; + box.textContent = state.messageText; } - hideCommand() { + updateCommand(state) { let doc = this.wrapper.ownerDocument; let command = doc.querySelector('#vimvixen-console-command'); - command.style.display = 'none'; - } - - setCommandValue(value) { - let doc = this.wrapper.ownerDocument; let input = doc.querySelector('#vimvixen-console-command-input'); - input.value = value; - } - setCommandCompletionOrigin() { - let doc = this.wrapper.ownerDocument; - let input = doc.querySelector('#vimvixen-console-command-input'); - input.value = this.completionOrigin; - } + let display = 'none'; + if (inputShownMode(state)) { + display = 'block'; + } - showMessage(mode, text) { - let doc = this.wrapper.ownerDocument; - let error = doc.querySelector('#vimvixen-console-message'); - error.classList.remove( - 'vimvixen-console-info', - 'vimvixen-console-error' - ); - error.classList.add('vimvixen-console-' + mode); - error.textContent = text; - error.style.display = 'block'; + command.style.display = display; + input.value = state.consoleText; } - hideMessage() { + updatePrompt(state) { + let classList = ['vimvixen-console-command-prompt']; + if (inputShownMode(state)) { + classList.push('prompt-' + state.mode); + } + let doc = this.wrapper.ownerDocument; - let error = doc.querySelector('#vimvixen-console-message'); - error.style.display = 'none'; + let ele = doc.querySelector('.vimvixen-console-command-prompt'); + ele.className = classList.join(' '); } } diff --git a/src/console/index.html b/src/console/index.html index f41a8dc..52ecb76 100644 --- a/src/console/index.html +++ b/src/console/index.html @@ -6,8 +6,7 @@ -

+

    diff --git a/src/console/reducers/index.js b/src/console/reducers/index.js index d94662b..60c0007 100644 --- a/src/console/reducers/index.js +++ b/src/console/reducers/index.js @@ -4,6 +4,7 @@ const defaultState = { mode: '', messageText: '', consoleText: '', + completionSource: '', completions: [], groupSelection: -1, itemSelection: -1, @@ -43,6 +44,13 @@ const prevSelection = (state) => { return [state.groupSelection, state.itemSelection - 1]; }; +const nextConsoleText = (completions, group, item, defaults) => { + if (group < 0 || item < 0) { + return defaults; + } + return completions[group].items[item].content; +}; + export default function reducer(state = defaultState, action = {}) { switch (action.type) { case actions.CONSOLE_SHOW_COMMAND: @@ -71,9 +79,14 @@ export default function reducer(state = defaultState, action = {}) { return Object.assign({}, state, { mode: state.mode === 'command' || state.mode === 'find' ? '' : state.mode, }); + case actions.CONSOLE_SET_CONSOLE_TEXT: + return Object.assign({}, state, { + consoleText: action.consoleText, + }); case actions.CONSOLE_SET_COMPLETIONS: return Object.assign({}, state, { completions: action.completions, + completionSource: action.completionSource, groupSelection: -1, itemSelection: -1, }); @@ -82,6 +95,9 @@ export default function reducer(state = defaultState, action = {}) { return Object.assign({}, state, { groupSelection: next[0], itemSelection: next[1], + consoleText: nextConsoleText( + state.completions, next[0], next[1], + state.completionSource), }); } case actions.CONSOLE_COMPLETION_PREV: { @@ -89,6 +105,9 @@ export default function reducer(state = defaultState, action = {}) { return Object.assign({}, state, { groupSelection: next[0], itemSelection: next[1], + consoleText: nextConsoleText( + state.completions, next[0], next[1], + state.completionSource), }); } default: diff --git a/test/console/actions/console.test.js b/test/console/actions/console.test.js index c96dd99..9af13d4 100644 --- a/test/console/actions/console.test.js +++ b/test/console/actions/console.test.js @@ -34,17 +34,26 @@ describe("console actions", () => { }); }); - describe("hide", () => { + describe("hideCommand", () => { it('create CONSOLE_HIDE_COMMAND action', () => { let action = consoleActions.hideCommand(); expect(action.type).to.equal(actions.CONSOLE_HIDE_COMMAND); }); }); + describe('setConsoleText', () => { + it('create CONSOLE_SET_CONSOLE_TEXT action', () => { + let action = consoleActions.setConsoleText('hello world'); + expect(action.type).to.equal(actions.CONSOLE_SET_CONSOLE_TEXT); + expect(action.consoleText).to.equal('hello world'); + }); + }); + describe("setCompletions", () => { it('create CONSOLE_SET_COMPLETIONS action', () => { - let action = consoleActions.setCompletions([1,2,3]); + let action = consoleActions.setCompletions('query', [1, 2, 3]); expect(action.type).to.equal(actions.CONSOLE_SET_COMPLETIONS); + expect(action.completionSource).to.deep.equal('query'); expect(action.completions).to.deep.equal([1, 2, 3]); }); }); @@ -63,4 +72,3 @@ describe("console actions", () => { }); }); }); - diff --git a/test/console/reducers/console.test.js b/test/console/reducers/console.test.js index 280d1b7..438d513 100644 --- a/test/console/reducers/console.test.js +++ b/test/console/reducers/console.test.js @@ -43,6 +43,16 @@ describe("console reducer", () => { expect(state).to.have.property('mode', 'error'); }); + it('return next state for CONSOLE_SET_CONSOLE_TEXT', () => { + let action = { + type: actions.CONSOLE_SET_CONSOLE_TEXT, + consoleText: 'hello world' + } + let state = reducer({}, action) + + expect(state).to.have.property('consoleText', 'hello world'); + }); + it ('return next state for CONSOLE_SET_COMPLETIONS', () => { let state = { groupSelection: 0, -- cgit v1.2.3 From fe8a9283172e43e29480c4293c34565859c04c32 Mon Sep 17 00:00:00 2001 From: Shin'ya Ueoka Date: Sat, 11 Nov 2017 18:45:10 +0900 Subject: remove unused actions and fix test --- src/content/actions/find.js | 10 +--------- src/content/actions/index.js | 2 -- src/content/reducers/find.js | 9 --------- test/content/actions/find.test.js | 19 ------------------- test/content/reducers/find.test.js | 33 ++++++++++----------------------- 5 files changed, 11 insertions(+), 62 deletions(-) delete mode 100644 test/content/actions/find.test.js (limited to 'test') diff --git a/src/content/actions/find.js b/src/content/actions/find.js index ac1b842..80d6210 100644 --- a/src/content/actions/find.js +++ b/src/content/actions/find.js @@ -14,14 +14,6 @@ const postPatternNotFound = (pattern) => { 'Pattern not found: ' + pattern); }; -const show = () => { - return { type: actions.FIND_SHOW }; -}; - -const hide = () => { - return { type: actions.FIND_HIDE }; -}; - const find = (string, backwards) => { let caseSensitive = false; let wrapScan = true; @@ -60,4 +52,4 @@ const prev = (keyword, reset) => { return findNext(keyword, reset, true); }; -export { show, hide, next, prev }; +export { next, prev }; diff --git a/src/content/actions/index.js b/src/content/actions/index.js index a727e13..7e32e12 100644 --- a/src/content/actions/index.js +++ b/src/content/actions/index.js @@ -23,7 +23,5 @@ export default { FOLLOW_CONTROLLER_BACKSPACE: 'follow.controller.backspace', // Find - FIND_SHOW: 'find.show', - FIND_HIDE: 'find.hide', FIND_SET_KEYWORD: 'find.set.keyword', }; diff --git a/src/content/reducers/find.js b/src/content/reducers/find.js index f0bfbeb..eb43c37 100644 --- a/src/content/reducers/find.js +++ b/src/content/reducers/find.js @@ -1,21 +1,12 @@ import actions from 'content/actions'; const defaultState = { - enabled: false, keyword: '', found: false, }; export default function reducer(state = defaultState, action = {}) { switch (action.type) { - case actions.FIND_SHOW: - return Object.assign({}, state, { - enabled: true, - }); - case actions.FIND_HIDE: - return Object.assign({}, state, { - enabled: false, - }); case actions.FIND_SET_KEYWORD: return Object.assign({}, state, { keyword: action.keyword, diff --git a/test/content/actions/find.test.js b/test/content/actions/find.test.js deleted file mode 100644 index 676e105..0000000 --- a/test/content/actions/find.test.js +++ /dev/null @@ -1,19 +0,0 @@ -import { expect } from "chai"; -import actions from 'content/actions'; -import * as findActions from 'content/actions/find'; - -describe("find actions", () => { - describe("show", () => { - it('create FIND_SHOW action', () => { - let action = findActions.show(); - expect(action.type).to.equal(actions.FIND_SHOW); - }); - }); - - describe("hide", () => { - it('create FIND_HIDE action', () => { - let action = findActions.hide(); - expect(action.type).to.equal(actions.FIND_HIDE); - }); - }); -}); diff --git a/test/content/reducers/find.test.js b/test/content/reducers/find.test.js index 3aacbd9..93625da 100644 --- a/test/content/reducers/find.test.js +++ b/test/content/reducers/find.test.js @@ -5,32 +5,19 @@ import findReducer from 'content/reducers/find'; describe("find reducer", () => { it('return the initial state', () => { let state = findReducer(undefined, {}); - expect(state).to.have.property('enabled', false); expect(state).to.have.property('keyword', ''); - }); - - it('return next state for FIND_SHOW', () => { - let action = { type: actions.FIND_SHOW }; - let prev = { enabled: false }; - let state = findReducer(prev, action); - - expect(state.enabled).is.equal(true); - }); - - it('return next state for FIND_HIDE', () => { - let action = { type: actions.FIND_HIDE }; - let prev = { enabled: true }; - let state = findReducer(prev, action); - - expect(state.enabled).is.equal(false); + expect(state).to.have.property('found', false); }); it('return next state for FIND_SET_KEYWORD', () => { - let action = { type: actions.FIND_SET_KEYWORD, keyword: 'my-search' }; - let state = { enabled: true, keyword: '' }; - - state = findReducer(state, action); - - expect(state.keyword).is.equal('my-search'); + let action = { + type: actions.FIND_SET_KEYWORD, + keyword: 'xyz', + found: true, + }; + let state = findReducer({}, action); + + expect(state.keyword).is.equal('xyz'); + expect(state.found).to.be.true; }); }); -- cgit v1.2.3