From 5494b985ac82460140cf9142eeb98093a136d2e8 Mon Sep 17 00:00:00 2001
From: jdlrobson <jdlrobson@gmail.com>
Date: Tue, 18 Sep 2018 14:28:58 -0700
Subject: [PATCH] Diff and history link separated via CSS

Piped tag list wrapped with parentheses taken care of via CSS.
Lists of links inside history are now a list of links rather than
2 anchors separated by text.

Remains translateable, and accessible but is now fully skinnable by
skins such as Timeless and MinervaNeue.

For now the approach only touches the contributions pager, but
can be used on other pages as we work more on them.

Additional changes:
* A CSS file is renamed to a LESS file

Bug: T205581
Change-Id: Ic4a9c75611fd7ce92511c00c32b73c0745081b50
---
 includes/specials/pagers/ContribsPager.php    |  8 +++---
 languages/i18n/en.json                        |  2 ++
 languages/i18n/qqq.json                       |  2 ++
 resources/Resources.php                       |  8 +++++-
 ...css => mediawiki.special.changeslist.less} | 25 ++++++++++++++++++-
 5 files changed, 40 insertions(+), 5 deletions(-)
 rename resources/src/{mediawiki.special.changeslist.css => mediawiki.special.changeslist.less} (78%)

diff --git a/includes/specials/pagers/ContribsPager.php b/includes/specials/pagers/ContribsPager.php
index 5b50f0a681..0a67e77896 100644
--- a/includes/specials/pagers/ContribsPager.php
+++ b/includes/specials/pagers/ContribsPager.php
@@ -564,9 +564,11 @@ class ContribsPager extends RangeChronologicalPager {
 				$del .= ' ';
 			}
 
-			$diffHistLinks = $this->msg( 'parentheses' )
-				->rawParams( $difftext . $this->messages['pipe-separator'] . $histlink )
-				->escaped();
+			$diffHistLinks = Html::rawElement( 'ul',
+				[ 'class' => 'mw-changeslist-link-list' ],
+				Html::rawElement( 'li', [], $difftext ) .
+				Html::rawElement( 'li', [], $histlink )
+			);
 
 			# Tags, if any.
 			list( $tagSummary, $newClasses ) = ChangeTags::formatSummaryRow(
diff --git a/languages/i18n/en.json b/languages/i18n/en.json
index ea6305423b..fc5d8fdb46 100644
--- a/languages/i18n/en.json
+++ b/languages/i18n/en.json
@@ -3688,6 +3688,8 @@
 	"ellipsis": "...",
 	"percent": "$1%",
 	"parentheses": "($1)",
+	"parentheses-start": "(",
+	"parentheses-end": ")",
 	"brackets": "[$1]",
 	"quotation-marks": "\"$1\"",
 	"imgmultipageprev": "← previous page",
diff --git a/languages/i18n/qqq.json b/languages/i18n/qqq.json
index 2ca765fece..c366354b7a 100644
--- a/languages/i18n/qqq.json
+++ b/languages/i18n/qqq.json
@@ -3890,6 +3890,8 @@
 	"ellipsis": "{{optional}}",
 	"percent": "{{optional}}",
 	"parentheses": "{{optional}}",
+	"parentheses-start": "{{optional}}",
+	"parentheses-end": "{{optional}}",
 	"brackets": "{{Optional}}\n{{Format|plain}}",
 	"quotation-marks": "Quotation marks, for quoting, sometimes titles etc., depending on the language.\n\nSee: [[w:Non-English usage of quotation marks|Non-English usage of quotation marks on Wikipedia]].\n\nParameters:\n* $1 - text to be wrapped in quotation marks",
 	"imgmultipageprev": "{{Identical|Previous page}}",
diff --git a/resources/Resources.php b/resources/Resources.php
index 9603830b84..28807f7d96 100644
--- a/resources/Resources.php
+++ b/resources/Resources.php
@@ -2087,7 +2087,13 @@ return [
 		'targets' => [ 'desktop', 'mobile' ],
 	],
 	'mediawiki.special.changeslist' => [
-		'styles' => 'resources/src/mediawiki.special.changeslist.css',
+		'class' => ResourceLoaderLessVarFileModule::class,
+		'lessMessages' => [
+			'parentheses-start',
+			'parentheses-end',
+			'pipe-separator'
+		],
+		'styles' => 'resources/src/mediawiki.special.changeslist.less',
 		'targets' => [ 'desktop', 'mobile' ],
 	],
 	'mediawiki.special.changeslist.enhanced' => [
diff --git a/resources/src/mediawiki.special.changeslist.css b/resources/src/mediawiki.special.changeslist.less
similarity index 78%
rename from resources/src/mediawiki.special.changeslist.css
rename to resources/src/mediawiki.special.changeslist.less
index a884b833e8..34b0836c85 100644
--- a/resources/src/mediawiki.special.changeslist.css
+++ b/resources/src/mediawiki.special.changeslist.less
@@ -1,4 +1,4 @@
-/*!
+/*
  * Styling for Special:Watchlist and Special:RecentChanges
  */
 
@@ -66,3 +66,26 @@
 .mw-changeslist-separator:empty:before {
 	content: '. .';
 }
+
+.mw-changeslist-link-list {
+	display: inline-block;
+	/* In @media print, list elements have margins and/or paddings defined.
+	We don't want to see margins/paddings on these elements under any circumstances. */
+	margin: 0;
+	padding: 0;
+
+	&:before {
+		content: '@{msg-parentheses-start}';
+	}
+	&:after {
+		content: '@{msg-parentheses-end}';
+	}
+
+	> li {
+		display: inline;
+
+		&:not( :first-child ):before {
+			content: '@{msg-pipe-separator}';
+		}
+	}
+}
-- 
2.20.1