VimVixen command-line

From a808b2894090f30e65f396f7caa5af36af83442c Mon Sep 17 00:00:00 2001 From: Shin'ya Ueoka Date: Mon, 28 Aug 2017 20:08:16 +0900 Subject: command-line as background page --- src/command-line/index.html | 16 ++++++++++++++++ src/command-line/index.js | 1 + src/command-line/index.scss | 42 ++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 59 insertions(+) create mode 100644 src/command-line/index.html create mode 100644 src/command-line/index.js create mode 100644 src/command-line/index.scss (limited to 'src') diff --git a/src/command-line/index.html b/src/command-line/index.html new file mode 100644 index 0000000..e9e4123 --- /dev/null +++ b/src/command-line/index.html @@ -0,0 +1,16 @@ + + + + + VimVixen command-line + + + +

+ +

+ + diff --git a/src/command-line/index.js b/src/command-line/index.js new file mode 100644 index 0000000..67aac61 --- /dev/null +++ b/src/command-line/index.js @@ -0,0 +1 @@ +import './index.scss'; diff --git a/src/command-line/index.scss b/src/command-line/index.scss new file mode 100644 index 0000000..2256bf2 --- /dev/null +++ b/src/command-line/index.scss @@ -0,0 +1,42 @@ +html, body, * { + margin: 0; + padding: 0; +} + +.vimvixen-command-line { + border-top: 1px solid gray; + bottom: 0; + margin: 0; + padding: 0; + + &-title { + background-color: lightgray; + font-weight: bold; + margin: 0; + padding: 0; + } + + &-line { + background-color: white; + display: flex; + + @mixin input-style { + font-style: normal; + font-family: monospace; + font-size: 12px; + } + + &-prompt:before { + content: ':'; + + @include input-style; + } + + &-input { + border: none; + flex-grow: 1; + + @include input-style; + } + } +} -- cgit v1.2.3 From dc4286460791c3b76fe29d085502a11c61c78551 Mon Sep 17 00:00:00 2001 From: Shin'ya Ueoka Date: Tue, 29 Aug 2017 20:56:20 +0900 Subject: use iframe-ed command-line --- manifest.json | 7 +++- src/command-line/command-line-frame.js | 19 ++++++++++ src/command-line/command-line-frame.scss | 11 ++++++ src/command-line/index.html | 4 +- src/command-line/index.js | 63 ++++++++++++++++++++++++++++++++ src/content/index.js | 62 +++++++++++++++++++------------ 6 files changed, 140 insertions(+), 26 deletions(-) create mode 100644 src/command-line/command-line-frame.js create mode 100644 src/command-line/command-line-frame.scss (limited to 'src') diff --git a/manifest.json b/manifest.json index 1d511fa..b687363 100644 --- a/manifest.json +++ b/manifest.json @@ -10,9 +10,14 @@ } ], "background": { - "scripts": ["build/background.js"] + "scripts": [ + "build/background.js" + ] }, "permissions": [ "sessions" + ], + "web_accessible_resources": [ + "build/command-line.html" ] } diff --git a/src/command-line/command-line-frame.js b/src/command-line/command-line-frame.js new file mode 100644 index 0000000..3f1dda4 --- /dev/null +++ b/src/command-line/command-line-frame.js @@ -0,0 +1,19 @@ +import './command-line-frame.scss'; + +export default class CommandLineFrame { + constructor(win, initial = '') { + let url = browser.runtime.getURL('build/command-line.html') + + '#' + encodeURIComponent(initial); + + let element = window.document.createElement('iframe'); + element.src = url; + element.className = 'vimvixen-command-line-frame'; + win.document.body.append(element); + + this.element = element; + } + + remove() { + this.element.remove(); + } +} diff --git a/src/command-line/command-line-frame.scss b/src/command-line/command-line-frame.scss new file mode 100644 index 0000000..67bf514 --- /dev/null +++ b/src/command-line/command-line-frame.scss @@ -0,0 +1,11 @@ +.vimvixen-command-line-frame { + margin: 0; + padding: 0; + bottom: 0; + left: 0; + width: 100%; + height: 20px; + position: fixed; + z-index: 10000; + border: none; +} diff --git a/src/command-line/index.html b/src/command-line/index.html index e9e4123..bad0b66 100644 --- a/src/command-line/index.html +++ b/src/command-line/index.html @@ -9,7 +9,9 @@

