Ticket #40453: 40453.3.diff

src/wp-admin/includes/class-bulk-upgrader-skin.php

@@ -43 +43 @@
                 /* translators: 1: Title of an update */
                 $this->upgrader->strings['skin_update_failed'] = __('The update of %1$s failed.');
                 /* translators: 1: Title of an update */
-                $this->upgrader->strings['skin_update_successful'] = __( '%1$s updated successfully.' ) . ' <a onclick="%2$s" href="#" class="hide-if-no-js"><span>' . __( 'Show Details' ) . '</span><span class="hidden">' . __( 'Hide Details' ) . '</span></a>';
+                $this->upgrader->strings['skin_update_successful'] = __( '%1$s updated successfully.' );
                 $this->upgrader->strings['skin_upgrade_end'] = __('All updates have been completed.');
         }
 
@@ -128 +128 @@
                 $this->in_loop = true;
                 printf( '<h2>' . $this->upgrader->strings['skin_before_update_header'] . ' <span class="spinner waiting-' . $this->upgrader->update_current . '"></span></h2>', $title, $this->upgrader->update_current, $this->upgrader->update_count );
                 echo '<script type="text/javascript">jQuery(\'.waiting-' . esc_js($this->upgrader->update_current) . '\').css("display", "inline-block");</script>';
+                // This progress messages div gets moved via JavaScript when clicking on "Show details.".
                 echo '<div class="update-messages hide-if-js" id="progress-' . esc_attr($this->upgrader->update_current) . '"><p>';
                 $this->flush_output();
         }
@@ -148 +149 @@
                         echo '<script type="text/javascript">jQuery(\'#progress-' . esc_js($this->upgrader->update_current) . '\').show();</script>';
                 }
                 if ( $this->result && ! is_wp_error( $this->result ) ) {
-                        if ( ! $this->error )
-                                echo '<div class="updated"><p>' . sprintf($this->upgrader->strings['skin_update_successful'], $title, 'jQuery(\'#progress-' . esc_js($this->upgrader->update_current) . '\').toggle();jQuery(\'span\', this).toggle(); return false;') . '</p></div>';
+                        if ( ! $this->error ) {
+                                echo '<div class="updated js-update-details" data-update-details="progress-' . esc_attr( $this->upgrader->update_current ) . '">' .
+                                        '<p>' . sprintf( $this->upgrader->strings['skin_update_successful'], $title ) .
+                                        ' <button type="button" class="hide-if-no-js button-link js-update-details-toggle" aria-expanded="false">' . __( 'Show details.' ) . '</button>' .
+                                        '</p></div>';
+                        }
+
                         echo '<script type="text/javascript">jQuery(\'.waiting-' . esc_js($this->upgrader->update_current) . '\').hide();</script>';
                 }
 

src/wp-admin/js/common.js

@@ -978 +978 @@
 
         // Set initial focus on a specific element.
         $( '.wp-initial-focus' ).focus();
+
+        // Toggle update details on update-core.php.
+        $body.on( 'click', '.js-update-details-toggle', function() {
+                var $updateNotice = $( this ).closest( '.js-update-details' ),
+                        $progressDiv = $( '#' + $updateNotice.data( 'update-details' ) );
+
+                /*
+                 * When clicking on "Show details" move the progress div below the update
+                 * notice. Make sure it gets moved just the first time.
+                 */
+                if ( ! $progressDiv.hasClass( 'update-details-moved' ) ) {
+                        $progressDiv.insertAfter( $updateNotice ).addClass( 'update-details-moved' );
+                }
+
+                // Toggle the progress div visibility.
+                $progressDiv.toggle();
+                // Toggle the Show Details button expanded state.
+                $( this ).attr( 'aria-expanded', $progressDiv.is( ':visible' ) )
+        })
 });
 
 // Fire a custom jQuery event at the end of window resize