Merge "Generate Minerva search HTML with SkinMustache data"

includes/Skins/MinervaTemplate.php

@@ -194,20 +194,7 @@ class MinervaTemplate extends BaseTemplate {
 		// prepare template data
 		return [
 			'banners' => $data['banners'],
-			'wgScript' => $data['wgScript'],
 			'isAnon' => $data['username'] === null,
-			'search' => $data['search'],
-			// A button when clicked will submit the form
-			// This is used so that on tablet devices with JS disabled the search button
-			// passes the value of input to the search
-			// We avoid using input[type=submit] as these cannot be easily styled as mediawiki ui icons
-			// which is problematic in Opera Mini (see T140490)
-			'searchButton' => Html::rawElement( 'button', [
-				'id' => 'searchIcon',
-				'class' => MinervaUI::iconClass(
-					'search-base20', 'element', 'skin-minerva-search-trigger', 'wikimedia'
-				)
-			], wfMessage( 'searchbutton' )->escaped() ),
 			'userNotificationsHTML' => $data['userNotificationsHTML'] ?? '',
 			'data-main-menu' => $this->getMainMenuData( $data ),
 			'hasheadingholder' => $hasHeadingHolder,
@@ -230,7 +217,6 @@ class MinervaTemplate extends BaseTemplate {
 					  $skinOptions->get( SkinOptions::TALK_AT_TOP ) ? [
 				'items' => array_values( $data['content_navigation']['namespaces'] ),
 			] : false,
-			'searchPageTitle' => $this->getSkin()->getSearchPageTitle(),
 		];
 	}
 

includes/Skins/skin.mustache

@@ -2,7 +2,8 @@
 	<div id="mw-mf-page-center">
 		<a class="mw-mf-page-center__mask" href="#"></a>
 		<header class="header-container header-chrome">
-			<form class="minerva-header" action="{{wgScript}}" method="get">
+			{{#data-search-box}}
+			<form class="minerva-header" action="{{form-action}}" method="get">
 				<nav class="navigation-drawer toggle-list view-border-box">
 					<input type="checkbox" id="main-menu-input" class="toggle-list__checkbox" role="button" aria-labelledby="mw-mf-main-menu-button">
 					<label for="main-menu-input" id="mw-mf-main-menu-button"
@@ -18,13 +19,21 @@
 					</a>
 				</div>
 				<div class="search-box">
-					<input type="hidden" name="title" value="{{searchPageTitle}}"/>
+					<input type="hidden" name="title" value="{{page-title}}"/>
 					<input class="search mw-ui-background-icon-search skin-minerva-search-trigger" type="search" name="search" id="searchInput"
-						autocomplete="off" placeholder="{{msg-mobile-frontend-placeholder}}" aria-label="{{msg-mobile-frontend-placeholder}}"
-						value="{{search}}">
+						{{{html-input-attributes}}}">
 				</div>
 				<nav class="minerva-user-navigation" aria-label="{{msg-minerva-user-navigation}}">
-					<div>{{{searchButton}}}</div>
+					<div>
+						{{!
+							A button when clicked will submit the form
+							This is used so that on tablet devices with JS disabled the search button
+							passes the value of input to the search
+							We avoid using input[type=submit] as these cannot be easily styled as mediawiki ui icons
+							which is problematic in Opera Mini (see T140490)
+						}}
+						<button id="searchIcon" class="mw-ui-icon mw-ui-icon-element mw-ui-icon-wikimedia-search-base20 skin-minerva-search-trigger mw-ui-button mw-ui-quiet">{{msg-searchbutton}}</button>
+					</div>
 					{{^isAnon}}
 							<div class="minerva-user-notifications" id="pt-notifications-alert">
 								{{{userNotificationsHTML}}}
@@ -33,6 +42,7 @@
 					{{#userMenuHTML}}{{{userMenuHTML}}}{{/userMenuHTML}}
 				</nav>
 			</form>
+			{{/data-search-box}}
 		</header>
 		<main id="content" class="mw-body">
 			<div class="banner-container">

skin.json

@@ -115,9 +115,9 @@
 				"templateDirectory": "includes/Skins",
 				"messages": [
 					"mainpage",
+					"searchbutton",
 					"minerva-user-navigation",
 					"mobile-frontend-main-menu-button-tooltip",
-					"mobile-frontend-placeholder",
 					"mobile-frontend-footer-sitename"
 				],
 				"responsive": true,