- +

diff --git a/src/command-line/index.js b/src/command-line/index.js index 67aac61..f99afa0 100644 --- a/src/command-line/index.js +++ b/src/command-line/index.js @@ -1 +1,64 @@ import './index.scss'; + +const parent = window.parent; + +// TODO consider object-oriented +var prevValue = ""; + +const blurData = () => { + return JSON.stringify({ + type: 'vimvixen.commandline.blur' + }); +}; + +const keydownData = (input) => { + return JSON.stringify({ + type: 'vimvixen.commandline.enter', + value: input.value + }); +}; + +const keyupData = (input) => { + return JSON.stringify({ + type: 'vimvixen.commandline.change', + value: input.value + }); +}; + +const handleBlur = () => { + parent.postMessage(blurData(), '*'); +}; + +const handleKeydown = (e) => { + switch(e.keyCode) { + case KeyboardEvent.DOM_VK_ESCAPE: + parent.postMessage(blurData(), '*'); + break; + case KeyboardEvent.DOM_VK_RETURN: + parent.postMessage(keydownData(e.target), '*'); + break; + } +}; + +const handleKeyup = (e) => { + if (e.target.value === prevValue) { + return; + } + parent.postMessage(keyupData(e.target), '*'); + prevValue = e.target.value; +}; + +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-command-line-line-input'); + input.addEventListener('blur', handleBlur); + input.addEventListener('keydown', handleKeydown); + input.addEventListener('keyup', handleKeyup); + input.value = initial; + input.focus(); +}); diff --git a/src/content/index.js b/src/content/index.js index 9dd3706..9bd4e15 100644 --- a/src/content/index.js +++ b/src/content/index.js @@ -1,29 +1,10 @@ import * as scrolls from './scrolls'; import * as histories from './histories'; import * as actions from '../shared/actions'; -import FooterLine from './footer-line'; +import CommandLineFrame from '../command-line/command-line-frame'; import Follow from './follow'; -var footer = null; - -const createFooterLine = (initial = '') => { - footer = new FooterLine(document, initial); - footer.onPromptChange((e) => { - let request = { - type: 'event.cmd.suggest', - text: e.target.value - }; - browser.runtime.sendMessage(request); - }); - footer.onEntered((e) => { - let request = { - type: 'event.cmd.enter', - text: e.target.value - }; - browser.runtime.sendMessage(request); - }); - footer.focus(); -} +let cmd = null; const invokeEvent = (action) => { if (typeof action === 'undefined' || action === null) { @@ -32,14 +13,14 @@ const invokeEvent = (action) => { switch (action[0]) { case actions.CMD_OPEN: - createFooterLine(); + cmd = new CommandLineFrame(window); break; case actions.CMD_TABS_OPEN: if (action[1] || false) { // alter url - createFooterLine('open ' + window.location.href); + cmd = new CommandLineFrame(window, 'open ' + window.location.href); } else { - createFooterLine('open '); + cmd = new CommandLineFrame(window, 'open '); } break; case actions.SCROLL_LINES: @@ -89,3 +70,36 @@ window.addEventListener("keypress", (e) => { console.log(`Vim Vixen: ${err}`); }); }); + +window.addEventListener('message', (e) => { + let message; + try { + message = JSON.parse(e.data); + } catch (e) { + // ignore message posted by author of web page + return; + } + + switch (message.type) { + case 'vimvixen.commandline.blur': + if (cmd) { + cmd.remove(); + cmd = null; + } + break; + case 'vimvixen.commandline.enter': + browser.runtime.sendMessage({ + type: 'event.cmd.enter', + text: message.value + }); + break; + case 'vimvixen.commandline.change': + browser.runtime.sendMessage({ + type: 'event.cmd.suggest', + text: message.value + }); + break; + default: + return; + } +}); -- cgit v1.2.3 From a129c9665832c1c8f77bafd05bb2367221af3a51 Mon Sep 17 00:00:00 2001 From: Shin'ya Ueoka Date: Tue, 29 Aug 2017 20:56:56 +0900 Subject: remove footer-line --- src/content/footer-line.css | 46 -------------------------- src/content/footer-line.js | 78 --------------------------------------------- 2 files changed, 124 deletions(-) delete mode 100644 src/content/footer-line.css delete mode 100644 src/content/footer-line.js (limited to 'src') diff --git a/src/content/footer-line.css b/src/content/footer-line.css deleted file mode 100644 index 041776c..0000000 --- a/src/content/footer-line.css +++ /dev/null @@ -1,46 +0,0 @@ -.vimvixen-footerline { - border-top: 1px solid gray; - bottom: 0; - box-sizing: border-box; - font-family: monospace; - font-size: 12px; - left: 0; - margin: 0; - padding: 0; - position: fixed; - right: 0; - z-index: 10000; -} - -.vimvixen-footerline-title { - background-color: lightgray; - font-weight: bold; - margin: 0; - padding: 0; -} - -.vimvixen-footerline-container-outer { - background-color: white; - position: relative; -} - -.vimvixen-footerline-container-outer:before { - content: ':'; - background-color: white; - float: left; - text-align: right; - width: 12px; -} - -.vimvixen-footerline-container-inner { - position: absolute; - left: 12px; - right: 0; -} - -.vimvixen-footerline-input { - margin: 0; - padding: 0; - width: 100%; - border: none; -} diff --git a/src/content/footer-line.js b/src/content/footer-line.js deleted file mode 100644 index fc1dc7b..0000000 --- a/src/content/footer-line.js +++ /dev/null @@ -1,78 +0,0 @@ -import './footer-line.css'; - -export default class FooterLine { - constructor(doc, initial = '') { - this.initUi(doc); - - this.enteredCallback = () => {} - this.promptChangeCallback = () => {} - - this.input.addEventListener('blur', this.handleBlur.bind(this)); - this.input.addEventListener('keydown', this.handleKeydown.bind(this)); - this.input.addEventListener('keyup', this.handleKeyup.bind(this)); - this.input.value = initial; - } - - initUi(doc) { - this.title = doc.createElement('p'); - this.title.className = 'vimvixen-footerline-title'; - - let containerInner = doc.createElement('div'); - containerInner.className = 'vimvixen-footerline-container-inner'; - - let containerOuter = doc.createElement('div'); - containerOuter.className = 'vimvixen-footerline-container-outer'; - - this.input = doc.createElement('input'); - this.input.className = 'vimvixen-footerline-input'; - - this.wrapper = doc.createElement('div'); - this.wrapper.className = 'vimvixen-footerline'; - - containerOuter.append(containerInner); - containerInner.append(this.input); - this.wrapper.append(this.title); - this.wrapper.append(containerOuter); - doc.body.append(this.wrapper) - } - - focus() { - this.input.focus(); - } - - remove() { - this.wrapper.remove(); - } - - onPromptChange(callback) { - this.promptChangeCallback = callback; - } - - onEntered(callback) { - this.enteredCallback = callback; - } - - handleBlur() { - this.remove(); - } - - handleKeydown(e) { - this.prevValue = e.target.value; - switch(e.keyCode) { - case KeyboardEvent.DOM_VK_ESCAPE: - this.remove(); - break; - case KeyboardEvent.DOM_VK_RETURN: - this.enteredCallback(e); - break; - } - } - - handleKeyup(e) { - if (e.target.value === this.prevValue) { - return; - } - this.promptChangeCallback(e); - this.prevValue = e.target.value; - } -} -- cgit v1.2.3 From 041eacf4fbea1486b00c196343bbbe2df4f0970b Mon Sep 17 00:00:00 2001 From: Shin'ya Ueoka Date: Tue, 29 Aug 2017 21:20:42 +0900 Subject: rename command-line files --- src/command-line/command-line.html | 18 +++++++++++ src/command-line/command-line.js | 64 ++++++++++++++++++++++++++++++++++++++ src/command-line/command-line.scss | 42 +++++++++++++++++++++++++ src/command-line/index.html | 18 ----------- src/command-line/index.js | 64 -------------------------------------- src/command-line/index.scss | 42 ------------------------- webpack.config.js | 4 +-- 7 files changed, 126 insertions(+), 126 deletions(-) create mode 100644 src/command-line/command-line.html create mode 100644 src/command-line/command-line.js create mode 100644 src/command-line/command-line.scss delete mode 100644 src/command-line/index.html delete mode 100644 src/command-line/index.js delete mode 100644 src/command-line/index.scss (limited to 'src') diff --git a/src/command-line/command-line.html b/src/command-line/command-line.html new file mode 100644 index 0000000..bad0b66 --- /dev/null +++ b/src/command-line/command-line.html @@ -0,0 +1,18 @@ + + + + + VimVixen command-line + + + +

