Use AJAX for activating features / plugins in Performance Lab

plugins/performance-lab/includes/admin/load.php

@@ -49,9 +49,6 @@ function perflab_load_features_page(): void {
 
 	// Handle style for settings page.
 	add_action( 'admin_head', 'perflab_print_features_page_style' );
-
-	// Handle script for settings page.
-	add_action( 'admin_footer', 'perflab_print_plugin_progress_indicator_script' );
 }
 
 /**
@@ -230,6 +227,24 @@ function perflab_enqueue_features_page_scripts(): void {
 
 	// Enqueue the a11y script.
 	wp_enqueue_script( 'wp-a11y' );
+
+	// Enqueue plugin activate AJAX script and localize script data.
+	wp_enqueue_script(
+		'perflab-plugin-activate-ajax',
+		plugins_url( 'includes/admin/plugin-activate-ajax.js', PERFLAB_MAIN_FILE ),
+		array( 'wp-i18n', 'wp-a11y' ),
+		PERFLAB_VERSION,
+		true
+	);
+
+	wp_localize_script(
+		'perflab-plugin-activate-ajax',
+		'perflabPluginActivateAjaxData',
+		array(
+			'ajaxUrl' => admin_url( 'admin-ajax.php' ),
+			'nonce'   => wp_create_nonce( 'perflab_install_activate_plugin_ajax' ),
+		)
+	);
 }
 
 /**
@@ -290,6 +305,47 @@ function perflab_install_activate_plugin_callback(): void {
 }
 add_action( 'admin_action_perflab_install_activate_plugin', 'perflab_install_activate_plugin_callback' );
 
+/**
+ * Callback for handling installation/activation of plugin using ajax.
+ *
+ * @since n.e.x.t
+ */
+function perflab_install_activate_plugin_ajax_callback(): void {
+	check_ajax_referer( 'perflab_install_activate_plugin_ajax', '_ajax_nonce' );
+
+	require_once ABSPATH . 'wp-admin/includes/plugin.php';
+	require_once ABSPATH . 'wp-admin/includes/plugin-install.php';
+	require_once ABSPATH . 'wp-admin/includes/class-wp-upgrader.php';
+	require_once ABSPATH . 'wp-admin/includes/class-wp-ajax-upgrader-skin.php';
+
+	if ( ! isset( $_POST['slug'] ) ) {
+		wp_send_json_error( __( 'Missing required parameter.', 'performance-lab' ), 400 );
+	}
+
+	$plugin_slug = perflab_sanitize_plugin_slug( wp_unslash( $_POST['slug'] ) );
+	if ( null === $plugin_slug ) {
+		wp_send_json_error( __( 'Invalid plugin.', 'performance-lab' ), 400 );
+	}
+
+	// Install and activate the plugin and its dependencies.
+	$result = perflab_install_and_activate_plugin( $plugin_slug );
+	if ( $result instanceof WP_Error ) {
+		wp_send_json_error( $result->get_error_message() );
+	}
+
+	$plugin_settings_url = perflab_get_plugin_settings_url( $plugin_slug );
+	if ( null !== $plugin_settings_url ) {
+		wp_send_json_success(
+			array(
+				'pluginSettingsURL' => esc_url_raw( $plugin_settings_url ),
+			)
+		);
+	}
+
+	wp_send_json_success();
+}
+add_action( 'wp_ajax_perflab_install_activate_plugin', 'perflab_install_activate_plugin_ajax_callback' );
+
 /**
  * Callback function to handle admin inline style.
  *
@@ -396,42 +452,6 @@ static function ( $name ) {
 	}
 }
 
-/**
- * Callback function that print plugin progress indicator script.
- *
- * @since 3.1.0
- */
-function perflab_print_plugin_progress_indicator_script(): void {
-	$js_function = <<<JS
-		function addPluginProgressIndicator( message ) {
-			document.addEventListener( 'DOMContentLoaded', function () {
-				document.addEventListener( 'click', function ( event ) {
-					if (
-						event.target.classList.contains(
-							'perflab-install-active-plugin'
-						)
-					) {
-						const target = event.target;
-						target.classList.add( 'updating-message' );
-						target.textContent = message;
-
-						wp.a11y.speak( message );
-					}
-				} );
-			} );
-		}
-JS;
-
-	wp_print_inline_script_tag(
-		sprintf(
-			'( %s )( %s );',
-			$js_function,
-			wp_json_encode( __( 'Activating...', 'default' ) )
-		),
-		array( 'type' => 'module' )
-	);
-}
-
 /**
  * Gets the URL to the plugin settings screen if one exists.
  *

plugins/performance-lab/includes/admin/plugin-activate-ajax.js

@@ -0,0 +1,107 @@
+/**
+ * Handles activation of Performance Features (Plugins) using AJAX.
+ */
+
+/* global perflabPluginActivateAjaxData */
+( function () {
+	// @ts-ignore
+	const { i18n, a11y } = wp;
+	const { __ } = i18n;
+
+	/**
+	 * Handles click events on elements with the class 'perflab-install-active-plugin'.
+	 *
+	 * This asynchronous function listens for click events on the document and executes
+	 * the provided callback function if triggered.
+	 *
+	 * @param {MouseEvent} event - The click event object that is triggered when the user clicks on the document.
+	 *
+	 * @return {Promise<void>} - The asynchronous function returns a promise that resolves to void.
+	 */
+	async function handlePluginActivationClick( event ) {
+		const target = /** @type {HTMLElement} */ ( event.target );
+
+		if ( ! target.classList.contains( 'perflab-install-active-plugin' ) ) {
+			return;
+		}
+
+		// Prevent the default link behavior.
+		event.preventDefault();
+
+		target.classList.add( 'updating-message' );
+		target.textContent = __( 'Activating…', 'performance-lab' );
+		target.style.pointerEvents = 'none';
+		target.parentElement.style.cursor = 'not-allowed';
+
+		a11y.speak( __( 'Activating…', 'performance-lab' ) );
+
+		const pluginSlug = target.getAttribute( 'data-plugin-slug' ).trim();
+
+		// Send an AJAX POST request to activate the plugin.
+		try {
+			const response = await fetch(
+				// @ts-ignore
+				perflabPluginActivateAjaxData.ajaxUrl,
+				{
+					method: 'POST',
+					credentials: 'same-origin',
+					headers: {
+						'Content-Type': 'application/x-www-form-urlencoded',
+					},
+					body: new URLSearchParams( {
+						action: 'perflab_install_activate_plugin',
+						slug: pluginSlug,
+						// @ts-ignore
+						_ajax_nonce: perflabPluginActivateAjaxData.nonce,
+					} ),
+				}
+			);
+
+			const responseData = await response.json();
+
+			if ( ! responseData.success ) {
+				target.classList.remove( 'updating-message' );
+				target.textContent = __( 'Activate', 'performance-lab' );
+				target.style.pointerEvents = '';
+				target.parentElement.style.cursor = '';
+
+				return;
+			}
+
+			const newButton = document.createElement( 'button' );
+
+			newButton.type = 'button';
+			newButton.className = 'button button-disabled';
+			newButton.disabled = true;
+			newButton.textContent = __( 'Active', 'performance-lab' );
+			target.parentElement.style.cursor = '';
+
+			target.parentNode.replaceChild( newButton, target );
+
+			const pluginSettingsURL = responseData?.data?.pluginSettingsURL;
+
+			const actionButtonList = document.querySelector(
+				`.plugin-card-${ pluginSlug } .plugin-action-buttons`
+			);
+
+			if ( pluginSettingsURL && actionButtonList ) {
+				const listItem = document.createElement( 'li' );
+				const anchor = document.createElement( 'a' );
+
+				anchor.setAttribute( 'href', pluginSettingsURL );
+				anchor.textContent = __( 'Settings', 'performance-lab' );
+
+				listItem.appendChild( anchor );
+				actionButtonList.appendChild( listItem );
+			}
+		} catch ( error ) {
+			target.classList.remove( 'updating-message' );
+			target.textContent = __( 'Activate', 'performance-lab' );
+			target.style.pointerEvents = '';
+			target.parentElement.style.cursor = '';
+		}
+	}
+
+	// Attach the event listener.
+	document.addEventListener( 'click', handlePluginActivationClick );
+} )();

