From 7c15cc9a8d5bb95d0592bdd833b9227b10d662be Mon Sep 17 00:00:00 2001
From: Piotr Delawski <piotr.delawski@gmail.com>
Date: Thu, 1 Jul 2021 15:28:01 +0200
Subject: [PATCH 01/58] Add `validated-urls` endpoint returning stylesheets
 data

---
 .../URLValidationRESTController.php           | 101 +++++++++++-
 src/Validation/ValidatedUrlDataProvider.php   | 149 ++++++++++++++++++
 .../URLValidationRESTControllerTest.php       | 105 ++++++++++++
 3 files changed, 354 insertions(+), 1 deletion(-)
 create mode 100644 src/Validation/ValidatedUrlDataProvider.php

diff --git a/src/Validation/URLValidationRESTController.php b/src/Validation/URLValidationRESTController.php
index df7f657943c..13c9d1b41ff 100644
--- a/src/Validation/URLValidationRESTController.php
+++ b/src/Validation/URLValidationRESTController.php
@@ -63,7 +63,7 @@ public static function get_registration_action() {
 	 * Constructor.
 	 *
 	 * @param URLValidationProvider $url_validation_provider URLValidationProvider instance.
-	 * @param UserAccess            $dev_tools_user_access UserAccess instance.
+	 * @param UserAccess            $dev_tools_user_access   UserAccess instance.
 	 */
 	public function __construct( URLValidationProvider $url_validation_provider, UserAccess $dev_tools_user_access ) {
 		$this->namespace               = 'amp/v1';
@@ -104,6 +104,29 @@ public function register() {
 			]
 		);
 
+		register_rest_route(
+			$this->namespace,
+			'/validated-urls/(?P<id>[\d]+)',
+			[
+				'args'   => [
+					'id' => [
+						'description'       => __( 'Post ID for the AMP validated URL post.', 'amp' ),
+						'required'          => true,
+						'type'              => 'integer',
+						'minimum'           => 1,
+						'validate_callback' => [ $this, 'validate_amp_validated_url_post_id_param' ],
+					],
+				],
+				[
+					'args'                => $this->get_endpoint_args_for_item_schema( WP_REST_Server::READABLE ),
+					'methods'             => WP_REST_Server::READABLE,
+					'callback'            => [ $this, 'get_validated_url' ],
+					'permission_callback' => [ $this, 'get_item_permissions_check' ],
+				],
+				'schema' => [ $this, 'get_public_item_schema' ],
+			]
+		);
+
 		// @todo Additional endpoint to validate a URL (from a URL rather than a post ID).
 	}
 
@@ -143,6 +166,38 @@ public function validate_post_id_param( $id, $request, $param ) {
 		return true;
 	}
 
+	/**
+	 * Validate AMP validated URL post ID param.
+	 *
+	 * @param string|int      $id      Post ID.
+	 * @param WP_REST_Request $request REST request.
+	 * @param string          $param   Param name ('id').
+	 * @return true|WP_Error True on valid, WP_Error otherwise.
+	 */
+	public function validate_amp_validated_url_post_id_param( $id, $request, $param ) {
+		// First enforce the schema to ensure $id is an integer greater than 0.
+		$validity = rest_validate_request_arg( $id, $request, $param );
+		if ( is_wp_error( $validity ) ) {
+			return $validity;
+		}
+
+		// Make sure the post exists and is of correct post type.
+		$post = get_post( (int) $id );
+		if (
+			! $post instanceof WP_Post
+			||
+			AMP_Validated_URL_Post_Type::POST_TYPE_SLUG !== get_post_type( $post )
+		) {
+			return new WP_Error(
+				'rest_amp_validated_url_post_invalid_id',
+				__( 'Invalid post ID.', 'default' ),
+				[ 'status' => 404 ]
+			);
+		}
+
+		return true;
+	}
+
 	/**
 	 * Checks whether the current user can view AMP validation results.
 	 *
@@ -161,6 +216,24 @@ public function create_item_permissions_check( $request ) { // phpcs:ignore Vari
 		return true;
 	}
 
+	/**
+	 * Checks whether the current user can view results of a URL AMP validation.
+	 *
+	 * @param  WP_REST_Request $request Full details about the request.
+	 * @return true|WP_Error True if the request has permission; WP_Error object otherwise.
+	 */
+	public function get_item_permissions_check( $request ) { // phpcs:ignore VariableAnalysis.CodeAnalysis.VariableAnalysis.UnusedVariable
+		if ( ! $this->dev_tools_user_access->is_user_enabled() ) {
+			return new WP_Error(
+				'amp_rest_no_dev_tools',
+				__( 'Sorry, you do not have access to dev tools for the AMP plugin for WordPress.', 'amp' ),
+				[ 'status' => rest_authorization_required_code() ]
+			);
+		}
+
+		return true;
+	}
+
 	/**
 	 * Validate preview nonce.
 	 *
@@ -240,6 +313,32 @@ public function validate_post_url( $request ) {
 		return rest_ensure_response( $this->filter_response_by_context( $data, $request['context'] ) );
 	}
 
+	/**
+	 * Returns validation information about a URL.
+	 *
+	 * @param WP_REST_Request $request Full details about the request.
+	 *
+	 * @return WP_REST_Response|WP_Error Response object on success, or WP_Error object on failure.
+	 */
+	public function get_validated_url( $request ) {
+		$post_id       = (int) $request['id'];
+		$validated_url = new ValidatedUrlDataProvider( $post_id );
+
+		if ( is_wp_error( $validated_url->is_valid() ) ) {
+			return $validated_url->is_valid();
+		}
+
+		$data = [
+			'id'          => $validated_url->get_id(),
+			'url'         => $validated_url->get_url(),
+			'date'        => $validated_url->get_date(),
+			'author'      => $validated_url->get_author(),
+			'stylesheets' => $validated_url->get_stylesheets(),
+		];
+
+		return rest_ensure_response( $this->filter_response_by_context( $data, $request['context'] ) );
+	}
+
 	/**
 	 * Retrieves the schema for plugin options provided by the endpoint.
 	 *
diff --git a/src/Validation/ValidatedUrlDataProvider.php b/src/Validation/ValidatedUrlDataProvider.php
new file mode 100644
index 00000000000..bc9a883e12b
--- /dev/null
+++ b/src/Validation/ValidatedUrlDataProvider.php
@@ -0,0 +1,149 @@
+<?php
+/**
+ * Provides validated URL data.
+ *
+ * @package AMP
+ * @since 2.2
+ */
+
+namespace AmpProject\AmpWP\Validation;
+
+use AMP_Validated_URL_Post_Type;
+use WP_Error;
+use WP_Post;
+
+/**
+ * ValidatedUrlDataProvider class.
+ *
+ * @since 2.2
+ * @internal
+ */
+final class ValidatedUrlDataProvider {
+
+	/**
+	 * Validated URL post.
+	 *
+	 * @var WP_Post
+	 */
+	private $post;
+
+	/**
+	 * Validated URL stylesheets data parsed from the JSON string in post meta.
+	 *
+	 * @var array|null
+	 */
+	private $stylesheets = null;
+
+	/**
+	 * ValidatedUrlDataProvider constructor.
+	 *
+	 * @param int $post_id Post ID.
+	 */
+	public function __construct( $post_id ) {
+		$this->post = get_post( $post_id );
+	}
+
+	/**
+	 * Check if the validated URL data instance is valid.
+	 *
+	 * @return bool|WP_Error
+	 */
+	public function is_valid() {
+		if ( empty( $this->post ) ) {
+			return new WP_Error(
+				'amp_validated_url_missing_id',
+				__( 'Unable to retrieve validation data for this ID.', 'amp' ),
+				[ 'status' => 404 ]
+			);
+		}
+
+		return false;
+	}
+
+	/**
+	 * Get validated URL ID.
+	 *
+	 * @return int|null
+	 */
+	public function get_id() {
+		if ( ! $this->post ) {
+			return null;
+		}
+
+		return $this->post->ID;
+	}
+
+	/**
+	 * Get the URL that was validated.
+	 *
+	 * @return string|null
+	 */
+	public function get_url() {
+		if ( ! $this->post ) {
+			return null;
+		}
+
+		return AMP_Validated_URL_Post_Type::get_url_from_post( $this->post );
+	}
+
+	/**
+	 * Get the date that the URL was validated.
+	 *
+	 * @return string|null
+	 */
+	public function get_date() {
+		if ( ! $this->post ) {
+			return null;
+		}
+
+		return $this->post->post_date;
+	}
+
+	/**
+	 * Get the user that last validated the URL.
+	 *
+	 * @return int|null
+	 */
+	public function get_author() {
+		if ( ! $this->post ) {
+			return null;
+		}
+
+		return (int) $this->post->post_author;
+	}
+
+	/**
+	 * Get the validated URL stylesheets data.
+	 *
+	 * @return array|WP_Error
+	 */
+	public function get_stylesheets() {
+		if ( null !== $this->stylesheets ) {
+			return $this->stylesheets;
+		}
+
+		$stylesheets = get_post_meta( $this->get_id(), AMP_Validated_URL_Post_Type::STYLESHEETS_POST_META_KEY, true );
+
+		if ( empty( $stylesheets ) ) {
+			return new WP_Error(
+				'amp_validated_url_stylesheets_no_longer_available',
+				__( 'Stylesheet information for this URL is no longer available. Such data is automatically deleted after a week to reduce database storage. It is of little value to store long-term given that it becomes stale as themes and plugins are updated. To obtain the latest stylesheet information, recheck this URL.', 'amp' ),
+				[ 'status' => 404 ]
+			);
+		}
+
+		$stylesheets = json_decode( $stylesheets, true );
+
+		if ( ! is_array( $stylesheets ) ) {
+			return new WP_Error(
+				'amp_validated_url_stylesheets_missing',
+				__( 'Unable to retrieve stylesheets data for this URL.', 'amp' ),
+				[ 'status' => 404 ]
+			);
+		}
+
+		$this->stylesheets = $stylesheets;
+
+		return $this->stylesheets;
+	}
+}
diff --git a/tests/php/src/Validation/URLValidationRESTControllerTest.php b/tests/php/src/Validation/URLValidationRESTControllerTest.php
index bfce599b4dc..3f02a58acac 100644
--- a/tests/php/src/Validation/URLValidationRESTControllerTest.php
+++ b/tests/php/src/Validation/URLValidationRESTControllerTest.php
@@ -81,6 +81,18 @@ public function test_create_item_permissions_check() {
 		$this->assertTrue( $this->controller->create_item_permissions_check( new WP_REST_Request( 'POST', '/amp/v1/validate-post-url/' ) ) );
 	}
 
+	/** @covers ::get_item_permissions_check() */
+	public function test_get_item_permissions_check() {
+		$this->assertWPError( $this->controller->get_item_permissions_check( new WP_REST_Request( 'GET', '/amp/v1/validated-urls/' ) ) );
+
+		wp_set_current_user( self::factory()->user->create( [ 'role' => 'author' ] ) );
+		$this->assertWPError( $this->controller->get_item_permissions_check( new WP_REST_Request( 'GET', '/amp/v1/validated-urls/' ) ) );
+
+		wp_set_current_user( self::factory()->user->create( [ 'role' => 'administrator' ] ) );
+		$this->user_access->set_user_enabled( wp_get_current_user(), true );
+		$this->assertTrue( $this->controller->get_item_permissions_check( new WP_REST_Request( 'GET', '/amp/v1/validated-urls/' ) ) );
+	}
+
 	/** @covers ::is_valid_preview_nonce() */
 	public function test_is_valid_preview_nonce() {
 		$user_id = self::factory()->user->create( [ 'role' => 'author' ] );
@@ -226,6 +238,99 @@ public function test_validate_post_url( $params, $post_type, $user_role, $expect
 		}
 	}
 
+	/** @return array */
+	public function get_data_for_test_get_validated_url() {
+		return [
+			'not_int'              => [
+				'foo',
+				null,
+				'administrator',
+				'rest_no_route',
+			],
+
+			'too_small'            => [
+				-1,
+				null,
+				'administrator',
+				'rest_no_route',
+			],
+
+			'empty_post'           => [
+				0,
+				null,
+				'administrator',
+				'rest_invalid_param',
+			],
+
+			'revision_id'          => [
+				'{{id}}',
+				'revision',
+				'administrator',
+				'rest_invalid_param',
+			],
+
+			'post_id'              => [
+				'{{id}}',
+				'post',
+				'administrator',
+				'rest_invalid_param',
+			],
+
+			'as_author'            => [
+				'{{id}}',
+				\AMP_Validated_URL_Post_Type::POST_TYPE_SLUG,
+				'author',
+				'amp_rest_no_dev_tools',
+			],
+
+			'amp_validated_url_id' => [
+				'{{id}}',
+				\AMP_Validated_URL_Post_Type::POST_TYPE_SLUG,
+				'administrator',
+				false,
+			],
+		];
+	}
+
+	/**
+	 * @dataProvider get_data_for_test_get_validated_url()
+	 * @covers ::get_validated_url()
+	 * @covers ::validate_amp_validated_url_post_id_param()
+	 *
+	 * @param string|int   $post_id        Post ID.
+	 * @param string|null  $post_type      Post type.
+	 * @param string       $user_role      User role.
+	 * @param false|string $expected_error Expected error.
+	 */
+	public function test_get_validated_url( $post_id, $post_type, $user_role, $expected_error ) {
+		add_filter( 'amp_dev_tools_user_default_enabled', '__return_true' );
+		$user_id = self::factory()->user->create( [ 'role' => $user_role ] );
+
+		wp_set_current_user( $user_id );
+
+		if ( isset( $post_id ) && '{{id}}' === $post_id && $post_type ) {
+			$post_id = self::factory()->post->create( compact( 'post_type' ) );
+		}
+
+		$this->controller->register();
+		$request  = new WP_REST_Request( 'GET', '/amp/v1/validated-urls/' . $post_id );
+		$response = rest_get_server()->dispatch( $request );
+
+		if ( false === $expected_error ) {
+			$this->assertFalse( $response->is_error() );
+			$data = $response->get_data();
+			$this->assertEquals( $data['id'], $post_id );
+			$this->assertArrayHasKey( 'url', $data );
+			$this->assertArrayHasKey( 'date', $data );
+			$this->assertArrayHasKey( 'author', $data );
+			$this->assertArrayHasKey( 'stylesheets', $data );
+		} else {
+			$this->assertTrue( $response->is_error() );
+			$error = $response->as_error();
+			$this->assertEquals( $expected_error, $error->get_error_code() );
+		}
+	}
+
 	/**
 	 * Tests URLValidationRESTController::get_item_schema.
 	 *

From 73568d9aec1b4bbea364f0ac4c67439927e7ea0d Mon Sep 17 00:00:00 2001
From: Piotr Delawski <piotr.delawski@gmail.com>
Date: Mon, 5 Jul 2021 16:24:04 +0200
Subject: [PATCH 02/58] Introduce `ValidatedUrlData` that is returned by the
 `ValidatedUrlDataProvider`

---
 .../URLValidationRESTController.php           |  39 ++++--
 src/Validation/ValidatedUrlData.php           | 132 ++++++++++++++++++
 src/Validation/ValidatedUrlDataProvider.php   | 122 +---------------
 .../URLValidationRESTControllerTest.php       |   3 +-
 4 files changed, 165 insertions(+), 131 deletions(-)
 create mode 100644 src/Validation/ValidatedUrlData.php

diff --git a/src/Validation/URLValidationRESTController.php b/src/Validation/URLValidationRESTController.php
index 13c9d1b41ff..b793dfc1624 100644
--- a/src/Validation/URLValidationRESTController.php
+++ b/src/Validation/URLValidationRESTController.php
@@ -43,6 +43,13 @@ final class URLValidationRESTController extends WP_REST_Controller implements De
 	 */
 	private $dev_tools_user_access;
 
+	/**
+	 * ValidatedUrlDataProvider instance.
+	 *
+	 * @var ValidatedUrlDataProvider
+	 */
+	private $validated_url_data_provider;
+
 	/**
 	 * Response schema.
 	 *
@@ -62,13 +69,15 @@ public static function get_registration_action() {
 	/**
 	 * Constructor.
 	 *
-	 * @param URLValidationProvider $url_validation_provider URLValidationProvider instance.
-	 * @param UserAccess            $dev_tools_user_access   UserAccess instance.
+	 * @param URLValidationProvider    $url_validation_provider     URLValidationProvider instance.
+	 * @param UserAccess               $dev_tools_user_access       UserAccess instance.
+	 * @param ValidatedUrlDataProvider $validated_url_data_provider ValidatedUrlDataProvider instance.
 	 */
-	public function __construct( URLValidationProvider $url_validation_provider, UserAccess $dev_tools_user_access ) {
-		$this->namespace               = 'amp/v1';
-		$this->url_validation_provider = $url_validation_provider;
-		$this->dev_tools_user_access   = $dev_tools_user_access;
+	public function __construct( URLValidationProvider $url_validation_provider, UserAccess $dev_tools_user_access, ValidatedUrlDataProvider $validated_url_data_provider ) {
+		$this->namespace                   = 'amp/v1';
+		$this->url_validation_provider     = $url_validation_provider;
+		$this->dev_tools_user_access       = $dev_tools_user_access;
+		$this->validated_url_data_provider = $validated_url_data_provider;
 	}
 
 	/**
@@ -321,19 +330,19 @@ public function validate_post_url( $request ) {
 	 * @return WP_REST_Response|WP_Error Response object on success, or WP_Error object on failure.
 	 */
 	public function get_validated_url( $request ) {
-		$post_id       = (int) $request['id'];
-		$validated_url = new ValidatedUrlDataProvider( $post_id );
+		$post_id            = (int) $request['id'];
+		$validated_url_data = $this->validated_url_data_provider->for_id( $post_id );
 
-		if ( is_wp_error( $validated_url->is_valid() ) ) {
-			return $validated_url->is_valid();
+		if ( is_wp_error( $validated_url_data ) ) {
+			return $validated_url_data;
 		}
 
 		$data = [
-			'id'          => $validated_url->get_id(),
-			'url'         => $validated_url->get_url(),
-			'date'        => $validated_url->get_date(),
-			'author'      => $validated_url->get_author(),
-			'stylesheets' => $validated_url->get_stylesheets(),
+			'id'          => $validated_url_data->get_id(),
+			'url'         => $validated_url_data->get_url(),
+			'date'        => $validated_url_data->get_date(),
+			'author'      => $validated_url_data->get_author(),
+			'stylesheets' => $validated_url_data->get_stylesheets(),
 		];
 
 		return rest_ensure_response( $this->filter_response_by_context( $data, $request['context'] ) );
diff --git a/src/Validation/ValidatedUrlData.php b/src/Validation/ValidatedUrlData.php
new file mode 100644
index 00000000000..c5eec9049a5
--- /dev/null
+++ b/src/Validation/ValidatedUrlData.php
@@ -0,0 +1,132 @@
+<?php
+/**
+ * Validated URL data.
+ *
+ * @package AMP
+ * @since 2.2
+ */
+
+namespace AmpProject\AmpWP\Validation;
+
+use AMP_Validated_URL_Post_Type;
+use WP_Error;
+use WP_Post;
+
+/**
+ * ValidatedUrlData class.
+ *
+ * @since 2.2
+ * @internal
+ */
+final class ValidatedUrlData {
+
+	/**
+	 * Validated URL post.
+	 *
+	 * @var WP_Post
+	 */
+	private $post;
+
+	/**
+	 * Validated URL stylesheets data parsed from the JSON string in post meta.
+	 *
+	 * @var array|null
+	 */
+	private $stylesheets = null;
+
+	/**
+	 * ValidatedUrlDataProvider constructor.
+	 *
+	 * @param WP_Post $post Post object.
+	 */
+	public function __construct( $post ) {
+		$this->post = $post;
+	}
+
+	/**
+	 * Get validated URL ID.
+	 *
+	 * @return int|null
+	 */
+	public function get_id() {
+		if ( ! $this->post->ID ) {
+			return null;
+		}
+
+		return $this->post->ID;
+	}
+
+	/**
+	 * Get the URL that was validated.
+	 *
+	 * @return string|null
+	 */
+	public function get_url() {
+		if ( ! $this->post ) {
+			return null;
+		}
+
+		return AMP_Validated_URL_Post_Type::get_url_from_post( $this->post );
+	}
+
+	/**
+	 * Get the date that the URL was validated.
+	 *
+	 * @return string|null
+	 */
+	public function get_date() {
+		if ( ! $this->post->post_date ) {
+			return null;
+		}
+
+		return $this->post->post_date;
+	}
+
+	/**
+	 * Get the user that last validated the URL.
+	 *
+	 * @return int|null
+	 */
+	public function get_author() {
+		if ( ! $this->post->post_author ) {
+			return null;
+		}
+
+		return (int) $this->post->post_author;
+	}
+
+	/**
+	 * Get the validated URL stylesheets data.
+	 *
+	 * @return array|WP_Error
+	 */
+	public function get_stylesheets() {
+		if ( null !== $this->stylesheets ) {
+			return $this->stylesheets;
+		}
+
+		$stylesheets = get_post_meta( $this->get_id(), AMP_Validated_URL_Post_Type::STYLESHEETS_POST_META_KEY, true );
+
+		if ( empty( $stylesheets ) ) {
+			return new WP_Error(
+				'amp_validated_url_stylesheets_no_longer_available',
+				__( 'Stylesheet information for this URL is no longer available. Such data is automatically deleted after a week to reduce database storage. It is of little value to store long-term given that it becomes stale as themes and plugins are updated. To obtain the latest stylesheet information, recheck this URL.', 'amp' ),
+				[ 'status' => 404 ]
+			);
+		}
+
+		$stylesheets = json_decode( $stylesheets, true );
+
+		if ( ! is_array( $stylesheets ) ) {
+			return new WP_Error(
+				'amp_validated_url_stylesheets_missing',
+				__( 'Unable to retrieve stylesheets data for this URL.', 'amp' ),
+				[ 'status' => 404 ]
+			);
+		}
+
+		$this->stylesheets = $stylesheets;
+
+		return $this->stylesheets;
+	}
+}
diff --git a/src/Validation/ValidatedUrlDataProvider.php b/src/Validation/ValidatedUrlDataProvider.php
index bc9a883e12b..1f477eeb88c 100644
--- a/src/Validation/ValidatedUrlDataProvider.php
+++ b/src/Validation/ValidatedUrlDataProvider.php
@@ -8,9 +8,7 @@
 
 namespace AmpProject\AmpWP\Validation;
 
-use AMP_Validated_URL_Post_Type;
 use WP_Error;
-use WP_Post;
 
 /**
  * ValidatedUrlDataProvider class.
@@ -21,35 +19,16 @@
 final class ValidatedUrlDataProvider {
 
 	/**
-	 * Validated URL post.
-	 *
-	 * @var WP_Post
-	 */
-	private $post;
-
-	/**
-	 * Validated URL stylesheets data parsed from the JSON string in post meta.
-	 *
-	 * @var array|null
-	 */
-	private $stylesheets = null;
-
-	/**
-	 * ValidatedUrlDataProvider constructor.
+	 * Provide validated URL data for a given post ID.
 	 *
 	 * @param int $post_id Post ID.
-	 */
-	public function __construct( $post_id ) {
-		$this->post = get_post( $post_id );
-	}
-
-	/**
-	 * Check if the validated URL data instance is valid.
 	 *
-	 * @return bool|WP_Error
+	 * @return ValidatedUrlData|WP_Error Validated URL data.
 	 */
-	public function is_valid() {
-		if ( empty( $this->post ) ) {
+	public function for_id( $post_id ) {
+		$post = get_post( $post_id );
+
+		if ( empty( $post ) ) {
 			return new WP_Error(
 				'amp_validated_url_missing_id',
 				__( 'Unable to retrieve validation data for this ID.', 'amp' ),
@@ -57,93 +36,6 @@ public function is_valid() {
 			);
 		}
 
-		return false;
-	}
-
-	/**
-	 * Get validated URL ID.
-	 *
-	 * @return int|null
-	 */
-	public function get_id() {
-		if ( ! $this->post ) {
-			return null;
-		}
-
-		return $this->post->ID;
-	}
-
-	/**
-	 * Get the URL that was validated.
-	 *
-	 * @return string|null
-	 */
-	public function get_url() {
-		if ( ! $this->post ) {
-			return null;
-		}
-
-		return AMP_Validated_URL_Post_Type::get_url_from_post( $this->post );
-	}
-
-	/**
-	 * Get the date that the URL was validated.
-	 *
-	 * @return string|null
-	 */
-	public function get_date() {
-		if ( ! $this->post ) {
-			return null;
-		}
-
-		return $this->post->post_date;
-	}
-
-	/**
-	 * Get the user that last validated the URL.
-	 *
-	 * @return int|null
-	 */
-	public function get_author() {
-		if ( ! $this->post ) {
-			return null;
-		}
-
-		return (int) $this->post->post_author;
-	}
-
-	/**
-	 * Get the validated URL stylesheets data.
-	 *
-	 * @return array|WP_Error
-	 */
-	public function get_stylesheets() {
-		if ( null !== $this->stylesheets ) {
-			return $this->stylesheets;
-		}
-
-		$stylesheets = get_post_meta( $this->get_id(), AMP_Validated_URL_Post_Type::STYLESHEETS_POST_META_KEY, true );
-
-		if ( empty( $stylesheets ) ) {
-			return new WP_Error(
-				'amp_validated_url_stylesheets_no_longer_available',
-				__( 'Stylesheet information for this URL is no longer available. Such data is automatically deleted after a week to reduce database storage. It is of little value to store long-term given that it becomes stale as themes and plugins are updated. To obtain the latest stylesheet information, recheck this URL.', 'amp' ),
-				[ 'status' => 404 ]
-			);
-		}
-
-		$stylesheets = json_decode( $stylesheets, true );
-
-		if ( ! is_array( $stylesheets ) ) {
-			return new WP_Error(
-				'amp_validated_url_stylesheets_missing',
-				__( 'Unable to retrieve stylesheets data for this URL.', 'amp' ),
-				[ 'status' => 404 ]
-			);
-		}
-
-		$this->stylesheets = $stylesheets;
-
-		return $this->stylesheets;
+		return new ValidatedUrlData( $post );
 	}
 }
diff --git a/tests/php/src/Validation/URLValidationRESTControllerTest.php b/tests/php/src/Validation/URLValidationRESTControllerTest.php
index 3f02a58acac..050e84eb3d7 100644
--- a/tests/php/src/Validation/URLValidationRESTControllerTest.php
+++ b/tests/php/src/Validation/URLValidationRESTControllerTest.php
@@ -12,6 +12,7 @@
 use AmpProject\AmpWP\Tests\TestCase;
 use AmpProject\AmpWP\Validation\URLValidationProvider;
 use AmpProject\AmpWP\Validation\URLValidationRESTController;
+use AmpProject\AmpWP\Validation\ValidatedUrlDataProvider;
 use WP_REST_Controller;
 use WP_REST_Request;
 
@@ -47,7 +48,7 @@ public function setUp() {
 
 		do_action( 'rest_api_init' );
 		$this->user_access = new UserAccess();
-		$this->controller  = new URLValidationRESTController( new URLValidationProvider(), $this->user_access );
+		$this->controller  = new URLValidationRESTController( new URLValidationProvider(), $this->user_access, new ValidatedUrlDataProvider() );
 		add_filter( 'pre_http_request', [ $this, 'get_validate_response' ] );
 	}
 

From 8aba364ecf9322f59b4062666311cd39b78a5dd7 Mon Sep 17 00:00:00 2001
From: Piotr Delawski <piotr.delawski@gmail.com>
Date: Mon, 5 Jul 2021 20:32:07 +0200
Subject: [PATCH 03/58] Add Validated URL JavaScript entry point

---
 .../validated-url-provider/index.js           | 102 ++++++++++++++++++
 assets/src/validated-url-page/index.js        |  94 ++++++++++++++++
 .../class-amp-validated-url-post-type.php     |  48 +++++++++
 webpack.config.js                             |   7 +-
 4 files changed, 248 insertions(+), 3 deletions(-)
 create mode 100644 assets/src/components/validated-url-provider/index.js
 create mode 100644 assets/src/validated-url-page/index.js

diff --git a/assets/src/components/validated-url-provider/index.js b/assets/src/components/validated-url-provider/index.js
new file mode 100644
index 00000000000..bdea46188ac
--- /dev/null
+++ b/assets/src/components/validated-url-provider/index.js
@@ -0,0 +1,102 @@
+/**
+ * External dependencies
+ */
+import PropTypes from 'prop-types';
+
+/**
+ * WordPress dependencies
+ */
+import {
+	createContext,
+	useContext,
+	useEffect,
+	useRef,
+	useState,
+} from '@wordpress/element';
+import apiFetch from '@wordpress/api-fetch';
+
+/**
+ * Internal dependencies
+ */
+import { ErrorContext } from '../error-context-provider';
+import { useAsyncError } from '../../utils/use-async-error';
+
+export const ValidatedUrl = createContext();
+
+/**
+ * Validated URL data context provider.
+ *
+ * @param {Object} props Component props.
+ * @param {any} props.children Component children.
+ * @param {boolean} props.hasErrorBoundary Whether the component is wrapped in an error boundary.
+ * @param {number} props.postId Validated URL post ID.
+ * @param {string} props.validatedUrlsRestPath REST endpoint to retrieve validated URL data.
+ */
+export function ValidatedUrlProvider( { children, hasErrorBoundary = false, postId, validatedUrlsRestPath } ) {
+	const [ validatedUrl, setValidatedUrl ] = useState( {} );
+	const [ fetchingValidatedUrl, setFetchingValidatedUrl ] = useState( null );
+
+	const { error, setError } = useContext( ErrorContext );
+	const { setAsyncError } = useAsyncError();
+
+	/**
+	 * This component sets state inside async functions.
+	 * Use this ref to prevent state updates after unmount.
+	 */
+	const hasUnmounted = useRef( false );
+	useEffect( () => () => {
+		hasUnmounted.current = true;
+	}, [] );
+
+	/**
+	 * Fetches validated URL data.
+	 */
+	useEffect( () => {
+		if ( error || Object.keys( validatedUrl ).length || fetchingValidatedUrl ) {
+			return;
+		}
+
+		( async () => {
+			setFetchingValidatedUrl( true );
+
+			try {
+				const fetchedValidatedUrl = await apiFetch( {
+					path: `${ validatedUrlsRestPath }/${ postId }`,
+				} );
+
+				if ( hasUnmounted.current === true ) {
+					return;
+				}
+
+				setValidatedUrl( fetchedValidatedUrl );
+			} catch ( e ) {
+				if ( hasUnmounted.current === true ) {
+					return;
+				}
+
+				setError( e );
+
+				if ( hasErrorBoundary ) {
+					setAsyncError( e );
+				}
+
+				return;
+			}
+
+			setFetchingValidatedUrl( false );
+		} )();
+	}, [ error, fetchingValidatedUrl, hasErrorBoundary, postId, setAsyncError, setError, validatedUrl, validatedUrlsRestPath ] );
+
+	return (
+		<ValidatedUrl.Provider value={ { validatedUrl, fetchingValidatedUrl } }>
+			{ children }
+		</ValidatedUrl.Provider>
+	);
+}
+
+ValidatedUrlProvider.propTypes = {
+	children: PropTypes.any,
+	hasErrorBoundary: PropTypes.bool,
+	postId: PropTypes.number,
+	validatedUrlsRestPath: PropTypes.string,
+};
diff --git a/assets/src/validated-url-page/index.js b/assets/src/validated-url-page/index.js
new file mode 100644
index 00000000000..0f1c52fd0f6
--- /dev/null
+++ b/assets/src/validated-url-page/index.js
@@ -0,0 +1,94 @@
+/**
+ * External dependencies
+ */
+import PropTypes from 'prop-types';
+import {
+	APP_ROOT_ID,
+	POST_ID,
+	VALIDATED_URLS_REST_PATH,
+} from 'amp-settings'; // From WP inline script.
+
+/**
+ * WordPress dependencies
+ */
+import domReady from '@wordpress/dom-ready';
+import { render, useContext } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { Loading } from '../components/loading';
+import { ErrorBoundary } from '../components/error-boundary';
+import { ErrorContextProvider } from '../components/error-context-provider';
+import { ErrorScreen } from '../components/error-screen';
+import { ValidatedUrl, ValidatedUrlProvider } from '../components/validated-url-provider';
+
+let errorHandler;
+
+/**
+ * Context providers for the settings page.
+ *
+ * @param {Object} props Component props.
+ * @param {any} props.children Context consumers.
+ */
+function Providers( { children } ) {
+	global.removeEventListener( 'error', errorHandler );
+
+	return (
+		<ErrorContextProvider>
+			<ErrorBoundary>
+				<ValidatedUrlProvider
+					hasErrorBoundary={ true }
+					postId={ Number( POST_ID ) }
+					validatedUrlsRestPath={ VALIDATED_URLS_REST_PATH }
+				>
+					{ children }
+				</ValidatedUrlProvider>
+			</ErrorBoundary>
+		</ErrorContextProvider>
+	);
+}
+Providers.propTypes = {
+	children: PropTypes.any,
+};
+
+/**
+ * Validated URL page application root.
+ */
+function Root() {
+	const { fetchingValidatedUrl, validatedUrl } = useContext( ValidatedUrl );
+
+	if ( fetchingValidatedUrl !== false ) {
+		return <Loading />;
+	}
+
+	return (
+		<p>
+			{ validatedUrl.url }
+		</p>
+	);
+}
+
+domReady( () => {
+	const root = document.getElementById( APP_ROOT_ID );
+
+	if ( ! root ) {
+		return;
+	}
+
+	errorHandler = ( event ) => {
+		// Handle only own errors.
+		if ( event.filename && /amp-validated-url-page(\.min)?\.js/.test( event.filename ) ) {
+			render( <ErrorScreen error={ event.error } />, root );
+		}
+	};
+
+	global.addEventListener( 'error', errorHandler );
+
+	render(
+		<Providers>
+			<Root appRoot={ root } />
+		</Providers>,
+		root,
+	);
+} );
diff --git a/includes/validation/class-amp-validated-url-post-type.php b/includes/validation/class-amp-validated-url-post-type.php
index 83e1ac542fd..530338512cb 100644
--- a/includes/validation/class-amp-validated-url-post-type.php
+++ b/includes/validation/class-amp-validated-url-post-type.php
@@ -90,6 +90,20 @@ class AMP_Validated_URL_Post_Type {
 	 */
 	const EDIT_POST_SCRIPT_HANDLE = 'amp-validated-url-post-edit-screen';
 
+	/**
+	 * The handle for the AMP validated URL page script.
+	 *
+	 * @var string
+	 */
+	const AMP_VALIDATED_URL_PAGE_SCRIPT_HANDLE = 'amp-validated-url-page';
+
+	/**
+	 * HTML ID for the app root element.
+	 *
+	 * @var string
+	 */
+	const AMP_VALIDATED_URL_PAGE_APP_ROOT_ID = 'amp-validated-url-root';
+
 	/**
 	 * The query arg for the number of URLs tested.
 	 *
@@ -1986,6 +2000,8 @@ static function( $result ) {
 	 * Enqueue scripts for the edit post screen.
 	 */
 	public static function enqueue_edit_post_screen_scripts() {
+		global $post;
+
 		$current_screen = get_current_screen();
 		if ( 'post' !== $current_screen->base || self::POST_TYPE_SLUG !== $current_screen->post_type ) {
 			return;
@@ -2007,6 +2023,35 @@ public static function enqueue_edit_post_screen_scripts() {
 			true
 		);
 
+		// React-based validated URL page component.
+		$asset_file   = AMP__DIR__ . '/assets/js/' . self::AMP_VALIDATED_URL_PAGE_SCRIPT_HANDLE . '.asset.php';
+		$asset        = require $asset_file;
+		$dependencies = $asset['dependencies'];
+		$version      = $asset['version'];
+
+		wp_enqueue_script(
+			self::AMP_VALIDATED_URL_PAGE_SCRIPT_HANDLE,
+			amp_get_asset_url( 'js/' . self::AMP_VALIDATED_URL_PAGE_SCRIPT_HANDLE . '.js' ),
+			$dependencies,
+			$version,
+			true
+		);
+
+		$validated_url_page_data = [
+			'APP_ROOT_ID'              => self::AMP_VALIDATED_URL_PAGE_APP_ROOT_ID,
+			'POST_ID'                  => $post->ID,
+			'VALIDATED_URLS_REST_PATH' => '/amp/v1/validated-urls',
+		];
+
+		wp_add_inline_script(
+			self::AMP_VALIDATED_URL_PAGE_SCRIPT_HANDLE,
+			sprintf(
+				'var ampSettings = %s;',
+				wp_json_encode( $validated_url_page_data )
+			),
+			'before'
+		);
+
 		// @todo This is likely dead code.
 		$current_screen = get_current_screen();
 		if ( $current_screen && 'post' === $current_screen->base && self::POST_TYPE_SLUG === $current_screen->post_type ) {
@@ -2280,6 +2325,9 @@ public static function print_status_meta_box( $post ) {
 	 * @return void
 	 */
 	public static function print_stylesheets_meta_box( $post ) {
+		?>
+			<div id="amp-validated-url-root"></div>
+		<?php
 		$stylesheets = get_post_meta( $post->ID, self::STYLESHEETS_POST_META_KEY, true );
 		if ( empty( $stylesheets ) ) {
 			printf(
diff --git a/webpack.config.js b/webpack.config.js
index e9479f4e094..460e3dff5b9 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -280,12 +280,13 @@ const onboardingWizard = {
 	],
 };
 
-const settingsPage = {
+const adminPages = {
 	...sharedConfig,
 	entry: {
 		'wp-api-fetch': './assets/src/polyfills/api-fetch.js',
 		'wp-components': '@wordpress/components/build-style/style.css',
 		'amp-settings': './assets/src/settings-page',
+		'amp-validated-url-page': './assets/src/validated-url-page',
 	},
 	externals: {
 		'amp-settings': 'ampSettings',
@@ -328,7 +329,7 @@ const settingsPage = {
 		// Ensure assets generated by `DependencyExtractionWebpackPlugin` are also ignored for styles entries.
 		new IgnoreExtraneousStyleAssets(),
 		new WebpackBar( {
-			name: 'Settings page',
+			name: 'Admin Pages',
 			color: '#67b255',
 		} ),
 	],
@@ -402,7 +403,7 @@ module.exports = [
 	customizer,
 	wpPolyfills,
 	onboardingWizard,
-	settingsPage,
+	adminPages,
 	styles,
 	mobileRedirection,
 ];

From e43d2963695ea0611211d740cb33a92eb0041a3b Mon Sep 17 00:00:00 2001
From: Piotr Delawski <piotr.delawski@gmail.com>
Date: Wed, 7 Jul 2021 11:26:12 +0200
Subject: [PATCH 04/58] Use local variable for storing current post

---
 .../class-amp-validated-url-post-type.php     | 33 +++++++++----------
 1 file changed, 16 insertions(+), 17 deletions(-)

diff --git a/includes/validation/class-amp-validated-url-post-type.php b/includes/validation/class-amp-validated-url-post-type.php
index 530338512cb..4d9f3dd0923 100644
--- a/includes/validation/class-amp-validated-url-post-type.php
+++ b/includes/validation/class-amp-validated-url-post-type.php
@@ -2000,8 +2000,6 @@ static function( $result ) {
 	 * Enqueue scripts for the edit post screen.
 	 */
 	public static function enqueue_edit_post_screen_scripts() {
-		global $post;
-
 		$current_screen = get_current_screen();
 		if ( 'post' !== $current_screen->base || self::POST_TYPE_SLUG !== $current_screen->post_type ) {
 			return;
@@ -2023,6 +2021,22 @@ public static function enqueue_edit_post_screen_scripts() {
 			true
 		);
 
+		$post = get_post();
+
+		// @todo This is likely dead code.
+		$current_screen = get_current_screen();
+		if ( $current_screen && 'post' === $current_screen->base && self::POST_TYPE_SLUG === $current_screen->post_type ) {
+			$data = [
+				'amp_enabled' => self::is_amp_enabled_on_post( $post ),
+			];
+
+			wp_localize_script(
+				self::EDIT_POST_SCRIPT_HANDLE,
+				'ampValidation',
+				$data
+			);
+		}
+
 		// React-based validated URL page component.
 		$asset_file   = AMP__DIR__ . '/assets/js/' . self::AMP_VALIDATED_URL_PAGE_SCRIPT_HANDLE . '.asset.php';
 		$asset        = require $asset_file;
@@ -2052,21 +2066,6 @@ public static function enqueue_edit_post_screen_scripts() {
 			'before'
 		);
 
-		// @todo This is likely dead code.
-		$current_screen = get_current_screen();
-		if ( $current_screen && 'post' === $current_screen->base && self::POST_TYPE_SLUG === $current_screen->post_type ) {
-			$post = get_post();
-			$data = [
-				'amp_enabled' => self::is_amp_enabled_on_post( $post ),
-			];
-
-			wp_localize_script(
-				self::EDIT_POST_SCRIPT_HANDLE,
-				'ampValidation',
-				$data
-			);
-		}
-
 		if ( function_exists( 'wp_set_script_translations' ) ) {
 			wp_set_script_translations( self::EDIT_POST_SCRIPT_HANDLE, 'amp' );
 		} elseif ( function_exists( 'wp_get_jed_locale_data' ) || function_exists( 'gutenberg_get_jed_locale_data' ) ) {

From 22aae9e0a21d08bd2f2c0111b668a6044c28bf7f Mon Sep 17 00:00:00 2001
From: Piotr Delawski <piotr.delawski@gmail.com>
Date: Wed, 7 Jul 2021 11:27:12 +0200
Subject: [PATCH 05/58] Remove dead code

---
 .../class-amp-validated-url-post-type.php       | 17 +----------------
 1 file changed, 1 insertion(+), 16 deletions(-)

diff --git a/includes/validation/class-amp-validated-url-post-type.php b/includes/validation/class-amp-validated-url-post-type.php
index 4d9f3dd0923..27483f2b330 100644
--- a/includes/validation/class-amp-validated-url-post-type.php
+++ b/includes/validation/class-amp-validated-url-post-type.php
@@ -2021,22 +2021,6 @@ public static function enqueue_edit_post_screen_scripts() {
 			true
 		);
 
-		$post = get_post();
-
-		// @todo This is likely dead code.
-		$current_screen = get_current_screen();
-		if ( $current_screen && 'post' === $current_screen->base && self::POST_TYPE_SLUG === $current_screen->post_type ) {
-			$data = [
-				'amp_enabled' => self::is_amp_enabled_on_post( $post ),
-			];
-
-			wp_localize_script(
-				self::EDIT_POST_SCRIPT_HANDLE,
-				'ampValidation',
-				$data
-			);
-		}
-
 		// React-based validated URL page component.
 		$asset_file   = AMP__DIR__ . '/assets/js/' . self::AMP_VALIDATED_URL_PAGE_SCRIPT_HANDLE . '.asset.php';
 		$asset        = require $asset_file;
@@ -2051,6 +2035,7 @@ public static function enqueue_edit_post_screen_scripts() {
 			true
 		);
 
+		$post                    = get_post();
 		$validated_url_page_data = [
 			'APP_ROOT_ID'              => self::AMP_VALIDATED_URL_PAGE_APP_ROOT_ID,
 			'POST_ID'                  => $post->ID,

From 8824f8302b1c56da19296c776cc44eac983bf0e5 Mon Sep 17 00:00:00 2001
From: Piotr Delawski <piotr.delawski@gmail.com>
Date: Wed, 7 Jul 2021 18:33:17 +0200
Subject: [PATCH 06/58] Fix and update unit tests

---
 ...test-class-amp-validated-url-post-type.php | 22 ++++++++++++++++++-
 1 file changed, 21 insertions(+), 1 deletion(-)

diff --git a/tests/php/validation/test-class-amp-validated-url-post-type.php b/tests/php/validation/test-class-amp-validated-url-post-type.php
index 4dd90c855ed..8ea2089fbb5 100644
--- a/tests/php/validation/test-class-amp-validated-url-post-type.php
+++ b/tests/php/validation/test-class-amp-validated-url-post-type.php
@@ -1320,14 +1320,19 @@ public function test_enqueue_edit_post_screen_scripts() {
 		AMP_Validated_URL_Post_Type::enqueue_edit_post_screen_scripts();
 		$this->assertTrue( wp_script_is( 'autosave', 'enqueued' ) );
 		$this->assertFalse( wp_script_is( 'amp-validated-url-post-edit-screen', 'enqueued' ) );
+		$this->assertFalse( wp_script_is( 'amp-validated-url-page', 'enqueued' ) );
 
-		global $pagenow;
+		global $pagenow, $post;
 		$pagenow = 'post.php';
+		$post    = self::factory()->post->create();
 		set_current_screen( AMP_Validated_URL_Post_Type::POST_TYPE_SLUG );
 		AMP_Validated_URL_Post_Type::enqueue_edit_post_screen_scripts();
 		$this->assertFalse( wp_script_is( 'autosave', 'enqueued' ) );
 		$this->assertTrue( wp_script_is( 'amp-validated-url-post-edit-screen', 'enqueued' ) );
+		$this->assertTrue( wp_script_is( 'amp-validated-url-page', 'enqueued' ) );
+		$this->assertStringContains( 'var ampSettings', get_echo( 'wp_print_scripts' ) );
 		$pagenow = null;
+		$post    = null;
 	}
 
 	/**
@@ -1470,6 +1475,21 @@ public function test_print_status_meta_box() {
 		$this->assertStringContainsString( 'misc-pub-section', $output );
 	}
 
+	/**
+	 * Test for print_stylesheets_meta_box()
+	 *
+	 * @covers \AMP_Validated_URL_Post_Type::print_stylesheets_meta_box()
+	 */
+	public function test_print_stylesheets_meta_box() {
+		AMP_Validation_Manager::init();
+		wp_set_current_user( self::factory()->user->create( [ 'role' => 'administrator' ] ) );
+
+		$validated_url_post = self::factory()->post->create_and_get( [ 'post_type' => AMP_Validated_URL_Post_Type::POST_TYPE_SLUG ] );
+		$output             = get_echo( [ 'AMP_Validated_URL_Post_Type', 'print_stylesheets_meta_box' ], [ $validated_url_post ] );
+
+		$this->assertStringContains( '<div id="amp-validated-url-root"></div>', $output );
+	}
+
 	/**
 	 * Test for render_single_url_list_table()
 	 *

From 56ef32f8e9e7d7c04d9593b97f9fa7a105494864 Mon Sep 17 00:00:00 2001
From: Piotr Delawski <piotr.delawski@gmail.com>
Date: Wed, 7 Jul 2021 21:10:59 +0200
Subject: [PATCH 07/58] Calculate stylesheets sizes and add to app context

---
 .../validated-url-provider/index.js           |  5 +-
 .../src/validated-url-page/helpers/index.js   | 35 ++++++++++++
 .../helpers/test/calculateStylesheetSizes.js  | 56 +++++++++++++++++++
 3 files changed, 95 insertions(+), 1 deletion(-)
 create mode 100644 assets/src/validated-url-page/helpers/index.js
 create mode 100644 assets/src/validated-url-page/helpers/test/calculateStylesheetSizes.js

diff --git a/assets/src/components/validated-url-provider/index.js b/assets/src/components/validated-url-provider/index.js
index bdea46188ac..cc4a64f2955 100644
--- a/assets/src/components/validated-url-provider/index.js
+++ b/assets/src/components/validated-url-provider/index.js
@@ -20,6 +20,7 @@ import apiFetch from '@wordpress/api-fetch';
  */
 import { ErrorContext } from '../error-context-provider';
 import { useAsyncError } from '../../utils/use-async-error';
+import { calculateStylesheetSizes } from '../../validated-url-page/helpers';
 
 export const ValidatedUrl = createContext();
 
@@ -34,6 +35,7 @@ export const ValidatedUrl = createContext();
  */
 export function ValidatedUrlProvider( { children, hasErrorBoundary = false, postId, validatedUrlsRestPath } ) {
 	const [ validatedUrl, setValidatedUrl ] = useState( {} );
+	const [ stylesheetSizes, setStylesheetSizes ] = useState( {} );
 	const [ fetchingValidatedUrl, setFetchingValidatedUrl ] = useState( null );
 
 	const { error, setError } = useContext( ErrorContext );
@@ -69,6 +71,7 @@ export function ValidatedUrlProvider( { children, hasErrorBoundary = false, post
 				}
 
 				setValidatedUrl( fetchedValidatedUrl );
+				setStylesheetSizes( calculateStylesheetSizes( fetchedValidatedUrl?.stylesheets ) );
 			} catch ( e ) {
 				if ( hasUnmounted.current === true ) {
 					return;
@@ -88,7 +91,7 @@ export function ValidatedUrlProvider( { children, hasErrorBoundary = false, post
 	}, [ error, fetchingValidatedUrl, hasErrorBoundary, postId, setAsyncError, setError, validatedUrl, validatedUrlsRestPath ] );
 
 	return (
-		<ValidatedUrl.Provider value={ { validatedUrl, fetchingValidatedUrl } }>
+		<ValidatedUrl.Provider value={ { validatedUrl, fetchingValidatedUrl, stylesheetSizes } }>
 			{ children }
 		</ValidatedUrl.Provider>
 	);
diff --git a/assets/src/validated-url-page/helpers/index.js b/assets/src/validated-url-page/helpers/index.js
new file mode 100644
index 00000000000..f05ba3f1e36
--- /dev/null
+++ b/assets/src/validated-url-page/helpers/index.js
@@ -0,0 +1,35 @@
+/**
+ * Calculate stylesheets sizes.
+ *
+ * Calculates total CSS size prior and after the minification based on the
+ * stylesheets data.
+ *
+ * @param {Array} stylesheets List of stylesheets.
+ * @return {Object|null} Stylesheets sizes data or null.
+ */
+export function calculateStylesheetSizes( stylesheets ) {
+	if ( ! stylesheets || stylesheets?.length === 0 ) {
+		return null;
+	}
+
+	return stylesheets.reduce( ( sizes, stylesheet ) => {
+		const key = stylesheet.included === true ? 'included' : 'excluded';
+
+		return {
+			...sizes,
+			[ key ]: {
+				originalSize: sizes[ key ].originalSize + stylesheet.original_size,
+				finalSize: sizes[ key ].finalSize + stylesheet.final_size,
+			},
+		};
+	}, {
+		included: {
+			originalSize: 0,
+			finalSize: 0,
+		},
+		excluded: {
+			originalSize: 0,
+			finalSize: 0,
+		},
+	} );
+}
diff --git a/assets/src/validated-url-page/helpers/test/calculateStylesheetSizes.js b/assets/src/validated-url-page/helpers/test/calculateStylesheetSizes.js
new file mode 100644
index 00000000000..0a200712eb8
--- /dev/null
+++ b/assets/src/validated-url-page/helpers/test/calculateStylesheetSizes.js
@@ -0,0 +1,56 @@
+/**
+ * Internal dependencies
+ */
+import { calculateStylesheetSizes } from '..';
+
+describe( 'calculateStylesheetSizes', () => {
+	it( 'returns null if no stylesheets are provided', () => {
+		expect( calculateStylesheetSizes() ).toBeNull();
+		expect( calculateStylesheetSizes( [] ) ).toBeNull();
+	} );
+
+	it( 'returns correct sizes prior and after minification', () => {
+		const stylesheets = [
+			{
+				original_size: 20,
+				final_size: 3,
+				included: true,
+			},
+			{
+				original_size: 10,
+				final_size: 2,
+				included: true,
+			},
+			{
+				original_size: 10,
+				final_size: 0,
+				included: true,
+			},
+			{
+				original_size: 200,
+				final_size: 30,
+				included: false,
+			},
+			{
+				original_size: 100,
+				final_size: 20,
+				included: false,
+			},
+			{
+				original_size: 100,
+				final_size: 0,
+				included: false,
+			},
+		];
+		expect( calculateStylesheetSizes( stylesheets ) ).toMatchObject( {
+			included: {
+				originalSize: 40,
+				finalSize: 5,
+			},
+			excluded: {
+				originalSize: 400,
+				finalSize: 50,
+			},
+		} );
+	} );
+} );

From e71fbf1130a554e09b7a43b0471c6e28d943e7b7 Mon Sep 17 00:00:00 2001
From: Piotr Delawski <piotr.delawski@gmail.com>
Date: Wed, 7 Jul 2021 21:12:44 +0200
Subject: [PATCH 08/58] Add `StylesheetsSummary` component

---
 .../components/stylesheets-summary/index.js   | 52 +++++++++++++++++++
 assets/src/validated-url-page/index.js        |  7 ++-
 2 files changed, 55 insertions(+), 4 deletions(-)
 create mode 100644 assets/src/validated-url-page/components/stylesheets-summary/index.js

diff --git a/assets/src/validated-url-page/components/stylesheets-summary/index.js b/assets/src/validated-url-page/components/stylesheets-summary/index.js
new file mode 100644
index 00000000000..bc471a77077
--- /dev/null
+++ b/assets/src/validated-url-page/components/stylesheets-summary/index.js
@@ -0,0 +1,52 @@
+/**
+ * External dependencies
+ */
+import PropTypes from 'prop-types';
+
+/**
+ * WordPress dependencies
+ */
+import { __, _x } from '@wordpress/i18n';
+
+export default function StylesheetsSummary( { stylesheetSizes } ) {
+	return (
+		<table className="amp-stylesheet-summary">
+			<tbody>
+				<tr>
+					<th>
+						{ __( 'Total CSS size prior to minification:', 'amp' ) }
+					</th>
+					<td>
+						{ stylesheetSizes.included.originalSize }
+						<abbr title={ __( 'bytes', 'amp' ) }>
+							{ _x( 'B', 'abbreviation for bytes', 'amp' ) }
+						</abbr>
+					</td>
+				</tr>
+				<tr>
+					<th>
+						{ __( 'Total CSS size after minification:', 'amp' ) }
+					</th>
+					<td>
+						{ stylesheetSizes.included.finalSize }
+						<abbr title={ __( 'bytes', 'amp' ) }>
+							{ _x( 'B', 'abbreviation for bytes', 'amp' ) }
+						</abbr>
+					</td>
+				</tr>
+			</tbody>
+		</table>
+	);
+}
+StylesheetsSummary.propTypes = {
+	stylesheetSizes: PropTypes.shape( {
+		included: PropTypes.shape( {
+			originalSize: PropTypes.number,
+			finalSize: PropTypes.number,
+		} ),
+		excluded: PropTypes.shape( {
+			originalSize: PropTypes.number,
+			finalSize: PropTypes.number,
+		} ),
+	} ),
+};
diff --git a/assets/src/validated-url-page/index.js b/assets/src/validated-url-page/index.js
index 0f1c52fd0f6..1bf3e7f359a 100644
--- a/assets/src/validated-url-page/index.js
+++ b/assets/src/validated-url-page/index.js
@@ -22,6 +22,7 @@ import { ErrorBoundary } from '../components/error-boundary';
 import { ErrorContextProvider } from '../components/error-context-provider';
 import { ErrorScreen } from '../components/error-screen';
 import { ValidatedUrl, ValidatedUrlProvider } from '../components/validated-url-provider';
+import StylesheetsSummary from './components/stylesheets-summary';
 
 let errorHandler;
 
@@ -56,16 +57,14 @@ Providers.propTypes = {
  * Validated URL page application root.
  */
 function Root() {
-	const { fetchingValidatedUrl, validatedUrl } = useContext( ValidatedUrl );
+	const { fetchingValidatedUrl, stylesheetSizes } = useContext( ValidatedUrl );
 
 	if ( fetchingValidatedUrl !== false ) {
 		return <Loading />;
 	}
 
 	return (
-		<p>
-			{ validatedUrl.url }
-		</p>
+		<StylesheetsSummary stylesheetSizes={ stylesheetSizes } />
 	);
 }
 

From bd11a06da90314adc5db73e322f8d23f079b74d6 Mon Sep 17 00:00:00 2001
From: Piotr Delawski <piotr.delawski@gmail.com>
Date: Thu, 8 Jul 2021 11:19:26 +0200
Subject: [PATCH 09/58] Add locale-aware number formatting helper

---
 assets/src/utils/locale/index.js              | 46 +++++++++++++++++++
 assets/src/utils/locale/test/index.js         | 26 +++++++++++
 assets/src/utils/number-format/README.md      | 21 +++++++++
 assets/src/utils/number-format/index.js       | 16 +++++++
 .../components/stylesheets-summary/index.js   | 11 ++++-
 5 files changed, 118 insertions(+), 2 deletions(-)
 create mode 100644 assets/src/utils/locale/index.js
 create mode 100644 assets/src/utils/locale/test/index.js
 create mode 100644 assets/src/utils/number-format/README.md
 create mode 100644 assets/src/utils/number-format/index.js

diff --git a/assets/src/utils/locale/index.js b/assets/src/utils/locale/index.js
new file mode 100644
index 00000000000..7dc06c7965e
--- /dev/null
+++ b/assets/src/utils/locale/index.js
@@ -0,0 +1,46 @@
+/**
+ * WordPress dependencies
+ */
+import { __experimentalGetSettings } from '@wordpress/date'; //eslint-disable-line @wordpress/no-unsafe-wp-apis
+
+/**
+ * Clean up WP locale so it matches the format expected by browsers.
+ *
+ * @param {string} locale - Locale given by WordPress.
+ * @return {string} Browser-formatted locale.
+ */
+export const cleanLocale = ( locale ) => {
+	const regex = /^([a-z]{2,3})(_[a-z]{2}|_[a-z][a-z0-9]{4,7})?(?:_.*)?$/i;
+
+	// Search for the correct locale format:
+	// e.g. af, arq, fr_FR, pap_CW, de_DE_formal, art_xpirate
+	const localeRegex = locale.match( regex );
+
+	// Locale was set to something that seems invalid, fallback to en-US.
+	if ( ! localeRegex ) {
+		return 'en-US';
+	}
+
+	return (
+		// Keep only the language and the region, and replace the underscore used in WP locale by an hyphen.
+		`${ localeRegex[ 1 ] }${ localeRegex[ 2 ] ? localeRegex[ 2 ] : '' }`.replace( '_', '-' )
+	);
+};
+
+/**
+ * Current user locale, or browser locale as fallback.
+ *
+ * @return {string} Formatted user locale (e.g. `en-US` or `fr-FR`).
+ */
+export const getUserLocale = () => {
+	const {
+		l10n: { locale },
+	} = __experimentalGetSettings();
+
+	if ( locale ) {
+		return cleanLocale( locale );
+	}
+
+	// Fallback to the browser locale if necessary.
+	return global?.window?.navigator?.language ?? 'en-US';
+};
diff --git a/assets/src/utils/locale/test/index.js b/assets/src/utils/locale/test/index.js
new file mode 100644
index 00000000000..08a6aae4e46
--- /dev/null
+++ b/assets/src/utils/locale/test/index.js
@@ -0,0 +1,26 @@
+/**
+ * Internal dependencies
+ */
+import { cleanLocale } from '../';
+
+describe( 'cleanLocale', () => {
+	const testLocales = [
+		[ 'af', 'af' ],
+		[ 'arq', 'arq' ],
+		[ 'fr_FR', 'fr-FR' ],
+		[ 'pap_CW', 'pap-CW' ],
+		[ 'de_DE_formal', 'de-DE' ],
+		[ 'art_xpirate', 'art-xpirate' ],
+		[ 'art_xemoji', 'art-xemoji' ],
+		[ 'pt_PT_ao90', 'pt-PT' ],
+		[ 'deDE', 'en-US' ],
+		[ 'foobarde_DE', 'en-US' ], // Language should never be more than 3 chars long.
+		[ 'en_alotofchars', 'en' ], // region or variant tags should not be more than 8 chars.
+	];
+
+	testLocales.forEach( ( testLocale ) => {
+		it( `${ testLocale[ 0 ] } is cleaned into ${ testLocale[ 1 ] }`, () => {
+			expect( cleanLocale( testLocale[ 0 ] ) ).toBe( testLocale[ 1 ] );
+		} );
+	} );
+} );
diff --git a/assets/src/utils/number-format/README.md b/assets/src/utils/number-format/README.md
new file mode 100644
index 00000000000..e8bdfb16482
--- /dev/null
+++ b/assets/src/utils/number-format/README.md
@@ -0,0 +1,21 @@
+numberFormat
+=========
+
+This utility function can be used to format numbers so they are displayed in the format expected for a specific locale.
+
+For example, a large number such as `123456` would be displayed as `123,456` in US English, and as `123 456` in FR French.
+
+The function relies on `Intl.NumberFormat` to format the numbers, based on the locale information available in WordPress, or based on the browser locale as a fallback.
+
+## General Usage:
+
+```js
+import { numberFormat } from 'components/number-format';
+
+render() {
+	const number = '123456';
+	return (
+		<>{ numberFormat( number ) }</>
+	);
+}
+```
diff --git a/assets/src/utils/number-format/index.js b/assets/src/utils/number-format/index.js
new file mode 100644
index 00000000000..2c9b7815069
--- /dev/null
+++ b/assets/src/utils/number-format/index.js
@@ -0,0 +1,16 @@
+/**
+ * Internal dependencies
+ */
+import { getUserLocale } from '../locale';
+
+/**
+ * Format a number using the locale in use by the user viewing the page.
+ *
+ * @param {number} number The number to format.
+ * @return {string} Formatted number.
+ */
+export const numberFormat = ( number ) => {
+	const locale = getUserLocale();
+
+	return new Intl.NumberFormat( locale ).format( number );
+};
diff --git a/assets/src/validated-url-page/components/stylesheets-summary/index.js b/assets/src/validated-url-page/components/stylesheets-summary/index.js
index bc471a77077..3ed3a7996ee 100644
--- a/assets/src/validated-url-page/components/stylesheets-summary/index.js
+++ b/assets/src/validated-url-page/components/stylesheets-summary/index.js
@@ -8,6 +8,11 @@ import PropTypes from 'prop-types';
  */
 import { __, _x } from '@wordpress/i18n';
 
+/**
+ * Internal dependencies
+ */
+import { numberFormat } from '../../../utils/number-format';
+
 export default function StylesheetsSummary( { stylesheetSizes } ) {
 	return (
 		<table className="amp-stylesheet-summary">
@@ -17,7 +22,8 @@ export default function StylesheetsSummary( { stylesheetSizes } ) {
 						{ __( 'Total CSS size prior to minification:', 'amp' ) }
 					</th>
 					<td>
-						{ stylesheetSizes.included.originalSize }
+						{ numberFormat( stylesheetSizes.included.originalSize ) }
+						{ ' ' }
 						<abbr title={ __( 'bytes', 'amp' ) }>
 							{ _x( 'B', 'abbreviation for bytes', 'amp' ) }
 						</abbr>
@@ -28,7 +34,8 @@ export default function StylesheetsSummary( { stylesheetSizes } ) {
 						{ __( 'Total CSS size after minification:', 'amp' ) }
 					</th>
 					<td>
-						{ stylesheetSizes.included.finalSize }
+						{ numberFormat( stylesheetSizes.included.finalSize ) }
+						{ ' ' }
 						<abbr title={ __( 'bytes', 'amp' ) }>
 							{ _x( 'B', 'abbreviation for bytes', 'amp' ) }
 						</abbr>

From 79a4ac7dd31310f44b2a9bff1a33645d31795516 Mon Sep 17 00:00:00 2001
From: Piotr Delawski <piotr.delawski@gmail.com>
Date: Thu, 8 Jul 2021 17:10:57 +0200
Subject: [PATCH 10/58] Introduce `FormattedMemoryValue` with tests

---
 .../formatted-memory-value/index.js           | 57 +++++++++++++
 .../formatted-memory-value/test/index.js      | 84 +++++++++++++++++++
 .../components/stylesheets-summary/index.js   | 16 +---
 3 files changed, 145 insertions(+), 12 deletions(-)
 create mode 100644 assets/src/components/formatted-memory-value/index.js
 create mode 100644 assets/src/components/formatted-memory-value/test/index.js

diff --git a/assets/src/components/formatted-memory-value/index.js b/assets/src/components/formatted-memory-value/index.js
new file mode 100644
index 00000000000..645be1a20c8
--- /dev/null
+++ b/assets/src/components/formatted-memory-value/index.js
@@ -0,0 +1,57 @@
+/**
+ * WordPress dependencies
+ */
+import { __, _x } from '@wordpress/i18n';
+
+/**
+ * External dependencies
+ */
+import PropTypes from 'prop-types';
+
+/**
+ * Internal dependencies
+ */
+import { numberFormat } from '../../utils/number-format';
+
+function getMemoryUnit( unit ) {
+	if ( ! unit || typeof unit !== 'string' ) {
+		return null;
+	}
+
+	switch ( unit.toLowerCase() ) {
+		case 'b':
+			return {
+				name: __( 'bytes', 'amp' ),
+				abbreviation: _x( 'B', 'abbreviation for bytes', 'amp' ),
+			};
+		case 'kb':
+			return {
+				name: __( 'kilobytes', 'amp' ),
+				abbreviation: _x( 'kB', 'abbreviation for kilobytes', 'amp' ),
+			};
+		default:
+			return null;
+	}
+}
+
+export default function FormattedMemoryValue( { value, unit } ) {
+	const memoryUnit = getMemoryUnit( unit );
+
+	return (
+		<>
+			{ numberFormat( value ) }
+			{ memoryUnit && (
+				<>
+					{ ' ' }
+					<abbr title={ memoryUnit.name }>
+						{ memoryUnit.abbreviation }
+					</abbr>
+				</>
+			) }
+		</>
+	);
+}
+FormattedMemoryValue.propTypes = {
+	value: PropTypes.oneOfType( [ PropTypes.number, PropTypes.string ] ).isRequired,
+	unit: PropTypes.oneOf( [ 'b', 'B', 'kb', 'kB', 'KB' ] ),
+};
diff --git a/assets/src/components/formatted-memory-value/test/index.js b/assets/src/components/formatted-memory-value/test/index.js
new file mode 100644
index 00000000000..ae7b70c422a
--- /dev/null
+++ b/assets/src/components/formatted-memory-value/test/index.js
@@ -0,0 +1,84 @@
+/**
+ * WordPress dependencies
+ */
+import { render } from '@wordpress/element';
+
+/**
+ * External dependencies
+ */
+import { act } from 'react-dom/test-utils';
+
+/**
+ * Internal dependencies
+ */
+import FormattedMemoryValue from '..';
+
+let container;
+
+describe( 'FormattedMemoryValue', () => {
+	beforeEach( () => {
+		container = document.createElement( 'div' );
+		document.body.appendChild( container );
+	} );
+
+	afterEach( () => {
+		document.body.removeChild( container );
+		container = null;
+	} );
+
+	it( 'prints bare value if no unit is provided', () => {
+		act( () => {
+			render(
+				<FormattedMemoryValue value={ 123 } />,
+				container,
+			);
+		} );
+
+		expect( container.textContent ).toBe( '123' );
+	} );
+
+	it( 'prints correct output if value is a string', () => {
+		act( () => {
+			render(
+				<FormattedMemoryValue value="234" />,
+				container,
+			);
+		} );
+
+		expect( container.textContent ).toBe( '234' );
+	} );
+
+	it( 'prints correct value and unit', () => {
+		act( () => {
+			render(
+				<FormattedMemoryValue value="345" unit="B" />,
+				container,
+			);
+		} );
+
+		expect( container.textContent ).toBe( '345 B' );
+		expect( container.querySelector( 'abbr' ) ).not.toBeNull();
+		expect( container.querySelector( 'abbr' ).title ).toBe( 'bytes' );
+	} );
+
+	it.each( [
+		[ 'bytes', 'B', 'B' ],
+		[ 'bytes', 'b', 'B' ],
+		[ 'kilobytes', 'kB', 'kB' ],
+		[ 'kilobytes', 'kb', 'kB' ],
+		[ 'kilobytes', 'KB', 'kB' ],
+	] )(
+		'prints correct %s value and unit for the following input unit: %s',
+		( fullName, inputUnit, abbreviation ) => {
+			act( () => {
+				render(
+					<FormattedMemoryValue value="100" unit={ inputUnit } />,
+					container,
+				);
+			} );
+
+			expect( container.querySelector( 'abbr' ).title ).toBe( fullName );
+			expect( container.querySelector( 'abbr' ).textContent ).toBe( abbreviation );
+		},
+	);
+} );
diff --git a/assets/src/validated-url-page/components/stylesheets-summary/index.js b/assets/src/validated-url-page/components/stylesheets-summary/index.js
index 3ed3a7996ee..54831f90737 100644
--- a/assets/src/validated-url-page/components/stylesheets-summary/index.js
+++ b/assets/src/validated-url-page/components/stylesheets-summary/index.js
@@ -6,12 +6,12 @@ import PropTypes from 'prop-types';
 /**
  * WordPress dependencies
  */
-import { __, _x } from '@wordpress/i18n';
+import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
  */
-import { numberFormat } from '../../../utils/number-format';
+import FormattedMemoryValue from '../../../components/formatted-memory-value';
 
 export default function StylesheetsSummary( { stylesheetSizes } ) {
 	return (
@@ -22,11 +22,7 @@ export default function StylesheetsSummary( { stylesheetSizes } ) {
 						{ __( 'Total CSS size prior to minification:', 'amp' ) }
 					</th>
 					<td>
-						{ numberFormat( stylesheetSizes.included.originalSize ) }
-						{ ' ' }
-						<abbr title={ __( 'bytes', 'amp' ) }>
-							{ _x( 'B', 'abbreviation for bytes', 'amp' ) }
-						</abbr>
+						<FormattedMemoryValue value={ stylesheetSizes.included.originalSize } unit="B" />
 					</td>
 				</tr>
 				<tr>
@@ -34,11 +30,7 @@ export default function StylesheetsSummary( { stylesheetSizes } ) {
 						{ __( 'Total CSS size after minification:', 'amp' ) }
 					</th>
 					<td>
-						{ numberFormat( stylesheetSizes.included.finalSize ) }
-						{ ' ' }
-						<abbr title={ __( 'bytes', 'amp' ) }>
-							{ _x( 'B', 'abbreviation for bytes', 'amp' ) }
-						</abbr>
+						<FormattedMemoryValue value={ stylesheetSizes.included.finalSize } unit="B" />
 					</td>
 				</tr>
 			</tbody>

From bf35648cc10366da7cf5cf5c86fe416540a375d2 Mon Sep 17 00:00:00 2001
From: Piotr Delawski <piotr.delawski@gmail.com>
Date: Thu, 8 Jul 2021 20:41:23 +0200
Subject: [PATCH 11/58] Add CSS budget-related values to stylesheets summary
 table

---
 .../validated-url-provider/index.js           | 23 +++++-
 .../components/stylesheets-summary/index.js   | 41 +++++++++-
 .../src/validated-url-page/helpers/index.js   | 71 +++++++++++++----
 .../helpers/test/calculateStylesheetSizes.js  | 77 ++++++++++++++++---
 assets/src/validated-url-page/index.js        | 13 +++-
 .../class-amp-validated-url-post-type.php     |  9 +++
 6 files changed, 201 insertions(+), 33 deletions(-)

diff --git a/assets/src/components/validated-url-provider/index.js b/assets/src/components/validated-url-provider/index.js
index cc4a64f2955..71ba4081878 100644
--- a/assets/src/components/validated-url-provider/index.js
+++ b/assets/src/components/validated-url-provider/index.js
@@ -29,11 +29,18 @@ export const ValidatedUrl = createContext();
  *
  * @param {Object} props Component props.
  * @param {any} props.children Component children.
+ * @param {number} props.cssBudgetBytes CSS budget value in bytes.
  * @param {boolean} props.hasErrorBoundary Whether the component is wrapped in an error boundary.
  * @param {number} props.postId Validated URL post ID.
  * @param {string} props.validatedUrlsRestPath REST endpoint to retrieve validated URL data.
  */
-export function ValidatedUrlProvider( { children, hasErrorBoundary = false, postId, validatedUrlsRestPath } ) {
+export function ValidatedUrlProvider( {
+	children,
+	cssBudgetBytes,
+	hasErrorBoundary = false,
+	postId,
+	validatedUrlsRestPath,
+} ) {
 	const [ validatedUrl, setValidatedUrl ] = useState( {} );
 	const [ stylesheetSizes, setStylesheetSizes ] = useState( {} );
 	const [ fetchingValidatedUrl, setFetchingValidatedUrl ] = useState( null );
@@ -71,7 +78,7 @@ export function ValidatedUrlProvider( { children, hasErrorBoundary = false, post
 				}
 
 				setValidatedUrl( fetchedValidatedUrl );
-				setStylesheetSizes( calculateStylesheetSizes( fetchedValidatedUrl?.stylesheets ) );
+				setStylesheetSizes( calculateStylesheetSizes( fetchedValidatedUrl?.stylesheets, cssBudgetBytes ) );
 			} catch ( e ) {
 				if ( hasUnmounted.current === true ) {
 					return;
@@ -88,10 +95,17 @@ export function ValidatedUrlProvider( { children, hasErrorBoundary = false, post
 
 			setFetchingValidatedUrl( false );
 		} )();
-	}, [ error, fetchingValidatedUrl, hasErrorBoundary, postId, setAsyncError, setError, validatedUrl, validatedUrlsRestPath ] );
+	}, [ cssBudgetBytes, error, fetchingValidatedUrl, hasErrorBoundary, postId, setAsyncError, setError, validatedUrl, validatedUrlsRestPath ] );
 
 	return (
-		<ValidatedUrl.Provider value={ { validatedUrl, fetchingValidatedUrl, stylesheetSizes } }>
+		<ValidatedUrl.Provider
+			value={ {
+				cssBudgetBytes,
+				fetchingValidatedUrl,
+				stylesheetSizes,
+				validatedUrl,
+			} }
+		>
 			{ children }
 		</ValidatedUrl.Provider>
 	);
@@ -99,6 +113,7 @@ export function ValidatedUrlProvider( { children, hasErrorBoundary = false, post
 
 ValidatedUrlProvider.propTypes = {
 	children: PropTypes.any,
+	cssBudgetBytes: PropTypes.number,
 	hasErrorBoundary: PropTypes.bool,
 	postId: PropTypes.number,
 	validatedUrlsRestPath: PropTypes.string,
diff --git a/assets/src/validated-url-page/components/stylesheets-summary/index.js b/assets/src/validated-url-page/components/stylesheets-summary/index.js
index 54831f90737..b2ce98df791 100644
--- a/assets/src/validated-url-page/components/stylesheets-summary/index.js
+++ b/assets/src/validated-url-page/components/stylesheets-summary/index.js
@@ -6,14 +6,22 @@ import PropTypes from 'prop-types';
 /**
  * WordPress dependencies
  */
-import { __ } from '@wordpress/i18n';
+import { __, sprintf } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
  */
 import FormattedMemoryValue from '../../../components/formatted-memory-value';
+import { numberFormat } from '../../../utils/number-format';
 
-export default function StylesheetsSummary( { stylesheetSizes } ) {
+/**
+ * Render stylesheets summary table.
+ *
+ * @param {Object} props Component props.
+ * @param {number} props.cssBudgetBytes CSS budget value in bytes.
+ * @param {Object} props.stylesheetSizes Stylesheet sizes object.
+ */
+export default function StylesheetsSummary( { cssBudgetBytes, stylesheetSizes } ) {
 	return (
 		<table className="amp-stylesheet-summary">
 			<tbody>
@@ -33,19 +41,48 @@ export default function StylesheetsSummary( { stylesheetSizes } ) {
 						<FormattedMemoryValue value={ stylesheetSizes.included.finalSize } unit="B" />
 					</td>
 				</tr>
+				<tr>
+					<th>
+						{ __( 'Percentage of used CSS budget', 'amp' ) }
+						{ cssBudgetBytes && [ ' (', <FormattedMemoryValue value={ cssBudgetBytes / 1000 } unit="kB" key="" />, ')' ] }
+						{ ':' }
+					</th>
+					<td>
+						{ `${ numberFormat( parseFloat( stylesheetSizes.budgetUsed * 100 ).toFixed( 1 ) ) }%` }
+					</td>
+				</tr>
+				<tr>
+					<th>
+						{ sprintf(
+							// translators: %d stands for the number of stylesheets
+							__( 'Excluded minified CSS size (%d stylesheets):', 'amp' ),
+							stylesheetSizes.excluded.stylesheets.length,
+						) }
+					</th>
+					<td>
+						<FormattedMemoryValue value={ stylesheetSizes.excluded.finalSize } unit="B" />
+					</td>
+				</tr>
 			</tbody>
 		</table>
 	);
 }
 StylesheetsSummary.propTypes = {
+	cssBudgetBytes: PropTypes.number,
 	stylesheetSizes: PropTypes.shape( {
 		included: PropTypes.shape( {
 			originalSize: PropTypes.number,
 			finalSize: PropTypes.number,
+			stylesheets: PropTypes.arrayOf( PropTypes.string ),
+		} ),
+		excessive: PropTypes.shape( {
+			stylesheets: PropTypes.arrayOf( PropTypes.string ),
 		} ),
 		excluded: PropTypes.shape( {
 			originalSize: PropTypes.number,
 			finalSize: PropTypes.number,
+			stylesheets: PropTypes.arrayOf( PropTypes.string ),
 		} ),
+		budgetUsed: PropTypes.number,
 	} ),
 };
diff --git a/assets/src/validated-url-page/helpers/index.js b/assets/src/validated-url-page/helpers/index.js
index f05ba3f1e36..a176b07c0f5 100644
--- a/assets/src/validated-url-page/helpers/index.js
+++ b/assets/src/validated-url-page/helpers/index.js
@@ -5,31 +5,76 @@
  * stylesheets data.
  *
  * @param {Array} stylesheets List of stylesheets.
+ * @param {number} cssBudgetBytes CSS budget value in bytes.
  * @return {Object|null} Stylesheets sizes data or null.
  */
-export function calculateStylesheetSizes( stylesheets ) {
+export function calculateStylesheetSizes( stylesheets, cssBudgetBytes ) {
 	if ( ! stylesheets || stylesheets?.length === 0 ) {
 		return null;
 	}
 
-	return stylesheets.reduce( ( sizes, stylesheet ) => {
-		const key = stylesheet.included === true ? 'included' : 'excluded';
-
-		return {
-			...sizes,
-			[ key ]: {
-				originalSize: sizes[ key ].originalSize + stylesheet.original_size,
-				finalSize: sizes[ key ].finalSize + stylesheet.final_size,
-			},
-		};
-	}, {
+	const initialState = {
 		included: {
 			originalSize: 0,
 			finalSize: 0,
+			stylesheets: [],
+		},
+		excessive: {
+			stylesheets: [],
 		},
 		excluded: {
 			originalSize: 0,
 			finalSize: 0,
+			stylesheets: [],
 		},
-	} );
+		budgetUsed: 0,
+	};
+
+	const result = stylesheets
+		// Determine which stylesheets are included based on their priorities.
+		.sort( ( a, b ) => a.priority - b.priority )
+		.reduce( ( sizes, stylesheet ) => {
+			// Skip duplicate stylesheets and invalid groups.
+			if ( stylesheet?.duplicate || stylesheet.group !== 'amp-custom' ) {
+				return sizes;
+			}
+
+			// Excluded stylesheet.
+			if ( ! stylesheet.included ) {
+				return {
+					...sizes,
+					excluded: {
+						originalSize: sizes.excluded.originalSize + stylesheet.original_size,
+						finalSize: sizes.excluded.finalSize + stylesheet.final_size,
+						stylesheets: [
+							...sizes.excluded.stylesheets,
+							stylesheet.hash,
+						],
+					},
+				};
+			}
+
+			const isExcessive = sizes.included.finalSize + stylesheet.final_size >= cssBudgetBytes;
+
+			return {
+				...sizes,
+				included: {
+					originalSize: sizes.included.originalSize + stylesheet.original_size,
+					finalSize: sizes.included.finalSize + stylesheet.final_size,
+					stylesheets: ! isExcessive
+						? [ ...sizes.included.stylesheets, stylesheet.hash ]
+						: sizes.included.stylesheets,
+				},
+				excessive: {
+					stylesheets: isExcessive
+						? [ ...sizes.excessive.stylesheets, stylesheet.hash ]
+						: sizes.excessive.stylesheets,
+				},
+			};
+		}, initialState );
+
+	// Calculate CSS budget used.
+	result.budgetUsed = ( result.included.finalSize + result.excluded.finalSize ) / cssBudgetBytes;
+
+	return result;
 }
diff --git a/assets/src/validated-url-page/helpers/test/calculateStylesheetSizes.js b/assets/src/validated-url-page/helpers/test/calculateStylesheetSizes.js
index 0a200712eb8..a7ee211fabf 100644
--- a/assets/src/validated-url-page/helpers/test/calculateStylesheetSizes.js
+++ b/assets/src/validated-url-page/helpers/test/calculateStylesheetSizes.js
@@ -12,45 +12,98 @@ describe( 'calculateStylesheetSizes', () => {
 	it( 'returns correct sizes prior and after minification', () => {
 		const stylesheets = [
 			{
-				original_size: 20,
-				final_size: 3,
+				hash: 'excessive-1',
 				included: true,
+				priority: 10,
+				group: 'amp-custom',
+				original_size: 200,
+				final_size: 30,
 			},
 			{
-				original_size: 10,
-				final_size: 2,
+				hash: 'included',
 				included: true,
+				priority: 1,
+				group: 'amp-custom',
+				original_size: 100,
+				final_size: 20,
 			},
 			{
-				original_size: 10,
-				final_size: 0,
+				hash: 'excessive-2',
 				included: true,
+				priority: 100,
+				group: 'amp-custom',
+				original_size: 100,
+				final_size: 0,
 			},
 			{
+				hash: 'excluded-3',
+				included: false,
+				priority: 90,
+				group: 'amp-custom',
 				original_size: 200,
 				final_size: 30,
-				included: false,
 			},
 			{
+				hash: 'excluded-1',
+				included: false,
+				priority: 5,
+				group: 'amp-custom',
 				original_size: 100,
 				final_size: 20,
-				included: false,
 			},
 			{
+				hash: 'excluded-2',
+				included: false,
+				priority: 10,
+				group: 'amp-custom',
 				original_size: 100,
 				final_size: 0,
-				included: false,
 			},
 		];
-		expect( calculateStylesheetSizes( stylesheets ) ).toMatchObject( {
+		expect( calculateStylesheetSizes( stylesheets, 25 ) ).toMatchObject( {
 			included: {
-				originalSize: 40,
-				finalSize: 5,
+				originalSize: 400,
+				finalSize: 50,
+				stylesheets: [ 'included' ],
+			},
+			excessive: {
+				stylesheets: [ 'excessive-1', 'excessive-2' ],
 			},
 			excluded: {
 				originalSize: 400,
 				finalSize: 50,
+				stylesheets: [ 'excluded-1', 'excluded-2', 'excluded-3' ],
 			},
+			budgetUsed: 4,
 		} );
 	} );
+
+	it( 'ignores groups other than amp-custom and duplicate stylesheets', () => {
+		const stylesheets = [
+			{
+				hash: 'included',
+				group: 'amp-custom',
+				included: true,
+				priority: 1,
+				original_size: 100,
+				final_size: 20,
+			},
+			{
+				hash: 'ignored',
+				group: 'foo-bar',
+				included: true,
+				priority: 100,
+			},
+			{
+				hash: 'included',
+				group: 'amp-custom',
+				duplicate: true,
+				priority: 1,
+			},
+		];
+
+		const result = calculateStylesheetSizes( stylesheets, 75000 );
+		expect( result.included.stylesheets ).toHaveLength( 1 );
+		expect( result.included.stylesheets ).toContain( 'included' );
+	} );
 } );
diff --git a/assets/src/validated-url-page/index.js b/assets/src/validated-url-page/index.js
index 1bf3e7f359a..712a789f77d 100644
--- a/assets/src/validated-url-page/index.js
+++ b/assets/src/validated-url-page/index.js
@@ -4,6 +4,7 @@
 import PropTypes from 'prop-types';
 import {
 	APP_ROOT_ID,
+	CSS_BUDGET_BYTES,
 	POST_ID,
 	VALIDATED_URLS_REST_PATH,
 } from 'amp-settings'; // From WP inline script.
@@ -39,6 +40,7 @@ function Providers( { children } ) {
 		<ErrorContextProvider>
 			<ErrorBoundary>
 				<ValidatedUrlProvider
+					cssBudgetBytes={ Number( CSS_BUDGET_BYTES ) }
 					hasErrorBoundary={ true }
 					postId={ Number( POST_ID ) }
 					validatedUrlsRestPath={ VALIDATED_URLS_REST_PATH }
@@ -57,14 +59,21 @@ Providers.propTypes = {
  * Validated URL page application root.
  */
 function Root() {
-	const { fetchingValidatedUrl, stylesheetSizes } = useContext( ValidatedUrl );
+	const {
+		cssBudgetBytes,
+		fetchingValidatedUrl,
+		stylesheetSizes,
+	} = useContext( ValidatedUrl );
 
 	if ( fetchingValidatedUrl !== false ) {
 		return <Loading />;
 	}
 
 	return (
-		<StylesheetsSummary stylesheetSizes={ stylesheetSizes } />
+		<StylesheetsSummary
+			cssBudgetBytes={ cssBudgetBytes }
+			stylesheetSizes={ stylesheetSizes }
+		/>
 	);
 }
 
diff --git a/includes/validation/class-amp-validated-url-post-type.php b/includes/validation/class-amp-validated-url-post-type.php
index 27483f2b330..56606d28a39 100644
--- a/includes/validation/class-amp-validated-url-post-type.php
+++ b/includes/validation/class-amp-validated-url-post-type.php
@@ -2035,9 +2035,18 @@ public static function enqueue_edit_post_screen_scripts() {
 			true
 		);
 
+		// @todo: Determine $css_budget_bytes value in a better place.
+		$css_budget_bytes = null;
+		foreach ( AMP_Allowed_Tags_Generated::get_allowed_tag( 'style' ) as $spec_rule ) {
+			if ( isset( $spec_rule[ AMP_Rule_Spec::TAG_SPEC ]['spec_name'] ) && AMP_Style_Sanitizer::STYLE_AMP_CUSTOM_SPEC_NAME === $spec_rule[ AMP_Rule_Spec::TAG_SPEC ]['spec_name'] ) {
+				$css_budget_bytes = $spec_rule[ AMP_Rule_Spec::CDATA ]['max_bytes'];
+			}
+		}
+
 		$post                    = get_post();
 		$validated_url_page_data = [
 			'APP_ROOT_ID'              => self::AMP_VALIDATED_URL_PAGE_APP_ROOT_ID,
+			'CSS_BUDGET_BYTES'         => $css_budget_bytes,
 			'POST_ID'                  => $post->ID,
 			'VALIDATED_URLS_REST_PATH' => '/amp/v1/validated-urls',
 		];

From 74c873271afce39dc9a6f3e472c8006c25b1b6b7 Mon Sep 17 00:00:00 2001
From: Piotr Delawski <piotr.delawski@gmail.com>
Date: Fri, 9 Jul 2021 18:28:41 +0200
Subject: [PATCH 12/58] Move icons to parent `components` directory

---
 .../components/amp-document-status/index.js                 | 2 +-
 .../components/amp-validation-status/status-notification.js | 2 +-
 .../with-amp-toolbar-button/amp-toolbar-button.js           | 2 +-
 assets/src/block-validation/plugins/amp-block-validation.js | 2 +-
 assets/src/{block-validation => }/components/icon/index.js  | 6 +++---
 assets/src/{block-validation => }/components/icon/style.css | 0
 .../src/{block-validation => }/components/icon/test/icon.js | 0
 7 files changed, 7 insertions(+), 7 deletions(-)
 rename assets/src/{block-validation => }/components/icon/index.js (91%)
 rename assets/src/{block-validation => }/components/icon/style.css (100%)
 rename assets/src/{block-validation => }/components/icon/test/icon.js (100%)

diff --git a/assets/src/block-validation/components/amp-document-status/index.js b/assets/src/block-validation/components/amp-document-status/index.js
index d1d5002e968..1424fffd1c3 100644
--- a/assets/src/block-validation/components/amp-document-status/index.js
+++ b/assets/src/block-validation/components/amp-document-status/index.js
@@ -11,7 +11,7 @@ import { useDispatch, useSelect } from '@wordpress/data';
 import AMPValidationErrorsKeptIcon from '../../../../images/amp-validation-errors-kept.svg';
 import BellIcon from '../../../../images/bell-icon.svg';
 import { BLOCK_VALIDATION_STORE_KEY } from '../../store';
-import { StatusIcon } from '../icon';
+import { StatusIcon } from '../../../components/icon';
 import { SidebarNotification } from '../sidebar-notification';
 import { useAMPDocumentToggle } from '../../hooks/use-amp-document-toggle';
 import { useErrorsFetchingStateChanges } from '../../hooks/use-errors-fetching-state-changes';
diff --git a/assets/src/block-validation/components/amp-validation-status/status-notification.js b/assets/src/block-validation/components/amp-validation-status/status-notification.js
index 1705c3b4b1c..bbccd3447e9 100644
--- a/assets/src/block-validation/components/amp-validation-status/status-notification.js
+++ b/assets/src/block-validation/components/amp-validation-status/status-notification.js
@@ -10,7 +10,7 @@ import { useDispatch, useSelect } from '@wordpress/data';
  */
 import AMPValidationErrorsKeptIcon from '../../../../images/amp-validation-errors-kept.svg';
 import { BLOCK_VALIDATION_STORE_KEY } from '../../store';
-import { StatusIcon } from '../icon';
+import { StatusIcon } from '../../../components/icon';
 import { SidebarNotification } from '../sidebar-notification';
 import { useErrorsFetchingStateChanges } from '../../hooks/use-errors-fetching-state-changes';
 
diff --git a/assets/src/block-validation/components/with-amp-toolbar-button/amp-toolbar-button.js b/assets/src/block-validation/components/with-amp-toolbar-button/amp-toolbar-button.js
index 4dedb69ceb7..31dd08a52f1 100644
--- a/assets/src/block-validation/components/with-amp-toolbar-button/amp-toolbar-button.js
+++ b/assets/src/block-validation/components/with-amp-toolbar-button/amp-toolbar-button.js
@@ -13,7 +13,7 @@ import { useDispatch } from '@wordpress/data';
 /**
  * Internal dependencies
  */
-import { ToolbarIcon } from '../icon';
+import { ToolbarIcon } from '../../../components/icon';
 import { PLUGIN_NAME, SIDEBAR_NAME } from '../../plugins/amp-block-validation';
 import { useAMPDocumentToggle } from '../../hooks/use-amp-document-toggle';
 
diff --git a/assets/src/block-validation/plugins/amp-block-validation.js b/assets/src/block-validation/plugins/amp-block-validation.js
index f9e40007c03..d6d89dacf55 100644
--- a/assets/src/block-validation/plugins/amp-block-validation.js
+++ b/assets/src/block-validation/plugins/amp-block-validation.js
@@ -9,7 +9,7 @@ import { useSelect } from '@wordpress/data';
  * Internal dependencies
  */
 import { BLOCK_VALIDATION_STORE_KEY } from '../store';
-import { MoreMenuIcon, ToolbarIcon } from '../components/icon';
+import { MoreMenuIcon, ToolbarIcon } from '../../components/icon';
 import { Sidebar } from '../components/sidebar';
 import { InvalidBlockOutline } from '../components/invalid-block-outline';
 import { usePostDirtyStateChanges } from '../hooks/use-post-dirty-state-changes';
diff --git a/assets/src/block-validation/components/icon/index.js b/assets/src/components/icon/index.js
similarity index 91%
rename from assets/src/block-validation/components/icon/index.js
rename to assets/src/components/icon/index.js
index a3c15e91441..f954d23fc80 100644
--- a/assets/src/block-validation/components/icon/index.js
+++ b/assets/src/components/icon/index.js
@@ -7,9 +7,9 @@ import PropTypes from 'prop-types';
  * Internal dependencies
  */
 import './style.css';
-import AMPLogoIcon from '../../../../images/amp-logo-icon.svg';
-import AMPToolbarIcon from '../../../../images/amp-icon-toolbar.svg';
-import AMPToolbarIconBroken from '../../../../images/amp-toolbar-icon-broken.svg';
+import AMPLogoIcon from '../../../images/amp-logo-icon.svg';
+import AMPToolbarIcon from '../../../images/amp-icon-toolbar.svg';
+import AMPToolbarIconBroken from '../../../images/amp-toolbar-icon-broken.svg';
 
 /**
  * Plugin icon.
diff --git a/assets/src/block-validation/components/icon/style.css b/assets/src/components/icon/style.css
similarity index 100%
rename from assets/src/block-validation/components/icon/style.css
rename to assets/src/components/icon/style.css
diff --git a/assets/src/block-validation/components/icon/test/icon.js b/assets/src/components/icon/test/icon.js
similarity index 100%
rename from assets/src/block-validation/components/icon/test/icon.js
rename to assets/src/components/icon/test/icon.js

From 7fac19b86b985e5d612085f59d6472fe5f1de37e Mon Sep 17 00:00:00 2001
From: Piotr Delawski <piotr.delawski@gmail.com>
Date: Fri, 9 Jul 2021 19:02:57 +0200
Subject: [PATCH 13/58] Introduce validation status icon component

---
 assets/images/amp-alert.svg             |  4 +--
 assets/images/amp-valid.svg             |  2 +-
 assets/images/amp-warning.svg           |  3 ++
 assets/src/components/icon/index.js     | 24 +++++++++++++
 assets/src/components/icon/style.css    | 27 +++++++++++++++
 assets/src/components/icon/test/icon.js | 46 ++++++++++++++++++++++++-
 6 files changed, 102 insertions(+), 4 deletions(-)
 create mode 100644 assets/images/amp-warning.svg

diff --git a/assets/images/amp-alert.svg b/assets/images/amp-alert.svg
index 24acfb27d90..66b8bbe1706 100644
--- a/assets/images/amp-alert.svg
+++ b/assets/images/amp-alert.svg
@@ -1,3 +1,3 @@
-<svg width="20" height="17" viewBox="0 0 20 17" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path d="M10.0749 4.05547L16.3499 14.8971H3.79987L10.0749 4.05547ZM10.0749 0.730469L0.908203 16.5638H19.2415L10.0749 0.730469ZM10.9082 12.3971H9.24154V14.0638H10.9082V12.3971ZM10.9082 7.39714H9.24154V10.7305H10.9082V7.39714Z" fill="#BE2C23" />
+<svg viewBox="0 0 20 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+	<path d="M10.0749 4.05547L16.3499 14.8971H3.79987L10.0749 4.05547ZM10.0749 0.730469L0.908203 16.5638H19.2415L10.0749 0.730469ZM10.9082 12.3971H9.24154V14.0638H10.9082V12.3971ZM10.9082 7.39714H9.24154V10.7305H10.9082V7.39714Z" fill="#BE2C23" />
 </svg>
diff --git a/assets/images/amp-valid.svg b/assets/images/amp-valid.svg
index 2a49b68e38e..c64a3e34589 100644
--- a/assets/images/amp-valid.svg
+++ b/assets/images/amp-valid.svg
@@ -1,3 +1,3 @@
-<svg width="30" height="30" fill="none" xmlns="http://www.w3.org/2000/svg">
+<svg viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
 	<path d="M15 0C6.72 0 0 6.72 0 15c0 8.28 6.72 15 15 15 8.28 0 15-6.72 15-15 0-8.28-6.72-15-15-15zm0 27C8.385 27 3 21.615 3 15S8.385 3 15 3s12 5.385 12 12-5.385 12-12 12zm6.885-18.63L12 18.255l-3.885-3.87L6 16.5l6 6 12-12-2.115-2.13z" fill="#489697" />
 </svg>
diff --git a/assets/images/amp-warning.svg b/assets/images/amp-warning.svg
new file mode 100644
index 00000000000..65cebfd4796
--- /dev/null
+++ b/assets/images/amp-warning.svg
@@ -0,0 +1,3 @@
+<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+	<path d="M2.93 17.07A10 10 0 1117.07 2.93 10 10 0 012.93 17.07zm12.73-1.41A8 8 0 104.34 4.34a8 8 0 0011.32 11.32zM9 5h2v6H9V5zm0 8h2v2H9v-2z" fill="#ffc733" />
+</svg>
diff --git a/assets/src/components/icon/index.js b/assets/src/components/icon/index.js
index f954d23fc80..0d319409c84 100644
--- a/assets/src/components/icon/index.js
+++ b/assets/src/components/icon/index.js
@@ -10,6 +10,9 @@ import './style.css';
 import AMPLogoIcon from '../../../images/amp-logo-icon.svg';
 import AMPToolbarIcon from '../../../images/amp-icon-toolbar.svg';
 import AMPToolbarIconBroken from '../../../images/amp-toolbar-icon-broken.svg';
+import AMPValidIcon from '../../../images/amp-valid.svg';
+import AMPWarningIcon from '../../../images/amp-warning.svg';
+import AMPAlertIcon from '../../../images/amp-alert.svg';
 
 /**
  * Plugin icon.
@@ -94,3 +97,24 @@ export function StatusIcon( { broken = false } ) {
 StatusIcon.propTypes = {
 	broken: PropTypes.bool,
 };
+
+/**
+ * The warning icon with an exclamation mark symbol.
+ *
+ * @param {Object} props
+ * @param {string} props.type Icon type.
+ * @param {boolean} props.boxed Whether the icon should be contained in a box.
+ */
+export function ValidationStatusIcon( { type, boxed = false } ) {
+	return (
+		<span className={ `amp-validation-status-icon amp-validation-status-icon--${ type } ${ boxed ? 'amp-validation-status-icon--boxed' : '' }` }>
+			{ type === 'valid' && <AMPValidIcon /> }
+			{ type === 'warning' && <AMPWarningIcon /> }
+			{ type === 'error' && <AMPAlertIcon /> }
+		</span>
+	);
+}
+ValidationStatusIcon.propTypes = {
+	type: PropTypes.oneOf( [ 'valid', 'warning', 'error' ] ).isRequired,
+	boxed: PropTypes.bool,
+};
diff --git a/assets/src/components/icon/style.css b/assets/src/components/icon/style.css
index f8d8f96e2bb..56a0be05f9c 100644
--- a/assets/src/components/icon/style.css
+++ b/assets/src/components/icon/style.css
@@ -79,3 +79,30 @@
 .is-pressed .amp-error-count-badge {
 	border-color: #1e1e1e;
 }
+
+/*
+ * AMP validation status icons.
+ */
+.amp-validation-status-icon {
+	display: inline-block;
+	height: 16px;
+	vertical-align: middle;
+	width: 16px;
+}
+
+.amp-validation-status-icon--boxed {
+	border-radius: 5px;
+	padding: 2px;
+}
+
+.amp-validation-status-icon--boxed.amp-validation-status-icon--valid {
+	background-color: #d3e5e5;
+}
+
+.amp-validation-status-icon--boxed.amp-validation-status-icon--warning {
+	background-color: #fff6dd;
+}
+
+.amp-validation-status-icon--boxed.amp-validation-status-icon--error {
+	background-color: #f7ded4;
+}
diff --git a/assets/src/components/icon/test/icon.js b/assets/src/components/icon/test/icon.js
index 9fca433ca51..0403835c82e 100644
--- a/assets/src/components/icon/test/icon.js
+++ b/assets/src/components/icon/test/icon.js
@@ -11,7 +11,7 @@ import { render } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import { MoreMenuIcon, ToolbarIcon, StatusIcon } from '../index';
+import { MoreMenuIcon, ToolbarIcon, StatusIcon, ValidationStatusIcon } from '../index';
 
 let container;
 
@@ -116,4 +116,48 @@ describe( 'Icons', () => {
 
 		expect( container.querySelector( '.amp-status-icon--broken' ) ).not.toBeNull();
 	} );
+
+	it( 'renders the valid ValidationStatusIcon', () => {
+		act( () => {
+			render(
+				<ValidationStatusIcon type="valid" />,
+				container,
+			);
+		} );
+
+		expect( container.querySelector( '.amp-validation-status-icon--valid' ) ).not.toBeNull();
+	} );
+
+	it( 'renders the warning ValidationStatusIcon', () => {
+		act( () => {
+			render(
+				<ValidationStatusIcon type="warning" />,
+				container,
+			);
+		} );
+
+		expect( container.querySelector( '.amp-validation-status-icon--warning' ) ).not.toBeNull();
+	} );
+
+	it( 'renders the error ValidationStatusIcon', () => {
+		act( () => {
+			render(
+				<ValidationStatusIcon type="error" />,
+				container,
+			);
+		} );
+
+		expect( container.querySelector( '.amp-validation-status-icon--error' ) ).not.toBeNull();
+	} );
+
+	it( 'renders the boxed ValidationStatusIcon', () => {
+		act( () => {
+			render(
+				<ValidationStatusIcon type="valid" boxed />,
+				container,
+			);
+		} );
+
+		expect( container.querySelector( '.amp-validation-status-icon--boxed' ) ).not.toBeNull();
+	} );
 } );

From a9e3c39a3bc8764207e7dd1d866f5619bb4eb8b0 Mon Sep 17 00:00:00 2001
From: Piotr Delawski <piotr.delawski@gmail.com>
Date: Fri, 9 Jul 2021 19:08:37 +0200
Subject: [PATCH 14/58] Add status icons to stylesheets summary table

---
 .../validated-url-provider/index.js           |  7 +-
 .../components/stylesheets-summary/index.js   | 14 +++-
 .../src/validated-url-page/helpers/index.js   | 16 +++-
 .../helpers/test/calculateStylesheetSizes.js  | 80 ++++++++++++++++++-
 assets/src/validated-url-page/index.js        |  2 +
 .../class-amp-validated-url-post-type.php     | 16 +++-
 6 files changed, 120 insertions(+), 15 deletions(-)

diff --git a/assets/src/components/validated-url-provider/index.js b/assets/src/components/validated-url-provider/index.js
index 71ba4081878..9597a0b65c7 100644
--- a/assets/src/components/validated-url-provider/index.js
+++ b/assets/src/components/validated-url-provider/index.js
@@ -30,6 +30,7 @@ export const ValidatedUrl = createContext();
  * @param {Object} props Component props.
  * @param {any} props.children Component children.
  * @param {number} props.cssBudgetBytes CSS budget value in bytes.
+ * @param {number} props.cssBudgetWarningPercentage CSS budget warning level percentage.
  * @param {boolean} props.hasErrorBoundary Whether the component is wrapped in an error boundary.
  * @param {number} props.postId Validated URL post ID.
  * @param {string} props.validatedUrlsRestPath REST endpoint to retrieve validated URL data.
@@ -37,6 +38,7 @@ export const ValidatedUrl = createContext();
 export function ValidatedUrlProvider( {
 	children,
 	cssBudgetBytes,
+	cssBudgetWarningPercentage,
 	hasErrorBoundary = false,
 	postId,
 	validatedUrlsRestPath,
@@ -78,7 +80,7 @@ export function ValidatedUrlProvider( {
 				}
 
 				setValidatedUrl( fetchedValidatedUrl );
-				setStylesheetSizes( calculateStylesheetSizes( fetchedValidatedUrl?.stylesheets, cssBudgetBytes ) );
+				setStylesheetSizes( calculateStylesheetSizes( fetchedValidatedUrl?.stylesheets, cssBudgetBytes, cssBudgetWarningPercentage ) );
 			} catch ( e ) {
 				if ( hasUnmounted.current === true ) {
 					return;
@@ -95,7 +97,7 @@ export function ValidatedUrlProvider( {
 
 			setFetchingValidatedUrl( false );
 		} )();
-	}, [ cssBudgetBytes, error, fetchingValidatedUrl, hasErrorBoundary, postId, setAsyncError, setError, validatedUrl, validatedUrlsRestPath ] );
+	}, [ cssBudgetBytes, cssBudgetWarningPercentage, error, fetchingValidatedUrl, hasErrorBoundary, postId, setAsyncError, setError, validatedUrl, validatedUrlsRestPath ] );
 
 	return (
 		<ValidatedUrl.Provider
@@ -114,6 +116,7 @@ export function ValidatedUrlProvider( {
 ValidatedUrlProvider.propTypes = {
 	children: PropTypes.any,
 	cssBudgetBytes: PropTypes.number,
+	cssBudgetWarningPercentage: PropTypes.number,
 	hasErrorBoundary: PropTypes.bool,
 	postId: PropTypes.number,
 	validatedUrlsRestPath: PropTypes.string,
diff --git a/assets/src/validated-url-page/components/stylesheets-summary/index.js b/assets/src/validated-url-page/components/stylesheets-summary/index.js
index b2ce98df791..e53eba12c90 100644
--- a/assets/src/validated-url-page/components/stylesheets-summary/index.js
+++ b/assets/src/validated-url-page/components/stylesheets-summary/index.js
@@ -11,8 +11,9 @@ import { __, sprintf } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
-import FormattedMemoryValue from '../../../components/formatted-memory-value';
 import { numberFormat } from '../../../utils/number-format';
+import FormattedMemoryValue from '../../../components/formatted-memory-value';
+import { ValidationStatusIcon } from '../../../components/icon';
 
 /**
  * Render stylesheets summary table.
@@ -48,7 +49,11 @@ export default function StylesheetsSummary( { cssBudgetBytes, stylesheetSizes }
 						{ ':' }
 					</th>
 					<td>
-						{ `${ numberFormat( parseFloat( stylesheetSizes.budgetUsed * 100 ).toFixed( 1 ) ) }%` }
+						{ `${ numberFormat( parseFloat( stylesheetSizes.budget.usage ).toFixed( 1 ) ) }%` }
+						{ ' ' }
+						{ stylesheetSizes.budget.status === 'exceeded' && <ValidationStatusIcon type="error" boxed /> }
+						{ stylesheetSizes.budget.status === 'warning' && <ValidationStatusIcon type="warning" boxed /> }
+						{ stylesheetSizes.budget.status === 'valid' && <ValidationStatusIcon type="valid" boxed /> }
 					</td>
 				</tr>
 				<tr>
@@ -83,6 +88,9 @@ StylesheetsSummary.propTypes = {
 			finalSize: PropTypes.number,
 			stylesheets: PropTypes.arrayOf( PropTypes.string ),
 		} ),
-		budgetUsed: PropTypes.number,
+		budget: PropTypes.shape( {
+			usage: PropTypes.number,
+			status: PropTypes.oneOf( [ 'valid', 'warning', 'exceeded' ] ),
+		} ),
 	} ),
 };
diff --git a/assets/src/validated-url-page/helpers/index.js b/assets/src/validated-url-page/helpers/index.js
index a176b07c0f5..c020ba53b87 100644
--- a/assets/src/validated-url-page/helpers/index.js
+++ b/assets/src/validated-url-page/helpers/index.js
@@ -6,9 +6,10 @@
  *
  * @param {Array} stylesheets List of stylesheets.
  * @param {number} cssBudgetBytes CSS budget value in bytes.
+ * @param {number} cssBudgetWarningPercentage CSS budget warning level percentage.
  * @return {Object|null} Stylesheets sizes data or null.
  */
-export function calculateStylesheetSizes( stylesheets, cssBudgetBytes ) {
+export function calculateStylesheetSizes( stylesheets, cssBudgetBytes, cssBudgetWarningPercentage ) {
 	if ( ! stylesheets || stylesheets?.length === 0 ) {
 		return null;
 	}
@@ -27,7 +28,10 @@ export function calculateStylesheetSizes( stylesheets, cssBudgetBytes ) {
 			finalSize: 0,
 			stylesheets: [],
 		},
-		budgetUsed: 0,
+		budget: {
+			usage: 0,
+			status: 'valid',
+		},
 	};
 
 	const result = stylesheets
@@ -74,7 +78,13 @@ export function calculateStylesheetSizes( stylesheets, cssBudgetBytes ) {
 		}, initialState );
 
 	// Calculate CSS budget used.
-	result.budgetUsed = ( result.included.finalSize + result.excluded.finalSize ) / cssBudgetBytes;
+	result.budget.usage = ( result.included.finalSize + result.excluded.finalSize ) / cssBudgetBytes * 100;
+
+	if ( result.budget.usage > 100 ) {
+		result.budget.status = 'exceeded';
+	} else if ( result.budget.usage > cssBudgetWarningPercentage ) {
+		result.budget.status = 'warning';
+	}
 
 	return result;
 }
diff --git a/assets/src/validated-url-page/helpers/test/calculateStylesheetSizes.js b/assets/src/validated-url-page/helpers/test/calculateStylesheetSizes.js
index a7ee211fabf..7776839dc7f 100644
--- a/assets/src/validated-url-page/helpers/test/calculateStylesheetSizes.js
+++ b/assets/src/validated-url-page/helpers/test/calculateStylesheetSizes.js
@@ -60,7 +60,7 @@ describe( 'calculateStylesheetSizes', () => {
 				final_size: 0,
 			},
 		];
-		expect( calculateStylesheetSizes( stylesheets, 25 ) ).toMatchObject( {
+		expect( calculateStylesheetSizes( stylesheets, 25, 20 ) ).toMatchObject( {
 			included: {
 				originalSize: 400,
 				finalSize: 50,
@@ -74,7 +74,6 @@ describe( 'calculateStylesheetSizes', () => {
 				finalSize: 50,
 				stylesheets: [ 'excluded-1', 'excluded-2', 'excluded-3' ],
 			},
-			budgetUsed: 4,
 		} );
 	} );
 
@@ -102,8 +101,83 @@ describe( 'calculateStylesheetSizes', () => {
 			},
 		];
 
-		const result = calculateStylesheetSizes( stylesheets, 75000 );
+		const result = calculateStylesheetSizes( stylesheets, 75000, 80 );
 		expect( result.included.stylesheets ).toHaveLength( 1 );
 		expect( result.included.stylesheets ).toContain( 'included' );
 	} );
+
+	it( 'sets the exceeded budget values correctly', () => {
+		const stylesheets = [
+			{
+				hash: '1',
+				group: 'amp-custom',
+				included: true,
+				priority: 10,
+				original_size: 100,
+				final_size: 50,
+			},
+			{
+				hash: '2',
+				group: 'amp-custom',
+				included: true,
+				priority: 10,
+				original_size: 100,
+				final_size: 50,
+			},
+		];
+
+		const result = calculateStylesheetSizes( stylesheets, 50, 80 );
+		expect( result.budget.usage ).toBe( 200 );
+		expect( result.budget.status ).toBe( 'exceeded' );
+	} );
+
+	it( 'sets the warning budget values correctly', () => {
+		const stylesheets = [
+			{
+				hash: '1',
+				group: 'amp-custom',
+				included: true,
+				priority: 10,
+				original_size: 100,
+				final_size: 50,
+			},
+			{
+				hash: '2',
+				group: 'amp-custom',
+				included: true,
+				priority: 10,
+				original_size: 100,
+				final_size: 50,
+			},
+		];
+
+		const result = calculateStylesheetSizes( stylesheets, 200, 40 );
+		expect( result.budget.usage ).toBe( 50 );
+		expect( result.budget.status ).toBe( 'warning' );
+	} );
+
+	it( 'sets the valid budget values correctly', () => {
+		const stylesheets = [
+			{
+				hash: '1',
+				group: 'amp-custom',
+				included: true,
+				priority: 10,
+				original_size: 100,
+				final_size: 50,
+			},
+			{
+				hash: '2',
+				group: 'amp-custom',
+				included: true,
+				priority: 10,
+				original_size: 100,
+				final_size: 50,
+			},
+		];
+
+		const result = calculateStylesheetSizes( stylesheets, 200, 60 );
+		expect( result.budget.usage ).toBe( 50 );
+		expect( result.budget.status ).toBe( 'valid' );
+	} );
 } );
diff --git a/assets/src/validated-url-page/index.js b/assets/src/validated-url-page/index.js
index 712a789f77d..1a883154ee4 100644
--- a/assets/src/validated-url-page/index.js
+++ b/assets/src/validated-url-page/index.js
@@ -5,6 +5,7 @@ import PropTypes from 'prop-types';
 import {
 	APP_ROOT_ID,
 	CSS_BUDGET_BYTES,
+	CSS_BUDGET_WARNING_PERCENTAGE,
 	POST_ID,
 	VALIDATED_URLS_REST_PATH,
 } from 'amp-settings'; // From WP inline script.
@@ -41,6 +42,7 @@ function Providers( { children } ) {
 			<ErrorBoundary>
 				<ValidatedUrlProvider
 					cssBudgetBytes={ Number( CSS_BUDGET_BYTES ) }
+					cssBudgetWarningPercentage={ Number( CSS_BUDGET_WARNING_PERCENTAGE ) }
 					hasErrorBoundary={ true }
 					postId={ Number( POST_ID ) }
 					validatedUrlsRestPath={ VALIDATED_URLS_REST_PATH }
diff --git a/includes/validation/class-amp-validated-url-post-type.php b/includes/validation/class-amp-validated-url-post-type.php
index 56606d28a39..95745a45d50 100644
--- a/includes/validation/class-amp-validated-url-post-type.php
+++ b/includes/validation/class-amp-validated-url-post-type.php
@@ -2035,6 +2035,13 @@ public static function enqueue_edit_post_screen_scripts() {
 			true
 		);
 
+		wp_enqueue_style(
+			self::AMP_VALIDATED_URL_PAGE_SCRIPT_HANDLE,
+			amp_get_asset_url( 'css/' . self::AMP_VALIDATED_URL_PAGE_SCRIPT_HANDLE . '.css' ),
+			[],
+			$version
+		);
+
 		// @todo: Determine $css_budget_bytes value in a better place.
 		$css_budget_bytes = null;
 		foreach ( AMP_Allowed_Tags_Generated::get_allowed_tag( 'style' ) as $spec_rule ) {
@@ -2045,10 +2052,11 @@ public static function enqueue_edit_post_screen_scripts() {
 
 		$post                    = get_post();
 		$validated_url_page_data = [
-			'APP_ROOT_ID'              => self::AMP_VALIDATED_URL_PAGE_APP_ROOT_ID,
-			'CSS_BUDGET_BYTES'         => $css_budget_bytes,
-			'POST_ID'                  => $post->ID,
-			'VALIDATED_URLS_REST_PATH' => '/amp/v1/validated-urls',
+			'APP_ROOT_ID'                   => self::AMP_VALIDATED_URL_PAGE_APP_ROOT_ID,
+			'CSS_BUDGET_BYTES'              => $css_budget_bytes,
+			'CSS_BUDGET_WARNING_PERCENTAGE' => AMP_Style_Sanitizer::CSS_BUDGET_WARNING_PERCENTAGE,
+			'POST_ID'                       => $post->ID,
+			'VALIDATED_URLS_REST_PATH'      => '/amp/v1/validated-urls',
 		];
 
 		wp_add_inline_script(

From cd81f7b6dbb633da5d86b3497eb3b32a3302b6fb Mon Sep 17 00:00:00 2001
From: Piotr Delawski <piotr.delawski@gmail.com>
Date: Fri, 9 Jul 2021 19:18:08 +0200
Subject: [PATCH 15/58] Add warning and error notices related to CSS usage

---
 .../components/stylesheets-summary/index.js   | 105 ++++++++++--------
 1 file changed, 59 insertions(+), 46 deletions(-)

diff --git a/assets/src/validated-url-page/components/stylesheets-summary/index.js b/assets/src/validated-url-page/components/stylesheets-summary/index.js
index e53eba12c90..6c404157aac 100644
--- a/assets/src/validated-url-page/components/stylesheets-summary/index.js
+++ b/assets/src/validated-url-page/components/stylesheets-summary/index.js
@@ -14,6 +14,7 @@ import { __, sprintf } from '@wordpress/i18n';
 import { numberFormat } from '../../../utils/number-format';
 import FormattedMemoryValue from '../../../components/formatted-memory-value';
 import { ValidationStatusIcon } from '../../../components/icon';
+import { AMPNotice, NOTICE_SIZE_LARGE, NOTICE_TYPE_WARNING, NOTICE_TYPE_ERROR } from '../../../components/amp-notice';
 
 /**
  * Render stylesheets summary table.
@@ -24,52 +25,64 @@ import { ValidationStatusIcon } from '../../../components/icon';
  */
 export default function StylesheetsSummary( { cssBudgetBytes, stylesheetSizes } ) {
 	return (
-		<table className="amp-stylesheet-summary">
-			<tbody>
-				<tr>
-					<th>
-						{ __( 'Total CSS size prior to minification:', 'amp' ) }
-					</th>
-					<td>
-						<FormattedMemoryValue value={ stylesheetSizes.included.originalSize } unit="B" />
-					</td>
-				</tr>
-				<tr>
-					<th>
-						{ __( 'Total CSS size after minification:', 'amp' ) }
-					</th>
-					<td>
-						<FormattedMemoryValue value={ stylesheetSizes.included.finalSize } unit="B" />
-					</td>
-				</tr>
-				<tr>
-					<th>
-						{ __( 'Percentage of used CSS budget', 'amp' ) }
-						{ cssBudgetBytes && [ ' (', <FormattedMemoryValue value={ cssBudgetBytes / 1000 } unit="kB" key="" />, ')' ] }
-						{ ':' }
-					</th>
-					<td>
-						{ `${ numberFormat( parseFloat( stylesheetSizes.budget.usage ).toFixed( 1 ) ) }%` }
-						{ ' ' }
-						{ stylesheetSizes.budget.status === 'exceeded' && <ValidationStatusIcon type="error" boxed /> }
-						{ stylesheetSizes.budget.status === 'warning' && <ValidationStatusIcon type="warning" boxed /> }
-						{ stylesheetSizes.budget.status === 'valid' && <ValidationStatusIcon type="valid" boxed /> }
-					</td>
-				</tr>
-				<tr>
-					<th>
-						{ sprintf(
-							// translators: %d stands for the number of stylesheets
-							__( 'Excluded minified CSS size (%d stylesheets):', 'amp' ),
-							stylesheetSizes.excluded.stylesheets.length,
-						) }
-					</th>
-					<td>
-						<FormattedMemoryValue value={ stylesheetSizes.excluded.finalSize } unit="B" />
-					</td>
-				</tr>
-			</tbody>
-		</table>
+		<>
+			<table className="amp-stylesheet-summary">
+				<tbody>
+					<tr>
+						<th>
+							{ __( 'Total CSS size prior to minification:', 'amp' ) }
+						</th>
+						<td>
+							<FormattedMemoryValue value={ stylesheetSizes.included.originalSize } unit="B" />
+						</td>
+					</tr>
+					<tr>
+						<th>
+							{ __( 'Total CSS size after minification:', 'amp' ) }
+						</th>
+						<td>
+							<FormattedMemoryValue value={ stylesheetSizes.included.finalSize } unit="B" />
+						</td>
+					</tr>
+					<tr>
+						<th>
+							{ __( 'Percentage of used CSS budget', 'amp' ) }
+							{ cssBudgetBytes && [ ' (', <FormattedMemoryValue value={ cssBudgetBytes / 1000 } unit="kB" key="" />, ')' ] }
+							{ ':' }
+						</th>
+						<td>
+							{ `${ numberFormat( parseFloat( stylesheetSizes.budget.usage ).toFixed( 1 ) ) }%` }
+							{ ' ' }
+							{ stylesheetSizes.budget.status === 'exceeded' && <ValidationStatusIcon type="error" boxed /> }
+							{ stylesheetSizes.budget.status === 'warning' && <ValidationStatusIcon type="warning" boxed /> }
+							{ stylesheetSizes.budget.status === 'valid' && <ValidationStatusIcon type="valid" boxed /> }
+						</td>
+					</tr>
+					<tr>
+						<th>
+							{ sprintf(
+								// translators: %d stands for the number of stylesheets
+								__( 'Excluded minified CSS size (%d stylesheets):', 'amp' ),
+								stylesheetSizes.excluded.stylesheets.length,
+							) }
+						</th>
+						<td>
+							<FormattedMemoryValue value={ stylesheetSizes.excluded.finalSize } unit="B" />
+						</td>
+					</tr>
+				</tbody>
+			</table>
+			{ stylesheetSizes.budget.status === 'warning' && (
+				<AMPNotice size={ NOTICE_SIZE_LARGE } type={ NOTICE_TYPE_WARNING }>
+					{ __( 'You are nearing the limit of the CSS budget. Once this limit is reached, stylesheets deemed of lesser priority will be excluded from the page. Please review the stylesheets below and determine if the current theme or a particular plugin is including excessive CSS.', 'amp' ) }
+				</AMPNotice>
+			) }
+			{ stylesheetSizes.budget.status === 'exceeded' && (
+				<AMPNotice size={ NOTICE_SIZE_LARGE } type={ NOTICE_TYPE_ERROR }>
+					{ __( 'You have exceeded the CSS budget. Stylesheets deemed of lesser priority have been excluded from the page. Please review the flagged stylesheets below and determine if the current theme or a particular plugin is including excessive CSS.', 'amp' ) }
+				</AMPNotice>
+			) }
+		</>
 	);
 }
 StylesheetsSummary.propTypes = {

From bf49de94de16a29ac5dbadb118fe8d0733c33846 Mon Sep 17 00:00:00 2001
From: Piotr Delawski <piotr.delawski@gmail.com>
Date: Fri, 9 Jul 2021 19:37:55 +0200
Subject: [PATCH 16/58] Use flags instead of string prop

---
 assets/src/components/icon/index.js           | 36 +++++++++++++------
 assets/src/components/icon/test/icon.js       |  8 ++---
 .../components/stylesheets-summary/index.js   |  6 ++--
 3 files changed, 33 insertions(+), 17 deletions(-)

diff --git a/assets/src/components/icon/index.js b/assets/src/components/icon/index.js
index 0d319409c84..424a99687d9 100644
--- a/assets/src/components/icon/index.js
+++ b/assets/src/components/icon/index.js
@@ -99,22 +99,38 @@ StatusIcon.propTypes = {
 };
 
 /**
- * The warning icon with an exclamation mark symbol.
+ * Renders the validation status icon.
  *
  * @param {Object} props
- * @param {string} props.type Icon type.
- * @param {boolean} props.boxed Whether the icon should be contained in a box.
+ * @param {boolean} props.isError Flag indicating the icon is for an error status.
+ * @param {boolean} props.isWarning Flag indicating the icon is for a warning status.
+ * @param {boolean} props.isValid Flag indicating the icon is for a valid status.
+ * @param {boolean} props.isBoxed Whether the icon should be contained in a box.
  */
-export function ValidationStatusIcon( { type, boxed = false } ) {
+export function ValidationStatusIcon( { isError, isWarning, isValid, isBoxed = false } ) {
+	let type;
+
+	if ( isError ) {
+		type = 'error';
+	} else if ( isWarning ) {
+		type = 'warning';
+	} else if ( isValid ) {
+		type = 'valid';
+	} else {
+		return null;
+	}
+
 	return (
-		<span className={ `amp-validation-status-icon amp-validation-status-icon--${ type } ${ boxed ? 'amp-validation-status-icon--boxed' : '' }` }>
-			{ type === 'valid' && <AMPValidIcon /> }
-			{ type === 'warning' && <AMPWarningIcon /> }
-			{ type === 'error' && <AMPAlertIcon /> }
+		<span className={ `amp-validation-status-icon amp-validation-status-icon--${ type } ${ isBoxed ? 'amp-validation-status-icon--boxed' : '' }` }>
+			{ isValid && <AMPValidIcon /> }
+			{ isWarning && <AMPWarningIcon /> }
+			{ isError && <AMPAlertIcon /> }
 		</span>
 	);
 }
 ValidationStatusIcon.propTypes = {
-	type: PropTypes.oneOf( [ 'valid', 'warning', 'error' ] ).isRequired,
-	boxed: PropTypes.bool,
+	isError: PropTypes.bool,
+	isWarning: PropTypes.bool,
+	isValid: PropTypes.bool,
+	isBoxed: PropTypes.bool,
 };
diff --git a/assets/src/components/icon/test/icon.js b/assets/src/components/icon/test/icon.js
index 0403835c82e..2944b6e0193 100644
--- a/assets/src/components/icon/test/icon.js
+++ b/assets/src/components/icon/test/icon.js
@@ -120,7 +120,7 @@ describe( 'Icons', () => {
 	it( 'renders the valid ValidationStatusIcon', () => {
 		act( () => {
 			render(
-				<ValidationStatusIcon type="valid" />,
+				<ValidationStatusIcon isValid={ true } />,
 				container,
 			);
 		} );
@@ -131,7 +131,7 @@ describe( 'Icons', () => {
 	it( 'renders the warning ValidationStatusIcon', () => {
 		act( () => {
 			render(
-				<ValidationStatusIcon type="warning" />,
+				<ValidationStatusIcon isWarning={ true } />,
 				container,
 			);
 		} );
@@ -142,7 +142,7 @@ describe( 'Icons', () => {
 	it( 'renders the error ValidationStatusIcon', () => {
 		act( () => {
 			render(
-				<ValidationStatusIcon type="error" />,
+				<ValidationStatusIcon isError={ true } />,
 				container,
 			);
 		} );
@@ -153,7 +153,7 @@ describe( 'Icons', () => {
 	it( 'renders the boxed ValidationStatusIcon', () => {
 		act( () => {
 			render(
-				<ValidationStatusIcon type="valid" boxed />,
+				<ValidationStatusIcon isValid={ true } isBoxed={ true } />,
 				container,
 			);
 		} );
diff --git a/assets/src/validated-url-page/components/stylesheets-summary/index.js b/assets/src/validated-url-page/components/stylesheets-summary/index.js
index 6c404157aac..92f0d0f1884 100644
--- a/assets/src/validated-url-page/components/stylesheets-summary/index.js
+++ b/assets/src/validated-url-page/components/stylesheets-summary/index.js
@@ -53,9 +53,9 @@ export default function StylesheetsSummary( { cssBudgetBytes, stylesheetSizes }
 						<td>
 							{ `${ numberFormat( parseFloat( stylesheetSizes.budget.usage ).toFixed( 1 ) ) }%` }
 							{ ' ' }
-							{ stylesheetSizes.budget.status === 'exceeded' && <ValidationStatusIcon type="error" boxed /> }
-							{ stylesheetSizes.budget.status === 'warning' && <ValidationStatusIcon type="warning" boxed /> }
-							{ stylesheetSizes.budget.status === 'valid' && <ValidationStatusIcon type="valid" boxed /> }
+							{ stylesheetSizes.budget.status === 'exceeded' && <ValidationStatusIcon isError isBoxed /> }
+							{ stylesheetSizes.budget.status === 'warning' && <ValidationStatusIcon isWarning isBoxed /> }
+							{ stylesheetSizes.budget.status === 'valid' && <ValidationStatusIcon isValid isBoxed /> }
 						</td>
 					</tr>
 					<tr>

From b6ed86716a526a9445b4c1fad2b955356ae5fc2f Mon Sep 17 00:00:00 2001
From: Piotr Delawski <piotr.delawski@gmail.com>
Date: Fri, 9 Jul 2021 19:44:36 +0200
Subject: [PATCH 17/58] Use flags for stylesheets budget status designators

---
 .../components/stylesheets-summary/index.js   | 34 +++++++++++++++----
 .../src/validated-url-page/helpers/index.js   | 10 ++++--
 .../helpers/test/calculateStylesheetSizes.js  | 13 ++++---
 3 files changed, 43 insertions(+), 14 deletions(-)

diff --git a/assets/src/validated-url-page/components/stylesheets-summary/index.js b/assets/src/validated-url-page/components/stylesheets-summary/index.js
index 92f0d0f1884..b3913d55865 100644
--- a/assets/src/validated-url-page/components/stylesheets-summary/index.js
+++ b/assets/src/validated-url-page/components/stylesheets-summary/index.js
@@ -14,7 +14,17 @@ import { __, sprintf } from '@wordpress/i18n';
 import { numberFormat } from '../../../utils/number-format';
 import FormattedMemoryValue from '../../../components/formatted-memory-value';
 import { ValidationStatusIcon } from '../../../components/icon';
-import { AMPNotice, NOTICE_SIZE_LARGE, NOTICE_TYPE_WARNING, NOTICE_TYPE_ERROR } from '../../../components/amp-notice';
+import {
+	AMPNotice,
+	NOTICE_SIZE_LARGE,
+	NOTICE_TYPE_WARNING,
+	NOTICE_TYPE_ERROR,
+} from '../../../components/amp-notice';
+import {
+	STYLESHEETS_BUDGET_STATUS_VALID,
+	STYLESHEETS_BUDGET_STATUS_WARNING,
+	STYLESHEETS_BUDGET_STATUS_EXCEEDED,
+} from '../../helpers';
 
 /**
  * Render stylesheets summary table.
@@ -53,9 +63,15 @@ export default function StylesheetsSummary( { cssBudgetBytes, stylesheetSizes }
 						<td>
 							{ `${ numberFormat( parseFloat( stylesheetSizes.budget.usage ).toFixed( 1 ) ) }%` }
 							{ ' ' }
-							{ stylesheetSizes.budget.status === 'exceeded' && <ValidationStatusIcon isError isBoxed /> }
-							{ stylesheetSizes.budget.status === 'warning' && <ValidationStatusIcon isWarning isBoxed /> }
-							{ stylesheetSizes.budget.status === 'valid' && <ValidationStatusIcon isValid isBoxed /> }
+							{ stylesheetSizes.budget.status === STYLESHEETS_BUDGET_STATUS_EXCEEDED && (
+								<ValidationStatusIcon isError isBoxed />
+							) }
+							{ stylesheetSizes.budget.status === STYLESHEETS_BUDGET_STATUS_WARNING && (
+								<ValidationStatusIcon isWarning isBoxed />
+							) }
+							{ stylesheetSizes.budget.status === STYLESHEETS_BUDGET_STATUS_VALID && (
+								<ValidationStatusIcon isValid isBoxed />
+							) }
 						</td>
 					</tr>
 					<tr>
@@ -72,12 +88,12 @@ export default function StylesheetsSummary( { cssBudgetBytes, stylesheetSizes }
 					</tr>
 				</tbody>
 			</table>
-			{ stylesheetSizes.budget.status === 'warning' && (
+			{ stylesheetSizes.budget.status === STYLESHEETS_BUDGET_STATUS_WARNING && (
 				<AMPNotice size={ NOTICE_SIZE_LARGE } type={ NOTICE_TYPE_WARNING }>
 					{ __( 'You are nearing the limit of the CSS budget. Once this limit is reached, stylesheets deemed of lesser priority will be excluded from the page. Please review the stylesheets below and determine if the current theme or a particular plugin is including excessive CSS.', 'amp' ) }
 				</AMPNotice>
 			) }
-			{ stylesheetSizes.budget.status === 'exceeded' && (
+			{ stylesheetSizes.budget.status === STYLESHEETS_BUDGET_STATUS_EXCEEDED && (
 				<AMPNotice size={ NOTICE_SIZE_LARGE } type={ NOTICE_TYPE_ERROR }>
 					{ __( 'You have exceeded the CSS budget. Stylesheets deemed of lesser priority have been excluded from the page. Please review the flagged stylesheets below and determine if the current theme or a particular plugin is including excessive CSS.', 'amp' ) }
 				</AMPNotice>
@@ -103,7 +119,11 @@ StylesheetsSummary.propTypes = {
 		} ),
 		budget: PropTypes.shape( {
 			usage: PropTypes.number,
-			status: PropTypes.oneOf( [ 'valid', 'warning', 'exceeded' ] ),
+			status: PropTypes.oneOf( [
+				STYLESHEETS_BUDGET_STATUS_VALID,
+				STYLESHEETS_BUDGET_STATUS_WARNING,
+				STYLESHEETS_BUDGET_STATUS_EXCEEDED,
+			] ),
 		} ),
 	} ),
 };
diff --git a/assets/src/validated-url-page/helpers/index.js b/assets/src/validated-url-page/helpers/index.js
index c020ba53b87..ef097edb07f 100644
--- a/assets/src/validated-url-page/helpers/index.js
+++ b/assets/src/validated-url-page/helpers/index.js
@@ -1,3 +1,7 @@
+export const STYLESHEETS_BUDGET_STATUS_VALID = 'valid';
+export const STYLESHEETS_BUDGET_STATUS_WARNING = 'warning';
+export const STYLESHEETS_BUDGET_STATUS_EXCEEDED = 'exceeded';
+
 /**
  * Calculate stylesheets sizes.
  *
@@ -30,7 +34,7 @@ export function calculateStylesheetSizes( stylesheets, cssBudgetBytes, cssBudget
 		},
 		budget: {
 			usage: 0,
-			status: 'valid',
+			status: STYLESHEETS_BUDGET_STATUS_VALID,
 		},
 	};
 
@@ -81,9 +85,9 @@ export function calculateStylesheetSizes( stylesheets, cssBudgetBytes, cssBudget
 	result.budget.usage = ( result.included.finalSize + result.excluded.finalSize ) / cssBudgetBytes * 100;
 
 	if ( result.budget.usage > 100 ) {
-		result.budget.status = 'exceeded';
+		result.budget.status = STYLESHEETS_BUDGET_STATUS_EXCEEDED;
 	} else if ( result.budget.usage > cssBudgetWarningPercentage ) {
-		result.budget.status = 'warning';
+		result.budget.status = STYLESHEETS_BUDGET_STATUS_WARNING;
 	}
 
 	return result;
diff --git a/assets/src/validated-url-page/helpers/test/calculateStylesheetSizes.js b/assets/src/validated-url-page/helpers/test/calculateStylesheetSizes.js
index 7776839dc7f..eba9459aaba 100644
--- a/assets/src/validated-url-page/helpers/test/calculateStylesheetSizes.js
+++ b/assets/src/validated-url-page/helpers/test/calculateStylesheetSizes.js
@@ -1,7 +1,12 @@
 /**
  * Internal dependencies
  */
-import { calculateStylesheetSizes } from '..';
+import {
+	calculateStylesheetSizes,
+	STYLESHEETS_BUDGET_STATUS_VALID,
+	STYLESHEETS_BUDGET_STATUS_WARNING,
+	STYLESHEETS_BUDGET_STATUS_EXCEEDED,
+} from '..';
 
 describe( 'calculateStylesheetSizes', () => {
 	it( 'returns null if no stylesheets are provided', () => {
@@ -128,7 +133,7 @@ describe( 'calculateStylesheetSizes', () => {
 
 		const result = calculateStylesheetSizes( stylesheets, 50, 80 );
 		expect( result.budget.usage ).toBe( 200 );
-		expect( result.budget.status ).toBe( 'exceeded' );
+		expect( result.budget.status ).toBe( STYLESHEETS_BUDGET_STATUS_EXCEEDED );
 	} );
 
 	it( 'sets the warning budget values correctly', () => {
@@ -153,7 +158,7 @@ describe( 'calculateStylesheetSizes', () => {
 
 		const result = calculateStylesheetSizes( stylesheets, 200, 40 );
 		expect( result.budget.usage ).toBe( 50 );
-		expect( result.budget.status ).toBe( 'warning' );
+		expect( result.budget.status ).toBe( STYLESHEETS_BUDGET_STATUS_WARNING );
 	} );
 
 	it( 'sets the valid budget values correctly', () => {
@@ -178,6 +183,6 @@ describe( 'calculateStylesheetSizes', () => {
 
 		const result = calculateStylesheetSizes( stylesheets, 200, 60 );
 		expect( result.budget.usage ).toBe( 50 );
-		expect( result.budget.status ).toBe( 'valid' );
+		expect( result.budget.status ).toBe( STYLESHEETS_BUDGET_STATUS_VALID );
 	} );
 } );

From 8f81c07bc88b6b50513e004c01aaa91e4e783502 Mon Sep 17 00:00:00 2001
From: Piotr Delawski <piotr.delawski@gmail.com>
Date: Fri, 9 Jul 2021 20:02:10 +0200
Subject: [PATCH 18/58] Use more accurate naming convention

---
 .../validated-url-provider/index.js           |  5 +--
 .../components/stylesheets-summary/index.js   | 41 +++++++++++--------
 .../src/validated-url-page/helpers/index.js   | 29 ++++++-------
 ...etSizes.js => calculateStylesheetStats.js} | 33 ++++++++-------
 assets/src/validated-url-page/index.js        |  6 +--
 5 files changed, 61 insertions(+), 53 deletions(-)
 rename assets/src/validated-url-page/helpers/test/{calculateStylesheetSizes.js => calculateStylesheetStats.js} (75%)

diff --git a/assets/src/components/validated-url-provider/index.js b/assets/src/components/validated-url-provider/index.js
index 9597a0b65c7..c84cb82bada 100644
--- a/assets/src/components/validated-url-provider/index.js
+++ b/assets/src/components/validated-url-provider/index.js
@@ -20,7 +20,7 @@ import apiFetch from '@wordpress/api-fetch';
  */
 import { ErrorContext } from '../error-context-provider';
 import { useAsyncError } from '../../utils/use-async-error';
-import { calculateStylesheetSizes } from '../../validated-url-page/helpers';
+import { calculateStylesheetStats } from '../../validated-url-page/helpers';
 
 export const ValidatedUrl = createContext();
 
@@ -80,7 +80,7 @@ export function ValidatedUrlProvider( {
 				}
 
 				setValidatedUrl( fetchedValidatedUrl );
-				setStylesheetSizes( calculateStylesheetSizes( fetchedValidatedUrl?.stylesheets, cssBudgetBytes, cssBudgetWarningPercentage ) );
+				setStylesheetSizes( calculateStylesheetStats( fetchedValidatedUrl?.stylesheets, cssBudgetBytes, cssBudgetWarningPercentage ) );
 			} catch ( e ) {
 				if ( hasUnmounted.current === true ) {
 					return;
@@ -102,7 +102,6 @@ export function ValidatedUrlProvider( {
 	return (
 		<ValidatedUrl.Provider
 			value={ {
-				cssBudgetBytes,
 				fetchingValidatedUrl,
 				stylesheetSizes,
 				validatedUrl,
diff --git a/assets/src/validated-url-page/components/stylesheets-summary/index.js b/assets/src/validated-url-page/components/stylesheets-summary/index.js
index b3913d55865..25b201da29e 100644
--- a/assets/src/validated-url-page/components/stylesheets-summary/index.js
+++ b/assets/src/validated-url-page/components/stylesheets-summary/index.js
@@ -30,10 +30,19 @@ import {
  * Render stylesheets summary table.
  *
  * @param {Object} props Component props.
- * @param {number} props.cssBudgetBytes CSS budget value in bytes.
  * @param {Object} props.stylesheetSizes Stylesheet sizes object.
  */
-export default function StylesheetsSummary( { cssBudgetBytes, stylesheetSizes } ) {
+export default function StylesheetsSummary( { stylesheetSizes } ) {
+	const {
+		included,
+		excluded,
+		usage: {
+			actualPercentage,
+			budgetBytes,
+			status,
+		},
+	} = stylesheetSizes;
+
 	return (
 		<>
 			<table className="amp-stylesheet-summary">
@@ -43,7 +52,7 @@ export default function StylesheetsSummary( { cssBudgetBytes, stylesheetSizes }
 							{ __( 'Total CSS size prior to minification:', 'amp' ) }
 						</th>
 						<td>
-							<FormattedMemoryValue value={ stylesheetSizes.included.originalSize } unit="B" />
+							<FormattedMemoryValue value={ included.originalSize } unit="B" />
 						</td>
 					</tr>
 					<tr>
@@ -51,25 +60,25 @@ export default function StylesheetsSummary( { cssBudgetBytes, stylesheetSizes }
 							{ __( 'Total CSS size after minification:', 'amp' ) }
 						</th>
 						<td>
-							<FormattedMemoryValue value={ stylesheetSizes.included.finalSize } unit="B" />
+							<FormattedMemoryValue value={ included.finalSize } unit="B" />
 						</td>
 					</tr>
 					<tr>
 						<th>
 							{ __( 'Percentage of used CSS budget', 'amp' ) }
-							{ cssBudgetBytes && [ ' (', <FormattedMemoryValue value={ cssBudgetBytes / 1000 } unit="kB" key="" />, ')' ] }
+							{ budgetBytes && [ ' (', <FormattedMemoryValue value={ budgetBytes / 1000 } unit="kB" key="" />, ')' ] }
 							{ ':' }
 						</th>
 						<td>
-							{ `${ numberFormat( parseFloat( stylesheetSizes.budget.usage ).toFixed( 1 ) ) }%` }
+							{ `${ numberFormat( parseFloat( actualPercentage ).toFixed( 1 ) ) }%` }
 							{ ' ' }
-							{ stylesheetSizes.budget.status === STYLESHEETS_BUDGET_STATUS_EXCEEDED && (
+							{ status === STYLESHEETS_BUDGET_STATUS_EXCEEDED && (
 								<ValidationStatusIcon isError isBoxed />
 							) }
-							{ stylesheetSizes.budget.status === STYLESHEETS_BUDGET_STATUS_WARNING && (
+							{ status === STYLESHEETS_BUDGET_STATUS_WARNING && (
 								<ValidationStatusIcon isWarning isBoxed />
 							) }
-							{ stylesheetSizes.budget.status === STYLESHEETS_BUDGET_STATUS_VALID && (
+							{ status === STYLESHEETS_BUDGET_STATUS_VALID && (
 								<ValidationStatusIcon isValid isBoxed />
 							) }
 						</td>
@@ -79,21 +88,21 @@ export default function StylesheetsSummary( { cssBudgetBytes, stylesheetSizes }
 							{ sprintf(
 								// translators: %d stands for the number of stylesheets
 								__( 'Excluded minified CSS size (%d stylesheets):', 'amp' ),
-								stylesheetSizes.excluded.stylesheets.length,
+								excluded.stylesheets.length,
 							) }
 						</th>
 						<td>
-							<FormattedMemoryValue value={ stylesheetSizes.excluded.finalSize } unit="B" />
+							<FormattedMemoryValue value={ excluded.finalSize } unit="B" />
 						</td>
 					</tr>
 				</tbody>
 			</table>
-			{ stylesheetSizes.budget.status === STYLESHEETS_BUDGET_STATUS_WARNING && (
+			{ status === STYLESHEETS_BUDGET_STATUS_WARNING && (
 				<AMPNotice size={ NOTICE_SIZE_LARGE } type={ NOTICE_TYPE_WARNING }>
 					{ __( 'You are nearing the limit of the CSS budget. Once this limit is reached, stylesheets deemed of lesser priority will be excluded from the page. Please review the stylesheets below and determine if the current theme or a particular plugin is including excessive CSS.', 'amp' ) }
 				</AMPNotice>
 			) }
-			{ stylesheetSizes.budget.status === STYLESHEETS_BUDGET_STATUS_EXCEEDED && (
+			{ status === STYLESHEETS_BUDGET_STATUS_EXCEEDED && (
 				<AMPNotice size={ NOTICE_SIZE_LARGE } type={ NOTICE_TYPE_ERROR }>
 					{ __( 'You have exceeded the CSS budget. Stylesheets deemed of lesser priority have been excluded from the page. Please review the flagged stylesheets below and determine if the current theme or a particular plugin is including excessive CSS.', 'amp' ) }
 				</AMPNotice>
@@ -102,7 +111,6 @@ export default function StylesheetsSummary( { cssBudgetBytes, stylesheetSizes }
 	);
 }
 StylesheetsSummary.propTypes = {
-	cssBudgetBytes: PropTypes.number,
 	stylesheetSizes: PropTypes.shape( {
 		included: PropTypes.shape( {
 			originalSize: PropTypes.number,
@@ -117,8 +125,9 @@ StylesheetsSummary.propTypes = {
 			finalSize: PropTypes.number,
 			stylesheets: PropTypes.arrayOf( PropTypes.string ),
 		} ),
-		budget: PropTypes.shape( {
-			usage: PropTypes.number,
+		usage: PropTypes.shape( {
+			actualPercentage: PropTypes.number,
+			budgetBytes: PropTypes.number,
 			status: PropTypes.oneOf( [
 				STYLESHEETS_BUDGET_STATUS_VALID,
 				STYLESHEETS_BUDGET_STATUS_WARNING,
diff --git a/assets/src/validated-url-page/helpers/index.js b/assets/src/validated-url-page/helpers/index.js
index ef097edb07f..7c7f9d8174a 100644
--- a/assets/src/validated-url-page/helpers/index.js
+++ b/assets/src/validated-url-page/helpers/index.js
@@ -3,17 +3,17 @@ export const STYLESHEETS_BUDGET_STATUS_WARNING = 'warning';
 export const STYLESHEETS_BUDGET_STATUS_EXCEEDED = 'exceeded';
 
 /**
- * Calculate stylesheets sizes.
+ * Calculate stylesheets stats.
  *
- * Calculates total CSS size prior and after the minification based on the
- * stylesheets data.
+ * Calculates total CSS size and other stats prior and after the minification
+ * based on the stylesheets data.
  *
  * @param {Array} stylesheets List of stylesheets.
- * @param {number} cssBudgetBytes CSS budget value in bytes.
- * @param {number} cssBudgetWarningPercentage CSS budget warning level percentage.
+ * @param {number} budgetBytes CSS budget value in bytes.
+ * @param {number} budgetWarningPercentage CSS budget warning level percentage.
  * @return {Object|null} Stylesheets sizes data or null.
  */
-export function calculateStylesheetSizes( stylesheets, cssBudgetBytes, cssBudgetWarningPercentage ) {
+export function calculateStylesheetStats( stylesheets, budgetBytes, budgetWarningPercentage ) {
 	if ( ! stylesheets || stylesheets?.length === 0 ) {
 		return null;
 	}
@@ -32,8 +32,9 @@ export function calculateStylesheetSizes( stylesheets, cssBudgetBytes, cssBudget
 			finalSize: 0,
 			stylesheets: [],
 		},
-		budget: {
-			usage: 0,
+		usage: {
+			actualPercentage: 0,
+			budgetBytes,
 			status: STYLESHEETS_BUDGET_STATUS_VALID,
 		},
 	};
@@ -62,7 +63,7 @@ export function calculateStylesheetSizes( stylesheets, cssBudgetBytes, cssBudget
 				};
 			}
 
-			const isExcessive = sizes.included.finalSize + stylesheet.final_size >= cssBudgetBytes;
+			const isExcessive = sizes.included.finalSize + stylesheet.final_size >= budgetBytes;
 
 			return {
 				...sizes,
@@ -82,12 +83,12 @@ export function calculateStylesheetSizes( stylesheets, cssBudgetBytes, cssBudget
 		}, initialState );
 
 	// Calculate CSS budget used.
-	result.budget.usage = ( result.included.finalSize + result.excluded.finalSize ) / cssBudgetBytes * 100;
+	result.usage.actualPercentage = ( result.included.finalSize + result.excluded.finalSize ) / budgetBytes * 100;
 
-	if ( result.budget.usage > 100 ) {
-		result.budget.status = STYLESHEETS_BUDGET_STATUS_EXCEEDED;
-	} else if ( result.budget.usage > cssBudgetWarningPercentage ) {
-		result.budget.status = STYLESHEETS_BUDGET_STATUS_WARNING;
+	if ( result.usage.actualPercentage > 100 ) {
+		result.usage.status = STYLESHEETS_BUDGET_STATUS_EXCEEDED;
+	} else if ( result.usage.actualPercentage > budgetWarningPercentage ) {
+		result.usage.status = STYLESHEETS_BUDGET_STATUS_WARNING;
 	}
 
 	return result;
diff --git a/assets/src/validated-url-page/helpers/test/calculateStylesheetSizes.js b/assets/src/validated-url-page/helpers/test/calculateStylesheetStats.js
similarity index 75%
rename from assets/src/validated-url-page/helpers/test/calculateStylesheetSizes.js
rename to assets/src/validated-url-page/helpers/test/calculateStylesheetStats.js
index eba9459aaba..e54d4374876 100644
--- a/assets/src/validated-url-page/helpers/test/calculateStylesheetSizes.js
+++ b/assets/src/validated-url-page/helpers/test/calculateStylesheetStats.js
@@ -2,16 +2,16 @@
  * Internal dependencies
  */
 import {
-	calculateStylesheetSizes,
+	calculateStylesheetStats,
 	STYLESHEETS_BUDGET_STATUS_VALID,
 	STYLESHEETS_BUDGET_STATUS_WARNING,
 	STYLESHEETS_BUDGET_STATUS_EXCEEDED,
 } from '..';
 
-describe( 'calculateStylesheetSizes', () => {
+describe( 'calculateStylesheetStats', () => {
 	it( 'returns null if no stylesheets are provided', () => {
-		expect( calculateStylesheetSizes() ).toBeNull();
-		expect( calculateStylesheetSizes( [] ) ).toBeNull();
+		expect( calculateStylesheetStats() ).toBeNull();
+		expect( calculateStylesheetStats( [] ) ).toBeNull();
 	} );
 
 	it( 'returns correct sizes prior and after minification', () => {
@@ -65,7 +65,7 @@ describe( 'calculateStylesheetSizes', () => {
 				final_size: 0,
 			},
 		];
-		expect( calculateStylesheetSizes( stylesheets, 25, 20 ) ).toMatchObject( {
+		expect( calculateStylesheetStats( stylesheets, 25, 20 ) ).toMatchObject( {
 			included: {
 				originalSize: 400,
 				finalSize: 50,
@@ -106,7 +106,7 @@ describe( 'calculateStylesheetSizes', () => {
 			},
 		];
 
-		const result = calculateStylesheetSizes( stylesheets, 75000, 80 );
+		const result = calculateStylesheetStats( stylesheets, 75000, 80 );
 		expect( result.included.stylesheets ).toHaveLength( 1 );
 		expect( result.included.stylesheets ).toContain( 'included' );
 	} );
@@ -131,9 +131,10 @@ describe( 'calculateStylesheetSizes', () => {
 			},
 		];
 
-		const result = calculateStylesheetSizes( stylesheets, 50, 80 );
-		expect( result.budget.usage ).toBe( 200 );
-		expect( result.budget.status ).toBe( STYLESHEETS_BUDGET_STATUS_EXCEEDED );
+		const result = calculateStylesheetStats( stylesheets, 50, 80 );
+		expect( result.usage.budgetBytes ).toBe( 50 );
+		expect( result.usage.actualPercentage ).toBe( 200 );
+		expect( result.usage.status ).toBe( STYLESHEETS_BUDGET_STATUS_EXCEEDED );
 	} );
 
 	it( 'sets the warning budget values correctly', () => {
@@ -156,9 +157,10 @@ describe( 'calculateStylesheetSizes', () => {
 			},
 		];
 
-		const result = calculateStylesheetSizes( stylesheets, 200, 40 );
-		expect( result.budget.usage ).toBe( 50 );
-		expect( result.budget.status ).toBe( STYLESHEETS_BUDGET_STATUS_WARNING );
+		const result = calculateStylesheetStats( stylesheets, 200, 40 );
+		expect( result.usage.budgetBytes ).toBe( 200 );
+		expect( result.usage.actualPercentage ).toBe( 50 );
+		expect( result.usage.status ).toBe( STYLESHEETS_BUDGET_STATUS_WARNING );
 	} );
 
 	it( 'sets the valid budget values correctly', () => {
@@ -181,8 +183,9 @@ describe( 'calculateStylesheetSizes', () => {
 			},
 		];
 
-		const result = calculateStylesheetSizes( stylesheets, 200, 60 );
-		expect( result.budget.usage ).toBe( 50 );
-		expect( result.budget.status ).toBe( STYLESHEETS_BUDGET_STATUS_VALID );
+		const result = calculateStylesheetStats( stylesheets, 200, 60 );
+		expect( result.usage.budgetBytes ).toBe( 200 );
+		expect( result.usage.actualPercentage ).toBe( 50 );
+		expect( result.usage.status ).toBe( STYLESHEETS_BUDGET_STATUS_VALID );
 	} );
 } );
diff --git a/assets/src/validated-url-page/index.js b/assets/src/validated-url-page/index.js
index 1a883154ee4..a2c92ffde2f 100644
--- a/assets/src/validated-url-page/index.js
+++ b/assets/src/validated-url-page/index.js
@@ -62,7 +62,6 @@ Providers.propTypes = {
  */
 function Root() {
 	const {
-		cssBudgetBytes,
 		fetchingValidatedUrl,
 		stylesheetSizes,
 	} = useContext( ValidatedUrl );
@@ -72,10 +71,7 @@ function Root() {
 	}
 
 	return (
-		<StylesheetsSummary
-			cssBudgetBytes={ cssBudgetBytes }
-			stylesheetSizes={ stylesheetSizes }
-		/>
+		<StylesheetsSummary stylesheetSizes={ stylesheetSizes } />
 	);
 }
 

From e7ba4428901c9960b8c0ee8d03814ba21d984b6f Mon Sep 17 00:00:00 2001
From: Piotr Delawski <piotr.delawski@gmail.com>
Date: Fri, 9 Jul 2021 20:13:31 +0200
Subject: [PATCH 19/58] Fix minor calculation bugs and update copy

---
 .../components/stylesheets-summary/index.js    | 18 +++++++++++++-----
 1 file changed, 13 insertions(+), 5 deletions(-)

diff --git a/assets/src/validated-url-page/components/stylesheets-summary/index.js b/assets/src/validated-url-page/components/stylesheets-summary/index.js
index 25b201da29e..bafdacecfc1 100644
--- a/assets/src/validated-url-page/components/stylesheets-summary/index.js
+++ b/assets/src/validated-url-page/components/stylesheets-summary/index.js
@@ -6,7 +6,7 @@ import PropTypes from 'prop-types';
 /**
  * WordPress dependencies
  */
-import { __, sprintf } from '@wordpress/i18n';
+import { __, _n, sprintf } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
@@ -52,7 +52,7 @@ export default function StylesheetsSummary( { stylesheetSizes } ) {
 							{ __( 'Total CSS size prior to minification:', 'amp' ) }
 						</th>
 						<td>
-							<FormattedMemoryValue value={ included.originalSize } unit="B" />
+							<FormattedMemoryValue value={ included.originalSize + excluded.originalSize } unit="B" />
 						</td>
 					</tr>
 					<tr>
@@ -60,7 +60,7 @@ export default function StylesheetsSummary( { stylesheetSizes } ) {
 							{ __( 'Total CSS size after minification:', 'amp' ) }
 						</th>
 						<td>
-							<FormattedMemoryValue value={ included.finalSize } unit="B" />
+							<FormattedMemoryValue value={ included.finalSize + excluded.finalSize } unit="B" />
 						</td>
 					</tr>
 					<tr>
@@ -87,7 +87,12 @@ export default function StylesheetsSummary( { stylesheetSizes } ) {
 						<th>
 							{ sprintf(
 								// translators: %d stands for the number of stylesheets
-								__( 'Excluded minified CSS size (%d stylesheets):', 'amp' ),
+								_n(
+									'Excluded minified CSS size (%d stylesheet):',
+									'Excluded minified CSS size (%d stylesheets):',
+									excluded.stylesheets.length,
+									'amp',
+								),
 								excluded.stylesheets.length,
 							) }
 						</th>
@@ -104,7 +109,10 @@ export default function StylesheetsSummary( { stylesheetSizes } ) {
 			) }
 			{ status === STYLESHEETS_BUDGET_STATUS_EXCEEDED && (
 				<AMPNotice size={ NOTICE_SIZE_LARGE } type={ NOTICE_TYPE_ERROR }>
-					{ __( 'You have exceeded the CSS budget. Stylesheets deemed of lesser priority have been excluded from the page. Please review the flagged stylesheets below and determine if the current theme or a particular plugin is including excessive CSS.', 'amp' ) }
+					{ excluded.stylesheets.length === 0
+						? __( 'You have exceeded the CSS budget. The page will not be served as a valid AMP page.', 'amp' )
+						: __( 'You have exceeded the CSS budget. Stylesheets deemed of lesser priority have been excluded from the page.', 'amp' ) }
+					{ __( 'Please review the flagged stylesheets below and determine if the current theme or a particular plugin is including excessive CSS.', 'amp' ) }
 				</AMPNotice>
 			) }
 		</>

From 3503fad2aced25db6c2b0faf1be40b70c0ebbb16 Mon Sep 17 00:00:00 2001
From: Piotr Delawski <piotr.delawski@gmail.com>
Date: Wed, 14 Jul 2021 13:48:03 +0200
Subject: [PATCH 20/58] Add missing/stale stylesheets errors

---
 .../validated-url-provider/index.js           |  6 +-
 .../components/stylesheets-summary/index.js   |  8 +-
 .../src/validated-url-page/helpers/index.js   |  2 +-
 assets/src/validated-url-page/index.js        | 16 ++--
 assets/src/validated-url-page/stylesheets.js  | 74 +++++++++++++++++++
 .../class-amp-validated-url-post-type.php     |  1 +
 src/Validation/ValidatedUrlData.php           |  6 +-
 7 files changed, 93 insertions(+), 20 deletions(-)
 create mode 100644 assets/src/validated-url-page/stylesheets.js

diff --git a/assets/src/components/validated-url-provider/index.js b/assets/src/components/validated-url-provider/index.js
index c84cb82bada..5b091fa67c8 100644
--- a/assets/src/components/validated-url-provider/index.js
+++ b/assets/src/components/validated-url-provider/index.js
@@ -44,7 +44,7 @@ export function ValidatedUrlProvider( {
 	validatedUrlsRestPath,
 } ) {
 	const [ validatedUrl, setValidatedUrl ] = useState( {} );
-	const [ stylesheetSizes, setStylesheetSizes ] = useState( {} );
+	const [ stylesheetStats, setStylesheetStats ] = useState();
 	const [ fetchingValidatedUrl, setFetchingValidatedUrl ] = useState( null );
 
 	const { error, setError } = useContext( ErrorContext );
@@ -80,7 +80,7 @@ export function ValidatedUrlProvider( {
 				}
 
 				setValidatedUrl( fetchedValidatedUrl );
-				setStylesheetSizes( calculateStylesheetStats( fetchedValidatedUrl?.stylesheets, cssBudgetBytes, cssBudgetWarningPercentage ) );
+				setStylesheetStats( calculateStylesheetStats( fetchedValidatedUrl?.stylesheets, cssBudgetBytes, cssBudgetWarningPercentage ) );
 			} catch ( e ) {
 				if ( hasUnmounted.current === true ) {
 					return;
@@ -103,7 +103,7 @@ export function ValidatedUrlProvider( {
 		<ValidatedUrl.Provider
 			value={ {
 				fetchingValidatedUrl,
-				stylesheetSizes,
+				stylesheetStats,
 				validatedUrl,
 			} }
 		>
diff --git a/assets/src/validated-url-page/components/stylesheets-summary/index.js b/assets/src/validated-url-page/components/stylesheets-summary/index.js
index bafdacecfc1..8daa7a27a75 100644
--- a/assets/src/validated-url-page/components/stylesheets-summary/index.js
+++ b/assets/src/validated-url-page/components/stylesheets-summary/index.js
@@ -30,9 +30,9 @@ import {
  * Render stylesheets summary table.
  *
  * @param {Object} props Component props.
- * @param {Object} props.stylesheetSizes Stylesheet sizes object.
+ * @param {Object} props.stats Stylesheet stats object.
  */
-export default function StylesheetsSummary( { stylesheetSizes } ) {
+export default function StylesheetsSummary( { stats } ) {
 	const {
 		included,
 		excluded,
@@ -41,7 +41,7 @@ export default function StylesheetsSummary( { stylesheetSizes } ) {
 			budgetBytes,
 			status,
 		},
-	} = stylesheetSizes;
+	} = stats;
 
 	return (
 		<>
@@ -119,7 +119,7 @@ export default function StylesheetsSummary( { stylesheetSizes } ) {
 	);
 }
 StylesheetsSummary.propTypes = {
-	stylesheetSizes: PropTypes.shape( {
+	stats: PropTypes.shape( {
 		included: PropTypes.shape( {
 			originalSize: PropTypes.number,
 			finalSize: PropTypes.number,
diff --git a/assets/src/validated-url-page/helpers/index.js b/assets/src/validated-url-page/helpers/index.js
index 7c7f9d8174a..4bbca28fc61 100644
--- a/assets/src/validated-url-page/helpers/index.js
+++ b/assets/src/validated-url-page/helpers/index.js
@@ -14,7 +14,7 @@ export const STYLESHEETS_BUDGET_STATUS_EXCEEDED = 'exceeded';
  * @return {Object|null} Stylesheets sizes data or null.
  */
 export function calculateStylesheetStats( stylesheets, budgetBytes, budgetWarningPercentage ) {
-	if ( ! stylesheets || stylesheets?.length === 0 ) {
+	if ( ! stylesheets || stylesheets?.errors || stylesheets?.length === 0 ) {
 		return null;
 	}
 
diff --git a/assets/src/validated-url-page/index.js b/assets/src/validated-url-page/index.js
index a2c92ffde2f..69fcef11bd1 100644
--- a/assets/src/validated-url-page/index.js
+++ b/assets/src/validated-url-page/index.js
@@ -19,12 +19,11 @@ import { render, useContext } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import { Loading } from '../components/loading';
 import { ErrorBoundary } from '../components/error-boundary';
 import { ErrorContextProvider } from '../components/error-context-provider';
 import { ErrorScreen } from '../components/error-screen';
 import { ValidatedUrl, ValidatedUrlProvider } from '../components/validated-url-provider';
-import StylesheetsSummary from './components/stylesheets-summary';
+import Stylesheets from './stylesheets';
 
 let errorHandler;
 
@@ -63,15 +62,16 @@ Providers.propTypes = {
 function Root() {
 	const {
 		fetchingValidatedUrl,
-		stylesheetSizes,
+		stylesheetStats,
+		validatedUrl,
 	} = useContext( ValidatedUrl );
 
-	if ( fetchingValidatedUrl !== false ) {
-		return <Loading />;
-	}
-
 	return (
-		<StylesheetsSummary stylesheetSizes={ stylesheetSizes } />
+		<Stylesheets
+			fetching={ fetchingValidatedUrl }
+			stats={ stylesheetStats }
+			stylesheets={ validatedUrl.stylesheets }
+		/>
 	);
 }
 
diff --git a/assets/src/validated-url-page/stylesheets.js b/assets/src/validated-url-page/stylesheets.js
new file mode 100644
index 00000000000..96c146df292
--- /dev/null
+++ b/assets/src/validated-url-page/stylesheets.js
@@ -0,0 +1,74 @@
+/**
+ * External dependencies
+ */
+import PropTypes from 'prop-types';
+import { RECHECK_URL } from 'amp-settings'; // From WP inline script.
+
+/**
+ * WordPress dependencies
+ */
+import { __, sprintf } from '@wordpress/i18n';
+import { RawHTML } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { Loading } from '../components/loading';
+import {
+	AMPNotice,
+	NOTICE_SIZE_LARGE,
+	NOTICE_TYPE_INFO,
+} from '../components/amp-notice';
+import StylesheetsSummary from './components/stylesheets-summary';
+
+/**
+ * Stylesheets validation data.
+ *
+ * @param {Object} props Component props.
+ * @param {boolean} props.fetching Flag indicating if stylesheets data is being fetched.
+ * @param {Object} props.stats Stylesheets stats object.
+ * @param {Object|Array} props.stylesheets Array of stylesheets details or an object containing errors.
+ */
+export default function Stylesheets( {
+	fetching,
+	stats,
+	stylesheets,
+} ) {
+	if ( fetching !== false ) {
+		return <Loading />;
+	}
+
+	if ( stylesheets?.errors?.amp_validated_url_stylesheets_no_longer_available ) {
+		return (
+			<AMPNotice size={ NOTICE_SIZE_LARGE } type={ NOTICE_TYPE_INFO }>
+				<RawHTML>
+					{ sprintf(
+						/* translators: placeholder is URL to recheck the post */
+						__( 'Stylesheet information for this URL is no longer available. Such data is automatically deleted after a week to reduce database storage. It is of little value to store long-term given that it becomes stale as themes and plugins are updated. To obtain the latest stylesheet information, <a href="%s">recheck this URL</a>.', 'amp' ),
+						`${ RECHECK_URL }#amp_stylesheets`,
+					) }
+				</RawHTML>
+			</AMPNotice>
+		);
+	}
+
+	if ( stylesheets?.errors?.amp_validated_url_stylesheets_missing || stylesheets?.length === 0 || ! stats ) {
+		return (
+			<AMPNotice size={ NOTICE_SIZE_LARGE } type={ NOTICE_TYPE_INFO }>
+				{ __( 'Unable to retrieve stylesheets data for this URL.', 'amp' ) }
+			</AMPNotice>
+		);
+	}
+
+	return <StylesheetsSummary stats={ stats } />;
+}
+Stylesheets.propTypes = {
+	fetching: PropTypes.bool,
+	stats: PropTypes.object,
+	stylesheets: PropTypes.oneOf( [
+		PropTypes.array,
+		PropTypes.shape( {
+			errors: PropTypes.object,
+		} ),
+	] ),
+};
diff --git a/includes/validation/class-amp-validated-url-post-type.php b/includes/validation/class-amp-validated-url-post-type.php
index 95745a45d50..38ab7d60528 100644
--- a/includes/validation/class-amp-validated-url-post-type.php
+++ b/includes/validation/class-amp-validated-url-post-type.php
@@ -2056,6 +2056,7 @@ public static function enqueue_edit_post_screen_scripts() {
 			'CSS_BUDGET_BYTES'              => $css_budget_bytes,
 			'CSS_BUDGET_WARNING_PERCENTAGE' => AMP_Style_Sanitizer::CSS_BUDGET_WARNING_PERCENTAGE,
 			'POST_ID'                       => $post->ID,
+			'RECHECK_URL'                   => self::get_recheck_url( $post ),
 			'VALIDATED_URLS_REST_PATH'      => '/amp/v1/validated-urls',
 		];
 
diff --git a/src/Validation/ValidatedUrlData.php b/src/Validation/ValidatedUrlData.php
index c5eec9049a5..2a2a24baf61 100644
--- a/src/Validation/ValidatedUrlData.php
+++ b/src/Validation/ValidatedUrlData.php
@@ -110,8 +110,7 @@ public function get_stylesheets() {
 		if ( empty( $stylesheets ) ) {
 			return new WP_Error(
 				'amp_validated_url_stylesheets_no_longer_available',
-				__( 'Stylesheet information for this URL is no longer available. Such data is automatically deleted after a week to reduce database storage. It is of little value to store long-term given that it becomes stale as themes and plugins are updated. To obtain the latest stylesheet information, recheck this URL.', 'amp' ),
-				[ 'status' => 404 ]
+				__( 'Stylesheet information for this URL is no longer available. Such data is automatically deleted after a week to reduce database storage. It is of little value to store long-term given that it becomes stale as themes and plugins are updated. To obtain the latest stylesheet information, recheck this URL.', 'amp' )
 			);
 		}
 
@@ -120,8 +119,7 @@ public function get_stylesheets() {
 		if ( ! is_array( $stylesheets ) ) {
 			return new WP_Error(
 				'amp_validated_url_stylesheets_missing',
-				__( 'Unable to retrieve stylesheets data for this URL.', 'amp' ),
-				[ 'status' => 404 ]
+				__( 'Unable to retrieve stylesheets data for this URL.', 'amp' )
 			);
 		}
 

From cd96844bbbeb1d695aebf24e554893a50bc70383 Mon Sep 17 00:00:00 2001
From: Piotr Delawski <piotr.delawski@gmail.com>
Date: Wed, 14 Jul 2021 13:56:31 +0200
Subject: [PATCH 21/58] Add notice when CSS processing is limited

---
 .../src/components/_amp-stylesheet-list.scss    |  1 +
 .../src/components/_amp-stylesheet-summary.scss |  2 +-
 assets/src/validated-url-page/stylesheets.js    | 17 +++++++++++++++--
 .../class-amp-validated-url-post-type.php       |  1 +
 4 files changed, 18 insertions(+), 3 deletions(-)

diff --git a/assets/css/src/components/_amp-stylesheet-list.scss b/assets/css/src/components/_amp-stylesheet-list.scss
index 53a3fb632c4..b1a776dfa33 100644
--- a/assets/css/src/components/_amp-stylesheet-list.scss
+++ b/assets/css/src/components/_amp-stylesheet-list.scss
@@ -1,4 +1,5 @@
 .amp-stylesheet-list {
+	margin: 1em 0;
 
 	th {
 		overflow-wrap: normal;
diff --git a/assets/css/src/components/_amp-stylesheet-summary.scss b/assets/css/src/components/_amp-stylesheet-summary.scss
index 4ff217add55..5a2e6d5338f 100644
--- a/assets/css/src/components/_amp-stylesheet-summary.scss
+++ b/assets/css/src/components/_amp-stylesheet-summary.scss
@@ -1,5 +1,5 @@
 .amp-stylesheet-summary {
-	margin-bottom: 1em;
+	margin: 1em 0;
 
 	span.amp-icon {
 		font-size: 16px;
diff --git a/assets/src/validated-url-page/stylesheets.js b/assets/src/validated-url-page/stylesheets.js
index 96c146df292..77b8f826502 100644
--- a/assets/src/validated-url-page/stylesheets.js
+++ b/assets/src/validated-url-page/stylesheets.js
@@ -2,7 +2,10 @@
  * External dependencies
  */
 import PropTypes from 'prop-types';
-import { RECHECK_URL } from 'amp-settings'; // From WP inline script.
+import {
+	HAS_REQUIRED_PHP_CSS_PARSER,
+	RECHECK_URL,
+} from 'amp-settings'; // From WP inline script.
 
 /**
  * WordPress dependencies
@@ -18,6 +21,7 @@ import {
 	AMPNotice,
 	NOTICE_SIZE_LARGE,
 	NOTICE_TYPE_INFO,
+	NOTICE_TYPE_WARNING,
 } from '../components/amp-notice';
 import StylesheetsSummary from './components/stylesheets-summary';
 
@@ -60,7 +64,16 @@ export default function Stylesheets( {
 		);
 	}
 
-	return <StylesheetsSummary stats={ stats } />;
+	return (
+		<>
+			{ ! HAS_REQUIRED_PHP_CSS_PARSER && (
+				<AMPNotice size={ NOTICE_SIZE_LARGE } type={ NOTICE_TYPE_WARNING }>
+					{ __( 'AMP CSS processing is limited because a conflicting version of PHP-CSS-Parser has been loaded by another plugin or theme. Tree shaking is not available.', 'amp' ) }
+				</AMPNotice>
+			) }
+			<StylesheetsSummary stats={ stats } />
+		</>
+	);
 }
 Stylesheets.propTypes = {
 	fetching: PropTypes.bool,
diff --git a/includes/validation/class-amp-validated-url-post-type.php b/includes/validation/class-amp-validated-url-post-type.php
index 38ab7d60528..750fd8e2606 100644
--- a/includes/validation/class-amp-validated-url-post-type.php
+++ b/includes/validation/class-amp-validated-url-post-type.php
@@ -2055,6 +2055,7 @@ public static function enqueue_edit_post_screen_scripts() {
 			'APP_ROOT_ID'                   => self::AMP_VALIDATED_URL_PAGE_APP_ROOT_ID,
 			'CSS_BUDGET_BYTES'              => $css_budget_bytes,
 			'CSS_BUDGET_WARNING_PERCENTAGE' => AMP_Style_Sanitizer::CSS_BUDGET_WARNING_PERCENTAGE,
+			'HAS_REQUIRED_PHP_CSS_PARSER'   => AMP_Style_Sanitizer::has_required_php_css_parser(),
 			'POST_ID'                       => $post->ID,
 			'RECHECK_URL'                   => self::get_recheck_url( $post ),
 			'VALIDATED_URLS_REST_PATH'      => '/amp/v1/validated-urls',

From 3693b471c65293896336aeae2107c36e238ae679 Mon Sep 17 00:00:00 2001
From: Piotr Delawski <piotr.delawski@gmail.com>
Date: Wed, 14 Jul 2021 14:00:20 +0200
Subject: [PATCH 22/58] Fix `propTypes` definition

---
 assets/src/validated-url-page/stylesheets.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/assets/src/validated-url-page/stylesheets.js b/assets/src/validated-url-page/stylesheets.js
index 77b8f826502..61b0579c895 100644
--- a/assets/src/validated-url-page/stylesheets.js
+++ b/assets/src/validated-url-page/stylesheets.js
@@ -78,8 +78,8 @@ export default function Stylesheets( {
 Stylesheets.propTypes = {
 	fetching: PropTypes.bool,
 	stats: PropTypes.object,
-	stylesheets: PropTypes.oneOf( [
-		PropTypes.array,
+	stylesheets: PropTypes.oneOfType( [
+		PropTypes.arrayOf( PropTypes.object ),
 		PropTypes.shape( {
 			errors: PropTypes.object,
 		} ),

From 6652eb7409cda5b18893e386c77bcf85619178a3 Mon Sep 17 00:00:00 2001
From: Piotr Delawski <piotr.delawski@gmail.com>
Date: Wed, 14 Jul 2021 18:20:10 +0200
Subject: [PATCH 23/58] Calculate stylesheets stats in separate side effect

---
 .../validated-url-provider/index.js           | 19 +++++++++++++++++--
 .../src/validated-url-page/helpers/index.js   |  2 +-
 2 files changed, 18 insertions(+), 3 deletions(-)

diff --git a/assets/src/components/validated-url-provider/index.js b/assets/src/components/validated-url-provider/index.js
index 5b091fa67c8..1706d8cf4da 100644
--- a/assets/src/components/validated-url-provider/index.js
+++ b/assets/src/components/validated-url-provider/index.js
@@ -80,7 +80,6 @@ export function ValidatedUrlProvider( {
 				}
 
 				setValidatedUrl( fetchedValidatedUrl );
-				setStylesheetStats( calculateStylesheetStats( fetchedValidatedUrl?.stylesheets, cssBudgetBytes, cssBudgetWarningPercentage ) );
 			} catch ( e ) {
 				if ( hasUnmounted.current === true ) {
 					return;
@@ -97,7 +96,23 @@ export function ValidatedUrlProvider( {
 
 			setFetchingValidatedUrl( false );
 		} )();
-	}, [ cssBudgetBytes, cssBudgetWarningPercentage, error, fetchingValidatedUrl, hasErrorBoundary, postId, setAsyncError, setError, validatedUrl, validatedUrlsRestPath ] );
+	}, [ error, fetchingValidatedUrl, hasErrorBoundary, postId, setAsyncError, setError, validatedUrl, validatedUrlsRestPath ] );
+
+	/**
+	 * Calculate stylesheet stats.
+	 */
+	useEffect( () => {
+		if (
+			! validatedUrl?.stylesheets ||
+			validatedUrl.stylesheets?.errors ||
+			! Array.isArray( validatedUrl.stylesheets ) ||
+			validatedUrl.stylesheets.length === 0
+		) {
+			return;
+		}
+
+		setStylesheetStats( calculateStylesheetStats( [ ...validatedUrl.stylesheets ], cssBudgetBytes, cssBudgetWarningPercentage ) );
+	}, [ cssBudgetBytes, cssBudgetWarningPercentage, validatedUrl.stylesheets ] );
 
 	return (
 		<ValidatedUrl.Provider
diff --git a/assets/src/validated-url-page/helpers/index.js b/assets/src/validated-url-page/helpers/index.js
index 4bbca28fc61..b9a679105e3 100644
--- a/assets/src/validated-url-page/helpers/index.js
+++ b/assets/src/validated-url-page/helpers/index.js
@@ -14,7 +14,7 @@ export const STYLESHEETS_BUDGET_STATUS_EXCEEDED = 'exceeded';
  * @return {Object|null} Stylesheets sizes data or null.
  */
 export function calculateStylesheetStats( stylesheets, budgetBytes, budgetWarningPercentage ) {
-	if ( ! stylesheets || stylesheets?.errors || stylesheets?.length === 0 ) {
+	if ( ! stylesheets ) {
 		return null;
 	}
 

From 7bab544d50caa959a0919a88e298985e53041b7b Mon Sep 17 00:00:00 2001
From: Piotr Delawski <piotr.delawski@gmail.com>
Date: Wed, 14 Jul 2021 18:21:59 +0200
Subject: [PATCH 24/58] Add stylesheet details table (WIP)

---
 .../src/components/_amp-stylesheet-list.scss  |   4 -
 assets/src/components/icon/index.js           |   7 +-
 .../components/stylesheets-table/head.js      |  48 +++++++
 .../components/stylesheets-table/index.js     |  60 ++++++++
 .../components/stylesheets-table/row.js       | 135 ++++++++++++++++++
 assets/src/validated-url-page/stylesheets.js  |   2 +
 .../class-amp-validated-url-post-type.php     |   2 +-
 src/Validation/ValidatedUrlData.php           |  67 +++++++++
 8 files changed, 318 insertions(+), 7 deletions(-)
 create mode 100644 assets/src/validated-url-page/components/stylesheets-table/head.js
 create mode 100644 assets/src/validated-url-page/components/stylesheets-table/index.js
 create mode 100644 assets/src/validated-url-page/components/stylesheets-table/row.js

diff --git a/assets/css/src/components/_amp-stylesheet-list.scss b/assets/css/src/components/_amp-stylesheet-list.scss
index b1a776dfa33..2b04bc08775 100644
--- a/assets/css/src/components/_amp-stylesheet-list.scss
+++ b/assets/css/src/components/_amp-stylesheet-list.scss
@@ -42,10 +42,6 @@
 		text-align: center;
 	}
 
-	.column-percentage {
-		text-align: center;
-	}
-
 	.column-source {
 		width: 25%;
 	}
diff --git a/assets/src/components/icon/index.js b/assets/src/components/icon/index.js
index 424a99687d9..1bb4a5df530 100644
--- a/assets/src/components/icon/index.js
+++ b/assets/src/components/icon/index.js
@@ -107,7 +107,7 @@ StatusIcon.propTypes = {
  * @param {boolean} props.isValid Flag indicating the icon is for a valid status.
  * @param {boolean} props.isBoxed Whether the icon should be contained in a box.
  */
-export function ValidationStatusIcon( { isError, isWarning, isValid, isBoxed = false } ) {
+export function ValidationStatusIcon( { isError, isWarning, isValid, isBoxed = false, ...rest } ) {
 	let type;
 
 	if ( isError ) {
@@ -121,7 +121,10 @@ export function ValidationStatusIcon( { isError, isWarning, isValid, isBoxed = f
 	}
 
 	return (
-		<span className={ `amp-validation-status-icon amp-validation-status-icon--${ type } ${ isBoxed ? 'amp-validation-status-icon--boxed' : '' }` }>
+		<span
+			className={ `amp-validation-status-icon amp-validation-status-icon--${ type } ${ isBoxed ? 'amp-validation-status-icon--boxed' : '' }` }
+			{ ...rest }
+		>
 			{ isValid && <AMPValidIcon /> }
 			{ isWarning && <AMPWarningIcon /> }
 			{ isError && <AMPAlertIcon /> }
diff --git a/assets/src/validated-url-page/components/stylesheets-table/head.js b/assets/src/validated-url-page/components/stylesheets-table/head.js
new file mode 100644
index 00000000000..7082d545751
--- /dev/null
+++ b/assets/src/validated-url-page/components/stylesheets-table/head.js
@@ -0,0 +1,48 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+
+export default function StylesheetsTableHead() {
+	return (
+		<thead>
+			<tr>
+				<td className="column-stylesheet_expand">
+					<span className="screen-reader-text">
+						{ __( 'Expand/collapse', 'amp' ) }
+					</span>
+				</td>
+				<td className="column-stylesheet_order">
+					{ __( 'Order', 'amp' ) }
+				</td>
+				<td className="column-original_size">
+					{ __( 'Original', 'amp' ) }
+				</td>
+				<td className="column-minified">
+					{ __( 'Minified', 'amp' ) }
+				</td>
+				<td className="column-final_size">
+					{ __( 'Final', 'amp' ) }
+				</td>
+				<td
+					className="column-percentage"
+					title={ __( 'Stylesheet bytes of total CSS added to page', 'amp' ) }
+				>
+					{ __( 'Percent', 'amp' ) }
+				</td>
+				<td className="column-priority">
+					{ __( 'Priority', 'amp' ) }
+				</td>
+				<td className="column-stylesheet_included">
+					{ __( 'Included', 'amp' ) }
+				</td>
+				<td className="column-markup">
+					{ __( 'Markup', 'amp' ) }
+				</td>
+				<td className="column-sources_with_invalid_output">
+					{ __( 'Sources', 'amp' ) }
+				</td>
+			</tr>
+		</thead>
+	);
+}
diff --git a/assets/src/validated-url-page/components/stylesheets-table/index.js b/assets/src/validated-url-page/components/stylesheets-table/index.js
new file mode 100644
index 00000000000..ba51b1af253
--- /dev/null
+++ b/assets/src/validated-url-page/components/stylesheets-table/index.js
@@ -0,0 +1,60 @@
+/**
+ * External dependencies
+ */
+import PropTypes from 'prop-types';
+
+/**
+ * Internal dependencies
+ */
+import StylesheetsTableHead from './head';
+import StylesheetsTableRow from './row';
+
+export default function StylesheetsTable( { stylesheets, stats } ) {
+	const totalFinalSize = stats.included.finalSize + stats.excluded.finalSize;
+
+	return (
+		<table className="amp-stylesheet-list wp-list-table widefat fixed striped">
+			<StylesheetsTableHead />
+			<tbody>
+				{ stylesheets.map( ( stylesheet, index ) => (
+					<StylesheetsTableRow
+						key={ stylesheet.hash }
+						index={ index }
+						originalSize={ stylesheet.original_size }
+						finalSize={ stylesheet.final_size }
+						totalFinalSize={ totalFinalSize }
+						priority={ stylesheet.priority }
+						orignalTag={ stylesheet.original_tag }
+						orignalTagAbbr={ stylesheet.original_tag_abbr }
+						isIncluded={ stats.included.stylesheets.includes( stylesheet.hash ) }
+						isExcluded={ stats.excluded.stylesheets.includes( stylesheet.hash ) }
+						isExcessive={ stats.excessive.stylesheets.includes( stylesheet.hash ) }
+					/>
+				) ) }
+			</tbody>
+		</table>
+	);
+}
+StylesheetsTable.propTypes = {
+	stylesheets: PropTypes.arrayOf( PropTypes.shape( {
+		hash: PropTypes.string,
+		original_size: PropTypes.number,
+		final_size: PropTypes.number,
+		priority: PropTypes.number,
+		original_tag: PropTypes.string,
+		original_tag_abbr: PropTypes.string,
+	} ) ),
+	stats: PropTypes.shape( {
+		included: PropTypes.shape( {
+			finalSize: PropTypes.number,
+			stylesheets: PropTypes.array,
+		} ),
+		excluded: PropTypes.shape( {
+			finalSize: PropTypes.number,
+			stylesheets: PropTypes.array,
+		} ),
+		excessive: PropTypes.shape( {
+			stylesheets: PropTypes.array,
+		} ),
+	} ),
+};
diff --git a/assets/src/validated-url-page/components/stylesheets-table/row.js b/assets/src/validated-url-page/components/stylesheets-table/row.js
new file mode 100644
index 00000000000..b8f5716e9d9
--- /dev/null
+++ b/assets/src/validated-url-page/components/stylesheets-table/row.js
@@ -0,0 +1,135 @@
+/**
+ * External dependencies
+ */
+import PropTypes from 'prop-types';
+
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+import { Button } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import FormattedMemoryValue from '../../../components/formatted-memory-value';
+import { ValidationStatusIcon } from '../../../components/icon';
+
+export default function StylesheetsTableRow( {
+	finalSize,
+	index,
+	isExcessive,
+	isExcluded,
+	isIncluded,
+	originalSize,
+	orignalTag,
+	orignalTagAbbr,
+	priority,
+	totalFinalSize,
+} ) {
+	const [ expanded, setExpanded ] = useState( false );
+	const toggle = () => setExpanded( ( value ) => ! value );
+
+	const minifiedRatio = originalSize === 0 ? 1 : finalSize / originalSize;
+	const minifiedPercentage = `${ minifiedRatio <= 1 ? '-' : '+' }${ Math.abs( ( 1.0 - minifiedRatio ) * 100 ).toFixed( 1 ) }%`;
+
+	return (
+		<>
+			<tr className={ `stylesheet ${ index % 2 ? 'even' : 'odd' } ${ expanded ? 'expanded' : '' }` }>
+				<td className="column-stylesheet_expand">
+					<Button
+						icon={ expanded ? 'arrow-up-alt2' : 'arrow-down-alt2' }
+						onClick={ toggle }
+						showTooltip={ true }
+						label={ __( 'Expand/collapse', 'amp' ) }
+					/>
+				</td>
+				<td className="column-stylesheet_order">
+					{ index + 1 }
+				</td>
+				<td className="column-original_size">
+					<FormattedMemoryValue value={ originalSize } unit="B" />
+				</td>
+				<td className="column-minified">
+					{ minifiedPercentage }
+				</td>
+				<td className="column-final_size">
+					<FormattedMemoryValue value={ finalSize } unit="B" />
+				</td>
+				<td className="column-percentage">
+					{ `${ ( finalSize / totalFinalSize * 100 ).toFixed( 1 ) }%` }
+				</td>
+				<td className="column-priority">
+					{ priority }
+				</td>
+				<td className="column-stylesheet_included">
+					{ isIncluded && (
+						<ValidationStatusIcon
+							isValid
+							isBoxed
+							title={ __( 'Stylesheet included', 'amp' ) }
+						/>
+					) }
+					{ isExcluded && (
+						<ValidationStatusIcon
+							isError
+							isBoxed
+							title={ __( 'Stylesheet excluded due to exceeding CSS budget', 'amp' ) }
+						/>
+					) }
+					{ isExcessive && (
+						<ValidationStatusIcon
+							isWarning
+							isBoxed
+							title={ __( 'Stylesheet overruns CSS budget yet it is still included on page', 'amp' ) }
+						/>
+					) }
+				</td>
+				<td className="column-markup">
+					{ orignalTagAbbr !== orignalTag
+						? (
+							<abbr title={ orignalTag }>
+								<code>
+									{ orignalTagAbbr }
+								</code>
+							</abbr>
+						) : (
+							<code>
+								{ orignalTag }
+							</code>
+						) }
+				</td>
+				<td className="column-sources_with_invalid_output" />
+			</tr>
+			{ expanded && (
+				<tr className={ `stylesheet-details ${ index % 2 ? 'even' : 'odd' }` }>
+					<td colSpan="10">
+						<dl className="detailed">
+							<dt>
+								{ __( 'Original Markup', 'amp' ) }
+							</dt>
+							<dd>
+								<code className="stylesheet-origin-markup">
+									{ orignalTag }
+								</code>
+							</dd>
+						</dl>
+					</td>
+				</tr>
+			) }
+		</>
+	);
+}
+StylesheetsTableRow.propTypes = {
+	finalSize: PropTypes.number,
+	index: PropTypes.number,
+	isExcessive: PropTypes.bool,
+	isExcluded: PropTypes.bool,
+	isIncluded: PropTypes.bool,
+	originalSize: PropTypes.number,
+	orignalTag: PropTypes.string,
+	orignalTagAbbr: PropTypes.string,
+	priority: PropTypes.number,
+	totalFinalSize: PropTypes.number,
+};
diff --git a/assets/src/validated-url-page/stylesheets.js b/assets/src/validated-url-page/stylesheets.js
index 61b0579c895..ea822d82466 100644
--- a/assets/src/validated-url-page/stylesheets.js
+++ b/assets/src/validated-url-page/stylesheets.js
@@ -24,6 +24,7 @@ import {
 	NOTICE_TYPE_WARNING,
 } from '../components/amp-notice';
 import StylesheetsSummary from './components/stylesheets-summary';
+import StylesheetsTable from './components/stylesheets-table';
 
 /**
  * Stylesheets validation data.
@@ -72,6 +73,7 @@ export default function Stylesheets( {
 				</AMPNotice>
 			) }
 			<StylesheetsSummary stats={ stats } />
+			<StylesheetsTable stats={ stats } stylesheets={ stylesheets } />
 		</>
 	);
 }
diff --git a/includes/validation/class-amp-validated-url-post-type.php b/includes/validation/class-amp-validated-url-post-type.php
index 750fd8e2606..0581d28b04e 100644
--- a/includes/validation/class-amp-validated-url-post-type.php
+++ b/includes/validation/class-amp-validated-url-post-type.php
@@ -2038,7 +2038,7 @@ public static function enqueue_edit_post_screen_scripts() {
 		wp_enqueue_style(
 			self::AMP_VALIDATED_URL_PAGE_SCRIPT_HANDLE,
 			amp_get_asset_url( 'css/' . self::AMP_VALIDATED_URL_PAGE_SCRIPT_HANDLE . '.css' ),
-			[],
+			[ 'wp-components' ],
 			$version
 		);
 
diff --git a/src/Validation/ValidatedUrlData.php b/src/Validation/ValidatedUrlData.php
index 2a2a24baf61..ef20435e4bd 100644
--- a/src/Validation/ValidatedUrlData.php
+++ b/src/Validation/ValidatedUrlData.php
@@ -8,6 +8,7 @@
 
 namespace AmpProject\AmpWP\Validation;
 
+use AMP_Style_Sanitizer;
 use AMP_Validated_URL_Post_Type;
 use WP_Error;
 use WP_Post;
@@ -123,8 +124,74 @@ public function get_stylesheets() {
 			);
 		}
 
+		foreach ( $stylesheets as $key => $stylesheet ) {
+			$stylesheets[ $key ]['original_tag_abbr'] = $this->format_stylesheet_original_tag_abbreviation( $stylesheet['origin'] );
+			$stylesheets[ $key ]['original_tag']      = $this->format_stylesheet_original_tag( $stylesheet['element']['name'], $stylesheet['element']['attributes'] );
+		}
+
 		$this->stylesheets = $stylesheets;
 
 		return $this->stylesheets;
 	}
+
+	/**
+	 * Format stylesheet original tag abbreviation.
+	 *
+	 * @param string $origin Original element.
+	 *
+	 * @return string Formatted tag abbreviation.
+	 */
+	private function format_stylesheet_original_tag_abbreviation( $origin ) {
+		if ( 'link_element' === $origin ) {
+			return '<link …>'; // @todo Consider adding the basename of the CSS file.
+		}
+
+		if ( 'style_element' === $origin ) {
+			return '<style>';
+		}
+
+		if ( 'style_attribute' === $origin ) {
+			return 'style="…"';
+		}
+
+		return '?';
+	}
+
+	/**
+	 * Construct stylesheet original tag name based on the attributes.
+	 *
+	 * @param string $name       Original element name.
+	 * @param array  $attributes Original element attributes.
+	 *
+	 * @return string
+	 */
+	private function format_stylesheet_original_tag( $name, $attributes ) {
+		$result = '<' . $name;
+
+		if ( ! empty( $attributes ) ) {
+			if ( ! empty( $attributes['class'] ) ) {
+				$attributes['class'] = trim( preg_replace( '/(^|\s)amp-wp-\w+(\s|$)/', ' ', $attributes['class'] ) );
+				if ( empty( $attributes['class'] ) ) {
+					unset( $attributes['class'] );
+				}
+			}
+			if ( isset( $attributes[ AMP_Style_Sanitizer::ORIGINAL_STYLE_ATTRIBUTE_NAME ] ) ) {
+				$attributes['style'] = $attributes[ AMP_Style_Sanitizer::ORIGINAL_STYLE_ATTRIBUTE_NAME ];
+				unset( $attributes[ AMP_Style_Sanitizer::ORIGINAL_STYLE_ATTRIBUTE_NAME ] );
+			}
+			if ( ! empty( $attributes ) ) {
+				foreach ( $attributes as $attribute_name => $attribute_value ) {
+					if ( '' === $attribute_value ) {
+						$result .= ' ' . sprintf( '%s', esc_html( $attribute_name ) );
+					} else {
+						$result .= ' ' . sprintf( '%s="%s"', esc_html( $attribute_name ), esc_attr( $attribute_value ) );
+					}
+				}
+			}
+		}
+
+		$result .= '>';
+
+		return $result;
+	}
 }

From 546018baf125d35ecb2d255d1dd369b59518e525 Mon Sep 17 00:00:00 2001
From: Piotr Delawski <piotr.delawski@gmail.com>
Date: Wed, 14 Jul 2021 18:26:19 +0200
Subject: [PATCH 25/58] Update unit test

---
 .../validated-url-page/helpers/test/calculateStylesheetStats.js  | 1 -
 1 file changed, 1 deletion(-)

diff --git a/assets/src/validated-url-page/helpers/test/calculateStylesheetStats.js b/assets/src/validated-url-page/helpers/test/calculateStylesheetStats.js
index e54d4374876..4575e47896c 100644
--- a/assets/src/validated-url-page/helpers/test/calculateStylesheetStats.js
+++ b/assets/src/validated-url-page/helpers/test/calculateStylesheetStats.js
@@ -11,7 +11,6 @@ import {
 describe( 'calculateStylesheetStats', () => {
 	it( 'returns null if no stylesheets are provided', () => {
 		expect( calculateStylesheetStats() ).toBeNull();
-		expect( calculateStylesheetStats( [] ) ).toBeNull();
 	} );
 
 	it( 'returns correct sizes prior and after minification', () => {

From 8db73691580b1e0bbadd4609e96fa6235fcd747c Mon Sep 17 00:00:00 2001
From: Piotr Delawski <piotr.delawski@gmail.com>
Date: Fri, 16 Jul 2021 20:18:00 +0200
Subject: [PATCH 26/58] Add CSS code diff component to stylesheet details view

---
 assets/src/components/indentation/index.js    |  18 ++
 .../src/components/indentation/test/index.js  |  16 ++
 .../shaken-tokens-diff/declaration.js         |  68 +++++++
 .../shaken-tokens-diff/diff-line.js           |  25 +++
 .../components/shaken-tokens-diff/index.js    | 117 ++++++++++++
 .../components/shaken-tokens-diff/selector.js |  58 ++++++
 .../shaken-tokens-diff/test/index.js          | 178 ++++++++++++++++++
 .../components/stylesheets-table/index.js     |  20 +-
 .../components/stylesheets-table/row.js       |  14 ++
 9 files changed, 505 insertions(+), 9 deletions(-)
 create mode 100644 assets/src/components/indentation/index.js
 create mode 100644 assets/src/components/indentation/test/index.js
 create mode 100644 assets/src/components/shaken-tokens-diff/declaration.js
 create mode 100644 assets/src/components/shaken-tokens-diff/diff-line.js
 create mode 100644 assets/src/components/shaken-tokens-diff/index.js
 create mode 100644 assets/src/components/shaken-tokens-diff/selector.js
 create mode 100644 assets/src/components/shaken-tokens-diff/test/index.js

diff --git a/assets/src/components/indentation/index.js b/assets/src/components/indentation/index.js
new file mode 100644
index 00000000000..d1b49e8ff9b
--- /dev/null
+++ b/assets/src/components/indentation/index.js
@@ -0,0 +1,18 @@
+/**
+ * External dependencies
+ */
+import PropTypes from 'prop-types';
+
+const TAB = String.fromCharCode( 9 );
+const NBSP = String.fromCharCode( 160 );
+
+export default function Indentation( {
+	size = 0,
+	isTab = false,
+} ) {
+	return Array( size ).fill( isTab ? TAB : NBSP ).join( '' );
+}
+Indentation.propTypes = {
+	size: PropTypes.number,
+	isTab: PropTypes.bool,
+};
diff --git a/assets/src/components/indentation/test/index.js b/assets/src/components/indentation/test/index.js
new file mode 100644
index 00000000000..22ed81c8f6d
--- /dev/null
+++ b/assets/src/components/indentation/test/index.js
@@ -0,0 +1,16 @@
+/**
+ * Internal dependencies
+ */
+import Indentation from '..';
+
+const NBSP = String.fromCharCode( 160 );
+
+describe( 'Indentation', () => {
+	it( 'returns the specified number of non-breaking spaces', () => {
+		expect( Indentation( { size: 4 } ) ).toBe( NBSP + NBSP + NBSP + NBSP );
+	} );
+
+	it( 'returns the specified number of non-breaking tabs', () => {
+		expect( Indentation( { size: 2, isTab: true } ) ).toBe( '		' );
+	} );
+} );
diff --git a/assets/src/components/shaken-tokens-diff/declaration.js b/assets/src/components/shaken-tokens-diff/declaration.js
new file mode 100644
index 00000000000..fd3770d2b22
--- /dev/null
+++ b/assets/src/components/shaken-tokens-diff/declaration.js
@@ -0,0 +1,68 @@
+/**
+ * External dependencies
+ */
+import PropTypes from 'prop-types';
+
+/**
+ * Internal dependencies
+ */
+import Indentation from '../indentation';
+import DiffLine from './diff-line';
+import Selector from './selector';
+
+export default function Declaration( {
+	token,
+	indentation = 0,
+	isStyleAttribute,
+} ) {
+	const [ isKept, selectors, declaration ] = token;
+
+	if ( ! declaration && typeof selectors === 'string' ) {
+		return (
+			<span className="declaration-block">
+				<DiffLine
+					className="selector"
+					isIns={ isKept }
+					isDel={ ! isKept }
+				>
+					<Indentation size={ indentation } isTab />
+					{ selectors }
+				</DiffLine>
+			</span>
+		);
+	}
+
+	const selectorsList = Object.keys( selectors );
+
+	return (
+		<span className="declaration-block">
+			{ selectorsList.map( ( selector, index ) => (
+				<DiffLine
+					key={ selector }
+					className="selector"
+					isIns={ selectors[ selector ] }
+					isDel={ ! selectors[ selector ] }
+				>
+					<Indentation size={ indentation } isTab />
+					<Selector
+						selector={ selector }
+						isLast={ index === selectorsList.length - 1 }
+						isStyleAttribute={ isStyleAttribute }
+					/>
+				</DiffLine>
+			) ) }
+			<DiffLine
+				isIns={ isKept }
+				isDel={ ! isKept }
+			>
+				<Indentation size={ indentation + 1 } isTab />
+				{ `{ ${ declaration.join( '; ' ) } }` }
+			</DiffLine>
+		</span>
+	);
+}
+Declaration.propTypes = {
+	token: PropTypes.array,
+	indentation: PropTypes.number,
+	isStyleAttribute: PropTypes.bool,
+};
diff --git a/assets/src/components/shaken-tokens-diff/diff-line.js b/assets/src/components/shaken-tokens-diff/diff-line.js
new file mode 100644
index 00000000000..a83c3c8e7a4
--- /dev/null
+++ b/assets/src/components/shaken-tokens-diff/diff-line.js
@@ -0,0 +1,25 @@
+/**
+ * External dependencies
+ */
+import PropTypes from 'prop-types';
+
+export default function DiffLine( { isDel, isIns, children, ...rest } ) {
+	let TagName = 'span';
+
+	if ( isIns ) {
+		TagName = 'ins';
+	} else if ( isDel ) {
+		TagName = 'del';
+	}
+
+	return (
+		<TagName { ...rest }>
+			{ children }
+		</TagName>
+	);
+}
+DiffLine.propTypes = {
+	isDel: PropTypes.bool,
+	isIns: PropTypes.bool,
+	children: PropTypes.any,
+};
diff --git a/assets/src/components/shaken-tokens-diff/index.js b/assets/src/components/shaken-tokens-diff/index.js
new file mode 100644
index 00000000000..4a894ebd81e
--- /dev/null
+++ b/assets/src/components/shaken-tokens-diff/index.js
@@ -0,0 +1,117 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+import PropTypes from 'prop-types';
+
+/**
+ * WordPress dependencies
+ */
+import { useMemo, useState } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+import { FormToggle } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import Declaration from './declaration';
+
+export default function ShakenTokensDiff( {
+	tokens,
+	isStyleAttribute,
+} ) {
+	const [ showRemovedStyles, setShowRemovedStyles ] = useState( false );
+
+	const { tokensTree, insCount, delCount } = useMemo( () => {
+		if ( ! tokens || ! Array.isArray( tokens ) || tokens.length === 0 ) {
+			return {};
+		}
+
+		let _insCount = 0;
+		let _delCount = 0;
+
+		const _tokensTree = tokens.reduce( ( acc, token, index, source ) => {
+			let indentation = 0;
+
+			if ( index > 0 ) {
+				indentation = acc[ index - 1 ].props.indentation;
+
+				const previousSelector = source[ index - 1 ][ 1 ];
+
+				if ( typeof previousSelector === 'string' ) {
+					const openingBracesCount = previousSelector.split( '{' ).length;
+					const closingBracesCount = previousSelector.split( '}' ).length;
+
+					if ( openingBracesCount > closingBracesCount ) {
+						indentation++;
+					} else if ( openingBracesCount < closingBracesCount ) {
+						indentation--;
+					}
+				}
+			}
+
+			const [ isKept ] = token;
+			if ( isKept ) {
+				_insCount++;
+			} else {
+				_delCount++;
+			}
+
+			return [
+				...acc,
+				<Declaration
+					key={ index }
+					token={ token }
+					indentation={ indentation }
+					isStyleAttribute={ isStyleAttribute }
+				/>,
+			];
+		}, [] );
+
+		return {
+			tokensTree: _tokensTree,
+			insCount: _insCount,
+			delCount: _delCount,
+		};
+	}, [ tokens ] );
+
+	return (
+		<>
+			{ insCount === 0 && (
+				<p>
+					<em>
+						{ delCount === 0
+							? __( 'The stylesheet was empty after minification (removal of comments and whitespace).', 'amp' )
+							: __( 'All of the stylesheet was removed during tree-shaking.', 'amp' )
+						}
+					</em>
+				</p>
+			) }
+			{ ( insCount !== 0 || delCount !== 0 ) && (
+				<>
+					{ delCount > 0 && (
+						<p>
+							<FormToggle
+								checked={ showRemovedStyles }
+								onChange={ () => setShowRemovedStyles( ( value ) => ! value ) }
+							/>
+							{ ' ' }
+							{ __( 'Show styles removed during tree-shaking', 'amp' ) }
+						</p>
+					) }
+					<code
+						className={ classnames( 'shaken-stylesheet', {
+							'removed-styles-shown': showRemovedStyles,
+						} ) }
+					>
+						{ tokensTree }
+					</code>
+				</>
+			) }
+		</>
+	);
+}
+ShakenTokensDiff.propTypes = {
+	tokens: PropTypes.array,
+	isStyleAttribute: PropTypes.bool,
+};
diff --git a/assets/src/components/shaken-tokens-diff/selector.js b/assets/src/components/shaken-tokens-diff/selector.js
new file mode 100644
index 00000000000..4ee413a9a89
--- /dev/null
+++ b/assets/src/components/shaken-tokens-diff/selector.js
@@ -0,0 +1,58 @@
+/**
+ * External dependencies
+ */
+import PropTypes from 'prop-types';
+
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+
+export default function Selector( { selector, isLast, isStyleAttribute } ) {
+	let specificityBumper = null;
+	let ampWpSelector = null;
+
+	const specificityBumperMatch = selector.match( /(:root|html)(:not\(#_\))+/ );
+	if ( specificityBumperMatch ) {
+		specificityBumper = (
+			<abbr
+				title={ isStyleAttribute
+					? __( 'Selector generated to increase specificity for important properties so that the CSS cascade is preserved. AMP does not allow important properties.', 'amp' )
+					: __( 'Selector generated to increase specificity so the cascade is preserved for properties moved from style attribute to CSS rules in style[amp-custom].', 'amp' )
+				}
+			>
+				{ specificityBumperMatch[ 0 ] }
+			</abbr>
+		);
+
+		selector = selector.substring( specificityBumperMatch[ 0 ].length );
+	}
+
+	if ( isStyleAttribute ) {
+		const ampWpSelectorMatch = selector.match( /\.amp-wp-\w+/ );
+
+		if ( ampWpSelectorMatch ) {
+			ampWpSelector = (
+				<abbr title={ __( 'Class name generated during extraction of inline style to style[amp-custom].', 'amp' ) }>
+					{ ampWpSelectorMatch[ 0 ] }
+				</abbr>
+			);
+
+			selector = selector.substring( ampWpSelectorMatch[ 0 ].length );
+		}
+	}
+
+	return (
+		<>
+			{ specificityBumper }
+			{ ampWpSelector }
+			{ selector }
+			{ ! isLast ? ',' : '' }
+		</>
+	);
+}
+Selector.propTypes = {
+	selector: PropTypes.string,
+	isLast: PropTypes.bool,
+	isStyleAttribute: PropTypes.bool,
+};
diff --git a/assets/src/components/shaken-tokens-diff/test/index.js b/assets/src/components/shaken-tokens-diff/test/index.js
new file mode 100644
index 00000000000..afa30d4b772
--- /dev/null
+++ b/assets/src/components/shaken-tokens-diff/test/index.js
@@ -0,0 +1,178 @@
+/**
+ * WordPress dependencies
+ */
+import { render } from '@wordpress/element';
+
+/**
+ * External dependencies
+ */
+import { act } from 'react-dom/test-utils';
+
+/**
+ * Internal dependencies
+ */
+import ShakenTokensDiff from '..';
+import Declaration from '../declaration';
+
+let container;
+
+describe( 'ShakenTokensDiff', () => {
+	beforeEach( () => {
+		container = document.createElement( 'div' );
+		document.body.appendChild( container );
+	} );
+
+	afterEach( () => {
+		document.body.removeChild( container );
+		container = null;
+	} );
+
+	it( 'renders nothing if no tokens are provided', () => {
+		act( () => {
+			render(
+				<ShakenTokensDiff tokens={ null } />,
+				container,
+			);
+		} );
+
+		expect( container.textContent ).toBe( '' );
+	} );
+
+	describe( 'Declaration', () => {
+		it( 'renders inserted token', () => {
+			act( () => {
+				render(
+					<Declaration
+						token={ [
+							true,
+							{
+								'.foo': true,
+								'.bar': false,
+							},
+							[
+								'margin:0',
+								'padding:0',
+							],
+						] }
+					/>,
+					container,
+				);
+			} );
+
+			expect( container.querySelector( '.declaration-block' ) ).not.toBeNull();
+
+			expect( container.querySelectorAll( 'ins' ) ).toHaveLength( 2 );
+			expect( container.querySelectorAll( 'del' ) ).toHaveLength( 1 );
+
+			expect( container.querySelector( 'ins.selector' ) ).not.toBeNull();
+			expect( container.querySelector( 'ins.selector' ).textContent ).toBe( '.foo,' );
+
+			expect( container.querySelector( 'del.selector' ) ).not.toBeNull();
+			expect( container.querySelector( 'del.selector' ).textContent ).toBe( '.bar' );
+
+			expect( container.querySelector( 'ins:last-child' ).textContent ).toBe( '	{ margin:0; padding:0 }' );
+		} );
+
+		it( 'renders removed token', () => {
+			act( () => {
+				render(
+					<Declaration
+						token={ [
+							false,
+							{
+								html: false,
+							},
+							[
+								'-o-object-fit:contain',
+							],
+						] }
+					/>,
+					container,
+				);
+			} );
+
+			expect( container.querySelector( '.declaration-block' ) ).not.toBeNull();
+			expect( container.querySelectorAll( 'del' ) ).toHaveLength( 2 );
+			expect( container.querySelectorAll( 'del.selector' ) ).toHaveLength( 1 );
+			expect( container.querySelector( 'del.selector' ).textContent ).toBe( 'html' );
+			expect( container.querySelector( 'del:last-child' ).textContent ).toBe( '	{ -o-object-fit:contain }' );
+		} );
+
+		it( 'renders a removed selector without a declaration', () => {
+			act( () => {
+				render(
+					<Declaration
+						token={ [
+							false,
+							'@supports ((position:-webkit-sticky) or (position:sticky)){',
+						] }
+					/>,
+					container,
+				);
+			} );
+
+			expect( container.querySelector( '.declaration-block' ) ).not.toBeNull();
+			expect( container.querySelectorAll( 'del.selector' ) ).toHaveLength( 1 );
+			expect( container.querySelector( 'del.selector' ).textContent ).toBe( '@supports ((position:-webkit-sticky) or (position:sticky)){' );
+		} );
+
+		it( 'respects the indentation level', () => {
+			act( () => {
+				render(
+					<Declaration
+						indentation={ 2 }
+						token={ [
+							false,
+							{
+								html: false,
+							},
+							[
+								'-o-object-fit:contain',
+							],
+						] }
+					/>,
+					container,
+				);
+			} );
+
+			expect( container.querySelector( 'del.selector' ).textContent ).toBe( '		html' );
+			expect( container.querySelector( 'del:last-child' ).textContent ).toBe( '			{ -o-object-fit:contain }' );
+		} );
+
+		it( 'adds help text as ABBR elements to selectors', () => {
+			const token = [
+				true,
+				{
+					':root:not(#_):not(#_) .foo': true,
+					'html:not(#_) .amp-wp-bar': true,
+				},
+				[
+					'display:block',
+				],
+			];
+
+			act( () => {
+				render(
+					<Declaration isStyleAttribute={ false } token={ token } />,
+					container,
+				);
+			} );
+			expect( container.querySelector( 'ins.selector:nth-child(1)' ).textContent ).toBe( ':root:not(#_):not(#_) .foo,' );
+			expect( container.querySelector( 'ins.selector:nth-child(2)' ).textContent ).toBe( 'html:not(#_) .amp-wp-bar' );
+			expect( container.querySelector( 'ins.selector:nth-child(1) abbr' ) ).not.toBeNull();
+			expect( container.querySelector( 'ins.selector:nth-child(1) abbr' ).title ).toBe( 'Selector generated to increase specificity so the cascade is preserved for properties moved from style attribute to CSS rules in style[amp-custom].' );
+
+			expect( container.querySelectorAll( 'ins.selector:nth-child(2) abbr' ) ).toHaveLength( 1 );
+
+			act( () => {
+				render(
+					<Declaration isStyleAttribute={ true } token={ token } />,
+					container,
+				);
+			} );
+			expect( container.querySelector( 'ins.selector:nth-child(1) abbr' ).title ).toBe( 'Selector generated to increase specificity for important properties so that the CSS cascade is preserved. AMP does not allow important properties.' );
+			expect( container.querySelector( 'ins.selector:nth-child(2) abbr:nth-child(2)' ) ).not.toBeNull();
+			expect( container.querySelector( 'ins.selector:nth-child(2) abbr:nth-child(2)' ).title ).toBe( 'Class name generated during extraction of inline style to style[amp-custom].' );
+		} );
+	} );
+} );
diff --git a/assets/src/validated-url-page/components/stylesheets-table/index.js b/assets/src/validated-url-page/components/stylesheets-table/index.js
index ba51b1af253..2d49279e784 100644
--- a/assets/src/validated-url-page/components/stylesheets-table/index.js
+++ b/assets/src/validated-url-page/components/stylesheets-table/index.js
@@ -18,17 +18,18 @@ export default function StylesheetsTable( { stylesheets, stats } ) {
 			<tbody>
 				{ stylesheets.map( ( stylesheet, index ) => (
 					<StylesheetsTableRow
-						key={ stylesheet.hash }
+						finalSize={ stylesheet.final_size }
 						index={ index }
+						isExcessive={ stats.excessive.stylesheets.includes( stylesheet.hash ) }
+						isExcluded={ stats.excluded.stylesheets.includes( stylesheet.hash ) }
+						isIncluded={ stats.included.stylesheets.includes( stylesheet.hash ) }
+						key={ stylesheet.hash }
 						originalSize={ stylesheet.original_size }
-						finalSize={ stylesheet.final_size }
-						totalFinalSize={ totalFinalSize }
-						priority={ stylesheet.priority }
 						orignalTag={ stylesheet.original_tag }
 						orignalTagAbbr={ stylesheet.original_tag_abbr }
-						isIncluded={ stats.included.stylesheets.includes( stylesheet.hash ) }
-						isExcluded={ stats.excluded.stylesheets.includes( stylesheet.hash ) }
-						isExcessive={ stats.excessive.stylesheets.includes( stylesheet.hash ) }
+						priority={ stylesheet.priority }
+						shakenTokens={ stylesheet.shaken_tokens }
+						totalFinalSize={ totalFinalSize }
 					/>
 				) ) }
 			</tbody>
@@ -37,12 +38,13 @@ export default function StylesheetsTable( { stylesheets, stats } ) {
 }
 StylesheetsTable.propTypes = {
 	stylesheets: PropTypes.arrayOf( PropTypes.shape( {
+		final_size: PropTypes.number,
 		hash: PropTypes.string,
 		original_size: PropTypes.number,
-		final_size: PropTypes.number,
-		priority: PropTypes.number,
 		original_tag: PropTypes.string,
 		original_tag_abbr: PropTypes.string,
+		priority: PropTypes.number,
+		shaken_tokens: PropTypes.array,
 	} ) ),
 	stats: PropTypes.shape( {
 		included: PropTypes.shape( {
diff --git a/assets/src/validated-url-page/components/stylesheets-table/row.js b/assets/src/validated-url-page/components/stylesheets-table/row.js
index b8f5716e9d9..53e32230224 100644
--- a/assets/src/validated-url-page/components/stylesheets-table/row.js
+++ b/assets/src/validated-url-page/components/stylesheets-table/row.js
@@ -15,6 +15,7 @@ import { Button } from '@wordpress/components';
  */
 import FormattedMemoryValue from '../../../components/formatted-memory-value';
 import { ValidationStatusIcon } from '../../../components/icon';
+import ShakenTokensDiff from '../../../components/shaken-tokens-diff';
 
 export default function StylesheetsTableRow( {
 	finalSize,
@@ -22,10 +23,12 @@ export default function StylesheetsTableRow( {
 	isExcessive,
 	isExcluded,
 	isIncluded,
+	origin,
 	originalSize,
 	orignalTag,
 	orignalTagAbbr,
 	priority,
+	shakenTokens,
 	totalFinalSize,
 } ) {
 	const [ expanded, setExpanded ] = useState( false );
@@ -114,6 +117,15 @@ export default function StylesheetsTableRow( {
 									{ orignalTag }
 								</code>
 							</dd>
+							<dt>
+								{ __( 'CSS Code', 'amp' ) }
+							</dt>
+							<dd>
+								<ShakenTokensDiff
+									tokens={ shakenTokens }
+									isStyleAttribute={ origin === 'style_attribute' }
+								/>
+							</dd>
 						</dl>
 					</td>
 				</tr>
@@ -127,9 +139,11 @@ StylesheetsTableRow.propTypes = {
 	isExcessive: PropTypes.bool,
 	isExcluded: PropTypes.bool,
 	isIncluded: PropTypes.bool,
+	origin: PropTypes.string,
 	originalSize: PropTypes.number,
 	orignalTag: PropTypes.string,
 	orignalTagAbbr: PropTypes.string,
 	priority: PropTypes.number,
+	shakenTokens: PropTypes.array,
 	totalFinalSize: PropTypes.number,
 };

From 2fbca5de45c8ae9de54a7a1e1db78368ca3ee982 Mon Sep 17 00:00:00 2001
From: Piotr Delawski <piotr.delawski@gmail.com>
Date: Wed, 21 Jul 2021 13:25:39 +0200
Subject: [PATCH 27/58] Add missing dependency to `useMemo`

---
 assets/src/components/shaken-tokens-diff/index.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/assets/src/components/shaken-tokens-diff/index.js b/assets/src/components/shaken-tokens-diff/index.js
index 4a894ebd81e..4c35cc13040 100644
--- a/assets/src/components/shaken-tokens-diff/index.js
+++ b/assets/src/components/shaken-tokens-diff/index.js
@@ -73,7 +73,7 @@ export default function ShakenTokensDiff( {
 			insCount: _insCount,
 			delCount: _delCount,
 		};
-	}, [ tokens ] );
+	}, [ isStyleAttribute, tokens ] );
 
 	return (
 		<>

From 62fd84c473f703bb98c0cd866d0721db91d51385 Mon Sep 17 00:00:00 2001
From: Piotr Delawski <piotr.delawski@gmail.com>
Date: Wed, 21 Jul 2021 13:33:34 +0200
Subject: [PATCH 28/58] Let child component test `origin` prop instead of
 parent

---
 assets/src/components/shaken-tokens-diff/declaration.js   | 6 +++---
 assets/src/components/shaken-tokens-diff/index.js         | 8 ++++----
 assets/src/components/shaken-tokens-diff/selector.js      | 6 ++++--
 assets/src/components/shaken-tokens-diff/test/index.js    | 4 ++--
 .../components/stylesheets-table/row.js                   | 2 +-
 5 files changed, 14 insertions(+), 12 deletions(-)

diff --git a/assets/src/components/shaken-tokens-diff/declaration.js b/assets/src/components/shaken-tokens-diff/declaration.js
index fd3770d2b22..5b737f31f16 100644
--- a/assets/src/components/shaken-tokens-diff/declaration.js
+++ b/assets/src/components/shaken-tokens-diff/declaration.js
@@ -13,7 +13,7 @@ import Selector from './selector';
 export default function Declaration( {
 	token,
 	indentation = 0,
-	isStyleAttribute,
+	origin,
 } ) {
 	const [ isKept, selectors, declaration ] = token;
 
@@ -47,7 +47,7 @@ export default function Declaration( {
 					<Selector
 						selector={ selector }
 						isLast={ index === selectorsList.length - 1 }
-						isStyleAttribute={ isStyleAttribute }
+						origin={ origin }
 					/>
 				</DiffLine>
 			) ) }
@@ -64,5 +64,5 @@ export default function Declaration( {
 Declaration.propTypes = {
 	token: PropTypes.array,
 	indentation: PropTypes.number,
-	isStyleAttribute: PropTypes.bool,
+	origin: PropTypes.string,
 };
diff --git a/assets/src/components/shaken-tokens-diff/index.js b/assets/src/components/shaken-tokens-diff/index.js
index 4c35cc13040..da47027322f 100644
--- a/assets/src/components/shaken-tokens-diff/index.js
+++ b/assets/src/components/shaken-tokens-diff/index.js
@@ -17,8 +17,8 @@ import { FormToggle } from '@wordpress/components';
 import Declaration from './declaration';
 
 export default function ShakenTokensDiff( {
+	origin,
 	tokens,
-	isStyleAttribute,
 } ) {
 	const [ showRemovedStyles, setShowRemovedStyles ] = useState( false );
 
@@ -63,7 +63,7 @@ export default function ShakenTokensDiff( {
 					key={ index }
 					token={ token }
 					indentation={ indentation }
-					isStyleAttribute={ isStyleAttribute }
+					origin={ origin }
 				/>,
 			];
 		}, [] );
@@ -73,7 +73,7 @@ export default function ShakenTokensDiff( {
 			insCount: _insCount,
 			delCount: _delCount,
 		};
-	}, [ isStyleAttribute, tokens ] );
+	}, [ origin, tokens ] );
 
 	return (
 		<>
@@ -112,6 +112,6 @@ export default function ShakenTokensDiff( {
 	);
 }
 ShakenTokensDiff.propTypes = {
+	origin: PropTypes.string,
 	tokens: PropTypes.array,
-	isStyleAttribute: PropTypes.bool,
 };
diff --git a/assets/src/components/shaken-tokens-diff/selector.js b/assets/src/components/shaken-tokens-diff/selector.js
index 4ee413a9a89..65059d4cc62 100644
--- a/assets/src/components/shaken-tokens-diff/selector.js
+++ b/assets/src/components/shaken-tokens-diff/selector.js
@@ -8,11 +8,13 @@ import PropTypes from 'prop-types';
  */
 import { __ } from '@wordpress/i18n';
 
-export default function Selector( { selector, isLast, isStyleAttribute } ) {
+export default function Selector( { selector, isLast, origin } ) {
 	let specificityBumper = null;
 	let ampWpSelector = null;
 
+	const isStyleAttribute = origin === 'style_attribute';
 	const specificityBumperMatch = selector.match( /(:root|html)(:not\(#_\))+/ );
+
 	if ( specificityBumperMatch ) {
 		specificityBumper = (
 			<abbr
@@ -54,5 +56,5 @@ export default function Selector( { selector, isLast, isStyleAttribute } ) {
 Selector.propTypes = {
 	selector: PropTypes.string,
 	isLast: PropTypes.bool,
-	isStyleAttribute: PropTypes.bool,
+	origin: PropTypes.string,
 };
diff --git a/assets/src/components/shaken-tokens-diff/test/index.js b/assets/src/components/shaken-tokens-diff/test/index.js
index afa30d4b772..0000c55cec3 100644
--- a/assets/src/components/shaken-tokens-diff/test/index.js
+++ b/assets/src/components/shaken-tokens-diff/test/index.js
@@ -153,7 +153,7 @@ describe( 'ShakenTokensDiff', () => {
 
 			act( () => {
 				render(
-					<Declaration isStyleAttribute={ false } token={ token } />,
+					<Declaration origin="link_element" token={ token } />,
 					container,
 				);
 			} );
@@ -166,7 +166,7 @@ describe( 'ShakenTokensDiff', () => {
 
 			act( () => {
 				render(
-					<Declaration isStyleAttribute={ true } token={ token } />,
+					<Declaration origin="style_attribute" token={ token } />,
 					container,
 				);
 			} );
diff --git a/assets/src/validated-url-page/components/stylesheets-table/row.js b/assets/src/validated-url-page/components/stylesheets-table/row.js
index 53e32230224..33f27e71ade 100644
--- a/assets/src/validated-url-page/components/stylesheets-table/row.js
+++ b/assets/src/validated-url-page/components/stylesheets-table/row.js
@@ -123,7 +123,7 @@ export default function StylesheetsTableRow( {
 							<dd>
 								<ShakenTokensDiff
 									tokens={ shakenTokens }
-									isStyleAttribute={ origin === 'style_attribute' }
+									origin={ origin }
 								/>
 							</dd>
 						</dl>

From 723d95d80ce192c9d4315db36b0ffc9262ea9788 Mon Sep 17 00:00:00 2001
From: Piotr Delawski <piotr.delawski@gmail.com>
Date: Wed, 21 Jul 2021 17:05:29 +0200
Subject: [PATCH 29/58] Migrate
 `AMP_Validation_Error_Taxonomy::summarize_sources` method to JS

---
 assets/src/utils/summarize-sources/index.js   |  44 ++++++++
 .../src/utils/summarize-sources/test/index.js | 106 ++++++++++++++++++
 2 files changed, 150 insertions(+)
 create mode 100644 assets/src/utils/summarize-sources/index.js
 create mode 100644 assets/src/utils/summarize-sources/test/index.js

diff --git a/assets/src/utils/summarize-sources/index.js b/assets/src/utils/summarize-sources/index.js
new file mode 100644
index 00000000000..5736036d694
--- /dev/null
+++ b/assets/src/utils/summarize-sources/index.js
@@ -0,0 +1,44 @@
+/**
+ * Summarize sources.
+ *
+ * @param {Array} sources Sources.
+ * @return {Object} Summarized (de-duped) sources.
+ */
+export default function summarizeSources( sources ) {
+	if ( ! sources || ! Array.isArray( sources ) || sources.length === 0 ) {
+		return null;
+	}
+
+	const summarizedSources = sources.reduce( ( acc, source ) => {
+		const { hook, type, name, embed, block_name: blockName } = source;
+
+		if ( hook ) {
+			acc.hook = hook;
+		}
+
+		if ( type && name && ! acc[ type ]?.includes( name ) ) {
+			acc[ type ] = [
+				...acc[ type ] ?? [],
+				name,
+			];
+		} else if ( embed ) {
+			acc.embed = true;
+		}
+
+		if ( blockName ) {
+			acc.blocks = [
+				...acc.blocks ?? [],
+				blockName,
+			];
+		}
+
+		return acc;
+	}, {} );
+
+	// Remove core if there is a plugin or theme.
+	if ( summarizedSources?.core && ( summarizedSources?.theme || summarizedSources?.plugin ) ) {
+		delete summarizedSources.core;
+	}
+
+	return summarizedSources;
+}
diff --git a/assets/src/utils/summarize-sources/test/index.js b/assets/src/utils/summarize-sources/test/index.js
new file mode 100644
index 00000000000..a36815a70b3
--- /dev/null
+++ b/assets/src/utils/summarize-sources/test/index.js
@@ -0,0 +1,106 @@
+/**
+ * Internal dependencies
+ */
+import summarizeSources from '..';
+
+describe( 'summarizeSources', () => {
+	it( 'renders null if no sources array is provided', () => {
+		const result = summarizeSources();
+		expect( result ).toBeNull();
+	} );
+
+	it( 'returns correct sources summary', () => {
+		const result = summarizeSources( [
+			{
+				hook: 'wp_head',
+				type: 'plugin',
+				name: 'foo',
+			},
+			{
+				type: 'theme',
+				name: 'bar',
+			},
+			{
+				type: 'plugin',
+				name: 'baz',
+			},
+			{
+				hook: 'init',
+				type: 'plugin',
+				block_name: 'foobar',
+			},
+			{
+				embed: 'bazbar',
+			},
+		] );
+		expect( result ).toStrictEqual( {
+			hook: 'init',
+			plugin: [ 'foo', 'baz' ],
+			theme: [ 'bar' ],
+			blocks: [ 'foobar' ],
+			embed: true,
+		} );
+	} );
+
+	it( 'does not return core if there is a plugin or theme', () => {
+		const result = summarizeSources( [
+			{
+				type: 'plugin',
+				name: 'foo',
+			},
+			{
+				type: 'core',
+				name: 'bar',
+			},
+		] );
+		expect( result ).toStrictEqual( {
+			plugin: [ 'foo' ],
+		} );
+	} );
+
+	it( 'returns core if there is no plugin or theme', () => {
+		const result = summarizeSources( [
+			{
+				type: 'core',
+				name: 'baz',
+			},
+		] );
+		expect( result ).toStrictEqual( {
+			core: [ 'baz' ],
+		} );
+	} );
+
+	it( 'returns de-duped themes and plugins', () => {
+		const result = summarizeSources( [
+			{
+				type: 'plugin',
+				name: 'foo',
+			},
+			{
+				type: 'plugin',
+				name: 'foo',
+			},
+			{
+				type: 'mu-plugin',
+				name: 'bar',
+			},
+			{
+				type: 'mu-plugin',
+				name: 'bar',
+			},
+			{
+				type: 'theme',
+				name: 'baz',
+			},
+			{
+				type: 'theme',
+				name: 'baz',
+			},
+		] );
+		expect( result ).toStrictEqual( {
+			plugin: [ 'foo' ],
+			'mu-plugin': [ 'bar' ],
+			theme: [ 'baz' ],
+		} );
+	} );
+} );

From ede4e2ee48874f6521509320e2cfdf2636c296ef Mon Sep 17 00:00:00 2001
From: Piotr Delawski <piotr.delawski@gmail.com>
Date: Wed, 21 Jul 2021 20:17:42 +0200
Subject: [PATCH 30/58] Add `SourceLabel` component

---
 assets/src/components/source-label/index.js   | 112 +++++++++++
 .../src/components/source-label/test/index.js | 187 ++++++++++++++++++
 2 files changed, 299 insertions(+)
 create mode 100644 assets/src/components/source-label/index.js
 create mode 100644 assets/src/components/source-label/test/index.js

diff --git a/assets/src/components/source-label/index.js b/assets/src/components/source-label/index.js
new file mode 100644
index 00000000000..f99134653e4
--- /dev/null
+++ b/assets/src/components/source-label/index.js
@@ -0,0 +1,112 @@
+/**
+ * External dependencies
+ */
+import PropTypes from 'prop-types';
+
+/**
+ * WordPress dependencies
+ */
+import { __, sprintf } from '@wordpress/i18n';
+import { Dashicon } from '@wordpress/components';
+
+export default function SourceLabel( {
+	source,
+	isCodeOutput,
+	isPlugin,
+	isMuPlugin,
+	isTheme,
+	isCore,
+	isEmbed,
+	isHook,
+	isBlock,
+} ) {
+	const sources = Array.isArray( source ) ? source : [ source ];
+
+	let icon;
+	let title;
+	let singleTitle = sources?.[ 0 ];
+
+	if ( isPlugin ) {
+		icon = 'admin-plugins';
+		title = __( 'Plugins', 'amp' );
+	} else if ( isMuPlugin ) {
+		icon = 'admin-plugins';
+		title = __( 'Must-Use Plugins', 'amp' );
+	} else if ( isTheme ) {
+		icon = 'admin-appearance';
+	} else if ( isCore ) {
+		icon = 'wordpress-alt';
+		title = __( 'Other', 'amp' );
+	} else if ( isEmbed ) {
+		icon = 'wordpress-alt';
+		title = __( 'Embed', 'amp' );
+	} else if ( isHook ) {
+		switch ( sources[ 0 ] ) {
+			case 'the_content':
+				icon = 'edit';
+				singleTitle = __( 'Content', 'amp' );
+				break;
+			case 'the_excerpt':
+				icon = 'edit';
+				singleTitle = __( 'Excerpt', 'amp' );
+				break;
+			default:
+				icon = 'wordpress-alt';
+				singleTitle = sprintf(
+					// translators: placeholder is the hook name.
+					__( 'Hook: %s', 'amp' ), sources[ 0 ],
+				);
+		}
+	} else if ( isBlock ) {
+		icon = 'edit';
+	}
+
+	if ( ! icon ) {
+		return null;
+	}
+
+	if ( ! sources || sources.length === 1 ) {
+		return (
+			<strong className="source">
+				<Dashicon icon={ icon } />
+				{ isCodeOutput ? (
+					<code>
+						{ singleTitle ?? title }
+					</code>
+				) : singleTitle ?? title }
+			</strong>
+		);
+	}
+
+	return (
+		<details className="source">
+			<summary className="details-attributes__summary">
+				<strong className="source">
+					<Dashicon icon={ icon } />
+					{ title }
+					{ ` (${ sources.length })` }
+				</strong>
+			</summary>
+			{ sources.map( ( item ) => (
+				<div key={ item }>
+					{ isCodeOutput ? (
+						<code>
+							{ item }
+						</code>
+					) : item }
+				</div>
+			) ) }
+		</details>
+	);
+}
+SourceLabel.propTypes = {
+	source: PropTypes.oneOfType( [ PropTypes.string, PropTypes.array ] ),
+	isCodeOutput: PropTypes.bool,
+	isPlugin: PropTypes.bool,
+	isMuPlugin: PropTypes.bool,
+	isTheme: PropTypes.bool,
+	isCore: PropTypes.bool,
+	isEmbed: PropTypes.bool,
+	isHook: PropTypes.bool,
+	isBlock: PropTypes.bool,
+};
diff --git a/assets/src/components/source-label/test/index.js b/assets/src/components/source-label/test/index.js
new file mode 100644
index 00000000000..766d219d5d5
--- /dev/null
+++ b/assets/src/components/source-label/test/index.js
@@ -0,0 +1,187 @@
+/**
+ * WordPress dependencies
+ */
+import { render } from '@wordpress/element';
+
+/**
+ * External dependencies
+ */
+import { act } from 'react-dom/test-utils';
+
+/**
+ * Internal dependencies
+ */
+import SourceLabel from '..';
+
+let container;
+
+describe( 'SourceLabel', () => {
+	beforeEach( () => {
+		container = document.createElement( 'div' );
+		document.body.appendChild( container );
+	} );
+
+	afterEach( () => {
+		document.body.removeChild( container );
+		container = null;
+	} );
+
+	it( 'renders nothing if no source type is provided', () => {
+		act( () => {
+			render(
+				<SourceLabel source={ [ 'a' ] } />,
+				container,
+			);
+		} );
+
+		expect( container.textContent ).toBe( '' );
+	} );
+
+	it( 'renders a single source', () => {
+		act( () => {
+			render(
+				<SourceLabel isPlugin={ true } source="foo" />,
+				container,
+			);
+		} );
+
+		expect( container.querySelector( 'details' ) ).toBeNull();
+		expect( container.querySelectorAll( '.source' ) ).toHaveLength( 1 );
+		expect( container.textContent ).toBe( 'foo' );
+	} );
+
+	it( 'renders multiple sources', () => {
+		act( () => {
+			render(
+				<SourceLabel isPlugin={ true } source={ [ 'foo', 'bar', 'baz' ] } />,
+				container,
+			);
+		} );
+
+		expect( container.querySelectorAll( 'details' ) ).toHaveLength( 1 );
+		expect( container.querySelector( 'details .source' ).textContent ).toContain( '(3)' );
+
+		const sourceContainers = [ ...container.querySelectorAll( 'details > div' ) ];
+		expect( sourceContainers ).toHaveLength( 3 );
+		expect( sourceContainers[ 0 ].textContent ).toBe( 'foo' );
+		expect( sourceContainers[ 1 ].textContent ).toBe( 'bar' );
+		expect( sourceContainers[ 2 ].textContent ).toBe( 'baz' );
+	} );
+
+	it( 'renders a source name inside a <code> element', () => {
+		act( () => {
+			render(
+				<SourceLabel
+					isBlock={ true }
+					isCodeOutput={ true }
+					source="foo/bar"
+				/>,
+				container,
+			);
+		} );
+
+		expect( container.querySelector( 'details' ) ).toBeNull();
+		expect( container.querySelector( '.source > code' ) ).not.toBeNull();
+		expect( container.querySelector( '.source > code' ).textContent ).toBe( 'foo/bar' );
+	} );
+
+	it.each( [
+		[
+			'Some Plugin',
+			{
+				isPlugin: true,
+				source: [ 'Some Plugin' ],
+			},
+			'.dashicons-admin-plugins',
+		],
+		[
+			'Plugins',
+			{
+				isPlugin: true,
+				source: [ 'a', 'b' ],
+			},
+			'.dashicons-admin-plugins',
+		],
+		[
+			'Must-Use Plugins',
+			{
+				isMuPlugin: true,
+				source: [ 'a', 'b' ],
+			},
+			'.dashicons-admin-plugins',
+		],
+		[
+			'Some Theme',
+			{
+				isTheme: true,
+				source: 'Some Theme',
+			},
+			'.dashicons-admin-appearance',
+		],
+		[
+			'wp-includes',
+			{
+				isCore: true,
+				source: 'wp-includes',
+			},
+			'.dashicons-wordpress-alt',
+		],
+		[
+			'Other',
+			{
+				isCore: true,
+				source: [ 'a', 'b' ],
+			},
+			'.dashicons-wordpress-alt',
+		],
+		[
+			'Embed',
+			{
+				isEmbed: true,
+			},
+			'.dashicons-wordpress-alt',
+		],
+		[
+			'Content',
+			{
+				isHook: true,
+				source: 'the_content',
+			},
+			'.dashicons-edit',
+		],
+		[
+			'Excerpt',
+			{
+				isHook: true,
+				source: 'the_excerpt',
+			},
+			'.dashicons-edit',
+		],
+		[
+			'Hook: foo_bar',
+			{
+				isHook: true,
+				source: 'foo_bar',
+			},
+			'.dashicons-wordpress-alt',
+		],
+		[
+			'Some Block',
+			{
+				isBlock: true,
+				source: 'Some Block',
+			},
+			'.dashicons-edit',
+		],
+	] )( 'renders sources for: %s', ( title, props, icon ) => {
+		act( () => {
+			render(
+				<SourceLabel { ...props } />,
+				container,
+			);
+		} );
+
+		expect( container.querySelector( icon ) ).not.toBeNull();
+		expect( container.textContent ).toContain( title );
+	} );
+} );

From 24ec238eefe7f75b48dc1c702a99065fb94d5b51 Mon Sep 17 00:00:00 2001
From: Piotr Delawski <piotr.delawski@gmail.com>
Date: Thu, 22 Jul 2021 14:58:46 +0200
Subject: [PATCH 31/58] Bake in business logic into `summarizeSources` function

---
 assets/src/utils/summarize-sources/index.js   | 50 ++++++++++-
 .../src/utils/summarize-sources/test/index.js | 82 +++++++++++++++----
 2 files changed, 114 insertions(+), 18 deletions(-)

diff --git a/assets/src/utils/summarize-sources/index.js b/assets/src/utils/summarize-sources/index.js
index 5736036d694..7578e49191a 100644
--- a/assets/src/utils/summarize-sources/index.js
+++ b/assets/src/utils/summarize-sources/index.js
@@ -35,10 +35,52 @@ export default function summarizeSources( sources ) {
 		return acc;
 	}, {} );
 
-	// Remove core if there is a plugin or theme.
-	if ( summarizedSources?.core && ( summarizedSources?.theme || summarizedSources?.plugin ) ) {
-		delete summarizedSources.core;
+	const {
+		plugin,
+		'mu-plugin': muPlugin,
+		theme,
+		core,
+		embed,
+		blocks,
+		hook,
+	} = summarizedSources;
+
+	// Return only plugins and themes if they are present.
+	if ( plugin || muPlugin || theme ) {
+		const result = {};
+
+		if ( plugin ) {
+			result.plugin = plugin;
+		}
+		if ( muPlugin ) {
+			result.muPlugin = muPlugin;
+		}
+		if ( theme && ! embed ) {
+			result.theme = theme;
+		}
+
+		return result;
+	}
+
+	// Return core if there are no plugins or themes.
+	if ( core ) {
+		return { core };
+	}
+
+	// Return embed if there is no plugin, theme or core.
+	if ( embed ) {
+		return { embed };
+	}
+
+	// Return block if there is no plugin, theme, core or embed.
+	if ( blocks ) {
+		return { blocks };
+	}
+
+	// Return hook if there is no plugin, theme, core, embed or blocks.
+	if ( hook ) {
+		return { hook };
 	}
 
-	return summarizedSources;
+	return {};
 }
diff --git a/assets/src/utils/summarize-sources/test/index.js b/assets/src/utils/summarize-sources/test/index.js
index a36815a70b3..0f513b6d2ed 100644
--- a/assets/src/utils/summarize-sources/test/index.js
+++ b/assets/src/utils/summarize-sources/test/index.js
@@ -9,7 +9,7 @@ describe( 'summarizeSources', () => {
 		expect( result ).toBeNull();
 	} );
 
-	it( 'returns correct sources summary', () => {
+	it( 'returns plugin and theme, and skips everything else', () => {
 		const result = summarizeSources( [
 			{
 				hook: 'wp_head',
@@ -21,7 +21,7 @@ describe( 'summarizeSources', () => {
 				name: 'bar',
 			},
 			{
-				type: 'plugin',
+				type: 'mu-plugin',
 				name: 'baz',
 			},
 			{
@@ -29,32 +29,40 @@ describe( 'summarizeSources', () => {
 				type: 'plugin',
 				block_name: 'foobar',
 			},
-			{
-				embed: 'bazbar',
-			},
 		] );
 		expect( result ).toStrictEqual( {
-			hook: 'init',
-			plugin: [ 'foo', 'baz' ],
+			plugin: [ 'foo' ],
+			muPlugin: [ 'baz' ],
 			theme: [ 'bar' ],
-			blocks: [ 'foobar' ],
-			embed: true,
 		} );
 	} );
 
-	it( 'does not return core if there is a plugin or theme', () => {
+	it( 'does not return theme if embed is present', () => {
 		const result = summarizeSources( [
 			{
+				hook: 'wp_head',
 				type: 'plugin',
 				name: 'foo',
 			},
 			{
-				type: 'core',
+				type: 'theme',
 				name: 'bar',
 			},
+			{
+				type: 'plugin',
+				name: 'baz',
+			},
+			{
+				hook: 'init',
+				type: 'plugin',
+				block_name: 'foobar',
+			},
+			{
+				embed: 'bazbar',
+			},
 		] );
 		expect( result ).toStrictEqual( {
-			plugin: [ 'foo' ],
+			plugin: [ 'foo', 'baz' ],
 		} );
 	} );
 
@@ -64,9 +72,55 @@ describe( 'summarizeSources', () => {
 				type: 'core',
 				name: 'baz',
 			},
+			{
+				embed: 'bazbar',
+			},
+			{
+				type: 'core',
+				name: 'bar',
+			},
+		] );
+		expect( result ).toStrictEqual( {
+			core: [ 'baz', 'bar' ],
+		} );
+	} );
+
+	it( 'returns embed if there is no plugin, theme or core', () => {
+		const result = summarizeSources( [
+			{
+				embed: true,
+			},
+			{
+				block_name: 'foobar',
+			},
+		] );
+		expect( result ).toStrictEqual( {
+			embed: true,
+		} );
+	} );
+
+	it( 'returns blocks if there is no plugin, theme, core or embed', () => {
+		const result = summarizeSources( [
+			{
+				block_name: 'foobar',
+			},
+			{
+				block_name: 'bazbar',
+			},
+		] );
+		expect( result ).toStrictEqual( {
+			blocks: [ 'foobar', 'bazbar' ],
+		} );
+	} );
+
+	it( 'returns hook if there is no plugin, theme, core, embed or blocks', () => {
+		const result = summarizeSources( [
+			{
+				hook: 'baz',
+			},
 		] );
 		expect( result ).toStrictEqual( {
-			core: [ 'baz' ],
+			hook: 'baz',
 		} );
 	} );
 
@@ -99,7 +153,7 @@ describe( 'summarizeSources', () => {
 		] );
 		expect( result ).toStrictEqual( {
 			plugin: [ 'foo' ],
-			'mu-plugin': [ 'bar' ],
+			muPlugin: [ 'bar' ],
 			theme: [ 'baz' ],
 		} );
 	} );

From 21d2c7a9c0b71e17b5593f76e04520448118232c Mon Sep 17 00:00:00 2001
From: Piotr Delawski <piotr.delawski@gmail.com>
Date: Thu, 22 Jul 2021 14:59:27 +0200
Subject: [PATCH 32/58] Add sources summary column content

---
 .../src/components/sources-summary/index.js   | 57 +++++++++++++++++++
 .../components/sources-summary/test/index.js  | 39 +++++++++++++
 .../components/stylesheets-table/index.js     |  2 +
 .../components/stylesheets-table/row.js       |  7 ++-
 4 files changed, 104 insertions(+), 1 deletion(-)
 create mode 100644 assets/src/components/sources-summary/index.js
 create mode 100644 assets/src/components/sources-summary/test/index.js

diff --git a/assets/src/components/sources-summary/index.js b/assets/src/components/sources-summary/index.js
new file mode 100644
index 00000000000..111a78d5ee2
--- /dev/null
+++ b/assets/src/components/sources-summary/index.js
@@ -0,0 +1,57 @@
+/**
+ * External dependencies
+ */
+import PropTypes from 'prop-types';
+
+/**
+ * Internal dependencies
+ */
+import summarizeSources from '../../utils/summarize-sources';
+import SourceLabel from '../source-label';
+
+export default function SourcesSummary( { sources } ) {
+	if ( ! sources || ! Array.isArray( sources ) || sources.length === 0 ) {
+		return null;
+	}
+
+	const {
+		plugin,
+		muPlugin,
+		theme,
+		core,
+		embed,
+		blocks,
+		hook,
+	} = summarizeSources( sources );
+
+	return (
+		<>
+			{ plugin && <SourceLabel source={ plugin } isPlugin={ true } /> }
+			{ muPlugin && <SourceLabel source={ muPlugin } isMuPlugin={ true } /> }
+			{ theme && <SourceLabel source={ theme } isTheme={ true } /> }
+			{ core && <SourceLabel source={ core } isCore={ true } /> }
+			{ embed && <SourceLabel source={ embed } isEmbed={ true } /> }
+			{ blocks && <SourceLabel source={ blocks } isBlock={ true } /> }
+			{ hook && <SourceLabel source={ hook } isHook={ true } /> }
+		</>
+	);
+}
+SourcesSummary.propTypes = {
+	sources: PropTypes.arrayOf(
+		PropTypes.shape( {
+			type: PropTypes.string,
+			name: PropTypes.string,
+			file: PropTypes.string,
+			line: PropTypes.number,
+			function: PropTypes.string,
+			hook: PropTypes.string,
+			priority: PropTypes.number,
+			dependency_type: PropTypes.string,
+			handle: PropTypes.string,
+			text: PropTypes.string,
+			extra_key: PropTypes.string,
+			embed: PropTypes.string,
+			block_name: PropTypes.string,
+		} ),
+	).isRequired,
+};
diff --git a/assets/src/components/sources-summary/test/index.js b/assets/src/components/sources-summary/test/index.js
new file mode 100644
index 00000000000..8af3695a836
--- /dev/null
+++ b/assets/src/components/sources-summary/test/index.js
@@ -0,0 +1,39 @@
+/**
+ * WordPress dependencies
+ */
+import { render } from '@wordpress/element';
+
+/**
+ * External dependencies
+ */
+import { act } from 'react-dom/test-utils';
+
+/**
+ * Internal dependencies
+ */
+import SourcesSummary from '..';
+
+let container;
+
+describe( 'SourcesSummary', () => {
+	beforeEach( () => {
+		container = document.createElement( 'div' );
+		document.body.appendChild( container );
+	} );
+
+	afterEach( () => {
+		document.body.removeChild( container );
+		container = null;
+	} );
+
+	it( 'renders nothing if no sources array is provided', () => {
+		act( () => {
+			render(
+				<SourcesSummary sources={ [] } />,
+				container,
+			);
+		} );
+
+		expect( container.textContent ).toBe( '' );
+	} );
+} );
diff --git a/assets/src/validated-url-page/components/stylesheets-table/index.js b/assets/src/validated-url-page/components/stylesheets-table/index.js
index 2d49279e784..b3a30f230b1 100644
--- a/assets/src/validated-url-page/components/stylesheets-table/index.js
+++ b/assets/src/validated-url-page/components/stylesheets-table/index.js
@@ -29,6 +29,7 @@ export default function StylesheetsTable( { stylesheets, stats } ) {
 						orignalTagAbbr={ stylesheet.original_tag_abbr }
 						priority={ stylesheet.priority }
 						shakenTokens={ stylesheet.shaken_tokens }
+						sources={ stylesheet.sources }
 						totalFinalSize={ totalFinalSize }
 					/>
 				) ) }
@@ -45,6 +46,7 @@ StylesheetsTable.propTypes = {
 		original_tag_abbr: PropTypes.string,
 		priority: PropTypes.number,
 		shaken_tokens: PropTypes.array,
+		sources: PropTypes.array,
 	} ) ),
 	stats: PropTypes.shape( {
 		included: PropTypes.shape( {
diff --git a/assets/src/validated-url-page/components/stylesheets-table/row.js b/assets/src/validated-url-page/components/stylesheets-table/row.js
index 33f27e71ade..1cb488f5962 100644
--- a/assets/src/validated-url-page/components/stylesheets-table/row.js
+++ b/assets/src/validated-url-page/components/stylesheets-table/row.js
@@ -16,6 +16,7 @@ import { Button } from '@wordpress/components';
 import FormattedMemoryValue from '../../../components/formatted-memory-value';
 import { ValidationStatusIcon } from '../../../components/icon';
 import ShakenTokensDiff from '../../../components/shaken-tokens-diff';
+import SourcesSummary from '../../../components/sources-summary';
 
 export default function StylesheetsTableRow( {
 	finalSize,
@@ -29,6 +30,7 @@ export default function StylesheetsTableRow( {
 	orignalTagAbbr,
 	priority,
 	shakenTokens,
+	sources,
 	totalFinalSize,
 } ) {
 	const [ expanded, setExpanded ] = useState( false );
@@ -103,7 +105,9 @@ export default function StylesheetsTableRow( {
 							</code>
 						) }
 				</td>
-				<td className="column-sources_with_invalid_output" />
+				<td className="column-sources_with_invalid_output">
+					<SourcesSummary sources={ sources } />
+				</td>
 			</tr>
 			{ expanded && (
 				<tr className={ `stylesheet-details ${ index % 2 ? 'even' : 'odd' }` }>
@@ -145,5 +149,6 @@ StylesheetsTableRow.propTypes = {
 	orignalTagAbbr: PropTypes.string,
 	priority: PropTypes.number,
 	shakenTokens: PropTypes.array,
+	sources: PropTypes.array,
 	totalFinalSize: PropTypes.number,
 };

From 08e631043e83015dc5872f43ea413751d00e2ae2 Mon Sep 17 00:00:00 2001
From: Piotr Delawski <piotr.delawski@gmail.com>
Date: Fri, 23 Jul 2021 17:41:10 +0200
Subject: [PATCH 33/58] Expose validated environment data in REST API and use
 it in Sources

---
 assets/src/components/sources-summary/index.js      | 13 +++++++++++--
 assets/src/utils/summarize-sources/index.js         |  4 ++--
 .../components/stylesheets-table/index.js           | 11 ++++++++++-
 .../components/stylesheets-table/row.js             |  7 ++++++-
 assets/src/validated-url-page/index.js              |  1 +
 assets/src/validated-url-page/stylesheets.js        |  9 ++++++++-
 src/Validation/URLValidationRESTController.php      |  1 +
 src/Validation/ValidatedUrlData.php                 |  9 +++++++++
 8 files changed, 48 insertions(+), 7 deletions(-)

diff --git a/assets/src/components/sources-summary/index.js b/assets/src/components/sources-summary/index.js
index 111a78d5ee2..61662d88a5c 100644
--- a/assets/src/components/sources-summary/index.js
+++ b/assets/src/components/sources-summary/index.js
@@ -9,11 +9,19 @@ import PropTypes from 'prop-types';
 import summarizeSources from '../../utils/summarize-sources';
 import SourceLabel from '../source-label';
 
-export default function SourcesSummary( { sources } ) {
+export default function SourcesSummary( { sources, validatedTheme } ) {
 	if ( ! sources || ! Array.isArray( sources ) || sources.length === 0 ) {
 		return null;
 	}
 
+	const summarizedSources = summarizeSources( sources );
+
+	if ( ! summarizedSources && validatedTheme ) {
+		return (
+			<SourceLabel source={ validatedTheme } isTheme={ true } />
+		);
+	}
+
 	const {
 		plugin,
 		muPlugin,
@@ -22,7 +30,7 @@ export default function SourcesSummary( { sources } ) {
 		embed,
 		blocks,
 		hook,
-	} = summarizeSources( sources );
+	} = summarizedSources;
 
 	return (
 		<>
@@ -54,4 +62,5 @@ SourcesSummary.propTypes = {
 			block_name: PropTypes.string,
 		} ),
 	).isRequired,
+	validatedTheme: PropTypes.string,
 };
diff --git a/assets/src/utils/summarize-sources/index.js b/assets/src/utils/summarize-sources/index.js
index 7578e49191a..cd263268cbe 100644
--- a/assets/src/utils/summarize-sources/index.js
+++ b/assets/src/utils/summarize-sources/index.js
@@ -2,7 +2,7 @@
  * Summarize sources.
  *
  * @param {Array} sources Sources.
- * @return {Object} Summarized (de-duped) sources.
+ * @return {Object|null} Summarized (de-duped) sources.
  */
 export default function summarizeSources( sources ) {
 	if ( ! sources || ! Array.isArray( sources ) || sources.length === 0 ) {
@@ -82,5 +82,5 @@ export default function summarizeSources( sources ) {
 		return { hook };
 	}
 
-	return {};
+	return null;
 }
diff --git a/assets/src/validated-url-page/components/stylesheets-table/index.js b/assets/src/validated-url-page/components/stylesheets-table/index.js
index b3a30f230b1..d143b674a8c 100644
--- a/assets/src/validated-url-page/components/stylesheets-table/index.js
+++ b/assets/src/validated-url-page/components/stylesheets-table/index.js
@@ -9,8 +9,13 @@ import PropTypes from 'prop-types';
 import StylesheetsTableHead from './head';
 import StylesheetsTableRow from './row';
 
-export default function StylesheetsTable( { stylesheets, stats } ) {
+export default function StylesheetsTable( {
+	environment,
+	stylesheets,
+	stats,
+} ) {
 	const totalFinalSize = stats.included.finalSize + stats.excluded.finalSize;
+	const validatedTheme = environment?.theme ? Object.keys( environment.theme )[ 0 ] : '';
 
 	return (
 		<table className="amp-stylesheet-list wp-list-table widefat fixed striped">
@@ -31,6 +36,7 @@ export default function StylesheetsTable( { stylesheets, stats } ) {
 						shakenTokens={ stylesheet.shaken_tokens }
 						sources={ stylesheet.sources }
 						totalFinalSize={ totalFinalSize }
+						validatedTheme={ validatedTheme }
 					/>
 				) ) }
 			</tbody>
@@ -38,6 +44,9 @@ export default function StylesheetsTable( { stylesheets, stats } ) {
 	);
 }
 StylesheetsTable.propTypes = {
+	environment: PropTypes.shape( {
+		theme: PropTypes.object,
+	} ),
 	stylesheets: PropTypes.arrayOf( PropTypes.shape( {
 		final_size: PropTypes.number,
 		hash: PropTypes.string,
diff --git a/assets/src/validated-url-page/components/stylesheets-table/row.js b/assets/src/validated-url-page/components/stylesheets-table/row.js
index 1cb488f5962..e373e7737af 100644
--- a/assets/src/validated-url-page/components/stylesheets-table/row.js
+++ b/assets/src/validated-url-page/components/stylesheets-table/row.js
@@ -32,6 +32,7 @@ export default function StylesheetsTableRow( {
 	shakenTokens,
 	sources,
 	totalFinalSize,
+	validatedTheme,
 } ) {
 	const [ expanded, setExpanded ] = useState( false );
 	const toggle = () => setExpanded( ( value ) => ! value );
@@ -106,7 +107,10 @@ export default function StylesheetsTableRow( {
 						) }
 				</td>
 				<td className="column-sources_with_invalid_output">
-					<SourcesSummary sources={ sources } />
+					<SourcesSummary
+						sources={ sources }
+						validatedTheme={ validatedTheme }
+					/>
 				</td>
 			</tr>
 			{ expanded && (
@@ -151,4 +155,5 @@ StylesheetsTableRow.propTypes = {
 	shakenTokens: PropTypes.array,
 	sources: PropTypes.array,
 	totalFinalSize: PropTypes.number,
+	validatedTheme: PropTypes.string,
 };
diff --git a/assets/src/validated-url-page/index.js b/assets/src/validated-url-page/index.js
index 69fcef11bd1..3e65b2050ff 100644
--- a/assets/src/validated-url-page/index.js
+++ b/assets/src/validated-url-page/index.js
@@ -68,6 +68,7 @@ function Root() {
 
 	return (
 		<Stylesheets
+			environment={ validatedUrl.environment }
 			fetching={ fetchingValidatedUrl }
 			stats={ stylesheetStats }
 			stylesheets={ validatedUrl.stylesheets }
diff --git a/assets/src/validated-url-page/stylesheets.js b/assets/src/validated-url-page/stylesheets.js
index ea822d82466..65f25206414 100644
--- a/assets/src/validated-url-page/stylesheets.js
+++ b/assets/src/validated-url-page/stylesheets.js
@@ -30,11 +30,13 @@ import StylesheetsTable from './components/stylesheets-table';
  * Stylesheets validation data.
  *
  * @param {Object} props Component props.
+ * @param {Object} props.environment Validated environment.
  * @param {boolean} props.fetching Flag indicating if stylesheets data is being fetched.
  * @param {Object} props.stats Stylesheets stats object.
  * @param {Object|Array} props.stylesheets Array of stylesheets details or an object containing errors.
  */
 export default function Stylesheets( {
+	environment,
 	fetching,
 	stats,
 	stylesheets,
@@ -73,11 +75,16 @@ export default function Stylesheets( {
 				</AMPNotice>
 			) }
 			<StylesheetsSummary stats={ stats } />
-			<StylesheetsTable stats={ stats } stylesheets={ stylesheets } />
+			<StylesheetsTable
+				environment={ environment }
+				stats={ stats }
+				stylesheets={ stylesheets }
+			/>
 		</>
 	);
 }
 Stylesheets.propTypes = {
+	environment: PropTypes.object,
 	fetching: PropTypes.bool,
 	stats: PropTypes.object,
 	stylesheets: PropTypes.oneOfType( [
diff --git a/src/Validation/URLValidationRESTController.php b/src/Validation/URLValidationRESTController.php
index b793dfc1624..31573739ff9 100644
--- a/src/Validation/URLValidationRESTController.php
+++ b/src/Validation/URLValidationRESTController.php
@@ -343,6 +343,7 @@ public function get_validated_url( $request ) {
 			'date'        => $validated_url_data->get_date(),
 			'author'      => $validated_url_data->get_author(),
 			'stylesheets' => $validated_url_data->get_stylesheets(),
+			'environment' => $validated_url_data->get_environment(),
 		];
 
 		return rest_ensure_response( $this->filter_response_by_context( $data, $request['context'] ) );
diff --git a/src/Validation/ValidatedUrlData.php b/src/Validation/ValidatedUrlData.php
index ef20435e4bd..358143758ad 100644
--- a/src/Validation/ValidatedUrlData.php
+++ b/src/Validation/ValidatedUrlData.php
@@ -134,6 +134,15 @@ public function get_stylesheets() {
 		return $this->stylesheets;
 	}
 
+	/**
+	 * Get validated environment information.
+	 *
+	 * @return array
+	 */
+	public function get_environment() {
+		return get_post_meta( $this->get_id(), AMP_Validated_URL_Post_Type::VALIDATED_ENVIRONMENT_POST_META_KEY, true );
+	}
+
 	/**
 	 * Format stylesheet original tag abbreviation.
 	 *

From 1136aad1b9a1c5ac21f178ae8e9991f2d0af8a30 Mon Sep 17 00:00:00 2001
From: Piotr Delawski <piotr.delawski@gmail.com>
Date: Fri, 23 Jul 2021 17:49:21 +0200
Subject: [PATCH 34/58] Use validated URL context directly in child component

---
 assets/src/validated-url-page/index.js       | 26 ++---------
 assets/src/validated-url-page/stylesheets.js | 45 +++++++-------------
 2 files changed, 19 insertions(+), 52 deletions(-)

diff --git a/assets/src/validated-url-page/index.js b/assets/src/validated-url-page/index.js
index 3e65b2050ff..1d8968ec620 100644
--- a/assets/src/validated-url-page/index.js
+++ b/assets/src/validated-url-page/index.js
@@ -14,7 +14,7 @@ import {
  * WordPress dependencies
  */
 import domReady from '@wordpress/dom-ready';
-import { render, useContext } from '@wordpress/element';
+import { render } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -22,7 +22,7 @@ import { render, useContext } from '@wordpress/element';
 import { ErrorBoundary } from '../components/error-boundary';
 import { ErrorContextProvider } from '../components/error-context-provider';
 import { ErrorScreen } from '../components/error-screen';
-import { ValidatedUrl, ValidatedUrlProvider } from '../components/validated-url-provider';
+import { ValidatedUrlProvider } from '../components/validated-url-provider';
 import Stylesheets from './stylesheets';
 
 let errorHandler;
@@ -56,26 +56,6 @@ Providers.propTypes = {
 	children: PropTypes.any,
 };
 
-/**
- * Validated URL page application root.
- */
-function Root() {
-	const {
-		fetchingValidatedUrl,
-		stylesheetStats,
-		validatedUrl,
-	} = useContext( ValidatedUrl );
-
-	return (
-		<Stylesheets
-			environment={ validatedUrl.environment }
-			fetching={ fetchingValidatedUrl }
-			stats={ stylesheetStats }
-			stylesheets={ validatedUrl.stylesheets }
-		/>
-	);
-}
-
 domReady( () => {
 	const root = document.getElementById( APP_ROOT_ID );
 
@@ -94,7 +74,7 @@ domReady( () => {
 
 	render(
 		<Providers>
-			<Root appRoot={ root } />
+			<Stylesheets appRoot={ root } />
 		</Providers>,
 		root,
 	);
diff --git a/assets/src/validated-url-page/stylesheets.js b/assets/src/validated-url-page/stylesheets.js
index 65f25206414..5a5a26bc762 100644
--- a/assets/src/validated-url-page/stylesheets.js
+++ b/assets/src/validated-url-page/stylesheets.js
@@ -1,7 +1,6 @@
 /**
  * External dependencies
  */
-import PropTypes from 'prop-types';
 import {
 	HAS_REQUIRED_PHP_CSS_PARSER,
 	RECHECK_URL,
@@ -11,7 +10,7 @@ import {
  * WordPress dependencies
  */
 import { __, sprintf } from '@wordpress/i18n';
-import { RawHTML } from '@wordpress/element';
+import { RawHTML, useContext } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -23,25 +22,24 @@ import {
 	NOTICE_TYPE_INFO,
 	NOTICE_TYPE_WARNING,
 } from '../components/amp-notice';
+import { ValidatedUrl } from '../components/validated-url-provider';
 import StylesheetsSummary from './components/stylesheets-summary';
 import StylesheetsTable from './components/stylesheets-table';
 
 /**
  * Stylesheets validation data.
- *
- * @param {Object} props Component props.
- * @param {Object} props.environment Validated environment.
- * @param {boolean} props.fetching Flag indicating if stylesheets data is being fetched.
- * @param {Object} props.stats Stylesheets stats object.
- * @param {Object|Array} props.stylesheets Array of stylesheets details or an object containing errors.
  */
-export default function Stylesheets( {
-	environment,
-	fetching,
-	stats,
-	stylesheets,
-} ) {
-	if ( fetching !== false ) {
+export default function Stylesheets() {
+	const {
+		fetchingValidatedUrl,
+		stylesheetStats,
+		validatedUrl: {
+			environment,
+			stylesheets,
+		},
+	} = useContext( ValidatedUrl );
+
+	if ( fetchingValidatedUrl !== false ) {
 		return <Loading />;
 	}
 
@@ -59,7 +57,7 @@ export default function Stylesheets( {
 		);
 	}
 
-	if ( stylesheets?.errors?.amp_validated_url_stylesheets_missing || stylesheets?.length === 0 || ! stats ) {
+	if ( stylesheets?.errors?.amp_validated_url_stylesheets_missing || stylesheets?.length === 0 || ! stylesheetStats ) {
 		return (
 			<AMPNotice size={ NOTICE_SIZE_LARGE } type={ NOTICE_TYPE_INFO }>
 				{ __( 'Unable to retrieve stylesheets data for this URL.', 'amp' ) }
@@ -74,23 +72,12 @@ export default function Stylesheets( {
 					{ __( 'AMP CSS processing is limited because a conflicting version of PHP-CSS-Parser has been loaded by another plugin or theme. Tree shaking is not available.', 'amp' ) }
 				</AMPNotice>
 			) }
-			<StylesheetsSummary stats={ stats } />
+			<StylesheetsSummary stats={ stylesheetStats } />
 			<StylesheetsTable
 				environment={ environment }
-				stats={ stats }
+				stats={ stylesheetStats }
 				stylesheets={ stylesheets }
 			/>
 		</>
 	);
 }
-Stylesheets.propTypes = {
-	environment: PropTypes.object,
-	fetching: PropTypes.bool,
-	stats: PropTypes.object,
-	stylesheets: PropTypes.oneOfType( [
-		PropTypes.arrayOf( PropTypes.object ),
-		PropTypes.shape( {
-			errors: PropTypes.object,
-		} ),
-	] ),
-};

From fe3e04100925c5e694e7331f50d2ac0ac6239828 Mon Sep 17 00:00:00 2001
From: Piotr Delawski <piotr.delawski@gmail.com>
Date: Fri, 23 Jul 2021 17:56:27 +0200
Subject: [PATCH 35/58] Use better name for validated URL context provider

---
 .../index.js                                                | 5 ++---
 assets/src/validated-url-page/index.js                      | 6 +++---
 assets/src/validated-url-page/stylesheets.js                | 2 +-
 3 files changed, 6 insertions(+), 7 deletions(-)
 rename assets/src/components/{validated-url-provider => validated-url-context-provider}/index.js (97%)

diff --git a/assets/src/components/validated-url-provider/index.js b/assets/src/components/validated-url-context-provider/index.js
similarity index 97%
rename from assets/src/components/validated-url-provider/index.js
rename to assets/src/components/validated-url-context-provider/index.js
index 1706d8cf4da..cc9a719313f 100644
--- a/assets/src/components/validated-url-provider/index.js
+++ b/assets/src/components/validated-url-context-provider/index.js
@@ -35,7 +35,7 @@ export const ValidatedUrl = createContext();
  * @param {number} props.postId Validated URL post ID.
  * @param {string} props.validatedUrlsRestPath REST endpoint to retrieve validated URL data.
  */
-export function ValidatedUrlProvider( {
+export function ValidatedUrlContextProvider( {
 	children,
 	cssBudgetBytes,
 	cssBudgetWarningPercentage,
@@ -126,8 +126,7 @@ export function ValidatedUrlProvider( {
 		</ValidatedUrl.Provider>
 	);
 }
-
-ValidatedUrlProvider.propTypes = {
+ValidatedUrlContextProvider.propTypes = {
 	children: PropTypes.any,
 	cssBudgetBytes: PropTypes.number,
 	cssBudgetWarningPercentage: PropTypes.number,
diff --git a/assets/src/validated-url-page/index.js b/assets/src/validated-url-page/index.js
index 1d8968ec620..9dae431239b 100644
--- a/assets/src/validated-url-page/index.js
+++ b/assets/src/validated-url-page/index.js
@@ -22,7 +22,7 @@ import { render } from '@wordpress/element';
 import { ErrorBoundary } from '../components/error-boundary';
 import { ErrorContextProvider } from '../components/error-context-provider';
 import { ErrorScreen } from '../components/error-screen';
-import { ValidatedUrlProvider } from '../components/validated-url-provider';
+import { ValidatedUrlContextProvider } from '../components/validated-url-context-provider';
 import Stylesheets from './stylesheets';
 
 let errorHandler;
@@ -39,7 +39,7 @@ function Providers( { children } ) {
 	return (
 		<ErrorContextProvider>
 			<ErrorBoundary>
-				<ValidatedUrlProvider
+				<ValidatedUrlContextProvider
 					cssBudgetBytes={ Number( CSS_BUDGET_BYTES ) }
 					cssBudgetWarningPercentage={ Number( CSS_BUDGET_WARNING_PERCENTAGE ) }
 					hasErrorBoundary={ true }
@@ -47,7 +47,7 @@ function Providers( { children } ) {
 					validatedUrlsRestPath={ VALIDATED_URLS_REST_PATH }
 				>
 					{ children }
-				</ValidatedUrlProvider>
+				</ValidatedUrlContextProvider>
 			</ErrorBoundary>
 		</ErrorContextProvider>
 	);
diff --git a/assets/src/validated-url-page/stylesheets.js b/assets/src/validated-url-page/stylesheets.js
index 5a5a26bc762..d37293dc3e4 100644
--- a/assets/src/validated-url-page/stylesheets.js
+++ b/assets/src/validated-url-page/stylesheets.js
@@ -22,7 +22,7 @@ import {
 	NOTICE_TYPE_INFO,
 	NOTICE_TYPE_WARNING,
 } from '../components/amp-notice';
-import { ValidatedUrl } from '../components/validated-url-provider';
+import { ValidatedUrl } from '../components/validated-url-context-provider';
 import StylesheetsSummary from './components/stylesheets-summary';
 import StylesheetsTable from './components/stylesheets-table';
 

From eec19a6e873eef3cbd57d1a421064c2d19a90499 Mon Sep 17 00:00:00 2001
From: Piotr Delawski <piotr.delawski@gmail.com>
Date: Fri, 23 Jul 2021 18:07:30 +0200
Subject: [PATCH 36/58] Move stylesheets stats logic to more suitable place ie.
 context provider

---
 .../calculate-stylesheet-stats.js}                  | 13 +++++++++----
 .../validated-url-context-provider/index.js         |  6 +++++-
 .../test/calculate-stylesheet-stats.js}             |  4 ++--
 .../components/stylesheets-summary/index.js         |  6 +++---
 4 files changed, 19 insertions(+), 10 deletions(-)
 rename assets/src/{validated-url-page/helpers/index.js => components/validated-url-context-provider/calculate-stylesheet-stats.js} (89%)
 rename assets/src/{validated-url-page/helpers/test/calculateStylesheetStats.js => components/validated-url-context-provider/test/calculate-stylesheet-stats.js} (98%)

diff --git a/assets/src/validated-url-page/helpers/index.js b/assets/src/components/validated-url-context-provider/calculate-stylesheet-stats.js
similarity index 89%
rename from assets/src/validated-url-page/helpers/index.js
rename to assets/src/components/validated-url-context-provider/calculate-stylesheet-stats.js
index b9a679105e3..fd8f4268fe8 100644
--- a/assets/src/validated-url-page/helpers/index.js
+++ b/assets/src/components/validated-url-context-provider/calculate-stylesheet-stats.js
@@ -1,6 +1,11 @@
-export const STYLESHEETS_BUDGET_STATUS_VALID = 'valid';
-export const STYLESHEETS_BUDGET_STATUS_WARNING = 'warning';
-export const STYLESHEETS_BUDGET_STATUS_EXCEEDED = 'exceeded';
+/**
+ * Internal dependencies
+ */
+import {
+	STYLESHEETS_BUDGET_STATUS_EXCEEDED,
+	STYLESHEETS_BUDGET_STATUS_VALID,
+	STYLESHEETS_BUDGET_STATUS_WARNING,
+} from './index';
 
 /**
  * Calculate stylesheets stats.
@@ -13,7 +18,7 @@ export const STYLESHEETS_BUDGET_STATUS_EXCEEDED = 'exceeded';
  * @param {number} budgetWarningPercentage CSS budget warning level percentage.
  * @return {Object|null} Stylesheets sizes data or null.
  */
-export function calculateStylesheetStats( stylesheets, budgetBytes, budgetWarningPercentage ) {
+export default function calculateStylesheetStats( stylesheets, budgetBytes, budgetWarningPercentage ) {
 	if ( ! stylesheets ) {
 		return null;
 	}
diff --git a/assets/src/components/validated-url-context-provider/index.js b/assets/src/components/validated-url-context-provider/index.js
index cc9a719313f..55125dfa936 100644
--- a/assets/src/components/validated-url-context-provider/index.js
+++ b/assets/src/components/validated-url-context-provider/index.js
@@ -20,10 +20,14 @@ import apiFetch from '@wordpress/api-fetch';
  */
 import { ErrorContext } from '../error-context-provider';
 import { useAsyncError } from '../../utils/use-async-error';
-import { calculateStylesheetStats } from '../../validated-url-page/helpers';
+import calculateStylesheetStats from './calculate-stylesheet-stats';
 
 export const ValidatedUrl = createContext();
 
+export const STYLESHEETS_BUDGET_STATUS_VALID = 'valid';
+export const STYLESHEETS_BUDGET_STATUS_WARNING = 'warning';
+export const STYLESHEETS_BUDGET_STATUS_EXCEEDED = 'exceeded';
+
 /**
  * Validated URL data context provider.
  *
diff --git a/assets/src/validated-url-page/helpers/test/calculateStylesheetStats.js b/assets/src/components/validated-url-context-provider/test/calculate-stylesheet-stats.js
similarity index 98%
rename from assets/src/validated-url-page/helpers/test/calculateStylesheetStats.js
rename to assets/src/components/validated-url-context-provider/test/calculate-stylesheet-stats.js
index 4575e47896c..0f7e3937ffe 100644
--- a/assets/src/validated-url-page/helpers/test/calculateStylesheetStats.js
+++ b/assets/src/components/validated-url-context-provider/test/calculate-stylesheet-stats.js
@@ -1,11 +1,11 @@
 /**
  * Internal dependencies
  */
+import calculateStylesheetStats from '../calculate-stylesheet-stats';
 import {
-	calculateStylesheetStats,
+	STYLESHEETS_BUDGET_STATUS_EXCEEDED,
 	STYLESHEETS_BUDGET_STATUS_VALID,
 	STYLESHEETS_BUDGET_STATUS_WARNING,
-	STYLESHEETS_BUDGET_STATUS_EXCEEDED,
 } from '..';
 
 describe( 'calculateStylesheetStats', () => {
diff --git a/assets/src/validated-url-page/components/stylesheets-summary/index.js b/assets/src/validated-url-page/components/stylesheets-summary/index.js
index 8daa7a27a75..0bd0cdca412 100644
--- a/assets/src/validated-url-page/components/stylesheets-summary/index.js
+++ b/assets/src/validated-url-page/components/stylesheets-summary/index.js
@@ -21,10 +21,10 @@ import {
 	NOTICE_TYPE_ERROR,
 } from '../../../components/amp-notice';
 import {
+	STYLESHEETS_BUDGET_STATUS_EXCEEDED,
 	STYLESHEETS_BUDGET_STATUS_VALID,
 	STYLESHEETS_BUDGET_STATUS_WARNING,
-	STYLESHEETS_BUDGET_STATUS_EXCEEDED,
-} from '../../helpers';
+} from '../../../components/validated-url-context-provider';
 
 /**
  * Render stylesheets summary table.
@@ -137,9 +137,9 @@ StylesheetsSummary.propTypes = {
 			actualPercentage: PropTypes.number,
 			budgetBytes: PropTypes.number,
 			status: PropTypes.oneOf( [
+				STYLESHEETS_BUDGET_STATUS_EXCEEDED,
 				STYLESHEETS_BUDGET_STATUS_VALID,
 				STYLESHEETS_BUDGET_STATUS_WARNING,
-				STYLESHEETS_BUDGET_STATUS_EXCEEDED,
 			] ),
 		} ),
 	} ),

From 9443d23c708c1dfa1bf4b86014b863c636f0700a Mon Sep 17 00:00:00 2001
From: Piotr Delawski <piotr.delawski@gmail.com>
Date: Tue, 27 Jul 2021 17:15:45 +0300
Subject: [PATCH 37/58] Use constants instead of flags for source types

---
 assets/src/components/source-label/index.js   | 125 ++++++++++--------
 .../src/components/source-label/test/index.js |  63 +++++----
 .../src/components/sources-summary/index.js   |  34 ++---
 assets/src/utils/summarize-sources/index.js   |  78 ++++++-----
 .../src/utils/summarize-sources/test/index.js |  32 +++--
 5 files changed, 183 insertions(+), 149 deletions(-)

diff --git a/assets/src/components/source-label/index.js b/assets/src/components/source-label/index.js
index f99134653e4..f7934f82c26 100644
--- a/assets/src/components/source-label/index.js
+++ b/assets/src/components/source-label/index.js
@@ -9,60 +9,73 @@ import PropTypes from 'prop-types';
 import { __, sprintf } from '@wordpress/i18n';
 import { Dashicon } from '@wordpress/components';
 
+/**
+ * Internal dependencies
+ */
+import {
+	SOURCE_TYPE_PLUGIN,
+	SOURCE_TYPE_MU_PLUGIN,
+	SOURCE_TYPE_THEME,
+	SOURCE_TYPE_CORE,
+	SOURCE_TYPE_EMBED,
+	SOURCE_TYPE_BLOCK,
+	SOURCE_TYPE_HOOK,
+	SOURCE_TYPE_HOOK_THE_CONTENT,
+	SOURCE_TYPE_HOOK_THE_EXCERPT,
+} from '../../utils/summarize-sources';
+
 export default function SourceLabel( {
-	source,
+	sources,
+	type,
 	isCodeOutput,
-	isPlugin,
-	isMuPlugin,
-	isTheme,
-	isCore,
-	isEmbed,
-	isHook,
-	isBlock,
 } ) {
-	const sources = Array.isArray( source ) ? source : [ source ];
-
 	let icon;
 	let title;
 	let singleTitle = sources?.[ 0 ];
 
-	if ( isPlugin ) {
-		icon = 'admin-plugins';
-		title = __( 'Plugins', 'amp' );
-	} else if ( isMuPlugin ) {
-		icon = 'admin-plugins';
-		title = __( 'Must-Use Plugins', 'amp' );
-	} else if ( isTheme ) {
-		icon = 'admin-appearance';
-	} else if ( isCore ) {
-		icon = 'wordpress-alt';
-		title = __( 'Other', 'amp' );
-	} else if ( isEmbed ) {
-		icon = 'wordpress-alt';
-		title = __( 'Embed', 'amp' );
-	} else if ( isHook ) {
-		switch ( sources[ 0 ] ) {
-			case 'the_content':
-				icon = 'edit';
-				singleTitle = __( 'Content', 'amp' );
-				break;
-			case 'the_excerpt':
-				icon = 'edit';
-				singleTitle = __( 'Excerpt', 'amp' );
-				break;
-			default:
-				icon = 'wordpress-alt';
-				singleTitle = sprintf(
-					// translators: placeholder is the hook name.
-					__( 'Hook: %s', 'amp' ), sources[ 0 ],
-				);
-		}
-	} else if ( isBlock ) {
-		icon = 'edit';
-	}
-
-	if ( ! icon ) {
-		return null;
+	switch ( type ) {
+		case SOURCE_TYPE_PLUGIN:
+			icon = 'admin-plugins';
+			title = __( 'Plugins', 'amp' );
+			break;
+		case SOURCE_TYPE_MU_PLUGIN:
+			icon = 'admin-plugins';
+			title = __( 'Must-Use Plugins', 'amp' );
+			break;
+		case SOURCE_TYPE_THEME:
+			icon = 'admin-appearance';
+			break;
+		case SOURCE_TYPE_CORE:
+			icon = 'wordpress-alt';
+			title = __( 'Other', 'amp' );
+			break;
+		case SOURCE_TYPE_EMBED:
+			icon = 'wordpress-alt';
+			title = __( 'Embed', 'amp' );
+			break;
+		case SOURCE_TYPE_HOOK:
+			switch ( sources[ 0 ] ) {
+				case SOURCE_TYPE_HOOK_THE_CONTENT:
+					icon = 'edit';
+					singleTitle = __( 'Content', 'amp' );
+					break;
+				case SOURCE_TYPE_HOOK_THE_EXCERPT:
+					icon = 'edit';
+					singleTitle = __( 'Excerpt', 'amp' );
+					break;
+				default:
+					icon = 'wordpress-alt';
+					singleTitle = sprintf(
+						// translators: placeholder is the hook name.
+						__( 'Hook: %s', 'amp' ), sources[ 0 ],
+					);
+			}
+			break;
+		case SOURCE_TYPE_BLOCK:
+			icon = 'edit';
+			break;
+		default:
+			return null;
 	}
 
 	if ( ! sources || sources.length === 1 ) {
@@ -100,13 +113,15 @@ export default function SourceLabel( {
 	);
 }
 SourceLabel.propTypes = {
-	source: PropTypes.oneOfType( [ PropTypes.string, PropTypes.array ] ),
 	isCodeOutput: PropTypes.bool,
-	isPlugin: PropTypes.bool,
-	isMuPlugin: PropTypes.bool,
-	isTheme: PropTypes.bool,
-	isCore: PropTypes.bool,
-	isEmbed: PropTypes.bool,
-	isHook: PropTypes.bool,
-	isBlock: PropTypes.bool,
+	sources: PropTypes.array,
+	type: PropTypes.oneOf( [
+		SOURCE_TYPE_PLUGIN,
+		SOURCE_TYPE_MU_PLUGIN,
+		SOURCE_TYPE_THEME,
+		SOURCE_TYPE_CORE,
+		SOURCE_TYPE_EMBED,
+		SOURCE_TYPE_BLOCK,
+		SOURCE_TYPE_HOOK,
+	] ),
 };
diff --git a/assets/src/components/source-label/test/index.js b/assets/src/components/source-label/test/index.js
index 766d219d5d5..6a9368faf54 100644
--- a/assets/src/components/source-label/test/index.js
+++ b/assets/src/components/source-label/test/index.js
@@ -12,6 +12,17 @@ import { act } from 'react-dom/test-utils';
  * Internal dependencies
  */
 import SourceLabel from '..';
+import {
+	SOURCE_TYPE_BLOCK,
+	SOURCE_TYPE_CORE,
+	SOURCE_TYPE_EMBED,
+	SOURCE_TYPE_HOOK,
+	SOURCE_TYPE_HOOK_THE_CONTENT,
+	SOURCE_TYPE_HOOK_THE_EXCERPT,
+	SOURCE_TYPE_MU_PLUGIN,
+	SOURCE_TYPE_PLUGIN,
+	SOURCE_TYPE_THEME,
+} from '../../../utils/summarize-sources';
 
 let container;
 
@@ -29,7 +40,7 @@ describe( 'SourceLabel', () => {
 	it( 'renders nothing if no source type is provided', () => {
 		act( () => {
 			render(
-				<SourceLabel source={ [ 'a' ] } />,
+				<SourceLabel sources={ [ 'a' ] } />,
 				container,
 			);
 		} );
@@ -40,7 +51,7 @@ describe( 'SourceLabel', () => {
 	it( 'renders a single source', () => {
 		act( () => {
 			render(
-				<SourceLabel isPlugin={ true } source="foo" />,
+				<SourceLabel type={ SOURCE_TYPE_PLUGIN } sources={ [ 'foo' ] } />,
 				container,
 			);
 		} );
@@ -53,7 +64,7 @@ describe( 'SourceLabel', () => {
 	it( 'renders multiple sources', () => {
 		act( () => {
 			render(
-				<SourceLabel isPlugin={ true } source={ [ 'foo', 'bar', 'baz' ] } />,
+				<SourceLabel type={ SOURCE_TYPE_PLUGIN } sources={ [ 'foo', 'bar', 'baz' ] } />,
 				container,
 			);
 		} );
@@ -72,9 +83,9 @@ describe( 'SourceLabel', () => {
 		act( () => {
 			render(
 				<SourceLabel
-					isBlock={ true }
+					type={ SOURCE_TYPE_BLOCK }
 					isCodeOutput={ true }
-					source="foo/bar"
+					sources={ [ 'foo/bar' ] }
 				/>,
 				container,
 			);
@@ -89,87 +100,87 @@ describe( 'SourceLabel', () => {
 		[
 			'Some Plugin',
 			{
-				isPlugin: true,
-				source: [ 'Some Plugin' ],
+				type: SOURCE_TYPE_PLUGIN,
+				sources: [ 'Some Plugin' ],
 			},
 			'.dashicons-admin-plugins',
 		],
 		[
 			'Plugins',
 			{
-				isPlugin: true,
-				source: [ 'a', 'b' ],
+				type: SOURCE_TYPE_PLUGIN,
+				sources: [ 'a', 'b' ],
 			},
 			'.dashicons-admin-plugins',
 		],
 		[
 			'Must-Use Plugins',
 			{
-				isMuPlugin: true,
-				source: [ 'a', 'b' ],
+				type: SOURCE_TYPE_MU_PLUGIN,
+				sources: [ 'a', 'b' ],
 			},
 			'.dashicons-admin-plugins',
 		],
 		[
 			'Some Theme',
 			{
-				isTheme: true,
-				source: 'Some Theme',
+				type: SOURCE_TYPE_THEME,
+				sources: [ 'Some Theme' ],
 			},
 			'.dashicons-admin-appearance',
 		],
 		[
 			'wp-includes',
 			{
-				isCore: true,
-				source: 'wp-includes',
+				type: SOURCE_TYPE_CORE,
+				sources: [ 'wp-includes' ],
 			},
 			'.dashicons-wordpress-alt',
 		],
 		[
 			'Other',
 			{
-				isCore: true,
-				source: [ 'a', 'b' ],
+				type: SOURCE_TYPE_CORE,
+				sources: [ 'a', 'b' ],
 			},
 			'.dashicons-wordpress-alt',
 		],
 		[
 			'Embed',
 			{
-				isEmbed: true,
+				type: SOURCE_TYPE_EMBED,
 			},
 			'.dashicons-wordpress-alt',
 		],
 		[
 			'Content',
 			{
-				isHook: true,
-				source: 'the_content',
+				type: SOURCE_TYPE_HOOK,
+				sources: [ SOURCE_TYPE_HOOK_THE_CONTENT ],
 			},
 			'.dashicons-edit',
 		],
 		[
 			'Excerpt',
 			{
-				isHook: true,
-				source: 'the_excerpt',
+				type: SOURCE_TYPE_HOOK,
+				sources: [ SOURCE_TYPE_HOOK_THE_EXCERPT ],
 			},
 			'.dashicons-edit',
 		],
 		[
 			'Hook: foo_bar',
 			{
-				isHook: true,
-				source: 'foo_bar',
+				type: SOURCE_TYPE_HOOK,
+				sources: [ 'foo_bar' ],
 			},
 			'.dashicons-wordpress-alt',
 		],
 		[
 			'Some Block',
 			{
-				isBlock: true,
-				source: 'Some Block',
+				type: SOURCE_TYPE_BLOCK,
+				sources: [ 'Some Block' ],
 			},
 			'.dashicons-edit',
 		],
diff --git a/assets/src/components/sources-summary/index.js b/assets/src/components/sources-summary/index.js
index 61662d88a5c..5deaf896eb7 100644
--- a/assets/src/components/sources-summary/index.js
+++ b/assets/src/components/sources-summary/index.js
@@ -6,7 +6,9 @@ import PropTypes from 'prop-types';
 /**
  * Internal dependencies
  */
-import summarizeSources from '../../utils/summarize-sources';
+import summarizeSources, {
+	SOURCE_TYPE_THEME,
+} from '../../utils/summarize-sources';
 import SourceLabel from '../source-label';
 
 export default function SourcesSummary( { sources, validatedTheme } ) {
@@ -18,31 +20,17 @@ export default function SourcesSummary( { sources, validatedTheme } ) {
 
 	if ( ! summarizedSources && validatedTheme ) {
 		return (
-			<SourceLabel source={ validatedTheme } isTheme={ true } />
+			<SourceLabel sources={ validatedTheme } type={ SOURCE_TYPE_THEME } />
 		);
 	}
 
-	const {
-		plugin,
-		muPlugin,
-		theme,
-		core,
-		embed,
-		blocks,
-		hook,
-	} = summarizedSources;
-
-	return (
-		<>
-			{ plugin && <SourceLabel source={ plugin } isPlugin={ true } /> }
-			{ muPlugin && <SourceLabel source={ muPlugin } isMuPlugin={ true } /> }
-			{ theme && <SourceLabel source={ theme } isTheme={ true } /> }
-			{ core && <SourceLabel source={ core } isCore={ true } /> }
-			{ embed && <SourceLabel source={ embed } isEmbed={ true } /> }
-			{ blocks && <SourceLabel source={ blocks } isBlock={ true } /> }
-			{ hook && <SourceLabel source={ hook } isHook={ true } /> }
-		</>
-	);
+	return Object.keys( summarizedSources ).map( ( type ) => (
+		<SourceLabel
+			key={ type }
+			type={ type }
+			sources={ summarizedSources[ type ] }
+		/>
+	) );
 }
 SourcesSummary.propTypes = {
 	sources: PropTypes.arrayOf(
diff --git a/assets/src/utils/summarize-sources/index.js b/assets/src/utils/summarize-sources/index.js
index cd263268cbe..65335ef9ba6 100644
--- a/assets/src/utils/summarize-sources/index.js
+++ b/assets/src/utils/summarize-sources/index.js
@@ -1,19 +1,29 @@
+export const SOURCE_TYPE_PLUGIN = 'plugin';
+export const SOURCE_TYPE_MU_PLUGIN = 'mu-plugin';
+export const SOURCE_TYPE_THEME = 'theme';
+export const SOURCE_TYPE_CORE = 'core';
+export const SOURCE_TYPE_EMBED = 'embed';
+export const SOURCE_TYPE_BLOCK = 'blocks';
+export const SOURCE_TYPE_HOOK = 'hook';
+export const SOURCE_TYPE_HOOK_THE_CONTENT = 'the_content';
+export const SOURCE_TYPE_HOOK_THE_EXCERPT = 'the_excerpt';
+
 /**
  * Summarize sources.
  *
- * @param {Array} sources Sources.
+ * @param {Array} raw Raw sources.
  * @return {Object|null} Summarized (de-duped) sources.
  */
-export default function summarizeSources( sources ) {
-	if ( ! sources || ! Array.isArray( sources ) || sources.length === 0 ) {
+export default function summarizeSources( raw ) {
+	if ( ! raw || ! Array.isArray( raw ) || raw.length === 0 ) {
 		return null;
 	}
 
-	const summarizedSources = sources.reduce( ( acc, source ) => {
+	const sources = raw.reduce( ( acc, source ) => {
 		const { hook, type, name, embed, block_name: blockName } = source;
 
 		if ( hook ) {
-			acc.hook = hook;
+			acc[ SOURCE_TYPE_HOOK ] = hook;
 		}
 
 		if ( type && name && ! acc[ type ]?.includes( name ) ) {
@@ -22,12 +32,12 @@ export default function summarizeSources( sources ) {
 				name,
 			];
 		} else if ( embed ) {
-			acc.embed = true;
+			acc[ SOURCE_TYPE_EMBED ] = true;
 		}
 
 		if ( blockName ) {
-			acc.blocks = [
-				...acc.blocks ?? [],
+			acc[ SOURCE_TYPE_BLOCK ] = [
+				...acc[ SOURCE_TYPE_BLOCK ] ?? [],
 				blockName,
 			];
 		}
@@ -35,51 +45,53 @@ export default function summarizeSources( sources ) {
 		return acc;
 	}, {} );
 
-	const {
-		plugin,
-		'mu-plugin': muPlugin,
-		theme,
-		core,
-		embed,
-		blocks,
-		hook,
-	} = summarizedSources;
-
 	// Return only plugins and themes if they are present.
-	if ( plugin || muPlugin || theme ) {
+	if (
+		sources[ SOURCE_TYPE_PLUGIN ] ||
+		sources[ SOURCE_TYPE_MU_PLUGIN ] ||
+		sources[ SOURCE_TYPE_THEME ]
+	) {
 		const result = {};
 
-		if ( plugin ) {
-			result.plugin = plugin;
+		if ( sources[ SOURCE_TYPE_PLUGIN ] ) {
+			result[ SOURCE_TYPE_PLUGIN ] = sources[ SOURCE_TYPE_PLUGIN ];
 		}
-		if ( muPlugin ) {
-			result.muPlugin = muPlugin;
+		if ( sources[ SOURCE_TYPE_MU_PLUGIN ] ) {
+			result[ SOURCE_TYPE_MU_PLUGIN ] = sources[ SOURCE_TYPE_MU_PLUGIN ];
 		}
-		if ( theme && ! embed ) {
-			result.theme = theme;
+		if ( sources[ SOURCE_TYPE_THEME ] && ! sources[ SOURCE_TYPE_EMBED ] ) {
+			result[ SOURCE_TYPE_THEME ] = sources[ SOURCE_TYPE_THEME ];
 		}
 
 		return result;
 	}
 
 	// Return core if there are no plugins or themes.
-	if ( core ) {
-		return { core };
+	if ( sources[ SOURCE_TYPE_CORE ] ) {
+		return {
+			[ SOURCE_TYPE_CORE ]: sources[ SOURCE_TYPE_CORE ],
+		};
 	}
 
 	// Return embed if there is no plugin, theme or core.
-	if ( embed ) {
-		return { embed };
+	if ( sources[ SOURCE_TYPE_EMBED ] ) {
+		return {
+			[ SOURCE_TYPE_EMBED ]: sources[ SOURCE_TYPE_EMBED ],
+		};
 	}
 
 	// Return block if there is no plugin, theme, core or embed.
-	if ( blocks ) {
-		return { blocks };
+	if ( sources[ SOURCE_TYPE_BLOCK ] ) {
+		return {
+			[ SOURCE_TYPE_BLOCK ]: sources[ SOURCE_TYPE_BLOCK ],
+		};
 	}
 
 	// Return hook if there is no plugin, theme, core, embed or blocks.
-	if ( hook ) {
-		return { hook };
+	if ( sources[ SOURCE_TYPE_HOOK ] ) {
+		return {
+			[ SOURCE_TYPE_HOOK ]: sources[ SOURCE_TYPE_HOOK ],
+		};
 	}
 
 	return null;
diff --git a/assets/src/utils/summarize-sources/test/index.js b/assets/src/utils/summarize-sources/test/index.js
index 0f513b6d2ed..1e6a99c3d4c 100644
--- a/assets/src/utils/summarize-sources/test/index.js
+++ b/assets/src/utils/summarize-sources/test/index.js
@@ -1,7 +1,15 @@
 /**
  * Internal dependencies
  */
-import summarizeSources from '..';
+import summarizeSources, {
+	SOURCE_TYPE_PLUGIN,
+	SOURCE_TYPE_MU_PLUGIN,
+	SOURCE_TYPE_THEME,
+	SOURCE_TYPE_CORE,
+	SOURCE_TYPE_EMBED,
+	SOURCE_TYPE_BLOCK,
+	SOURCE_TYPE_HOOK,
+} from '..';
 
 describe( 'summarizeSources', () => {
 	it( 'renders null if no sources array is provided', () => {
@@ -31,9 +39,9 @@ describe( 'summarizeSources', () => {
 			},
 		] );
 		expect( result ).toStrictEqual( {
-			plugin: [ 'foo' ],
-			muPlugin: [ 'baz' ],
-			theme: [ 'bar' ],
+			[ SOURCE_TYPE_PLUGIN ]: [ 'foo' ],
+			[ SOURCE_TYPE_MU_PLUGIN ]: [ 'baz' ],
+			[ SOURCE_TYPE_THEME ]: [ 'bar' ],
 		} );
 	} );
 
@@ -62,7 +70,7 @@ describe( 'summarizeSources', () => {
 			},
 		] );
 		expect( result ).toStrictEqual( {
-			plugin: [ 'foo', 'baz' ],
+			[ SOURCE_TYPE_PLUGIN ]: [ 'foo', 'baz' ],
 		} );
 	} );
 
@@ -81,7 +89,7 @@ describe( 'summarizeSources', () => {
 			},
 		] );
 		expect( result ).toStrictEqual( {
-			core: [ 'baz', 'bar' ],
+			[ SOURCE_TYPE_CORE ]: [ 'baz', 'bar' ],
 		} );
 	} );
 
@@ -95,7 +103,7 @@ describe( 'summarizeSources', () => {
 			},
 		] );
 		expect( result ).toStrictEqual( {
-			embed: true,
+			[ SOURCE_TYPE_EMBED ]: true,
 		} );
 	} );
 
@@ -109,7 +117,7 @@ describe( 'summarizeSources', () => {
 			},
 		] );
 		expect( result ).toStrictEqual( {
-			blocks: [ 'foobar', 'bazbar' ],
+			[ SOURCE_TYPE_BLOCK ]: [ 'foobar', 'bazbar' ],
 		} );
 	} );
 
@@ -120,7 +128,7 @@ describe( 'summarizeSources', () => {
 			},
 		] );
 		expect( result ).toStrictEqual( {
-			hook: 'baz',
+			[ SOURCE_TYPE_HOOK ]: 'baz',
 		} );
 	} );
 
@@ -152,9 +160,9 @@ describe( 'summarizeSources', () => {
 			},
 		] );
 		expect( result ).toStrictEqual( {
-			plugin: [ 'foo' ],
-			muPlugin: [ 'bar' ],
-			theme: [ 'baz' ],
+			[ SOURCE_TYPE_PLUGIN ]: [ 'foo' ],
+			[ SOURCE_TYPE_MU_PLUGIN ]: [ 'bar' ],
+			[ SOURCE_TYPE_THEME ]: [ 'baz' ],
 		} );
 	} );
 } );

From 30a63069800bbf1cb8aa220db319a6c4f316d3bf Mon Sep 17 00:00:00 2001
From: Piotr Delawski <piotr.delawski@gmail.com>
Date: Wed, 28 Jul 2021 19:47:41 +0300
Subject: [PATCH 38/58] Add detailed sources stack to Stylesheets meta box
 table

---
 .../src/amp-validation-error-taxonomy.scss    |   3 +
 .../src/components/_amp-stylesheet-table.scss |   7 +
 .../_validation-error-sources-details.scss    |  17 ++
 .../_validation-error-sources-stack.scss      |  17 ++
 assets/src/components/source-details/index.js |  55 ++++++
 .../components/source-details/test/index.js   |  39 +++++
 assets/src/components/source-details/title.js |  69 ++++++++
 assets/src/components/source-details/value.js | 139 +++++++++++++++
 assets/src/components/source-label/index.js   |   5 +-
 .../src/components/source-label/test/index.js |   4 +-
 assets/src/components/sources-stack/index.js  |  66 ++++++++
 .../components/sources-stack/test/index.js    |  62 +++++++
 .../src/components/sources-summary/index.js   |   5 +-
 assets/src/utils/sources/index.js             |  11 ++
 .../index.js => sources/summarize.js}         |  21 ++-
 .../index.js => sources/test/summarize.js}    |   3 +-
 .../components/stylesheets-table/index.js     |   2 +-
 .../components/stylesheets-table/row.js       |   7 +
 src/Validation/ValidatedUrlData.php           | 160 ++++++++++++++++++
 19 files changed, 675 insertions(+), 17 deletions(-)
 create mode 100644 assets/css/src/components/_amp-stylesheet-table.scss
 create mode 100644 assets/css/src/components/_validation-error-sources-details.scss
 create mode 100644 assets/css/src/components/_validation-error-sources-stack.scss
 create mode 100644 assets/src/components/source-details/index.js
 create mode 100644 assets/src/components/source-details/test/index.js
 create mode 100644 assets/src/components/source-details/title.js
 create mode 100644 assets/src/components/source-details/value.js
 create mode 100644 assets/src/components/sources-stack/index.js
 create mode 100644 assets/src/components/sources-stack/test/index.js
 create mode 100644 assets/src/utils/sources/index.js
 rename assets/src/utils/{summarize-sources/index.js => sources/summarize.js} (83%)
 rename assets/src/utils/{summarize-sources/test/index.js => sources/test/summarize.js} (99%)

diff --git a/assets/css/src/amp-validation-error-taxonomy.scss b/assets/css/src/amp-validation-error-taxonomy.scss
index d536ede249e..b9281683415 100644
--- a/assets/css/src/amp-validation-error-taxonomy.scss
+++ b/assets/css/src/amp-validation-error-taxonomy.scss
@@ -1,7 +1,10 @@
 @import "./components/amp-stylesheet-list";
+@import "./components/amp-stylesheet-table";
 @import "./components/amp-stylesheet-summary";
 @import "./components/details-column";
 @import "./components/error-details-toggle";
+@import "./components/validation-error-sources-details";
+@import "./components/validation-error-sources-stack";
 @import "./components/wp-list-table-grid-lines";
 @import "./components/wp-list-table-kept-errors";
 @import "./components/wp-list-table-new-errors";
diff --git a/assets/css/src/components/_amp-stylesheet-table.scss b/assets/css/src/components/_amp-stylesheet-table.scss
new file mode 100644
index 00000000000..d29a9042502
--- /dev/null
+++ b/assets/css/src/components/_amp-stylesheet-table.scss
@@ -0,0 +1,7 @@
+// @todo: Combine with .amp-stylesheet-list once the legacy UI is dropped.
+.amp-stylesheet-table {
+
+	.column-stylesheet_expand {
+		padding: 0;
+	}
+}
diff --git a/assets/css/src/components/_validation-error-sources-details.scss b/assets/css/src/components/_validation-error-sources-details.scss
new file mode 100644
index 00000000000..32736aa8644
--- /dev/null
+++ b/assets/css/src/components/_validation-error-sources-details.scss
@@ -0,0 +1,17 @@
+.validation-error-sources-details {
+	border-collapse: collapse;
+	width: 100%;
+
+	td,
+	th {
+		vertical-align: top;
+		padding: 2px 4px;
+	}
+
+	th {
+		font-weight: 600;
+		text-align: right;
+		width: 30%;
+		min-width: 120px;
+	}
+}
diff --git a/assets/css/src/components/_validation-error-sources-stack.scss b/assets/css/src/components/_validation-error-sources-stack.scss
new file mode 100644
index 00000000000..b1a2bf77799
--- /dev/null
+++ b/assets/css/src/components/_validation-error-sources-stack.scss
@@ -0,0 +1,17 @@
+.validation-error-sources-stack {
+
+	li {
+		padding: 0.75em 0;
+		margin: 0;
+		max-width: 400px;
+
+		&::marker {
+			content: "#" counter(list-item);
+			font-weight: 600;
+		}
+	}
+
+	li + li {
+		border-top: solid 1px #ddd;
+	}
+}
diff --git a/assets/src/components/source-details/index.js b/assets/src/components/source-details/index.js
new file mode 100644
index 00000000000..580e530324a
--- /dev/null
+++ b/assets/src/components/source-details/index.js
@@ -0,0 +1,55 @@
+/**
+ * External dependencies
+ */
+import PropTypes from 'prop-types';
+
+/**
+ * Internal dependencies
+ */
+import SourceDetailTitle from './title';
+import SourceDetailValue from './value';
+
+export default function SourceDetails( { source } ) {
+	if ( ! source || Object.keys( source ).length === 0 ) {
+		return null;
+	}
+
+	const omitKeys = [ 'dependency_type', 'priority', 'file', 'line', 'filter' ];
+	const keys = Object.keys( source ).filter( ( key ) => ! omitKeys.includes( key ) );
+
+	return (
+		<table className="validation-error-sources-details">
+			<tbody>
+				{ keys.map( ( key ) => (
+					<tr key={ key }>
+						<th scope="row">
+							<SourceDetailTitle slug={ key } source={ source } />
+							{ ':' }
+						</th>
+						<td>
+							<SourceDetailValue slug={ key } source={ source } />
+						</td>
+					</tr>
+				) ) }
+			</tbody>
+		</table>
+	);
+}
+SourceDetails.propTypes = {
+	source: PropTypes.shape( {
+		type: PropTypes.string,
+		name: PropTypes.string,
+		file: PropTypes.string,
+		line: PropTypes.number,
+		filter: PropTypes.bool,
+		function: PropTypes.string,
+		hook: PropTypes.string,
+		priority: PropTypes.number,
+		dependency_type: PropTypes.string,
+		handle: PropTypes.string,
+		text: PropTypes.string,
+		extra_key: PropTypes.string,
+		embed: PropTypes.string,
+		block_name: PropTypes.string,
+	} ).isRequired,
+};
diff --git a/assets/src/components/source-details/test/index.js b/assets/src/components/source-details/test/index.js
new file mode 100644
index 00000000000..9aa5ff9eeb0
--- /dev/null
+++ b/assets/src/components/source-details/test/index.js
@@ -0,0 +1,39 @@
+/**
+ * WordPress dependencies
+ */
+import { render } from '@wordpress/element';
+
+/**
+ * External dependencies
+ */
+import { act } from 'react-dom/test-utils';
+
+/**
+ * Internal dependencies
+ */
+import SourceDetails from '..';
+
+let container;
+
+describe( 'SourceDetails', () => {
+	beforeEach( () => {
+		container = document.createElement( 'div' );
+		document.body.appendChild( container );
+	} );
+
+	afterEach( () => {
+		document.body.removeChild( container );
+		container = null;
+	} );
+
+	it( 'renders nothing if no source is provided', () => {
+		act( () => {
+			render(
+				<SourceDetails source={ {} } />,
+				container,
+			);
+		} );
+
+		expect( container.textContent ).toBe( '' );
+	} );
+} );
diff --git a/assets/src/components/source-details/title.js b/assets/src/components/source-details/title.js
new file mode 100644
index 00000000000..12bda5b94cf
--- /dev/null
+++ b/assets/src/components/source-details/title.js
@@ -0,0 +1,69 @@
+/**
+ * External dependencies
+ */
+import PropTypes from 'prop-types';
+
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+
+//eslint-disable-next-line complexity
+export default function SourceDetailTitle( { slug, source } ) {
+	//eslint-disable-next-line default-case
+	switch ( slug ) {
+		case 'name':
+			return __( 'Name', 'amp' );
+		case 'post_id':
+			return __( 'Post ID', 'amp' );
+		case 'post_type':
+			return __( 'Post Type', 'amp' );
+		case 'handle':
+			if ( source?.dependency_type === 'script' ) {
+				return __( 'Enqueued Script', 'amp' );
+			}
+			if ( source?.dependency_type === 'style' ) {
+				return __( 'Enqueued Style', 'amp' );
+			}
+			break;
+		case 'dependency_handle':
+			if ( source?.dependency_type === 'script' ) {
+				return __( 'Dependent Script', 'amp' );
+			}
+			if ( source?.dependency_type === 'style' ) {
+				return __( 'Dependent Style', 'amp' );
+			}
+			break;
+		case 'extra_key':
+			return __( 'Inline Type', 'amp' );
+		case 'text':
+			return __( 'Inline Text', 'amp' );
+		case 'block_content_index':
+			return __( 'Block Index', 'amp' );
+		case 'block_name':
+			return __( 'Block Name', 'amp' );
+		case 'shortcode':
+			return __( 'Shortcode', 'amp' );
+		case 'type':
+			return __( 'Type', 'amp' );
+		case 'function':
+			return __( 'Function', 'amp' );
+		case 'location':
+			return __( 'Location', 'amp' );
+		case 'sources':
+			return __( 'Sources', 'amp' );
+		case 'hook':
+			return source?.filter
+				? __( 'Filter', 'amp' )
+				: __( 'Action', 'amp' );
+	}
+
+	return slug;
+}
+SourceDetailTitle.propTypes = {
+	slug: PropTypes.string,
+	source: PropTypes.shape( {
+		dependency_type: PropTypes.string,
+		filter: PropTypes.bool,
+	} ).isRequired,
+};
diff --git a/assets/src/components/source-details/value.js b/assets/src/components/source-details/value.js
new file mode 100644
index 00000000000..80ffc4f20e6
--- /dev/null
+++ b/assets/src/components/source-details/value.js
@@ -0,0 +1,139 @@
+/**
+ * External dependencies
+ */
+import PropTypes from 'prop-types';
+
+/**
+ * WordPress dependencies
+ */
+import { __, sprintf } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import FormattedMemoryValue from '../formatted-memory-value';
+import SourceLabel from '../source-label';
+import SourcesStack from '../sources-stack';
+
+//eslint-disable-next-line complexity
+export default function SourceDetailValue( { slug, source } ) {
+	switch ( slug ) {
+		case 'sources':
+			return <SourcesStack sources={ source.sources } />;
+		case 'type':
+			return <SourceLabel type={ source.type } />;
+		case 'name':
+		case 'shortcode':
+		case 'handle':
+		case 'dependency_handle':
+		case 'block_name':
+		case 'post_type':
+			return (
+				<code>
+					{ source[ slug ] }
+				</code>
+			);
+		case 'function':
+			return (
+				<code>
+					{ '{closure}' === source.function
+						? source.function
+						: `${ source.function }()` }
+				</code>
+			);
+		case 'location':
+			if ( ! source.location.link_url ) {
+				return source.location.link_text;
+			}
+
+			const { protocol } = new URL( source.location.link_url );
+
+			// Open link in new window unless the user has filtered the URL to open their system IDE.
+			if ( [ 'http:', 'https:' ].includes( protocol ) ) {
+				return (
+					<a href={ source.location.link_url } target="_blank" rel="noreferrer">
+						{ source.location.link_text }
+					</a>
+				);
+			}
+
+			return (
+				<a href={ source.location.link_url }>
+					{ source.location.link_text }
+				</a>
+			);
+		case 'extra_key':
+			if ( source.dependency_type === 'style' ) {
+				return (
+					<code>
+						{ `wp_add_inline_style( "${ source.handle }", … )` }
+					</code>
+				);
+			}
+			if ( source.extra_key === 'data' ) {
+				return (
+					<code>
+						{ `wp_localize_script( "${ source.handle }", … )` }
+					</code>
+				);
+			}
+			if ( source.extra_key === 'before' ) {
+				return (
+					<code>
+						{ `wp_add_inline_script( "${ source.handle }", …, "before" )` }
+					</code>
+				);
+			}
+			if ( source.extra_key === 'after' ) {
+				return (
+					<code>
+						{ `wp_add_inline_script( "${ source.handle }", …, "after" )` }
+					</code>
+				);
+			}
+
+			return null;
+		case 'hook':
+			return (
+				<>
+					<code>
+						{ source.hook }
+					</code>
+					{ source.priority && source.priority !== null && sprintf(
+						/* translators: %d is the hook priority */
+						__( '(priority: %d)', 'amp' ),
+						source.priority,
+					) }
+				</>
+			);
+		case 'text':
+			return (
+				<details>
+					<summary>
+						<FormattedMemoryValue
+							value={ source.text.length }
+							unit="B"
+						/>
+					</summary>
+					<pre>
+						{ source.text }
+					</pre>
+				</details>
+			);
+		default:
+			// Render scalar value as is.
+			if ( ( /boolean|number|string/ ).test( typeof source[ slug ] ) ) {
+				return source[ slug ];
+			}
+
+			return (
+				<pre>
+					{ JSON.stringify( source[ slug ] ) }
+				</pre>
+			);
+	}
+}
+SourceDetailValue.propTypes = {
+	slug: PropTypes.string,
+	source: PropTypes.object,
+};
diff --git a/assets/src/components/source-label/index.js b/assets/src/components/source-label/index.js
index f7934f82c26..9d33d0fe6d5 100644
--- a/assets/src/components/source-label/index.js
+++ b/assets/src/components/source-label/index.js
@@ -22,7 +22,7 @@ import {
 	SOURCE_TYPE_HOOK,
 	SOURCE_TYPE_HOOK_THE_CONTENT,
 	SOURCE_TYPE_HOOK_THE_EXCERPT,
-} from '../../utils/summarize-sources';
+} from '../../utils/sources';
 
 export default function SourceLabel( {
 	sources,
@@ -44,10 +44,11 @@ export default function SourceLabel( {
 			break;
 		case SOURCE_TYPE_THEME:
 			icon = 'admin-appearance';
+			title = singleTitle ?? __( 'Theme', 'amp' );
 			break;
 		case SOURCE_TYPE_CORE:
 			icon = 'wordpress-alt';
-			title = __( 'Other', 'amp' );
+			title = __( 'Core', 'amp' );
 			break;
 		case SOURCE_TYPE_EMBED:
 			icon = 'wordpress-alt';
diff --git a/assets/src/components/source-label/test/index.js b/assets/src/components/source-label/test/index.js
index 6a9368faf54..f0a296a5a94 100644
--- a/assets/src/components/source-label/test/index.js
+++ b/assets/src/components/source-label/test/index.js
@@ -22,7 +22,7 @@ import {
 	SOURCE_TYPE_MU_PLUGIN,
 	SOURCE_TYPE_PLUGIN,
 	SOURCE_TYPE_THEME,
-} from '../../../utils/summarize-sources';
+} from '../../../utils/sources';
 
 let container;
 
@@ -138,7 +138,7 @@ describe( 'SourceLabel', () => {
 			'.dashicons-wordpress-alt',
 		],
 		[
-			'Other',
+			'Core',
 			{
 				type: SOURCE_TYPE_CORE,
 				sources: [ 'a', 'b' ],
diff --git a/assets/src/components/sources-stack/index.js b/assets/src/components/sources-stack/index.js
new file mode 100644
index 00000000000..65dc503c488
--- /dev/null
+++ b/assets/src/components/sources-stack/index.js
@@ -0,0 +1,66 @@
+/**
+ * WordPress dependencies
+ */
+import { _n, sprintf } from '@wordpress/i18n';
+
+/**
+ * External dependencies
+ */
+import PropTypes from 'prop-types';
+
+/**
+ * Internal dependencies
+ */
+import SourceDetails from '../source-details';
+
+export default function SourcesStack( { sources } ) {
+	if ( ! sources || ! Array.isArray( sources ) || sources.length === 0 ) {
+		return null;
+	}
+
+	return (
+		<details className="validation-error-sources-stack">
+			<summary>
+				{
+					sprintf(
+						/* translators: %s: number of sources. */
+						_n(
+							'Source stack (%s)',
+							'Sources stack (%s)',
+							sources.length,
+							'amp',
+						),
+						sources.length,
+					)
+				}
+			</summary>
+			<ol>
+				{ sources.map( ( source, index ) => (
+					<li key={ `source-details-${ index }` }>
+						<SourceDetails source={ source } />
+					</li>
+				) ) }
+			</ol>
+		</details>
+	);
+}
+SourcesStack.propTypes = {
+	sources: PropTypes.arrayOf(
+		PropTypes.shape( {
+			type: PropTypes.string,
+			name: PropTypes.string,
+			file: PropTypes.string,
+			line: PropTypes.number,
+			filter: PropTypes.bool,
+			function: PropTypes.string,
+			hook: PropTypes.string,
+			priority: PropTypes.number,
+			dependency_type: PropTypes.string,
+			handle: PropTypes.string,
+			text: PropTypes.string,
+			extra_key: PropTypes.string,
+			embed: PropTypes.string,
+			block_name: PropTypes.string,
+		} ),
+	).isRequired,
+};
diff --git a/assets/src/components/sources-stack/test/index.js b/assets/src/components/sources-stack/test/index.js
new file mode 100644
index 00000000000..ce1150370c7
--- /dev/null
+++ b/assets/src/components/sources-stack/test/index.js
@@ -0,0 +1,62 @@
+/**
+ * WordPress dependencies
+ */
+import { render } from '@wordpress/element';
+
+/**
+ * External dependencies
+ */
+import { act } from 'react-dom/test-utils';
+
+/**
+ * Internal dependencies
+ */
+import SourcesStack from '..';
+
+let container;
+
+describe( 'SourcesStack', () => {
+	beforeEach( () => {
+		container = document.createElement( 'div' );
+		document.body.appendChild( container );
+	} );
+
+	afterEach( () => {
+		document.body.removeChild( container );
+		container = null;
+	} );
+
+	it( 'renders nothing if no sources array is provided', () => {
+		act( () => {
+			render(
+				<SourcesStack sources={ [] } />,
+				container,
+			);
+		} );
+
+		expect( container.textContent ).toBe( '' );
+	} );
+
+	it( 'renders DETAILS element with correct title based on the sources count', () => {
+		act( () => {
+			render(
+				<SourcesStack
+					sources={ [
+						{ name: 'a' },
+						{ name: 'b' },
+						{ name: 'c' },
+					] }
+				/>,
+				container,
+			);
+		} );
+
+		expect( container.querySelector( 'details' ) ).not.toBeNull();
+
+		expect( container.querySelector( 'summary' ) ).not.toBeNull();
+		expect( container.querySelector( 'summary' ).textContent ).toBe( 'Sources stack (3)' );
+
+		expect( container.querySelector( 'ol' ) ).not.toBeNull();
+		expect( container.querySelectorAll( 'ol > li' ) ).toHaveLength( 3 );
+	} );
+} );
diff --git a/assets/src/components/sources-summary/index.js b/assets/src/components/sources-summary/index.js
index 5deaf896eb7..c716f60f1c2 100644
--- a/assets/src/components/sources-summary/index.js
+++ b/assets/src/components/sources-summary/index.js
@@ -6,9 +6,10 @@ import PropTypes from 'prop-types';
 /**
  * Internal dependencies
  */
-import summarizeSources, {
+import {
 	SOURCE_TYPE_THEME,
-} from '../../utils/summarize-sources';
+	summarizeSources,
+} from '../../utils/sources';
 import SourceLabel from '../source-label';
 
 export default function SourcesSummary( { sources, validatedTheme } ) {
diff --git a/assets/src/utils/sources/index.js b/assets/src/utils/sources/index.js
new file mode 100644
index 00000000000..36aff97dbb8
--- /dev/null
+++ b/assets/src/utils/sources/index.js
@@ -0,0 +1,11 @@
+export const SOURCE_TYPE_PLUGIN = 'plugin';
+export const SOURCE_TYPE_MU_PLUGIN = 'mu-plugin';
+export const SOURCE_TYPE_THEME = 'theme';
+export const SOURCE_TYPE_CORE = 'core';
+export const SOURCE_TYPE_EMBED = 'embed';
+export const SOURCE_TYPE_BLOCK = 'blocks';
+export const SOURCE_TYPE_HOOK = 'hook';
+export const SOURCE_TYPE_HOOK_THE_CONTENT = 'the_content';
+export const SOURCE_TYPE_HOOK_THE_EXCERPT = 'the_excerpt';
+
+export { default as summarizeSources } from './summarize';
diff --git a/assets/src/utils/summarize-sources/index.js b/assets/src/utils/sources/summarize.js
similarity index 83%
rename from assets/src/utils/summarize-sources/index.js
rename to assets/src/utils/sources/summarize.js
index 65335ef9ba6..6913da8dbde 100644
--- a/assets/src/utils/summarize-sources/index.js
+++ b/assets/src/utils/sources/summarize.js
@@ -1,12 +1,15 @@
-export const SOURCE_TYPE_PLUGIN = 'plugin';
-export const SOURCE_TYPE_MU_PLUGIN = 'mu-plugin';
-export const SOURCE_TYPE_THEME = 'theme';
-export const SOURCE_TYPE_CORE = 'core';
-export const SOURCE_TYPE_EMBED = 'embed';
-export const SOURCE_TYPE_BLOCK = 'blocks';
-export const SOURCE_TYPE_HOOK = 'hook';
-export const SOURCE_TYPE_HOOK_THE_CONTENT = 'the_content';
-export const SOURCE_TYPE_HOOK_THE_EXCERPT = 'the_excerpt';
+/**
+ * Internal dependencies
+ */
+import {
+	SOURCE_TYPE_BLOCK,
+	SOURCE_TYPE_CORE,
+	SOURCE_TYPE_EMBED,
+	SOURCE_TYPE_HOOK,
+	SOURCE_TYPE_MU_PLUGIN,
+	SOURCE_TYPE_PLUGIN,
+	SOURCE_TYPE_THEME,
+} from './index';
 
 /**
  * Summarize sources.
diff --git a/assets/src/utils/summarize-sources/test/index.js b/assets/src/utils/sources/test/summarize.js
similarity index 99%
rename from assets/src/utils/summarize-sources/test/index.js
rename to assets/src/utils/sources/test/summarize.js
index 1e6a99c3d4c..a74a365a79a 100644
--- a/assets/src/utils/summarize-sources/test/index.js
+++ b/assets/src/utils/sources/test/summarize.js
@@ -1,7 +1,7 @@
 /**
  * Internal dependencies
  */
-import summarizeSources, {
+import {
 	SOURCE_TYPE_PLUGIN,
 	SOURCE_TYPE_MU_PLUGIN,
 	SOURCE_TYPE_THEME,
@@ -9,6 +9,7 @@ import summarizeSources, {
 	SOURCE_TYPE_EMBED,
 	SOURCE_TYPE_BLOCK,
 	SOURCE_TYPE_HOOK,
+	summarizeSources,
 } from '..';
 
 describe( 'summarizeSources', () => {
diff --git a/assets/src/validated-url-page/components/stylesheets-table/index.js b/assets/src/validated-url-page/components/stylesheets-table/index.js
index d143b674a8c..0da9e7afa19 100644
--- a/assets/src/validated-url-page/components/stylesheets-table/index.js
+++ b/assets/src/validated-url-page/components/stylesheets-table/index.js
@@ -18,7 +18,7 @@ export default function StylesheetsTable( {
 	const validatedTheme = environment?.theme ? Object.keys( environment.theme )[ 0 ] : '';
 
 	return (
-		<table className="amp-stylesheet-list wp-list-table widefat fixed striped">
+		<table className="amp-stylesheet-list amp-stylesheet-table wp-list-table widefat fixed striped">
 			<StylesheetsTableHead />
 			<tbody>
 				{ stylesheets.map( ( stylesheet, index ) => (
diff --git a/assets/src/validated-url-page/components/stylesheets-table/row.js b/assets/src/validated-url-page/components/stylesheets-table/row.js
index e373e7737af..da0c5959652 100644
--- a/assets/src/validated-url-page/components/stylesheets-table/row.js
+++ b/assets/src/validated-url-page/components/stylesheets-table/row.js
@@ -16,6 +16,7 @@ import { Button } from '@wordpress/components';
 import FormattedMemoryValue from '../../../components/formatted-memory-value';
 import { ValidationStatusIcon } from '../../../components/icon';
 import ShakenTokensDiff from '../../../components/shaken-tokens-diff';
+import SourcesStack from '../../../components/sources-stack';
 import SourcesSummary from '../../../components/sources-summary';
 
 export default function StylesheetsTableRow( {
@@ -125,6 +126,12 @@ export default function StylesheetsTableRow( {
 									{ orignalTag }
 								</code>
 							</dd>
+							<dt>
+								{ __( 'Sources', 'amp' ) }
+							</dt>
+							<dd>
+								<SourcesStack sources={ sources } />
+							</dd>
 							<dt>
 								{ __( 'CSS Code', 'amp' ) }
 							</dt>
diff --git a/src/Validation/ValidatedUrlData.php b/src/Validation/ValidatedUrlData.php
index 358143758ad..39b29784854 100644
--- a/src/Validation/ValidatedUrlData.php
+++ b/src/Validation/ValidatedUrlData.php
@@ -10,6 +10,7 @@
 
 use AMP_Style_Sanitizer;
 use AMP_Validated_URL_Post_Type;
+use AmpProject\AmpWP\Services;
 use WP_Error;
 use WP_Post;
 
@@ -127,6 +128,10 @@ public function get_stylesheets() {
 		foreach ( $stylesheets as $key => $stylesheet ) {
 			$stylesheets[ $key ]['original_tag_abbr'] = $this->format_stylesheet_original_tag_abbreviation( $stylesheet['origin'] );
 			$stylesheets[ $key ]['original_tag']      = $this->format_stylesheet_original_tag( $stylesheet['element']['name'], $stylesheet['element']['attributes'] );
+
+			if ( ! empty( $stylesheet['sources'] ) ) {
+				$stylesheets[ $key ]['sources'] = $this->format_sources( $stylesheet['sources'] );
+			}
 		}
 
 		$this->stylesheets = $stylesheets;
@@ -203,4 +208,159 @@ private function format_stylesheet_original_tag( $name, $attributes ) {
 
 		return $result;
 	}
+
+	/**
+	 * Format sources list.
+	 *
+	 * @param array $sources Sources list.
+	 *
+	 * @return array Formatted sources array.
+	 */
+	private function format_sources( $sources ) {
+		if ( empty( $sources ) ) {
+			return $sources;
+		}
+
+		foreach ( $sources as $key => $source ) {
+			if ( 'sources' === $source['type'] ) {
+				return $this->format_sources( $source );
+			}
+
+			if ( isset( $source['file'], $source['line'] ) ) {
+				$sources[ $key ]['location'] = [
+					'link_text' => $source['file'] . ':' . $source['line'],
+					'link_url'  => $this->get_file_editor_url( $source ),
+				];
+			}
+		}
+
+		return $sources;
+	}
+
+	/**
+	 * Get the URL for opening the file for a AMP validation error in an external editor.
+	 *
+	 * @since 1.4
+	 *
+	 * @param array $source Source for AMP validation error.
+	 * @return string|null File editor URL or null if not available.
+	 */
+	private function get_file_editor_url( $source ) {
+		if ( ! isset( $source['file'], $source['line'], $source['type'], $source['name'] ) ) {
+			return null;
+		}
+
+		$edit_url = null;
+
+		/**
+		 * Filters the template for the URL for linking to an external editor to open a file for editing.
+		 *
+		 * Users of IDEs that support opening files in via web protocols can use this filter to override
+		 * the edit link to result in their editor opening rather than the theme/plugin editor.
+		 *
+		 * The initial filtered value is null, requiring extension plugins to supply the URL template
+		 * string themselves. If no template string is provided, links to the theme/plugin editors will
+		 * be provided if available. For example, for an extension plugin to cause file edit links to
+		 * open in PhpStorm, the following filter can be used:
+		 *
+		 *     add_filter( 'amp_validation_error_source_file_editor_url_template', function () {
+		 *         return 'phpstorm://open?file={{file}}&line={{line}}';
+		 *     } );
+		 *
+		 * For a template to be considered, the string '{{file}}' must be present in the filtered value.
+		 *
+		 * @since 1.4
+		 *
+		 * @param string|null $editor_url_template Editor URL template.
+		 */
+		$editor_url_template = apply_filters( 'amp_validation_error_source_file_editor_url_template', null );
+
+		// Supply the file path to the editor template.
+		if ( null !== $editor_url_template && false !== strpos( $editor_url_template, '{{file}}' ) ) {
+			$file_path = null;
+			if ( 'core' === $source['type'] ) {
+				if ( 'wp-includes' === $source['name'] ) {
+					$file_path = ABSPATH . WPINC . '/' . $source['file'];
+				} elseif ( 'wp-admin' === $source['name'] ) {
+					$file_path = ABSPATH . 'wp-admin/' . $source['file'];
+				}
+			} elseif ( 'plugin' === $source['type'] ) {
+				$file_path = WP_PLUGIN_DIR . '/' . $source['name'];
+				if ( $source['name'] !== $source['file'] ) {
+					$file_path .= '/' . $source['file'];
+				}
+			} elseif ( 'mu-plugin' === $source['type'] ) {
+				$file_path = WPMU_PLUGIN_DIR . '/' . $source['name'];
+			} elseif ( 'theme' === $source['type'] ) {
+				$theme = wp_get_theme( $source['name'] );
+				if ( $theme instanceof WP_Theme && ! $theme->errors() ) {
+					$file_path = $theme->get_stylesheet_directory() . '/' . $source['file'];
+				}
+			}
+
+			if ( $file_path && file_exists( $file_path ) ) {
+				/**
+				 * Filters the file path to be opened in an external editor for a given AMP validation error source.
+				 *
+				 * This is useful to map the file path from inside of a Docker container or VM to the host machine.
+				 *
+				 * @since 1.4
+				 *
+				 * @param string|null $editor_url_template Editor URL template.
+				 * @param array       $source              Source information.
+				 */
+				$file_path = apply_filters( 'amp_validation_error_source_file_path', $file_path, $source );
+				if ( $file_path ) {
+					$edit_url = str_replace(
+						[
+							'{{file}}',
+							'{{line}}',
+						],
+						[
+							rawurlencode( $file_path ),
+							rawurlencode( $source['line'] ),
+						],
+						$editor_url_template
+					);
+				}
+			}
+		}
+
+		// Fall back to using the theme/plugin editors if no external editor is offered.
+		if ( ! $edit_url ) {
+			if ( 'plugin' === $source['type'] && current_user_can( 'edit_plugins' ) ) {
+				$plugin_registry = Services::get( 'plugin_registry' );
+				$plugin          = $plugin_registry->get_plugin_from_slug( $source['name'] );
+				if ( $plugin ) {
+					$file = $source['file'];
+
+					// Prepend the plugin directory name to the file name as the plugin editor requires.
+					$i = strpos( $plugin['file'], '/' );
+					if ( false !== $i ) {
+						$file = substr( $plugin['file'], 0, $i ) . '/' . $file;
+					}
+
+					$edit_url = add_query_arg(
+						[
+							'plugin' => rawurlencode( $plugin['file'] ),
+							'file'   => rawurlencode( $file ),
+							'line'   => rawurlencode( $source['line'] ),
+						],
+						admin_url( 'plugin-editor.php' )
+					);
+				}
+			} elseif ( 'theme' === $source['type'] && current_user_can( 'edit_themes' ) ) {
+				$edit_url = add_query_arg(
+					[
+						'file'  => rawurlencode( $source['file'] ),
+						'theme' => rawurlencode( $source['name'] ),
+						'line'  => rawurlencode( $source['line'] ),
+					],
+					admin_url( 'theme-editor.php' )
+				);
+			}
+		}
+
+		return $edit_url;
+	}
 }

From cf9866c163e20ba87434a80d7acc2b12da43b236 Mon Sep 17 00:00:00 2001
From: Piotr Delawski <piotr.delawski@gmail.com>
Date: Wed, 28 Jul 2021 19:52:34 +0300
Subject: [PATCH 39/58] Memoize summarized sources

---
 .../src/components/sources-summary/index.js   | 19 +++++++++++++++----
 1 file changed, 15 insertions(+), 4 deletions(-)

diff --git a/assets/src/components/sources-summary/index.js b/assets/src/components/sources-summary/index.js
index c716f60f1c2..88c97f279e6 100644
--- a/assets/src/components/sources-summary/index.js
+++ b/assets/src/components/sources-summary/index.js
@@ -3,6 +3,11 @@
  */
 import PropTypes from 'prop-types';
 
+/**
+ * WordPress dependencies
+ */
+import { useMemo } from '@wordpress/element';
+
 /**
  * Internal dependencies
  */
@@ -13,11 +18,13 @@ import {
 import SourceLabel from '../source-label';
 
 export default function SourcesSummary( { sources, validatedTheme } ) {
-	if ( ! sources || ! Array.isArray( sources ) || sources.length === 0 ) {
-		return null;
-	}
+	const summarizedSources = useMemo( () => {
+		if ( ! sources || ! Array.isArray( sources ) || sources.length === 0 ) {
+			return null;
+		}
 
-	const summarizedSources = summarizeSources( sources );
+		return summarizeSources( sources );
+	}, [ sources ] );
 
 	if ( ! summarizedSources && validatedTheme ) {
 		return (
@@ -25,6 +32,10 @@ export default function SourcesSummary( { sources, validatedTheme } ) {
 		);
 	}
 
+	if ( ! summarizedSources ) {
+		return null;
+	}
+
 	return Object.keys( summarizedSources ).map( ( type ) => (
 		<SourceLabel
 			key={ type }

From b9614c9043ce022f6a4ca19c1b2a42d9b9599cdd Mon Sep 17 00:00:00 2001
From: Piotr Delawski <piotr.delawski@gmail.com>
Date: Wed, 28 Jul 2021 20:16:30 +0300
Subject: [PATCH 40/58] Add loading state to shaken CSS tokens diff

---
 .../components/shaken-tokens-diff/index.js    | 22 ++++++++++++-------
 1 file changed, 14 insertions(+), 8 deletions(-)

diff --git a/assets/src/components/shaken-tokens-diff/index.js b/assets/src/components/shaken-tokens-diff/index.js
index da47027322f..04a9682e7b0 100644
--- a/assets/src/components/shaken-tokens-diff/index.js
+++ b/assets/src/components/shaken-tokens-diff/index.js
@@ -7,13 +7,14 @@ import PropTypes from 'prop-types';
 /**
  * WordPress dependencies
  */
-import { useMemo, useState } from '@wordpress/element';
+import { useEffect, useState } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { FormToggle } from '@wordpress/components';
 
 /**
  * Internal dependencies
  */
+import { Loading } from '../loading';
 import Declaration from './declaration';
 
 export default function ShakenTokensDiff( {
@@ -21,10 +22,13 @@ export default function ShakenTokensDiff( {
 	tokens,
 } ) {
 	const [ showRemovedStyles, setShowRemovedStyles ] = useState( false );
+	const [ tokensTree, setTokensTree ] = useState();
+	const [ insCount, setInsCount ] = useState( 0 );
+	const [ delCount, setDelCount ] = useState( 0 );
 
-	const { tokensTree, insCount, delCount } = useMemo( () => {
+	useEffect( () => {
 		if ( ! tokens || ! Array.isArray( tokens ) || tokens.length === 0 ) {
-			return {};
+			return;
 		}
 
 		let _insCount = 0;
@@ -68,13 +72,15 @@ export default function ShakenTokensDiff( {
 			];
 		}, [] );
 
-		return {
-			tokensTree: _tokensTree,
-			insCount: _insCount,
-			delCount: _delCount,
-		};
+		setTokensTree( _tokensTree );
+		setInsCount( _insCount );
+		setDelCount( _delCount );
 	}, [ origin, tokens ] );
 
+	if ( ! tokensTree ) {
+		return <Loading />;
+	}
+
 	return (
 		<>
 			{ insCount === 0 && (

From e1165f6ee29e52643b02fd77d687424198543b3c Mon Sep 17 00:00:00 2001
From: Piotr Delawski <piotr.delawski@gmail.com>
Date: Wed, 28 Jul 2021 20:20:12 +0300
Subject: [PATCH 41/58] Add some spacing to shaken tokens diff toggle

---
 assets/css/src/components/_amp-stylesheet-list.scss | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/assets/css/src/components/_amp-stylesheet-list.scss b/assets/css/src/components/_amp-stylesheet-list.scss
index 2b04bc08775..ae0568b07b8 100644
--- a/assets/css/src/components/_amp-stylesheet-list.scss
+++ b/assets/css/src/components/_amp-stylesheet-list.scss
@@ -74,6 +74,10 @@
 			margin-bottom: 0;
 			padding-bottom: 0;
 		}
+
+		.components-form-toggle {
+			margin-right: 0.5em;
+		}
 	}
 
 	.stylesheet.expanded + .stylesheet-details {

From 18ffb6bb21347740dc5bb0e1115b9f98e88e5ad8 Mon Sep 17 00:00:00 2001
From: Piotr Delawski <piotr.delawski@gmail.com>
Date: Thu, 29 Jul 2021 12:27:50 +0300
Subject: [PATCH 42/58] Add Validated URL data preloading via `RESTPreloader`

---
 .phpstorm.meta.php                                        | 1 +
 includes/validation/class-amp-validated-url-post-type.php | 3 +++
 src/AmpWpPlugin.php                                       | 1 +
 3 files changed, 5 insertions(+)

diff --git a/.phpstorm.meta.php b/.phpstorm.meta.php
index edaaa686499..e9417f3284c 100644
--- a/.phpstorm.meta.php
+++ b/.phpstorm.meta.php
@@ -15,6 +15,7 @@
 			'admin.paired_browsing'              => \AmpProject\AmpWP\Admin\PairedBrowsing::class,
 			'admin.plugin_row_meta'              => \AmpProject\AmpWP\Admin\PluginRowMeta::class,
 			'admin.polyfills'                    => \AmpProject\AmpWP\Admin\Polyfills::class,
+			'admin.rest_preloader'               => \AmpProject\AmpWP\Admin\RESTPreloader::class,
 			'admin.validation_counts'            => \AmpProject\AmpWP\Admin\ValidationCounts::class,
 			'amp_slug_customization_watcher'     => \AmpProject\AmpWP\AmpSlugCustomizationWatcher::class,
 			'background_task_deactivator'        => \AmpProject\AmpWP\BackgroundTask\BackgroundTaskDeactivator::class,
diff --git a/includes/validation/class-amp-validated-url-post-type.php b/includes/validation/class-amp-validated-url-post-type.php
index 0581d28b04e..7ece46c16ba 100644
--- a/includes/validation/class-amp-validated-url-post-type.php
+++ b/includes/validation/class-amp-validated-url-post-type.php
@@ -2070,6 +2070,9 @@ public static function enqueue_edit_post_screen_scripts() {
 			'before'
 		);
 
+		// Preload Validated URL data.
+		Services::get( 'admin.rest_preloader' )->add_preloaded_path( '/amp/v1/validated-urls/' . $post->ID );
+
 		if ( function_exists( 'wp_set_script_translations' ) ) {
 			wp_set_script_translations( self::EDIT_POST_SCRIPT_HANDLE, 'amp' );
 		} elseif ( function_exists( 'wp_get_jed_locale_data' ) || function_exists( 'gutenberg_get_jed_locale_data' ) ) {
diff --git a/src/AmpWpPlugin.php b/src/AmpWpPlugin.php
index c2dd276f58e..fe0be8e0a8f 100644
--- a/src/AmpWpPlugin.php
+++ b/src/AmpWpPlugin.php
@@ -75,6 +75,7 @@ final class AmpWpPlugin extends ServiceBasedPlugin {
 		'admin.paired_browsing'              => Admin\PairedBrowsing::class,
 		'admin.plugin_row_meta'              => Admin\PluginRowMeta::class,
 		'admin.polyfills'                    => Admin\Polyfills::class,
+		'admin.rest_preloader'               => Admin\RESTPreloader::class,
 		'admin.validation_counts'            => Admin\ValidationCounts::class,
 		'amp_slug_customization_watcher'     => AmpSlugCustomizationWatcher::class,
 		'background_task_deactivator'        => BackgroundTaskDeactivator::class,

From 937fa02321c8d3f35221d93d2f2b1509d60a063d Mon Sep 17 00:00:00 2001
From: Piotr Delawski <piotr.delawski@gmail.com>
Date: Thu, 29 Jul 2021 12:42:30 +0300
Subject: [PATCH 43/58] Add missing import

---
 src/Validation/ValidatedUrlData.php | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/Validation/ValidatedUrlData.php b/src/Validation/ValidatedUrlData.php
index 39b29784854..ecf62a4ab45 100644
--- a/src/Validation/ValidatedUrlData.php
+++ b/src/Validation/ValidatedUrlData.php
@@ -13,6 +13,7 @@
 use AmpProject\AmpWP\Services;
 use WP_Error;
 use WP_Post;
+use WP_Theme;
 
 /**
  * ValidatedUrlData class.

From 4ba9b421135c663b5e3892a0d2a3a310aac1fd46 Mon Sep 17 00:00:00 2001
From: Piotr Delawski <piotr.delawski@gmail.com>
Date: Thu, 29 Jul 2021 14:09:45 +0300
Subject: [PATCH 44/58] Move `validated-url` endpoint to separate controller
 and add schema

---
 src/AmpWpPlugin.php                           |   1 +
 .../URLValidationRESTController.php           | 103 +-----
 src/Validation/ValidatedUrlRESTController.php | 327 ++++++++++++++++++
 .../URLValidationRESTControllerTest.php       | 108 +-----
 .../ValidatedUrlRESTControllerTest.php        | 215 ++++++++++++
 5 files changed, 548 insertions(+), 206 deletions(-)
 create mode 100644 src/Validation/ValidatedUrlRESTController.php
 create mode 100644 tests/php/src/Validation/ValidatedUrlRESTControllerTest.php

diff --git a/src/AmpWpPlugin.php b/src/AmpWpPlugin.php
index fe0be8e0a8f..e72dec81944 100644
--- a/src/AmpWpPlugin.php
+++ b/src/AmpWpPlugin.php
@@ -113,6 +113,7 @@ final class AmpWpPlugin extends ServiceBasedPlugin {
 		'site_health_integration'            => Admin\SiteHealth::class,
 		'url_validation_cron'                => URLValidationCron::class,
 		'url_validation_rest_controller'     => Validation\URLValidationRESTController::class,
+		'validated_url_rest_controller'      => Validation\ValidatedUrlRESTController::class,
 		'validated_url_stylesheet_gc'        => BackgroundTask\ValidatedUrlStylesheetDataGarbageCollection::class,
 	];
 
diff --git a/src/Validation/URLValidationRESTController.php b/src/Validation/URLValidationRESTController.php
index 31573739ff9..249e90aae9a 100644
--- a/src/Validation/URLValidationRESTController.php
+++ b/src/Validation/URLValidationRESTController.php
@@ -43,13 +43,6 @@ final class URLValidationRESTController extends WP_REST_Controller implements De
 	 */
 	private $dev_tools_user_access;
 
-	/**
-	 * ValidatedUrlDataProvider instance.
-	 *
-	 * @var ValidatedUrlDataProvider
-	 */
-	private $validated_url_data_provider;
-
 	/**
 	 * Response schema.
 	 *
@@ -71,13 +64,11 @@ public static function get_registration_action() {
 	 *
 	 * @param URLValidationProvider    $url_validation_provider     URLValidationProvider instance.
 	 * @param UserAccess               $dev_tools_user_access       UserAccess instance.
-	 * @param ValidatedUrlDataProvider $validated_url_data_provider ValidatedUrlDataProvider instance.
 	 */
-	public function __construct( URLValidationProvider $url_validation_provider, UserAccess $dev_tools_user_access, ValidatedUrlDataProvider $validated_url_data_provider ) {
-		$this->namespace                   = 'amp/v1';
-		$this->url_validation_provider     = $url_validation_provider;
-		$this->dev_tools_user_access       = $dev_tools_user_access;
-		$this->validated_url_data_provider = $validated_url_data_provider;
+	public function __construct( URLValidationProvider $url_validation_provider, UserAccess $dev_tools_user_access ) {
+		$this->namespace               = 'amp/v1';
+		$this->url_validation_provider = $url_validation_provider;
+		$this->dev_tools_user_access   = $dev_tools_user_access;
 	}
 
 	/**
@@ -112,31 +103,6 @@ public function register() {
 				'schema' => [ $this, 'get_public_item_schema' ],
 			]
 		);
-
-		register_rest_route(
-			$this->namespace,
-			'/validated-urls/(?P<id>[\d]+)',
-			[
-				'args'   => [
-					'id' => [
-						'description'       => __( 'Post ID for the AMP validated URL post.', 'amp' ),
-						'required'          => true,
-						'type'              => 'integer',
-						'minimum'           => 1,
-						'validate_callback' => [ $this, 'validate_amp_validated_url_post_id_param' ],
-					],
-				],
-				[
-					'args'                => $this->get_endpoint_args_for_item_schema( WP_REST_Server::READABLE ),
-					'methods'             => WP_REST_Server::READABLE,
-					'callback'            => [ $this, 'get_validated_url' ],
-					'permission_callback' => [ $this, 'get_item_permissions_check' ],
-				],
-				'schema' => [ $this, 'get_public_item_schema' ],
-			]
-		);
-
-		// @todo Additional endpoint to validate a URL (from a URL rather than a post ID).
 	}
 
 	/**
@@ -175,38 +141,6 @@ public function validate_post_id_param( $id, $request, $param ) {
 		return true;
 	}
 
-	/**
-	 * Validate AMP validated URL post ID param.
-	 *
-	 * @param string|int      $id      Post ID.
-	 * @param WP_REST_Request $request REST request.
-	 * @param string          $param   Param name ('id').
-	 * @return true|WP_Error True on valid, WP_Error otherwise.
-	 */
-	public function validate_amp_validated_url_post_id_param( $id, $request, $param ) {
-		// First enforce the schema to ensure $id is an integer greater than 0.
-		$validity = rest_validate_request_arg( $id, $request, $param );
-		if ( is_wp_error( $validity ) ) {
-			return $validity;
-		}
-
-		// Make sure the post exists and is of correct post type.
-		$post = get_post( (int) $id );
-		if (
-			! $post instanceof WP_Post
-			||
-			AMP_Validated_URL_Post_Type::POST_TYPE_SLUG !== get_post_type( $post )
-		) {
-			return new WP_Error(
-				'rest_amp_validated_url_post_invalid_id',
-				__( 'Invalid post ID.', 'default' ),
-				[ 'status' => 404 ]
-			);
-		}
-
-		return true;
-	}
-
 	/**
 	 * Checks whether the current user can view AMP validation results.
 	 *
@@ -246,8 +180,6 @@ public function get_item_permissions_check( $request ) { // phpcs:ignore Variabl
 	/**
 	 * Validate preview nonce.
 	 *
-	 * @see _show_post_preview()
-	 *
 	 * @param string $preview_nonce Preview nonce.
 	 * @param int    $post_id       Post ID.
 	 * @return bool Whether the preview nonce is valid.
@@ -322,33 +254,6 @@ public function validate_post_url( $request ) {
 		return rest_ensure_response( $this->filter_response_by_context( $data, $request['context'] ) );
 	}
 
-	/**
-	 * Returns validation information about a URL.
-	 *
-	 * @param WP_REST_Request $request Full details about the request.
-	 *
-	 * @return WP_REST_Response|WP_Error Response object on success, or WP_Error object on failure.
-	 */
-	public function get_validated_url( $request ) {
-		$post_id            = (int) $request['id'];
-		$validated_url_data = $this->validated_url_data_provider->for_id( $post_id );
-
-		if ( is_wp_error( $validated_url_data ) ) {
-			return $validated_url_data;
-		}
-
-		$data = [
-			'id'          => $validated_url_data->get_id(),
-			'url'         => $validated_url_data->get_url(),
-			'date'        => $validated_url_data->get_date(),
-			'author'      => $validated_url_data->get_author(),
-			'stylesheets' => $validated_url_data->get_stylesheets(),
-			'environment' => $validated_url_data->get_environment(),
-		];
-
-		return rest_ensure_response( $this->filter_response_by_context( $data, $request['context'] ) );
-	}
-
 	/**
 	 * Retrieves the schema for plugin options provided by the endpoint.
 	 *
diff --git a/src/Validation/ValidatedUrlRESTController.php b/src/Validation/ValidatedUrlRESTController.php
new file mode 100644
index 00000000000..1f255cf19d1
--- /dev/null
+++ b/src/Validation/ValidatedUrlRESTController.php
@@ -0,0 +1,327 @@
+<?php
+/**
+ * REST endpoint providing Validated URL data.
+ *
+ * @package AMP
+ * @since   2.2
+ */
+
+namespace AmpProject\AmpWP\Validation;
+
+use AMP_Validated_URL_Post_Type;
+use AmpProject\AmpWP\DevTools\UserAccess;
+use AmpProject\AmpWP\Infrastructure\Delayed;
+use AmpProject\AmpWP\Infrastructure\Registerable;
+use AmpProject\AmpWP\Infrastructure\Service;
+use WP_Error;
+use WP_REST_Controller;
+use WP_Post;
+use WP_REST_Request;
+use WP_REST_Response;
+use WP_REST_Server;
+
+/**
+ * ValidatedUrlRESTController class.
+ *
+ * @since 2.2
+ * @internal
+ */
+final class ValidatedUrlRESTController extends WP_REST_Controller implements Delayed, Service, Registerable {
+
+	/**
+	 * UserAccess instance.
+	 *
+	 * @var UserAccess
+	 */
+	private $dev_tools_user_access;
+
+	/**
+	 * ValidatedUrlDataProvider instance.
+	 *
+	 * @var ValidatedUrlDataProvider
+	 */
+	private $validated_url_data_provider;
+
+	/**
+	 * Response schema.
+	 *
+	 * @var array
+	 */
+	protected $schema;
+
+	/**
+	 * Get the action to use for registering the service.
+	 *
+	 * @return string Registration action to use.
+	 */
+	public static function get_registration_action() {
+		return 'rest_api_init';
+	}
+
+	/**
+	 * Constructor.
+	 *
+	 * @param UserAccess               $dev_tools_user_access       UserAccess instance.
+	 * @param ValidatedUrlDataProvider $validated_url_data_provider ValidatedUrlDataProvider instance.
+	 */
+	public function __construct( UserAccess $dev_tools_user_access, ValidatedUrlDataProvider $validated_url_data_provider ) {
+		$this->namespace                   = 'amp/v1';
+		$this->dev_tools_user_access       = $dev_tools_user_access;
+		$this->validated_url_data_provider = $validated_url_data_provider;
+	}
+
+	/**
+	 * Registers all routes for the controller.
+	 */
+	public function register() {
+		register_rest_route(
+			$this->namespace,
+			'/validated-urls/(?P<id>[\d]+)',
+			[
+				'args'   => [
+					'id' => [
+						'description'       => __( 'Post ID for the AMP validated URL post.', 'amp' ),
+						'required'          => true,
+						'type'              => 'integer',
+						'minimum'           => 1,
+						'validate_callback' => [ $this, 'validate_post_id_param' ],
+					],
+				],
+				[
+					'args'                => $this->get_endpoint_args_for_item_schema( WP_REST_Server::READABLE ),
+					'methods'             => WP_REST_Server::READABLE,
+					'callback'            => [ $this, 'get_item' ],
+					'permission_callback' => [ $this, 'get_item_permissions_check' ],
+				],
+				'schema' => [ $this, 'get_item_schema' ],
+			]
+		);
+	}
+
+	/**
+	 * Validate post ID param.
+	 *
+	 * @param string|int      $id      Post ID.
+	 * @param WP_REST_Request $request REST request.
+	 * @param string          $param   Param name ('id').
+	 *
+	 * @return true|WP_Error True on valid, WP_Error otherwise.
+	 */
+	public function validate_post_id_param( $id, $request, $param ) {
+		// First enforce the schema to ensure $id is an integer greater than 0.
+		$validity = rest_validate_request_arg( $id, $request, $param );
+		if ( is_wp_error( $validity ) ) {
+			return $validity;
+		}
+
+		// Make sure the post exists and is of correct post type.
+		$post = get_post( (int) $id );
+		if (
+			! $post instanceof WP_Post
+			||
+			AMP_Validated_URL_Post_Type::POST_TYPE_SLUG !== get_post_type( $post )
+		) {
+			return new WP_Error(
+				'rest_amp_validated_url_post_invalid_id',
+				__( 'Invalid post ID.', 'default' ),
+				[ 'status' => 404 ]
+			);
+		}
+
+		return true;
+	}
+
+	/**
+	 * Checks whether the current user can view results of a URL AMP validation.
+	 *
+	 * @param WP_REST_Request $request Full details about the request.
+	 *
+	 * @return true|WP_Error True if the request has permission; WP_Error object otherwise.
+	 */
+	public function get_item_permissions_check( $request ) { // phpcs:ignore VariableAnalysis.CodeAnalysis.VariableAnalysis.UnusedVariable
+		if ( ! $this->dev_tools_user_access->is_user_enabled() ) {
+			return new WP_Error(
+				'amp_rest_no_dev_tools',
+				__( 'Sorry, you do not have access to dev tools for the AMP plugin for WordPress.', 'amp' ),
+				[ 'status' => rest_authorization_required_code() ]
+			);
+		}
+
+		return true;
+	}
+
+	/**
+	 * Returns validation information about a URL.
+	 *
+	 * @param WP_REST_Request $request Full details about the request.
+	 *
+	 * @return WP_REST_Response|WP_Error Response object on success, or WP_Error object on failure.
+	 */
+	public function get_item( $request ) {
+		$post_id            = (int) $request['id'];
+		$validated_url_data = $this->validated_url_data_provider->for_id( $post_id );
+
+		if ( is_wp_error( $validated_url_data ) ) {
+			return $validated_url_data;
+		}
+
+		$data = [
+			'id'          => $validated_url_data->get_id(),
+			'url'         => $validated_url_data->get_url(),
+			'date'        => $validated_url_data->get_date(),
+			'author'      => $validated_url_data->get_author(),
+			'stylesheets' => $validated_url_data->get_stylesheets(),
+			'environment' => $validated_url_data->get_environment(),
+		];
+
+		return rest_ensure_response( $this->filter_response_by_context( $data, $request['context'] ) );
+	}
+
+	/**
+	 * Retrieves the schema for Validated URL data provided by the endpoint.
+	 *
+	 * @return array Item schema data.
+	 */
+	public function get_item_schema() {
+		if ( $this->schema ) {
+			return $this->schema;
+		}
+
+		$this->schema = [
+			'$schema'    => 'http://json-schema.org/draft-04/schema#',
+			'title'      => 'amp-wp-validated-url',
+			'type'       => 'object',
+			'properties' => [
+				'id'          => [
+					'description' => esc_html__( 'Unique identifier for the object.', 'amp' ),
+					'type'        => 'integer',
+					'readonly'    => true,
+				],
+				'url'         => [
+					'description' => esc_html__( 'URL that was validated.', 'amp' ),
+					'type'        => 'string',
+					'readonly'    => true,
+				],
+				'date'        => [
+					'description' => esc_html__( 'Date that the URL was validated.', 'amp' ),
+					'type'        => 'string',
+					'readonly'    => true,
+				],
+				'author'      => [
+					'description' => esc_html__( 'User ID who last validated the URL.', 'amp' ),
+					'type'        => 'integer',
+					'readonly'    => true,
+				],
+				'stylesheets' => [
+					'description' => esc_html__( 'Stylesheet data.', 'amp' ),
+					'type'        => 'array',
+					'readonly'    => true,
+					'items'       => [
+						'type'       => 'object',
+						'properties' => [
+							'group'              => [
+								'type'     => 'string',
+								'readonly' => true,
+							],
+							'original_size'      => [
+								'type'     => 'integer',
+								'readonly' => true,
+							],
+							'final_size'         => [
+								'type'     => 'integer',
+								'readonly' => true,
+							],
+							'element'            => [
+								'type'       => 'object',
+								'readonly'   => true,
+								'properties' => [
+									'name'       => [
+										'type'     => 'string',
+										'readonly' => true,
+									],
+									'attributes' => [
+										'type'     => 'object',
+										'readonly' => true,
+									],
+								],
+							],
+							'origin'             => [
+								'type'     => 'string',
+								'readonly' => true,
+							],
+							'sources'            => [
+								'type'     => 'array',
+								'readonly' => true,
+								'items'    => [
+									'type'     => 'object',
+									'readonly' => true,
+								],
+							],
+							'priority'           => [
+								'type'     => 'integer',
+								'readonly' => true,
+							],
+							'hash'               => [
+								'type'     => 'string',
+								'readonly' => true,
+							],
+							'parse_time'         => [
+								'type'     => 'number',
+								'readonly' => true,
+							],
+							'shake_time'         => [
+								'type'     => 'number',
+								'readonly' => true,
+							],
+							'cached'             => [
+								'type'     => 'string',
+								'readonly' => true,
+							],
+							'imported_font_urls' => [
+								'type'     => 'string',
+								'readonly' => true,
+							],
+							'shaken_tokens'      => [
+								'type'     => 'array',
+								'readonly' => true,
+							],
+							'included'           => [
+								'type'     => 'string',
+								'readonly' => true,
+							],
+							'original_tag_abbr'  => [
+								'type'     => 'string',
+								'readonly' => true,
+							],
+							'original_tag'       => [
+								'type'     => 'string',
+								'readonly' => true,
+							],
+						],
+					],
+				],
+				'environment' => [
+					'description' => esc_html__( 'Validated environment information.', 'amp' ),
+					'type'        => 'object',
+					'readonly'    => true,
+					'properties'  => [
+						'theme'   => [
+							'type'     => 'object',
+							'readonly' => true,
+						],
+						'plugins' => [
+							'type'     => 'object',
+							'readonly' => true,
+						],
+						'options' => [
+							'type'     => 'object',
+							'readonly' => true,
+						],
+					],
+				],
+			],
+		];
+
+		return $this->schema;
+	}
+}
diff --git a/tests/php/src/Validation/URLValidationRESTControllerTest.php b/tests/php/src/Validation/URLValidationRESTControllerTest.php
index 050e84eb3d7..bfce599b4dc 100644
--- a/tests/php/src/Validation/URLValidationRESTControllerTest.php
+++ b/tests/php/src/Validation/URLValidationRESTControllerTest.php
@@ -12,7 +12,6 @@
 use AmpProject\AmpWP\Tests\TestCase;
 use AmpProject\AmpWP\Validation\URLValidationProvider;
 use AmpProject\AmpWP\Validation\URLValidationRESTController;
-use AmpProject\AmpWP\Validation\ValidatedUrlDataProvider;
 use WP_REST_Controller;
 use WP_REST_Request;
 
@@ -48,7 +47,7 @@ public function setUp() {
 
 		do_action( 'rest_api_init' );
 		$this->user_access = new UserAccess();
-		$this->controller  = new URLValidationRESTController( new URLValidationProvider(), $this->user_access, new ValidatedUrlDataProvider() );
+		$this->controller  = new URLValidationRESTController( new URLValidationProvider(), $this->user_access );
 		add_filter( 'pre_http_request', [ $this, 'get_validate_response' ] );
 	}
 
@@ -82,18 +81,6 @@ public function test_create_item_permissions_check() {
 		$this->assertTrue( $this->controller->create_item_permissions_check( new WP_REST_Request( 'POST', '/amp/v1/validate-post-url/' ) ) );
 	}
 
-	/** @covers ::get_item_permissions_check() */
-	public function test_get_item_permissions_check() {
-		$this->assertWPError( $this->controller->get_item_permissions_check( new WP_REST_Request( 'GET', '/amp/v1/validated-urls/' ) ) );
-
-		wp_set_current_user( self::factory()->user->create( [ 'role' => 'author' ] ) );
-		$this->assertWPError( $this->controller->get_item_permissions_check( new WP_REST_Request( 'GET', '/amp/v1/validated-urls/' ) ) );
-
-		wp_set_current_user( self::factory()->user->create( [ 'role' => 'administrator' ] ) );
-		$this->user_access->set_user_enabled( wp_get_current_user(), true );
-		$this->assertTrue( $this->controller->get_item_permissions_check( new WP_REST_Request( 'GET', '/amp/v1/validated-urls/' ) ) );
-	}
-
 	/** @covers ::is_valid_preview_nonce() */
 	public function test_is_valid_preview_nonce() {
 		$user_id = self::factory()->user->create( [ 'role' => 'author' ] );
@@ -239,99 +226,6 @@ public function test_validate_post_url( $params, $post_type, $user_role, $expect
 		}
 	}
 
-	/** @return array */
-	public function get_data_for_test_get_validated_url() {
-		return [
-			'not_int'              => [
-				'foo',
-				null,
-				'administrator',
-				'rest_no_route',
-			],
-
-			'too_small'            => [
-				-1,
-				null,
-				'administrator',
-				'rest_no_route',
-			],
-
-			'empty_post'           => [
-				0,
-				null,
-				'administrator',
-				'rest_invalid_param',
-			],
-
-			'revision_id'          => [
-				'{{id}}',
-				'revision',
-				'administrator',
-				'rest_invalid_param',
-			],
-
-			'post_id'              => [
-				'{{id}}',
-				'post',
-				'administrator',
-				'rest_invalid_param',
-			],
-
-			'as_author'            => [
-				'{{id}}',
-				\AMP_Validated_URL_Post_Type::POST_TYPE_SLUG,
-				'author',
-				'amp_rest_no_dev_tools',
-			],
-
-			'amp_validated_url_id' => [
-				'{{id}}',
-				\AMP_Validated_URL_Post_Type::POST_TYPE_SLUG,
-				'administrator',
-				false,
-			],
-		];
-	}
-
-	/**
-	 * @dataProvider get_data_for_test_get_validated_url()
-	 * @covers ::get_validated_url()
-	 * @covers ::validate_amp_validated_url_post_id_param()
-	 *
-	 * @param string|int   $post_id        Post ID.
-	 * @param string|null  $post_type      Post type.
-	 * @param string       $user_role      User role.
-	 * @param false|string $expected_error Expected error.
-	 */
-	public function test_get_validated_url( $post_id, $post_type, $user_role, $expected_error ) {
-		add_filter( 'amp_dev_tools_user_default_enabled', '__return_true' );
-		$user_id = self::factory()->user->create( [ 'role' => $user_role ] );
-
-		wp_set_current_user( $user_id );
-
-		if ( isset( $post_id ) && '{{id}}' === $post_id && $post_type ) {
-			$post_id = self::factory()->post->create( compact( 'post_type' ) );
-		}
-
-		$this->controller->register();
-		$request  = new WP_REST_Request( 'GET', '/amp/v1/validated-urls/' . $post_id );
-		$response = rest_get_server()->dispatch( $request );
-
-		if ( false === $expected_error ) {
-			$this->assertFalse( $response->is_error() );
-			$data = $response->get_data();
-			$this->assertEquals( $data['id'], $post_id );
-			$this->assertArrayHasKey( 'url', $data );
-			$this->assertArrayHasKey( 'date', $data );
-			$this->assertArrayHasKey( 'author', $data );
-			$this->assertArrayHasKey( 'stylesheets', $data );
-		} else {
-			$this->assertTrue( $response->is_error() );
-			$error = $response->as_error();
-			$this->assertEquals( $expected_error, $error->get_error_code() );
-		}
-	}
-
 	/**
 	 * Tests URLValidationRESTController::get_item_schema.
 	 *
diff --git a/tests/php/src/Validation/ValidatedUrlRESTControllerTest.php b/tests/php/src/Validation/ValidatedUrlRESTControllerTest.php
new file mode 100644
index 00000000000..d49c86eabf0
--- /dev/null
+++ b/tests/php/src/Validation/ValidatedUrlRESTControllerTest.php
@@ -0,0 +1,215 @@
+<?php
+/**
+ * Tests for ValidatedUrlRESTController.
+ *
+ * @package AMP
+ */
+
+namespace AmpProject\AmpWP\Tests\Validation;
+
+use AmpProject\AmpWP\DevTools\UserAccess;
+use AmpProject\AmpWP\Tests\Helpers\ValidationRequestMocking;
+use AmpProject\AmpWP\Validation\ValidatedUrlDataProvider;
+use AmpProject\AmpWP\Validation\ValidatedUrlRESTController;
+use WP_REST_Controller;
+use WP_REST_Request;
+use WP_UnitTestCase;
+
+/**
+ * Tests for URLValidationRESTController.
+ *
+ * @group amp-options
+ *
+ * @coversDefaultClass \AmpProject\AmpWP\Validation\ValidatedUrlRESTControllerTest
+ */
+class ValidatedUrlRESTControllerTest extends WP_UnitTestCase {
+	use ValidationRequestMocking;
+
+	/**
+	 * Test instance.
+	 *
+	 * @var ValidatedUrlRESTController
+	 */
+	private $controller;
+
+	/**
+	 * Test UserAccess instance.
+	 *
+	 * @var UserAccess
+	 */
+	private $user_access;
+
+	/**
+	 * Test ValidatedUrlDataProvider instance.
+	 *
+	 * @var ValidatedUrlDataProvider
+	 */
+	private $validated_url_data_provider;
+
+	/**
+	 * Set up.
+	 */
+	public function setUp() {
+		parent::setUp();
+
+		do_action( 'rest_api_init' );
+		$this->user_access                 = new UserAccess();
+		$this->validated_url_data_provider = new ValidatedUrlDataProvider();
+		$this->controller                  = new ValidatedUrlRESTController( $this->user_access, $this->validated_url_data_provider );
+		add_filter( 'pre_http_request', [ $this, 'get_validate_response' ] );
+	}
+
+	/** @covers ::get_registration_action() */
+	public function test_get_registration_action() {
+		$this->assertEquals( 'rest_api_init', ValidatedUrlRESTController::get_registration_action() );
+	}
+
+	/** @covers ::__construct() */
+	public function test__construct() {
+		$this->assertInstanceOf( ValidatedUrlRESTController::class, $this->controller );
+		$this->assertInstanceOf( WP_REST_Controller::class, $this->controller );
+	}
+
+	/** @covers ::register() */
+	public function test_register() {
+		$this->controller->register();
+
+		$this->assertContains( '/amp/v1/validated-urls', array_keys( rest_get_server()->get_routes() ) );
+	}
+
+	/** @covers ::get_item_permissions_check() */
+	public function test_get_item_permissions_check() {
+		$this->assertWPError( $this->controller->get_item_permissions_check( new WP_REST_Request( 'GET', '/amp/v1/validated-urls/' ) ) );
+
+		wp_set_current_user( self::factory()->user->create( [ 'role' => 'author' ] ) );
+		$this->assertWPError( $this->controller->get_item_permissions_check( new WP_REST_Request( 'GET', '/amp/v1/validated-urls/' ) ) );
+
+		wp_set_current_user( self::factory()->user->create( [ 'role' => 'administrator' ] ) );
+		$this->user_access->set_user_enabled( wp_get_current_user(), true );
+		$this->assertTrue( $this->controller->get_item_permissions_check( new WP_REST_Request( 'GET', '/amp/v1/validated-urls/' ) ) );
+	}
+
+	/** @return array */
+	public function get_data_for_test_get_item() {
+		return [
+			'not_int' => [
+				'foo',
+				null,
+				'administrator',
+				'rest_no_route',
+			],
+
+			'too_small' => [
+				- 1,
+				null,
+				'administrator',
+				'rest_no_route',
+			],
+
+			'empty_post' => [
+				0,
+				null,
+				'administrator',
+				'rest_invalid_param',
+			],
+
+			'revision_id' => [
+				'{{id}}',
+				'revision',
+				'administrator',
+				'rest_invalid_param',
+			],
+
+			'post_id' => [
+				'{{id}}',
+				'post',
+				'administrator',
+				'rest_invalid_param',
+			],
+
+			'as_author' => [
+				'{{id}}',
+				\AMP_Validated_URL_Post_Type::POST_TYPE_SLUG,
+				'author',
+				'amp_rest_no_dev_tools',
+			],
+
+			'amp_validated_url_id' => [
+				'{{id}}',
+				\AMP_Validated_URL_Post_Type::POST_TYPE_SLUG,
+				'administrator',
+				false,
+			],
+		];
+	}
+
+	/**
+	 * @dataProvider get_data_for_test_get_item()
+	 * @covers ::test_get_item()
+	 * @covers ::validate_amp_validated_url_post_id_param()
+	 *
+	 * @param string|int   $post_id        Post ID.
+	 * @param string|null  $post_type      Post type.
+	 * @param string       $user_role      User role.
+	 * @param false|string $expected_error Expected error.
+	 */
+	public function test_get_item( $post_id, $post_type, $user_role, $expected_error ) {
+		add_filter( 'amp_dev_tools_user_default_enabled', '__return_true' );
+		$user_id = self::factory()->user->create( [ 'role' => $user_role ] );
+
+		wp_set_current_user( $user_id );
+
+		if ( isset( $post_id ) && '{{id}}' === $post_id && $post_type ) {
+			$post_id = self::factory()->post->create( compact( 'post_type' ) );
+		}
+
+		$this->controller->register();
+		$request  = new WP_REST_Request( 'GET', '/amp/v1/validated-urls/' . $post_id );
+		$response = rest_get_server()->dispatch( $request );
+
+		if ( false === $expected_error ) {
+			$this->assertFalse( $response->is_error() );
+			$data = $response->get_data();
+			$this->assertEquals( $data['id'], $post_id );
+			$this->assertArrayHasKey( 'url', $data );
+			$this->assertArrayHasKey( 'date', $data );
+			$this->assertArrayHasKey( 'author', $data );
+			$this->assertArrayHasKey( 'stylesheets', $data );
+		} else {
+			$this->assertTrue( $response->is_error() );
+			$error = $response->as_error();
+			$this->assertEquals( $expected_error, $error->get_error_code() );
+		}
+	}
+
+	/**
+	 * Tests ValidatedUrlRESTController::get_item_schema.
+	 *
+	 * @covers ::get_item_schema()
+	 */
+	public function test_get_item_schema() {
+		$schema = $this->controller->get_item_schema();
+
+		$this->assertEquals(
+			[
+				'$schema',
+				'title',
+				'type',
+				'properties',
+			],
+			array_keys( $schema )
+		);
+
+		$this->assertEquals(
+			[
+				'id',
+				'url',
+				'date',
+				'author',
+				'stylesheets',
+				'environment',
+			],
+			array_keys( $schema['properties'] )
+		);
+	}
+}

From e8087f51941102305062bfda531feeef49238f2a Mon Sep 17 00:00:00 2001
From: Piotr Delawski <piotr.delawski@gmail.com>
Date: Thu, 29 Jul 2021 16:13:59 +0300
Subject: [PATCH 45/58] Remove server-side rendered Stylesheets meta box

---
 .../amp-validated-url-post-edit-screen.js     |  25 -
 .../class-amp-validated-url-post-type.php     | 453 +-----------------
 2 files changed, 1 insertion(+), 477 deletions(-)

diff --git a/assets/src/amp-validation/amp-validated-url-post-edit-screen.js b/assets/src/amp-validation/amp-validated-url-post-edit-screen.js
index 7dff6498b63..569553c37ee 100644
--- a/assets/src/amp-validation/amp-validated-url-post-edit-screen.js
+++ b/assets/src/amp-validation/amp-validated-url-post-edit-screen.js
@@ -31,7 +31,6 @@ domReady( () => {
 	handleRowEvents();
 	handleBulkActions();
 	watchForUnsavedChanges();
-	setupStylesheetsMetabox();
 	handleCopyToClipboardButtons();
 } );
 
@@ -382,27 +381,3 @@ const handleBulkActions = () => {
 		} );
 	} );
 };
-
-/**
- * Set up stylesheet metabox.
- */
-const setupStylesheetsMetabox = () => {
-	const metabox = document.getElementById( 'amp_stylesheets' );
-
-	for ( const toggleStylesheetDetailsButton of metabox.querySelectorAll( '.toggle-stylesheet-details' ) ) {
-		const row = toggleStylesheetDetailsButton.closest( 'tr' );
-		toggleStylesheetDetailsButton.addEventListener( 'click', () => {
-			row.classList.toggle( 'expanded' );
-		} );
-	}
-
-	for ( const stylesheetDetailsElements of metabox.querySelectorAll( '.stylesheet-details' ) ) {
-		const shakenStylesheetContainer = stylesheetDetailsElements.querySelector( '.shaken-stylesheet' );
-		const showRemovedStylesCheckbox = stylesheetDetailsElements.querySelector( '.show-removed-styles' );
-		if ( showRemovedStylesCheckbox ) {
-			showRemovedStylesCheckbox.addEventListener( 'click', () => {
-				shakenStylesheetContainer.classList.toggle( 'removed-styles-shown', showRemovedStylesCheckbox.checked );
-			} );
-		}
-	}
-};
diff --git a/includes/validation/class-amp-validated-url-post-type.php b/includes/validation/class-amp-validated-url-post-type.php
index 7ece46c16ba..bb6c4ca5382 100644
--- a/includes/validation/class-amp-validated-url-post-type.php
+++ b/includes/validation/class-amp-validated-url-post-type.php
@@ -2327,463 +2327,12 @@ public static function print_status_meta_box( $post ) {
 	/**
 	 * Renders stylesheet info for the validated URL.
 	 *
-	 * @param WP_Post $post The post for the meta box.
 	 * @return void
 	 */
-	public static function print_stylesheets_meta_box( $post ) {
+	public static function print_stylesheets_meta_box() {
 		?>
 			<div id="amp-validated-url-root"></div>
 		<?php
-		$stylesheets = get_post_meta( $post->ID, self::STYLESHEETS_POST_META_KEY, true );
-		if ( empty( $stylesheets ) ) {
-			printf(
-				'<p><em>%s</em></p>',
-				wp_kses_post(
-					sprintf(
-						/* translators: placeholder is URL to recheck the post */
-						__( 'Stylesheet information for this URL is no longer available. Such data is automatically deleted after a week to reduce database storage. It is of little value to store long-term given that it becomes stale as themes and plugins are updated. To obtain the latest stylesheet information, <a href="%s">recheck this URL</a>.', 'amp' ),
-						esc_url( self::get_recheck_url( $post ) . '#amp_stylesheets' )
-					)
-				)
-			);
-			return;
-		}
-		$stylesheets = json_decode( $stylesheets, true );
-		if ( ! is_array( $stylesheets ) ) {
-			printf(
-				'<p><em>%s</em></p>',
-				esc_html__( 'Unable to retrieve data for stylesheets.', 'amp' )
-			);
-			return;
-		}
-
-		$style_custom_cdata_spec = null;
-		foreach ( AMP_Allowed_Tags_Generated::get_allowed_tag( 'style' ) as $spec_rule ) {
-			if ( isset( $spec_rule[ AMP_Rule_Spec::TAG_SPEC ]['spec_name'] ) && AMP_Style_Sanitizer::STYLE_AMP_CUSTOM_SPEC_NAME === $spec_rule[ AMP_Rule_Spec::TAG_SPEC ]['spec_name'] ) {
-				$style_custom_cdata_spec = $spec_rule[ AMP_Rule_Spec::CDATA ];
-			}
-		}
-
-		$included_final_size    = 0;
-		$included_original_size = 0;
-		$excluded_final_size    = 0;
-		$excluded_original_size = 0;
-		$excluded_stylesheets   = 0;
-		$max_final_size         = 0;
-
-		$included_status  = 1;
-		$excessive_status = 2;
-		$excluded_status  = 3;
-
-		// Determine which stylesheets are included based on their priorities.
-		$pending_stylesheet_indices = array_keys( $stylesheets );
-		usort(
-			$pending_stylesheet_indices,
-			static function ( $a, $b ) use ( $stylesheets ) {
-				return $stylesheets[ $a ]['priority'] - $stylesheets[ $b ]['priority'];
-			}
-		);
-		foreach ( $pending_stylesheet_indices as $i ) {
-			// @todo Add information about amp-keyframes as well.
-			if ( ! isset( $stylesheets[ $i ]['group'] ) || 'amp-custom' !== $stylesheets[ $i ]['group'] || ! empty( $stylesheets[ $i ]['duplicate'] ) ) {
-				continue;
-			}
-			$max_final_size = max( $max_final_size, $stylesheets[ $i ]['final_size'] );
-			if ( $stylesheets[ $i ]['included'] ) {
-				$included_final_size    += $stylesheets[ $i ]['final_size'];
-				$included_original_size += $stylesheets[ $i ]['original_size'];
-
-				if ( $included_final_size >= $style_custom_cdata_spec['max_bytes'] ) {
-					$stylesheets[ $i ]['status'] = $excessive_status;
-				} else {
-					$stylesheets[ $i ]['status'] = $included_status;
-				}
-			} else {
-				$excluded_final_size    += $stylesheets[ $i ]['final_size'];
-				$excluded_original_size += $stylesheets[ $i ]['original_size'];
-				$excluded_stylesheets++;
-				$stylesheets[ $i ]['status'] = $excluded_status;
-			}
-		}
-
-		?>
-
-		<?php if ( ! AMP_Style_Sanitizer::has_required_php_css_parser() ) : ?>
-			<div class="notice notice-alt notice-warning inline">
-				<p>
-					<?php esc_html_e( 'AMP CSS processing is limited because a conflicting version of PHP-CSS-Parser has been loaded by another plugin or theme. Tree shaking is not available.', 'amp' ); ?>
-				</p>
-			</div>
-		<?php endif; ?>
-
-		<table class="amp-stylesheet-summary">
-			<tr>
-				<th>
-					<?php esc_html_e( 'Total CSS size prior to minification:', 'amp' ); ?>
-				</th>
-				<td>
-					<?php echo esc_html( number_format_i18n( $included_original_size + $excluded_original_size ) ); ?>
-					<abbr title="<?php esc_attr_e( 'bytes', 'amp' ); ?>"><?php echo esc_html_x( 'B', 'abbreviation for bytes', 'amp' ); ?></abbr>
-				</td>
-			</tr>
-			<tr>
-				<th>
-					<?php esc_html_e( 'Total CSS size after minification:', 'amp' ); ?>
-				</th>
-				<td>
-					<?php echo esc_html( number_format_i18n( $included_final_size + $excluded_final_size ) ); ?>
-					<abbr title="<?php esc_attr_e( 'bytes', 'amp' ); ?>"><?php echo esc_html_x( 'B', 'abbreviation for bytes', 'amp' ); ?></abbr>
-				</td>
-			</tr>
-			<tr>
-				<th>
-					<?php
-					echo esc_html(
-						sprintf(
-							/* translators: %s is max kilobytes */
-							__( 'Percentage of used CSS budget (%sKB):', 'amp' ),
-							number_format_i18n( $style_custom_cdata_spec['max_bytes'] / 1000 )
-						)
-					);
-					?>
-				</th>
-				<td>
-					<?php
-					$percentage_budget_used = ( ( $included_final_size + $excluded_final_size ) / $style_custom_cdata_spec['max_bytes'] ) * 100;
-
-					printf( '%.1f%% ', $percentage_budget_used ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
-					if ( $percentage_budget_used > 100 ) {
-						$icon = Icon::invalid();
-					} elseif ( $percentage_budget_used >= AMP_Style_Sanitizer::CSS_BUDGET_WARNING_PERCENTAGE ) {
-						$icon = Icon::warning();
-					} else {
-						$icon = Icon::valid();
-					}
-
-					echo $icon->to_html(); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
-					?>
-				</td>
-			</tr>
-			<tr>
-				<th>
-					<?php
-					echo esc_html(
-						sprintf(
-							/* translators: %s is the number of stylesheets excluded */
-							_n( 'Excluded minified CSS (%s stylesheet):', 'Excluded minified CSS size (%s stylesheets):', $excluded_stylesheets, 'amp' ),
-							number_format_i18n( $excluded_stylesheets )
-						)
-					);
-					?>
-				</th>
-				<td>
-					<?php echo esc_html( number_format_i18n( $excluded_final_size ) ); ?>
-					<abbr title="<?php esc_attr_e( 'bytes', 'amp' ); ?>"><?php echo esc_html_x( 'B', 'abbreviation for bytes', 'amp' ); ?></abbr>
-				</td>
-			</tr>
-		</table>
-
-		<?php if ( $percentage_budget_used > 100 ) : ?>
-			<div class="notice notice-alt notice-error inline">
-				<p>
-					<?php if ( 0 === $excluded_stylesheets ) : ?>
-						<?php esc_html_e( 'You have exceeded the CSS budget. The page will not be served as a valid AMP page.', 'amp' ); ?>
-					<?php else : ?>
-						<?php esc_html_e( 'You have exceeded the CSS budget. Stylesheets deemed of lesser priority have been excluded from the page.', 'amp' ); ?>
-					<?php endif; ?>
-					<?php esc_html_e( 'Please review the flagged stylesheets below and determine if the current theme or a particular plugin is including excessive CSS.', 'amp' ); ?>
-				</p>
-			</div>
-		<?php elseif ( $percentage_budget_used >= AMP_Style_Sanitizer::CSS_BUDGET_WARNING_PERCENTAGE ) : ?>
-			<div class="notice notice-alt notice-warning inline">
-				<p>
-					<?php esc_html_e( 'You are nearing the limit of the CSS budget. Once this limit is reached, stylesheets deemed of lesser priority will be excluded from the page. Please review the stylesheets below and determine if the current theme or a particular plugin is including excessive CSS.', 'amp' ); ?>
-				</p>
-			</div>
-		<?php endif; ?>
-
-		<table class="amp-stylesheet-list wp-list-table widefat fixed striped">
-			<thead>
-			<tr>
-				<th class="column-stylesheet_expand"></th>
-				<th class="column-stylesheet_order"><?php esc_html_e( 'Order', 'amp' ); ?></th>
-				<th class="column-original_size">
-					<?php esc_html_e( 'Original', 'amp' ); ?>
-					(<abbr title="<?php esc_attr_e( 'bytes', 'amp' ); ?>"><?php echo esc_html_x( 'B', 'abbreviation for bytes', 'amp' ); ?></abbr>)
-				</th>
-				<th class="column-minified"><?php esc_html_e( 'Minified', 'amp' ); ?></th>
-				<th class="column-final_size">
-					<?php esc_html_e( 'Final', 'amp' ); ?>
-					(<abbr title="<?php esc_attr_e( 'bytes', 'amp' ); ?>"><?php echo esc_html_x( 'B', 'abbreviation for bytes', 'amp' ); ?></abbr>)
-				</th>
-				<th class="column-percentage"><?php esc_html_e( 'Percent', 'amp' ); ?></th>
-				<th class="column-priority"><?php esc_html_e( 'Priority', 'amp' ); ?></th>
-				<th class="column-stylesheet_included"><?php esc_html_e( 'Included', 'amp' ); ?></th>
-				<th class="column-markup"><?php esc_html_e( 'Markup', 'amp' ); ?></th>
-				<th class="column-sources_with_invalid_output"><?php esc_html_e( 'Sources', 'amp' ); ?></th>
-			</tr>
-			</thead>
-			<tbody>
-			<?php $row = 1; ?>
-			<?php foreach ( $stylesheets as $stylesheet ) : ?>
-				<?php
-				// @todo Add information about amp-keyframes as well.
-				if ( ! isset( $stylesheet['group'] ) || 'amp-custom' !== $stylesheet['group'] || ! empty( $stylesheet['duplicate'] ) ) {
-					continue;
-				}
-
-				$origin_html = '<' . $stylesheet['element']['name'];
-				if ( ! empty( $stylesheet['element']['attributes'] ) ) {
-					$attributes = $stylesheet['element']['attributes'];
-					if ( ! empty( $attributes['class'] ) ) {
-						$attributes['class'] = trim( preg_replace( '/(^|\s)amp-wp-\w+(\s|$)/', ' ', $attributes['class'] ) );
-						if ( empty( $attributes['class'] ) ) {
-							unset( $attributes['class'] );
-						}
-					}
-					if ( isset( $attributes[ AMP_Style_Sanitizer::ORIGINAL_STYLE_ATTRIBUTE_NAME ] ) ) {
-						$attributes['style'] = $attributes[ AMP_Style_Sanitizer::ORIGINAL_STYLE_ATTRIBUTE_NAME ];
-						unset( $attributes[ AMP_Style_Sanitizer::ORIGINAL_STYLE_ATTRIBUTE_NAME ] );
-					}
-					if ( ! empty( $attributes ) ) {
-						foreach ( $attributes as $name => $value ) {
-							if ( '' === $value ) {
-								$origin_html .= ' ' . sprintf( '%s', esc_html( $name ) );
-							} else {
-								$origin_html .= ' ' . sprintf( '%s="%s"', esc_html( $name ), esc_attr( $value ) );
-							}
-						}
-					}
-				}
-				$origin_html .= '>';
-
-				if ( 0 === $stylesheet['original_size'] ) {
-					$ratio = 1;
-				} else {
-					$ratio = $stylesheet['final_size'] / $stylesheet['original_size'];
-				}
-				?>
-				<tr class="<?php echo esc_attr( sprintf( 'stylesheet level-0 %s', 0 === $row % 2 ? 'even' : 'odd' ) ); ?>">
-					<td class="column-stylesheet_expand">
-						<button class="toggle-stylesheet-details" type="button">
-							<span class="screen-reader-text"><?php esc_html_e( 'Expand/collapse', 'amp' ); ?></span>
-						</button>
-					</td>
-					<td class="column-stylesheet_order">
-						<?php echo (int) $row; ?>
-					</td>
-					<td class="column-original_size">
-						<?php
-						echo esc_html( number_format_i18n( $stylesheet['original_size'] ) );
-						?>
-					</td>
-					<td class="column-minified">
-						<?php
-						if ( $ratio <= 1 ) {
-							echo esc_html( sprintf( '-%.1f%%', ( 1.0 - $ratio ) * 100 ) );
-						} else {
-							echo esc_html( sprintf( '+%.1f%%', -1 * ( 1.0 - $ratio ) * 100 ) );
-						}
-						?>
-					</td>
-					<td class="column-final_size">
-						<?php
-						echo esc_html( number_format_i18n( $stylesheet['final_size'] ) );
-						?>
-					</td>
-					<td class="column-percentage">
-						<?php
-						$percentage = $stylesheet['final_size'] / ( $included_final_size + $excluded_final_size );
-						?>
-						<meter value="<?php echo esc_attr( $stylesheet['final_size'] ); ?>" min="0" max="<?php echo esc_attr( $included_final_size + $excluded_final_size ); ?>" title="<?php esc_attr_e( 'Stylesheet bytes of total CSS added to page', 'amp' ); ?>">
-							<?php echo esc_html( round( ( $percentage ) * 100 ) ) . '%'; ?>
-						</meter>
-					</td>
-					<td class="column-priority">
-						<?php echo esc_html( $stylesheet['priority'] ); ?>
-					</td>
-					<td class="column-stylesheet_included">
-						<?php
-						switch ( $stylesheet['status'] ) {
-							case $included_status:
-								printf( '<span title="%s" class="amp-icon amp-valid"></span>', esc_attr__( 'Stylesheet included', 'amp' ) );
-								break;
-							case $excessive_status:
-								printf( '<span title="%s" class="amp-icon amp-warning"></span>', esc_attr__( 'Stylesheet overruns CSS budget yet it is still included on page', 'amp' ) );
-								break;
-							case $excluded_status:
-								printf( '<span title="%s" class="amp-icon amp-invalid"></span>', esc_attr__( 'Stylesheet excluded due to exceeding CSS budget', 'amp' ) );
-								break;
-						}
-						?>
-					</td>
-					<td class="column-markup">
-						<?php
-						$origin_abbr_text = '?';
-						if ( 'link_element' === $stylesheet['origin'] ) {
-							$origin_abbr_text = '<link&nbsp;&hellip;>'; // @todo Consider adding the basename of the CSS file.
-						} elseif ( 'style_element' === $stylesheet['origin'] ) {
-							$origin_abbr_text = '<style>';
-						} elseif ( 'style_attribute' === $stylesheet['origin'] ) {
-							$origin_abbr_text = 'style="&hellip;"';
-						}
-						$needs_abbr = $origin_abbr_text !== $origin_html;
-						if ( $needs_abbr ) {
-							printf( '<abbr title="%s">', esc_attr( $origin_html ) );
-						}
-						printf( '<code>%s</code>', esc_html( $origin_abbr_text ) );
-						if ( $needs_abbr ) {
-							echo '</abbr>';
-						}
-						echo '</code>';
-						?>
-					</td>
-					<td class="column-sources_with_invalid_output">
-						<?php
-						if ( empty( $stylesheet['sources'] ) ) {
-							esc_html_e( '--', 'amp' );
-						} else {
-							self::render_sources_column( AMP_Validation_Error_Taxonomy::summarize_sources( $stylesheet['sources'] ), $post->ID );
-						}
-						?>
-					</td>
-				</tr>
-				<tr class="<?php echo esc_attr( sprintf( 'stylesheet-details level-0 %s', 0 === $row % 2 ? 'even' : 'odd' ) ); ?>">
-					<td colspan="10">
-						<dl class="detailed">
-							<dt><?php esc_html_e( 'Original Markup', 'amp' ); ?></dt>
-							<dd><code class="stylesheet-origin-markup"><?php echo esc_html( $origin_html ); ?></code></dd>
-
-							<?php if ( isset( $stylesheet['element']['attributes']['href'] ) ) : ?>
-								<dt><?php esc_html_e( 'Stylesheet URL', 'amp' ); ?></dt>
-								<dd>
-									<?php
-									printf(
-										'<a href="%s" target="_blank">%s</a>',
-										esc_url( $stylesheet['element']['attributes']['href'] ),
-										esc_html( $stylesheet['element']['attributes']['href'] )
-									);
-									?>
-								</dd>
-							<?php endif; ?>
-
-							<dt><?php esc_html_e( 'Sources', 'amp' ); ?></dt>
-							<dd>
-								<?php AMP_Validation_Error_Taxonomy::render_sources( $stylesheet['sources'] ); ?>
-							</dd>
-
-							<dt><?php esc_html_e( 'CSS Code', 'amp' ); ?></dt>
-							<dd>
-								<?php
-								ob_start();
-								echo '<code class="shaken-stylesheet">';
-								$open_parens = 0;
-								$ins_count   = 0;
-								$del_count   = 0;
-								foreach ( $stylesheet['shaken_tokens'] as $shaken_token ) {
-									if ( $shaken_token[0] ) {
-										$ins_count++;
-									} else {
-										$del_count++;
-									}
-
-									if ( is_array( $shaken_token[1] ) ) {
-										echo '<span class="declaration-block">';
-										$selector_count = count( $shaken_token[1] );
-										foreach ( array_keys( $shaken_token[1] ) as $i => $selector ) {
-											$included = $shaken_token[1][ $selector ];
-											echo $included ? '<ins class="selector">' : '<del class="selector">';
-											echo str_repeat( "\t", $open_parens ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
-
-											$selector_html = preg_replace(
-												'/(:root|html)(:not\(#_\))+/',
-												sprintf(
-													'<abbr title="%s">$0</abbr>',
-													esc_attr(
-														'style_attribute' === $stylesheet['origin']
-															?
-															__( 'Selector generated to increase specificity so the cascade is preserved for properties moved from style attribute to CSS rules in style[amp-custom].', 'amp' )
-															:
-															__( 'Selector generated to increase specificity for important properties so that the CSS cascade is preserved. AMP does not allow important properties.', 'amp' )
-													)
-												),
-												esc_html( $selector )
-											);
-											if ( 'style_attribute' === $stylesheet['origin'] ) {
-												$selector_html = preg_replace(
-													'/\.amp-wp-\w+/',
-													sprintf(
-														'<abbr title="%s">$0</abbr>',
-														esc_attr__( 'Class name generated during extraction of inline style to style[amp-custom].', 'amp' )
-													),
-													$selector_html
-												);
-											}
-
-											echo $selector_html; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
-
-											if ( $i + 1 < $selector_count ) {
-												echo ',';
-											}
-											echo $included ? '</ins>' : '</del>';
-										}
-
-										echo $shaken_token[0] ? '<ins>' : '<del>';
-										echo str_repeat( "\t", $open_parens + 1 ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
-										echo '{ ' . esc_html( implode( '; ', $shaken_token[2] ) ) . '; }';
-										echo $shaken_token[0] ? '</ins>' : '</del>';
-
-										echo '</span>';
-									} elseif ( is_string( $shaken_token[1] ) ) {
-										echo $shaken_token[0] ? '<ins class="">' : '<del class="">';
-
-										$parent_count_diff = substr_count( $shaken_token[1], '{' ) - substr_count( $shaken_token[1], '}' );
-										if ( $parent_count_diff >= 0 ) {
-											echo str_repeat( "\t", $open_parens ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
-										} else {
-											echo str_repeat( "\t", $open_parens + $parent_count_diff ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
-										}
-										$open_parens += $parent_count_diff;
-
-										echo esc_html( $shaken_token[1] );
-
-										echo $shaken_token[0] ? '</ins>' : '</del>';
-									}
-								}
-								echo '</code>';
-								$html = trim( ob_get_clean() );
-
-								if ( 0 === $ins_count && 0 === $del_count ) {
-									printf(
-										'<p><em>%s</em></p>',
-										esc_html__( 'The stylesheet was empty after minification (removal of comments and whitespace).', 'amp' )
-									);
-								} elseif ( 0 === $ins_count ) {
-									printf(
-										'<p><em>%s</em></p>',
-										esc_html__( 'All of the stylesheet was removed during tree-shaking.', 'amp' )
-									);
-								}
-
-								if ( 0 !== $ins_count || 0 !== $del_count ) {
-									if ( $del_count > 0 ) {
-										printf(
-											'<p><label><input type="checkbox" class="show-removed-styles"> %s</label></p>',
-											esc_html__( 'Show styles removed during tree-shaking', 'amp' )
-										);
-									}
-									echo $html; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
-								}
-								?>
-							</dd>
-						</dl>
-					</td>
-				</tr>
-				<?php $row++; ?>
-			<?php endforeach; ?>
-			</tbody>
-		</table>
-		<?php
 	}
 
 	/**

From 78724d5aa8999dc39c3a6fa57b288a701cebe5e4 Mon Sep 17 00:00:00 2001
From: Piotr Delawski <piotr.delawski@gmail.com>
Date: Thu, 29 Jul 2021 16:32:30 +0300
Subject: [PATCH 46/58] Fix phpcs issues

---
 src/Validation/URLValidationRESTController.php |  4 ++--
 .../ValidatedUrlRESTControllerTest.php         | 18 ++++++------------
 2 files changed, 8 insertions(+), 14 deletions(-)

diff --git a/src/Validation/URLValidationRESTController.php b/src/Validation/URLValidationRESTController.php
index 249e90aae9a..ca49491e1d2 100644
--- a/src/Validation/URLValidationRESTController.php
+++ b/src/Validation/URLValidationRESTController.php
@@ -62,8 +62,8 @@ public static function get_registration_action() {
 	/**
 	 * Constructor.
 	 *
-	 * @param URLValidationProvider    $url_validation_provider     URLValidationProvider instance.
-	 * @param UserAccess               $dev_tools_user_access       UserAccess instance.
+	 * @param URLValidationProvider $url_validation_provider URLValidationProvider instance.
+	 * @param UserAccess            $dev_tools_user_access   UserAccess instance.
 	 */
 	public function __construct( URLValidationProvider $url_validation_provider, UserAccess $dev_tools_user_access ) {
 		$this->namespace               = 'amp/v1';
diff --git a/tests/php/src/Validation/ValidatedUrlRESTControllerTest.php b/tests/php/src/Validation/ValidatedUrlRESTControllerTest.php
index d49c86eabf0..a74b87f2a50 100644
--- a/tests/php/src/Validation/ValidatedUrlRESTControllerTest.php
+++ b/tests/php/src/Validation/ValidatedUrlRESTControllerTest.php
@@ -92,48 +92,42 @@ public function test_get_item_permissions_check() {
 	/** @return array */
 	public function get_data_for_test_get_item() {
 		return [
-			'not_int' => [
+			'not_int'              => [
 				'foo',
 				null,
 				'administrator',
 				'rest_no_route',
 			],
-
-			'too_small' => [
+			'too_small'            => [
 				- 1,
 				null,
 				'administrator',
 				'rest_no_route',
 			],
-
-			'empty_post' => [
+			'empty_post'           => [
 				0,
 				null,
 				'administrator',
 				'rest_invalid_param',
 			],
-
-			'revision_id' => [
+			'revision_id'          => [
 				'{{id}}',
 				'revision',
 				'administrator',
 				'rest_invalid_param',
 			],
-
-			'post_id' => [
+			'post_id'              => [
 				'{{id}}',
 				'post',
 				'administrator',
 				'rest_invalid_param',
 			],
-
-			'as_author' => [
+			'as_author'            => [
 				'{{id}}',
 				\AMP_Validated_URL_Post_Type::POST_TYPE_SLUG,
 				'author',
 				'amp_rest_no_dev_tools',
 			],
-
 			'amp_validated_url_id' => [
 				'{{id}}',
 				\AMP_Validated_URL_Post_Type::POST_TYPE_SLUG,

From 658fd5ab9c60a873cbeb5f4ae5513e1e47ffb216 Mon Sep 17 00:00:00 2001
From: Piotr Delawski <piotr.delawski@gmail.com>
Date: Thu, 29 Jul 2021 16:46:50 +0300
Subject: [PATCH 47/58] Clean up styles for Stylesheets meta box

---
 .../src/amp-validation-error-taxonomy.scss    |  5 -----
 .../src/components/_amp-stylesheet-table.scss |  7 -------
 .../css/src/components/_details-column.scss   |  4 +---
 assets/src/components/source-details/index.js |  3 ++-
 .../components/source-details/style.scss}     |  2 +-
 assets/src/components/sources-stack/index.js  |  1 +
 .../components/sources-stack/style.scss}      |  0
 .../components/stylesheets-summary/index.js   |  1 +
 .../stylesheets-summary/style.scss}           |  0
 .../components/stylesheets-table/index.js     |  3 ++-
 .../components/stylesheets-table/style.scss}  | 19 ++-----------------
 11 files changed, 10 insertions(+), 35 deletions(-)
 delete mode 100644 assets/css/src/components/_amp-stylesheet-table.scss
 rename assets/{css/src/components/_validation-error-sources-details.scss => src/components/source-details/style.scss} (83%)
 rename assets/{css/src/components/_validation-error-sources-stack.scss => src/components/sources-stack/style.scss} (100%)
 rename assets/{css/src/components/_amp-stylesheet-summary.scss => src/validated-url-page/components/stylesheets-summary/style.scss} (100%)
 rename assets/{css/src/components/_amp-stylesheet-list.scss => src/validated-url-page/components/stylesheets-table/style.scss} (86%)

diff --git a/assets/css/src/amp-validation-error-taxonomy.scss b/assets/css/src/amp-validation-error-taxonomy.scss
index b9281683415..e0b87d62f7f 100644
--- a/assets/css/src/amp-validation-error-taxonomy.scss
+++ b/assets/css/src/amp-validation-error-taxonomy.scss
@@ -1,10 +1,5 @@
-@import "./components/amp-stylesheet-list";
-@import "./components/amp-stylesheet-table";
-@import "./components/amp-stylesheet-summary";
 @import "./components/details-column";
 @import "./components/error-details-toggle";
-@import "./components/validation-error-sources-details";
-@import "./components/validation-error-sources-stack";
 @import "./components/wp-list-table-grid-lines";
 @import "./components/wp-list-table-kept-errors";
 @import "./components/wp-list-table-new-errors";
diff --git a/assets/css/src/components/_amp-stylesheet-table.scss b/assets/css/src/components/_amp-stylesheet-table.scss
deleted file mode 100644
index d29a9042502..00000000000
--- a/assets/css/src/components/_amp-stylesheet-table.scss
+++ /dev/null
@@ -1,7 +0,0 @@
-// @todo: Combine with .amp-stylesheet-list once the legacy UI is dropped.
-.amp-stylesheet-table {
-
-	.column-stylesheet_expand {
-		padding: 0;
-	}
-}
diff --git a/assets/css/src/components/_details-column.scss b/assets/css/src/components/_details-column.scss
index 66edb316e36..11829903d46 100644
--- a/assets/css/src/components/_details-column.scss
+++ b/assets/css/src/components/_details-column.scss
@@ -29,8 +29,7 @@
 	}
 }
 
-.details-attributes__summary,
-.toggle-stylesheet-details {
+.details-attributes__summary {
 
 	&::after {
 		background-image: url("../images/down-triangle.svg");
@@ -46,7 +45,6 @@
 }
 
 tr.expanded .details-attributes__summary,
-tr.expanded .toggle-stylesheet-details,
 details[open] > .details-attributes__summary {
 
 	&::after {
diff --git a/assets/src/components/source-details/index.js b/assets/src/components/source-details/index.js
index 580e530324a..4251636a043 100644
--- a/assets/src/components/source-details/index.js
+++ b/assets/src/components/source-details/index.js
@@ -6,6 +6,7 @@ import PropTypes from 'prop-types';
 /**
  * Internal dependencies
  */
+import './style.scss';
 import SourceDetailTitle from './title';
 import SourceDetailValue from './value';
 
@@ -18,7 +19,7 @@ export default function SourceDetails( { source } ) {
 	const keys = Object.keys( source ).filter( ( key ) => ! omitKeys.includes( key ) );
 
 	return (
-		<table className="validation-error-sources-details">
+		<table className="validation-error-source-details">
 			<tbody>
 				{ keys.map( ( key ) => (
 					<tr key={ key }>
diff --git a/assets/css/src/components/_validation-error-sources-details.scss b/assets/src/components/source-details/style.scss
similarity index 83%
rename from assets/css/src/components/_validation-error-sources-details.scss
rename to assets/src/components/source-details/style.scss
index 32736aa8644..3efedd7b6b3 100644
--- a/assets/css/src/components/_validation-error-sources-details.scss
+++ b/assets/src/components/source-details/style.scss
@@ -1,4 +1,4 @@
-.validation-error-sources-details {
+.validation-error-source-details {
 	border-collapse: collapse;
 	width: 100%;
 
diff --git a/assets/src/components/sources-stack/index.js b/assets/src/components/sources-stack/index.js
index 65dc503c488..5d775cea8aa 100644
--- a/assets/src/components/sources-stack/index.js
+++ b/assets/src/components/sources-stack/index.js
@@ -11,6 +11,7 @@ import PropTypes from 'prop-types';
 /**
  * Internal dependencies
  */
+import './style.scss';
 import SourceDetails from '../source-details';
 
 export default function SourcesStack( { sources } ) {
diff --git a/assets/css/src/components/_validation-error-sources-stack.scss b/assets/src/components/sources-stack/style.scss
similarity index 100%
rename from assets/css/src/components/_validation-error-sources-stack.scss
rename to assets/src/components/sources-stack/style.scss
diff --git a/assets/src/validated-url-page/components/stylesheets-summary/index.js b/assets/src/validated-url-page/components/stylesheets-summary/index.js
index 0bd0cdca412..78cd0cae0d0 100644
--- a/assets/src/validated-url-page/components/stylesheets-summary/index.js
+++ b/assets/src/validated-url-page/components/stylesheets-summary/index.js
@@ -11,6 +11,7 @@ import { __, _n, sprintf } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
+import './style.scss';
 import { numberFormat } from '../../../utils/number-format';
 import FormattedMemoryValue from '../../../components/formatted-memory-value';
 import { ValidationStatusIcon } from '../../../components/icon';
diff --git a/assets/css/src/components/_amp-stylesheet-summary.scss b/assets/src/validated-url-page/components/stylesheets-summary/style.scss
similarity index 100%
rename from assets/css/src/components/_amp-stylesheet-summary.scss
rename to assets/src/validated-url-page/components/stylesheets-summary/style.scss
diff --git a/assets/src/validated-url-page/components/stylesheets-table/index.js b/assets/src/validated-url-page/components/stylesheets-table/index.js
index 0da9e7afa19..3252be60abb 100644
--- a/assets/src/validated-url-page/components/stylesheets-table/index.js
+++ b/assets/src/validated-url-page/components/stylesheets-table/index.js
@@ -6,6 +6,7 @@ import PropTypes from 'prop-types';
 /**
  * Internal dependencies
  */
+import './style.scss';
 import StylesheetsTableHead from './head';
 import StylesheetsTableRow from './row';
 
@@ -18,7 +19,7 @@ export default function StylesheetsTable( {
 	const validatedTheme = environment?.theme ? Object.keys( environment.theme )[ 0 ] : '';
 
 	return (
-		<table className="amp-stylesheet-list amp-stylesheet-table wp-list-table widefat fixed striped">
+		<table className="amp-stylesheet-table wp-list-table widefat fixed striped">
 			<StylesheetsTableHead />
 			<tbody>
 				{ stylesheets.map( ( stylesheet, index ) => (
diff --git a/assets/css/src/components/_amp-stylesheet-list.scss b/assets/src/validated-url-page/components/stylesheets-table/style.scss
similarity index 86%
rename from assets/css/src/components/_amp-stylesheet-list.scss
rename to assets/src/validated-url-page/components/stylesheets-table/style.scss
index ae0568b07b8..1ae41eab228 100644
--- a/assets/css/src/components/_amp-stylesheet-list.scss
+++ b/assets/src/validated-url-page/components/stylesheets-table/style.scss
@@ -1,4 +1,4 @@
-.amp-stylesheet-list {
+.amp-stylesheet-table {
 	margin: 1em 0;
 
 	th {
@@ -29,6 +29,7 @@
 
 	.column-stylesheet_expand {
 		width: 12px;
+		padding: 0;
 	}
 
 	.column-priority {
@@ -42,22 +43,6 @@
 		text-align: center;
 	}
 
-	.column-source {
-		width: 25%;
-	}
-
-	.toggle-stylesheet-details {
-		border: none;
-		background: none;
-		cursor: pointer;
-		height: 22px;
-		position: relative;
-	}
-
-	.toggle-stylesheet-details::after {
-		display: block;
-	}
-
 	.stylesheet-origin-markup {
 		padding: 0;
 	}

From 6cd59682259cdf5cc9f077822225e71c0eed1d28 Mon Sep 17 00:00:00 2001
From: Piotr Delawski <piotr.delawski@gmail.com>
Date: Thu, 29 Jul 2021 17:14:10 +0300
Subject: [PATCH 48/58] Fix php unit test

---
 tests/php/src/Validation/ValidatedUrlRESTControllerTest.php | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/tests/php/src/Validation/ValidatedUrlRESTControllerTest.php b/tests/php/src/Validation/ValidatedUrlRESTControllerTest.php
index a74b87f2a50..ca3cc3c5d71 100644
--- a/tests/php/src/Validation/ValidatedUrlRESTControllerTest.php
+++ b/tests/php/src/Validation/ValidatedUrlRESTControllerTest.php
@@ -74,7 +74,7 @@ public function test__construct() {
 	public function test_register() {
 		$this->controller->register();
 
-		$this->assertContains( '/amp/v1/validated-urls', array_keys( rest_get_server()->get_routes() ) );
+		$this->assertContains( '/amp/v1/validated-urls/(?P<id>[\d]+)', array_keys( rest_get_server()->get_routes() ) );
 	}
 
 	/** @covers ::get_item_permissions_check() */

From 477831d56eb053fac45244a6aa82a31a6a239ebc Mon Sep 17 00:00:00 2001
From: Piotr Delawski <piotr.delawski@gmail.com>
Date: Thu, 29 Jul 2021 19:40:44 +0300
Subject: [PATCH 49/58] Add plugins context and convert slug into plugin name

---
 .../plugins-context-provider/index.js         | 105 ++++++++++++++++++
 .../use-plugins-data.js                       |  35 ++++++
 assets/src/components/source-label/index.js   |  11 +-
 .../src/components/source-label/test/index.js |   7 ++
 assets/src/validated-url-page/index.js        |  21 ++--
 .../class-amp-validated-url-post-type.php     |   8 +-
 6 files changed, 174 insertions(+), 13 deletions(-)
 create mode 100644 assets/src/components/plugins-context-provider/index.js
 create mode 100644 assets/src/components/plugins-context-provider/use-plugins-data.js

diff --git a/assets/src/components/plugins-context-provider/index.js b/assets/src/components/plugins-context-provider/index.js
new file mode 100644
index 00000000000..4cc32675a24
--- /dev/null
+++ b/assets/src/components/plugins-context-provider/index.js
@@ -0,0 +1,105 @@
+/**
+ * External dependencies
+ */
+import PropTypes from 'prop-types';
+
+/**
+ * WordPress dependencies
+ */
+import {
+	createContext,
+	useContext,
+	useEffect,
+	useRef,
+	useState,
+} from '@wordpress/element';
+import apiFetch from '@wordpress/api-fetch';
+
+/**
+ * Internal dependencies
+ */
+import { ErrorContext } from '../error-context-provider';
+import { useAsyncError } from '../../utils/use-async-error';
+
+export const Plugins = createContext();
+
+/**
+ * Plugins context provider.
+ *
+ * @param {Object} props Component props.
+ * @param {any} props.children Component children.
+ * @param {boolean} props.hasErrorBoundary Whether the component is wrapped in an error boundary.
+ */
+export function PluginsContextProvider( {
+	children,
+	hasErrorBoundary = false,
+} ) {
+	const [ plugins, setPlugins ] = useState();
+	const [ fetchingPlugins, setFetchingPlugins ] = useState( null );
+
+	const { error, setError } = useContext( ErrorContext );
+	const { setAsyncError } = useAsyncError();
+
+	/**
+	 * This component sets state inside async functions.
+	 * Use this ref to prevent state updates after unmount.
+	 */
+	const hasUnmounted = useRef( false );
+	useEffect( () => () => {
+		hasUnmounted.current = true;
+	}, [] );
+
+	/**
+	 * Fetches validated URL data.
+	 */
+	useEffect( () => {
+		if ( error || plugins || fetchingPlugins ) {
+			return;
+		}
+
+		( async () => {
+			setFetchingPlugins( true );
+
+			try {
+				const fetchedPlugins = await apiFetch( {
+					path: '/wp/v2/plugins',
+				} );
+
+				if ( hasUnmounted.current === true ) {
+					return;
+				}
+
+				setPlugins( fetchedPlugins );
+			} catch ( e ) {
+				if ( hasUnmounted.current === true ) {
+					return;
+				}
+
+				setError( e );
+
+				if ( hasErrorBoundary ) {
+					setAsyncError( e );
+				}
+
+				return;
+			}
+
+			setFetchingPlugins( false );
+		} )();
+	}, [ error, fetchingPlugins, hasErrorBoundary, plugins, setAsyncError, setError ] );
+
+	return (
+		<Plugins.Provider
+			value={ {
+				fetchingPlugins,
+				plugins,
+			} }
+		>
+			{ children }
+		</Plugins.Provider>
+	);
+}
+PluginsContextProvider.propTypes = {
+	children: PropTypes.any,
+	hasErrorBoundary: PropTypes.bool,
+};
diff --git a/assets/src/components/plugins-context-provider/use-plugins-data.js b/assets/src/components/plugins-context-provider/use-plugins-data.js
new file mode 100644
index 00000000000..9487a1d8c63
--- /dev/null
+++ b/assets/src/components/plugins-context-provider/use-plugins-data.js
@@ -0,0 +1,35 @@
+/**
+ * WordPress dependencies
+ */
+import { useContext, useEffect, useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { Plugins } from './index';
+
+export default function usePluginsData() {
+	const { plugins, fetchingPlugins } = useContext( Plugins );
+	const [ nameBySlug, setNameBySlug ] = useState( [] );
+
+	useEffect( () => {
+		if ( fetchingPlugins || ! plugins ) {
+			return;
+		}
+
+		setNameBySlug( () => plugins.reduce( ( acc, plugin ) => {
+			const slug = plugin.plugin.split( '/' )[ 0 ];
+			return {
+				...acc,
+				[ slug ]: plugin.name,
+			};
+		}, {} ) );
+	}, [ fetchingPlugins, plugins ] );
+
+	const getPluginNameBySlug = ( slug ) => nameBySlug[ slug ] ?? slug;
+
+	return {
+		getPluginNameBySlug,
+		plugins,
+	};
+}
diff --git a/assets/src/components/source-label/index.js b/assets/src/components/source-label/index.js
index 9d33d0fe6d5..75afb1242c3 100644
--- a/assets/src/components/source-label/index.js
+++ b/assets/src/components/source-label/index.js
@@ -23,24 +23,29 @@ import {
 	SOURCE_TYPE_HOOK_THE_CONTENT,
 	SOURCE_TYPE_HOOK_THE_EXCERPT,
 } from '../../utils/sources';
+import usePluginsData from '../plugins-context-provider/use-plugins-data';
 
 export default function SourceLabel( {
 	sources,
 	type,
 	isCodeOutput,
 } ) {
+	const { getPluginNameBySlug } = usePluginsData();
+
 	let icon;
 	let title;
-	let singleTitle = sources?.[ 0 ];
+	let singleTitle;
 
 	switch ( type ) {
 		case SOURCE_TYPE_PLUGIN:
 			icon = 'admin-plugins';
 			title = __( 'Plugins', 'amp' );
+			sources = sources.map( ( slug ) => getPluginNameBySlug( slug ) );
 			break;
 		case SOURCE_TYPE_MU_PLUGIN:
 			icon = 'admin-plugins';
 			title = __( 'Must-Use Plugins', 'amp' );
+			sources = sources.map( ( slug ) => getPluginNameBySlug( slug ) );
 			break;
 		case SOURCE_TYPE_THEME:
 			icon = 'admin-appearance';
@@ -85,9 +90,9 @@ export default function SourceLabel( {
 				<Dashicon icon={ icon } />
 				{ isCodeOutput ? (
 					<code>
-						{ singleTitle ?? title }
+						{ singleTitle ?? sources?.[ 0 ] ?? title }
 					</code>
-				) : singleTitle ?? title }
+				) : singleTitle ?? sources?.[ 0 ] ?? title }
 			</strong>
 		);
 	}
diff --git a/assets/src/components/source-label/test/index.js b/assets/src/components/source-label/test/index.js
index f0a296a5a94..2091755023c 100644
--- a/assets/src/components/source-label/test/index.js
+++ b/assets/src/components/source-label/test/index.js
@@ -23,9 +23,16 @@ import {
 	SOURCE_TYPE_PLUGIN,
 	SOURCE_TYPE_THEME,
 } from '../../../utils/sources';
+import usePluginsData from '../../plugins-context-provider/use-plugins-data';
 
 let container;
 
+jest.mock( '../../plugins-context-provider/use-plugins-data', () => jest.fn() );
+
+usePluginsData.mockImplementation( () => ( {
+	getPluginNameBySlug: ( slug ) => slug,
+} ) );
+
 describe( 'SourceLabel', () => {
 	beforeEach( () => {
 		container = document.createElement( 'div' );
diff --git a/assets/src/validated-url-page/index.js b/assets/src/validated-url-page/index.js
index 9dae431239b..3d0c0c1fb01 100644
--- a/assets/src/validated-url-page/index.js
+++ b/assets/src/validated-url-page/index.js
@@ -22,6 +22,7 @@ import { render } from '@wordpress/element';
 import { ErrorBoundary } from '../components/error-boundary';
 import { ErrorContextProvider } from '../components/error-context-provider';
 import { ErrorScreen } from '../components/error-screen';
+import { PluginsContextProvider } from '../components/plugins-context-provider';
 import { ValidatedUrlContextProvider } from '../components/validated-url-context-provider';
 import Stylesheets from './stylesheets';
 
@@ -39,15 +40,17 @@ function Providers( { children } ) {
 	return (
 		<ErrorContextProvider>
 			<ErrorBoundary>
-				<ValidatedUrlContextProvider
-					cssBudgetBytes={ Number( CSS_BUDGET_BYTES ) }
-					cssBudgetWarningPercentage={ Number( CSS_BUDGET_WARNING_PERCENTAGE ) }
-					hasErrorBoundary={ true }
-					postId={ Number( POST_ID ) }
-					validatedUrlsRestPath={ VALIDATED_URLS_REST_PATH }
-				>
-					{ children }
-				</ValidatedUrlContextProvider>
+				<PluginsContextProvider hasErrorBoundary={ true }>
+					<ValidatedUrlContextProvider
+						cssBudgetBytes={ Number( CSS_BUDGET_BYTES ) }
+						cssBudgetWarningPercentage={ Number( CSS_BUDGET_WARNING_PERCENTAGE ) }
+						hasErrorBoundary={ true }
+						postId={ Number( POST_ID ) }
+						validatedUrlsRestPath={ VALIDATED_URLS_REST_PATH }
+					>
+						{ children }
+					</ValidatedUrlContextProvider>
+				</PluginsContextProvider>
 			</ErrorBoundary>
 		</ErrorContextProvider>
 	);
diff --git a/includes/validation/class-amp-validated-url-post-type.php b/includes/validation/class-amp-validated-url-post-type.php
index bb6c4ca5382..5bf205fd635 100644
--- a/includes/validation/class-amp-validated-url-post-type.php
+++ b/includes/validation/class-amp-validated-url-post-type.php
@@ -2071,7 +2071,13 @@ public static function enqueue_edit_post_screen_scripts() {
 		);
 
 		// Preload Validated URL data.
-		Services::get( 'admin.rest_preloader' )->add_preloaded_path( '/amp/v1/validated-urls/' . $post->ID );
+		$preload_paths = [
+			'/wp/v2/plugins',
+			'/amp/v1/validated-urls/' . $post->ID,
+		];
+		foreach ( $preload_paths as $path ) {
+			Services::get( 'admin.rest_preloader' )->add_preloaded_path( $path );
+		}
 
 		if ( function_exists( 'wp_set_script_translations' ) ) {
 			wp_set_script_translations( self::EDIT_POST_SCRIPT_HANDLE, 'amp' );

From cb7d3316cc78da39cfbf2f779912c303fc5a4924 Mon Sep 17 00:00:00 2001
From: Piotr Delawski <piotr.delawski@gmail.com>
Date: Thu, 29 Jul 2021 19:50:06 +0300
Subject: [PATCH 50/58] Add themes context and convert slug into theme name

---
 assets/src/components/source-label/index.js   |   4 +-
 .../src/components/source-label/test/index.js |   5 +
 .../themes-context-provider/index.js          | 105 ++++++++++++++++++
 .../use-themes-data.js                        |  32 ++++++
 assets/src/validated-url-page/index.js        |  21 ++--
 .../class-amp-validated-url-post-type.php     |   1 +
 6 files changed, 158 insertions(+), 10 deletions(-)
 create mode 100644 assets/src/components/themes-context-provider/index.js
 create mode 100644 assets/src/components/themes-context-provider/use-themes-data.js

diff --git a/assets/src/components/source-label/index.js b/assets/src/components/source-label/index.js
index 75afb1242c3..cab55791125 100644
--- a/assets/src/components/source-label/index.js
+++ b/assets/src/components/source-label/index.js
@@ -24,6 +24,7 @@ import {
 	SOURCE_TYPE_HOOK_THE_EXCERPT,
 } from '../../utils/sources';
 import usePluginsData from '../plugins-context-provider/use-plugins-data';
+import useThemesData from '../themes-context-provider/use-themes-data';
 
 export default function SourceLabel( {
 	sources,
@@ -31,6 +32,7 @@ export default function SourceLabel( {
 	isCodeOutput,
 } ) {
 	const { getPluginNameBySlug } = usePluginsData();
+	const { getThemeNameBySlug } = useThemesData();
 
 	let icon;
 	let title;
@@ -49,7 +51,7 @@ export default function SourceLabel( {
 			break;
 		case SOURCE_TYPE_THEME:
 			icon = 'admin-appearance';
-			title = singleTitle ?? __( 'Theme', 'amp' );
+			sources = sources.map( ( slug ) => getThemeNameBySlug( slug ) ?? __( 'Theme', 'amp' ) );
 			break;
 		case SOURCE_TYPE_CORE:
 			icon = 'wordpress-alt';
diff --git a/assets/src/components/source-label/test/index.js b/assets/src/components/source-label/test/index.js
index 2091755023c..aca9f9ae203 100644
--- a/assets/src/components/source-label/test/index.js
+++ b/assets/src/components/source-label/test/index.js
@@ -24,14 +24,19 @@ import {
 	SOURCE_TYPE_THEME,
 } from '../../../utils/sources';
 import usePluginsData from '../../plugins-context-provider/use-plugins-data';
+import useThemesData from '../../themes-context-provider/use-themes-data';
 
 let container;
 
 jest.mock( '../../plugins-context-provider/use-plugins-data', () => jest.fn() );
+jest.mock( '../../themes-context-provider/use-themes-data', () => jest.fn() );
 
 usePluginsData.mockImplementation( () => ( {
 	getPluginNameBySlug: ( slug ) => slug,
 } ) );
+useThemesData.mockImplementation( () => ( {
+	getThemeNameBySlug: ( slug ) => slug,
+} ) );
 
 describe( 'SourceLabel', () => {
 	beforeEach( () => {
diff --git a/assets/src/components/themes-context-provider/index.js b/assets/src/components/themes-context-provider/index.js
new file mode 100644
index 00000000000..659f78d1754
--- /dev/null
+++ b/assets/src/components/themes-context-provider/index.js
@@ -0,0 +1,105 @@
+/**
+ * External dependencies
+ */
+import PropTypes from 'prop-types';
+
+/**
+ * WordPress dependencies
+ */
+import {
+	createContext,
+	useContext,
+	useEffect,
+	useRef,
+	useState,
+} from '@wordpress/element';
+import apiFetch from '@wordpress/api-fetch';
+
+/**
+ * Internal dependencies
+ */
+import { ErrorContext } from '../error-context-provider';
+import { useAsyncError } from '../../utils/use-async-error';
+
+export const Themes = createContext();
+
+/**
+ * Themes context provider.
+ *
+ * @param {Object} props Component props.
+ * @param {any} props.children Component children.
+ * @param {boolean} props.hasErrorBoundary Whether the component is wrapped in an error boundary.
+ */
+export function ThemesContextProvider( {
+	children,
+	hasErrorBoundary = false,
+} ) {
+	const [ themes, setThemes ] = useState();
+	const [ fetchingThemes, setFetchingThemes ] = useState( null );
+
+	const { error, setError } = useContext( ErrorContext );
+	const { setAsyncError } = useAsyncError();
+
+	/**
+	 * This component sets state inside async functions.
+	 * Use this ref to prevent state updates after unmount.
+	 */
+	const hasUnmounted = useRef( false );
+	useEffect( () => () => {
+		hasUnmounted.current = true;
+	}, [] );
+
+	/**
+	 * Fetches validated URL data.
+	 */
+	useEffect( () => {
+		if ( error || themes || fetchingThemes ) {
+			return;
+		}
+
+		( async () => {
+			setFetchingThemes( true );
+
+			try {
+				const fetchedThemes = await apiFetch( {
+					path: '/wp/v2/themes',
+				} );
+
+				if ( hasUnmounted.current === true ) {
+					return;
+				}
+
+				setThemes( fetchedThemes );
+			} catch ( e ) {
+				if ( hasUnmounted.current === true ) {
+					return;
+				}
+
+				setError( e );
+
+				if ( hasErrorBoundary ) {
+					setAsyncError( e );
+				}
+
+				return;
+			}
+
+			setFetchingThemes( false );
+		} )();
+	}, [ error, fetchingThemes, hasErrorBoundary, themes, setAsyncError, setError ] );
+
+	return (
+		<Themes.Provider
+			value={ {
+				fetchingThemes,
+				themes,
+			} }
+		>
+			{ children }
+		</Themes.Provider>
+	);
+}
+ThemesContextProvider.propTypes = {
+	children: PropTypes.any,
+	hasErrorBoundary: PropTypes.bool,
+};
diff --git a/assets/src/components/themes-context-provider/use-themes-data.js b/assets/src/components/themes-context-provider/use-themes-data.js
new file mode 100644
index 00000000000..6f7fc0f4358
--- /dev/null
+++ b/assets/src/components/themes-context-provider/use-themes-data.js
@@ -0,0 +1,32 @@
+/**
+ * WordPress dependencies
+ */
+import { useContext, useEffect, useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { Themes } from './index';
+
+export default function useThemesData() {
+	const { themes, fetchingThemes } = useContext( Themes );
+	const [ nameBySlug, setNameBySlug ] = useState( [] );
+
+	useEffect( () => {
+		if ( fetchingThemes || ! themes ) {
+			return;
+		}
+
+		setNameBySlug( () => themes.reduce( ( acc, theme ) => ( {
+			...acc,
+			[ theme.stylesheet ]: theme.name.raw,
+		} ), {} ) );
+	}, [ fetchingThemes, themes ] );
+
+	const getThemeNameBySlug = ( slug ) => nameBySlug[ slug ] ?? slug;
+
+	return {
+		getThemeNameBySlug,
+		themes,
+	};
+}
diff --git a/assets/src/validated-url-page/index.js b/assets/src/validated-url-page/index.js
index 3d0c0c1fb01..0c529eac40a 100644
--- a/assets/src/validated-url-page/index.js
+++ b/assets/src/validated-url-page/index.js
@@ -23,6 +23,7 @@ import { ErrorBoundary } from '../components/error-boundary';
 import { ErrorContextProvider } from '../components/error-context-provider';
 import { ErrorScreen } from '../components/error-screen';
 import { PluginsContextProvider } from '../components/plugins-context-provider';
+import { ThemesContextProvider } from '../components/themes-context-provider';
 import { ValidatedUrlContextProvider } from '../components/validated-url-context-provider';
 import Stylesheets from './stylesheets';
 
@@ -41,15 +42,17 @@ function Providers( { children } ) {
 		<ErrorContextProvider>
 			<ErrorBoundary>
 				<PluginsContextProvider hasErrorBoundary={ true }>
-					<ValidatedUrlContextProvider
-						cssBudgetBytes={ Number( CSS_BUDGET_BYTES ) }
-						cssBudgetWarningPercentage={ Number( CSS_BUDGET_WARNING_PERCENTAGE ) }
-						hasErrorBoundary={ true }
-						postId={ Number( POST_ID ) }
-						validatedUrlsRestPath={ VALIDATED_URLS_REST_PATH }
-					>
-						{ children }
-					</ValidatedUrlContextProvider>
+					<ThemesContextProvider hasErrorBoundary={ true }>
+						<ValidatedUrlContextProvider
+							cssBudgetBytes={ Number( CSS_BUDGET_BYTES ) }
+							cssBudgetWarningPercentage={ Number( CSS_BUDGET_WARNING_PERCENTAGE ) }
+							hasErrorBoundary={ true }
+							postId={ Number( POST_ID ) }
+							validatedUrlsRestPath={ VALIDATED_URLS_REST_PATH }
+						>
+							{ children }
+						</ValidatedUrlContextProvider>
+					</ThemesContextProvider>
 				</PluginsContextProvider>
 			</ErrorBoundary>
 		</ErrorContextProvider>
diff --git a/includes/validation/class-amp-validated-url-post-type.php b/includes/validation/class-amp-validated-url-post-type.php
index 5bf205fd635..7566cf45ff0 100644
--- a/includes/validation/class-amp-validated-url-post-type.php
+++ b/includes/validation/class-amp-validated-url-post-type.php
@@ -2073,6 +2073,7 @@ public static function enqueue_edit_post_screen_scripts() {
 		// Preload Validated URL data.
 		$preload_paths = [
 			'/wp/v2/plugins',
+			'/wp/v2/themes',
 			'/amp/v1/validated-urls/' . $post->ID,
 		];
 		foreach ( $preload_paths as $path ) {

From 05361ad955754a1cfb8899e9abb03b7cf6a9664a Mon Sep 17 00:00:00 2001
From: Piotr Delawski <piotr.delawski@gmail.com>
Date: Fri, 30 Jul 2021 13:24:37 +0300
Subject: [PATCH 51/58] Skip including Gutenberg in summary if there is another
 plugin

---
 assets/src/utils/sources/summarize.js      |  5 +++
 assets/src/utils/sources/test/summarize.js | 38 ++++++++++++++++++++++
 2 files changed, 43 insertions(+)

diff --git a/assets/src/utils/sources/summarize.js b/assets/src/utils/sources/summarize.js
index 6913da8dbde..b152f9e58f6 100644
--- a/assets/src/utils/sources/summarize.js
+++ b/assets/src/utils/sources/summarize.js
@@ -58,6 +58,11 @@ export default function summarizeSources( raw ) {
 
 		if ( sources[ SOURCE_TYPE_PLUGIN ] ) {
 			result[ SOURCE_TYPE_PLUGIN ] = sources[ SOURCE_TYPE_PLUGIN ];
+
+			// Skip including Gutenberg in the summary if there is another plugin, since Gutenberg is like core.
+			if ( result[ SOURCE_TYPE_PLUGIN ].length > 1 && result[ SOURCE_TYPE_PLUGIN ].includes( 'gutenberg' ) ) {
+				result[ SOURCE_TYPE_PLUGIN ] = result[ SOURCE_TYPE_PLUGIN ].filter( ( plugin ) => plugin !== 'gutenberg' );
+			}
 		}
 		if ( sources[ SOURCE_TYPE_MU_PLUGIN ] ) {
 			result[ SOURCE_TYPE_MU_PLUGIN ] = sources[ SOURCE_TYPE_MU_PLUGIN ];
diff --git a/assets/src/utils/sources/test/summarize.js b/assets/src/utils/sources/test/summarize.js
index a74a365a79a..d856954a541 100644
--- a/assets/src/utils/sources/test/summarize.js
+++ b/assets/src/utils/sources/test/summarize.js
@@ -166,4 +166,42 @@ describe( 'summarizeSources', () => {
 			[ SOURCE_TYPE_THEME ]: [ 'baz' ],
 		} );
 	} );
+
+	it( 'returns Gutenberg if there is no other plugin', () => {
+		const result = summarizeSources( [
+			{
+				type: 'plugin',
+				name: 'gutenberg',
+			},
+			{
+				type: 'theme',
+				name: 'baz',
+			},
+		] );
+		expect( result ).toStrictEqual( {
+			[ SOURCE_TYPE_PLUGIN ]: [ 'gutenberg' ],
+			[ SOURCE_TYPE_THEME ]: [ 'baz' ],
+		} );
+	} );
+
+	it( 'does not return Gutenberg if there is another plugin', () => {
+		const result = summarizeSources( [
+			{
+				type: 'plugin',
+				name: 'foo',
+			},
+			{
+				type: 'plugin',
+				name: 'gutenberg',
+			},
+			{
+				type: 'theme',
+				name: 'baz',
+			},
+		] );
+		expect( result ).toStrictEqual( {
+			[ SOURCE_TYPE_PLUGIN ]: [ 'foo' ],
+			[ SOURCE_TYPE_THEME ]: [ 'baz' ],
+		} );
+	} );
 } );

From a6708ffc305ba30ea2ad20e6438d5e9af19c1d75 Mon Sep 17 00:00:00 2001
From: Piotr Delawski <piotr.delawski@gmail.com>
Date: Tue, 17 Aug 2021 14:01:25 +0200
Subject: [PATCH 52/58] Ensure property is set

---
 src/Validation/ValidatedUrlData.php | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/Validation/ValidatedUrlData.php b/src/Validation/ValidatedUrlData.php
index ecf62a4ab45..e31781fbbba 100644
--- a/src/Validation/ValidatedUrlData.php
+++ b/src/Validation/ValidatedUrlData.php
@@ -223,7 +223,7 @@ private function format_sources( $sources ) {
 		}
 
 		foreach ( $sources as $key => $source ) {
-			if ( 'sources' === $source['type'] ) {
+			if ( isset( $source['type'] ) && 'sources' === $source['type'] ) {
 				return $this->format_sources( $source );
 			}
 

From 612560c679325a4e3e969bab6f678eaa78625ade Mon Sep 17 00:00:00 2001
From: Piotr Delawski <piotr.delawski@gmail.com>
Date: Tue, 17 Aug 2021 14:22:34 +0200
Subject: [PATCH 53/58] Ensure sources prop has default value

---
 assets/src/components/source-details/value.js | 2 +-
 assets/src/components/source-label/index.js   | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/assets/src/components/source-details/value.js b/assets/src/components/source-details/value.js
index 80ffc4f20e6..9aa0a899459 100644
--- a/assets/src/components/source-details/value.js
+++ b/assets/src/components/source-details/value.js
@@ -21,7 +21,7 @@ export default function SourceDetailValue( { slug, source } ) {
 		case 'sources':
 			return <SourcesStack sources={ source.sources } />;
 		case 'type':
-			return <SourceLabel type={ source.type } />;
+			return <SourceLabel type={ source.type } sources={ [ source?.name ] } />;
 		case 'name':
 		case 'shortcode':
 		case 'handle':
diff --git a/assets/src/components/source-label/index.js b/assets/src/components/source-label/index.js
index cab55791125..32e58d431b8 100644
--- a/assets/src/components/source-label/index.js
+++ b/assets/src/components/source-label/index.js
@@ -27,7 +27,7 @@ import usePluginsData from '../plugins-context-provider/use-plugins-data';
 import useThemesData from '../themes-context-provider/use-themes-data';
 
 export default function SourceLabel( {
-	sources,
+	sources = [],
 	type,
 	isCodeOutput,
 } ) {
@@ -86,7 +86,7 @@ export default function SourceLabel( {
 			return null;
 	}
 
-	if ( ! sources || sources.length === 1 ) {
+	if ( ! sources || sources.length <= 1 ) {
 		return (
 			<strong className="source">
 				<Dashicon icon={ icon } />

From 0403e293ceff81727665d3aef1baa18991413fe5 Mon Sep 17 00:00:00 2001
From: Piotr Delawski <piotr.delawski@gmail.com>
Date: Tue, 17 Aug 2021 14:23:14 +0200
Subject: [PATCH 54/58] Use default labels for unrecognized themes and plugins

---
 .../plugins-context-provider/use-plugins-data.js          | 8 +++++++-
 assets/src/components/source-label/index.js               | 2 +-
 .../components/themes-context-provider/use-themes-data.js | 8 +++++++-
 3 files changed, 15 insertions(+), 3 deletions(-)

diff --git a/assets/src/components/plugins-context-provider/use-plugins-data.js b/assets/src/components/plugins-context-provider/use-plugins-data.js
index 9487a1d8c63..f8a456a08d5 100644
--- a/assets/src/components/plugins-context-provider/use-plugins-data.js
+++ b/assets/src/components/plugins-context-provider/use-plugins-data.js
@@ -2,6 +2,7 @@
  * WordPress dependencies
  */
 import { useContext, useEffect, useState } from '@wordpress/element';
+import { __, sprintf } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
@@ -26,7 +27,12 @@ export default function usePluginsData() {
 		}, {} ) );
 	}, [ fetchingPlugins, plugins ] );
 
-	const getPluginNameBySlug = ( slug ) => nameBySlug[ slug ] ?? slug;
+	const getPluginNameBySlug = ( slug ) => nameBySlug[ slug ] ??
+		sprintf(
+			/* translators: Plugin slug. */
+			__( 'Plugin: %s', 'amp' ),
+			slug,
+		);
 
 	return {
 		getPluginNameBySlug,
diff --git a/assets/src/components/source-label/index.js b/assets/src/components/source-label/index.js
index 32e58d431b8..2252f6da272 100644
--- a/assets/src/components/source-label/index.js
+++ b/assets/src/components/source-label/index.js
@@ -51,7 +51,7 @@ export default function SourceLabel( {
 			break;
 		case SOURCE_TYPE_THEME:
 			icon = 'admin-appearance';
-			sources = sources.map( ( slug ) => getThemeNameBySlug( slug ) ?? __( 'Theme', 'amp' ) );
+			sources = sources.map( ( slug ) => getThemeNameBySlug( slug ) );
 			break;
 		case SOURCE_TYPE_CORE:
 			icon = 'wordpress-alt';
diff --git a/assets/src/components/themes-context-provider/use-themes-data.js b/assets/src/components/themes-context-provider/use-themes-data.js
index 6f7fc0f4358..584ab9d20ef 100644
--- a/assets/src/components/themes-context-provider/use-themes-data.js
+++ b/assets/src/components/themes-context-provider/use-themes-data.js
@@ -2,6 +2,7 @@
  * WordPress dependencies
  */
 import { useContext, useEffect, useState } from '@wordpress/element';
+import { __, sprintf } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
@@ -23,7 +24,12 @@ export default function useThemesData() {
 		} ), {} ) );
 	}, [ fetchingThemes, themes ] );
 
-	const getThemeNameBySlug = ( slug ) => nameBySlug[ slug ] ?? slug;
+	const getThemeNameBySlug = ( slug ) => nameBySlug[ slug ] ??
+		sprintf(
+			/* translators: Theme slug. */
+			__( 'Theme: %s', 'amp' ),
+			slug,
+		);
 
 	return {
 		getThemeNameBySlug,

From 9d0ec88ee7dbfd3e2004297e7182bcda54acb1b7 Mon Sep 17 00:00:00 2001
From: Piotr Delawski <piotr.delawski@gmail.com>
Date: Tue, 17 Aug 2021 15:21:10 +0200
Subject: [PATCH 55/58] Increase test coverage

---
 .../formatted-memory-value/index.js           |  3 +-
 .../formatted-memory-value/test/index.js      | 11 +++++
 assets/src/components/icon/test/icon.js       | 11 +++++
 .../__mocks__/index.js                        | 33 +++++++++++++++
 .../src/components/sources-summary/index.js   |  4 +-
 .../test/__snapshots__/index.js.snap          |  5 +++
 .../components/sources-summary/test/index.js  | 41 +++++++++++++++++++
 .../__mocks__/index.js                        | 33 +++++++++++++++
 assets/src/utils/sources/test/summarize.js    |  5 +++
 9 files changed, 143 insertions(+), 3 deletions(-)
 create mode 100644 assets/src/components/plugins-context-provider/__mocks__/index.js
 create mode 100644 assets/src/components/sources-summary/test/__snapshots__/index.js.snap
 create mode 100644 assets/src/components/themes-context-provider/__mocks__/index.js

diff --git a/assets/src/components/formatted-memory-value/index.js b/assets/src/components/formatted-memory-value/index.js
index 645be1a20c8..23242e58f82 100644
--- a/assets/src/components/formatted-memory-value/index.js
+++ b/assets/src/components/formatted-memory-value/index.js
@@ -48,10 +48,11 @@ export default function FormattedMemoryValue( { value, unit } ) {
 					</abbr>
 				</>
 			) }
+			{ ! memoryUnit && unit && ` ${ unit }` }
 		</>
 	);
 }
 FormattedMemoryValue.propTypes = {
 	value: PropTypes.oneOfType( [ PropTypes.number, PropTypes.string ] ).isRequired,
-	unit: PropTypes.oneOf( [ 'b', 'B', 'kb', 'kB', 'KB' ] ),
+	unit: PropTypes.string,
 };
diff --git a/assets/src/components/formatted-memory-value/test/index.js b/assets/src/components/formatted-memory-value/test/index.js
index ae7b70c422a..1b3ee1d9ebc 100644
--- a/assets/src/components/formatted-memory-value/test/index.js
+++ b/assets/src/components/formatted-memory-value/test/index.js
@@ -48,6 +48,17 @@ describe( 'FormattedMemoryValue', () => {
 		expect( container.textContent ).toBe( '234' );
 	} );
 
+	it( 'prints correct output for unknown units', () => {
+		act( () => {
+			render(
+				<FormattedMemoryValue value="234" unit="FooBar" />,
+				container,
+			);
+		} );
+
+		expect( container.textContent ).toBe( '234 FooBar' );
+	} );
+
 	it( 'prints correct value and unit', () => {
 		act( () => {
 			render(
diff --git a/assets/src/components/icon/test/icon.js b/assets/src/components/icon/test/icon.js
index 2944b6e0193..0412e681cca 100644
--- a/assets/src/components/icon/test/icon.js
+++ b/assets/src/components/icon/test/icon.js
@@ -117,6 +117,17 @@ describe( 'Icons', () => {
 		expect( container.querySelector( '.amp-status-icon--broken' ) ).not.toBeNull();
 	} );
 
+	it( 'renders no ValidationStatusIcon if the type flag is not set', () => {
+		act( () => {
+			render(
+				<ValidationStatusIcon />,
+				container,
+			);
+		} );
+
+		expect( container.children ).toHaveLength( 0 );
+	} );
+
 	it( 'renders the valid ValidationStatusIcon', () => {
 		act( () => {
 			render(
diff --git a/assets/src/components/plugins-context-provider/__mocks__/index.js b/assets/src/components/plugins-context-provider/__mocks__/index.js
new file mode 100644
index 00000000000..20c7906f2bb
--- /dev/null
+++ b/assets/src/components/plugins-context-provider/__mocks__/index.js
@@ -0,0 +1,33 @@
+/**
+ * External dependencies
+ */
+import PropTypes from 'prop-types';
+
+/**
+ * WordPress dependencies
+ */
+import { createContext } from '@wordpress/element';
+
+export const Plugins = createContext();
+
+/**
+ * MOCK.
+ *
+ * @param {Object}  props
+ * @param {any}     props.children
+ */
+export function PluginsContextProvider( { children } ) {
+	return (
+		<Plugins.Provider value={
+			{
+				fetchingPlugins: false,
+				plugins: [],
+			}
+		}>
+			{ children }
+		</Plugins.Provider>
+	);
+}
+PluginsContextProvider.propTypes = {
+	children: PropTypes.any,
+};
diff --git a/assets/src/components/sources-summary/index.js b/assets/src/components/sources-summary/index.js
index 88c97f279e6..a8b3d67fdc9 100644
--- a/assets/src/components/sources-summary/index.js
+++ b/assets/src/components/sources-summary/index.js
@@ -28,7 +28,7 @@ export default function SourcesSummary( { sources, validatedTheme } ) {
 
 	if ( ! summarizedSources && validatedTheme ) {
 		return (
-			<SourceLabel sources={ validatedTheme } type={ SOURCE_TYPE_THEME } />
+			<SourceLabel sources={ [ validatedTheme ] } type={ SOURCE_TYPE_THEME } />
 		);
 	}
 
@@ -61,6 +61,6 @@ SourcesSummary.propTypes = {
 			embed: PropTypes.string,
 			block_name: PropTypes.string,
 		} ),
-	).isRequired,
+	),
 	validatedTheme: PropTypes.string,
 };
diff --git a/assets/src/components/sources-summary/test/__snapshots__/index.js.snap b/assets/src/components/sources-summary/test/__snapshots__/index.js.snap
new file mode 100644
index 00000000000..df7b9c5a598
--- /dev/null
+++ b/assets/src/components/sources-summary/test/__snapshots__/index.js.snap
@@ -0,0 +1,5 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`SourcesSummary renders a list of sources 1`] = `"<strong class=\\"source\\"><span class=\\"dashicon dashicons dashicons-admin-plugins\\"></span>Plugin: foo</strong><strong class=\\"source\\"><span class=\\"dashicon dashicons dashicons-admin-appearance\\"></span>Theme: bar</strong>"`;
+
+exports[`SourcesSummary renders validated theme name if no sources are provided 1`] = `"<strong class=\\"source\\"><span class=\\"dashicon dashicons dashicons-admin-appearance\\"></span>Theme: foo</strong>"`;
diff --git a/assets/src/components/sources-summary/test/index.js b/assets/src/components/sources-summary/test/index.js
index 8af3695a836..e5dd12a1ad7 100644
--- a/assets/src/components/sources-summary/test/index.js
+++ b/assets/src/components/sources-summary/test/index.js
@@ -12,6 +12,11 @@ import { act } from 'react-dom/test-utils';
  * Internal dependencies
  */
 import SourcesSummary from '..';
+import { PluginsContextProvider } from '../../plugins-context-provider';
+import { ThemesContextProvider } from '../../themes-context-provider';
+
+jest.mock( '../../plugins-context-provider' );
+jest.mock( '../../themes-context-provider' );
 
 let container;
 
@@ -36,4 +41,40 @@ describe( 'SourcesSummary', () => {
 
 		expect( container.textContent ).toBe( '' );
 	} );
+
+	it( 'renders validated theme name if no sources are provided', () => {
+		act( () => {
+			render(
+				<PluginsContextProvider>
+					<ThemesContextProvider>
+						<SourcesSummary validatedTheme="foo" />
+					</ThemesContextProvider>
+				</PluginsContextProvider>,
+				container,
+			);
+		} );
+
+		expect( container.innerHTML ).toMatchSnapshot();
+		expect( container.textContent ).toContain( 'foo' );
+	} );
+
+	it( 'renders a list of sources', () => {
+		act( () => {
+			render(
+				<PluginsContextProvider>
+					<ThemesContextProvider>
+						<SourcesSummary sources={ [
+							{ type: 'plugin', name: 'foo' },
+							{ type: 'theme', name: 'bar' },
+						] } />
+					</ThemesContextProvider>
+				</PluginsContextProvider>,
+				container,
+			);
+		} );
+
+		expect( container.innerHTML ).toMatchSnapshot();
+		expect( container.textContent ).toContain( 'foo' );
+		expect( container.textContent ).toContain( 'bar' );
+	} );
 } );
diff --git a/assets/src/components/themes-context-provider/__mocks__/index.js b/assets/src/components/themes-context-provider/__mocks__/index.js
new file mode 100644
index 00000000000..92b13e90ef8
--- /dev/null
+++ b/assets/src/components/themes-context-provider/__mocks__/index.js
@@ -0,0 +1,33 @@
+/**
+ * External dependencies
+ */
+import PropTypes from 'prop-types';
+
+/**
+ * WordPress dependencies
+ */
+import { createContext } from '@wordpress/element';
+
+export const Themes = createContext();
+
+/**
+ * MOCK.
+ *
+ * @param {Object}  props
+ * @param {any}     props.children
+ */
+export function ThemesContextProvider( { children } ) {
+	return (
+		<Themes.Provider value={
+			{
+				fetchingThemes: false,
+				themes: [],
+			}
+		}>
+			{ children }
+		</Themes.Provider>
+	);
+}
+ThemesContextProvider.propTypes = {
+	children: PropTypes.any,
+};
diff --git a/assets/src/utils/sources/test/summarize.js b/assets/src/utils/sources/test/summarize.js
index d856954a541..34ff634e8f4 100644
--- a/assets/src/utils/sources/test/summarize.js
+++ b/assets/src/utils/sources/test/summarize.js
@@ -18,6 +18,11 @@ describe( 'summarizeSources', () => {
 		expect( result ).toBeNull();
 	} );
 
+	it( 'renders null if empty or incorrect sources are provided', () => {
+		const result = summarizeSources( [ {}, { foo: 'bar' } ] );
+		expect( result ).toBeNull();
+	} );
+
 	it( 'returns plugin and theme, and skips everything else', () => {
 		const result = summarizeSources( [
 			{

From d7581b5e5539ff71a76b260bd33d1d1e871b2420 Mon Sep 17 00:00:00 2001
From: Piotr Delawski <piotr.delawski@gmail.com>
Date: Tue, 17 Aug 2021 15:25:35 +0200
Subject: [PATCH 56/58] Replace deprecated `assertStringContains` with
 `assertStringContainsString`

---
 .../php/validation/test-class-amp-validated-url-post-type.php | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/tests/php/validation/test-class-amp-validated-url-post-type.php b/tests/php/validation/test-class-amp-validated-url-post-type.php
index 8ea2089fbb5..487e12ff7e5 100644
--- a/tests/php/validation/test-class-amp-validated-url-post-type.php
+++ b/tests/php/validation/test-class-amp-validated-url-post-type.php
@@ -1330,7 +1330,7 @@ public function test_enqueue_edit_post_screen_scripts() {
 		$this->assertFalse( wp_script_is( 'autosave', 'enqueued' ) );
 		$this->assertTrue( wp_script_is( 'amp-validated-url-post-edit-screen', 'enqueued' ) );
 		$this->assertTrue( wp_script_is( 'amp-validated-url-page', 'enqueued' ) );
-		$this->assertStringContains( 'var ampSettings', get_echo( 'wp_print_scripts' ) );
+		$this->assertStringContainsString( 'var ampSettings', get_echo( 'wp_print_scripts' ) );
 		$pagenow = null;
 		$post    = null;
 	}
@@ -1487,7 +1487,7 @@ public function test_print_stylesheets_meta_box() {
 		$validated_url_post = self::factory()->post->create_and_get( [ 'post_type' => AMP_Validated_URL_Post_Type::POST_TYPE_SLUG ] );
 		$output             = get_echo( [ 'AMP_Validated_URL_Post_Type', 'print_stylesheets_meta_box' ], [ $validated_url_post ] );
 
-		$this->assertStringContains( '<div id="amp-validated-url-root"></div>', $output );
+		$this->assertStringContainsString( '<div id="amp-validated-url-root"></div>', $output );
 	}
 
 	/**

From b9de4d55ec82ac0037b42c761dfd88a0be16c8cc Mon Sep 17 00:00:00 2001
From: Piotr Delawski <delawski@users.noreply.github.com>
Date: Tue, 17 Aug 2021 15:32:36 +0200
Subject: [PATCH 57/58] Apply suggestions from code review

Co-authored-by: Alain Schlesser <alain.schlesser@gmail.com>
---
 src/Validation/ValidatedUrlData.php | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/Validation/ValidatedUrlData.php b/src/Validation/ValidatedUrlData.php
index e31781fbbba..538d294a969 100644
--- a/src/Validation/ValidatedUrlData.php
+++ b/src/Validation/ValidatedUrlData.php
@@ -38,7 +38,7 @@ final class ValidatedUrlData {
 	private $stylesheets = null;
 
 	/**
-	 * ValidatedUrlDataProvider constructor.
+	 * ValidatedUrlData constructor.
 	 *
 	 * @param WP_Post $post Post object.
 	 */
@@ -73,7 +73,7 @@ public function get_url() {
 	}
 
 	/**
-	 * Get the date that the URL was validated.
+	 * Get the date that the URL was validated on.
 	 *
 	 * @return string|null
 	 */

From 26525f8c91fedaaee4833d89c07f6cc210f2dc06 Mon Sep 17 00:00:00 2001
From: Piotr Delawski <piotr.delawski@gmail.com>
Date: Tue, 17 Aug 2021 15:36:22 +0200
Subject: [PATCH 58/58] Add missing service

---
 .phpstorm.meta.php | 1 +
 1 file changed, 1 insertion(+)

diff --git a/.phpstorm.meta.php b/.phpstorm.meta.php
index e9417f3284c..3762561b31b 100644
--- a/.phpstorm.meta.php
+++ b/.phpstorm.meta.php
@@ -54,6 +54,7 @@
 			'site_health_integration'            => \AmpProject\AmpWP\Admin\SiteHealth::class,
 			'url_validation_cron'                => \AmpProject\AmpWP\Validation\URLValidationCron::class,
 			'url_validation_rest_controller'     => \AmpProject\AmpWP\Validation\URLValidationRESTController::class,
+			'validated_url_rest_controller'      => \AmpProject\AmpWP\Validation\ValidatedUrlRESTController::class,
 			'validated_url_stylesheet_gc'        => \AmpProject\AmpWP\BackgroundTask\ValidatedUrlStylesheetDataGarbageCollection::class,
 		] )
 	);