From 6e5286ef10b26d0a09f3882d6c3bfdbd92223d0f Mon Sep 17 00:00:00 2001 From: Shin'ya Ueoka Date: Fri, 1 Sep 2017 08:51:14 +0900 Subject: [PATCH 1/7] Rename command-line to console --- manifest.json | 2 +- src/command-line/command-line.html | 18 ------------------ .../console-frame.js} | 8 ++++---- .../console-frame.scss} | 2 +- src/console/console.html | 18 ++++++++++++++++++ .../command-line.js => console/console.js} | 4 ++-- .../command-line.scss => console/console.scss} | 4 ++-- src/content/index.js | 8 ++++---- webpack.config.js | 6 +++--- 9 files changed, 35 insertions(+), 35 deletions(-) delete mode 100644 src/command-line/command-line.html rename src/{command-line/command-line-frame.js => console/console-frame.js} (58%) rename src/{command-line/command-line-frame.scss => console/console-frame.scss} (81%) create mode 100644 src/console/console.html rename src/{command-line/command-line.js => console/console.js} (92%) rename src/{command-line/command-line.scss => console/console.scss} (94%) diff --git a/manifest.json b/manifest.json index b687363..4922bd8 100644 --- a/manifest.json +++ b/manifest.json @@ -18,6 +18,6 @@ "sessions" ], "web_accessible_resources": [ - "build/command-line.html" + "build/console.html" ] } diff --git a/src/command-line/command-line.html b/src/command-line/command-line.html deleted file mode 100644 index bad0b66..0000000 --- a/src/command-line/command-line.html +++ /dev/null @@ -1,18 +0,0 @@ - - - - - VimVixen command-line - - - -
-

