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

WIP
---
 toolkit/content/widgets/autocomplete.xml | 150 +++++++++++++++++++++----------
 1 file changed, 105 insertions(+), 45 deletions(-)

diff --git a/toolkit/content/widgets/autocomplete.xml b/toolkit/content/widgets/autocomplete.xml
index ef056d4..7c038a1 100644
--- a/toolkit/content/widgets/autocomplete.xml
+++ b/toolkit/content/widgets/autocomplete.xml
@@ -1200,83 +1200,130 @@ 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"
+      <xul:hbox anonid="box" flex="1"
+                  onunderflow="_setupWidth(this);"
+                  onoverflow="_setupWidth(this);">
+        <html:div style="height: 50px">
+
+          <!-- first row -->          
+          <html:div style="display:flex">
+            <!-- website icon -->
+            <xul:image xbl:inherits="src=image" class="ac-site-icon" style="flex-shrink:0"/>
+
+            <!-- title and keyword box flexible box with ellipsis -->
+            <html:div style="background:tomato; white-space:nowrap; overflow:hidden; text-overflow:ellipsis">
+              <!-- title -->
+              <html:span anonid="title" class="ac-normal-text ac-comment" xbl:inherits="selected"/>
+
+              <!-- keyword box -->
+              <html:span anonid="keyword-box">
+                <html:span class="ac-normal-text ac-comment" xbl:inherits="selected">:</html:span>
+                <html:span anonid="extra" class="ac-normal-text ac-comment" xbl:inherits="selected"/>
+              </html:span>
+            </html:div>
+
+            <!-- TODO: consider having separate elements for those two icons -->
+            <!-- optional star/magnifying glass icon -->
+            <xul:image anonid="type-image" class="ac-type-icon" style="flex-shrink:0"/>
+          </html:div>
+
+
+          <!-- second row -->
+          <html:div style="display:flex">
+            <!-- site icon spacer -->
+            <xul:spacer class="ac-site-icon"/>
+
+            <!-- title and keyword box flexible box with ellipsis -->
+            <html:div style="background:tomato; white-space:nowrap; overflow:hidden; text-overflow:ellipsis">
+              <!-- url-box -->
+              <html:span anonid="url-box">
+                <html:span anonid="url" class="ac-normal-text ac-url-text" xbl:inherits="selected type"/>
+              </html:span>
+              
+              <!-- action-box -->
+              <html:span anonid="action-box">
+                <xul:image class="ac-action-icon"/>
+                <html:span anonid="action" class="ac-normal-text ac-action-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"/>
+                
+              </html:span>
+            </html:div>
+
+            <!-- TODO: tags:
+            <xul:image class="ac-result-type-tag"/> -->
+          </html:div>
+
+        </html:div>
       </xul:hbox>
     </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 = 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._urlOverflowEllipsis.value = ellipsis;
-            this._titleOverflowEllipsis.value = ellipsis;
+            this._box = document.getAnonymousElementByAttribute(this, "anonid", "box");
 
             this._typeImage = document.getAnonymousElementByAttribute(this, "anonid", "type-image");
 
             this._urlBox = document.getAnonymousElementByAttribute(this, "anonid", "url-box");
             this._url = document.getAnonymousElementByAttribute(this, "anonid", "url");
+
+            this._actionBox = document.getAnonymousElementByAttribute(this, "anonid", "action");
             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._extraBox = document.getAnonymousElementByAttribute(this, "anonid", "extra-box");
             this._extra = document.getAnonymousElementByAttribute(this, "anonid", "extra");
 
+            this._keywordBox = document.getAnonymousElementByAttribute(this, "anonid", "keyword-box");
+
+            window.xxx = this._box;
+
             this._adjustAcItem();
           ]]>
       </constructor>
 
