From b26f4aed8585418d18dfc43262070c8c8741e5e3 Mon Sep 17 00:00:00 2001 From: mrmr1993 Date: Sun, 28 Dec 2014 19:24:33 +0000 Subject: Add UIComponent code for iframes --- content_scripts/ui_component.coffee | 66 +++++++++++++++++++++++++++++++++++++ 1 file changed, 66 insertions(+) create mode 100644 content_scripts/ui_component.coffee (limited to 'content_scripts/ui_component.coffee') diff --git a/content_scripts/ui_component.coffee b/content_scripts/ui_component.coffee new file mode 100644 index 00000000..c0889e7f --- /dev/null +++ b/content_scripts/ui_component.coffee @@ -0,0 +1,66 @@ +class UIComponent + iframeElement: null + iframePort: null + messageEventListeners: [] + showStyle: "" + hideStyle: "" + + constructor: (iframeUrl, className) -> + @iframeElement = document.createElement "iframe" + @iframeElement.className = className + @iframeElement.seamless = "seamless" + @iframeElement.src = chrome.runtime.getURL iframeUrl + @iframeElement.addEventListener "load", => @openPort() + document.documentElement.appendChild @iframeElement + @hide() + + # Open a port and pass it to the iframe via window.postMessage. + openPort: -> + messageChannel = new MessageChannel() + @iframePort = messageChannel.port1 + @iframePort.onmessage = (event) => @handleMessage event + + # Get iframeMessageSecret so the iframe can determine that our message isn't the page impersonating us. + chrome.storage.local.get "iframeMessageSecret", ({iframeMessageSecret: secret}) => + @iframeElement.contentWindow.postMessage secret, chrome.runtime.getURL(""), [messageChannel.port2] + + postMessage: (data) -> @iframePort.postMessage data + + # Execute each event listener on the current event until we get a falsy return value. + handleMessage: (event) -> + for listener in @messageEventListeners + retVal = listener.call this, event + return false unless retVal + true + + addEventListener: (type, listener) -> + if type == "message" + @messageEventListeners.push listener + undefined + + removeEventListener: (type, listener) -> + if type == "message" + listenerIndex = @messageEventListeners.indexOf listener + if listenerIndex > -1 + @messageEventListeners = @messageEventListeners.splice listenerIndex, 1 + undefined + + setHideStyle: (@hideStyle) -> + @hide() if @showing == false + + setShowStyle: (@showStyle) -> + @show() if @showing == true + + show: -> + return unless @iframeElement? + @iframeElement.setAttribute "style", @showStyle + @iframeElement.focus() + @showing = true + + hide: -> + return unless @iframeElement? + @iframeElement.setAttribute "style", @hideStyle + @showing = false + +root = exports ? window +root.UIComponent = UIComponent -- cgit v1.2.3 From 5ea0f75a00b592956981bf8f6f7a0d2fa89620ae Mon Sep 17 00:00:00 2001 From: mrmr1993 Date: Mon, 29 Dec 2014 09:33:34 +0000 Subject: Close UIComponent iframes when pressing esc by default --- content_scripts/ui_component.coffee | 11 +++++++++++ 1 file changed, 11 insertions(+) (limited to 'content_scripts/ui_component.coffee') diff --git a/content_scripts/ui_component.coffee b/content_scripts/ui_component.coffee index c0889e7f..f47719e5 100644 --- a/content_scripts/ui_component.coffee +++ b/content_scripts/ui_component.coffee @@ -14,6 +14,8 @@ class UIComponent document.documentElement.appendChild @iframeElement @hide() + @addEventListener "message", handleHideMessage + # Open a port and pass it to the iframe via window.postMessage. openPort: -> messageChannel = new MessageChannel() @@ -30,6 +32,7 @@ class UIComponent handleMessage: (event) -> for listener in @messageEventListeners retVal = listener.call this, event + retVal ?= true return false unless retVal true @@ -60,7 +63,15 @@ class UIComponent hide: -> return unless @iframeElement? @iframeElement.setAttribute "style", @hideStyle + window.focus() @showing = false +handleHideMessage = (event) -> + if event.data == "hide" + @hide() + false + else + true + root = exports ? window root.UIComponent = UIComponent -- cgit v1.2.3 From e5e0ddf24c7975e994b816651beaa4d0cefb94b7 Mon Sep 17 00:00:00 2001 From: mrmr1993 Date: Mon, 29 Dec 2014 10:07:25 +0000 Subject: Initialise hide/show styles for UIComponent --- content_scripts/ui_component.coffee | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'content_scripts/ui_component.coffee') diff --git a/content_scripts/ui_component.coffee b/content_scripts/ui_component.coffee index f47719e5..ce1af082 100644 --- a/content_scripts/ui_component.coffee +++ b/content_scripts/ui_component.coffee @@ -2,8 +2,8 @@ class UIComponent iframeElement: null iframePort: null messageEventListeners: [] - showStyle: "" - hideStyle: "" + showStyle: "display: block;" + hideStyle: "display: none;" constructor: (iframeUrl, className) -> @iframeElement = document.createElement "iframe" -- cgit v1.2.3 From 4e3ef0b401cfb4682a17a1ee88058ed76d64be20 Mon Sep 17 00:00:00 2001 From: mrmr1993 Date: Mon, 29 Dec 2014 10:29:09 +0000 Subject: Small changes to UIComponent --- content_scripts/ui_component.coffee | 17 +++++++++++------ 1 file changed, 11 insertions(+), 6 deletions(-) (limited to 'content_scripts/ui_component.coffee') diff --git a/content_scripts/ui_component.coffee b/content_scripts/ui_component.coffee index ce1af082..b0e4f71c 100644 --- a/content_scripts/ui_component.coffee +++ b/content_scripts/ui_component.coffee @@ -5,13 +5,16 @@ class UIComponent showStyle: "display: block;" hideStyle: "display: none;" - constructor: (iframeUrl, className) -> + constructor: (iframeUrl, className, showStyle, hideStyle) -> @iframeElement = document.createElement "iframe" @iframeElement.className = className @iframeElement.seamless = "seamless" @iframeElement.src = chrome.runtime.getURL iframeUrl @iframeElement.addEventListener "load", => @openPort() document.documentElement.appendChild @iframeElement + + @setShowStyle showStyle if showStyle? + @setHideStyle hideStyle if showStyle? @hide() @addEventListener "message", handleHideMessage @@ -43,9 +46,7 @@ class UIComponent removeEventListener: (type, listener) -> if type == "message" - listenerIndex = @messageEventListeners.indexOf listener - if listenerIndex > -1 - @messageEventListeners = @messageEventListeners.splice listenerIndex, 1 + @messageEventListeners = @messageEventListeners.filter (f) -> f != listener undefined setHideStyle: (@hideStyle) -> @@ -54,14 +55,18 @@ class UIComponent setShowStyle: (@showStyle) -> @show() if @showing == true + setStyles: (@showStyle = @showStyle, @hideStyle = @hideStyle) -> + if @showing + @show() + else + @hide() + show: -> - return unless @iframeElement? @iframeElement.setAttribute "style", @showStyle @iframeElement.focus() @showing = true hide: -> - return unless @iframeElement? @iframeElement.setAttribute "style", @hideStyle window.focus() @showing = false -- cgit v1.2.3 From 0433dd338258dc39466593e0bce5fa3253f8d6d5 Mon Sep 17 00:00:00 2001 From: mrmr1993 Date: Mon, 29 Dec 2014 10:38:25 +0000 Subject: Allow message passing directly from UIComponent.show --- content_scripts/ui_component.coffee | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) (limited to 'content_scripts/ui_component.coffee') diff --git a/content_scripts/ui_component.coffee b/content_scripts/ui_component.coffee index b0e4f71c..f0593f1b 100644 --- a/content_scripts/ui_component.coffee +++ b/content_scripts/ui_component.coffee @@ -29,9 +29,9 @@ class UIComponent chrome.storage.local.get "iframeMessageSecret", ({iframeMessageSecret: secret}) => @iframeElement.contentWindow.postMessage secret, chrome.runtime.getURL(""), [messageChannel.port2] - postMessage: (data) -> @iframePort.postMessage data + postMessage: (message) -> @iframePort.postMessage message - # Execute each event listener on the current event until we get a falsy return value. + # Execute each event listener on the current event until we get a non-null falsy return value. handleMessage: (event) -> for listener in @messageEventListeners retVal = listener.call this, event @@ -61,7 +61,8 @@ class UIComponent else @hide() - show: -> + show: (message) -> + @postMessage message if message? @iframeElement.setAttribute "style", @showStyle @iframeElement.focus() @showing = true -- cgit v1.2.3 From 26f37bb0dbda2d833f508db373629408c7ed6e09 Mon Sep 17 00:00:00 2001 From: mrmr1993 Date: Mon, 29 Dec 2014 10:42:28 +0000 Subject: Remove key handling in UIComponentServer/UIComponent code --- content_scripts/ui_component.coffee | 2 -- 1 file changed, 2 deletions(-) (limited to 'content_scripts/ui_component.coffee') diff --git a/content_scripts/ui_component.coffee b/content_scripts/ui_component.coffee index f0593f1b..12a024e4 100644 --- a/content_scripts/ui_component.coffee +++ b/content_scripts/ui_component.coffee @@ -17,8 +17,6 @@ class UIComponent @setHideStyle hideStyle if showStyle? @hide() - @addEventListener "message", handleHideMessage - # Open a port and pass it to the iframe via window.postMessage. openPort: -> messageChannel = new MessageChannel() -- cgit v1.2.3 From f38a834cc38d17b086253dea197e6a8945551377 Mon Sep 17 00:00:00 2001 From: mrmr1993 Date: Mon, 29 Dec 2014 11:29:12 +0000 Subject: Add UIComponent.active, so we can specify whether to focus the frame --- content_scripts/ui_component.coffee | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) (limited to 'content_scripts/ui_component.coffee') diff --git a/content_scripts/ui_component.coffee b/content_scripts/ui_component.coffee index 12a024e4..10450778 100644 --- a/content_scripts/ui_component.coffee +++ b/content_scripts/ui_component.coffee @@ -59,10 +59,14 @@ class UIComponent else @hide() + activate: (message) -> + @postMessage message if message? + @show() unless @showing + @iframeElement.focus() + show: (message) -> @postMessage message if message? @iframeElement.setAttribute "style", @showStyle - @iframeElement.focus() @showing = true hide: -> -- cgit v1.2.3 From 0524bdc3f76279e8930bfe4b1b42d93e0e9bf6e4 Mon Sep 17 00:00:00 2001 From: Stephen Blott Date: Mon, 29 Dec 2014 14:22:53 +0000 Subject: Refactor UIComponent, etc., and demo. - Simplify component API. - Iframe flashes on re-focus. - Probably some other stuff which I've forgotten. --- content_scripts/ui_component.coffee | 79 +++++++++++-------------------------- 1 file changed, 23 insertions(+), 56 deletions(-) (limited to 'content_scripts/ui_component.coffee') diff --git a/content_scripts/ui_component.coffee b/content_scripts/ui_component.coffee index 10450778..a898d525 100644 --- a/content_scripts/ui_component.coffee +++ b/content_scripts/ui_component.coffee @@ -1,21 +1,19 @@ class UIComponent iframeElement: null iframePort: null - messageEventListeners: [] + showing: true showStyle: "display: block;" hideStyle: "display: none;" - constructor: (iframeUrl, className, showStyle, hideStyle) -> + constructor: (iframeUrl, className, @handleMessage) -> @iframeElement = document.createElement "iframe" @iframeElement.className = className @iframeElement.seamless = "seamless" @iframeElement.src = chrome.runtime.getURL iframeUrl @iframeElement.addEventListener "load", => @openPort() document.documentElement.appendChild @iframeElement - - @setShowStyle showStyle if showStyle? - @setHideStyle hideStyle if showStyle? - @hide() + # Hide iframe, but don't interfere with the focus. + @hide false # Open a port and pass it to the iframe via window.postMessage. openPort: -> @@ -23,63 +21,32 @@ class UIComponent @iframePort = messageChannel.port1 @iframePort.onmessage = (event) => @handleMessage event - # Get iframeMessageSecret so the iframe can determine that our message isn't the page impersonating us. - chrome.storage.local.get "iframeMessageSecret", ({iframeMessageSecret: secret}) => + # Get vimiumSecret so the iframe can determine that our message isn't the page impersonating us. + chrome.storage.local.get "vimiumSecret", ({vimiumSecret: secret}) => @iframeElement.contentWindow.postMessage secret, chrome.runtime.getURL(""), [messageChannel.port2] - postMessage: (message) -> @iframePort.postMessage message - - # Execute each event listener on the current event until we get a non-null falsy return value. - handleMessage: (event) -> - for listener in @messageEventListeners - retVal = listener.call this, event - retVal ?= true - return false unless retVal - true - - addEventListener: (type, listener) -> - if type == "message" - @messageEventListeners.push listener - undefined - - removeEventListener: (type, listener) -> - if type == "message" - @messageEventListeners = @messageEventListeners.filter (f) -> f != listener - undefined - - setHideStyle: (@hideStyle) -> - @hide() if @showing == false - - setShowStyle: (@showStyle) -> - @show() if @showing == true - - setStyles: (@showStyle = @showStyle, @hideStyle = @hideStyle) -> - if @showing - @show() - else - @hide() + postMessage: (message) -> + @iframePort.postMessage message activate: (message) -> @postMessage message if message? - @show() unless @showing + if @showing + # NOTE(smblott) Experimental. Not sure this is a great idea. If the iframe was already showing, then + # the user gets no visual feedback when it is re-focused. So flash its border. + borderWas = @iframeElement.style.border + @iframeElement.style.border = '5px solid yellow' + setTimeout((=> @iframeElement.style.border = borderWas), 200) + else + @iframeElement.setAttribute "style", @showStyle + @showing = true @iframeElement.focus() - show: (message) -> - @postMessage message if message? - @iframeElement.setAttribute "style", @showStyle - @showing = true - - hide: -> - @iframeElement.setAttribute "style", @hideStyle - window.focus() - @showing = false - -handleHideMessage = (event) -> - if event.data == "hide" - @hide() - false - else - true + hide: (focusWindow=true)-> + if @showing + @iframeElement.setAttribute "style", @hideStyle + # TODO(smblott) Is window always the right thing to focus, here? + window.focus() if focusWindow + @showing = false root = exports ? window root.UIComponent = UIComponent -- cgit v1.2.3 From 7499675455941251eaa69c93e7c66bfb1c6ae35c Mon Sep 17 00:00:00 2001 From: Stephen Blott Date: Mon, 29 Dec 2014 17:08:39 +0000 Subject: Clearer handling of @showing in UI component. --- content_scripts/ui_component.coffee | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) (limited to 'content_scripts/ui_component.coffee') diff --git a/content_scripts/ui_component.coffee b/content_scripts/ui_component.coffee index a898d525..d89f0cc8 100644 --- a/content_scripts/ui_component.coffee +++ b/content_scripts/ui_component.coffee @@ -1,7 +1,7 @@ class UIComponent iframeElement: null iframePort: null - showing: true + showing: null showStyle: "display: block;" hideStyle: "display: none;" @@ -12,7 +12,8 @@ class UIComponent @iframeElement.src = chrome.runtime.getURL iframeUrl @iframeElement.addEventListener "load", => @openPort() document.documentElement.appendChild @iframeElement - # Hide iframe, but don't interfere with the focus. + @showing = true # The iframe is visible now. + # Hide the iframe, but don't interfere with the focus. @hide false # Open a port and pass it to the iframe via window.postMessage. @@ -44,7 +45,6 @@ class UIComponent hide: (focusWindow=true)-> if @showing @iframeElement.setAttribute "style", @hideStyle - # TODO(smblott) Is window always the right thing to focus, here? window.focus() if focusWindow @showing = false -- cgit v1.2.3 From 57418a9ad6104c487b67fcfd27ec8503858e5a14 Mon Sep 17 00:00:00 2001 From: mrmr1993 Date: Mon, 29 Dec 2014 18:55:06 +0000 Subject: Use UIComponent for Vomnibar iframe --- content_scripts/ui_component.coffee | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'content_scripts/ui_component.coffee') diff --git a/content_scripts/ui_component.coffee b/content_scripts/ui_component.coffee index d89f0cc8..696cb42c 100644 --- a/content_scripts/ui_component.coffee +++ b/content_scripts/ui_component.coffee @@ -42,7 +42,7 @@ class UIComponent @showing = true @iframeElement.focus() - hide: (focusWindow=true)-> + hide: (focusWindow = true)-> if @showing @iframeElement.setAttribute "style", @hideStyle window.focus() if focusWindow -- cgit v1.2.3 From f946d23125a80233799564b57253ace2c44b8994 Mon Sep 17 00:00:00 2001 From: mrmr1993 Date: Tue, 30 Dec 2014 15:20:49 +0000 Subject: Reinstate UIComponent.show --- content_scripts/ui_component.coffee | 15 +++++++++------ 1 file changed, 9 insertions(+), 6 deletions(-) (limited to 'content_scripts/ui_component.coffee') diff --git a/content_scripts/ui_component.coffee b/content_scripts/ui_component.coffee index 696cb42c..8b229725 100644 --- a/content_scripts/ui_component.coffee +++ b/content_scripts/ui_component.coffee @@ -38,15 +38,18 @@ class UIComponent @iframeElement.style.border = '5px solid yellow' setTimeout((=> @iframeElement.style.border = borderWas), 200) else - @iframeElement.setAttribute "style", @showStyle - @showing = true + @show() @iframeElement.focus() + show: (message) -> + @postMessage message if message? + @iframeElement.setAttribute "style", @showStyle + @showing = true + hide: (focusWindow = true)-> - if @showing - @iframeElement.setAttribute "style", @hideStyle - window.focus() if focusWindow - @showing = false + @iframeElement.setAttribute "style", @hideStyle + window.focus() if focusWindow + @showing = false root = exports ? window root.UIComponent = UIComponent -- cgit v1.2.3 From 7e6b2c5a8439cf8c1e861e3f596915a75ecb9644 Mon Sep 17 00:00:00 2001 From: mrmr1993 Date: Tue, 30 Dec 2014 15:31:30 +0000 Subject: Use classes and a stylesheet for UIComponen --- content_scripts/ui_component.coffee | 13 ++++++------- 1 file changed, 6 insertions(+), 7 deletions(-) (limited to 'content_scripts/ui_component.coffee') diff --git a/content_scripts/ui_component.coffee b/content_scripts/ui_component.coffee index 8b229725..c4ed3bf6 100644 --- a/content_scripts/ui_component.coffee +++ b/content_scripts/ui_component.coffee @@ -2,8 +2,6 @@ class UIComponent iframeElement: null iframePort: null showing: null - showStyle: "display: block;" - hideStyle: "display: none;" constructor: (iframeUrl, className, @handleMessage) -> @iframeElement = document.createElement "iframe" @@ -34,20 +32,21 @@ class UIComponent if @showing # NOTE(smblott) Experimental. Not sure this is a great idea. If the iframe was already showing, then # the user gets no visual feedback when it is re-focused. So flash its border. - borderWas = @iframeElement.style.border - @iframeElement.style.border = '5px solid yellow' - setTimeout((=> @iframeElement.style.border = borderWas), 200) + @iframeElement.classList.add "vimiumUIComponentReactivated" + setTimeout((=> @iframeElement.classList.remove "vimiumUIComponentReactivated"), 200) else @show() @iframeElement.focus() show: (message) -> @postMessage message if message? - @iframeElement.setAttribute "style", @showStyle + @iframeElement.classList.remove "vimiumUIComponentHidden" + @iframeElement.classList.add "vimiumUIComponentShowing" @showing = true hide: (focusWindow = true)-> - @iframeElement.setAttribute "style", @hideStyle + @iframeElement.classList.remove "vimiumUIComponentShowing" + @iframeElement.classList.add "vimiumUIComponentHidden" window.focus() if focusWindow @showing = false -- cgit v1.2.3