From 9719602b193f081748eb3eb1ac97a708bb8826c9 Mon Sep 17 00:00:00 2001
From: Fomafix <fomafix@googlemail.com>
Date: Sun, 23 Dec 2018 15:13:00 +0100
Subject: [PATCH] Special:Search: Generate toggle buttons in HTML instead of
 JavaScript

This change ensures that the toggle buttons are already present while
loading.

Depends-On: I41225ccdf8a95a7c501fb6eea99abbd08353f4ea
Change-Id: I3292cf48214b842542ba97730ad91a1e95d127fe
---
 includes/widget/search/SearchFormWidget.php   | 10 +++++--
 resources/Resources.php                       |  6 -----
 .../src/mediawiki.special.search.styles.css   | 16 ++++++++++++
 .../src/mediawiki.special.search/search.css   | 11 --------
 .../src/mediawiki.special.search/search.js    | 26 +++++--------------
 5 files changed, 31 insertions(+), 38 deletions(-)
 delete mode 100644 resources/src/mediawiki.special.search/search.css

diff --git a/includes/widget/search/SearchFormWidget.php b/includes/widget/search/SearchFormWidget.php
index 0c809514fc..5106c17762 100644
--- a/includes/widget/search/SearchFormWidget.php
+++ b/includes/widget/search/SearchFormWidget.php
@@ -305,8 +305,14 @@ class SearchFormWidget {
 		return "<fieldset id='mw-searchoptions'>" .
 			"<legend>" . $this->specialSearch->msg( 'powersearch-legend' )->escaped() . '</legend>' .
 			"<h4>" . $this->specialSearch->msg( 'powersearch-ns' )->parse() . '</h4>' .
-			// populated by js if available
-			"<div id='mw-search-togglebox'></div>" .
+			// Handled by JavaScript if available
+			'<div id="mw-search-togglebox">' .
+			'<label>' . $this->specialSearch->msg( 'powersearch-togglelabel' )->escaped() . '</label>' .
+			'<input type="button" id="mw-search-toggleall" value="' .
+			$this->specialSearch->msg( 'powersearch-toggleall' )->escaped() . '"/>' .
+			'<input type="button" id="mw-search-togglenone" value="' .
+			$this->specialSearch->msg( 'powersearch-togglenone' )->escaped() . '"/>' .
+			'</div>' .
 			$divider .
 			implode(
 				$divider,
diff --git a/resources/Resources.php b/resources/Resources.php
index ef8d974f43..a9e5e14948 100644
--- a/resources/Resources.php
+++ b/resources/Resources.php
@@ -2187,13 +2187,7 @@ return [
 	],
 	'mediawiki.special.search' => [
 		'scripts' => 'resources/src/mediawiki.special.search/search.js',
-		'styles' => 'resources/src/mediawiki.special.search/search.css',
 		'dependencies' => 'mediawiki.widgets.SearchInputWidget',
-		'messages' => [
-			'powersearch-togglelabel',
-			'powersearch-toggleall',
-			'powersearch-togglenone',
-		],
 	],
 	'mediawiki.special.search.commonsInterwikiWidget' => [
 		'scripts' => 'resources/src/mediawiki.special.search.commonsInterwikiWidget.js',
diff --git a/resources/src/mediawiki.special.search.styles.css b/resources/src/mediawiki.special.search.styles.css
index 1179f90484..0f27420ee8 100644
--- a/resources/src/mediawiki.special.search.styles.css
+++ b/resources/src/mediawiki.special.search.styles.css
@@ -187,3 +187,19 @@
 	/* Note that this color won't affect the link, as desired. */
 	color: #d33;
 }
+
+#mw-search-togglebox {
+	float: right;
+}
+
+#mw-search-togglebox label {
+	margin-right: 0.25em;
+}
+
+#mw-search-togglebox input {
+	margin-left: 0.25em;
+}
+
+.client-nojs #mw-search-togglebox {
+	display: none;
+}
diff --git a/resources/src/mediawiki.special.search/search.css b/resources/src/mediawiki.special.search/search.css
deleted file mode 100644
index e55c785b7d..0000000000
--- a/resources/src/mediawiki.special.search/search.css
+++ /dev/null
@@ -1,11 +0,0 @@
-#mw-search-togglebox {
-	float: right;
-}
-
-#mw-search-togglebox label {
-	margin-right: 0.25em;
-}
-
-#mw-search-togglebox input {
-	margin-left: 0.25em;
-}
diff --git a/resources/src/mediawiki.special.search/search.js b/resources/src/mediawiki.special.search/search.js
index 03ba0d2b49..d5760b2fd2 100644
--- a/resources/src/mediawiki.special.search/search.js
+++ b/resources/src/mediawiki.special.search/search.js
@@ -10,26 +10,14 @@
 			$( 'input[autofocus]' ).eq( 0 ).focus();
 		}
 
-		// Create check all/none button
+		// Attach handler for check all/none buttons
 		$checkboxes = $( '#powersearch input[id^=mw-search-ns]' );
-		$( '#mw-search-togglebox' ).append(
-			$( '<label>' )
-				.text( mw.msg( 'powersearch-togglelabel' ) )
-		).append(
-			$( '<input>' ).attr( 'type', 'button' )
-				.attr( 'id', 'mw-search-toggleall' )
-				.prop( 'value', mw.msg( 'powersearch-toggleall' ) )
-				.click( function () {
-					$checkboxes.prop( 'checked', true );
-				} )
-		).append(
-			$( '<input>' ).attr( 'type', 'button' )
-				.attr( 'id', 'mw-search-togglenone' )
-				.prop( 'value', mw.msg( 'powersearch-togglenone' ) )
-				.click( function () {
-					$checkboxes.prop( 'checked', false );
-				} )
-		);
+		$( '#mw-search-toggleall' ).click( function () {
+			$checkboxes.prop( 'checked', true );
+		} );
+		$( '#mw-search-togglenone' ).click( function () {
+			$checkboxes.prop( 'checked', false );
+		} );
 
 		// Change the header search links to what user entered
 		$headerLinks = $( '.search-types a' );
-- 
2.20.1