1 files changed, 54 insertions, 77 deletions

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(' ');
   }
 }