-
- -
-
- - diff --git a/src/command-line/command-line-frame.js b/src/console/console-frame.js similarity index 58% rename from src/command-line/command-line-frame.js rename to src/console/console-frame.js index 3f1dda4..cf72f25 100644 --- a/src/command-line/command-line-frame.js +++ b/src/console/console-frame.js @@ -1,13 +1,13 @@ -import './command-line-frame.scss'; +import './console-frame.scss'; -export default class CommandLineFrame { +export default class ConsoleFrame { constructor(win, initial = '') { - let url = browser.runtime.getURL('build/command-line.html') + + let url = browser.runtime.getURL('build/console.html') + '#' + encodeURIComponent(initial); let element = window.document.createElement('iframe'); element.src = url; - element.className = 'vimvixen-command-line-frame'; + element.className = 'vimvixen-console-frame'; win.document.body.append(element); this.element = element; diff --git a/src/command-line/command-line-frame.scss b/src/console/console-frame.scss similarity index 81% rename from src/command-line/command-line-frame.scss rename to src/console/console-frame.scss index 88772d9..1bab2b0 100644 --- a/src/command-line/command-line-frame.scss +++ b/src/console/console-frame.scss @@ -1,4 +1,4 @@ -.vimvixen-command-line-frame { +.vimvixen-console-frame { margin: 0; padding: 0; bottom: 0; diff --git a/src/console/console.html b/src/console/console.html new file mode 100644 index 0000000..9177045 --- /dev/null +++ b/src/console/console.html @@ -0,0 +1,18 @@ + + + + + VimVixen console + + + +
+

+
+ +
+
+ + diff --git a/src/command-line/command-line.js b/src/console/console.js similarity index 92% rename from src/command-line/command-line.js rename to src/console/console.js index 34f3f35..f8a91a6 100644 --- a/src/command-line/command-line.js +++ b/src/console/console.js @@ -1,4 +1,4 @@ -import './command-line.scss'; +import './console.scss'; const parent = window.parent; @@ -55,7 +55,7 @@ window.addEventListener('load', () => { initial = decodeURIComponent(hash.substring(1)); } - let input = window.document.querySelector('#vimvixen-command-line-line-input'); + let input = window.document.querySelector('#vimvixen-console-command-input'); input.addEventListener('blur', handleBlur); input.addEventListener('keydown', handleKeydown); input.addEventListener('keyup', handleKeyup); diff --git a/src/command-line/command-line.scss b/src/console/console.scss similarity index 94% rename from src/command-line/command-line.scss rename to src/console/console.scss index 68a0a03..becc15c 100644 --- a/src/command-line/command-line.scss +++ b/src/console/console.scss @@ -10,7 +10,7 @@ body { right: 0; } -.vimvixen-command-line { +.vimvixen-console { border-top: 1px solid gray; bottom: 0; margin: 0; @@ -32,7 +32,7 @@ body { @include input-style; } - &-line { + &-command { background-color: white; display: flex; diff --git a/src/content/index.js b/src/content/index.js index 9bd4e15..591aa98 100644 --- a/src/content/index.js +++ b/src/content/index.js @@ -1,7 +1,7 @@ import * as scrolls from './scrolls'; import * as histories from './histories'; import * as actions from '../shared/actions'; -import CommandLineFrame from '../command-line/command-line-frame'; +import ConsoleFrame from '../console/console-frame'; import Follow from './follow'; let cmd = null; @@ -13,14 +13,14 @@ const invokeEvent = (action) => { switch (action[0]) { case actions.CMD_OPEN: - cmd = new CommandLineFrame(window); + cmd = new ConsoleFrame(window); break; case actions.CMD_TABS_OPEN: if (action[1] || false) { // alter url - cmd = new CommandLineFrame(window, 'open ' + window.location.href); + cmd = new ConsoleFrame(window, 'open ' + window.location.href); } else { - cmd = new CommandLineFrame(window, 'open '); + cmd = new ConsoleFrame(window, 'open '); } break; case actions.SCROLL_LINES: diff --git a/webpack.config.js b/webpack.config.js index f34d203..ba08975 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -8,7 +8,7 @@ module.exports = { entry: { index: path.join(src, 'content'), background: path.join(src, 'background'), - 'command-line': path.join(src, 'command-line', 'command-line.js') + console: path.join(src, 'console', 'console.js') }, output: { @@ -43,8 +43,8 @@ module.exports = { plugins: [ new HtmlWebpackPlugin({ - template: path.join(src, 'command-line', 'command-line.html'), - filename: path.join(dist, 'command-line.html'), + template: path.join(src, 'console', 'console.html'), + filename: path.join(dist, 'console.html'), inject: false }) ] From 95c095f366106952d25982f12d99e4858c54cdb9 Mon Sep 17 00:00:00 2001 From: Shin'ya Ueoka Date: Fri, 1 Sep 2017 09:23:01 +0900 Subject: [PATCH 2/7] add console error element --- src/console/console.html | 1 + src/console/console.scss | 17 +++++++++++++---- 2 files changed, 14 insertions(+), 4 deletions(-) diff --git a/src/console/console.html b/src/console/console.html index 9177045..206976a 100644 --- a/src/console/console.html +++ b/src/console/console.html @@ -6,6 +6,7 @@ +

diff --git a/src/console/console.scss b/src/console/console.scss index becc15c..0de873d 100644 --- a/src/console/console.scss +++ b/src/console/console.scss @@ -16,10 +16,19 @@ body { margin: 0; padding: 0; - @mixin input-style { + @mixin consoole-font { font-style: normal; font-family: monospace; font-size: 12px; + line-height: 16px; + } + + &-error { + background-color: red; + font-weight: bold; + color: white; + + @include consoole-font; } @@ -29,7 +38,7 @@ body { margin: 0; padding: 0; - @include input-style; + @include consoole-font; } &-command { @@ -39,14 +48,14 @@ body { &-prompt:before { content: ':'; - @include input-style; + @include consoole-font; } &-input { border: none; flex-grow: 1; - @include input-style; + @include consoole-font; } } } From adcaf2aa48d0453f231268f5db168376c08e4e6b Mon Sep 17 00:00:00 2001 From: Shin'ya Ueoka Date: Fri, 1 Sep 2017 11:40:24 +0900 Subject: [PATCH 3/7] message passing by helper functions --- src/console/console.js | 27 ++++++++++++++------------- src/content/index.js | 11 ++--------- src/shared/messages.js | 19 +++++++++++++++++++ test/shared/messages.test.js | 25 +++++++++++++++++++++++++ 4 files changed, 60 insertions(+), 22 deletions(-) create mode 100644 src/shared/messages.js create mode 100644 test/shared/messages.test.js diff --git a/src/console/console.js b/src/console/console.js index f8a91a6..67b9eab 100644 --- a/src/console/console.js +++ b/src/console/console.js @@ -1,41 +1,42 @@ import './console.scss'; +import * as messages from '../shared/messages'; const parent = window.parent; // TODO consider object-oriented var prevValue = ""; -const blurData = () => { - return JSON.stringify({ +const blurMessage = () => { + return { type: 'vimvixen.commandline.blur' - }); + }; }; -const keydownData = (input) => { - return JSON.stringify({ +const keydownMessage = (input) => { + return { type: 'vimvixen.commandline.enter', value: input.value - }); + }; }; -const keyupData = (input) => { - return JSON.stringify({ +const keyupMessage = (input) => { + return { type: 'vimvixen.commandline.change', value: input.value - }); + }; }; const handleBlur = () => { - parent.postMessage(blurData(), '*'); + messages.send(parent, blurMessage()); }; const handleKeydown = (e) => { switch(e.keyCode) { case KeyboardEvent.DOM_VK_ESCAPE: - parent.postMessage(blurData(), '*'); + messages.send(parent, blurMessage()); break; case KeyboardEvent.DOM_VK_RETURN: - parent.postMessage(keydownData(e.target), '*'); + messages.send(parent, keydownMessage(e.target)); break; } }; @@ -44,7 +45,7 @@ const handleKeyup = (e) => { if (e.target.value === prevValue) { return; } - parent.postMessage(keyupData(e.target), '*'); + messages.send(parent, keyupMessage(e.target)); prevValue = e.target.value; }; diff --git a/src/content/index.js b/src/content/index.js index 591aa98..ad3f740 100644 --- a/src/content/index.js +++ b/src/content/index.js @@ -1,6 +1,7 @@ import * as scrolls from './scrolls'; import * as histories from './histories'; import * as actions from '../shared/actions'; +import * as messages from '../shared/messages'; import ConsoleFrame from '../console/console-frame'; import Follow from './follow'; @@ -71,15 +72,7 @@ window.addEventListener("keypress", (e) => { }); }); -window.addEventListener('message', (e) => { - let message; - try { - message = JSON.parse(e.data); - } catch (e) { - // ignore message posted by author of web page - return; - } - +messages.receive(window, (message) => { switch (message.type) { case 'vimvixen.commandline.blur': if (cmd) { diff --git a/src/shared/messages.js b/src/shared/messages.js new file mode 100644 index 0000000..517fc4c --- /dev/null +++ b/src/shared/messages.js @@ -0,0 +1,19 @@ +const receive = (win, callback) => { + win.addEventListener('message', (e) => { + let message; + try { + message = JSON.parse(e.data); + } catch (e) { + // ignore message posted by author of web page + return; + } + + callback(message); + }) +} + +const send = (win, message) => { + win.postMessage(JSON.stringify(message), '*'); +} + +export { receive, send }; diff --git a/test/shared/messages.test.js b/test/shared/messages.test.js new file mode 100644 index 0000000..0ebaf1a --- /dev/null +++ b/test/shared/messages.test.js @@ -0,0 +1,25 @@ +import { expect } from "chai"; +import * as messages from '../../src/shared/messages'; + +describe('messages', () => { + describe('#receive', () => { + it('received a message', (done) => { + messages.receive(window, (message) => { + expect(message).to.deep.equal({ type: 'vimvixen.test' }); + done(); + }); + window.postMessage(JSON.stringify({ type: 'vimvixen.test' }), '*'); + }); + }); + + describe('#send', () => { + it('sends a message', (done) => { + window.addEventListener('message', (e) => { + let json = JSON.parse(e.data); + expect(json).to.deep.equal({ type: 'vimvixen.test' }); + done(); + }); + messages.send(window, { type: 'vimvixen.test' }); + }); + }); +}); From d51b6744679f7a0c40c5479b2cf386a6b04c34c9 Mon Sep 17 00:00:00 2001 From: Shin'ya Ueoka Date: Fri, 1 Sep 2017 12:38:51 +0900 Subject: [PATCH 4/7] error text --- src/console/console.html | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/console/console.html b/src/console/console.html index 206976a..feee5d0 100644 --- a/src/console/console.html +++ b/src/console/console.html @@ -6,7 +6,8 @@ -

+

From d5007a747cdc39b2978847cd7c012515e5169ff7 Mon Sep 17 00:00:00 2001 From: Shin'ya Ueoka Date: Fri, 1 Sep 2017 12:50:29 +0900 Subject: [PATCH 5/7] error title --- src/console/console-frame.js | 36 ++++++++++++++++++++++++++++++------ src/console/console.html | 2 +- src/console/console.js | 23 +++++++++++++++-------- src/content/index.js | 13 +++++-------- 4 files changed, 51 insertions(+), 23 deletions(-) diff --git a/src/console/console-frame.js b/src/console/console-frame.js index cf72f25..f8aeeeb 100644 --- a/src/console/console-frame.js +++ b/src/console/console-frame.js @@ -1,19 +1,43 @@ import './console-frame.scss'; +import * as messages from '../shared/messages'; export default class ConsoleFrame { constructor(win, initial = '') { - let url = browser.runtime.getURL('build/console.html') + - '#' + encodeURIComponent(initial); - let element = window.document.createElement('iframe'); - element.src = url; + element.src = browser.runtime.getURL('build/console.html'); element.className = 'vimvixen-console-frame'; win.document.body.append(element); this.element = element; + + this.hide(); + } + + showCommand(text) { + this.showFrame(); + + let message = { + type: 'vimvixen.console.show.command', + text: text + }; + messages.send(this.element.contentWindow, message); + } + + showError(text) { + this.showFrame(); + + let message = { + type: 'vimvixen.console.show.error', + text: text + }; + messages.send(this.element.contentWindow, message); + } + + showFrame() { + this.element.style.display = 'block'; } - remove() { - this.element.remove(); + hide() { + this.element.style.display = 'none'; } } diff --git a/src/console/console.html b/src/console/console.html index feee5d0..228660b 100644 --- a/src/console/console.html +++ b/src/console/console.html @@ -6,7 +6,7 @@ -

diff --git a/src/console/console.js b/src/console/console.js index 67b9eab..2db9d29 100644 --- a/src/console/console.js +++ b/src/console/console.js @@ -50,16 +50,23 @@ const handleKeyup = (e) => { }; 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-console-command-input'); input.addEventListener('blur', handleBlur); input.addEventListener('keydown', handleKeydown); input.addEventListener('keyup', handleKeyup); - input.value = initial; - input.focus(); +}); + +messages.receive(window, (message) => { + switch (message.type) { + case 'vimvixen.console.show.command': + if (message.text) { + let input = window.document.querySelector('#vimvixen-console-command-input'); + input.value = message.text; + input.focus(); + } + break; + case 'vimvixen.console.show.error': + window.document.querySelector('#vimvixen-console-error').textContent = message.text; + break; + } }); diff --git a/src/content/index.js b/src/content/index.js index ad3f740..66b1121 100644 --- a/src/content/index.js +++ b/src/content/index.js @@ -5,7 +5,7 @@ import * as messages from '../shared/messages'; import ConsoleFrame from '../console/console-frame'; import Follow from './follow'; -let cmd = null; +let vvConsole = new ConsoleFrame(window); const invokeEvent = (action) => { if (typeof action === 'undefined' || action === null) { @@ -14,14 +14,14 @@ const invokeEvent = (action) => { switch (action[0]) { case actions.CMD_OPEN: - cmd = new ConsoleFrame(window); + vvConsole.showCommand(''); break; case actions.CMD_TABS_OPEN: if (action[1] || false) { // alter url - cmd = new ConsoleFrame(window, 'open ' + window.location.href); + vvConsole.showCommand('open ' + window.location.href); } else { - cmd = new ConsoleFrame(window, 'open '); + vvConsole.showCommand('open '); } break; case actions.SCROLL_LINES: @@ -75,10 +75,7 @@ window.addEventListener("keypress", (e) => { messages.receive(window, (message) => { switch (message.type) { case 'vimvixen.commandline.blur': - if (cmd) { - cmd.remove(); - cmd = null; - } + vvConsole.hide(); break; case 'vimvixen.commandline.enter': browser.runtime.sendMessage({ From 2312ba6560fe8ca81a6ed100a726fe970cba1fd5 Mon Sep 17 00:00:00 2001 From: Shin'ya Ueoka Date: Fri, 1 Sep 2017 16:21:21 +0900 Subject: [PATCH 6/7] blur console frame --- src/console/console-frame.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/console/console-frame.js b/src/console/console-frame.js index f8aeeeb..dc67650 100644 --- a/src/console/console-frame.js +++ b/src/console/console-frame.js @@ -39,5 +39,6 @@ export default class ConsoleFrame { hide() { this.element.style.display = 'none'; + this.element.blur(); } } From 02ea10a357955752dda4c72c49de2340997c9818 Mon Sep 17 00:00:00 2001 From: Shin'ya Ueoka Date: Fri, 1 Sep 2017 16:29:36 +0900 Subject: [PATCH 7/7] show error text --- src/console/console-frame.js | 2 +- src/console/console-frame.scss | 1 + src/console/console.html | 2 +- src/console/console.js | 29 +++++++++++++++++++++++------ 4 files changed, 26 insertions(+), 8 deletions(-) diff --git a/src/console/console-frame.js b/src/console/console-frame.js index dc67650..aabb96a 100644 --- a/src/console/console-frame.js +++ b/src/console/console-frame.js @@ -2,7 +2,7 @@ import './console-frame.scss'; import * as messages from '../shared/messages'; export default class ConsoleFrame { - constructor(win, initial = '') { + constructor(win) { let element = window.document.createElement('iframe'); element.src = browser.runtime.getURL('build/console.html'); element.className = 'vimvixen-console-frame'; diff --git a/src/console/console-frame.scss b/src/console/console-frame.scss index 1bab2b0..33bfff3 100644 --- a/src/console/console-frame.scss +++ b/src/console/console-frame.scss @@ -8,4 +8,5 @@ position: fixed; z-index: 10000; border: none; + pointer-events:none; } diff --git a/src/console/console.html b/src/console/console.html index 228660b..2eb445d 100644 --- a/src/console/console.html +++ b/src/console/console.html @@ -8,7 +8,7 @@

-
+

{ input.addEventListener('keyup', handleKeyup); }); +const showCommand = (text) => { + let input = window.document.querySelector('#vimvixen-console-command-input'); + input.value = text; + input.focus(); + + let command = window.document.querySelector('#vimvixen-console-command'); + command.style.display = 'block'; + + let error = window.document.querySelector('#vimvixen-console-error'); + error.style.display = 'none'; +} + +const showError = (text) => { + let error = window.document.querySelector('#vimvixen-console-error'); + error.textContent = text; + error.style.display = 'block'; + + let command = window.document.querySelector('#vimvixen-console-command'); + command.style.display = 'none'; +} + messages.receive(window, (message) => { switch (message.type) { case 'vimvixen.console.show.command': - if (message.text) { - let input = window.document.querySelector('#vimvixen-console-command-input'); - input.value = message.text; - input.focus(); - } + showCommand(message.text); break; case 'vimvixen.console.show.error': - window.document.querySelector('#vimvixen-console-error').textContent = message.text; + showError(message.text); break; } });