Authentication modal dialog: the spinner should disappear when loading is done.

Also, when using spinners as background images, the re-painted area should be the
smallest possible one. See similar performance issue in #33311.

Fixes #34951.
Built from https://develop.svn.wordpress.org/trunk@35925


git-svn-id: http://core.svn.wordpress.org/trunk@35889 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
Andrea Fercia 2015-12-14 16:40:27 +00:00
parent 0faf2dd57b
commit b5f5dff136
8 changed files with 62 additions and 12 deletions

View File

@ -48,14 +48,38 @@
}
#wp-auth-check-wrap #wp-auth-check-form {
background: url(../images/spinner-2x.gif) no-repeat center center;
-webkit-background-size: 16px 16px;
background-size: 16px 16px;
height: 100%;
position: relative;
overflow: auto;
-webkit-overflow-scrolling: touch;
}
#wp-auth-check-form.loading:before {
content: "";
display: block;
width: 20px;
height: 20px;
position: absolute;
right: 50%;
top: 50%;
margin: -10px -10px 0 0;
background: 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) {
#wp-auth-check-form.loading:before {
background-image: url(../images/spinner-2x.gif);
}
}
#wp-auth-check-wrap #wp-auth-check-form iframe {
height: 98%; /* Scrollbar fix */
width: 100%;

View File

@ -1 +1 @@
#wp-auth-check-wrap.hidden{display:none}#wp-auth-check-wrap #wp-auth-check-bg{position:fixed;top:0;bottom:0;right:0;left:0;background:#000;opacity:.7;filter:alpha(opacity=70);z-index:1000010}#wp-auth-check-wrap #wp-auth-check{position:fixed;right:50%;overflow:hidden;top:40px;bottom:20px;max-height:415px;width:380px;margin:0 -190px 0 0;padding:30px 0 0;background-color:#f1f1f1;z-index:1000011;-webkit-box-shadow:0 3px 6px rgba(0,0,0,.3);box-shadow:0 3px 6px rgba(0,0,0,.3)}@media screen and (max-width:380px){#wp-auth-check-wrap #wp-auth-check{right:0;width:100%;margin:0}}#wp-auth-check-wrap.fallback #wp-auth-check{max-height:180px;overflow:auto}#wp-auth-check-wrap #wp-auth-check-form{background:url(../images/spinner-2x.gif) center center no-repeat;-webkit-background-size:16px 16px;background-size:16px 16px;height:100%;overflow:auto;-webkit-overflow-scrolling:touch}#wp-auth-check-wrap #wp-auth-check-form iframe{height:98%;width:100%}#wp-auth-check-wrap .wp-auth-check-close{position:absolute;top:8px;left:8px;height:22px;width:22px;cursor:pointer}#wp-auth-check-wrap .wp-auth-check-close:before{content:"\f158";display:block!important;font:400 20px/1 dashicons;speak:none;height:22px;margin:2px 0;text-align:center;width:22px;color:#777;-webkit-font-smoothing:antialiased!important;-moz-osx-font-smoothing:grayscale}#wp-auth-check-wrap .wp-auth-check-close:hover:before{color:#0073aa}#wp-auth-check-wrap .wp-auth-check-close:focus{outline:#82878c dotted 1px}#wp-auth-check-wrap .wp-auth-fallback-expired{outline:0}#wp-auth-check-wrap .wp-auth-fallback{font-size:14px;line-height:21px;padding:0 25px;display:none}#wp-auth-check-wrap.fallback .wp-auth-check-close,#wp-auth-check-wrap.fallback .wp-auth-fallback{display:block}
#wp-auth-check-wrap.hidden{display:none}#wp-auth-check-wrap #wp-auth-check-bg{position:fixed;top:0;bottom:0;right:0;left:0;background:#000;opacity:.7;filter:alpha(opacity=70);z-index:1000010}#wp-auth-check-wrap #wp-auth-check{position:fixed;right:50%;overflow:hidden;top:40px;bottom:20px;max-height:415px;width:380px;margin:0 -190px 0 0;padding:30px 0 0;background-color:#f1f1f1;z-index:1000011;-webkit-box-shadow:0 3px 6px rgba(0,0,0,.3);box-shadow:0 3px 6px rgba(0,0,0,.3)}@media screen and (max-width:380px){#wp-auth-check-wrap #wp-auth-check{right:0;width:100%;margin:0}}#wp-auth-check-wrap.fallback #wp-auth-check{max-height:180px;overflow:auto}#wp-auth-check-wrap #wp-auth-check-form{height:100%;position:relative;overflow:auto;-webkit-overflow-scrolling:touch}#wp-auth-check-form.loading:before{content:"";display:block;width:20px;height:20px;position:absolute;right:50%;top:50%;margin:-10px -10px 0 0;background:url(../images/spinner.gif) center no-repeat;-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){#wp-auth-check-form.loading:before{background-image:url(../images/spinner-2x.gif)}}#wp-auth-check-wrap #wp-auth-check-form iframe{height:98%;width:100%}#wp-auth-check-wrap .wp-auth-check-close{position:absolute;top:8px;left:8px;height:22px;width:22px;cursor:pointer}#wp-auth-check-wrap .wp-auth-check-close:before{content:"\f158";display:block!important;font:400 20px/1 dashicons;speak:none;height:22px;margin:2px 0;text-align:center;width:22px;color:#777;-webkit-font-smoothing:antialiased!important;-moz-osx-font-smoothing:grayscale}#wp-auth-check-wrap .wp-auth-check-close:hover:before{color:#0073aa}#wp-auth-check-wrap .wp-auth-check-close:focus{outline:#82878c dotted 1px}#wp-auth-check-wrap .wp-auth-fallback-expired{outline:0}#wp-auth-check-wrap .wp-auth-fallback{font-size:14px;line-height:21px;padding:0 25px;display:none}#wp-auth-check-wrap.fallback .wp-auth-check-close,#wp-auth-check-wrap.fallback .wp-auth-fallback{display:block}