+ +

+ + diff --git a/src/command-line/command-line.js b/src/command-line/command-line.js new file mode 100644 index 0000000..34f3f35 --- /dev/null +++ b/src/command-line/command-line.js @@ -0,0 +1,64 @@ +import './command-line.scss'; + +const parent = window.parent; + +// TODO consider object-oriented +var prevValue = ""; + +const blurData = () => { + return JSON.stringify({ + type: 'vimvixen.commandline.blur' + }); +}; + +const keydownData = (input) => { + return JSON.stringify({ + type: 'vimvixen.commandline.enter', + value: input.value + }); +}; + +const keyupData = (input) => { + return JSON.stringify({ + type: 'vimvixen.commandline.change', + value: input.value + }); +}; + +const handleBlur = () => { + parent.postMessage(blurData(), '*'); +}; + +const handleKeydown = (e) => { + switch(e.keyCode) { + case KeyboardEvent.DOM_VK_ESCAPE: + parent.postMessage(blurData(), '*'); + break; + case KeyboardEvent.DOM_VK_RETURN: + parent.postMessage(keydownData(e.target), '*'); + break; + } +}; + +const handleKeyup = (e) => { + if (e.target.value === prevValue) { + return; + } + parent.postMessage(keyupData(e.target), '*'); + prevValue = e.target.value; +}; + +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-command-line-line-input'); + input.addEventListener('blur', handleBlur); + input.addEventListener('keydown', handleKeydown); + input.addEventListener('keyup', handleKeyup); + input.value = initial; + input.focus(); +}); diff --git a/src/command-line/command-line.scss b/src/command-line/command-line.scss new file mode 100644 index 0000000..2256bf2 --- /dev/null +++ b/src/command-line/command-line.scss @@ -0,0 +1,42 @@ +html, body, * { + margin: 0; + padding: 0; +} + +.vimvixen-command-line { + border-top: 1px solid gray; + bottom: 0; + margin: 0; + padding: 0; + + &-title { + background-color: lightgray; + font-weight: bold; + margin: 0; + padding: 0; + } + + &-line { + background-color: white; + display: flex; + + @mixin input-style { + font-style: normal; + font-family: monospace; + font-size: 12px; + } + + &-prompt:before { + content: ':'; + + @include input-style; + } + + &-input { + border: none; + flex-grow: 1; + + @include input-style; + } + } +} diff --git a/src/command-line/index.html b/src/command-line/index.html deleted file mode 100644 index bad0b66..0000000 --- a/src/command-line/index.html +++ /dev/null @@ -1,18 +0,0 @@ - - - - - VimVixen command-line - - - -

