TablePager: Redo arrow icons from scratch as CSS backgrounds

Redrawn the images with SVG versions.

Intentionally did not preserve the value of the 'alt' attribute of the old
images, it doesn't seem very useful to me. Instead, added 'title'
attributes on the sort links that describe their action. This should be
more useful than the old version for both visual and aural mediums.

Bug: 69277
Change-Id: Ibaec75e81d3eb8338d911ac84d91570047f475f5

includes/pager/IndexPager.php

@@ -447,8 +447,8 @@ abstract class IndexPager extends ContextSource implements Pager {
 	 *
 	 * @param string $text Text displayed on the link
 	 * @param array $query Associative array of parameter to be in the query string
-	 * @param string $type Value of the "rel" attribute
-	 *
+	 * @param string $type Link type used to create additional attributes, like "rel", "class" or
+	 *  "title". Valid values (non-exhaustive list): 'first', 'last', 'prev', 'next', 'asc', 'desc'.
 	 * @return string HTML fragment
 	 */
 	function makeLink( $text, array $query = null, $type = null ) {
@@ -458,14 +458,18 @@ abstract class IndexPager extends ContextSource implements Pager {
 
 		$attrs = array();
 		if ( in_array( $type, array( 'prev', 'next' ) ) ) {
-			# HTML5 rel attributes
 			$attrs['rel'] = $type;
 		}
 
+		if ( in_array( $type, array( 'asc', 'desc' ) ) ) {
+			$attrs['title'] = wfMessage( $type == 'asc' ? 'sort-ascending' : 'sort-descending' )->text();
+		}
+
 		if ( $type ) {
 			$attrs['class'] = "mw-{$type}link";
 		}
 
+
 		return Linker::linkKnown(
 			$this->getTitle(),
 			$text,

includes/pager/TablePager.php

@@ -111,43 +111,38 @@ abstract class TablePager extends IndexPager {
 	 * @return string
 	 */
 	function getStartBody() {
-		global $wgStylePath;
 		$sortClass = $this->getSortHeaderClass();
 
 		$s = '';
 		$fields = $this->getFieldNames();
 
-		# Make table header
+		// Make table header
 		foreach ( $fields as $field => $name ) {
 			if ( strval( $name ) == '' ) {
 				$s .= Html::rawElement( 'th', array(), ' ' ) . "\n";
 			} elseif ( $this->isFieldSortable( $field ) ) {
 				$query = array( 'sort' => $field, 'limit' => $this->mLimit );
-				if ( $field == $this->mSort ) {
-					# This is the sorted column
-					# Prepare a link that goes in the other sort order
+				$linkType = null;
+				$class = null;
+
+				if ( $this->mSort == $field ) {
+					// The table is sorted by this field already, make a link to sort in the other direction
+					// We don't actually know in which direction other fields will be sorted by default…
 					if ( $this->mDefaultDirection ) {
-						# Descending
-						$image = 'Arr_d.png';
+						$linkType = 'asc';
+						$class = "$sortClass TablePager_sort-descending";
 						$query['asc'] = '1';
 						$query['desc'] = '';
-						$alt = $this->msg( 'descending_abbrev' )->escaped();
 					} else {
-						# Ascending
-						$image = 'Arr_u.png';
+						$linkType = 'desc';
+						$class = "$sortClass TablePager_sort-ascending";
 						$query['asc'] = '';
 						$query['desc'] = '1';
-						$alt = $this->msg( 'ascending_abbrev' )->escaped();
 					}
-					$image = "$wgStylePath/common/images/$image";
-					$link = $this->makeLink(
-						Html::element( 'img', array( 'width' => 12, 'height' => 12,
-							'alt' => $alt, 'src' => $image ) ) . htmlspecialchars( $name ), $query );
-					$s .= Html::rawElement( 'th', array( 'class' => $sortClass ), $link ) . "\n";
-				} else {
-					$s .= Html::rawElement( 'th', array(),
-						$this->makeLink( htmlspecialchars( $name ), $query ) ) . "\n";
 				}
+
+				$link = $this->makeLink( htmlspecialchars( $name ), $query, $linkType );
+				$s .= Html::rawElement( 'th', array( 'class' => $class ), $link ) . "\n";
 			} else {
 				$s .= Html::element( 'th', array(), $name ) . "\n";
 			}

resources/Resources.php

@@ -921,7 +921,7 @@ return array(
 		'targets' => array( 'desktop', 'mobile' ),
 	),
 	'mediawiki.pager.tablePager' => array(
-		'styles' => 'resources/src/mediawiki/mediawiki.pager.tablePager.css',
+		'styles' => 'resources/src/mediawiki/mediawiki.pager.tablePager.less',
 		'position' => 'top',
 	),
 	'mediawiki.searchSuggest' => array(

resources/src/mediawiki/images/arrow-sort-ascending.svg

@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><svg xmlns="http://www.w3.org/2000/svg" width="12" height="12"><path d="M1 10h10l-5-8.658z" fill="#00a"/></svg>

resources/src/mediawiki/images/arrow-sort-descending.svg

@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><svg xmlns="http://www.w3.org/2000/svg" width="12" height="12"><path d="M1 2h10l-5 8.658z" fill="#00a"/></svg>

resources/src/mediawiki/mediawiki.pager.tablePager.less

@@ -3,10 +3,24 @@
  * in MediaWiki (used e.g. on Special:ListFiles).
  */
 
+@import "mediawiki.mixins";
+
 .TablePager {
 	min-width: 80%;
 }
 
+.TablePager .TablePager_sort-ascending a {
+	padding-left: 15px;
+	background: none left center no-repeat;
+	.background-image-svg('images/arrow-sort-ascending.svg', 'images/arrow-sort-ascending.png');
+}
+
+.TablePager .TablePager_sort-descending a {
+	padding-left: 15px;
+	background: none left center no-repeat;
+	.background-image-svg('images/arrow-sort-descending.svg', 'images/arrow-sort-descending.png');
+}
+
 .TablePager_nav {
 	margin: 0 auto;
 }