fix command-line box

src/content/footer-line.css

@@ -19,9 +19,26 @@
   padding: 0;
 }
 
-.vimvixen-footerline-input{
+.vimvixen-footerline-container-outer {
   background-color: white;
-  bottom: 0;
+  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%;

src/content/footer-line.js

@@ -2,21 +2,37 @@ import './footer-line.css';
 
 export default class FooterLine {
   constructor(doc) {
+    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));
+  }
+
+  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(this.input);
+    this.wrapper.append(containerOuter);
     doc.body.append(this.wrapper)
-
-    this.input.addEventListener('blur', this.handleBlur.bind(this));
-    this.input.addEventListener('keydown', this.handleKeydown.bind(this));
   }
 
   focus() {
@@ -27,13 +43,35 @@ export default class FooterLine {
     this.wrapper.remove();
   }
 
+  onPromptChange(callback) {
+    this.promptChangeCallback = callback;
+  }
+
+  onEntered(callback) {
+    this.enteredCallback = callback;
+  }
+
   handleBlur() {
     this.remove();
   }
 
   handleKeydown(e) {
-    if (e.keyCode === KeyboardEvent.DOM_VK_ESCAPE) {
+    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;
+  }
 }