Cache content_scripts/vimium.css in chrome.storage.local.

Previously, we had two different approaches.  This seems like a simpler
approach.

We simply cache the Vimium CSS in chrome.storage.local (in the
background page) and fetch it from there (in UI components).

There is also a minor change in the we no longer cache the CSS in
memory.  This seems to be the right thing to do.  Caching the CSS in
memory consumes a small amount of memory.  However, it can only speed up
the fastest loads.  It cannot speed up the first load -- which is likely
the one that matters most.  So caching the CSS in memory seems to make
little sense.

3 files changed, 15 insertions, 33 deletions

diff --git a/background_scripts/main.coffee b/background_scripts/main.coffee
index 4aa2fc41..3e1cc0a3 100644
--- a/background_scripts/main.coffee
+++ b/background_scripts/main.coffee
@@ -129,14 +129,14 @@ helpDialogHtmlForCommand = (html, isAdvanced, bindings, description, showCommand
     html.push "<td class='vimiumReset' colspan='3' style='text-align: left;'>", Utils.escapeHtml(bindings)
   html.push("</td></tr>")
 
-#
-# Fetches the contents of a file bundled with this extension.
-#
-fetchFileContents = (extensionFileName) ->
+# Cache "content_scripts/vimium.css" in chrome.storage.local for UI components.
+do ->
   req = new XMLHttpRequest()
-  req.open("GET", chrome.runtime.getURL(extensionFileName), false) # false => synchronous
+  req.open "GET", chrome.runtime.getURL("content_scripts/vimium.css"), true # true -> asynchronous.
+  req.onload = ->
+    {status, responseText} = req
+    chrome.storage.local.set vimiumCSSInChromeStorage: responseText if status == 200
   req.send()
-  req.responseText
 
 TabOperations =
   # Opens the url in the current tab.
@@ -417,7 +417,6 @@ sendRequestHandlers =
   gotoMark: Marks.goto.bind(Marks)
   # Send a message to all frames in the current tab.
   sendMessageToFrames: (request, sender) -> chrome.tabs.sendMessage sender.tab.id, request.message
-  fetchFileContents: (request, sender) -> fetchFileContents request.fileName
   # For debugging only. This allows content scripts to log messages to the extension's logging page.
   log: ({frameId, message}, sender) -> BgUtils.log "#{frameId} #{message}", sender
 
diff --git a/content_scripts/ui_component.coffee b/content_scripts/ui_component.coffee
index 1a7a1634..7422aada 100644
--- a/content_scripts/ui_component.coffee
+++ b/content_scripts/ui_component.coffee
@@ -5,7 +5,6 @@ class UIComponent
   iframeFrameId: null
   options: null
   shadowDOM: null
-  styleSheetGetter: null
 
   toggleIframeElementClasses: (removeClass, addClass) ->
     @iframeElement.classList.remove removeClass
@@ -18,10 +17,9 @@ class UIComponent
       # Default to everything hidden while the stylesheet loads.
       styleSheet.innerHTML = "iframe {display: none;}"
 
-      # Use an XMLHttpRequest, possibly via the background page, to fetch the stylesheet. This allows us to
-      # catch and recover from failures that we could not have caught when using CSS @include (eg. #1817).
-      UIComponent::styleSheetGetter ?= new AsyncDataFetcher @fetchFileContents "content_scripts/vimium.css"
-      @styleSheetGetter.use (styles) -> styleSheet.innerHTML = styles
+      # Fetch "content_scripts/vimium.css" from chrome.storage.local; the background page caches it there.
+      chrome.storage.local.get "vimiumCSSInChromeStorage", (items) ->
+        styleSheet.innerHTML = items.vimiumCSSInChromeStorage
 
       @iframeElement = DomUtils.createElement "iframe"
       extend @iframeElement,
@@ -99,26 +97,5 @@ class UIComponent
         @options = null
         @postMessage "hidden" # Inform the UI component that it is hidden.
 
-  # Fetch a Vimium file/resource (such as "content_scripts/vimium.css").
-  # We try making an XMLHttpRequest request.  That can fail (see #1817), in which case we fetch the
-  # file/resource via the background page.
-  fetchFileContents: (file) -> (callback) ->
-    request = new XMLHttpRequest()
-
-    request.onload = ->
-      if request.status == 200
-        callback request.responseText
-      else
-        request.onerror()
-
-    request.onerror = ->
-      chrome.runtime.sendMessage
-        handler: "fetchFileContents"
-        fileName: file
-      , callback
-
-    request.open "GET", (chrome.runtime.getURL file), true
-    request.send()
-
 root = exports ? window
 root.UIComponent = UIComponent
diff --git a/tests/unit_tests/test_chrome_stubs.coffee b/tests/unit_tests/test_chrome_stubs.coffee
index 702ea77f..bea13df3 100644
--- a/tests/unit_tests/test_chrome_stubs.coffee
+++ b/tests/unit_tests/test_chrome_stubs.coffee
@@ -15,6 +15,12 @@ global.document =
   createElement: -> {}
   addEventListener: ->
 
+global.XMLHttpRequest =
+  class XMLHttpRequest
+    open: ->
+    onload: ->
+    send: ->
+
 exports.chrome =
   areRunningVimiumTests: true