Rewrite rendering of Vector simple search
authorBartosz Dziewoński <matma.rex@gmail.com>
Sat, 1 Feb 2014 17:06:48 +0000 (18:06 +0100)
committerOri.livneh <ori@wikimedia.org>
Mon, 3 Feb 2014 02:26:18 +0000 (02:26 +0000)
* 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

resources/mediawiki/mediawiki.searchSuggest.js
skins/Vector.php
skins/vector/components/search.less

index 50915b6..9fcd42a 100644 (file)
                                // 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 ) {
index 0dcfe46..adf9003 100644 (file)
@@ -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>
index fc0a7b3..3a74754 100644 (file)
@@ -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;
+}
+