Best effort to make media placeholders visible and clickable.

2 files changed, 20 insertions, 6 deletions

diff --git a/src/content/PlaceHolder.js b/src/content/PlaceHolder.js
index 7043caf..8d183dd 100644
--- a/src/content/PlaceHolder.js
+++ b/src/content/PlaceHolder.js
@@ -135,7 +135,7 @@ var PlaceHolder = (() => {
       let setImage = () => replacement.style.backgroundImage = `url(${ICON_URL})`;
 
       if (ns.embeddingDocument) {
-        replacement.classList.add("document");
+        replacement.classList.add("__ns__document");
         window.stop();
         setTimeout(setImage, 0); // defer to bypass window.stop();
       } else {
@@ -160,8 +160,13 @@ var PlaceHolder = (() => {
       replacement._placeHolderObj = this;
       replacement._placeHolderElement = element;
 
-
       element.replaceWith(replacement);
+
+      // do our best to bring it to front
+      for (let p = replacement; p = p.parentElement;) {
+        p.classList.add("__ns__pop2top");
+      };
+
       this.replacements.add(replacement);
     }
 
@@ -195,9 +200,14 @@ var PlaceHolder = (() => {
     }
 
     close(replacement) {
-      replacement.classList.add("closing");
+      replacement.classList.add("__ns__closing");
       this.replacements.delete(replacement);
-      window.setTimeout(() => replacement.remove(), 500);
+      window.setTimeout(() => {
+        for (let p = replacement; p = p.parentElement;) {
+          p.classList.remove("__ns__pop2top");
+        };
+        replacement.remove()
+      }, 500);
     }
   }
 
diff --git a/src/content/content.css b/src/content/content.css
index 949501e..5d37612 100644
--- a/src/content/content.css
+++ b/src/content/content.css
@@ -11,12 +11,16 @@ a.__NoScript_PlaceHolder__ {
   z-index: 2147483647 !important;
 }
 
+.__ns__pop2top {
+  z-index: 2147483647 !important;
+}
+
 a.__NoScript_PlaceHolder__:hover {
   opacity: 1;
   text-decoration: underline;
 }
 
-a.__NoScript_PlaceHolder__.closing {
+a.__NoScript_PlaceHolder__.__ns__closing {
   transition: .4s all;
   opacity: 0;
   transform: scale(0, 0);
@@ -70,7 +74,7 @@ a.__NoScript_PlaceHolder__ > span {
 .__NoScript_PlaceHolder__:hover > span > span {
   background: rgba(255, 250, 200, .8)
 }
-a.__NoScript_PlaceHolder__.document {
+a.__NoScript_PlaceHolder__.__ns__document {
   position: fixed !important;
   top: 0 !important;
   bottom: 0 !important;