add command-line bar

src/background/key-queue.js

@@ -2,6 +2,7 @@ import * as keys from './keys';
 import * as actions from '../shared/actions';
 
 const DEFAULT_KEYMAP = [
+  { keys: [{ code: KeyboardEvent.DOM_VK_SEMICOLON, shift: true }], action: [ actions.CMD_OPEN ]},
   { keys: [{ code: KeyboardEvent.DOM_VK_K }], action: [ actions.SCROLL_UP, 1 ]},
   { keys: [{ code: KeyboardEvent.DOM_VK_J }], action: [ actions.SCROLL_DOWN, 1 ]},
   { keys: [{ code: KeyboardEvent.DOM_VK_G }, { code: KeyboardEvent.DOM_VK_G }], action: [ actions.SCROLL_TOP ]},

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;
+}

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

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;

src/shared/actions.js

@@ -1,3 +1,4 @@
+export const CMD_OPEN = 'cmd.open';
 export const TABS_PREV = 'tabs.prev';
 export const TABS_NEXT = 'tabs.next';
 export const SCROLL_UP = 'scroll.up';
@@ -11,6 +12,7 @@ const BACKGROUND_ACTION_SET = new Set([
 ]);
 
 const CONTENT_ACTION_SET = new Set([
+  CMD_OPEN,
   SCROLL_UP,
   SCROLL_DOWN,
   SCROLL_TOP,