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