From 350a54af51528440caaf4e16c8884f77b3097cd7 Mon Sep 17 00:00:00 2001
From: mrmr1993
Date: Tue, 28 Apr 2015 13:33:15 +0100
Subject: Load the Vomnibar (and all UIComponents) in a shadow DOM

This insulates them from page CSS, so we don't have to compete to style
elements correctly.
---
 content_scripts/ui_component.coffee | 20 ++++++++++++++++----
 1 file changed, 16 insertions(+), 4 deletions(-)

(limited to 'content_scripts')

diff --git a/content_scripts/ui_component.coffee b/content_scripts/ui_component.coffee
index 77c52d3d..64831794 100644
--- a/content_scripts/ui_component.coffee
+++ b/content_scripts/ui_component.coffee
@@ -5,12 +5,24 @@ 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"
     @iframeElement = document.createElement "iframe"
-    @iframeElement.className = className
-    @iframeElement.seamless = "seamless"
-    @iframeElement.src = chrome.runtime.getURL iframeUrl
+    extend @iframeElement,
+      className: className
+      seamless: "seamless"
+      src: chrome.runtime.getURL iframeUrl
     @iframeElement.addEventListener "load", => @openPort()
-    document.documentElement.appendChild @iframeElement
+    shadowWrapper = document.createElement "div"
+    # PhantomJS doesn't support createShadowRoot, so guard against its non-existance.
+    shadowDOM = shadowWrapper.createShadowRoot?() ? shadowWrapper
+    shadowDOM.appendChild styleSheet
+    shadowDOM.appendChild @iframeElement
+    document.documentElement.appendChild shadowWrapper
+
     @showing = true # The iframe is visible now.
     # Hide the iframe, but don't interfere with the focus.
     @hide false
-- 
cgit v1.2.3


From d6c257d9a4ccdd9e52851b714f3d8561145fb462 Mon Sep 17 00:00:00 2001
From: mrmr1993
Date: Tue, 28 Apr 2015 13:39:38 +0100
Subject: Revert "Ensure that the Vomnibar iframe background is transparent"

This reverts commit 26cbeba9b9301652d15e01ad4dac9248637ba3eb.
---
 content_scripts/vimium.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'content_scripts')

diff --git a/content_scripts/vimium.css b/content_scripts/vimium.css
index 794803fe..a77adebd 100644
--- a/content_scripts/vimium.css
+++ b/content_scripts/vimium.css
@@ -275,7 +275,7 @@ body.vimiumFindMode ::selection {
 /* Vomnibar Frame CSS */
 
 iframe.vomnibarFrame {
-  background-color: transparent !important;
+  background-color: transparent;
   padding: 0px;
   overflow: hidden;
 
-- 
cgit v1.2.3


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


From 38d54bff35477939b837b917d1148e7e6b02e0cb Mon Sep 17 00:00:00 2001
From: mrmr1993
Date: Tue, 28 Apr 2015 15:04:40 +0100
Subject: Revert "Fix over-riding of vomnibar display CSS."

This reverts commit 6e7b04692aceeed6544510f853eb58cdad564f9e.
---
 content_scripts/vimium.css | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

(limited to 'content_scripts')

diff --git a/content_scripts/vimium.css b/content_scripts/vimium.css
index a77adebd..fb8824c2 100644
--- a/content_scripts/vimium.css
+++ b/content_scripts/vimium.css
@@ -279,6 +279,7 @@ iframe.vomnibarFrame {
   padding: 0px;
   overflow: hidden;
 
+  display: block;
   position: fixed;
   width: calc(80% + 20px); /* same adjustment as in pages/vomnibar.coffee */
   min-width: 400px;
@@ -303,11 +304,11 @@ div#vimiumFlash {
 
 /* UIComponent CSS */
 iframe.vimiumUIComponentHidden {
-  display: none !important;
+  display: none;
 }
 
 iframe.vimiumUIComponentVisible {
-  display: block !important;
+  display: block;
 }
 
 iframe.vimiumUIComponentReactivated {
-- 
cgit v1.2.3