fixed to overlay CSS & code

Author: Jonathan Harper

content.css

@@ -1,34 +1,40 @@
 .loadingOverlay
 {
     position: absolute;
+    display: table;
     opacity: 0.8;
     background-color: black;
     z-index: 2147483647;
 }
 
-#deconNotifier
+.overlayText
 {
-    position: fixed;
-    z-index: 1000;
-    left: 20px;
-    top: 20px;
-    background-color: #DDD;
-}
-
-.deconText
-{
-    position: relative;
-    left: 50%;
-    top: 50%;
-    margin-top: -47px;
-    margin-left: -153px;
+    display: table-cell;
+    vertical-align: middle;
+    text-align: center;
     font-size: 30pt;
     color: white;
     font-family: 'Helvetica Neue', sans-serif;
-    -webkit-animation: fadein 2s;
 }
 
-.fixedDeconText
+.loadingOverlayFullPage
 {
+    left: 0;
+    top: 0;
     position: fixed;
+    z-index: 2147483647;
+    width: 100%;
+    height: 100%;
+    display: table;
+    opacity: 0.8;
+    background-color: black;
+}
+
+#deconNotifier
+{
+    position: fixed;
+    z-index: 1000;
+    left: 20px;
+    top: 20px;
+    background-color: #DDD;
 }

js/content.js

@@ -25,7 +25,7 @@ function initRestylingInterface(visData) {
 
         setTimeout(function() {
             chrome.runtime.sendMessage({type: "restylingData", data: visData});
-            jQuery(".loadingOverlay").remove();
+            jQuery(".loadingOverlay, .loadingOverlayFullPage").remove();
         }, 500);
     });
 }

js/injected.js

@@ -8,7 +8,7 @@ document.addEventListener("contextmenu", function(event) {
 
 document.addEventListener("pageDeconEvent", function () {
     console.log("about to deconstruct");
-    buildOverlay($("body")[0], true);
+    buildOverlay($("html")[0], true);
     setTimeout(pageDeconstruct, 10);
 });
 
@@ -29,23 +29,25 @@ document.addEventListener("nodeDeconEvent", function () {
 });
 
 function buildOverlay(domElem, fullPage) {
-    var elemOffset = $(domElem).offset();
-    var overlay = $('<div class="loadingOverlay"></div>');
-    $(overlay).css("top", elemOffset.top);
-    $(overlay).css("left", elemOffset.left);
-
-    var rect = domElem.getBoundingClientRect();
-    $(overlay).css("width", rect.width);
-    $(overlay).css("height", rect.height);
-
-    var text = $('<span class="deconText">Deconstructing...</span>');
+    var overlay;
     if (fullPage) {
-        $(text).addClass("fixedDeconText");
+        overlay = $('<div class="loadingOverlayFullPage"></div>');
+        $(overlay).append(text);
+    }
+    else {
+        var elemOffset = $(domElem).offset();
+        overlay = $('<div class="loadingOverlay"></div>');
+        $(overlay).css("top", elemOffset.top);
+        $(overlay).css("left", elemOffset.left);
+
+        var rect = domElem.getBoundingClientRect();
+        $(overlay).css("width", rect.width);
+        $(overlay).css("height", rect.height);
     }
 
+    var text = $('<div class="overlayText">Deconstructing...</div>');
     $(overlay).append(text);
-
-    $("body").append(overlay);
+    $("html").append(overlay);
 }
 
 /**