From: jdlrobson <jdlrobson@gmail.com>
Date: Wed, 4 Apr 2018 23:12:38 +0000 (-0700)
Subject: jquery.makeCollapsible: Use pseudo elements for square brackets around toggle
X-Git-Tag: 1.31.0-rc.0~105
X-Git-Url: http://git.cyclocoop.org/%24dirpuce/%27%241//%27%40script%40/%27?a=commitdiff_plain;h=46a7aa7e3e8ea98b69ae4bd0aff51465da57bcd3;p=lhc%2Fweb%2Fwiklou.git

jquery.makeCollapsible: Use pseudo elements for square brackets around toggle

We want to use this in Minerva and mixing presentation with functionality
makes styling it differently difficult.

This change will also make it easier to deal with the reflow on
initialisation (see follow up If9c8f0974e3a4b08e4a66d37f7f5adf67d7305).

Change-Id: I4d96226c63563f16ad181e06f6bd12e6cf6bec67
---

diff --git a/resources/src/jquery/jquery.makeCollapsible.css b/resources/src/jquery/jquery.makeCollapsible.css
index 2e5efbac8b..693cd7f9b3 100644
--- a/resources/src/jquery/jquery.makeCollapsible.css
+++ b/resources/src/jquery/jquery.makeCollapsible.css
@@ -6,6 +6,12 @@
 	-ms-user-select: none;
 	user-select: none;
 }
+.mw-collapsible-toggle:before {
+	content: '[';
+}
+.mw-collapsible-toggle:after {
+	content: ']';
+}
 /* Align the toggle based on the direction of the content language */
 /* @noflip */
 .mw-content-ltr .mw-collapsible-toggle,
diff --git a/resources/src/jquery/jquery.makeCollapsible.js b/resources/src/jquery/jquery.makeCollapsible.js
index aa76d6dfbb..7826baba0f 100644
--- a/resources/src/jquery/jquery.makeCollapsible.js
+++ b/resources/src/jquery/jquery.makeCollapsible.js
@@ -8,7 +8,6 @@
  * @class jQuery.plugin.makeCollapsible
  */
 ( function ( $, mw ) {
-
 	/**
 	 * Handler for a click on a collapsible toggler.
 	 *
@@ -270,8 +269,6 @@
 						role: 'button',
 						tabindex: 0
 					} )
-					.prepend( '<span>[</span>' )
-					.append( '<span>]</span>' )
 					.on( 'click.mw-collapsible keypress.mw-collapsible', actionHandler );
 			};