Add arrows for extension:proofreadpage pages and sort tabs appropriately

Currently js-only due to the default (only) vector styles requiring js. Fixed in
Ifd8be387cef671b2aaa2a482c145bccf2e6d1543, with a followup to clean up a bit after
that assuming that doesn't mess up too much to be merged, but this works regardless.

Bug: T231250
Change-Id: I4cadcbc3e51672fb075c884b2d2cc1d799b1b1b0

includes/TimelessTemplate.php

@@ -800,6 +800,35 @@ class TimelessTemplate extends BaseTemplate {
 			$sortedPileOfTools[$currentSet][$navKey] = $navBlock;
 		}
 
+		// Extra sorting for Extension:ProofreadPage namespace items
+		$tabs = [
+			'proofreadPagePrevLink',
+			// This is the order we want them in...
+			'proofreadPageScanLink',
+			'proofreadPageIndexLink',
+			'proofreadPageNextLink',
+		];
+		foreach ( $tabs as $tab ) {
+			if ( isset( $sortedPileOfTools['namespaces'][$tab] ) ) {
+				$toMove = $sortedPileOfTools['namespaces'][$tab];
+				unset( $sortedPileOfTools['namespaces'][$tab] );
+
+				// add a hover tooltip, mostly for the icons
+				$toMove['title'] = $toMove['text'];
+
+				if ( $tab === 'proofreadPagePrevLink' ) {
+					// prev at start
+					$sortedPileOfTools['namespaces'] = array_merge(
+						[ $tab => $toMove ],
+						$sortedPileOfTools['namespaces']
+					);
+				} else {
+					// move others to end
+					$sortedPileOfTools['namespaces'][$tab] = $toMove;
+				}
+			}
+		}
+
 		return $sortedPileOfTools;
 	}
 

resources/extensions/Proofreadpage.page.navigation.less

@@ -0,0 +1,18 @@
+@import '../variables.less';
+
+@media screen {
+	#ca-proofreadPageNextLink a {
+		.ca-icon ( '../images/arrow-large-grey-ltr' );
+		.ca-icon-only();
+	}
+
+	#ca-proofreadPagePrevLink a {
+		.ca-icon ( '../images/arrow-large-grey-rtl' );
+		.ca-icon-only();
+	}
+
+	#ca-proofreadPageIndexLink a {
+		.ca-icon ( '../images/arrow-large-up-grey' );
+		.ca-icon-only();
+	}
+}

resources/images/arrow-large-down-grey.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="20" width="20"><path d="M10.5 16L3 8h6V4h3v4h6zm0-3.5L13 10H8z" opacity=".33"/></svg>

resources/images/arrow-large-grey-ltr.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="20" width="20"><path d="M16 9.5L8 17v-6H4V8h4V2zm-3.5 0L10 7v5z" opacity=".33"/></svg>

resources/images/arrow-large-grey-rtl.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20"><path d="M4 9.5l8 7.5v-6h4V8h-4V2zm3.5 0L10 7v5z" opacity=".33"/></svg>

resources/images/arrow-large-up-grey.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="20" width="20"><path d="M10.5 4L3 12h6v4h3v-4h6zm0 3.5L13 10H8z" opacity=".33"/></svg>

skin.json

@@ -88,7 +88,8 @@
 			"+ext.CodeMirror.visualEditor.init": "resources/extensions/VisualEditor.CodeMirror.less",
 			"+ext.dismissableSiteNotice.styles": "resources/extensions/DismissableSiteNotice.less",
 			"+ext.MWOAuth.AuthorizeForm": "resources/extensions/MWOAuth.AuthorizeForm.less",
-			"+ext.wikiLove.icon": "resources/extensions/WikiLove.icon.less"
+			"+ext.wikiLove.icon": "resources/extensions/WikiLove.icon.less",
+			"+ext.proofreadpage.page.navigation": "resources/extensions/Proofreadpage.page.navigation.less"
 		}
 	},
 	"AutoloadClasses": {