Move bullets from HTML to CSS

This allows better to style the buttons.

The complicated CSS selector for the direction supports a categorytree
in the user interface language like in the sidebar or on
Special:CategoryTree and in the content language like on category pages
and with <categorytree> in the content.

The CSS selector :dir( rtl ) would be a short version for this but it is
currently only supported by Firefox:
https://developer.mozilla.org/en-US/docs/Web/CSS/:dir

Bug: T288910
Change-Id: Ibfb0cb28f0086fb1b7d0997be2246bc120eea85e

extension.json

@@ -54,8 +54,6 @@
 			"messages": [
 				"categorytree-collapse",
 				"categorytree-expand",
-				"categorytree-collapse-bullet",
-				"categorytree-expand-bullet",
 				"categorytree-load",
 				"categorytree-loading",
 				"categorytree-nothing-found",

i18n/en.json

@@ -18,10 +18,6 @@
 	"categorytree-mode-all": "all pages",
 	"categorytree-collapse": "collapse",
 	"categorytree-expand": "expand",
-	"categorytree-collapse-bullet": "▼",
-	"categorytree-expand-bullet": "►",
-	"categorytree-empty-bullet": "►",
-	"categorytree-page-bullet": " ",
 	"categorytree-member-counts": "Contains {{PLURAL:$1|1 subcategory|$1 subcategories}}, {{PLURAL:$2|1 page|$2 pages}}, and {{PLURAL:$3|1 file|$3 files}}",
 	"categorytree-member-num": "($5)",
 	"categorytree-num-categories": "$1 C",

i18n/qqq.json

@@ -37,10 +37,6 @@
 	"categorytree-mode-all": "Item for the mode choice on [[Special:CategoryTree]], indicating that all pages are listed.\n\n{{Identical|All pages}}",
 	"categorytree-collapse": "Tooltip for the \"collapse\" button.\n{{Identical|Collapse}}",
 	"categorytree-expand": "Tooltip for the \"expand\" button.\n{{Identical|Expand}}",
-	"categorytree-collapse-bullet": "{{notranslate}}",
-	"categorytree-expand-bullet": "For right-to-left scripts, set this message to the single character ◄ . Otherwise, do not translate this message. Does not support wiki-syntax, html or entity references. \n{{optional}}",
-	"categorytree-empty-bullet": "{{optional}}\nPrefix used before category names in category pages when the number of subcategories (or something) is 0, to indicate that there is no sub-tree of items to expand. Does not support wiki-syntax, html or entity references.",
-	"categorytree-page-bullet": "{{notranslate}}",
 	"categorytree-member-counts": "Tooltip showing a detailed summary of subcategory member counts. Parameters:\n* $1 - number of subcategories\n* $2 - number of pages (without subcategories and files)\n* $3 - number of files\n* $4 - (Unused) total number of members\n* $5 - (Unused) members to be shown in the tree, depending on mode\nUse with <nowiki>{{PLURAL}}</nowiki>",
 	"categorytree-member-num": "{{notranslate}}\nHowever, if needed, you can localise the parentheses.\n\n(From https://www.mediawiki.org/wiki/Extension:CategoryTree#categorytree-member-num):\nBy default, when listing subcategories on a category page, each subcategory is followed by an integer indicating how many subcategories lie beneath it:\n<pre>\nMy category name (5)\n</pre>\nYou can change this behavior by overriding this system message. Parameters:\n* $1 - (Unused) number of subcategories\n* $2 - (Unused) number of articles (not including category pages or file pages)\n* $3 - (Unused) number of uploaded files\n* $4 - (Unused) total number of member pages, including category pages and file pages\n* $5 - (Varies depending on CategoryTree mode....Can someone describe it?)\n\nTip: Use the ParserFunctions extension (https://www.mediawiki.org/wiki/Help:Extension:ParserFunctions) to provide if/then/else logic to display different parts conditionally. For example:\n<pre>\n{{#ifeq:$1|0||$1 categories}}\n</pre>",
 	"categorytree-num-categories": "'''\"C\" is short for \"Category\".''' It must be as short as possible.\n\nNumber of sub-categories in a category. Appears in brackets after a name of an empty category.\n\nParameters:\n* $1 - number of sub-categories. Can be used for PLURAL.\n{{Related|Categorytree-num}}",

includes/CategoryTree.php

@@ -656,7 +656,7 @@ class CategoryTree {
 				}
 			}
 			if ( $count === 0 ) {
-				$bullet = wfMessage( 'categorytree-empty-bullet' )->escaped() . ' ';
+				$bullet = '';
 				$attr['class'] = 'CategoryTreeEmptyBullet';
 			} else {
 				$linkattr = [];
@@ -665,21 +665,17 @@ class CategoryTree {
 				$linkattr['data-ct-title'] = $key;
 
 				if ( $children == 0 ) {
-					// Use ->plain() to ensure identical result as JS,
-					// which does:
-					// $link.text( mw.msg( 'categorytree-expand-bullet' ) );
-					$txt = wfMessage( 'categorytree-expand-bullet' )->plain();
 					$linkattr[ 'data-ct-state' ] = 'collapsed';
 				} else {
-					$txt = wfMessage( 'categorytree-collapse-bullet' )->plain();
 					$linkattr[ 'data-ct-loaded' ] = true;
 					$linkattr[ 'data-ct-state' ] = 'expanded';
 				}
 
-				$bullet = Html::element( 'span', $linkattr, $txt ) . ' ';
+				$bullet = Html::element( 'span', $linkattr ) . ' ';
 			}
 		} else {
-			$bullet = wfMessage( 'categorytree-page-bullet' )->escaped();
+			$bullet = '';
+			$attr['class'] = 'CategoryTreePageBullet';
 		}
 		$s .= Xml::tags( 'span', $attr, $bullet ) . ' ';
 

