Changeset 35925

Timestamp:

12/14/2015 04:39:48 PM (9 years ago)

Author:

afercia

Message:

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.

Location:

trunk/src/wp-includes

Files:

• css/wp-auth-check.css (modified) (1 diff)
• functions.php (modified) (1 diff)
• js/wp-auth-check.js (modified) (2 diffs)

trunk/src/wp-includes/css/wp-auth-check.css

@@ -49 +49 @@
 
 #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);
+    }
+
 }
 

trunk/src/wp-includes/functions.php

@@ -4940 +4940 @@
     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
     }

trunk/src/wp-includes/js/wp-auth-check.js

@@ -21 +21 @@
 
                 loaded = true;
+                // Remove the spinner to avoid unnecessary CPU/GPU usage.
+                form.removeClass( 'loading' );
 
                 try {
@@ -47 +49 @@
             }).attr( 'src', form.data('src') );
 
-            $('#wp-auth-check-form').append( frame );
+            form.append( frame );
         }