jenkins-bot has submitted this change and it was merged.

Change subject: jquery.suggestions, mediawiki.searchSuggest: Don't use 
jquery.autoEllipsis
......................................................................


jquery.suggestions, mediawiki.searchSuggest: Don't use jquery.autoEllipsis

(How's that for a loaded commit topic, huh?)

We can just use text-overflow: ellipsis, which is widely supported
these days. The result is a lot less code being loaded on every page
view and a lot less processing being done on the suggestions.

This changes the position of the ellipsis from the "middle" of the
text to the end of it. I don't think this is a problem.

Bug: 30309
Bug: 59172
Change-Id: I6fc229a292a90a3cbb945b58061ee99b0ac7f97d
---
M resources/Resources.php
M resources/jquery/jquery.suggestions.css
M resources/jquery/jquery.suggestions.js
M resources/mediawiki/mediawiki.searchSuggest.css
M resources/mediawiki/mediawiki.searchSuggest.js
5 files changed, 22 insertions(+), 31 deletions(-)

Approvals:
  Ori.livneh: Looks good to me, approved
  jenkins-bot: Verified



diff --git a/resources/Resources.php b/resources/Resources.php
index 72c17f3..708e25a 100644
--- a/resources/Resources.php
+++ b/resources/Resources.php
@@ -320,7 +320,7 @@
        'jquery.suggestions' => array(
                'scripts' => 'resources/jquery/jquery.suggestions.js',
                'styles' => 'resources/jquery/jquery.suggestions.css',
-               'dependencies' => 'jquery.autoEllipsis',
+               'dependencies' => 'jquery.highlightText',
        ),
        'jquery.tabIndex' => array(
                'scripts' => 'resources/jquery/jquery.tabIndex.js',
@@ -857,7 +857,6 @@
                        'searchsuggest-containing',
                ),
                'dependencies' => array(
-                       'jquery.autoEllipsis',
                        'jquery.client',
                        'jquery.placeholder',
                        'jquery.suggestions',
diff --git a/resources/jquery/jquery.suggestions.css 
b/resources/jquery/jquery.suggestions.css
index e0ba647..ea65946 100644
--- a/resources/jquery/jquery.suggestions.css
+++ b/resources/jquery/jquery.suggestions.css
@@ -44,6 +44,11 @@
        line-height: 1.5em;
        padding: 0.01em 0.25em;
        text-align: left;
+       /* Apply ellipsis to suggestions */
+       overflow: hidden;
+       -o-text-overflow: ellipsis; /* Opera 9 to 10 */
+       text-overflow: ellipsis;
+       white-space: nowrap;
 }
 
 .suggestions-result-current {
@@ -71,7 +76,6 @@
        color: white;
 }
 
-.autoellipsis-matched,
 .highlight {
        font-weight: bold;
 }
diff --git a/resources/jquery/jquery.suggestions.js 
b/resources/jquery/jquery.suggestions.js
index f9a225f..29be239 100644
--- a/resources/jquery/jquery.suggestions.js
+++ b/resources/jquery/jquery.suggestions.js
@@ -138,8 +138,8 @@
         */
        configure: function ( context, property, value ) {
                var newCSS,
-                       $autoEllipseMe, $result, $results, childrenWidth,
-                       i, expWidth, matchedText, maxWidth, text;
+                       $result, $results, childrenWidth,
+                       i, expWidth, maxWidth, text;
 
                // Validate creation using fallback values
                switch ( property ) {
@@ -237,8 +237,6 @@
                                                $results = 
context.data.$container.children( '.suggestions-results' );
                                                $results.empty();
                                                expWidth = -1;
-                                               $autoEllipseMe = $( [] );
-                                               matchedText = null;
                                                for ( i = 0; i < 
context.config.suggestions.length; i++ ) {
                                                        /*jshint loopfunc:true 
*/
                                                        text = 
context.config.suggestions[i];
@@ -259,15 +257,11 @@
                                                        if ( typeof 
context.config.result.render === 'function' ) {
                                                                
context.config.result.render.call( $result, context.config.suggestions[i], 
context );
                                                        } else {
-                                                               // Add <span> 
with text
-                                                               $result.append( 
$( '<span>' )
-                                                                               
.css( 'whiteSpace', 'nowrap' )
-                                                                               
.text( text )
-                                                                       );
+                                                               $result.text( 
text );
                                                        }
 
                                                        if ( 
context.config.highlightInput ) {
-                                                               matchedText = 
context.data.prevText;
+                                                               
$result.highlightText( context.data.prevText );
                                                        }
 
                                                        // Widen results box if 
needed
@@ -277,19 +271,13 @@
                                                                // factor in 
any padding, margin, or border space on the parent
                                                                expWidth = 
childrenWidth + ( context.data.$container.width() - $result.width() );
                                                        }
-                                                       $autoEllipseMe = 
$autoEllipseMe.add( $result );
                                                }
+
                                                // Apply new width for results 
box, if any
                                                if ( expWidth > 
context.data.$container.width() ) {
                                                        maxWidth = 
context.config.maxExpandFactor * context.data.$textbox.width();
                                                        
context.data.$container.width( Math.min( expWidth, maxWidth ) );
                                                }
-                                               // autoEllipse the results. Has 
to be done after changing the width
-                                               $autoEllipseMe.autoEllipsis( {
-                                                       hasSpan: true,
-                                                       tooltip: true,
-                                                       matchText: matchedText
-                                               } );
                                        }
                                }
                                break;
