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

diff --git a/includes/specials/pagers/ContribsPager.php b/includes/specials/pagers/ContribsPager.php
index 5b50f0a..0a67e77 100644 (file)
--- 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 ea63054..fc5d8fd 100644 (file)
--- 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 2ca765f..c366354 100644 (file)
--- 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 9603830..28807f7 100644 (file)
--- 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.css
deleted file mode 100644 (file)
index a884b83..0000000
--- a/resources/src/mediawiki.special.changeslist.css
+++ /dev/null
@@ -1,68 +0,0 @@
-/*!
- * Styling for Special:Watchlist and Special:RecentChanges
- */
-
-.mw-changeslist-line-watched .mw-title {
-       font-weight: bold;
-}
-
-/*
- * Titles, including username links, and also tag names
- * are prone to getting jumbled up
- * with other titles, usernames, etc. in mixed RTL-LTR environment.
- */
-.mw-changeslist .mw-tag-marker,
-.mw-changeslist .mw-title {
-       unicode-bidi: embed;
-}
-
-/* Colored watchlist and recent changes numbers */
-.mw-plusminus-pos {
-       color: #006400; /* dark green */
-}
-
-.mw-plusminus-neg {
-       color: #8b0000; /* dark red */
-}
-
-.mw-plusminus-null {
-       color: #a2a9b1; /* gray */
-}
-
-/*
- * Bidi-isolate these numbers.
- * See https://phabricator.wikimedia.org/T93484
- */
-.mw-plusminus-pos,
-.mw-plusminus-neg,
-.mw-plusminus-null {
-       unicode-bidi: -moz-isolate;
-       unicode-bidi: isolate;
-}
-
-/* Prevent FOUC if legend is initially collapsed */
-.mw-changeslist-legend.mw-collapsed .mw-collapsible-content {
-       display: none;
-}
-
-.mw-changeslist-legend.mw-collapsed {
-       margin-bottom: 0;
-}
-
-/* Prevent pushing down the content if legend is collapsed */
-.mw-changeslist-legend.mw-collapsed ~ ul:first-of-type > li:first-child,
-.mw-changeslist-legend.mw-collapsed + h4 + div > table.mw-changeslist-line:first-child {
-       clear: right;
-}
-
-/* Hide RCFilters highlight containers if RCFilters is not enabled.
-   This is overridden in mw.ui.rcfilters.ChangesListWrapperWidget.less if RCFilters is enabled. */
-.mw-rcfilters-ui-highlights {
-       display: none;
-}
-
-/* Content dividers */
-/* @todo FIXME: Hard coded ". .". Is there a message for this? Should there be? */
-.mw-changeslist-separator:empty:before {
-       content: '. .';
-}

diff --git a/resources/src/mediawiki.special.changeslist.less b/resources/src/mediawiki.special.changeslist.less
new file mode 100644 (file)
index 0000000..34b0836
--- /dev/null
+++ b/resources/src/mediawiki.special.changeslist.less
@@ -0,0 +1,91 @@
+/*
+ * Styling for Special:Watchlist and Special:RecentChanges
+ */
+
+.mw-changeslist-line-watched .mw-title {
+       font-weight: bold;
+}
+
+/*
+ * Titles, including username links, and also tag names
+ * are prone to getting jumbled up
+ * with other titles, usernames, etc. in mixed RTL-LTR environment.
+ */
+.mw-changeslist .mw-tag-marker,
+.mw-changeslist .mw-title {
+       unicode-bidi: embed;
+}
+
+/* Colored watchlist and recent changes numbers */
+.mw-plusminus-pos {
+       color: #006400; /* dark green */
+}
+
+.mw-plusminus-neg {
+       color: #8b0000; /* dark red */
+}
+
+.mw-plusminus-null {
+       color: #a2a9b1; /* gray */
+}
+
+/*
+ * Bidi-isolate these numbers.
+ * See https://phabricator.wikimedia.org/T93484
+ */
+.mw-plusminus-pos,
+.mw-plusminus-neg,
+.mw-plusminus-null {
+       unicode-bidi: -moz-isolate;
+       unicode-bidi: isolate;
+}
+
+/* Prevent FOUC if legend is initially collapsed */
+.mw-changeslist-legend.mw-collapsed .mw-collapsible-content {
+       display: none;
+}
+
+.mw-changeslist-legend.mw-collapsed {
+       margin-bottom: 0;
+}
+
+/* Prevent pushing down the content if legend is collapsed */
+.mw-changeslist-legend.mw-collapsed ~ ul:first-of-type > li:first-child,
+.mw-changeslist-legend.mw-collapsed + h4 + div > table.mw-changeslist-line:first-child {
+       clear: right;
+}
+
+/* Hide RCFilters highlight containers if RCFilters is not enabled.
+   This is overridden in mw.ui.rcfilters.ChangesListWrapperWidget.less if RCFilters is enabled. */
+.mw-rcfilters-ui-highlights {
+       display: none;
+}
+
+/* Content dividers */
+/* @todo FIXME: Hard coded ". .". Is there a message for this? Should there be? */
+.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}';
+               }
+       }
+}