From 541449b1fced9eea15f415b023206b10724f5315 Mon Sep 17 00:00:00 2001 From: Shin'ya Ueoka Date: Sun, 8 Oct 2017 14:18:12 +0900 Subject: separate console --- src/actions/console.js | 44 ---------- src/actions/index.js | 8 -- src/components/completion.js | 61 -------------- src/components/console.js | 148 ---------------------------------- src/console/actions/console.js | 44 ++++++++++ src/console/actions/index.js | 9 +++ src/console/components/completion.js | 61 ++++++++++++++ src/console/components/console.js | 148 ++++++++++++++++++++++++++++++++++ src/console/index.html | 20 +++++ src/console/index.js | 34 ++++++++ src/console/reducers/index.js | 94 +++++++++++++++++++++ src/console/site.scss | 92 +++++++++++++++++++++ src/pages/console.html | 20 ----- src/pages/console.js | 34 -------- src/pages/console.scss | 92 --------------------- src/reducers/console.js | 94 --------------------- src/reducers/index.js | 3 - test/actions/console.test.js | 51 ------------ test/console/actions/console.test.js | 51 ++++++++++++ test/console/reducers/console.test.js | 118 +++++++++++++++++++++++++++ test/reducers/console.test.js | 118 --------------------------- webpack.config.js | 4 +- 22 files changed, 673 insertions(+), 675 deletions(-) delete mode 100644 src/actions/console.js delete mode 100644 src/components/completion.js delete mode 100644 src/components/console.js create mode 100644 src/console/actions/console.js create mode 100644 src/console/actions/index.js create mode 100644 src/console/components/completion.js create mode 100644 src/console/components/console.js create mode 100644 src/console/index.html create mode 100644 src/console/index.js create mode 100644 src/console/reducers/index.js create mode 100644 src/console/site.scss delete mode 100644 src/pages/console.html delete mode 100644 src/pages/console.js delete mode 100644 src/pages/console.scss delete mode 100644 src/reducers/console.js delete mode 100644 test/actions/console.test.js create mode 100644 test/console/actions/console.test.js create mode 100644 test/console/reducers/console.test.js delete mode 100644 test/reducers/console.test.js diff --git a/src/actions/console.js b/src/actions/console.js deleted file mode 100644 index 4183489..0000000 --- a/src/actions/console.js +++ /dev/null @@ -1,44 +0,0 @@ -import actions from 'actions'; - -const showCommand = (text) => { - return { - type: actions.CONSOLE_SHOW_COMMAND, - text: text - }; -}; - -const showError = (text) => { - return { - type: actions.CONSOLE_SHOW_ERROR, - text: text - }; -}; - -const hide = () => { - return { - type: actions.CONSOLE_HIDE - }; -}; - -const setCompletions = (completions) => { - return { - type: actions.CONSOLE_SET_COMPLETIONS, - completions: completions - }; -}; - -const completionNext = () => { - return { - type: actions.CONSOLE_COMPLETION_NEXT, - }; -}; - -const completionPrev = () => { - return { - type: actions.CONSOLE_COMPLETION_PREV, - }; -}; - -export { - showCommand, showError, hide, setCompletions, completionNext, completionPrev -}; diff --git a/src/actions/index.js b/src/actions/index.js index 6a64795..0b3749d 100644 --- a/src/actions/index.js +++ b/src/actions/index.js @@ -1,12 +1,4 @@ export default { - // console commands - CONSOLE_SHOW_COMMAND: 'console.show.command', - CONSOLE_SET_COMPLETIONS: 'console.set.completions', - CONSOLE_SHOW_ERROR: 'console.show.error', - CONSOLE_HIDE: 'console.hide', - CONSOLE_COMPLETION_NEXT: 'console.completion.next', - CONSOLE_COMPLETION_PREV: 'console.completion.prev', - // User input INPUT_KEY_PRESS: 'input.key,press', INPUT_CLEAR_KEYS: 'input.clear.keys', diff --git a/src/components/completion.js b/src/components/completion.js deleted file mode 100644 index f527a84..0000000 --- a/src/components/completion.js +++ /dev/null @@ -1,61 +0,0 @@ -export default class Completion { - constructor(wrapper, store) { - this.wrapper = wrapper; - this.store = store; - this.prevState = {}; - } - - update() { - let state = this.store.getState().console; - if (JSON.stringify(this.prevState) === JSON.stringify(state)) { - return; - } - - this.wrapper.innerHTML = ''; - - for (let i = 0; i < state.completions.length; ++i) { - let group = state.completions[i]; - let title = this.createCompletionTitle(group.name); - this.wrapper.append(title); - - for (let j = 0; j < group.items.length; ++j) { - let item = group.items[j]; - let li = this.createCompletionItem(item.icon, item.caption, item.url); - this.wrapper.append(li); - - if (i === state.groupSelection && j === state.itemSelection) { - li.classList.add('vimvixen-completion-selected'); - } - } - } - - this.prevState = state; - } - - createCompletionTitle(text) { - let doc = this.wrapper.ownerDocument; - let li = doc.createElement('li'); - li.className = 'vimvixen-console-completion-title'; - li.textContent = text; - return li; - } - - createCompletionItem(icon, caption, url) { - let doc = this.wrapper.ownerDocument; - - let captionEle = doc.createElement('span'); - captionEle.className = 'vimvixen-console-completion-item-caption'; - captionEle.textContent = caption; - - let urlEle = doc.createElement('span'); - urlEle.className = 'vimvixen-console-completion-item-url'; - urlEle.textContent = url; - - let li = doc.createElement('li'); - li.style.backgroundImage = 'url(' + icon + ')'; - li.className = 'vimvixen-console-completion-item'; - li.append(captionEle); - li.append(urlEle); - return li; - } -} diff --git a/src/components/console.js b/src/components/console.js deleted file mode 100644 index 20d15c2..0000000 --- a/src/components/console.js +++ /dev/null @@ -1,148 +0,0 @@ -import messages from 'shared/messages'; -import * as consoleActions from 'actions/console'; - -export default class ConsoleComponent { - constructor(wrapper, store) { - this.wrapper = wrapper; - this.prevValue = ''; - this.prevState = {}; - this.completionOrigin = ''; - this.store = store; - - 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('keyup', this.onKeyUp.bind(this)); - - this.hideCommand(); - this.hideError(); - } - - onBlur() { - return browser.runtime.sendMessage({ - type: messages.CONSOLE_BLURRED, - }); - } - - onKeyDown(e) { - let doc = this.wrapper.ownerDocument; - let input = doc.querySelector('#vimvixen-console-command-input'); - - switch (e.keyCode) { - case KeyboardEvent.DOM_VK_ESCAPE: - return input.blur(); - case KeyboardEvent.DOM_VK_RETURN: - return browser.runtime.sendMessage({ - type: messages.CONSOLE_ENTERED, - text: e.target.value - }).then(this.onBlur); - case KeyboardEvent.DOM_VK_TAB: - if (e.shiftKey) { - this.store.dispatch(consoleActions.completionPrev()); - } else { - this.store.dispatch(consoleActions.completionNext()); - } - e.stopPropagation(); - e.preventDefault(); - break; - } - } - - onKeyUp(e) { - if (e.keyCode === KeyboardEvent.DOM_VK_TAB) { - return; - } - if (e.target.value === this.prevValue) { - return; - } - - let doc = this.wrapper.ownerDocument; - let input = doc.querySelector('#vimvixen-console-command-input'); - this.completionOrigin = input.value; - - this.prevValue = e.target.value; - return browser.runtime.sendMessage({ - type: messages.CONSOLE_QUERY_COMPLETIONS, - text: e.target.value - }).then((completions) => { - this.store.dispatch(consoleActions.setCompletions(completions)); - }); - } - - update() { - let state = this.store.getState().console; - if (!this.prevState.commandShown && state.commandShown) { - this.showCommand(state.commandText); - } else if (!state.commandShown) { - this.hideCommand(); - } - - if (state.errorShown) { - this.setErrorText(state.errorText); - this.showError(); - } else { - this.hideError(); - } - - 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(); - } - - this.prevState = state; - } - - showCommand(text) { - let doc = this.wrapper.ownerDocument; - let command = doc.querySelector('#vimvixen-console-command'); - let input = doc.querySelector('#vimvixen-console-command-input'); - - command.style.display = 'block'; - input.value = text; - input.focus(); - } - - hideCommand() { - 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; - } - - setErrorText(text) { - let doc = this.wrapper.ownerDocument; - let error = doc.querySelector('#vimvixen-console-error'); - error.textContent = text; - } - - showError() { - let doc = this.wrapper.ownerDocument; - let error = doc.querySelector('#vimvixen-console-error'); - error.style.display = 'block'; - } - - hideError() { - let doc = this.wrapper.ownerDocument; - let error = doc.querySelector('#vimvixen-console-error'); - error.style.display = 'none'; - } -} diff --git a/src/console/actions/console.js b/src/console/actions/console.js new file mode 100644 index 0000000..01d9a9b --- /dev/null +++ b/src/console/actions/console.js @@ -0,0 +1,44 @@ +import actions from 'console/actions'; + +const showCommand = (text) => { + return { + type: actions.CONSOLE_SHOW_COMMAND, + text: text + }; +}; + +const showError = (text) => { + return { + type: actions.CONSOLE_SHOW_ERROR, + text: text + }; +}; + +const hide = () => { + return { + type: actions.CONSOLE_HIDE + }; +}; + +const setCompletions = (completions) => { + return { + type: actions.CONSOLE_SET_COMPLETIONS, + completions: completions + }; +}; + +const completionNext = () => { + return { + type: actions.CONSOLE_COMPLETION_NEXT, + }; +}; + +const completionPrev = () => { + return { + type: actions.CONSOLE_COMPLETION_PREV, + }; +}; + +export { + showCommand, showError, hide, setCompletions, completionNext, completionPrev +}; diff --git a/src/console/actions/index.js b/src/console/actions/index.js new file mode 100644 index 0000000..a5d03bc --- /dev/null +++ b/src/console/actions/index.js @@ -0,0 +1,9 @@ +export default { + // console commands + CONSOLE_SHOW_COMMAND: 'console.show.command', + CONSOLE_SET_COMPLETIONS: 'console.set.completions', + CONSOLE_SHOW_ERROR: 'console.show.error', + CONSOLE_HIDE: 'console.hide', + CONSOLE_COMPLETION_NEXT: 'console.completion.next', + CONSOLE_COMPLETION_PREV: 'console.completion.prev', +}; diff --git a/src/console/components/completion.js b/src/console/components/completion.js new file mode 100644 index 0000000..5033b5c --- /dev/null +++ b/src/console/components/completion.js @@ -0,0 +1,61 @@ +export default class Completion { + constructor(wrapper, store) { + this.wrapper = wrapper; + this.store = store; + this.prevState = {}; + } + + update() { + let state = this.store.getState(); + if (JSON.stringify(this.prevState) === JSON.stringify(state)) { + return; + } + + this.wrapper.innerHTML = ''; + + for (let i = 0; i < state.completions.length; ++i) { + let group = state.completions[i]; + let title = this.createCompletionTitle(group.name); + this.wrapper.append(title); + + for (let j = 0; j < group.items.length; ++j) { + let item = group.items[j]; + let li = this.createCompletionItem(item.icon, item.caption, item.url); + this.wrapper.append(li); + + if (i === state.groupSelection && j === state.itemSelection) { + li.classList.add('vimvixen-completion-selected'); + } + } + } + + this.prevState = state; + } + + createCompletionTitle(text) { + let doc = this.wrapper.ownerDocument; + let li = doc.createElement('li'); + li.className = 'vimvixen-console-completion-title'; + li.textContent = text; + return li; + } + + createCompletionItem(icon, caption, url) { + let doc = this.wrapper.ownerDocument; + + let captionEle = doc.createElement('span'); + captionEle.className = 'vimvixen-console-completion-item-caption'; + captionEle.textContent = caption; + + let urlEle = doc.createElement('span'); + urlEle.className = 'vimvixen-console-completion-item-url'; + urlEle.textContent = url; + + let li = doc.createElement('li'); + li.style.backgroundImage = 'url(' + icon + ')'; + li.className = 'vimvixen-console-completion-item'; + li.append(captionEle); + li.append(urlEle); + return li; + } +} diff --git a/src/console/components/console.js b/src/console/components/console.js new file mode 100644 index 0000000..9023d91 --- /dev/null +++ b/src/console/components/console.js @@ -0,0 +1,148 @@ +import messages from 'shared/messages'; +import * as consoleActions from 'console/actions/console'; + +export default class ConsoleComponent { + constructor(wrapper, store) { + this.wrapper = wrapper; + this.prevValue = ''; + this.prevState = {}; + this.completionOrigin = ''; + this.store = store; + + 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('keyup', this.onKeyUp.bind(this)); + + this.hideCommand(); + this.hideError(); + } + + onBlur() { + return browser.runtime.sendMessage({ + type: messages.CONSOLE_BLURRED, + }); + } + + onKeyDown(e) { + let doc = this.wrapper.ownerDocument; + let input = doc.querySelector('#vimvixen-console-command-input'); + + switch (e.keyCode) { + case KeyboardEvent.DOM_VK_ESCAPE: + return input.blur(); + case KeyboardEvent.DOM_VK_RETURN: + return browser.runtime.sendMessage({ + type: messages.CONSOLE_ENTERED, + text: e.target.value + }).then(this.onBlur); + case KeyboardEvent.DOM_VK_TAB: + if (e.shiftKey) { + this.store.dispatch(consoleActions.completionPrev()); + } else { + this.store.dispatch(consoleActions.completionNext()); + } + e.stopPropagation(); + e.preventDefault(); + break; + } + } + + onKeyUp(e) { + if (e.keyCode === KeyboardEvent.DOM_VK_TAB) { + return; + } + if (e.target.value === this.prevValue) { + return; + } + + let doc = this.wrapper.ownerDocument; + let input = doc.querySelector('#vimvixen-console-command-input'); + this.completionOrigin = input.value; + + this.prevValue = e.target.value; + return browser.runtime.sendMessage({ + type: messages.CONSOLE_QUERY_COMPLETIONS, + text: e.target.value + }).then((completions) => { + this.store.dispatch(consoleActions.setCompletions(completions)); + }); + } + + update() { + let state = this.store.getState(); + if (!this.prevState.commandShown && state.commandShown) { + this.showCommand(state.commandText); + } else if (!state.commandShown) { + this.hideCommand(); + } + + if (state.errorShown) { + this.setErrorText(state.errorText); + this.showError(); + } else { + this.hideError(); + } + + 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(); + } + + this.prevState = state; + } + + showCommand(text) { + let doc = this.wrapper.ownerDocument; + let command = doc.querySelector('#vimvixen-console-command'); + let input = doc.querySelector('#vimvixen-console-command-input'); + + command.style.display = 'block'; + input.value = text; + input.focus(); + } + + hideCommand() { + 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; + } + + setErrorText(text) { + let doc = this.wrapper.ownerDocument; + let error = doc.querySelector('#vimvixen-console-error'); + error.textContent = text; + } + + showError() { + let doc = this.wrapper.ownerDocument; + let error = doc.querySelector('#vimvixen-console-error'); + error.style.display = 'block'; + } + + hideError() { + let doc = this.wrapper.ownerDocument; + let error = doc.querySelector('#vimvixen-console-error'); + error.style.display = 'none'; + } +} diff --git a/src/console/index.html b/src/console/index.html new file mode 100644 index 0000000..4222f12 --- /dev/null +++ b/src/console/index.html @@ -0,0 +1,20 @@ + + + + + VimVixen console + + + +

