add setCompletions

src/console/console-frame.js

@@ -51,4 +51,8 @@ export default class ConsoleFrame {
   isErrorShown() {
     return this.element.style.display === 'block' && this.errorShown;
   }
+
+  setCompletions(completions) {
+    messages.send(this.element.contentWindow, completions);
+  }
 }

src/console/console.html

@@ -9,7 +9,7 @@
     <p id='vimvixen-console-error'
        class='vimvixen-console-error'></p>
     <div id='vimvixen-console-command'>
-      <p class='vimvixen-console-title'></p>
+      <ul id='vimvixen-console-completion' class='vimvixen-console-completion'></ul>
       <div class='vimvixen-console-command'>
         <i class='vimvixen-console-command-prompt'></i><input
           id='vimvixen-console-command-input'

src/console/console.js

@@ -75,6 +75,42 @@ const showError = (text) => {
 
   let command = window.document.querySelector('#vimvixen-console-command');
   command.style.display = 'none';
+
+  let completion  = window.document.querySelector('#vimvixen-console-completion');
+  command.style.display = 'none';
+}
+
+const setCompletions = (completions) => {
+  let completion  = window.document.querySelector('#vimvixen-console-completion');
+  completion.style.display = 'block';
+  completion.innerHTML = '';
+
+  for (let group of completions) {
+    let title = window.document.createElement('li');
+    title.className = 'vimvixen-console-completion-title';
+    title.textContent = group.name;
+
+    completion.append(title);
+
+    for (let item of group.items) {
+      let caption = window.document.createElement('span');
+      caption.textContent = item.caption;
+      caption.className = 'vimvixen-console-completion-item-caption';
+
+      let url = window.document.createElement('span');
+      url.textContent = item.url;
+      url.className = 'vimvixen-console-completion-item-url';
+
+      let li = window.document.createElement('li');
+      li.style.backgroundImage = 'url(' + item.icon + ')';
+      li.className = 'vimvixen-console-completion-item';
+      li.append(caption);
+      li.append(url);
+      li.setAttribute('data-content', item.content);
+
+      completion.append(li);
+    }
+  }
 }
 
 messages.receive(window, (message) => {
@@ -85,5 +121,8 @@ messages.receive(window, (message) => {
   case 'vimvixen.console.show.error':
     showError(message.text);
     break;
+  case 'vimvixen.console.set.completions':
+    setCompletions(message.completions);
+    break;
   }
 });

src/console/console.scss

@@ -23,20 +23,40 @@ body {
     line-height: 16px;
   }
 
-  &-error {
+  &-completion {
-    background-color: red;
+    background-color: white;
-    font-weight: bold;
-    color: white;
 
     @include consoole-font;
-  }
-
 
     &-title {
       background-color: lightgray;
       font-weight: bold;
       margin: 0;
       padding: 0;
+    }
+
+    &-item {
+      padding-left: 1.5rem;
+      background-position: 0 center;
+      background-repeat: no-repeat;
+
+      &-caption {
+        display: inline-block;
+        width: 40%;
+      }
+
+      &-url {
+        display: inline-block;
+        color: green;
+      }
+    }
+
+  }
+
+  &-error {
+    background-color: red;
+    font-weight: bold;
+    color: white;
 
     @include consoole-font;
   }