use iframe-ed command-line

manifest.json

@@ -10,9 +10,14 @@
     }
   ],
   "background": {
-    "scripts": ["build/background.js"]
+    "scripts": [
+      "build/background.js"
+    ]
   },
   "permissions": [
     "sessions"
+  ],
+  "web_accessible_resources": [
+    "build/command-line.html"
   ]
 }

src/command-line/command-line-frame.js

@@ -0,0 +1,19 @@
+import './command-line-frame.scss';
+
+export default class CommandLineFrame {
+  constructor(win, initial = '') {
+    let url = browser.runtime.getURL('build/command-line.html') +
+      '#' + encodeURIComponent(initial);
+
+    let element = window.document.createElement('iframe');
+    element.src = url;
+    element.className = 'vimvixen-command-line-frame';
+    win.document.body.append(element);
+
+    this.element = element;
+  }
+
+  remove() {
+    this.element.remove();
+  }
+}

src/command-line/command-line-frame.scss

@@ -0,0 +1,11 @@
+.vimvixen-command-line-frame {
+  margin: 0;
+  padding: 0;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 20px;
+  position: fixed;
+  z-index: 10000;
+  border: none;
+}

src/command-line/index.html

@@ -9,7 +9,9 @@
     <div>
       <p class='vimvixen-command-line-title'></p>
       <div class='vimvixen-command-line-line'>
-        <i class='vimvixen-command-line-line-prompt'></i><input class='vimvixen-command-line-line-input'></input>
+        <i class='vimvixen-command-line-line-prompt'></i><input
+          id='vimvixen-command-line-line-input'
+          class='vimvixen-command-line-line-input'></input>
       </div>
     </div>
   </body>

src/command-line/index.js

@@ -1 +1,64 @@
 import './index.scss';
+
+const parent = window.parent;
+
+// TODO consider object-oriented
+var prevValue = "";
+
+const blurData = () => {
+  return JSON.stringify({
+    type: 'vimvixen.commandline.blur'
+  });
+};
+
+const keydownData = (input) => {
+  return JSON.stringify({
+    type: 'vimvixen.commandline.enter',
+    value: input.value
+  });
+};
+
+const keyupData = (input) => {
+  return JSON.stringify({
+    type: 'vimvixen.commandline.change',
+    value: input.value
+  });
+};
+
+const handleBlur = () => {
+  parent.postMessage(blurData(), '*');
+};
+
+const handleKeydown = (e) => {
+  switch(e.keyCode) {
+  case KeyboardEvent.DOM_VK_ESCAPE:
+    parent.postMessage(blurData(), '*');
+    break;
+  case KeyboardEvent.DOM_VK_RETURN:
+    parent.postMessage(keydownData(e.target), '*');
+    break;
+  }
+};
+
+const handleKeyup = (e) => {
+  if (e.target.value === prevValue) {
+    return;
+  }
+  parent.postMessage(keyupData(e.target), '*');
+  prevValue = e.target.value;
+};
+
+window.addEventListener('load', () => {
+  let hash = window.location.hash;
+  let initial = '';
+  if (hash.length > 0) {
+    initial = decodeURIComponent(hash.substring(1));
+  }
+
+  let input = window.document.querySelector('#vimvixen-command-line-line-input');
+  input.addEventListener('blur', handleBlur);
+  input.addEventListener('keydown', handleKeydown);
+  input.addEventListener('keyup', handleKeyup);
+  input.value = initial;
+  input.focus();
+});

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