From 8ab449ae3564f5230653820c7008e370b01ccb67 Mon Sep 17 00:00:00 2001
From: Helen Hou-Sandi <helen@git.wordpress.org>
Date: Wed, 14 Jan 2015 22:13:03 +0000
Subject: [PATCH] List tables: Use CSS :nth-child() selectors for zebra
 striping.

Note that this does not fix issues related to comment quick edit. Internal linking also continues to use the `.alternate` class for now. IE8 and below gracefully degrade by not having zebra striping.

There is some hoop jumping with adding an extra table row to maintain zebra striping during quick edit. Documenting that here for future reference; it is also in the inline documentation.

fixes #30981 and #26060. see #25060.


git-svn-id: https://develop.svn.wordpress.org/trunk@31181 602fd350-edb4-49c9-b593-d223f7449a82
---
 src/wp-admin/css/common.css                   |  4 ++--
 src/wp-admin/css/dashboard.css                |  5 -----
 src/wp-admin/css/list-tables.css              |  8 ++++----
 src/wp-admin/import.php                       |  6 ++----
 .../includes/class-wp-links-list-table.php    |  5 +----
 src/wp-admin/includes/class-wp-list-table.php |  7 ++-----
 .../includes/class-wp-media-list-table.php    |  4 +---
 .../includes/class-wp-ms-sites-list-table.php |  7 +++----
 .../includes/class-wp-ms-users-list-table.php |  7 +++----
 .../includes/class-wp-posts-list-table.php    |  7 ++-----
 .../includes/class-wp-terms-list-table.php    |  6 +-----
 .../includes/class-wp-users-list-table.php    | 10 ++++------
 src/wp-admin/includes/template.php            |  6 +-----
 src/wp-admin/js/inline-edit-post.js           | 20 +++++++------------
 src/wp-admin/js/inline-edit-tax.js            | 14 +++----------
 src/wp-admin/my-sites.php                     |  6 ++----
 16 files changed, 38 insertions(+), 84 deletions(-)

diff --git a/src/wp-admin/css/common.css b/src/wp-admin/css/common.css
index 969cc5f055..3219f1d78b 100644
--- a/src/wp-admin/css/common.css
+++ b/src/wp-admin/css/common.css
@@ -627,8 +627,8 @@ div#widgets-right .widget-top:hover,
 	color: #000;
 }
 
-.alternate,
-.alt {
+.striped > tbody > :nth-child(odd),
+.alternate {
 	background-color: #f9f9f9;
 }
 
diff --git a/src/wp-admin/css/dashboard.css b/src/wp-admin/css/dashboard.css
index fbf079506a..b9f5a09478 100644
--- a/src/wp-admin/css/dashboard.css
+++ b/src/wp-admin/css/dashboard.css
@@ -694,11 +694,6 @@ form.initial-form.quickpress-open input#title {
 	margin-left: 12px;
 }
 
-#activity-widget #the-comment-list .alternate,
-#activity-widget #the-comment-list .alt {
-	background: none;
-}
-
 #activity-widget #the-comment-list .comment-item {
 	background: #fafafa;
 	padding: 12px;
diff --git a/src/wp-admin/css/list-tables.css b/src/wp-admin/css/list-tables.css
index 6e547968e9..a7f067fb07 100644
--- a/src/wp-admin/css/list-tables.css
+++ b/src/wp-admin/css/list-tables.css
@@ -1433,16 +1433,16 @@ div.action-links,
 
 /* ms */
 /* Background Color for Site Status */