View File

@ -48,14 +48,38 @@
}
#wp-auth-check-wrap #wp-auth-check-form {
background: url(../images/spinner-2x.gif) no-repeat center center;
-webkit-background-size: 16px 16px;
background-size: 16px 16px;
height: 100%;
position: relative;
overflow: auto;
-webkit-overflow-scrolling: touch;
}
#wp-auth-check-form.loading:before {
content: "";
display: block;
width: 20px;
height: 20px;
position: absolute;
left: 50%;
top: 50%;
margin: -10px 0 0 -10px;
background: 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) {
#wp-auth-check-form.loading:before {
background-image: url(../images/spinner-2x.gif);
}
}
#wp-auth-check-wrap #wp-auth-check-form iframe {
height: 98%; /* Scrollbar fix */
width: 100%;

View File

@ -1 +1 @@
#wp-auth-check-wrap.hidden{display:none}#wp-auth-check-wrap #wp-auth-check-bg{position:fixed;top:0;bottom:0;left:0;right:0;background:#000;opacity:.7;filter:alpha(opacity=70);z-index:1000010}#wp-auth-check-wrap #wp-auth-check{position:fixed;left:50%;overflow:hidden;top:40px;bottom:20px;max-height:415px;width:380px;margin:0 0 0 -190px;padding:30px 0 0;background-color:#f1f1f1;z-index:1000011;-webkit-box-shadow:0 3px 6px rgba(0,0,0,.3);box-shadow:0 3px 6px rgba(0,0,0,.3)}@media screen and (max-width:380px){#wp-auth-check-wrap #wp-auth-check{left:0;width:100%;margin:0}}#wp-auth-check-wrap.fallback #wp-auth-check{max-height:180px;overflow:auto}#wp-auth-check-wrap #wp-auth-check-form{background:url(../images/spinner-2x.gif) center center no-repeat;-webkit-background-size:16px 16px;background-size:16px 16px;height:100%;overflow:auto;-webkit-overflow-scrolling:touch}#wp-auth-check-wrap #wp-auth-check-form iframe{height:98%;width:100%}#wp-auth-check-wrap .wp-auth-check-close{position:absolute;top:8px;right:8px;height:22px;width:22px;cursor:pointer}#wp-auth-check-wrap .wp-auth-check-close:before{content:"\f158";display:block!important;font:400 20px/1 dashicons;speak:none;height:22px;margin:2px 0;text-align:center;width:22px;color:#777;-webkit-font-smoothing:antialiased!important;-moz-osx-font-smoothing:grayscale}#wp-auth-check-wrap .wp-auth-check-close:hover:before{color:#0073aa}#wp-auth-check-wrap .wp-auth-check-close:focus{outline:#82878c dotted 1px}#wp-auth-check-wrap .wp-auth-fallback-expired{outline:0}#wp-auth-check-wrap .wp-auth-fallback{font-size:14px;line-height:21px;padding:0 25px;display:none}#wp-auth-check-wrap.fallback .wp-auth-check-close,#wp-auth-check-wrap.fallback .wp-auth-fallback{display:block}
#wp-auth-check-wrap.hidden{display:none}#wp-auth-check-wrap #wp-auth-check-bg{position:fixed;top:0;bottom:0;left:0;right:0;background:#000;opacity:.7;filter:alpha(opacity=70);z-index:1000010}#wp-auth-check-wrap #wp-auth-check{position:fixed;left:50%;overflow:hidden;top:40px;bottom:20px;max-height:415px;width:380px;margin:0 0 0 -190px;padding:30px 0 0;background-color:#f1f1f1;z-index:1000011;-webkit-box-shadow:0 3px 6px rgba(0,0,0,.3);box-shadow:0 3px 6px rgba(0,0,0,.3)}@media screen and (max-width:380px){#wp-auth-check-wrap #wp-auth-check{left:0;width:100%;margin:0}}#wp-auth-check-wrap.fallback #wp-auth-check{max-height:180px;overflow:auto}#wp-auth-check-wrap #wp-auth-check-form{height:100%;position:relative;overflow:auto;-webkit-overflow-scrolling:touch}#wp-auth-check-form.loading:before{content:"";display:block;width:20px;height:20px;position:absolute;left:50%;top:50%;margin:-10px 0 0 -10px;background:url(../images/spinner.gif) center no-repeat;-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){#wp-auth-check-form.loading:before{background-image:url(../images/spinner-2x.gif)}}#wp-auth-check-wrap #wp-auth-check-form iframe{height:98%;width:100%}#wp-auth-check-wrap .wp-auth-check-close{position:absolute;top:8px;right:8px;height:22px;width:22px;cursor:pointer}#wp-auth-check-wrap .wp-auth-check-close:before{content:"\f158";display:block!important;font:400 20px/1 dashicons;speak:none;height:22px;margin:2px 0;text-align:center;width:22px;color:#777;-webkit-font-smoothing:antialiased!important;-moz-osx-font-smoothing:grayscale}#wp-auth-check-wrap .wp-auth-check-close:hover:before{color:#0073aa}#wp-auth-check-wrap .wp-auth-check-close:focus{outline:#82878c dotted 1px}#wp-auth-check-wrap .wp-auth-fallback-expired{outline:0}#wp-auth-check-wrap .wp-auth-fallback{font-size:14px;line-height:21px;padding:0 25px;display:none}#wp-auth-check-wrap.fallback .wp-auth-check-close,#wp-auth-check-wrap.fallback .wp-auth-fallback{display:block}