diff --git a/resources/mediawiki/mediawiki.searchSuggest.css 
b/resources/mediawiki/mediawiki.searchSuggest.css
index 0fb862b..df144ce 100644
--- a/resources/mediawiki/mediawiki.searchSuggest.css
+++ b/resources/mediawiki/mediawiki.searchSuggest.css
@@ -4,8 +4,8 @@
 .suggestions a.mw-searchSuggest-link:hover,
 .suggestions a.mw-searchSuggest-link:active,
 .suggestions a.mw-searchSuggest-link:focus {
-       text-decoration: none;
        color: black;
+       text-decoration: none;
 }
 
 .suggestions-result-current a.mw-searchSuggest-link,
@@ -14,3 +14,11 @@
 .suggestions-result-current a.mw-searchSuggest-link:focus {
        color: white;
 }
+
+.suggestions a.mw-searchSuggest-link .special-query {
+       /* Apply ellipsis to suggestions */
+       overflow: hidden;
+       -o-text-overflow: ellipsis; /* Opera 9 to 10 */
+       text-overflow: ellipsis;
+       white-space: nowrap;
+}
diff --git a/resources/mediawiki/mediawiki.searchSuggest.js 
b/resources/mediawiki/mediawiki.searchSuggest.js
index 6999610..8a8871d 100644
--- a/resources/mediawiki/mediawiki.searchSuggest.js
+++ b/resources/mediawiki/mediawiki.searchSuggest.js
@@ -62,13 +62,7 @@
                        resultRenderCache.linkParams[ 
resultRenderCache.textParam ] = text;
 
                        // this is the container <div>, jQueryfied
-                       this
-                               .append(
-                                       // the <span> is needed for 
$.autoEllipsis to work
-                                       $( '<span>' )
-                                               .css( 'whiteSpace', 'nowrap' )
-                                               .text( text )
-                               )
+                       this.text( text )
                                .wrap(
                                        $( '<a>' )
                                                .attr( 'href', 
resultRenderCache.baseHref + $.param( resultRenderCache.linkParams ) )
@@ -95,13 +89,11 @@
                                                $( '<div>' )
                                                        .addClass( 
'special-query' )
                                                        .text( query )
-                                                       .autoEllipsis()
                                        )
                                        .show();
                        } else {
                                $el.find( '.special-query' )
-                                       .text( query )
-                                       .autoEllipsis();
+                                       .text( query );
                        }
 
                        if ( $el.parent().hasClass( 'mw-searchSuggest-link' ) ) 
{

-- 
To view, visit https://gerrit.wikimedia.org/r/111180
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings

Gerrit-MessageType: merged
Gerrit-Change-Id: I6fc229a292a90a3cbb945b58061ee99b0ac7f97d
Gerrit-PatchSet: 5
Gerrit-Project: mediawiki/core
Gerrit-Branch: master
Gerrit-Owner: Bartosz Dziewoński <[email protected]>
Gerrit-Reviewer: Bartosz Dziewoński <[email protected]>
Gerrit-Reviewer: Jack Phoenix <[email protected]>
Gerrit-Reviewer: Krinkle <[email protected]>
Gerrit-Reviewer: Manybubbles <[email protected]>
Gerrit-Reviewer: Ori.livneh <[email protected]>
Gerrit-Reviewer: Thiemo Mättig (WMDE) <[email protected]>
Gerrit-Reviewer: jenkins-bot <>

_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits

Reply via email to