+      <method name="_setupWidth">
+        <parameter name="aBox"/>
+        <body>
+          <![CDATA[
+            let div1 = aBox.firstElementChild.firstElementChild;
+            let div2 = div1.nextElementSibling;
+
+            let width = aBox.parentElement.parentElement.boxObject.width;
+            div1.style.width = width + "px";
+            div2.style.width = width + "px";
+
+            console.log(width);
+          ]]>
+        </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,36 +1487,44 @@ 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");
 
+          // Start with hiding boxes 
+          // TODO: maybe create a helper method
+          this._keywordBox.style.display = "none";
+          this._urlBox.style.display = "none";
+          this._actionBox.style.display = "none";
+
           // 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;
+          //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");
             this._setUpDescription(this._action, desc, true);
 
             // Remove the "action" substring so that the correct style, if any,
             // is applied below.
             types.splice(actionIndex, 1);
             type = types.join(" ");
+
+            this._actionBox.style.display = "inline";
           }
 
           // Check if we have a search engine name
           let searchEngine = "";
           let searchIndex = types.indexOf("search");
           if (searchIndex >= 0) {
             const TITLE_SEARCH_ENGINE_SEPARATOR = " \u00B7\u2013\u00B7 ";
 
@@ -1479,86 +1534,91 @@ extends="chrome://global/content/bindings/popup.xml#popup">
             // is applied below.
             types.splice(searchIndex, 1);
             type = types.join(" ");
           }
 
           // If we have a tag match, show the tags and icon
           if (type == "tag") {
             // Configure the extra box for tags display
-            this._extraBox.hidden = false;
+            /*this._extraBox.hidden = false;
             this._extraBox.childNodes[0].hidden = false;
             this._extraBox.childNodes[1].hidden = true;
             this._extraBox.pack = "end";
-            this._titleBox.flex = 1;
+            this._titleBox.flex = 1;*/
 
             // The title is separated from the tags by an endash
             let tags;
             [, title, tags] = title.match(/^(.+) \u2013 (.+)$/);
 
             // Each tag is split by a comma in an undefined order, so sort it
             let sortedTags = tags.split(",").sort().join(", ");
 
             // Emphasize the matching text in the tags
             this._setUpDescription(this._extra, sortedTags);
 
             // Treat tagged matches as bookmarks for the star
             type = "bookmark";
           } else if (type == "keyword") {
+            this._keywordBox.style.display = "inline";
+
             // Configure the extra box for keyword display
-            this._extraBox.hidden = false;
+            /*this._extraBox.hidden = false;
             this._extraBox.childNodes[0].hidden = true;
             this._extraBox.childNodes[1].hidden = false;
             this._extraBox.pack = "start";
-            this._titleBox.flex = 0;
+            this._titleBox.flex = 0;*/
 
             // Hide the ellipsis so it doesn't take up space.
-            this._titleOverflowEllipsis.hidden = true;
+            //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
             this._setUpDescription(this._extra, params);
 
             // Don't emphasize keyword searches in the title or url
             this.setAttribute("text", "");
           } else {
             // Hide the title's extra box if we don't need extra stuff
-            this._extraBox.hidden = true;
-            this._titleBox.flex = 1;
+            //this._extraBox.hidden = true;
+            //this._titleBox.flex = 1;
           }
 
           // Give the image the icon style and a special one for the type
           this._typeImage.className = "ac-type-icon" +
             (type ? " ac-result-type-" + type : "");
 
           // Show the url as the title if we don't have a title
           if (title == "")
             title = url;
 
           // Emphasize the matching search terms for the description
           this._setUpDescription(this._title, title);
           if (!searchEngine) {
             this._setUpDescription(this._url, url);
+            this._urlBox.style.display = "inline";
           } 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);
+          //setTimeout(this._setUpOverflow, 0, this._titleBox, this._titleOverflowEllipsis);
+          //setTimeout(this._setUpOverflow, 0, this._urlBox, this._urlOverflowEllipsis);
+
+          setTimeout(this._setupWidth, 0, this._box);
           ]]>
         </body>
       </method>
 
       <method name="_setUpOverflow">
         <parameter name="aParentBox"/>
         <parameter name="aEllipsis"/>
         <body>