Load UIComponent stylesheet via XMLHttpRequest, use background as needed

1 files changed, 22 insertions, 4 deletions

diff --git a/content_scripts/ui_component.coffee b/content_scripts/ui_component.coffee
index 2348d00b..2218c3c7 100644
--- a/content_scripts/ui_component.coffee
+++ b/content_scripts/ui_component.coffee
@@ -4,15 +4,16 @@ class UIComponent
   showing: null
   options: null
   shadowDOM: null
+  styleSheetGetter: null
 
   constructor: (iframeUrl, className, @handleMessage) ->
     styleSheet = DomUtils.createElement "style"
     styleSheet.type = "text/css"
     # Default to everything hidden while the stylesheet loads.
-    styleSheet.innerHTML = """
-      @import url("#{chrome.runtime.getURL("content_scripts/vimium.css")}");
-      iframe {display: none;}
-    """
+    styleSheet.innerHTML = "iframe {display: none;}"
+
+    UIComponent::styleSheetGetter ?= new AsyncDataFetcher @fetchStyles
+    @styleSheetGetter.use (styles) -> styleSheet.innerHTML = styles
 
     @iframeElement = DomUtils.createElement "iframe"
     extend @iframeElement,
@@ -115,5 +116,22 @@ class UIComponent
             window.removeEventListener "focus", handler
             refocusSourceFrame()
 
+  fetchStyles: (callback) ->
+    stylesheetRequest = new XMLHttpRequest()
+
+    stylesheetRequest.onload = ->
+      return stylesheetRequest.onerror() unless stylesheetRequest.status == 200
+      callback stylesheetRequest.responseText
+
+    stylesheetRequest.onerror = ->
+      chrome.runtime.sendMessage
+        handler: "fetchFileContents"
+        fileName: "content_scripts/vimium.css"
+      , callback
+
+    stylesheetRequest.open "GET", (chrome.runtime.getURL "content_scripts/vimium.css"), true
+    stylesheetRequest.send()
+
+
 root = exports ? window
 root.UIComponent = UIComponent