wp/wp-admin/js/site-health.js
changeset 16 a86126ab1dd4
parent 9 177826044cd9
child 18 be944660c56a
--- a/wp/wp-admin/js/site-health.js	Tue Oct 22 16:11:46 2019 +0200
+++ b/wp/wp-admin/js/site-health.js	Tue Dec 15 13:49:49 2020 +0100
@@ -10,19 +10,38 @@
 
 	var __ = wp.i18n.__,
 		_n = wp.i18n._n,
-		sprintf = wp.i18n.sprintf;
-
-	var data;
-	var clipboard = new ClipboardJS( '.site-health-copy-buttons .copy-button' );
-	var isDebugTab = $( '.health-check-body.health-check-debug-tab' ).length;
-	var pathsSizesSection = $( '#health-check-accordion-block-wp-paths-sizes' );
+		sprintf = wp.i18n.sprintf,
+		data,
+		clipboard = new ClipboardJS( '.site-health-copy-buttons .copy-button' ),
+		isDebugTab = $( '.health-check-body.health-check-debug-tab' ).length,
+		pathsSizesSection = $( '#health-check-accordion-block-wp-paths-sizes' ),
+		successTimeout;
 
 	// Debug information copy section.
 	clipboard.on( 'success', function( e ) {
-		var $wrapper = $( e.trigger ).closest( 'div' );
-		$( '.success', $wrapper ).addClass( 'visible' );
+		var triggerElement = $( e.trigger ),
+			successElement = $( '.success', triggerElement.closest( 'div' ) );
+
+		// Clear the selection and move focus back to the trigger.
+		e.clearSelection();
+		// Handle ClipboardJS focus bug, see https://github.com/zenorocha/clipboard.js/issues/680
+		triggerElement.focus();
+
+		// Show success visual feedback.
+		clearTimeout( successTimeout );
+		successElement.removeClass( 'hidden' );
 
-		wp.a11y.speak( __( 'Site information has been added to your clipboard.' ) );
+		// Hide success visual feedback after 3 seconds since last success.
+		successTimeout = setTimeout( function() {
+			successElement.addClass( 'hidden' );
+			// Remove the visually hidden textarea so that it isn't perceived by assistive technologies.
+			if ( clipboard.clipboardAction.fakeElem && clipboard.clipboardAction.removeFake ) {
+				clipboard.clipboardAction.removeFake();
+			}
+		}, 3000 );
+
+		// Handle success audible feedback.
+		wp.a11y.speak( __( 'Site information has been copied to your clipboard.' ) );
 	} );
 
 	// Accordion handling in various areas.
@@ -48,28 +67,37 @@
 	} );
 
 	/**
-	 * Append a new issue to the issue list.
+	 * Appends a new issue to the issue list.
 	 *
 	 * @since 5.2.0
 	 *
 	 * @param {Object} issue The issue data.
 	 */
