jenkins-bot has submitted this change and it was merged. Change subject: Rewrite rendering of Vector simple search ......................................................................
Rewrite rendering of Vector simple search * 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 <[email protected]> Co-Authored-By: Derk-Jan Hartman <[email protected]> Bug: 24248 Bug: 25127 Bug: 46947 Bug: 50660 Change-Id: I5fe0543e273aab4fbfb88f8ce933bc49872d4793 --- M resources/mediawiki/mediawiki.searchSuggest.js M skins/Vector.php M skins/vector/components/search.less 3 files changed, 141 insertions(+), 85 deletions(-) Approvals: Ori.livneh: Looks good to me, approved jenkins-bot: Verified diff --git a/resources/mediawiki/mediawiki.searchSuggest.js b/resources/mediawiki/mediawiki.searchSuggest.js index 50915b6..9fcd42a 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 0dcfe46..adf9003 100644 --- a/skins/Vector.php +++ b/skins/Vector.php @@ -429,21 +429,24 @@ <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 fc0a7b3..3a74754 100644 --- a/skins/vector/components/search.less +++ b/skins/vector/components/search.less @@ -29,75 +29,125 @@ .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; - } - } - - 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; - } - } } + +// 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; +} + +// 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; +} + -- To view, visit https://gerrit.wikimedia.org/r/82100 To unsubscribe, visit https://gerrit.wikimedia.org/r/settings Gerrit-MessageType: merged Gerrit-Change-Id: I5fe0543e273aab4fbfb88f8ce933bc49872d4793 Gerrit-PatchSet: 17 Gerrit-Project: mediawiki/core Gerrit-Branch: master Gerrit-Owner: Bartosz Dziewoński <[email protected]> Gerrit-Reviewer: Amire80 <[email protected]> Gerrit-Reviewer: Bartosz Dziewoński <[email protected]> Gerrit-Reviewer: Brion VIBBER <[email protected]> Gerrit-Reviewer: Daniel Friesen <[email protected]> Gerrit-Reviewer: Hoo man <[email protected]> Gerrit-Reviewer: Jack Phoenix <[email protected]> Gerrit-Reviewer: Jdlrobson <[email protected]> Gerrit-Reviewer: Krinkle <[email protected]> Gerrit-Reviewer: MZMcBride <[email protected]> Gerrit-Reviewer: MarkTraceur <[email protected]> Gerrit-Reviewer: Mooeypoo <[email protected]> Gerrit-Reviewer: Nikerabbit <[email protected]> Gerrit-Reviewer: Ori.livneh <[email protected]> Gerrit-Reviewer: TheDJ <[email protected]> Gerrit-Reviewer: Trevor Parscal <[email protected]> Gerrit-Reviewer: Waldir <[email protected]> Gerrit-Reviewer: jenkins-bot <> _______________________________________________ MediaWiki-commits mailing list [email protected] https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
