Merge branch 'ui-component-changes' of https://github.com/mrmr1993/vimium into mrmr1993-ui-component-changes

2 files changed, 26 insertions, 11 deletions

diff --git a/content_scripts/ui_component.coffee b/content_scripts/ui_component.coffee
index 696cb42c..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,19 +32,23 @@ 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
-      @iframeElement.setAttribute "style", @showStyle
-      @showing = true
+      @show()
     @iframeElement.focus()
 
+  show: (message) ->
+    @postMessage message if message?
+    @iframeElement.classList.remove "vimiumUIComponentHidden"
+    @iframeElement.classList.add "vimiumUIComponentShowing"
+    @showing = true
+
   hide: (focusWindow = true)->
-    if @showing
-      @iframeElement.setAttribute "style", @hideStyle
-      window.focus() if focusWindow
-      @showing = false
+    @iframeElement.classList.remove "vimiumUIComponentShowing"
+    @iframeElement.classList.add "vimiumUIComponentHidden"
+    window.focus() if focusWindow
+    @showing = false
 
 root = exports ? window
 root.UIComponent = UIComponent
diff --git a/content_scripts/vimium.css b/content_scripts/vimium.css
index f582824a..ec1a09e6 100644
--- a/content_scripts/vimium.css
+++ b/content_scripts/vimium.css
@@ -302,3 +302,16 @@ div#vimiumFlash {
   position: absolute;
   z-index: 2147483648;
 }
+
+/* UIComponent CSS */
+iframe.vimiumUIComponentHidden {
+  display: none;
+}
+
+iframe.vimiumUIComponentVisible {
+  display: block;
+}
+
+iframe.vimiumUIComponentReactivated {
+  border: 5px solid yellow;
+}