Ticket #33311: 33311.2.patch

src/wp-admin/css/common.css

@@ -2696 +2696 @@
 body.plugins-php #TB_window,
 body.update-core-php #TB_window,
 body.index-php #TB_window {
-        background: #fcfcfc url( ../images/spinner.gif ) no-repeat center;
+        background: #fcfcfc;
 }
 
+/* IE 8 needs a change in the pseudo element content */
+.ie8 body.plugin-install-php #TB_window:before,
+.ie8 body.import-php #TB_window:before,
+.ie8 body.plugins-php #TB_window:before,
+.ie8 body.update-core-php #TB_window:before,
+.ie8 body.index-php #TB_window:before {
+        content: " ";
+        background: none;
+}
+
+body.plugin-install-php #TB_window.thickbox-loading:before,
+body.import-php #TB_window.thickbox-loading:before,
+body.plugins-php #TB_window.thickbox-loading:before,
+body.update-core-php #TB_window.thickbox-loading:before,
+body.index-php #TB_window.thickbox-loading:before {
+        content: "";
+        display: block;
+        width: 20px;
+        height: 20px;
+        position: absolute;
+        left: 50%;
+        top: 50%;
+        z-index: -1;
+        margin: -10px 0 0 -10px;
+        background: #fcfcfc url(../images/spinner.gif) no-repeat center;
+        -webkit-background-size: 20px 20px;
+        background-size: 20px 20px;
+        -webkit-transform: translateZ(0);
+        transform: translateZ(0);
+}
+
 @media print,
         (-webkit-min-device-pixel-ratio: 1.25),
         (min-resolution: 120dpi) {
 
-        body.plugin-install-php #TB_window,
-        body.import-php #TB_window,
-        body.plugins-php #TB_window,
-        body.update-core-php #TB_window,
-        body.index-php #TB_window {
-                background: #fcfcfc url( ../images/spinner-2x.gif ) no-repeat center;
-                -webkit-background-size: 20px 20px;
-                background-size: 20px 20px;
+        body.plugin-install-php #TB_window.thickbox-loading:before,
+        body.import-php #TB_window.thickbox-loading:before,
+        body.plugins-php #TB_window.thickbox-loading:before,
+        body.update-core-php #TB_window.thickbox-loading:before,
+        body.index-php #TB_window.thickbox-loading:before {
+                background: #fcfcfc url(../images/spinner-2x.gif) no-repeat center;
         }
 }
 

src/wp-includes/js/thickbox/thickbox.css

@@ -12 +12 @@
 
 #TB_window {
         position: fixed;
-        background: #fff;
+        background-color: #fff;
         z-index: 100050; /* Above DFW. */
         visibility: hidden;
         text-align: left;
@@ -55 +55 @@
         float: left;
         font-weight: 600;
         line-height: 29px;
-        overflow: hidden; 
+        overflow: hidden;
         padding: 0 29px 0 10px;
         text-overflow: ellipsis;
         white-space: nowrap;

src/wp-includes/js/thickbox/thickbox.js

@@ -18 +18 @@
         imgLoader.src = tb_pathToImage;
 });
 
