From fe9933796baa9fd1c1cf717b9055a5ebcdc18c41 Mon Sep 17 00:00:00 2001
From: mrmr1993
Date: Tue, 28 Apr 2015 15:00:01 +0100
Subject: Load stylesheet via XHR to fix styles in UIComponent Shadow DOM

Shadow DOM doesn't support <link>s, so we have to load the stylesheet
manually and inject it into a <style> element.
---
 content_scripts/ui_component.coffee | 15 ++++++++++-----
 1 file changed, 10 insertions(+), 5 deletions(-)

(limited to 'content_scripts')

diff --git a/content_scripts/ui_component.coffee b/content_scripts/ui_component.coffee
index 64831794..21431bd7 100644
--- a/content_scripts/ui_component.coffee
+++ b/content_scripts/ui_component.coffee
@@ -5,11 +5,16 @@ class UIComponent
   options: null
 
   constructor: (iframeUrl, className, @handleMessage) ->
-    styleSheet = document.createElement "link"
-    extend styleSheet,
-      rel: "stylesheet"
-      type: "text/css"
-      href: chrome.runtime.getURL "content_scripts/vimium.css"
+    styleSheet = document.createElement "style"
+    styleSheet.type = "text/css"
+    # Default to everything hidden while the stylesheet loads.
+    styleSheet.innerHTML = "* {display: none !important;}"
+    # Load stylesheet.
+    xhr = new XMLHttpRequest()
+    xhr.onload = (e) -> styleSheet.innerHTML = xhr.responseText
+    xhr.open "GET", chrome.runtime.getURL("content_scripts/vimium.css"), true
+    xhr.send()
+
     @iframeElement = document.createElement "iframe"
     extend @iframeElement,
       className: className
-- 
cgit v1.2.3