- -

- - diff --git a/src/command-line/index.js b/src/command-line/index.js deleted file mode 100644 index f99afa0..0000000 --- a/src/command-line/index.js +++ /dev/null @@ -1,64 +0,0 @@ -import './index.scss'; - -const parent = window.parent; - -// TODO consider object-oriented -var prevValue = ""; - -const blurData = () => { - return JSON.stringify({ - type: 'vimvixen.commandline.blur' - }); -}; - -const keydownData = (input) => { - return JSON.stringify({ - type: 'vimvixen.commandline.enter', - value: input.value - }); -}; - -const keyupData = (input) => { - return JSON.stringify({ - type: 'vimvixen.commandline.change', - value: input.value - }); -}; - -const handleBlur = () => { - parent.postMessage(blurData(), '*'); -}; - -const handleKeydown = (e) => { - switch(e.keyCode) { - case KeyboardEvent.DOM_VK_ESCAPE: - parent.postMessage(blurData(), '*'); - break; - case KeyboardEvent.DOM_VK_RETURN: - parent.postMessage(keydownData(e.target), '*'); - break; - } -}; - -const handleKeyup = (e) => { - if (e.target.value === prevValue) { - return; - } - parent.postMessage(keyupData(e.target), '*'); - prevValue = e.target.value; -}; - -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-command-line-line-input'); - input.addEventListener('blur', handleBlur); - input.addEventListener('keydown', handleKeydown); - input.addEventListener('keyup', handleKeyup); - input.value = initial; - input.focus(); -}); diff --git a/src/command-line/index.scss b/src/command-line/index.scss deleted file mode 100644 index 2256bf2..0000000 --- a/src/command-line/index.scss +++ /dev/null @@ -1,42 +0,0 @@ -html, body, * { - margin: 0; - padding: 0; -} - -.vimvixen-command-line { - border-top: 1px solid gray; - bottom: 0; - margin: 0; - padding: 0; - - &-title { - background-color: lightgray; - font-weight: bold; - margin: 0; - padding: 0; - } - - &-line { - background-color: white; - display: flex; - - @mixin input-style { - font-style: normal; - font-family: monospace; - font-size: 12px; - } - - &-prompt:before { - content: ':'; - - @include input-style; - } - - &-input { - border: none; - flex-grow: 1; - - @include input-style; - } - } -} diff --git a/webpack.config.js b/webpack.config.js index 5019366..f34d203 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': path.join(src, 'command-line', 'command-line.js') }, output: { @@ -43,7 +43,7 @@ module.exports = { plugins: [ new HtmlWebpackPlugin({ - template: path.join(src, 'command-line', 'index.html'), + template: path.join(src, 'command-line', 'command-line.html'), filename: path.join(dist, 'command-line.html'), inject: false }) -- cgit v1.2.3 From b711678329463d1ec5f2eb9db99f99af5b69895e Mon Sep 17 00:00:00 2001 From: Shin'ya Ueoka Date: Tue, 29 Aug 2017 21:22:05 +0900 Subject: iframe 100% height --- src/command-line/command-line-frame.scss | 2 +- src/command-line/command-line.scss | 22 ++++++++++++++++------ 2 files changed, 17 insertions(+), 7 deletions(-) (limited to 'src') diff --git a/src/command-line/command-line-frame.scss b/src/command-line/command-line-frame.scss index 67bf514..88772d9 100644 --- a/src/command-line/command-line-frame.scss +++ b/src/command-line/command-line-frame.scss @@ -4,7 +4,7 @@ bottom: 0; left: 0; width: 100%; - height: 20px; + height: 100%; position: fixed; z-index: 10000; border: none; diff --git a/src/command-line/command-line.scss b/src/command-line/command-line.scss index 2256bf2..68a0a03 100644 --- a/src/command-line/command-line.scss +++ b/src/command-line/command-line.scss @@ -3,29 +3,39 @@ html, body, * { padding: 0; } +body { + position: absolute; + bottom: 0; + left: 0; + right: 0; +} + .vimvixen-command-line { border-top: 1px solid gray; bottom: 0; margin: 0; padding: 0; + @mixin input-style { + font-style: normal; + font-family: monospace; + font-size: 12px; + } + + &-title { background-color: lightgray; font-weight: bold; margin: 0; padding: 0; + + @include input-style; } &-line { background-color: white; display: flex; - @mixin input-style { - font-style: normal; - font-family: monospace; - font-size: 12px; - } - &-prompt:before { content: ':'; -- cgit v1.2.3