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