modules/ext.categoryTree.styles.css

@@ -108,6 +108,38 @@
 	color: #0645ad;
 }
 
+/* The :empty selector in the following selectors prevents the cached HTML
+ * that includes a bullet in the HTML from showing two bullets. After the cache
+ * has expired the :empty selectors can be removed.
+ */
+/* @noflip */
+body.ltr .CategoryTreeEmptyBullet:empty:before,
+body.ltr .CategoryTreeToggle[ data-ct-state='collapsed' ]:empty:before,
+body.mediawiki .mw-content-ltr .CategoryTreeEmptyBullet:empty:before,
+body.mediawiki .mw-content-ltr .CategoryTreeToggle[ data-ct-state='collapsed' ]:empty:before,
+body.mediawiki .mw-content-rtl .mw-content-ltr .CategoryTreeEmptyBullet:empty:before,
+body.mediawiki .mw-content-rtl .mw-content-ltr .CategoryTreeToggle[ data-ct-state='collapsed' ]:empty:before {
+	content: '►';
+}
+
+/* @noflip */
+body.rtl .CategoryTreeEmptyBullet:empty:before,
+body.rtl .CategoryTreeToggle[ data-ct-state='collapsed' ]:empty:before,
+body.mediawiki .mw-content-rtl .CategoryTreeEmptyBullet:empty:before,
+body.mediawiki .mw-content-rtl .CategoryTreeToggle[ data-ct-state='collapsed' ]:empty:before,
+body.mediawiki .mw-content-ltr .mw-content-rtl .CategoryTreeEmptyBullet:empty:before,
+body.mediawiki .mw-content-ltr .mw-content-rtl .CategoryTreeToggle[ data-ct-state='collapsed' ]:empty:before {
+	content: '◄';
+}
+
+.CategoryTreeToggle[ data-ct-state='expanded' ]:empty:before {
+	content: '▼';
+}
+
+.CategoryTreePageBullet:before {
+	content: '\A0';
+}
+
 .CategoryTreeLabelPage {
 	font-style: italic;
 }

modules/ext.categoryTree/ext.categoryTree.js

@@ -39,9 +39,8 @@
 		$children.show();
 
 		$link
-			.text( mw.msg( 'categorytree-collapse-bullet' ) )
 			.attr( 'title', mw.msg( 'categorytree-collapse' ) )
-			.data( 'ct-state', 'expanded' );
+			.attr( 'data-ct-state', 'expanded' );
 
 		if ( !$link.data( 'ct-loaded' ) ) {
 			loadChildren( $link, $children );
@@ -59,9 +58,8 @@
 			.siblings( '.CategoryTreeChildren' ).hide();
 
 		$link
-			.text( mw.msg( 'categorytree-expand-bullet' ) )
 			.attr( 'title', mw.msg( 'categorytree-expand' ) )
-			.data( 'ct-state', 'collapsed' );
+			.attr( 'data-ct-state', 'collapsed' );
 	}
 
 	/**
@@ -71,7 +69,7 @@
 	 */
 	function handleNode() {
 		var $link = $( this );
-		if ( $link.data( 'ct-state' ) === 'collapsed' ) {
+		if ( $link.attr( 'data-ct-state' ) === 'collapsed' ) {
 			expandNode( $link );
 		} else {
 			collapseNode( $link );
@@ -88,7 +86,7 @@
 			.on( 'click', handleNode )
 			.attr( 'title', function () {
 				return mw.msg(
-					$( this ).data( 'ct-state' ) === 'collapsed' ?
+					$( this ).attr( 'data-ct-state' ) === 'collapsed' ?
 						'categorytree-expand' :
 						'categorytree-collapse'
 				);