-	function AppendIssue( issue ) {
+	function appendIssue( issue ) {
 		var template = wp.template( 'health-check-issue' ),
 			issueWrapper = $( '#health-check-issues-' + issue.status ),
 			heading,
 			count;
-
+		
 		SiteHealth.site_status.issues[ issue.status ]++;
 
 		count = SiteHealth.site_status.issues[ issue.status ];
 
 		if ( 'critical' === issue.status ) {
-			heading = sprintf( _n( '%s Critical issue', '%s Critical issues', count ), '<span class="issue-count">' + count + '</span>' );
+			heading = sprintf(
+				_n( '%s critical issue', '%s critical issues', count ),
+				'<span class="issue-count">' + count + '</span>'
+			);
 		} else if ( 'recommended' === issue.status ) {
-			heading = sprintf( _n( '%s Recommended improvement', '%s Recommended improvements', count ), '<span class="issue-count">' + count + '</span>' );
+			heading = sprintf(
+				_n( '%s recommended improvement', '%s recommended improvements', count ),
+				'<span class="issue-count">' + count + '</span>'
+			);
 		} else if ( 'good' === issue.status ) {
-			heading = sprintf( _n( '%s Item with no issues detected', '%s Items with no issues detected', count ), '<span class="issue-count">' + count + '</span>' );
+			heading = sprintf(
+				_n( '%s item with no issues detected', '%s items with no issues detected', count ),
+				'<span class="issue-count">' + count + '</span>'
+			);
 		}
 
 		if ( heading ) {
@@ -80,17 +108,21 @@
 	}
 
 	/**
-	 * Update site health status indicator as asynchronous tests are run and returned.
+	 * Updates site health status indicator as asynchronous tests are run and returned.
 	 *
 	 * @since 5.2.0
 	 */
-	function RecalculateProgression() {
+	function recalculateProgression() {
 		var r, c, pct;
 		var $progress = $( '.site-health-progress' );
-		var $progressCount = $progress.find( '.site-health-progress-count' );
+		var $wrapper = $progress.closest( '.site-health-progress-wrapper' );
+		var $progressLabel = $( '.site-health-progress-label', $wrapper );
 		var $circle = $( '.site-health-progress svg #bar' );
-		var totalTests = parseInt( SiteHealth.site_status.issues.good, 0 ) + parseInt( SiteHealth.site_status.issues.recommended, 0 ) + ( parseInt( SiteHealth.site_status.issues.critical, 0 ) * 1.5 );
-		var failedTests = parseInt( SiteHealth.site_status.issues.recommended, 0 ) + ( parseInt( SiteHealth.site_status.issues.critical, 0 ) * 1.5 );
+		var totalTests = parseInt( SiteHealth.site_status.issues.good, 0 ) +
+				parseInt( SiteHealth.site_status.issues.recommended, 0 ) +
+				( parseInt( SiteHealth.site_status.issues.critical, 0 ) * 1.5 );
+		var failedTests = ( parseInt( SiteHealth.site_status.issues.recommended, 0 ) * 0.5 ) +
+				( parseInt( SiteHealth.site_status.issues.critical, 0 ) * 1.5 );
 		var val = 100 - Math.ceil( ( failedTests / totalTests ) * 100 );
 
 		if ( 0 === totalTests ) {
@@ -98,7 +130,7 @@
 			return;
 		}
 
-		$progress.removeClass( 'loading' );
+		$wrapper.removeClass( 'loading' );
 
 		r = $circle.attr( 'r' );
 		c = Math.PI * ( r * 2 );
@@ -122,21 +154,18 @@
 			$( '#health-check-issues-recommended' ).addClass( 'hidden' );
 		}
 
-		if ( 50 <= val ) {
-			$circle.addClass( 'orange' ).removeClass( 'red' );
-		}
+		if ( 80 <= val && 0 === parseInt( SiteHealth.site_status.issues.critical, 0 ) ) {
+			$wrapper.addClass( 'green' ).removeClass( 'orange' );
 
-		if ( 90 <= val ) {
-			$circle.addClass( 'green' ).removeClass( 'orange' );
+			$progressLabel.text( __( 'Good' ) );
+			wp.a11y.speak( __( 'All site health tests have finished running. Your site is looking good, and the results are now available on the page.' ) );
+		} else {
+			$wrapper.addClass( 'orange' ).removeClass( 'green' );
+
+			$progressLabel.text( __( 'Should be improved' ) );
+			wp.a11y.speak( __( 'All site health tests have finished running. There are items that should be addressed, and the results are now available on the page.' ) );
 		}
 
-		if ( 100 === val ) {
-			$( '.site-status-all-clear' ).removeClass( 'hide' );
-			$( '.site-status-has-issues' ).addClass( 'hide' );
-		}
-
-		$progressCount.text( val + '%' );
-
 		if ( ! isDebugTab ) {
 			$.post(
 				ajaxurl,
@@ -147,16 +176,15 @@
 				}
 			);
 
-			wp.a11y.speak( sprintf(
-				// translators: %s: The percentage score for the tests.
-				__( 'All site health tests have finished running. Your site scored %s, and the results are now available on the page.' ),
-				val + '%'
-			) );
+			if ( 100 === val ) {
+				$( '.site-status-all-clear' ).removeClass( 'hide' );
+				$( '.site-status-has-issues' ).addClass( 'hide' );
+			}
 		}
 	}
 
 	/**
-	 * Queue the next asynchronous test when we're ready to run it.
+	 * Queues the next asynchronous test when we're ready to run it.
 	 *
 	 * @since 5.2.0
 	 */
@@ -182,7 +210,8 @@
 					ajaxurl,
 					data,
 					function( response ) {
-						AppendIssue( response.data );
+						/** This filter is documented in wp-admin/includes/class-wp-site-health.php */
+						appendIssue( wp.hooks.applyFilters( 'site_status_test_result', response.data ) );
 						maybeRunNextAsyncTest();
 					}
 				);
@@ -192,13 +221,13 @@
 		}
 
 		if ( doCalculation ) {
-			RecalculateProgression();
+			recalculateProgression();
 		}
 	}
 
 	if ( 'undefined' !== typeof SiteHealth && ! isDebugTab ) {
 		if ( 0 === SiteHealth.site_status.direct.length && 0 === SiteHealth.site_status.async.length ) {
-			RecalculateProgression();
+			recalculateProgression();
 		} else {
 			SiteHealth.site_status.issues = {
 				'good': 0,
@@ -209,7 +238,7 @@
 
 		if ( 0 < SiteHealth.site_status.direct.length ) {
 			$.each( SiteHealth.site_status.direct, function() {
-				AppendIssue( this );
+				appendIssue( this );
 			} );
 		}
 
@@ -225,12 +254,12 @@
 				ajaxurl,
 				data,
 				function( response ) {
-					AppendIssue( response.data );
+					appendIssue( response.data );
 					maybeRunNextAsyncTest();
 				}
 			);
 		} else {
-			RecalculateProgression();
+			recalculateProgression();
 		}
 	}
 
