From 27068d52076c06e54374eded0dad05fbbd40e674 Mon Sep 17 00:00:00 2001
From: =?utf8?q?Bartosz=20Dziewo=C5=84ski?= <matma.rex@gmail.com>
Date: Sat, 1 Feb 2014 18:06:48 +0100
Subject: [PATCH] Rewrite rendering of Vector simple search
MIME-Version: 1.0
Content-Type: text/plain; charset=utf8
Content-Transfer-Encoding: 8bit

* Do not emit different HTML for LTR and RTL (partially fixes
  bug 46947).
* Do not use <button> element to avoid IE6 and Firefox troubles
  (fixes bug 50660). Only one little one-line hack is necessary now.
* Implement simple search formatting client-side (site/user options
  only control adding id=simpleSearch on the search container, CSS
  does the rest).
* Make the search use the 'fulltext' mode by default (to make full
  functionality accessible; fixes bug 25127) and 'go' when search
  suggestions are enabled and working (JavaScript enabled and browser
  support okay), as the module handles fulltext search itself.
* Use appropriate tooltips on the buttons (fixes bug 24248).
* General CSS and HTML cleanup in related areas.
* Keep the old styles necessary for backwards-compatibility with
  cached HTML. Removing them in subsequent commit Ib9f59b6d.

Co-Authored-By: Bartosz Dziewoński <matma.rex@gmail.com>
Co-Authored-By: Derk-Jan Hartman <hartman.wiki@gmail.com>
Bug: 24248
Bug: 25127
Bug: 46947
Bug: 50660
Change-Id: I5fe0543e273aab4fbfb88f8ce933bc49872d4793
---
 .../mediawiki/mediawiki.searchSuggest.js      |   5 +-
 skins/Vector.php                              |  29 +--
 skins/vector/components/search.less           | 188 +++++++++++-------
 3 files changed, 139 insertions(+), 83 deletions(-)

diff --git a/resources/mediawiki/mediawiki.searchSuggest.js b/resources/mediawiki/mediawiki.searchSuggest.js
index 50915b6cd7..9fcd42a712 100644
--- a/resources/mediawiki/mediawiki.searchSuggest.js
+++ b/resources/mediawiki/mediawiki.searchSuggest.js
@@ -164,7 +164,10 @@
 				// make sure paste and cut events from the mouse and drag&drop events
 				// trigger the keypress handler and cause the suggestions to update
 				$( this ).trigger( 'keypress' );
-			} );
+			} )
+			// If the forms include any fulltext search thingies, remove them as they
+			// would interfere with selecting suggestions
+			.closest( 'form' ).find( '[name="fulltext"]' ).remove();
 
 		// Ensure that the thing is actually present!
 		if ( $searchRegion.length === 0 ) {
diff --git a/skins/Vector.php b/skins/Vector.php
index 0dcfe46076..adf9003e57 100644
--- a/skins/Vector.php
+++ b/skins/Vector.php
@@ -429,21 +429,24 @@ class VectorTemplate extends BaseTemplate {
 	<h3<?php $this->html( 'userlangattributes' ) ?>><label for="searchInput"><?php $this->msg( 'search' ) ?></label></h3>
 	<form action="<?php $this->text( 'wgScript' ) ?>" id="searchform">
 		<?php if ( $wgVectorUseSimpleSearch && $this->getSkin()->getUser()->getOption( 'vector-simplesearch' ) ) { ?>
-		<div id="simpleSearch">
-			<?php if ( $this->data['rtl'] ) { ?>
-			<?php echo $this->makeSearchButton( 'image', array( 'id' => 'searchButton', 'src' => $this->getSkin()->getSkinStylePath( 'images/search-rtl.png' ), 'width' => '12', 'height' => '13' ) ); ?>
-			<?php } ?>
-			<?php echo $this->makeSearchInput( array( 'id' => 'searchInput', 'type' => 'text' ) ); ?>
-			<?php if ( !$this->data['rtl'] ) { ?>
-			<?php echo $this->makeSearchButton( 'image', array( 'id' => 'searchButton', 'src' => $this->getSkin()->getSkinStylePath( 'images/search-ltr.png' ), 'width' => '12', 'height' => '13' ) ); ?>
-			<?php } ?>
+			<div id="simpleSearch">
 		<?php } else { ?>
-		<div>
-			<?php echo $this->makeSearchInput( array( 'id' => 'searchInput' ) ); ?>
-			<?php echo $this->makeSearchButton( 'go', array( 'id' => 'searchGoButton', 'class' => 'searchButton' ) ); ?>
-			<?php echo $this->makeSearchButton( 'fulltext', array( 'id' => 'mw-searchButton', 'class' => 'searchButton' ) ); ?>
+			<div>
 		<?php } ?>
-			<input type='hidden' name="title" value="<?php $this->text( 'searchtitle' ) ?>"/>
+			<?php
+			echo $this->makeSearchInput( array( 'id' => 'searchInput' ) );
+			echo Html::hidden( 'title', $this->get( 'searchtitle' ) );
+			// 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), which
+			//   is desirable when they are unable to show search suggestions (either due to being broken
+			//   or having JavaScript turned off).
+			// * 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.
+			echo $this->makeSearchButton( 'fulltext', array( 'id' => 'mw-searchButton', 'class' => 'searchButton' ) );
+			echo $this->makeSearchButton( 'go', array( 'id' => 'searchButton', 'class' => 'searchButton' ) );
+			?>
 		</div>
 	</form>
 </div>
diff --git a/skins/vector/components/search.less b/skins/vector/components/search.less
index fc0a7b3e69..3a74754e81 100644
--- a/skins/vector/components/search.less
+++ b/skins/vector/components/search.less
@@ -29,75 +29,125 @@ div#simpleSearch {
 	.background-image('images/search-fade.png');
 	background-position: top left;
 	background-repeat: repeat-x;
+}
 
-	input {
-		color: black;
-		&:focus {
-			outline: none;
-		}
-
-		// These rules MAY NOT be merged because of how CSS requires browsers
-		// to parse unrecognized selectors!
-		&.placeholder {
-			color: #999;
-		}
-		&:-ms-input-placeholder {
-			color: #999;
-		}
-		&:-moz-placeholder {
-			color: #999;
-		}
-		&::-webkit-input-placeholder {
-			color: #999;
-		}
-
-		&#searchInput {
-			position: absolute;
-			top: 0;
-			left: 0;
-			width: 90%;
-			margin: 0;
-			padding: 0;
-			padding-left: 0.2em;
-			padding-top: 0.2em;
-			padding-bottom: 0.2em;
-			outline: none;
-			border: none;
-			/*
-			 * DON'T PANIC! Browsers that won't scale this properly are the same browsers that have JS issues that prevent
-			 * this from ever being shown anyways.
-			*/
-			font-size: 13px;
-			background-color: transparent;
-			direction: ltr;
-		}
-	}
+// Styles for both the search input and the button
+div#simpleSearch input {
+	position: absolute;
+	margin: 0;
+	padding: 0;
+	border: 0;
+	color: black;
+	background-color: transparent;
+}
 
