3 files changed, 76 insertions, 0 deletions
diff --git a/src/content/footer-line.css b/src/content/footer-line.css
new file mode 100644
index 0000000..ce35143
--- /dev/null
+++ b/src/content/footer-line.css
@@ -0,0 +1,29 @@
+.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-input{
+  background-color: white;
+  bottom: 0;
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  border: none;
+}
diff --git a/src/content/footer-line.js b/src/content/footer-line.js
new file mode 100644
index 0000000..2a931f3
--- /dev/null
+++ b/src/content/footer-line.js
@@ -0,0 +1,39 @@
+import './footer-line.css';
+
+export default class FooterLine {
+  constructor(doc) {
+    this.title = doc.createElement('p');
+    this.title.className = 'vimvixen-footerline-title';
+
+    this.input = doc.createElement('input');
+    this.input.className = 'vimvixen-footerline-input';
+
+    this.wrapper = doc.createElement('div');
+    this.wrapper.className = 'vimvixen-footerline';
+
+    this.wrapper.append(this.title);
+    this.wrapper.append(this.input);
+    doc.body.append(this.wrapper)
+
+    this.input.addEventListener('blur', this.handleBlur.bind(this));
+    this.input.addEventListener('keydown', this.handleKeydown.bind(this));
+  }
+
+  focus() {
+    this.input.focus();
+  }
+
+  remove() {
+    this.wrapper.remove();
+  }
+
+  handleBlur() {
+    this.remove();
+  }
+
+  handleKeydown(e) {
+    if (e.keyCode === KeyboardEvent.DOM_VK_ESCAPE) {
+      this.remove();
+    }
+  }
+}
diff --git a/src/content/index.js b/src/content/index.js
index 03efc5e..8cf0aed 100644
--- a/src/content/index.js
+++ b/src/content/index.js
@@ -1,12 +1,20 @@
 import * as scrolls from './scrolls';
+import FooterLine from './footer-line';
 import * as actions from '../shared/actions';
 
+var footer = null;
+
 const invokeEvent = (action) => {
   if (typeof action === 'undefined' || action === null) {
     return;
   }
 
   switch (action[0]) {
+  case actions.CMD_OPEN:
+    footer = new FooterLine(document);
+    footer.input.value = ':';
+    footer.focus();
+    break;
   case actions.SCROLL_UP:
     scrolls.scrollUp(window, action[1] || 1);
     break;