Cleanup: Use consistent naming in SearchBox

We have conventions about template variable naming.

* Drop camel case
* Prefix message keys with `msg-` followed by message key name
* Prefix HTML with `html-`

Change-Id: I34f04f3d217dc8caa4dcc29e60058951a6555b1e

includes/VectorTemplate.php

@@ -523,22 +523,21 @@ class VectorTemplate extends BaseTemplate {
 	 * @return array
 	 */
 	private function buildSearchProps() : array {
-		global $wgScript;
+		$config = $this->getConfig();
 		$props = [
-			'searchHeaderAttrsHTML' => $this->get( 'userlangattributes', '' ),
-			'searchActionURL' => $wgScript,
-			'searchDivID' => $this->getConfig()->get( 'VectorUseSimpleSearch' ) ? 'simpleSearch' : '',
-			'searchInputHTML' => $this->makeSearchInput( [ 'id' => 'searchInput' ] ),
-			'titleHTML' => Html::hidden( 'title', SpecialPage::getTitleFor( 'Search' )->getPrefixedDBkey() ),
-			'fallbackSearchButtonHTML' => $this->makeSearchButton(
+			'form-action' => $config->get( 'Script' ),
+			'form-id' => $config->get( 'VectorUseSimpleSearch' ) ? 'simpleSearch' : '',
+			'html-button-search-fallback' => $this->makeSearchButton(
 				'fulltext',
 				[ 'id' => 'mw-searchButton', 'class' => 'searchButton mw-fallbackSearchButton' ]
 			),
-			'searchButtonHTML' => $this->makeSearchButton(
+			'html-button-search' => $this->makeSearchButton(
 				'go',
 				[ 'id' => 'searchButton', 'class' => 'searchButton' ]
 			),
-			'searchInputLabel' => $this->msg( 'search' )
+			'html-input' => $this->makeSearchInput( [ 'id' => 'searchInput' ] ),
+			'msg-search' => $this->msg( 'search' ),
+			'page-title' => SpecialPage::getTitleFor( 'Search' )->getPrefixedDBkey(),
 		];
 		return $props;
 	}

includes/templates/SearchBox.mustache

@@ -1,21 +1,14 @@
 {{!
-	string|null searchHeaderAttrsHTML
-	string|null searchInputLabel
-	string searchActionURL
-	string searchDivID
-	string|null searchInputHTML
-	string|null titleHTML
-	string|null fallbackSearchButtonHTML
-	string|null searchButtonHTML
+ See @typedef SearchData
 }}
 <div id="p-search" role="search">
-	<h3 {{{searchHeaderAttrsHTML}}}>
-		<label for="searchInput">{{searchInputLabel}}</label>
+	<h3 {{{html-userlangattributes}}}>
+		<label for="searchInput">{{msg-search}}</label>
 	</h3>
-	<form action="{{searchActionURL}}" id="searchform">
-		<div id="{{searchDivID}}">
-			{{{searchInputHTML}}}
-			{{{titleHTML}}}
+	<form action="{{form-action}}" id="searchform">
+		<div id="{{form-id}}">
+			{{{html-input}}}
+			<input type="hidden" name="title" value="{{page-title}}">
 			{{!	We construct two buttons (for 'go' and 'fulltext' search modes), but only one will be
 					visible and actionable at a time (they are overlaid on top of each other in CSS).
 					* Browsers will use the 'fulltext' one by default (as it's the first in tree-order),
@@ -24,8 +17,8 @@
 					* The mediawiki.searchSuggest module, after doing tests for the broken browsers, removes
 						the 'fulltext' button and handles 'fulltext' search itself; this will reveal the 'go'
 						button and cause it to be used.	!}}
-			{{{fallbackSearchButtonHTML}}}
-			{{{searchButtonHTML}}}
+			{{{html-button-search-fallback}}}
+			{{{html-button-search}}}
 		</div>
 	</form>
 </div>

stories/SearchBox.stories.data.js

@@ -3,13 +3,16 @@ import { htmluserlangattributes } from './utils';
 
 export { searchBoxTemplate };
 
+/**
+ * @type SearchData
+ */
 export const searchBoxData = {
-	searchActionURL: '/w/index.php',
-	searchHeaderAttrsHTML: htmluserlangattributes,
-	searchInputLabel: 'Search',
-	searchDivID: 'simpleSearch',
-	searchInputHTML: '<input type="search" name="search" placeholder="Search Wikipedia" title="Search Wikipedia [⌃⌥f]" accesskey="f" id="searchInput" autocomplete="off">',
-	titleHTML: '<input type="hidden" value="Special:Search" name="title">',
-	fallbackSearchButtonHTML: '<input type="submit" name="fulltext" value="Search" title="Search pages for this text" id="mw-searchButton" class="searchButton mw-fallbackSearchButton"/>',
-	searchButtonHTML: '<input type="submit" name="go" value="Go" title="Go to a page with this exact name if it exists" id="searchButton" class="searchButton">'
+	'form-action': '/w/index.php',
+	'html-userlangattributes': htmluserlangattributes,
+	'msg-search': 'Search',
+	'form-id': 'simpleSearch',
+	'html-input': '<input type="search" name="search" placeholder="Search Wikipedia" title="Search Wikipedia [⌃⌥f]" accesskey="f" id="searchInput" autocomplete="off">',
+	'page-title': 'Special:Search',
+	'html-button-search-fallback': '<input type="submit" name="fulltext" value="Search" title="Search pages for this text" id="mw-searchButton" class="searchButton mw-fallbackSearchButton"/>',
+	'html-button-search': '<input type="submit" name="go" value="Go" title="Go to a page with this exact name if it exists" id="searchButton" class="searchButton">'
 };

stories/types.js

@@ -22,6 +22,18 @@
  * @prop {string} msg-sitesubtitle alternate text for tagline.
  */
 
+/**
+ * @typedef {Object} SearchData
+ * @prop {string|null} msg-search
+ * @prop {string} [html-userlangattributes]
+ * @prop {string} form-action URL
+ * @prop {string} form-id
+ * @prop {string|null} html-input
+ * @prop {string|null} page-title the title of the search page
+ * @prop {string|null} html-button-search-fallback
+ * @prop {string|null} html-button-search
+ */
+
 /**
  * @typedef {Object} MenuDefinition
  * @prop {string} id