Merge pull request philc#3175 from gdh1995/shadowDOMv1

use Shadow DOM v1 if it exists

Author: smblott-github

content_scripts/ui_component.coffee

@@ -27,7 +27,8 @@ class UIComponent
         seamless: "seamless"
       shadowWrapper = DomUtils.createElement "div"
       # PhantomJS doesn't support createShadowRoot, so guard against its non-existance.
-      @shadowDOM = shadowWrapper.createShadowRoot?() ? shadowWrapper
+      @shadowDOM = shadowWrapper.attachShadow?( mode: "open" ) ?
+        shadowWrapper.createShadowRoot?() ? shadowWrapper
       @shadowDOM.appendChild styleSheet
       @shadowDOM.appendChild @iframeElement
       @toggleIframeElementClasses "vimiumUIComponentVisible", "vimiumUIComponentHidden"

content_scripts/vimium_frontend.coffee

@@ -245,7 +245,10 @@ flashFrame = do ->
       # Create a shadow DOM wrapping the frame so the page's styles don't interfere with ours.
       highlightedFrameElement = DomUtils.createElement "div"
       # PhantomJS doesn't support createShadowRoot, so guard against its non-existance.
-      _shadowDOM = highlightedFrameElement.createShadowRoot?() ? highlightedFrameElement
+      # https://hacks.mozilla.org/2018/10/firefox-63-tricks-and-treats/ says
+      # Firefox 63 has enabled Shadow DOM v1 by default
+      _shadowDOM = highlightedFrameElement.attachShadow?( mode: "open" ) ?
+        highlightedFrameElement.createShadowRoot?() ? highlightedFrameElement
 
       # Inject stylesheet.
       _styleSheet = DomUtils.createElement "style"