View File

@ -4939,7 +4939,7 @@ function wp_auth_check_html() {
if ( $same_domain ) {
?>
<div id="wp-auth-check-form" data-src="<?php echo esc_url( add_query_arg( array( 'interim-login' => 1 ), $login_url ) ); ?>"></div>
<div id="wp-auth-check-form" class="loading" data-src="<?php echo esc_url( add_query_arg( array( 'interim-login' => 1 ), $login_url ) ); ?>"></div>
<?php
}

View File

@ -20,6 +20,8 @@
var height, body;
loaded = true;
// Remove the spinner to avoid unnecessary CPU/GPU usage.
form.removeClass( 'loading' );
try {
body = $(this).contents().find('body');
@ -46,7 +48,7 @@
}
}).attr( 'src', form.data('src') );
$('#wp-auth-check-form').append( frame );
form.append( frame );
}
$( 'body' ).addClass( 'modal-open' );

View File

@ -1 +1 @@
!function(a){function b(){var b,d=a("#wp-auth-check"),f=a("#wp-auth-check-form"),g=e.find(".wp-auth-fallback-expired"),h=!1;f.length&&(a(window).on("beforeunload.wp-auth-check",function(a){a.originalEvent.returnValue=window.authcheckL10n.beforeunload}),b=a('<iframe id="wp-auth-check-frame" frameborder="0">').attr("title",g.text()),b.load(function(){var b,i;h=!0;try{i=a(this).contents().find("body"),b=i.height()}catch(j){return e.addClass("fallback"),d.css("max-height",""),f.remove(),void g.focus()}b?i&&i.hasClass("interim-login-success")?c():d.css("max-height",b+40+"px"):i&&i.length||(e.addClass("fallback"),d.css("max-height",""),f.remove(),g.focus())}).attr("src",f.data("src")),a("#wp-auth-check-form").append(b)),a("body").addClass("modal-open"),e.removeClass("hidden"),b?(b.focus(),setTimeout(function(){h||(e.addClass("fallback"),f.remove(),g.focus())},1e4)):g.focus()}function c(){a(window).off("beforeunload.wp-auth-check"),"undefined"==typeof adminpage||"post-php"!==adminpage&&"post-new-php"!==adminpage||"undefined"==typeof wp||!wp.heartbeat||(a(document).off("heartbeat-tick.wp-auth-check"),wp.heartbeat.connectNow()),e.fadeOut(200,function(){e.addClass("hidden").css("display",""),a("#wp-auth-check-frame").remove(),a("body").removeClass("modal-open")})}function d(){var a=parseInt(window.authcheckL10n.interval,10)||180;f=(new Date).getTime()+1e3*a}var e,f;a(document).on("heartbeat-tick.wp-auth-check",function(a,f){"wp-auth-check"in f&&(d(),!f["wp-auth-check"]&&e.hasClass("hidden")?b():f["wp-auth-check"]&&!e.hasClass("hidden")&&c())}).on("heartbeat-send.wp-auth-check",function(a,b){(new Date).getTime()>f&&(b["wp-auth-check"]=!0)}).ready(function(){d(),e=a("#wp-auth-check-wrap"),e.find(".wp-auth-check-close").on("click",function(){c()})})}(jQuery);
!function(a){function b(){var b,d=a("#wp-auth-check"),f=a("#wp-auth-check-form"),g=e.find(".wp-auth-fallback-expired"),h=!1;f.length&&(a(window).on("beforeunload.wp-auth-check",function(a){a.originalEvent.returnValue=window.authcheckL10n.beforeunload}),b=a('<iframe id="wp-auth-check-frame" frameborder="0">').attr("title",g.text()),b.load(function(){var b,i;h=!0,f.removeClass("loading");try{i=a(this).contents().find("body"),b=i.height()}catch(j){return e.addClass("fallback"),d.css("max-height",""),f.remove(),void g.focus()}b?i&&i.hasClass("interim-login-success")?c():d.css("max-height",b+40+"px"):i&&i.length||(e.addClass("fallback"),d.css("max-height",""),f.remove(),g.focus())}).attr("src",f.data("src")),f.append(b)),a("body").addClass("modal-open"),e.removeClass("hidden"),b?(b.focus(),setTimeout(function(){h||(e.addClass("fallback"),f.remove(),g.focus())},1e4)):g.focus()}function c(){a(window).off("beforeunload.wp-auth-check"),"undefined"==typeof adminpage||"post-php"!==adminpage&&"post-new-php"!==adminpage||"undefined"==typeof wp||!wp.heartbeat||(a(document).off("heartbeat-tick.wp-auth-check"),wp.heartbeat.connectNow()),e.fadeOut(200,function(){e.addClass("hidden").css("display",""),a("#wp-auth-check-frame").remove(),a("body").removeClass("modal-open")})}function d(){var a=parseInt(window.authcheckL10n.interval,10)||180;f=(new Date).getTime()+1e3*a}var e,f;a(document).on("heartbeat-tick.wp-auth-check",function(a,f){"wp-auth-check"in f&&(d(),!f["wp-auth-check"]&&e.hasClass("hidden")?b():f["wp-auth-check"]&&!e.hasClass("hidden")&&c())}).on("heartbeat-send.wp-auth-check",function(a,b){(new Date).getTime()>f&&(b["wp-auth-check"]=!0)}).ready(function(){d(),e=a("#wp-auth-check-wrap"),e.find(".wp-auth-check-close").on("click",function(){c()})})}(jQuery);

View File

@ -4,7 +4,7 @@
*
* @global string $wp_version
*/
$wp_version = '4.5-alpha-35924';
$wp_version = '4.5-alpha-35925';
/**
* Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.