@@ -258,12 +287,14 @@
 			var delay = ( new Date().getTime() ) - timestamp;
 
 			$( '.health-check-wp-paths-sizes.spinner' ).css( 'visibility', 'hidden' );
-			RecalculateProgression();
+			recalculateProgression();
 
 			if ( delay > 3000  ) {
-				// We have announced that we're waiting.
-				// Announce that we're ready after giving at least 3 seconds for the first announcement
-				// to be read out, or the two may collide.
+				/*
+				 * We have announced that we're waiting.
+				 * Announce that we're ready after giving at least 3 seconds
+				 * for the first announcement to be read out, or the two may collide.
+				 */
 				if ( delay > 6000 ) {
 					delay = 0;
 				} else {
@@ -284,17 +315,17 @@
 
 	function updateDirSizes( data ) {
 		var copyButton = $( 'button.button.copy-button' );
-		var clipdoardText = copyButton.attr( 'data-clipboard-text' );
+		var clipboardText = copyButton.attr( 'data-clipboard-text' );
 
 		$.each( data, function( name, value ) {
 			var text = value.debug || value.size;
 
 			if ( typeof text !== 'undefined' ) {
-				clipdoardText = clipdoardText.replace( name + ': loading...', name + ': ' + text );
+				clipboardText = clipboardText.replace( name + ': loading...', name + ': ' + text );
 			}
 		} );
 
-		copyButton.attr( 'data-clipboard-text', clipdoardText );
+		copyButton.attr( 'data-clipboard-text', clipboardText );
 
 		pathsSizesSection.find( 'td[class]' ).each( function( i, element ) {
 			var td = $( element );
@@ -310,7 +341,7 @@
 		if ( pathsSizesSection.length ) {
 			getDirectorySizes();
 		} else {
-			RecalculateProgression();
+			recalculateProgression();
 		}
 	}
 } );