Convert Special:Search to OOUI

Limiting this to the primary form for now, which was using old
MediaWiki UI styles. There are some native elements tucked in the
advanced form which I am not changing here yet.

Also, use new search suggestions provided by TitleInputWidget.

Bug: T100898
Change-Id: I699cf27a686f2615a22fce70f43b9f89092485c9

diff --git a/includes/specials/SpecialSearch.php b/includes/specials/SpecialSearch.php
index bc1bb3d..a8fab92 100644 (file)
--- a/includes/specials/SpecialSearch.php
+++ b/includes/specials/SpecialSearch.php
@@ -328,6 +328,7 @@ class SpecialSearch extends SpecialPage {
                $num = $titleMatchesNum + $textMatchesNum;
                $totalRes = $numTitleMatches + $numTextMatches;
 
+               $out->enableOOUI();
                $out->addHtml(
                        # This is an awful awful ID name. It's not a table, but we
                        # named it poorly from when this was a table so now we're
@@ -1078,21 +1079,23 @@ class SpecialSearch extends SpecialPage {
         * @return string
         */
        protected function shortDialog( $term, $resultsShown, $totalNum ) {
-               $out = Html::hidden( 'title', $this->getPageTitle()->getPrefixedText() );
-               $out .= Html::hidden( 'profile', $this->profile ) . "\n";
-               // Term box
-               $out .= Html::input( 'search', $term, 'search', array(
-                       'id' => $this->isPowerSearch() ? 'powerSearchText' : 'searchText',
-                       'size' => '50',
-                       'autofocus' => trim( $term ) === '',
-                       'class' => 'mw-ui-input mw-ui-input-inline',
-               ) ) . "\n";
-               $out .= Html::hidden( 'fulltext', 'Search' ) . "\n";
-               $out .= Html::submitButton(
-                       $this->msg( 'searchbutton' )->text(),
-                       array( 'class' => 'mw-ui-button mw-ui-progressive' ),
-                       array( 'mw-ui-progressive' )
-               ) . "\n";
+               $out =
+                       Html::hidden( 'title', $this->getPageTitle()->getPrefixedText() ) .
+                       Html::hidden( 'profile', $this->profile ) .
+                       Html::hidden( 'fulltext', 'Search' ) .
+                       new MediaWiki\Widget\TitleInputWidget( array(
+                               'type' => 'search',
+                               'icon' => 'search',
+                               'id' => 'searchText',
+                               'name' => 'search',
+                               'autofocus' => trim( $term ) === '',
+                               'value' => $term,
+                       ) ) .
+                       new OOUI\ButtonInputWidget( array(
+                               'type' => 'submit',
+                               'label' => $this->msg( 'searchbutton' )->text(),
+                               'flags' => array( 'progressive', 'primary' ),
+                       ) );
 
                // Results-info
                if ( $totalNum > 0 && $this->offset < $totalNum ) {

diff --git a/resources/Resources.php b/resources/Resources.php
index 182f090..ce68467 100644 (file)
--- a/resources/Resources.php
+++ b/resources/Resources.php
@@ -1492,6 +1492,7 @@ return array(
                'position' => 'top',
                'scripts' => 'resources/src/mediawiki.special/mediawiki.special.search.js',
                'styles' => 'resources/src/mediawiki.special/mediawiki.special.search.css',
+               'dependencies' => 'mediawiki.widgets',
                'messages' => array(
                        'powersearch-togglelabel',
                        'powersearch-toggleall',

diff --git a/resources/src/mediawiki.special/mediawiki.special.search.css b/resources/src/mediawiki.special/mediawiki.special.search.css
index 8f845df..8d648a6 100644 (file)
--- a/resources/src/mediawiki.special/mediawiki.special.search.css
+++ b/resources/src/mediawiki.special/mediawiki.special.search.css
@@ -172,3 +172,7 @@ table#mw-search-powertable {
 form#powersearch {
        clear: both;
 }
+
+#searchText {
+       display: inline-block;
+}

diff --git a/resources/src/mediawiki.special/mediawiki.special.search.js b/resources/src/mediawiki.special/mediawiki.special.search.js
index b27fe34..23602b3 100644 (file)
--- a/resources/src/mediawiki.special/mediawiki.special.search.js
+++ b/resources/src/mediawiki.special/mediawiki.special.search.js
@@ -33,8 +33,7 @@
 
                // Change the header search links to what user entered
                $headerLinks = $( '.search-types a' );
-               $( '#searchText, #powerSearchText' ).change( function () {
-                       var searchterm = $( this ).val();
+               OO.ui.infuse( 'searchText' ).on( 'change', function ( searchterm ) {
                        $headerLinks.each( function () {
                                var parts = $( this ).attr( 'href' ).split( 'search=' ),
                                        lastpart = '',
@@ -46,7 +45,7 @@
                                }
                                this.href = parts[0] + prefix + encodeURIComponent( searchterm ) + lastpart;
                        } );
-               } ).trigger( 'change' );
+               } );
 
                // When saving settings, use the proper request method (POST instead of GET).
                $( '#mw-search-powersearch-remember' ).change( function () {

diff --git a/resources/src/mediawiki/mediawiki.searchSuggest.js b/resources/src/mediawiki/mediawiki.searchSuggest.js
index 1f3b123..032f207 100644 (file)
--- a/resources/src/mediawiki/mediawiki.searchSuggest.js
+++ b/resources/src/mediawiki/mediawiki.searchSuggest.js
@@ -159,9 +159,6 @@
                searchboxesSelectors = [
                        // Primary searchbox on every page in standard skins
                        '#searchInput',
-                       // Special:Search
-                       '#powerSearchText',
-                       '#searchText',
                        // Generic selector for skins with multiple searchboxes (used by CologneBlue)
                        // and for MediaWiki itself (special pages with page title inputs)
                        '.mw-searchInput'