Use classes for border flashes, in a shadow DOM to avoid CSS collisions

2 files changed, 47 insertions, 14 deletions

diff --git a/content_scripts/vimium.css b/content_scripts/vimium.css
index fb8824c2..5180fb22 100644
--- a/content_scripts/vimium.css
+++ b/content_scripts/vimium.css
@@ -109,6 +109,20 @@ div.internalVimiumSelectedInputHint span {
   color: white !important;
 }
 
+/* Frame Highlight Marker CSS*/
+div.vimiumHighlightedFrame {
+  position: fixed;
+  top: 0px;
+  left: 0px;
+  width: 100%;
+  height: 100%;
+  padding: 0px;
+  margin: 0px;
+  border: 5px solid yellow;
+  box-sizing: border-box;
+  pointer-events: none;
+}
+
 /* Help Dialog CSS */
 
 div#vimiumHelpDialog {
diff --git a/content_scripts/vimium_frontend.coffee b/content_scripts/vimium_frontend.coffee
index e1d7b581..9d95018c 100644
--- a/content_scripts/vimium_frontend.coffee
+++ b/content_scripts/vimium_frontend.coffee
@@ -327,20 +327,39 @@ setScrollPosition = (scrollX, scrollY) ->
 #
 # Called from the backend in order to change frame focus.
 #
-window.focusThisFrame = (request) ->
-  if window.innerWidth < 3 or window.innerHeight < 3
-    # This frame is too small to focus. Cancel and tell the background frame to focus the next one instead.
-    # This affects sites like Google Inbox, which have many tiny iframes. See #1317.
-    # Here we're assuming that there is at least one frame large enough to focus.
-    chrome.runtime.sendMessage({ handler: "nextFrame", frameId: frameId })
-    return
-  window.focus()
-  shouldHighlight = request.highlight
-  shouldHighlight ||= request.highlightOnlyIfNotTop and not DomUtils.isTopFrame()
-  if document.body and shouldHighlight
-    borderWas = document.body.style.border
-    document.body.style.border = '5px solid yellow'
-    setTimeout((-> document.body.style.border = borderWas), 200)
+window.focusThisFrame = do ->
+  # Create a shadow DOM wrapping the frame so the page's styles don't interfere with ours.
+  highlightedFrameElement = document.createElement "div"
+  _shadowDOM = highlightedFrameElement.createShadowRoot()
+
+  # Inject stylesheet.
+  _styleSheet = document.createElement "style"
+  if _styleSheet.style?
+    _styleSheet.innerHTML = ""
+    _shadowDOM.appendChild _styleSheet
+    # 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()
+
+  _frameEl = document.createElement "div"
+  _frameEl.className = "vimiumReset vimiumHighlightedFrame"
+  _shadowDOM.appendChild _frameEl
+
+  (request) ->
+    if window.innerWidth < 3 or window.innerHeight < 3
+      # This frame is too small to focus. Cancel and tell the background frame to focus the next one instead.
+      # This affects sites like Google Inbox, which have many tiny iframes. See #1317.
+      # Here we're assuming that there is at least one frame large enough to focus.
+      chrome.runtime.sendMessage({ handler: "nextFrame", frameId: frameId })
+      return
+    window.focus()
+    shouldHighlight = request.highlight
+    shouldHighlight ||= request.highlightOnlyIfNotTop and not DomUtils.isTopFrame()
+    if shouldHighlight
+      document.documentElement.appendChild highlightedFrameElement
+      setTimeout (-> highlightedFrameElement.remove()), 200
 
 extend window,
   scrollToBottom: -> Scroller.scrollTo "y", "max"