-	button#searchButton {
-		position: absolute;
-		width: 10%;
-		right: 0;
-		top: 0;
-		padding: 0;
-		padding-top: 0.3em;
-		padding-bottom: 0.2em;
-		padding-right: 0.4em;
-		margin: 0;
-		border: none;
-		cursor: pointer;
-		background-color: transparent;
-		background-image: none;
-
-		/* OVERRIDDEN BY COMPLIANT BROWSERS */
-		img {
-			border: none;
-			margin: 0;
-			margin-top: -3px;
-			padding: 0;
-		}
-		/* IGNORED BY IE6 */
-		> img {
-			margin: 0;
-		}
-	}
+// The search input
+div#simpleSearch #searchInput {
+	top: 0;
+	left: 0;
+	width: 90%;
+	padding: 0.2em 0 0.2em 0.2em;
+	font-size: 13px;
+	direction: ltr;
+}
+
+div#simpleSearch #searchInput:focus {
+	outline: none;
+}
+
+div#simpleSearch input {
+	color: black;
+}
+
+// Placeholder colors. These rules MAY NOT be merged because of how
+// CSS requires browsers to parse unrecognized selectors!
+div#simpleSearch #searchInput.placeholder {
+	color: #999;
+}
+div#simpleSearch #searchInput::-webkit-input-placeholder {
+	color: #999;
+}
+div#simpleSearch #searchInput:-moz-placeholder {
+	color: #999;
+}
+div#simpleSearch #searchInput:-ms-input-placeholder {
+	color: #999;
+}
+
+// Undo the styles Webkit browsers apply to type=search fields,
+// we provide our own
+div#simpleSearch #searchInput {
+	-webkit-appearance: textfield;
+}
+div#simpleSearch #searchInput::-webkit-search-decoration,
+div#simpleSearch #searchInput::-webkit-search-cancel-button,
+div#simpleSearch #searchInput::-webkit-search-results-button,
+div#simpleSearch #searchInput::-webkit-search-results-decoration {
+	-webkit-appearance: textfield;
 }
+
+// The buttons. They are displayed in the same position, and if both are
+// present the fulltext search one obscures the 'Go' one.
+div#simpleSearch #searchButton,
+div#simpleSearch #mw-searchButton {
+	top: 0;
+	right: 0;
+	width: 10%;
+	height: 100%;
+	cursor: pointer;
+	/* Hide button text and replace it with the image. */
+	text-indent: 100%;
+	/* Needed to make IE6 respect the text-indent. */
+	line-height: 1;
+	/* Opera 12 on RTL flips the text in a funny way without this. */
+	/* @noflip */
+	direction: ltr;
+	white-space: nowrap;
+	overflow: hidden;
+	/* @embed */
+	background: transparent url(images/search-ltr.png) center center no-repeat;
+}
+
+div#simpleSearch #mw-searchButton {
+	z-index: 1;
+}
+
+
+// The following styles exist only for backwards-compatibility with
+// cached HTML and are to be removed before 1.23 release.
+
+/* Fix direction changed for awful hacks */
+.sitedir-ltr div#simpleSearch button#searchButton {
+	/* @noflip */
+	direction: ltr;
+}
+.sitedir-rtl div#simpleSearch button#searchButton {
+	/* @noflip */
+	direction: rtl;
+}
+
+div#simpleSearch button#searchButton {
+	position: absolute;
+	padding: 0;
+	padding-top: 0.3em;
+	padding-bottom: 0.2em;
+	padding-right: 0.4em;
+	margin: 0;
+	border: none;
+	background-image: none;
+	text-indent: 0;
+}
+
+/* OVERRIDDEN BY COMPLIANT BROWSERS */
+div#simpleSearch button#searchButton img {
+	border: none;
+	margin: 0;
+	margin-top: -3px;
+	padding: 0;
+}
+
+/* IGNORED BY IE6 */
+div#simpleSearch button#searchButton > img {
+	margin: 0;
+}
+
-- 
2.20.1