Highlight AMP-compatible themes and plugins in admin

.eslintrc

@@ -60,7 +60,7 @@
     "react/no-unused-prop-types": "error",
     "react/self-closing-comp": "error",
     "import/no-unresolved": [ "error", {
-      "ignore": [ "jquery", "amp-block-editor-data", "amp-settings", "amp-support", "amp-block-validation" ]
+      "ignore": [ "jquery", "amp-block-editor-data", "amp-settings", "amp-themes", "amp-plugins", "amp-support", "amp-block-validation" ]
     } ],
     "import/order": [ "error", { "groups": [ "builtin", [ "external", "unknown" ], "internal", "parent", "sibling", "index" ] } ],
     "jsdoc/check-indentation": "error",

.gitattributes

@@ -7,3 +7,4 @@ includes/sanitizers/class-amp-allowed-tags-generated.php linguist-generated=true
 docs/**/*.md                                             linguist-generated=true
 docs/docs.json                                           linguist-generated=true
 **/__data__/*.js                                         linguist-generated=true
+includes/ecosystem-data/*.php                            linguist-generated=true

.lintstagedrc.js

@@ -8,7 +8,7 @@ module.exports = {
 	"**/*.js": [
 		"npm run lint:js"
 	],
-	"**/!(amp).php": [
+	"**/!(amp.php).php": [
 		"npm run lint:php"
 	],
 	"amp.php": [

assets/css/src/amp-admin.css

@@ -0,0 +1,74 @@
+.plugin-icon {
+	object-fit: contain; /* Account for non-square icons being used. */
+}
+
+.plugin-card {
+	position: relative;
+}
+
+.amp-extension-card-message {
+	text-align: center;
+	padding: 0;
+	clear: both;
+	background-color: #fff;
+	color: #3c434a;
+	position: absolute;
+	top: -10px;
+	left: -10px;
+	border-radius: 15px;
+}
+
+.amp-logo-icon {
+	background-image: url("../images/amp-logo-icon.svg");
+	background-color: transparent;
+	background-size: 30px;
+	height: 30px;
+	width: 30px;
+	display: inline-block;
+	vertical-align: middle;
+	cursor: pointer;
+}
+
+.amp-logo-icon.small {
+	background-size: 15px 15px;
+	height: 15px;
+	width: 15px;
+}
+
+.theme-browser .theme {
+	float: none;
+	display: inline-block;
+	vertical-align: top;
+}
+
+.plugin-install-tab-amp-compatible .plugin-card-bottom {
+	display: none;
+}
+
+.amp-extension-card-message .tooltiptext {
+	visibility: hidden;
+	width: 60%;
+	background-color: rgba(0, 0, 0, 0.8);
+	color: #fff;
+	text-align: center;
+	border-radius: 6px;
+	padding: 5px;
+	position: absolute;
+	z-index: 1;
+	left: 40px;
+	min-width: 200px;
+}
+
+.tooltiptext::after {
+	content: "";
+	position: absolute;
+	top: 10px;
+	right: 100%;
+	border-width: 7px;
+	border-style: solid;
+	border-color: transparent rgba(0, 0, 0, 0.8) transparent transparent;
+}
+
+.amp-extension-card-message:hover .tooltiptext {
+	visibility: visible;
+}

assets/src/admin/amp-plugin-install.js

@@ -0,0 +1,115 @@
+/**
+ * WordPress dependencies
+ */
+import domReady from '@wordpress/dom-ready';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * External dependencies
+ */
+import { AMP_PLUGINS, AMP_COMPATIBLE } from 'amp-plugins'; // From WP inline script.
+import { debounce } from 'lodash';
+
+const ampPluginInstall = {
+
+	/**
+	 * Init function.
+	 */
+	init() {
+		if ( this.isAmpCompatibleTab() ) {
+			this.removeAdditionalInfo();
+		} else {
+			this.addAmpMessage();
+		}
+		this.addAmpMessageInSearchResult();
+	},
+
+	/**
+	 * Check if "AMP Compatible" tab is open or not.
+	 *
+	 * @return {boolean} Is AMP-compatible tab.
+	 */
+	isAmpCompatibleTab() {
+		const queryParams = new URLSearchParams( window.location.search.substr( 1 ) );
+		return queryParams.get( 'tab' ) === AMP_COMPATIBLE;
+	},
+
+	/**
+	 * Add message for AMP Compatibility in AMP-compatible plugins card after search result comes in.
+	 */
+	addAmpMessageInSearchResult() {
+		const pluginFilterForm = document.getElementById( 'plugin-filter' );
+		const pluginInstallSearch = document.querySelector( '.plugin-install-php .wp-filter-search' );
+		if ( ! pluginFilterForm || ! pluginInstallSearch ) {
+			return;
+		}
+
+		const startSearchResults = debounce( () => {
+			pluginInstallSearch.removeEventListener( 'input', startSearchResults, { once: true } ); // For IE 11 which doesn't support once events.
+
+			// Replace the class for our custom AMP-compatible tab once doing a search.
+			const wrap = document.querySelector( '.plugin-install-tab-amp-compatible' );
+			if ( wrap ) {
+				wrap.classList.remove( 'plugin-install-tab-amp-compatible' );
+				wrap.classList.add( 'plugin-install-tab-search-result' );
+			}
+
+			// Start watching for changes the first time a search is being made.
+			const mutationObserver = new MutationObserver( () => {
+				this.addAmpMessage();
+			} );
+			mutationObserver.observe( pluginFilterForm, { childList: true } );
+		}, 1000 ); // See timeout in core: <https://github.com/WordPress/WordPress/blob/b87617e2719d114d123a88ed7e489170f0204735/wp-admin/js/updates.js#L2578>
+
+		pluginInstallSearch.addEventListener( 'input', startSearchResults, { once: true } );
+	},
+
+	/**
+	 * Add message for AMP Compatibility in AMP-compatible plugins card.
+	 */
+	addAmpMessage() {
+		for ( const pluginSlug of AMP_PLUGINS ) {
+			const pluginCardElement = document.querySelector( `.plugin-card.plugin-card-${ pluginSlug }` );
+
+			if ( ! pluginCardElement ) {
+				continue;
+			}
+
+			// Skip cards that have already been processed.
+			if ( pluginCardElement.classList.contains( 'amp-extension-card-message' ) ) {
+				continue;
+			}
+
+			const messageElement = document.createElement( 'div' );
+			const iconElement = document.createElement( 'span' );
+			const tooltipElement = document.createElement( 'span' );
+
+			messageElement.classList.add( 'amp-extension-card-message' );
+			iconElement.classList.add( 'amp-logo-icon' );
+			tooltipElement.classList.add( 'tooltiptext' );
+
+			tooltipElement.append(
+				__( 'This is known to work well with the AMP plugin.', 'amp' ),
+			);
+
+			messageElement.append( iconElement );
+			messageElement.append( tooltipElement );
+
+			pluginCardElement.appendChild( messageElement );
+		}
+	},
+
+	/**
+	 * Remove the additional info from the plugin card in the "AMP Compatible" tab.
+	 */
+	removeAdditionalInfo() {
+		const pluginCardBottom = document.querySelectorAll( '.plugin-install-tab-amp-compatible .plugin-card-bottom' );
+		for ( const elementNode of pluginCardBottom ) {
+			elementNode.remove();
+		}
+	},
+};
+
+domReady( () => {
+	ampPluginInstall.init();
+} );

assets/src/admin/amp-theme-install.js

@@ -0,0 +1,59 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import domReady from '@wordpress/dom-ready';
+
+/**
+ * External dependencies
+ */
+import { AMP_COMPATIBLE } from 'amp-themes'; // From WP inline script.
+
+/**
+ * Internal dependencies
+ */
+import ampViewTheme from './theme-install/view/theme';
+
+const ampThemeInstall = {
+
+	/**
+	 * Init function.
+	 */
+	init() {
+		this.addTab();
+		this.overrideViews();
+	},
+
+	/**
+	 * Add a new tab for AMP-compatible themes on theme install page.
+	 */
+	addTab() {
+		const filterLinks = document.querySelector( '.filter-links' );
+		if ( ! filterLinks ) {
+			return;
+		}
+
+		const listItem = document.createElement( 'li' );
+		const anchorElement = document.createElement( 'a' );
+
+		anchorElement.setAttribute( 'href', '#' );
+		anchorElement.setAttribute( 'data-sort', AMP_COMPATIBLE );
+		anchorElement.append( __( 'AMP Compatible', 'amp' ) );
+
+		listItem.appendChild( anchorElement );
+
+		filterLinks.appendChild( listItem );
+	},
+
+	/**
+	 * Override theme view.
+	 */
+	overrideViews() {
+		wp.themes.view.Theme = ampViewTheme;
+	},
+
+};
+
+domReady( () => {
+	ampThemeInstall.init();
+} );