4 files changed, 73 insertions, 10 deletions
diff --git a/src/console/console-frame.js b/src/console/console-frame.js
index ea9f523..11c36f4 100644
--- a/src/console/console-frame.js
+++ b/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);
+  }
 }
diff --git a/src/console/console.html b/src/console/console.html
index 2eb445d..4222f12 100644
--- a/src/console/console.html
+++ b/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'
diff --git a/src/console/console.js b/src/console/console.js
index e0227aa..e54611d 100644
--- a/src/console/console.js
+++ b/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;
   }
 });
diff --git a/src/console/console.scss b/src/console/console.scss
index 0de873d..b91e0b8 100644
--- a/src/console/console.scss
+++ b/src/console/console.scss
@@ -23,20 +23,40 @@ body {
     line-height: 16px;
   }
 
-  &-error {
-    background-color: red;
-    font-weight: bold;
-    color: white;
+  &-completion {
+    background-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;
 
-  &-title {
-    background-color: lightgray;
+      &-caption {
+        display: inline-block;
+        width: 40%;
+      }
+
+      &-url {
+        display: inline-block;
+        color: green;
+      }
+    }
+
+  }
+
+  &-error {
+    background-color: red;
     font-weight: bold;
-    margin: 0;
-    padding: 0;
+    color: white;
 
     @include consoole-font;
   }