Re-use styling for unmoderated comments to apply to new accepted/rejected validation errors

assets/css/amp-validation-error-taxonomy.css

@@ -52,7 +52,7 @@ details[open] .details-attributes__summary {
 	content: "";
 }
 
-details[open] .details-attributes__summary::after,
+tr.expanded .details-attributes__summary::after,
 details.single-error-detail[open] .single-error-detail-summary::after {
 	transform: rotate(180deg);
 }
@@ -185,11 +185,16 @@ details.single-error-detail[open] .single-error-detail-summary::after {
 }
 
 body.taxonomy-amp_validation_error .wp-list-table .new th,
-body.taxonomy-amp_validation_error .wp-list-table .new td {
+body.taxonomy-amp_validation_error .wp-list-table .new td,
+tr.expanded.new + tr > td:first-of-type,
+body.post-type-amp_invalid_url .wp-list-table .new th,
+body.post-type-amp_invalid_url .wp-list-table .new td {
 	background-color: #fef7f1;
 }
 
-body.taxonomy-amp_validation_error .wp-list-table .new th.check-column {
+body.taxonomy-amp_validation_error .wp-list-table .new th.check-column,
+tr.expanded.new + tr > td:first-of-type,
+body.post-type-amp_invalid_url .wp-list-table .new th.check-column {
 	border-left: 4px solid #d54e21;
 }
 

assets/js/amp-invalid-url-post-edit-screen.js

@@ -1,9 +1,7 @@
 /* exported ampInvalidUrlPostEditScreen */
 
-var ampInvalidUrlPostEditScreen = ( function() { // eslint-disable-line no-unused-vars
-	var component;
-
-	component = {
+const ampInvalidUrlPostEditScreen = ( function() { // eslint-disable-line no-unused-vars
+	let component = {
 		data: {
 			l10n: {
 				unsaved_changes: '',
@@ -287,14 +285,32 @@ var ampInvalidUrlPostEditScreen = ( function() { // eslint-disable-line no-unuse
 	 * And sets this as the src of the status icon <img>.
 	 */
 	component.handleStatusChange = function handleStatusChange() {
-		const onChange = function( event ) {
+		const setRowStatusClass = function( { row, select } ) {
+			const acceptedValue = 3;
+			const rejectedValue = 2;
+			const status = parseInt( select.options[ select.selectedIndex ].value );
+
+			row.classList.toggle( 'new', isNaN( status ) );
+			row.classList.toggle( 'accepted', acceptedValue === status );
+			row.classList.toggle( 'rejected', rejectedValue === status );
+		};
+
+		const onChange = function( { event, row, select } ) {
 			if ( event.target.matches( 'select' ) ) {
 				component.updateSelectIcon( event.target );
+				setRowStatusClass( { row, select } );
 			}
 		};
 
-		document.querySelectorAll( '.amp-validation-error-status' ).forEach( function( element ) {
-			element.addEventListener( 'change', onChange );
+		document.querySelectorAll( 'tr[id^="tag-"]' ).forEach( function( row ) {
+			const select = row.querySelector( '.amp-validation-error-status' );
+
+			if ( select ) {
+				setRowStatusClass( { row, select } );
+				select.addEventListener( 'change', function( event ) {
+					onChange( { event, row, select } );
+				} );
+			}
 		} );
 	};
 

assets/js/amp-invalid-urls-index.js

@@ -0,0 +1,34 @@
+/* exported ampInvalidUrlsIndex */
+
+const ampInvalidUrlsIndex = ( function() { // eslint-disable-line no-unused-vars
+	let component = {
+		classes: {}
+	};
+
+	/**
+	 * The class for the new status
+	 *
+	 * @type {string}
+	 */
+	component.classes.new = 'new';
+
+	/**
+	 * Boot.
+	 */
+	component.boot = function boot() {
+		component.highlightRowsWithNewStatus();
+	};
+
+	/**
+	 * Highlight rows with new status.
+	 */
+	component.highlightRowsWithNewStatus = function highlightRowsWithNewStatus() {
+		document.querySelectorAll( 'tr[id^="post-"]' ).forEach( function( row ) {
+			if ( row.querySelector( 'span.status-text.' + component.classes.new ) ) {
+				row.classList.add( 'new' );
+			}
+		} );
+	};
+
+	return component;
+}() );

assets/src/amp-validation-detail-toggle.js

@@ -14,7 +14,7 @@ const OPEN_CLASS = 'is-open';
  * Adds detail toggle buttons to the header and footer rows of the validation error "details" column.
  * The buttons are added via JS because there's no easy way to append them to the heading of a sortable
  * table column via backend code.
- * 
+ *
  * @param {string} containerSelector Selector for elements that will have the button added.
  * @param {string} ariaLabel Screen reader label for the button.
  * @return {Array} Array of added buttons.
@@ -61,6 +61,24 @@ function addToggleAllListener( { btn, toggleAllButtonSelector = null, targetDeta
 	btn.addEventListener( 'click', onButtonClick );
 }
 
+/**
+ * Adds classes to the rows for the amp_validation_error term list table.
+ *
+ * This is needed because \WP_Terms_List_Table::single_row() does not allow for additional
+ * attributes to be added to the <tr> element.
+ */
+function addTermListTableRowClasses() {
+	const rows = [ ...document.querySelectorAll( '#the-list tr' ) ];
+	rows.forEach( ( row ) => {
+		const statusText = row.querySelector( '.column-status > .status-text' );
+		if ( statusText ) {
+			row.classList.toggle( 'new', statusText.classList.contains( 'new' ) );
+			row.classList.toggle( 'accepted', statusText.classList.contains( 'accepted' ) );
+			row.classList.toggle( 'rejected', statusText.classList.contains( 'rejected' ) );
+		}
+	} );
+}
+
 domReady( () => {
 	addToggleButtons( 'th.column-details.manage-column', detailToggleBtnAriaLabel )
 		.forEach( ( btn ) => {
@@ -79,4 +97,6 @@ domReady( () => {
 				targetDetailsSelector: 'details.source'
 			} );
 		} );
+
+	addTermListTableRowClasses();
 } );

includes/validation/class-amp-invalid-url-post-type.php

@@ -209,6 +209,21 @@ public static function add_admin_hooks() {
 	public static function enqueue_post_list_screen_scripts() {
 		$screen = get_current_screen();
 
+		if ( 'edit-amp_invalid_url' === $screen->id && self::POST_TYPE_SLUG === $screen->post_type ) {
+			wp_enqueue_script(
+				'amp-invalid-urls-index',
+				amp_get_asset_url( 'js/amp-invalid-urls-index.js' ),
+				array(),
+				AMP__VERSION,
+				true
+			);
+			wp_add_inline_script(
+				'amp-invalid-urls-index',
+				sprintf( 'document.addEventListener( "DOMContentLoaded", function() { ampInvalidUrlsIndex.boot(); } );' ),
+				'after'
+			);
+		}
+
 		// Enqueue this on both the 'Invalid URLs' page and the single URL page.
 		if ( 'edit-amp_invalid_url' === $screen->id || self::POST_TYPE_SLUG === $screen->id ) {
 			wp_enqueue_style(