plugins/performance-lab/includes/admin/plugins.php

@@ -431,8 +431,9 @@ function perflab_render_plugin_card( array $plugin_data ): void {
 		);
 
 		$action_links[] = sprintf(
-			'<a class="button perflab-install-active-plugin" href="%s">%s</a>',
+			'<a class="button perflab-install-active-plugin" href="%s" data-plugin-slug="%s">%s</a>',
 			esc_url( $url ),
+			esc_attr( $plugin_data['slug'] ),
 			esc_html__( 'Activate', 'default' )
 		);
 	} else {

plugins/speculation-rules/load.php

@@ -29,7 +29,24 @@
 	 * @param Closure $load            Callback that loads the plugin.
 	 */
 	static function ( string $global_var_name, string $version, Closure $load ): void {
-		if ( ! isset( $GLOBALS[ $global_var_name ] ) ) {
+		$needs_bootstrap = ! isset( $GLOBALS[ $global_var_name ] );
+
+		// Register this copy of the plugin.
+		if (
+			// Register this copy if none has been registered yet.
+			! isset( $GLOBALS[ $global_var_name ]['version'] )
+			||
+			// Or register this copy if the version greater than what is currently registered.
+			version_compare( $version, $GLOBALS[ $global_var_name ]['version'], '>' )
+			||
+			// Otherwise, register this copy if it is actually the one installed in the directory for plugins.
+			rtrim( WP_PLUGIN_DIR, '/' ) === dirname( __DIR__ )
+		) {
+			$GLOBALS[ $global_var_name ]['version'] = $version;
+			$GLOBALS[ $global_var_name ]['load']    = $load;
+		}
+
+		if ( $needs_bootstrap ) {
 			$bootstrap = static function () use ( $global_var_name ): void {
 				if (
 					isset( $GLOBALS[ $global_var_name ]['load'], $GLOBALS[ $global_var_name ]['version'] )
@@ -45,22 +62,11 @@ static function ( string $global_var_name, string $version, Closure $load ): voi
 
 			// Wait until after the plugins have loaded and the theme has loaded. The after_setup_theme action is used
 			// because it is the first action that fires once the theme is loaded.
-			add_action( 'after_setup_theme', $bootstrap, PHP_INT_MIN );
-		}
-
-		// Register this copy of the plugin.
-		if (
-			// Register this copy if none has been registered yet.
-			! isset( $GLOBALS[ $global_var_name ]['version'] )
-			||
-			// Or register this copy if the version greater than what is currently registered.
-			version_compare( $version, $GLOBALS[ $global_var_name ]['version'], '>' )
-			||
-			// Otherwise, register this copy if it is actually the one installed in the directory for plugins.
-			rtrim( WP_PLUGIN_DIR, '/' ) === dirname( __DIR__ )
-		) {
-			$GLOBALS[ $global_var_name ]['version'] = $version;
-			$GLOBALS[ $global_var_name ]['load']    = $load;
+			if ( (bool) did_action( 'after_setup_theme' ) ) {
+				$bootstrap();
+			} else {
+				add_action( 'after_setup_theme', $bootstrap, PHP_INT_MIN );
+			}
 		}
 	}
 )(