# HG changeset patch
# User Tomasz Kołodziejski <tkolodziejski@mozilla.com>

WIP

---
 toolkit/content/widgets/autocomplete.xml   | 169 ++++++++++-------------------
 toolkit/themes/osx/global/autocomplete.css |  12 ++
 2 files changed, 67 insertions(+), 114 deletions(-)

diff --git a/toolkit/content/widgets/autocomplete.xml b/toolkit/content/widgets/autocomplete.xml
index ef056d4..9c95f4e 100644
--- a/toolkit/content/widgets/autocomplete.xml
+++ b/toolkit/content/widgets/autocomplete.xml
@@ -1200,83 +1200,100 @@ extends="chrome://global/content/bindings/popup.xml#popup">
                 onget="return this.mInput.controller;"
                 onset="return val;"/>
 
     </implementation>
   </binding>
 
   <binding id="autocomplete-richlistitem" extends="chrome://global/content/bindings/richlistbox.xml#richlistitem">
     <content>
-      <xul:hbox align="center" class="ac-title-box">
-        <xul:image xbl:inherits="src=image" class="ac-site-icon"/>
-        <xul:hbox anonid="title-box" class="ac-title" flex="1"
-                  onunderflow="_doUnderflow('_title');"
-                  onoverflow="_doOverflow('_title');">
-          <xul:description anonid="title" class="ac-normal-text ac-comment" xbl:inherits="selected"/>
-        </xul:hbox>
-        <xul:label anonid="title-overflow-ellipsis" xbl:inherits="selected"
-                   class="ac-ellipsis-after ac-comment"/>
-        <xul:hbox anonid="extra-box" class="ac-extra" align="center" hidden="true">
-          <xul:image class="ac-result-type-tag"/>
-          <xul:label class="ac-normal-text ac-comment" xbl:inherits="selected" value=":"/>
-          <xul:description anonid="extra" class="ac-normal-text ac-comment" xbl:inherits="selected"/>
-        </xul:hbox>
-        <xul:image anonid="type-image" class="ac-type-icon"/>
-      </xul:hbox>
-      <xul:hbox align="center" class="ac-url-box">
-        <xul:spacer class="ac-site-icon"/>
-        <xul:image class="ac-action-icon"/>
-        <xul:hbox anonid="url-box" class="ac-url" flex="1"
-                  onunderflow="_doUnderflow('_url');"
-                  onoverflow="_doOverflow('_url');">
-          <xul:description anonid="url" class="ac-normal-text ac-url-text"
-                           xbl:inherits="selected type"/>
-          <xul:description anonid="action" class="ac-normal-text ac-action-text"
-                           xbl:inherits="selected type"/>
-        </xul:hbox>
-        <xul:label anonid="url-overflow-ellipsis" xbl:inherits="selected"
-                   class="ac-ellipsis-after ac-url-text"/>
-        <xul:spacer class="ac-type-icon"/>
-      </xul:hbox>
+      <html:div>
+        <html:div anonid="xxx">
+          <html:div class="ac-title-box" style="display:flex">
+            <xul:image xbl:inherits="src=image" class="ac-site-icon ac-no-shrink"/>
+
+            <html:div class="ac-shrink">
+              <html:span anonid="title-box" class="ac-title">
+                <html:span anonid="title" class="ac-normal-text ac-comment" xbl:inherits="selected"/>
+              </html:span>
+              <html:span anonid="extra-box" class="ac-extra" align="center" hidden="true">
+                <html:span>
+                  <!--<xul:image class="ac-result-type-tag"/>-->
+                </html:span>
+                <html:span class="ac-normal-text ac-comment" xbl:inherits="selected" value=":"/>
+                <html:span anonid="extra" class="ac-normal-text ac-comment" xbl:inherits="selected"/>
+              </html:span>
+            </html:div>
+
+            <html:span style="flex-shrink: 0">
+              <xul:image anonid="type-image" class="ac-type-icon ac-no-shrink"/>
+            </html:span>
+          </html:div>
+          <xul:hbox align="center" class="ac-url-box">
+            <xul:spacer class="ac-site-icon"/>
+            <xul:image class="ac-action-icon"/>
+            <xul:hbox anonid="url-box" class="ac-url" flex="1">
+              <xul:description anonid="url" class="ac-normal-text ac-url-text"
+                               xbl:inherits="selected type"/>
+              <xul:description anonid="action" class="ac-normal-text ac-action-text"
+                               xbl:inherits="selected type"/>
+            </xul:hbox>
+            <xul:spacer class="ac-type-icon"/>
+          </xul:hbox>
+        </html:div>
+      </html:div>
     </content>
     <implementation implements="nsIDOMXULSelectControlItemElement">
       <constructor>
         <![CDATA[
             let ellipsis = "\u2026";
             try {
               ellipsis = Components.classes["@mozilla.org/preferences-service;1"].
                 getService(Components.interfaces.nsIPrefBranch).
                 getComplexValue("intl.ellipsis",
                   Components.interfaces.nsIPrefLocalizedString).data;
             } catch (ex) {
               // Do nothing.. we already have a default
             }
-
-            this._urlOverflowEllipsis = document.getAnonymousElementByAttribute(this, "anonid", "url-overflow-ellipsis");
-            this._titleOverflowEllipsis = document.getAnonymousElementByAttribute(this, "anonid", "title-overflow-ellipsis");
-
-            this._urlOverflowEllipsis.value = ellipsis;
-            this._titleOverflowEllipsis.value = ellipsis;
-
+            
             this._typeImage = document.getAnonymousElementByAttribute(this, "anonid", "type-image");
 
             this._urlBox = document.getAnonymousElementByAttribute(this, "anonid", "url-box");
             this._url = document.getAnonymousElementByAttribute(this, "anonid", "url");
             this._action = document.getAnonymousElementByAttribute(this, "anonid", "action");
 
             this._titleBox = document.getAnonymousElementByAttribute(this, "anonid", "title-box");
             this._title = document.getAnonymousElementByAttribute(this, "anonid", "title");
 
             this._extraBox = document.getAnonymousElementByAttribute(this, "anonid", "extra-box");
             this._extra = document.getAnonymousElementByAttribute(this, "anonid", "extra");
 
+            this._fixWidth();
+
             this._adjustAcItem();
           ]]>
       </constructor>
 