-.wp-list-table .site-deleted {
+.wp-list-table tr.site-deleted {
 	background: #ff8573;
 }
-.wp-list-table .site-spammed {
+.wp-list-table tr.site-spammed {
 	background: #faafaa;
 }
-.wp-list-table .site-archived {
+.wp-list-table tr.site-archived {
 	background: #ffebe8;
 }
-.wp-list-table .site-mature {
+.wp-list-table tr.site-mature {
 	background: #fecac2;
 }
 
diff --git a/src/wp-admin/import.php b/src/wp-admin/import.php
index e6f05e0eb3..518ab7ef20 100644
--- a/src/wp-admin/import.php
+++ b/src/wp-admin/import.php
@@ -76,10 +76,9 @@ if ( empty( $importers ) ) {
 } else {
 	uasort( $importers, '_usort_by_first_member' );
 ?>
-<table class="widefat importers">
+<table class="widefat importers striped">
 
 <?php
-	$alt = '';
 	foreach ($importers as $importer_id => $data) {
 		$action = '';
 		if ( isset( $data['install'] ) ) {
@@ -108,9 +107,8 @@ if ( empty( $importers ) ) {
 			$action = "<a href='" . esc_url( "admin.php?import=$importer_id" ) . "' title='" . esc_attr( wptexturize( strip_tags( $data[1] ) ) ) ."'>{$data[0]}</a>";
 		}
 
-		$alt = $alt ? '' : ' class="alternate"';
 		echo "
-			<tr$alt>
+			<tr>
 				<td class='import-system row-title'>$action</td>
 				<td class='desc'>{$data[1]}</td>
 			</tr>";
diff --git a/src/wp-admin/includes/class-wp-links-list-table.php b/src/wp-admin/includes/class-wp-links-list-table.php
index 3a3906356f..88d2cc7cb1 100644
--- a/src/wp-admin/includes/class-wp-links-list-table.php
+++ b/src/wp-admin/includes/class-wp-links-list-table.php
@@ -111,8 +111,6 @@ class WP_Links_List_Table extends WP_List_Table {
 	public function display_rows() {
 		global $cat_id;
 
-		$alt = 0;
-
 		foreach ( $this->items as $link ) {
 			$link = sanitize_bookmark( $link );
 			$link->link_name = esc_attr( $link->link_name );
@@ -122,11 +120,10 @@ class WP_Links_List_Table extends WP_List_Table {
 
 			$visible = ( $link->link_visible == 'Y' ) ? __( 'Yes' ) : __( 'No' );
 			$rating  = $link->link_rating;
-			$style = ( $alt++ % 2 ) ? '' : ' class="alternate"';
 
 			$edit_link = get_edit_bookmark_link( $link );
 ?>
-		<tr id="link-<?php echo $link->link_id; ?>" <?php echo $style; ?>>
+		<tr id="link-<?php echo $link->link_id; ?>">
 <?php
 
 			list( $columns, $hidden ) = $this->get_column_info();
diff --git a/src/wp-admin/includes/class-wp-list-table.php b/src/wp-admin/includes/class-wp-list-table.php
index 6245f157f9..544408807e 100644
--- a/src/wp-admin/includes/class-wp-list-table.php
+++ b/src/wp-admin/includes/class-wp-list-table.php
@@ -953,7 +953,7 @@ class WP_List_Table {
 	 * @return array List of CSS classes for the table tag.
 	 */
 	protected function get_table_classes() {
-		return array( 'widefat', 'fixed', $this->_args['plural'] );
+		return array( 'widefat', 'fixed', 'striped', $this->_args['plural'] );
 	}
 
 	/**
@@ -1028,10 +1028,7 @@ class WP_List_Table {
 	 * @param object $item The current item
 	 */
 	public function single_row( $item ) {
-		static $row_class = '';
-		$row_class = ( $row_class == '' ? ' class="alternate"' : '' );
-
-		echo '<tr' . $row_class . '>';
+		echo '<tr>';
 		$this->single_row_columns( $item );
 		echo '</tr>';
 	}
diff --git a/src/wp-admin/includes/class-wp-media-list-table.php b/src/wp-admin/includes/class-wp-media-list-table.php
index 1d1ebb0faa..436ed40f35 100644
--- a/src/wp-admin/includes/class-wp-media-list-table.php
+++ b/src/wp-admin/includes/class-wp-media-list-table.php
@@ -268,7 +268,6 @@ class WP_Media_List_Table extends WP_List_Table {
 		global $post;
 
 		add_filter( 'the_title','esc_html' );
-		$alt = '';
 
 		while ( have_posts() ) : the_post();
 			$user_can_edit = current_user_can( 'edit_post', $post->ID );
@@ -277,11 +276,10 @@ class WP_Media_List_Table extends WP_List_Table {
 			||  !$this->is_trash && $post->post_status == 'trash' )
 				continue;
 
-			$alt = ( 'alternate' == $alt ) ? '' : 'alternate';
 			$post_owner = ( get_current_user_id() == $post->post_author ) ? 'self' : 'other';
 			$att_title = _draft_or_post_title();
 ?>
-	<tr id="post-<?php echo $post->ID; ?>" class="<?php echo trim( $alt . ' author-' . $post_owner . ' status-' . $post->post_status ); ?>">
+	<tr id="post-<?php echo $post->ID; ?>" class="<?php echo trim( ' author-' . $post_owner . ' status-' . $post->post_status ); ?>">
 <?php
 
 list( $columns, $hidden ) = $this->get_column_info();
diff --git a/src/wp-admin/includes/class-wp-ms-sites-list-table.php b/src/wp-admin/includes/class-wp-ms-sites-list-table.php
index c4a99bfd20..288f86b272 100644
--- a/src/wp-admin/includes/class-wp-ms-sites-list-table.php
+++ b/src/wp-admin/includes/class-wp-ms-sites-list-table.php
@@ -208,15 +208,14 @@ class WP_MS_Sites_List_Table extends WP_List_Table {
 			$date = 'Y/m/d \<\b\r \/\> g:i:s a';
 		}
 
-		$class = '';
 		foreach ( $this->items as $blog ) {
-			$class = ( 'alternate' == $class ) ? '' : 'alternate';
+			$class = '';
 			reset( $status_list );
 
 			$blog_states = array();
 			foreach ( $status_list as $status => $col ) {
 				if ( get_blog_status( $blog['blog_id'], $status ) == 1 ) {
-					$class = $col[0];
+					$class = " class='{$col[0]}'";
 					$blog_states[] = $col[1];
 				}
 			}
@@ -231,7 +230,7 @@ class WP_MS_Sites_List_Table extends WP_List_Table {
 					$blog_state .= "<span class='post-state'>$state$sep</span>";
 				}
 			}
-			echo "<tr class='$class'>";
+			echo "<tr{$class}>";
 
 			$blogname = ( is_subdomain_install() ) ? str_replace( '.' . get_current_site()->domain, '', $blog['domain'] ) : $blog['path'];
 
diff --git a/src/wp-admin/includes/class-wp-ms-users-list-table.php b/src/wp-admin/includes/class-wp-ms-users-list-table.php
index 3a8dd25259..571ba4c495 100644
--- a/src/wp-admin/includes/class-wp-ms-users-list-table.php
+++ b/src/wp-admin/includes/class-wp-ms-users-list-table.php
@@ -149,20 +149,19 @@ class WP_MS_Users_List_Table extends WP_List_Table {
 	public function display_rows() {
 		global $mode;
 
-		$alt = '';
 		$super_admins = get_super_admins();
 		foreach ( $this->items as $user ) {
-			$alt = ( 'alternate' == $alt ) ? '' : 'alternate';
+			$class = '';
 
 			$status_list = array( 'spam' => 'site-spammed', 'deleted' => 'site-deleted' );
 
 			foreach ( $status_list as $status => $col ) {
 				if ( $user->$status )
-					$alt .= " $col";
+					$class .= " $col";
 			}
 
 			?>
-			<tr class="<?php echo $alt; ?>">
+			<tr class="<?php echo trim( $class ); ?>">
 			<?php
 
 			list( $columns, $hidden ) = $this->get_column_info();
diff --git a/src/wp-admin/includes/class-wp-posts-list-table.php b/src/wp-admin/includes/class-wp-posts-list-table.php
index dcdccdf804..28287cf470 100644
--- a/src/wp-admin/includes/class-wp-posts-list-table.php
+++ b/src/wp-admin/includes/class-wp-posts-list-table.php
@@ -288,7 +288,7 @@ class WP_Posts_List_Table extends WP_List_Table {
 	}
 
 	protected function get_table_classes() {
-		return array( 'widefat', 'fixed', is_post_type_hierarchical( $this->screen->post_type ) ? 'pages' : 'posts' );
+		return array( 'widefat', 'fixed', 'striped', is_post_type_hierarchical( $this->screen->post_type ) ? 'pages' : 'posts' );
 	}
 
 	public function get_columns() {
@@ -572,13 +572,11 @@ class WP_Posts_List_Table extends WP_List_Table {
 
 	/**
 	 * @global string $mode
-	 * @staticvar string $alternate
 	 * @param WP_Post $post
 	 * @param int $level
 	 */
 	public function single_row( $post, $level = 0 ) {
 		global $mode;
-		static $alternate;
 
 		$global_post = get_post();
 		$GLOBALS['post'] = $post;
@@ -589,8 +587,7 @@ class WP_Posts_List_Table extends WP_List_Table {
 		$post_type_object = get_post_type_object( $post->post_type );
 		$can_edit_post = current_user_can( 'edit_post', $post->ID );
 
-		$alternate = 'alternate' == $alternate ? '' : 'alternate';
-		$classes = $alternate . ' iedit author-' . ( get_current_user_id() == $post->post_author ? 'self' : 'other' );
+		$classes = 'iedit author-' . ( get_current_user_id() == $post->post_author ? 'self' : 'other' );
 
 		$lock_holder = wp_check_post_lock( $post->ID );
 		if ( $lock_holder ) {
diff --git a/src/wp-admin/includes/class-wp-terms-list-table.php b/src/wp-admin/includes/class-wp-terms-list-table.php
index 7d8f8bfe5e..9c68033cdc 100644
--- a/src/wp-admin/includes/class-wp-terms-list-table.php
+++ b/src/wp-admin/includes/class-wp-terms-list-table.php
@@ -268,7 +268,6 @@ class WP_Terms_List_Table extends WP_List_Table {
 
 	/**
 	 * @global string $taxonomy
-	 * @staticvar string $row_class
 	 * @param object $tag
 	 * @param int $level
 	 */
@@ -276,12 +275,9 @@ class WP_Terms_List_Table extends WP_List_Table {
 		global $taxonomy;
  		$tag = sanitize_term( $tag, $taxonomy );
 
-		static $row_class = '';
-		$row_class = ( $row_class == '' ? ' class="alternate"' : '' );
-
 		$this->level = $level;
 
-		echo '<tr id="tag-' . $tag->term_id . '"' . $row_class . '>';
+		echo '<tr id="tag-' . $tag->term_id . '">';
 		$this->single_row_columns( $tag );
 		echo '</tr>';
 	}
diff --git a/src/wp-admin/includes/class-wp-users-list-table.php b/src/wp-admin/includes/class-wp-users-list-table.php
index 81637e98b5..c7958e0619 100644
--- a/src/wp-admin/includes/class-wp-users-list-table.php
+++ b/src/wp-admin/includes/class-wp-users-list-table.php
@@ -306,7 +306,6 @@ class WP_Users_List_Table extends WP_List_Table {
 
 		$editable_roles = array_keys( get_editable_roles() );
 
-		$style = '';
 		foreach ( $this->items as $userid => $user_object ) {
 			if ( count( $user_object->roles ) <= 1 ) {
 				$role = reset( $user_object->roles );
@@ -319,8 +318,7 @@ class WP_Users_List_Table extends WP_List_Table {
 			if ( is_multisite() && empty( $user_object->allcaps ) )
 				continue;
 
-			$style = ( ' class="alternate"' == $style ) ? '' : ' class="alternate"';
-			echo "\n\t" . $this->single_row( $user_object, $style, $role, isset( $post_counts ) ? $post_counts[ $userid ] : 0 );
+			echo "\n\t" . $this->single_row( $user_object, $style = '', $role, isset( $post_counts ) ? $post_counts[ $userid ] : 0 );
 		}
 	}
 
@@ -328,11 +326,11 @@ class WP_Users_List_Table extends WP_List_Table {
 	 * Generate HTML for a single row on the users.php admin panel.
 	 *
 	 * @since 3.1.0
+	 * @since 4.2.0 `$style` argument was deprecated.
 	 * @access public
 	 *
 	 * @param object $user_object The current user object.
-	 * @param string $style       Optional. Style attributes added to the `<tr>` element.
-	 *                            Must be sanitized. Default empty.
+	 * @param string $style       Deprecated. Not used.
 	 * @param string $role        Optional. Key for the $wp_roles array. Default empty.
 	 * @param int    $numposts    Optional. Post count to display for this user. Defaults
 	 *                            to zero, as in, a new user has made zero posts.
@@ -395,7 +393,7 @@ class WP_Users_List_Table extends WP_List_Table {
 		$role_name = isset( $wp_roles->role_names[$role] ) ? translate_user_role( $wp_roles->role_names[$role] ) : __( 'None' );
 		$avatar = get_avatar( $user_object->ID, 32 );
 
-		$r = "<tr id='user-$user_object->ID'$style>";
+		$r = "<tr id='user-$user_object->ID'>";
 
 		list( $columns, $hidden ) = $this->get_column_info();
 
diff --git a/src/wp-admin/includes/template.php b/src/wp-admin/includes/template.php
index 554b720e2b..26c8a4a1c7 100644
--- a/src/wp-admin/includes/template.php
+++ b/src/wp-admin/includes/template.php
@@ -589,10 +589,6 @@ function _list_meta_row( $entry, &$count ) {
 
 	$r = '';
 	++ $count;
-	if ( $count % 2 )
-		$style = 'alternate';
-	else
-		$style = '';
 
 	if ( is_serialized( $entry['meta_value'] ) ) {
 		if ( is_serialized_string( $entry['meta_value'] ) ) {
@@ -611,7 +607,7 @@ function _list_meta_row( $entry, &$count ) {
 
 	$delete_nonce = wp_create_nonce( 'delete-meta_' . $entry['meta_id'] );
 
-	$r .= "\n\t<tr id='meta-{$entry['meta_id']}' class='$style'>";
+	$r .= "\n\t<tr id='meta-{$entry['meta_id']}'>";
 	$r .= "\n\t\t<td class='left'><label class='screen-reader-text' for='meta-{$entry['meta_id']}-key'>" . __( 'Key' ) . "</label><input name='meta[{$entry['meta_id']}][key]' id='meta-{$entry['meta_id']}-key' type='text' size='20' value='{$entry['meta_key']}' />";
 
 	$r .= "\n\t\t<div class='submit'>";
diff --git a/src/wp-admin/js/inline-edit-post.js b/src/wp-admin/js/inline-edit-post.js
index 48e635f23c..de12499754 100644
--- a/src/wp-admin/js/inline-edit-post.js
+++ b/src/wp-admin/js/inline-edit-post.js
@@ -82,7 +82,8 @@ inlineEditPost = {
 		this.revert();
 
 		$('#bulk-edit td').attr('colspan', $('.widefat:first thead th:visible').length);
-		$('table.widefat tbody').prepend( $('#bulk-edit') );
+		// Insert the editor at the top of the table with an empty row above to maintain zebra striping.
+		$('table.widefat tbody').prepend( $('#bulk-edit') ).prepend('<tr class="hidden"></tr>');
 		$('#bulk-edit').addClass('inline-editor').show();
 
 		$( 'tbody th.check-column input[type="checkbox"]' ).each( function() {
@@ -128,14 +129,11 @@ inlineEditPost = {
 			fields.push('post_parent', 'page_template');
 		}
 
-		// add the new blank row
+		// add the new edit row with an extra blank row underneath to maintain zebra striping.
 		editRow = $('#inline-edit').clone(true);
 		$('td', editRow).attr('colspan', $('.widefat:first thead th:visible').length);
 
-		if ( $( t.what + id ).hasClass( 'alternate' ) ) {
-			$(editRow).addClass('alternate');
-		}
-		$(t.what+id).hide().after(editRow);
+		$(t.what+id).hide().before(editRow).before('<tr class="hidden"></tr>');
 
 		// populate the data
 		rowData = $('#inline_'+id);
@@ -265,7 +263,7 @@ inlineEditPost = {
 
 				if (r) {
 					if ( -1 !== r.indexOf( '<tr' ) ) {
-						$(inlineEditPost.what+id).remove();
+						$(inlineEditPost.what+id).siblings('tr.hidden').addBack().remove();
 						$('#edit-'+id).before(r).remove();
 						$(inlineEditPost.what+id).hide().fadeIn();
 					} else {
@@ -275,10 +273,6 @@ inlineEditPost = {
 				} else {
 					$('#edit-'+id+' .inline-edit-save .error').html(inlineEditL10n.error).show();
 				}
-
-				if ( $('#post-'+id).prev().hasClass('alternate') ) {
-					$('#post-'+id).removeClass('alternate');
-				}
 			},
 		'html');
 		return false;
@@ -291,11 +285,11 @@ inlineEditPost = {
 			$('table.widefat .spinner').hide();
 
 			if ( 'bulk-edit' === id ) {
-				$('table.widefat #bulk-edit').removeClass('inline-editor').hide();
+				$('table.widefat #bulk-edit').removeClass('inline-editor').hide().siblings('tr.hidden').remove();
 				$('#bulk-titles').html('');
 				$('#inlineedit').append( $('#bulk-edit') );
 			} else {
-				$('#'+id).remove();
+				$('#'+id).siblings('tr.hidden').addBack().remove();
 				id = id.substr( id.lastIndexOf('-') + 1 );
 				$(this.what+id).show();
 			}
diff --git a/src/wp-admin/js/inline-edit-tax.js b/src/wp-admin/js/inline-edit-tax.js
index 1efacba7a1..bbdfb42442 100644
--- a/src/wp-admin/js/inline-edit-tax.js
+++ b/src/wp-admin/js/inline-edit-tax.js
@@ -56,11 +56,7 @@ inlineEditTax = {
 		editRow = $('#inline-edit').clone(true), rowData = $('#inline_'+id);
 		$('td', editRow).attr('colspan', $('.widefat:first thead th:visible').length);
 
-		if ( $( t.what + id ).hasClass( 'alternate' ) ) {
-			$(editRow).addClass('alternate');
-		}
-
-		$(t.what+id).hide().after(editRow);
+		$(t.what+id).hide().before(editRow).before('<tr class="hidden"></tr>');
 
 		$(':input[name="name"]', editRow).val( $('.name', rowData).text() );
 		$(':input[name="slug"]', editRow).val( $('.slug', rowData).text() );
@@ -98,7 +94,7 @@ inlineEditTax = {
 
 				if (r) {
 					if ( -1 !== r.indexOf( '<tr' ) ) {
-						$(inlineEditTax.what+id).remove();
+						$(inlineEditTax.what+id).siblings('tr.hidden').addBack().remove();
 						new_id = $(r).attr('id');
 
 						$('#edit-'+id).before(r).remove();
@@ -110,10 +106,6 @@ inlineEditTax = {
 				} else {
 					$('#edit-'+id+' .inline-edit-save .error').html(inlineEditL10n.error).show();
 				}
-
-				if ( $( row ).prev( 'tr' ).hasClass( 'alternate' ) ) {
-					$(row).removeClass('alternate');
-				}
 			}
 		);
 		return false;
@@ -124,7 +116,7 @@ inlineEditTax = {
 
 		if ( id ) {
 			$('table.widefat .spinner').hide();
-			$('#'+id).remove();
+			$('#'+id).siblings('tr.hidden').addBack().remove();
 			id = id.substr( id.lastIndexOf('-') + 1 );
 			$(this.what+id).show();
 		}
diff --git a/src/wp-admin/my-sites.php b/src/wp-admin/my-sites.php
index feed16aee6..7acd555fb6 100644
--- a/src/wp-admin/my-sites.php
+++ b/src/wp-admin/my-sites.php
@@ -75,7 +75,7 @@ else :
 	do_action( 'myblogs_allblogs_options' );
 	?>
 	<br clear="all" />
-	<table class="widefat fixed">
+	<table class="widefat fixed striped">
 	<?php
 	/**
 	 * Enable the Global Settings section on the My Sites screen.
@@ -109,10 +109,8 @@ else :
 		$split = $split + $cols;
 	}
 
-	$c = '';
 	foreach ( $rows as $row ) {
-		$c = $c == 'alternate' ? '' : 'alternate';
-		echo "<tr class='$c'>";
+		echo "<tr>";
 		$i = 0;
 		foreach ( $row as $user_blog ) {
 			$s = $i == 3 ? '' : 'border-right: 1px solid #ccc;';