-//add thickbox to href & area elements that have a class of .thickbox
+/*
+ * Add thickbox to href & area elements that have a class of .thickbox.
+ * Remove the loading indicator when content in an iframe has loaded.
+ */
 function tb_init(domChunk){
-        jQuery('body').on('click', domChunk, tb_click);
+        jQuery( 'body' )
+                .on( 'click', domChunk, tb_click )
+                .on( 'thickbox:iframe:loaded', function() {
+                        jQuery( '#TB_window' ).removeClass( 'thickbox-loading' );
+                });
 }
 
 function tb_click(){
@@ -39 +46 @@
                         jQuery("body","html").css({height: "100%", width: "100%"});
                         jQuery("html").css("overflow","hidden");
                         if (document.getElementById("TB_HideSelect") === null) {//iframe to hide select elements in ie6
-                                jQuery("body").append("<iframe id='TB_HideSelect'>"+thickboxL10n.noiframes+"</iframe><div id='TB_overlay'></div><div id='TB_window'></div>");
+                                jQuery("body").append("<iframe id='TB_HideSelect'>"+thickboxL10n.noiframes+"</iframe><div id='TB_overlay'></div><div id='TB_window' class='thickbox-loading'></div>");
                                 jQuery("#TB_overlay").click(tb_remove);
                         }
                 }else{//all others
                         if(document.getElementById("TB_overlay") === null){
-                                jQuery("body").append("<div id='TB_overlay'></div><div id='TB_window'></div>");
+                                jQuery("body").append("<div id='TB_overlay'></div><div id='TB_window' class='thickbox-loading'></div>");
                                 jQuery("#TB_overlay").click(tb_remove);
                                 jQuery( 'body' ).addClass( 'modal-open' );
                         }
@@ -195 +202 @@
                                         urlNoQuery = url.split('TB_');
                                         jQuery("#TB_iframeContent").remove();
                                         if(params['modal'] != "true"){//iframe no modal
-                                                jQuery("#TB_window").append("<div id='TB_title'><div id='TB_ajaxWindowTitle'>"+caption+"</div><div id='TB_closeAjaxWindow'><a href='#' id='TB_closeWindowButton'><span class='screen-reader-text'>"+thickboxL10n.close+"</span><div class='tb-close-icon'></div></a></div></div><iframe frameborder='0' hspace='0' src='"+urlNoQuery[0]+"' id='TB_iframeContent' name='TB_iframeContent"+Math.round(Math.random()*1000)+"' onload='tb_showIframe()' style='width:"+(ajaxContentW + 29)+"px;height:"+(ajaxContentH + 17)+"px;' >"+thickboxL10n.noiframes+"</iframe>");
+                                                jQuery("#TB_window").append("<div id='TB_title'><div id='TB_ajaxWindowTitle'>"+caption+"</div><div id='TB_closeAjaxWindow'><a href='#' id='TB_closeWindowButton'><span class='screen-reader-text'>"+thickboxL10n.close+"</span><div class='tb-close-icon'></div></a></div></div><iframe frameborder='0' hspace='0' allowTransparency='true' src='"+urlNoQuery[0]+"' id='TB_iframeContent' name='TB_iframeContent"+Math.round(Math.random()*1000)+"' onload='tb_showIframe()' style='width:"+(ajaxContentW + 29)+"px;height:"+(ajaxContentH + 17)+"px;' >"+thickboxL10n.noiframes+"</iframe>");
                                         }else{//iframe modal
                                         jQuery("#TB_overlay").unbind();
-                                                jQuery("#TB_window").append("<iframe frameborder='0' hspace='0' src='"+urlNoQuery[0]+"' id='TB_iframeContent' name='TB_iframeContent"+Math.round(Math.random()*1000)+"' onload='tb_showIframe()' style='width:"+(ajaxContentW + 29)+"px;height:"+(ajaxContentH + 17)+"px;'>"+thickboxL10n.noiframes+"</iframe>");
+                                                jQuery("#TB_window").append("<iframe frameborder='0' hspace='0' allowTransparency='true' src='"+urlNoQuery[0]+"' id='TB_iframeContent' name='TB_iframeContent"+Math.round(Math.random()*1000)+"' onload='tb_showIframe()' style='width:"+(ajaxContentW + 29)+"px;height:"+(ajaxContentH + 17)+"px;'>"+thickboxL10n.noiframes+"</iframe>");
                                         }
                         }else{// not an iframe, ajax
                                         if(jQuery("#TB_window").css("visibility") != "visible"){
@@ -260 +267 @@
 //helper functions below
 function tb_showIframe(){
         jQuery("#TB_load").remove();
-        jQuery("#TB_window").css({'visibility':'visible'});
+        jQuery("#TB_window").css({'visibility':'visible'}).trigger( 'thickbox:iframe:loaded' );
 }
 
 function tb_remove() {