+      <!--
+        THIS IS A HACK
+
+        In order to use css flex design we have to have a box that does not automatically increase its
+        size like the xul box.
+
+        FIXME: Update it when that popup gets resized. How?
+      -->
+      <method name="_fixWidth">
+        <body>
+          <![CDATA[
+            this._xxx = document.getAnonymousElementByAttribute(this, "anonid", "xxx");
+            this._xxx.style.width = document.getElementById('PopupAutoCompleteRichResult').width + "px";
+          ]]>
+        </body>
+      </method>
+
       <property name="label" readonly="true">
         <getter>
           <![CDATA[
             var title = this.getAttribute("title");
             var url = this.getAttribute("url");
             var panel = this.parentNode.parentNode;
 
             // allow consumers that have extended popups to override
@@ -1440,22 +1457,16 @@ extends="chrome://global/content/bindings/popup.xml#popup">
         <body>
           <![CDATA[
           var url = this.getAttribute("url");
           var title = this.getAttribute("title");
           var type = this.getAttribute("type");
 
           this.removeAttribute("actiontype");
 
-          // The ellipses are hidden via their visibility so that they always
-          // take up space and don't pop in on top of text when shown.  For
-          // keyword searches, however, the title ellipsis should not take up
-          // space when hidden.  Setting the hidden property accomplishes that.
-          this._titleOverflowEllipsis.hidden = false;
-
           // If the type includes an action, set up the item appropriately.
           var types = type.split(/\s+/);
           var actionIndex = types.indexOf("action");
           if (actionIndex >= 0) {
             let [,action, param] = url.match(/^moz-action:([^,]+),(.*)$/);
             this.setAttribute("actiontype", action);
             url = param;
             let desc = this._stringBundle.GetStringFromName("switchToTab");
@@ -1505,19 +1516,16 @@ extends="chrome://global/content/bindings/popup.xml#popup">
           } else if (type == "keyword") {
             // Configure the extra box for keyword display
             this._extraBox.hidden = false;
             this._extraBox.childNodes[0].hidden = true;
             this._extraBox.childNodes[1].hidden = false;
             this._extraBox.pack = "start";
             this._titleBox.flex = 0;
 
-            // Hide the ellipsis so it doesn't take up space.
-            this._titleOverflowEllipsis.hidden = true;
-
             // Put the parameters next to the title if we have any
             let search = this.getAttribute("text");
             let params = "";
             let paramsIndex = search.indexOf(' ');
             if (paramsIndex != -1)
               params = search.substr(paramsIndex + 1);
 
             // Emphasize the keyword parameters
@@ -1544,86 +1552,19 @@ extends="chrome://global/content/bindings/popup.xml#popup">
           if (!searchEngine) {
             this._setUpDescription(this._url, url);
           } else {
             let desc = this._stringBundle.formatStringFromName("searchWithEngine", [searchEngine], 1);
 
             // The search engine name, when present, is not emphasized.
             this._setUpDescription(this._url, desc, true);
           }
-
-          // Set up overflow on a timeout because the contents of the box
-          // might not have a width yet even though we just changed them
-          setTimeout(this._setUpOverflow, 0, this._titleBox, this._titleOverflowEllipsis);
-          setTimeout(this._setUpOverflow, 0, this._urlBox, this._urlOverflowEllipsis);
-          ]]>
-        </body>
-      </method>
-
-      <method name="_setUpOverflow">
-        <parameter name="aParentBox"/>
-        <parameter name="aEllipsis"/>
-        <body>
-          <![CDATA[
-          // Hide the ellipsis incase there's just enough to not underflow
-          aEllipsis.style.visibility = "hidden";
-
-          // Start with the parent's width and subtract off its children
-          let tooltip = [];
-          let children = aParentBox.childNodes;
-          let widthDiff = aParentBox.boxObject.width;
-
-          for (let i = 0; i < children.length; i++) {
-            // Only consider a child if it actually takes up space
-            let childWidth = children[i].boxObject.width;
-            if (childWidth > 0) {
-              // Subtract a little less to account for subpixel rounding
-              widthDiff -= childWidth - .5;
-
-              // Add to the tooltip if it's not hidden and has text
-              let childText = children[i].textContent;
-              if (childText)
-                tooltip.push(childText);
-            }
-          }
-
-          // If the children take up more space than the parent.. overflow!
-          if (widthDiff < 0) {
-            // Re-show the ellipsis now that we know it's needed
-            aEllipsis.style.visibility = "visible";
-
-            // Separate text components with a ndash --
-            aParentBox.tooltipText = tooltip.join(" \u2013 ");
-          }
-          ]]>
-        </body>
-      </method>
-
-      <method name="_doUnderflow">
-        <parameter name="aName"/>
-        <body>
-          <![CDATA[
-          // Hide the ellipsis right when we know we're underflowing instead of
-          // waiting for the timeout to trigger the _setUpOverflow calculations
-          this[aName + "Box"].tooltipText = "";
-          this[aName + "OverflowEllipsis"].style.visibility = "hidden";
           ]]>
         </body>
       </method>
-
-      <method name="_doOverflow">
-        <parameter name="aName"/>
-        <body>
-          <![CDATA[
-          this._setUpOverflow(this[aName + "Box"],
-                              this[aName + "OverflowEllipsis"]);
-          ]]>
-        </body>
-      </method>
-
     </implementation>
   </binding>
 
   <binding id="autocomplete-tree" extends="chrome://global/content/bindings/tree.xml#tree">
     <content>
       <children includes="treecols"/>
       <xul:treerows class="autocomplete-treerows tree-rows" xbl:inherits="hidescrollbar" flex="1">
         <children/>
diff --git a/toolkit/themes/osx/global/autocomplete.css b/toolkit/themes/osx/global/autocomplete.css
index 318af07..e671d41 100644
--- a/toolkit/themes/osx/global/autocomplete.css
+++ b/toolkit/themes/osx/global/autocomplete.css
@@ -82,16 +82,28 @@ treechildren.autocomplete-treebody::-moz-tree-cell-text(selected) {
 
 .autocomplete-treebody::-moz-tree-image(treecolAutoCompleteValue) {
   max-width: 16px;
   height: 16px;
 }
 
 /* ::::: richlistbox autocomplete ::::: */
 
+.ac-title-box {
+  display: flex;
+}
+
+html|*.ac-shrink {
+  white-space:nowrap; overflow:hidden; text-overflow:ellipsis
+}
+
+.ac-no-shrink {
+  flex-shrink: 0;
+}
+
 .autocomplete-richlistbox {
   -moz-appearance: none;
   margin: 0;
 }
 
 .autocomplete-richlistitem[selected="true"] {
   background-color: Highlight;
   color: HighlightText;