5 files changed, 226 insertions, 0 deletions
diff --git a/src/console/console-frame.js b/src/console/console-frame.js
new file mode 100644
index 0000000..aabb96a
--- /dev/null
+++ b/src/console/console-frame.js
@@ -0,0 +1,44 @@
+import './console-frame.scss';
+import * as messages from '../shared/messages';
+
+export default class ConsoleFrame {
+  constructor(win) {
+    let element = window.document.createElement('iframe');
+    element.src = browser.runtime.getURL('build/console.html');
+    element.className = 'vimvixen-console-frame';
+    win.document.body.append(element);
+
+    this.element = element;
+
+    this.hide();
+  }
+
+  showCommand(text) {
+    this.showFrame();
+
+    let message = {
+      type: 'vimvixen.console.show.command',
+      text: text
+    };
+    messages.send(this.element.contentWindow, message);
+  }
+
+  showError(text) {
+    this.showFrame();
+
+    let message = {
+      type: 'vimvixen.console.show.error',
+      text: text
+    };
+    messages.send(this.element.contentWindow, message);
+  }
+
+  showFrame() {
+    this.element.style.display = 'block';
+  }
+
+  hide() {
+    this.element.style.display = 'none';
+    this.element.blur();
+  }
+}
diff --git a/src/console/console-frame.scss b/src/console/console-frame.scss
new file mode 100644
index 0000000..33bfff3
--- /dev/null
+++ b/src/console/console-frame.scss
@@ -0,0 +1,12 @@
+.vimvixen-console-frame {
+  margin: 0;
+  padding: 0;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  position: fixed;
+  z-index: 10000;
+  border: none;
+  pointer-events:none;
+}
diff --git a/src/console/console.html b/src/console/console.html
new file mode 100644
index 0000000..2eb445d
--- /dev/null
+++ b/src/console/console.html
@@ -0,0 +1,20 @@
+<!doctype html>
+<html>
+  <head>
+    <meta charset=utf-8 />
+    <title>VimVixen console</title>
+    <script src='console.js'></script>
+  </head>
+  <body class='vimvixen-console'>
+    <p id='vimvixen-console-error'
+       class='vimvixen-console-error'></p>
+    <div id='vimvixen-console-command'>
+      <p class='vimvixen-console-title'></p>
+      <div class='vimvixen-console-command'>
+        <i class='vimvixen-console-command-prompt'></i><input
+          id='vimvixen-console-command-input'
+          class='vimvixen-console-command-input'></input>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/src/console/console.js b/src/console/console.js
new file mode 100644
index 0000000..a171ecc
--- /dev/null
+++ b/src/console/console.js
@@ -0,0 +1,89 @@
+import './console.scss';
+import * as messages from '../shared/messages';
+
+const parent = window.parent;
+
+// TODO consider object-oriented
+var prevValue = "";
+
+const blurMessage = () => {
+  return {
+    type: 'vimvixen.commandline.blur'
+  };
+};
+
+const keydownMessage = (input) => {
+  return {
+    type: 'vimvixen.commandline.enter',
+    value: input.value
+  };
+};
+
+const keyupMessage = (input) => {
+  return {
+    type: 'vimvixen.commandline.change',
+    value: input.value
+  };
+};
+
+const handleBlur = () => {
+  messages.send(parent, blurMessage());
+};
+
+const handleKeydown = (e) => {
+  switch(e.keyCode) {
+  case KeyboardEvent.DOM_VK_ESCAPE:
+    messages.send(parent, blurMessage());
+    break;
+  case KeyboardEvent.DOM_VK_RETURN:
+    messages.send(parent, keydownMessage(e.target));
+    break;
+  }
+};
+
+const handleKeyup = (e) => {
+  if (e.target.value === prevValue) {
+    return;
+  }
+  messages.send(parent, keyupMessage(e.target));
+  prevValue = e.target.value;
+};
+
+window.addEventListener('load', () => {
+  let input = window.document.querySelector('#vimvixen-console-command-input');
+  input.addEventListener('blur', handleBlur);
+  input.addEventListener('keydown', handleKeydown);
+  input.addEventListener('keyup', handleKeyup);
+});
+
+const showCommand = (text) => {
+  let input = window.document.querySelector('#vimvixen-console-command-input');
+  input.value = text;
+  input.focus();
+
+  let command = window.document.querySelector('#vimvixen-console-command');
+  command.style.display = 'block';
+
+  let error = window.document.querySelector('#vimvixen-console-error');
+  error.style.display = 'none';
+}
+
+const showError = (text) => {
+  let error = window.document.querySelector('#vimvixen-console-error');
+  error.textContent = text;
+  error.style.display = 'block';
+
+  let command = window.document.querySelector('#vimvixen-console-command');
+  command.style.display = 'none';
+}
+
+messages.receive(window, (message) => {
+  switch (message.type) {
+  case 'vimvixen.console.show.command':
+    showCommand(message.text);
+    break;
+  case 'vimvixen.console.show.error':
+    showError(message.text);
+    break;
+  }
+});
diff --git a/src/console/console.scss b/src/console/console.scss
new file mode 100644
index 0000000..0de873d
--- /dev/null
+++ b/src/console/console.scss
@@ -0,0 +1,61 @@
+html, body, * {
+  margin: 0;
+  padding: 0;
+}
+
+body {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+}
+
+.vimvixen-console {
+  border-top: 1px solid gray;
+  bottom: 0;
+  margin: 0;
+  padding: 0;
+
+  @mixin consoole-font {
+    font-style: normal;
+    font-family: monospace;
+    font-size: 12px;
+    line-height: 16px;
+  }
+
+  &-error {
+    background-color: red;
+    font-weight: bold;
+    color: white;
+
+    @include consoole-font;
+  }
+
+
+  &-title {
+    background-color: lightgray;
+    font-weight: bold;
+    margin: 0;
+    padding: 0;
+
+    @include consoole-font;
+  }
+
+  &-command {
+    background-color: white;
+    display: flex;
+
+    &-prompt:before {
+      content: ':';
+
+      @include consoole-font;
+    }
+
+    &-input {
+      border: none;
+      flex-grow: 1;
+
+      @include consoole-font;
+    }
+  }
+}