jquery.suggestions: Handle CSS ellipsis when calculating suggestions' widths

This is so nasty :(

Bug: 64093
Change-Id: Ia6b1376dddf69a0faa214d5c9a756bdcd9658367

diff --git a/resources/src/jquery/jquery.suggestions.js b/resources/src/jquery/jquery.suggestions.js
index ed3d862..22e8652 100644 (file)
--- a/resources/src/jquery/jquery.suggestions.js
+++ b/resources/src/jquery/jquery.suggestions.js
@@ -140,7 +140,7 @@ $.suggestions = {
         */
        configure: function ( context, property, value ) {
                var newCSS,
-                       $result, $results, childrenWidth,
+                       $result, $results, $spanForWidth, childrenWidth,
                        i, expWidth, maxWidth, text;
 
                // Validate creation using fallback values
@@ -266,9 +266,11 @@ $.suggestions = {
                                                                $result.highlightText( context.data.prevText );
                                                        }
 
-                                                       // Widen results box if needed
-                                                       // New width is only calculated here, applied later
-                                                       childrenWidth = $result.children().outerWidth();
+                                                       // Widen results box if needed (new width is only calculated here, applied later).
+                                                       // We need this awful hack to calculate the actual pre-ellipsis width.
+                                                       $spanForWidth = $result.wrapInner( '<span>' ).children();
+                                                       childrenWidth = $spanForWidth.outerWidth();
+                                                       $spanForWidth.contents().unwrap();
                                                        if ( childrenWidth > $result.width() && childrenWidth > expWidth ) {
                                                                // factor in any padding, margin, or border space on the parent
                                                                expWidth = childrenWidth + ( context.data.$container.width() - $result.width() );