3 files changed, 38 insertions, 148 deletions

diff --git a/src/content/footer-line.css b/src/content/footer-line.css
deleted file mode 100644
index 041776c..0000000
--- a/src/content/footer-line.css
+++ /dev/null
@@ -1,46 +0,0 @@
-.vimvixen-footerline {
-  border-top: 1px solid gray;
-  bottom: 0;
-  box-sizing: border-box;
-  font-family: monospace;
-  font-size: 12px;
-  left: 0;
-  margin: 0;
-  padding: 0;
-  position: fixed;
-  right: 0;
-  z-index: 10000;
-}
-
-.vimvixen-footerline-title {
-  background-color: lightgray;
-  font-weight: bold;
-  margin: 0;
-  padding: 0;
-}
-
-.vimvixen-footerline-container-outer {
-  background-color: white;
-  position: relative;
-}
-
-.vimvixen-footerline-container-outer:before {
-  content: ':';
-  background-color: white;
-  float: left;
-  text-align: right;
-  width: 12px;
-}
-
-.vimvixen-footerline-container-inner {
-  position: absolute;
-  left: 12px;
-  right: 0;
-}
-
-.vimvixen-footerline-input {
-  margin: 0;
-  padding: 0;
-  width: 100%;
-  border: none;
-}
diff --git a/src/content/footer-line.js b/src/content/footer-line.js
deleted file mode 100644
index fc1dc7b..0000000
--- a/src/content/footer-line.js
+++ /dev/null
@@ -1,78 +0,0 @@
-import './footer-line.css';
-
-export default class FooterLine {
-  constructor(doc, initial = '') {
-    this.initUi(doc);
-
-    this.enteredCallback = () => {}
-    this.promptChangeCallback = () => {}
-
-    this.input.addEventListener('blur', this.handleBlur.bind(this));
-    this.input.addEventListener('keydown', this.handleKeydown.bind(this));
-    this.input.addEventListener('keyup', this.handleKeyup.bind(this));
-    this.input.value = initial;
-  }
-
-  initUi(doc) {
-    this.title = doc.createElement('p');
-    this.title.className = 'vimvixen-footerline-title';
-
-    let containerInner = doc.createElement('div');
-    containerInner.className = 'vimvixen-footerline-container-inner';
-
-    let containerOuter = doc.createElement('div');
-    containerOuter.className = 'vimvixen-footerline-container-outer';
-
-    this.input = doc.createElement('input');
-    this.input.className = 'vimvixen-footerline-input';
-
-    this.wrapper = doc.createElement('div');
-    this.wrapper.className = 'vimvixen-footerline';
-
-    containerOuter.append(containerInner);
-    containerInner.append(this.input);
-    this.wrapper.append(this.title);
-    this.wrapper.append(containerOuter);
-    doc.body.append(this.wrapper)
-  }
-
-  focus() {
-    this.input.focus();
-  }
-
-  remove() {
-    this.wrapper.remove();
-  }
-
-  onPromptChange(callback) {
-    this.promptChangeCallback = callback;
-  }
-
-  onEntered(callback) {
-    this.enteredCallback = callback;
-  }
-
-  handleBlur() {
-    this.remove();
-  }
-
-  handleKeydown(e) {
-    this.prevValue = e.target.value;
-    switch(e.keyCode) {
-    case KeyboardEvent.DOM_VK_ESCAPE:
-      this.remove();
-      break;
-    case KeyboardEvent.DOM_VK_RETURN:
-      this.enteredCallback(e);
-      break;
-    }
-  }
-
-  handleKeyup(e) {
-    if (e.target.value === this.prevValue) {
-      return;
-    }
-    this.promptChangeCallback(e);
-    this.prevValue = e.target.value;
-  }
-}
diff --git a/src/content/index.js b/src/content/index.js
index 9dd3706..9bd4e15 100644
--- a/src/content/index.js
+++ b/src/content/index.js
@@ -1,29 +1,10 @@
 import * as scrolls from './scrolls';
 import * as histories from './histories';
 import * as actions from '../shared/actions';
-import FooterLine from './footer-line';
+import CommandLineFrame from '../command-line/command-line-frame';
 import Follow from './follow';
 
-var footer = null;
-
-const createFooterLine = (initial = '') => {
-  footer = new FooterLine(document, initial);
-  footer.onPromptChange((e) => {
-    let request = {
-      type: 'event.cmd.suggest',
-      text: e.target.value
-    };
-    browser.runtime.sendMessage(request);
-  });
-  footer.onEntered((e) => {
-    let request = {
-      type: 'event.cmd.enter',
-      text: e.target.value
-    };
-    browser.runtime.sendMessage(request);
-  });
-  footer.focus();
-}
+let cmd = null;
 
 const invokeEvent = (action) => {
   if (typeof action === 'undefined' || action === null) {
@@ -32,14 +13,14 @@ const invokeEvent = (action) => {
 
   switch (action[0]) {
   case actions.CMD_OPEN:
-    createFooterLine();
+    cmd = new CommandLineFrame(window);
     break;
   case actions.CMD_TABS_OPEN:
     if (action[1] || false) {
       // alter url
-      createFooterLine('open ' + window.location.href);
+      cmd = new CommandLineFrame(window, 'open ' + window.location.href);
     } else {
-      createFooterLine('open ');
+      cmd = new CommandLineFrame(window, 'open ');
     }
     break;
   case actions.SCROLL_LINES:
@@ -89,3 +70,36 @@ window.addEventListener("keypress", (e) => {
         console.log(`Vim Vixen: ${err}`);
       });
 });
+
+window.addEventListener('message', (e) => {
+  let message;
+  try {
+    message = JSON.parse(e.data);
+  } catch (e) {
+    // ignore message posted by author of web page
+    return;
+  }
+
+  switch (message.type) {
+  case 'vimvixen.commandline.blur':
+    if (cmd) {
+      cmd.remove();
+      cmd = null;
+    }
+    break;
+  case 'vimvixen.commandline.enter':
+    browser.runtime.sendMessage({
+      type: 'event.cmd.enter',
+      text: message.value
+    });
+    break;
+  case 'vimvixen.commandline.change':
+    browser.runtime.sendMessage({
+      type: 'event.cmd.suggest',
+      text: message.value
+    });
+    break;
+  default:
+    return;
+  }
+});