+
+ +
+ +
+
+ + diff --git a/src/console/index.js b/src/console/index.js new file mode 100644 index 0000000..1bcf8bc --- /dev/null +++ b/src/console/index.js @@ -0,0 +1,34 @@ +import './site.scss'; +import messages from 'shared/messages'; +import CompletionComponent from 'console/components/completion'; +import ConsoleComponent from 'console/components/console'; +import reducers from 'console/reducers'; +import { createStore } from 'store'; +import * as consoleActions from 'console/actions/console'; + +const store = createStore(reducers); +let completionComponent = null; +let consoleComponent = null; + +window.addEventListener('load', () => { + let wrapper = document.querySelector('#vimvixen-console-completion'); + completionComponent = new CompletionComponent(wrapper, store); + + consoleComponent = new ConsoleComponent(document.body, store); +}); + +store.subscribe(() => { + completionComponent.update(); + consoleComponent.update(); +}); + +browser.runtime.onMessage.addListener((action) => { + switch (action.type) { + case messages.CONSOLE_SHOW_COMMAND: + return store.dispatch(consoleActions.showCommand(action.command)); + case messages.CONSOLE_SHOW_ERROR: + return store.dispatch(consoleActions.showError(action.text)); + case messages.CONSOLE_HIDE: + return store.dispatch(consoleActions.hide(action.command)); + } +}); diff --git a/src/console/reducers/index.js b/src/console/reducers/index.js new file mode 100644 index 0000000..ee9c691 --- /dev/null +++ b/src/console/reducers/index.js @@ -0,0 +1,94 @@ +import actions from 'console/actions'; + +const defaultState = { + errorShown: false, + errorText: '', + commandShown: false, + commandText: '', + completions: [], + groupSelection: -1, + itemSelection: -1, +}; + +const nextSelection = (state) => { + if (state.groupSelection < 0) { + return [0, 0]; + } + + let group = state.completions[state.groupSelection]; + if (state.groupSelection + 1 >= state.completions.length && + state.itemSelection + 1 >= group.items.length) { + return [-1, -1]; + } + if (state.itemSelection + 1 >= group.items.length) { + return [state.groupSelection + 1, 0]; + } + return [state.groupSelection, state.itemSelection + 1]; +}; + +const prevSelection = (state) => { + if (state.groupSelection < 0) { + return [ + state.completions.length - 1, + state.completions[state.completions.length - 1].items.length - 1 + ]; + } + if (state.groupSelection === 0 && state.itemSelection === 0) { + return [-1, -1]; + } else if (state.itemSelection === 0) { + return [ + state.groupSelection - 1, + state.completions[state.groupSelection - 1].items.length - 1 + ]; + } + return [state.groupSelection, state.itemSelection - 1]; +}; + +export default function reducer(state = defaultState, action = {}) { + switch (action.type) { + case actions.CONSOLE_SHOW_COMMAND: + return Object.assign({}, state, { + commandShown: true, + commandText: action.text, + errorShown: false, + completions: [] + }); + case actions.CONSOLE_SHOW_ERROR: + return Object.assign({}, state, { + errorText: action.text, + errorShown: true, + commandShown: false, + }); + case actions.CONSOLE_HIDE: + if (state.errorShown) { + // keep error message if shown + return state; + } + return Object.assign({}, state, { + errorShown: false, + commandShown: false + }); + case actions.CONSOLE_SET_COMPLETIONS: + return Object.assign({}, state, { + completions: action.completions, + groupSelection: -1, + itemSelection: -1, + }); + case actions.CONSOLE_COMPLETION_NEXT: { + let next = nextSelection(state); + return Object.assign({}, state, { + groupSelection: next[0], + itemSelection: next[1], + }); + } + case actions.CONSOLE_COMPLETION_PREV: { + let next = prevSelection(state); + return Object.assign({}, state, { + groupSelection: next[0], + itemSelection: next[1], + }); + } + default: + return state; + } +} diff --git a/src/console/site.scss b/src/console/site.scss new file mode 100644 index 0000000..5823dce --- /dev/null +++ b/src/console/site.scss @@ -0,0 +1,92 @@ +html, body, * { + margin: 0; + padding: 0; +} + +body { + position: absolute; + bottom: 0; + left: 0; + right: 0; + overflow: hidden; +} + +.vimvixen-console { + border-top: 1px solid gray; + bottom: 0; + margin: 0; + padding: 0; + + @mixin consoole-font { + font-style: normal; + font-family: monospace; + font-size: 12px; + line-height: 16px; + } + + &-completion { + background-color: white; + + @include consoole-font; + + &-title { + background-color: lightgray; + font-weight: bold; + margin: 0; + padding: 0; + } + + &-item { + padding-left: 1.5rem; + background-position: 0 center; + background-size: contain; + background-repeat: no-repeat; + white-space: nowrap; + + &.vimvixen-completion-selected { + background-color: yellow; + } + + &-caption { + display: inline-block; + width: 40%; + text-overflow: ellipsis; + overflow: hidden; + } + + &-url { + display: inline-block; + color: green; + width: 60%; + text-overflow: ellipsis; + overflow: hidden; + } + } + } + + &-error { + background-color: red; + font-weight: bold; + color: white; + + @include consoole-font; + } + + &-command { + background-color: white; + display: flex; + + &-prompt:before { + content: ':'; + + @include consoole-font; + } + + &-input { + border: none; + flex-grow: 1; + + @include consoole-font; + } + } +} diff --git a/src/pages/console.html b/src/pages/console.html deleted file mode 100644 index 4222f12..0000000 --- a/src/pages/console.html +++ /dev/null @@ -1,20 +0,0 @@ - - - - - VimVixen console - - - -

-
- -
- -
-
- - diff --git a/src/pages/console.js b/src/pages/console.js deleted file mode 100644 index 4c6e16c..0000000 --- a/src/pages/console.js +++ /dev/null @@ -1,34 +0,0 @@ -import './console.scss'; -import messages from 'shared/messages'; -import CompletionComponent from 'components/completion'; -import ConsoleComponent from 'components/console'; -import reducers from 'reducers'; -import { createStore } from 'store'; -import * as consoleActions from 'actions/console'; - -const store = createStore(reducers); -let completionComponent = null; -let consoleComponent = null; - -window.addEventListener('load', () => { - let wrapper = document.querySelector('#vimvixen-console-completion'); - completionComponent = new CompletionComponent(wrapper, store); - - consoleComponent = new ConsoleComponent(document.body, store); -}); - -store.subscribe(() => { - completionComponent.update(); - consoleComponent.update(); -}); - -browser.runtime.onMessage.addListener((action) => { - switch (action.type) { - case messages.CONSOLE_SHOW_COMMAND: - return store.dispatch(consoleActions.showCommand(action.command)); - case messages.CONSOLE_SHOW_ERROR: - return store.dispatch(consoleActions.showError(action.text)); - case messages.CONSOLE_HIDE: - return store.dispatch(consoleActions.hide(action.command)); - } -}); diff --git a/src/pages/console.scss b/src/pages/console.scss deleted file mode 100644 index 5823dce..0000000 --- a/src/pages/console.scss +++ /dev/null @@ -1,92 +0,0 @@ -html, body, * { - margin: 0; - padding: 0; -} - -body { - position: absolute; - bottom: 0; - left: 0; - right: 0; - overflow: hidden; -} - -.vimvixen-console { - border-top: 1px solid gray; - bottom: 0; - margin: 0; - padding: 0; - - @mixin consoole-font { - font-style: normal; - font-family: monospace; - font-size: 12px; - line-height: 16px; - } - - &-completion { - background-color: white; - - @include consoole-font; - - &-title { - background-color: lightgray; - font-weight: bold; - margin: 0; - padding: 0; - } - - &-item { - padding-left: 1.5rem; - background-position: 0 center; - background-size: contain; - background-repeat: no-repeat; - white-space: nowrap; - - &.vimvixen-completion-selected { - background-color: yellow; - } - - &-caption { - display: inline-block; - width: 40%; - text-overflow: ellipsis; - overflow: hidden; - } - - &-url { - display: inline-block; - color: green; - width: 60%; - text-overflow: ellipsis; - overflow: hidden; - } - } - } - - &-error { - background-color: red; - font-weight: bold; - color: white; - - @include consoole-font; - } - - &-command { - background-color: white; - display: flex; - - &-prompt:before { - content: ':'; - - @include consoole-font; - } - - &-input { - border: none; - flex-grow: 1; - - @include consoole-font; - } - } -} diff --git a/src/reducers/console.js b/src/reducers/console.js deleted file mode 100644 index b9ed5b8..0000000 --- a/src/reducers/console.js +++ /dev/null @@ -1,94 +0,0 @@ -import actions from 'actions'; - -const defaultState = { - errorShown: false, - errorText: '', - commandShown: false, - commandText: '', - completions: [], - groupSelection: -1, - itemSelection: -1, -}; - -const nextSelection = (state) => { - if (state.groupSelection < 0) { - return [0, 0]; - } - - let group = state.completions[state.groupSelection]; - if (state.groupSelection + 1 >= state.completions.length && - state.itemSelection + 1 >= group.items.length) { - return [-1, -1]; - } - if (state.itemSelection + 1 >= group.items.length) { - return [state.groupSelection + 1, 0]; - } - return [state.groupSelection, state.itemSelection + 1]; -}; - -const prevSelection = (state) => { - if (state.groupSelection < 0) { - return [ - state.completions.length - 1, - state.completions[state.completions.length - 1].items.length - 1 - ]; - } - if (state.groupSelection === 0 && state.itemSelection === 0) { - return [-1, -1]; - } else if (state.itemSelection === 0) { - return [ - state.groupSelection - 1, - state.completions[state.groupSelection - 1].items.length - 1 - ]; - } - return [state.groupSelection, state.itemSelection - 1]; -}; - -export default function reducer(state = defaultState, action = {}) { - switch (action.type) { - case actions.CONSOLE_SHOW_COMMAND: - return Object.assign({}, state, { - commandShown: true, - commandText: action.text, - errorShown: false, - completions: [] - }); - case actions.CONSOLE_SHOW_ERROR: - return Object.assign({}, state, { - errorText: action.text, - errorShown: true, - commandShown: false, - }); - case actions.CONSOLE_HIDE: - if (state.errorShown) { - // keep error message if shown - return state; - } - return Object.assign({}, state, { - errorShown: false, - commandShown: false - }); - case actions.CONSOLE_SET_COMPLETIONS: - return Object.assign({}, state, { - completions: action.completions, - groupSelection: -1, - itemSelection: -1, - }); - case actions.CONSOLE_COMPLETION_NEXT: { - let next = nextSelection(state); - return Object.assign({}, state, { - groupSelection: next[0], - itemSelection: next[1], - }); - } - case actions.CONSOLE_COMPLETION_PREV: { - let next = prevSelection(state); - return Object.assign({}, state, { - groupSelection: next[0], - itemSelection: next[1], - }); - } - default: - return state; - } -} diff --git a/src/reducers/index.js b/src/reducers/index.js index 8ed6452..3ebe491 100644 --- a/src/reducers/index.js +++ b/src/reducers/index.js @@ -1,11 +1,9 @@ import inputReducer from 'reducers/input'; -import consoleReducer from 'reducers/console'; import settingReducer from 'reducers/setting'; import followReducer from 'reducers/follow'; const defaultState = { input: inputReducer(undefined, {}), - console: consoleReducer(undefined, {}), setting: settingReducer(undefined, {}), follow: followReducer(undefined, {}), }; @@ -13,7 +11,6 @@ const defaultState = { export default function reducer(state = defaultState, action = {}) { return Object.assign({}, state, { input: inputReducer(state.input, action), - console: consoleReducer(state.console, action), setting: settingReducer(state.setting, action), follow: followReducer(state.follow, action), }); diff --git a/test/actions/console.test.js b/test/actions/console.test.js deleted file mode 100644 index ff905bc..0000000 --- a/test/actions/console.test.js +++ /dev/null @@ -1,51 +0,0 @@ -import { expect } from "chai"; -import actions from 'actions'; -import * as consoleActions from 'actions/console'; - -describe("console actions", () => { - describe("showCommand", () => { - it('create CONSOLE_SHOW_COMMAND action', () => { - let action = consoleActions.showCommand('hello'); - expect(action.type).to.equal(actions.CONSOLE_SHOW_COMMAND); - expect(action.text).to.equal('hello'); - }); - }); - - describe("showError", () => { - it('create CONSOLE_SHOW_ERROR action', () => { - let action = consoleActions.showError('an error'); - expect(action.type).to.equal(actions.CONSOLE_SHOW_ERROR); - expect(action.text).to.equal('an error'); - }); - }); - - describe("hide", () => { - it('create CONSOLE_HIDE action', () => { - let action = consoleActions.hide(); - expect(action.type).to.equal(actions.CONSOLE_HIDE); - }); - }); - - describe("setCompletions", () => { - it('create CONSOLE_SET_COMPLETIONS action', () => { - let action = consoleActions.setCompletions([1,2,3]); - expect(action.type).to.equal(actions.CONSOLE_SET_COMPLETIONS); - expect(action.completions).to.deep.equal([1, 2, 3]); - }); - }); - - describe("completionPrev", () => { - it('create CONSOLE_COMPLETION_PREV action', () => { - let action = consoleActions.completionPrev(); - expect(action.type).to.equal(actions.CONSOLE_COMPLETION_PREV); - }); - }); - - describe("completionNext", () => { - it('create CONSOLE_COMPLETION_NEXT action', () => { - let action = consoleActions.completionNext(); - expect(action.type).to.equal(actions.CONSOLE_COMPLETION_NEXT); - }); - }); -}); - diff --git a/test/console/actions/console.test.js b/test/console/actions/console.test.js new file mode 100644 index 0000000..dd04c85 --- /dev/null +++ b/test/console/actions/console.test.js @@ -0,0 +1,51 @@ +import { expect } from "chai"; +import actions from 'console/actions'; +import * as consoleActions from 'console/actions/console'; + +describe("console actions", () => { + describe("showCommand", () => { + it('create CONSOLE_SHOW_COMMAND action', () => { + let action = consoleActions.showCommand('hello'); + expect(action.type).to.equal(actions.CONSOLE_SHOW_COMMAND); + expect(action.text).to.equal('hello'); + }); + }); + + describe("showError", () => { + it('create CONSOLE_SHOW_ERROR action', () => { + let action = consoleActions.showError('an error'); + expect(action.type).to.equal(actions.CONSOLE_SHOW_ERROR); + expect(action.text).to.equal('an error'); + }); + }); + + describe("hide", () => { + it('create CONSOLE_HIDE action', () => { + let action = consoleActions.hide(); + expect(action.type).to.equal(actions.CONSOLE_HIDE); + }); + }); + + describe("setCompletions", () => { + it('create CONSOLE_SET_COMPLETIONS action', () => { + let action = consoleActions.setCompletions([1,2,3]); + expect(action.type).to.equal(actions.CONSOLE_SET_COMPLETIONS); + expect(action.completions).to.deep.equal([1, 2, 3]); + }); + }); + + describe("completionPrev", () => { + it('create CONSOLE_COMPLETION_PREV action', () => { + let action = consoleActions.completionPrev(); + expect(action.type).to.equal(actions.CONSOLE_COMPLETION_PREV); + }); + }); + + describe("completionNext", () => { + it('create CONSOLE_COMPLETION_NEXT action', () => { + let action = consoleActions.completionNext(); + expect(action.type).to.equal(actions.CONSOLE_COMPLETION_NEXT); + }); + }); +}); + diff --git a/test/console/reducers/console.test.js b/test/console/reducers/console.test.js new file mode 100644 index 0000000..95ac993 --- /dev/null +++ b/test/console/reducers/console.test.js @@ -0,0 +1,118 @@ +import { expect } from "chai"; +import actions from 'console/actions'; +import reducer from 'console/reducers'; + +describe("console reducer", () => { + it('return the initial state', () => { + let state = reducer(undefined, {}); + expect(state).to.have.property('errorShown', false); + expect(state).to.have.property('errorText', ''); + expect(state).to.have.property('commandShown', false); + expect(state).to.have.property('commandText', ''); + expect(state).to.have.deep.property('completions', []); + expect(state).to.have.property('groupSelection', -1); + expect(state).to.have.property('itemSelection', -1); + }); + + it('return next state for CONSOLE_SHOW_COMMAND', () => { + let action = { type: actions.CONSOLE_SHOW_COMMAND, text: 'open ' }; + let state = reducer({}, action); + expect(state).to.have.property('commandShown', true); + expect(state).to.have.property('commandText', 'open '); + expect(state).to.have.property('errorShown', false); + }); + + it('return next state for CONSOLE_SHOW_ERROR', () => { + let action = { type: actions.CONSOLE_SHOW_ERROR, text: 'an error' }; + let state = reducer({}, action); + expect(state).to.have.property('errorShown', true); + expect(state).to.have.property('errorText', 'an error'); + expect(state).to.have.property('commandShown', false); + }); + + it('return next state for CONSOLE_HIDE', () => { + let action = { type: actions.CONSOLE_HIDE }; + let state = reducer({}, action); + expect(state).to.have.property('errorShown', false); + expect(state).to.have.property('commandShown', false); + }); + + it ('return next state for CONSOLE_SET_COMPLETIONS', () => { + let state = { + groupSelection: 0, + itemSelection: 0, + completions: [], + } + let action = { + type: actions.CONSOLE_SET_COMPLETIONS, + completions: [{ + name: 'Apple', + items: [1, 2, 3] + }, { + name: 'Banana', + items: [4, 5, 6] + }] + } + state = reducer(state, action); + expect(state).to.have.property('completions', action.completions); + expect(state).to.have.property('groupSelection', -1); + expect(state).to.have.property('itemSelection', -1); + }); + + it ('return next state for CONSOLE_COMPLETION_NEXT', () => { + let action = { type: actions.CONSOLE_COMPLETION_NEXT }; + let state = { + groupSelection: -1, + itemSelection: -1, + completions: [{ + name: 'Apple', + items: [1, 2] + }, { + name: 'Banana', + items: [3] + }] + }; + + state = reducer(state, action); + expect(state).to.have.property('groupSelection', 0); + expect(state).to.have.property('itemSelection', 0); + + state = reducer(state, action); + expect(state).to.have.property('groupSelection', 0); + expect(state).to.have.property('itemSelection', 1); + + state = reducer(state, action); + state = reducer(state, action); + expect(state).to.have.property('groupSelection', -1); + expect(state).to.have.property('itemSelection', -1); + }); + + it ('return next state for CONSOLE_COMPLETION_PREV', () => { + let action = { type: actions.CONSOLE_COMPLETION_PREV }; + let state = { + groupSelection: -1, + itemSelection: -1, + completions: [{ + name: 'Apple', + items: [1, 2] + }, { + name: 'Banana', + items: [3] + }] + }; + + state = reducer(state, action); + expect(state).to.have.property('groupSelection', 1); + expect(state).to.have.property('itemSelection', 0); + + state = reducer(state, action); + expect(state).to.have.property('groupSelection', 0); + expect(state).to.have.property('itemSelection', 1); + + state = reducer(state, action); + state = reducer(state, action); + expect(state).to.have.property('groupSelection', -1); + expect(state).to.have.property('itemSelection', -1); + }); + +}); diff --git a/test/reducers/console.test.js b/test/reducers/console.test.js deleted file mode 100644 index 5ebf4bc..0000000 --- a/test/reducers/console.test.js +++ /dev/null @@ -1,118 +0,0 @@ -import { expect } from "chai"; -import actions from 'actions'; -import consoleReducer from 'reducers/console'; - -describe("console reducer", () => { - it('return the initial state', () => { - let state = consoleReducer(undefined, {}); - expect(state).to.have.property('errorShown', false); - expect(state).to.have.property('errorText', ''); - expect(state).to.have.property('commandShown', false); - expect(state).to.have.property('commandText', ''); - expect(state).to.have.deep.property('completions', []); - expect(state).to.have.property('groupSelection', -1); - expect(state).to.have.property('itemSelection', -1); - }); - - it('return next state for CONSOLE_SHOW_COMMAND', () => { - let action = { type: actions.CONSOLE_SHOW_COMMAND, text: 'open ' }; - let state = consoleReducer({}, action); - expect(state).to.have.property('commandShown', true); - expect(state).to.have.property('commandText', 'open '); - expect(state).to.have.property('errorShown', false); - }); - - it('return next state for CONSOLE_SHOW_ERROR', () => { - let action = { type: actions.CONSOLE_SHOW_ERROR, text: 'an error' }; - let state = consoleReducer({}, action); - expect(state).to.have.property('errorShown', true); - expect(state).to.have.property('errorText', 'an error'); - expect(state).to.have.property('commandShown', false); - }); - - it('return next state for CONSOLE_HIDE', () => { - let action = { type: actions.CONSOLE_HIDE }; - let state = consoleReducer({}, action); - expect(state).to.have.property('errorShown', false); - expect(state).to.have.property('commandShown', false); - }); - - it ('return next state for CONSOLE_SET_COMPLETIONS', () => { - let state = { - groupSelection: 0, - itemSelection: 0, - completions: [], - } - let action = { - type: actions.CONSOLE_SET_COMPLETIONS, - completions: [{ - name: 'Apple', - items: [1, 2, 3] - }, { - name: 'Banana', - items: [4, 5, 6] - }] - } - state = consoleReducer(state, action); - expect(state).to.have.property('completions', action.completions); - expect(state).to.have.property('groupSelection', -1); - expect(state).to.have.property('itemSelection', -1); - }); - - it ('return next state for CONSOLE_COMPLETION_NEXT', () => { - let action = { type: actions.CONSOLE_COMPLETION_NEXT }; - let state = { - groupSelection: -1, - itemSelection: -1, - completions: [{ - name: 'Apple', - items: [1, 2] - }, { - name: 'Banana', - items: [3] - }] - }; - - state = consoleReducer(state, action); - expect(state).to.have.property('groupSelection', 0); - expect(state).to.have.property('itemSelection', 0); - - state = consoleReducer(state, action); - expect(state).to.have.property('groupSelection', 0); - expect(state).to.have.property('itemSelection', 1); - - state = consoleReducer(state, action); - state = consoleReducer(state, action); - expect(state).to.have.property('groupSelection', -1); - expect(state).to.have.property('itemSelection', -1); - }); - - it ('return next state for CONSOLE_COMPLETION_PREV', () => { - let action = { type: actions.CONSOLE_COMPLETION_PREV }; - let state = { - groupSelection: -1, - itemSelection: -1, - completions: [{ - name: 'Apple', - items: [1, 2] - }, { - name: 'Banana', - items: [3] - }] - }; - - state = consoleReducer(state, action); - expect(state).to.have.property('groupSelection', 1); - expect(state).to.have.property('itemSelection', 0); - - state = consoleReducer(state, action); - expect(state).to.have.property('groupSelection', 0); - expect(state).to.have.property('itemSelection', 1); - - state = consoleReducer(state, action); - state = consoleReducer(state, action); - expect(state).to.have.property('groupSelection', -1); - expect(state).to.have.property('itemSelection', -1); - }); - -}); diff --git a/webpack.config.js b/webpack.config.js index 3d4ef03..486814a 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -9,7 +9,7 @@ module.exports = { index: path.join(src, 'content'), settings: path.join(src, 'pages/settings'), background: path.join(src, 'background'), - console: path.join(src, 'pages', 'console.js') + console: path.join(src, 'console') }, output: { @@ -45,7 +45,7 @@ module.exports = { plugins: [ new HtmlWebpackPlugin({ - template: path.join(src, 'pages', 'console.html'), + template: path.join(src, 'console', 'index.html'), filename: path.join(dist, 'console.html'), inject: false }), -- cgit v1.2.3