Add URL to help disambiguate location bar autocomplete entries, also add favicon and 'tagged' indication, r=gavin

mobile/chrome/content/bindings.xml

@@ -31,20 +31,28 @@
     </implementation>
   </binding>
 
+  <binding id="popup_autocomplete_result">
+    <content>
+      <xul:image class="autocomplete-item-image" src="" xbl:inherits="src"/>
+      <xul:description flex="1" class="autocomplete-item-desc" xbl:inherits="xbl:text=value"></xul:description>
+      <xul:label class="autocomplete-item-tags" xbl:inherits="favorite,xbl:text=tags"></xul:label>
+    </content>
+  </binding>
+
   <binding id="popup_autocomplete">
-    <content hidden="true" noresults="&noResults.label;">
+    <content>
       <xul:vbox class="autocomplete-box" flex="1">
         <xul:scrollbox orient="vertical"
                        class="autocomplete-items"
                        anonid="autocomplete-items"
                        flex="1000">
-          <xul:label value=""/>
-          <xul:label value=""/>
-          <xul:label value=""/>
-          <xul:label value=""/>
-          <xul:label value=""/>
-          <xul:label value=""/>
-          <xul:label value=""/>
+          <xul:autocompleteresult/>
+          <xul:autocompleteresult/>
+          <xul:autocompleteresult/>
+          <xul:autocompleteresult/>
+          <xul:autocompleteresult/>
+          <xul:autocompleteresult/>
+          <xul:autocompleteresult/>
         </xul:scrollbox>
         <children/>
       </xul:vbox>
@@ -112,7 +120,9 @@
 
           this._input = aInput;
 
-          this.hidden = false;
+          if (this.hidden)
+            this.hidden = false;
+          this.collapsed = false;
           this._popupOpen = true;
 
           BrowserUI.pushDialog(this);
@@ -129,7 +139,7 @@
           this.selectedIndex = -1;
           this.input.controller.stopSearch();
 
-          this.hidden = true;
+          this.collapsed = true;
           this._popupOpen = false;
 
           BrowserUI.popDialog();
@@ -151,61 +161,84 @@
           if (!this.popupOpen)
             return;
 
-          let controller = this.input.controller;
-          let searchString = controller.searchString;
-
+          // Scroll to the top left if only if necessary
           if (this._items.scrollTop || this._items.scrollLeft)
             this._scrollBoxObject.scrollTo(0, 0);
 
           // Need to iterate over all our existing entries at a minimum, to make
           // sure they're either updated or cleared out. We might also have to
           // add extra items.
+          let controller = this.input.controller;
           let matchCount = this._matchCount;
-          let children = this._items.childNodes;
+          let items = this._items;
+          let children = items.childNodes;
           let iterCount = Math.max(children.length, matchCount);
           for (let i = 0; i < iterCount; ++i) {
-            let label = children.item(i);
-            if (!label) {
-              // create a new entry
-              label = document.createElementNS(this._XULNS, "label");
-              this._items.appendChild(label);
-            }
-
-            label._index = i;
-            label._empty = false;
-
-            // Use the third item as a "no results" entry if needed.
-            // Kind of gross, but using a separate element makes layout more
-            // complicated outside of the scrollbox, and makes iteration over
-            // childNodes more complicated inside the scrollbox (also
-            // getElementsByTagName seems to be broken for the anonymous labels
-            // hardcoded above in the <content>).
-            if (i == 3 && matchCount == 0) {
-              label.setAttribute("value", this.getAttribute("noresults"));
-              label.setAttribute("class", "autocomplete-item noresults");
-
-              continue;
+            let item = children.item(i);
+
+            // Create an item if needed
+            if (!item) {
+              item = document.createElementNS(this._XULNS, "xul:autocompleteresult");
+              items.appendChild(item);
             }
+            item._index = i;
 
             // Check whether there's an entry to fill
             if (i > matchCount - 1) {
               // Just clear out the old item
-              label.setAttribute("class", "");
-              label.setAttribute("value", "");
-              label._empty = true;
+              item.setAttribute("value", "");
+              item._empty = true;
 
               continue;
             }
+            item._empty = false;
+
+            // Assign the values
+            let type = controller.getStyleAt(i);
+            let title = controller.getCommentAt(i);
+            let tags = '';
+            
+            if (type == "tag")
+              [, title, tags] = title.match(/^(.+) \u2013 (.+)$/);
+            item.setAttribute("tags", tags);
 
             let url = controller.getValueAt(i);
-            let title = controller.getCommentAt(i);
-            let type = controller.getStyleAt(i);
-            let image = controller.getImageAt(i);
+            item.setAttribute("value", this._truncate((title || url)) + '\n' +  this._truncate(url));
 
-            let typeClass = "ac-result-type-" + type;
-            label.setAttribute("class", "autocomplete-item " + typeClass);
-            label.setAttribute("value", title || url);
+            let isBookmark = ((type == "bookmark") || (type == "tag"));
+            item.setAttribute("favorite", isBookmark);
+            item.setAttribute("src", controller.getImageAt(i));
           }
+
+          this._updateNoResultsItem(matchCount);
+        ]]></body>
+      </method>
+
+      <method name="_updateNoResultsItem">
+        <parameter name="isResults" />
+        <body><![CDATA[
+          let noResultsItem = this._items.childNodes.item(1);
+          if (isResults) {
+            noResultsItem.className = "";
+          }
+          else {
+            noResultsItem.className = "noresults";
+            noResultsItem.setAttribute("value", "]]>&noResults.label;<![CDATA[");
+          }
+        ]]></body>
+      </method>
+
+      <method name="_truncate">
+        <parameter name="aString" />
+        <body><![CDATA[
+          // Simulate a crop by replacing the end part of the string by an 
+          // ellipsis and a few remaining characters from the end of the string
+          //XXX done in hard for now but should be done depending on the width
+          let max = 60;
+          if (aString.length > max) {
+            return aString.substr(0, max-20) + '...' + aString.slice(-10);
+          }
+          return aString;
         ]]></body>
       </method>
 
@@ -262,9 +295,9 @@
         <parameter name="aAddStyle"/>
         <body><![CDATA[
           if (aAddStyle)
-            aItem.className = "autocomplete-item-selected";
+            aItem.className = "autocompleteresult-selected";
           else
-            aItem.className = "autocomplete-item";
+            aItem.className = "";
         ]]></body>
       </method>
     </implementation>
@@ -272,11 +305,11 @@
     <handlers>
       <handler event="click">
         <![CDATA[
-          let originalTarget = event.originalTarget;
+          let target = event.originalTarget.parentNode;
           if (event.button == 0 &&
-              originalTarget.localName == "label" &&
-              originalTarget._empty != true) {
-            this._selectedIndex = originalTarget._index;
+              target.localName == "autocompleteresult" &&
+              target._empty != true) {
+            this._selectedIndex = target._index;
             this.input.controller.handleEnter(true);
           } else
             this.closePopup();

mobile/chrome/content/browser.css

@@ -56,6 +56,14 @@ notification[type="geo"] {
   -moz-binding: url("chrome://browser/content/bindings.xml#popup_autocomplete");
 }
 
+.autocomplete-items > autocompleteresult {
+  -moz-binding: url("chrome://browser/content/bindings.xml#popup_autocomplete_result");
+}
+
+autocompleteresult[value=""] {
+  visibility: hidden;
+}
+
 placeitem {
   -moz-binding: url("chrome://browser/content/bindings.xml#place-item");
 }

mobile/themes/hildon/browser.css

@@ -424,33 +424,70 @@ placeitem .button-text {
   background-color: white;
 }
 
-.autocomplete-item,
-.autocomplete-item-selected {
+autocompleteresult {
   padding: 0.5mm 0.2mm;
   border-bottom: 0.1mm solid rgb(207,207,207);
   min-height: 14.4mm; /* row size */
-  -moz-box-pack: center;
 }
 
-.autocomplete-item-selected {
+.autocompleteresult-selected {
   color: white;
   background-color: grey;
 }
 
-.autocomplete-item.noresults {
+.autocomplete-item-desc {
+  background-color: white;
+  color: blue;
+  white-space: pre;
+  font-size: 10pt !important;
+}
+
+.autocompleteresult-selected .autocomplete-item-desc {
+  background-color: grey;
+  color: blue;
+}
+
+.autocomplete-item-desc:first-line {
+  color: black;
+  font-size: 15.75pt !important;
+}
+
+.autocomplete-item-tags {
+  font-size: 11.75pt !important;
+  font-weight: lighter;
+}
+
+.autocomplete-item-tags[favorite=true]:after {
+  content: url(images/star-24.png);
+  margin: 1.6mm 2mm 0mm 1.5mm;
+}
+
+.autocompleteresult-selected .autocomplete-item-tags[favorite=true]:after {
+  background-color: grey;
+  color: yellow;
+}
+
+.autocomplete-item-image {
+  max-height: 16px;
+  max-width: 16px;
+  margin: 1.6mm 1.5mm 0mm 2mm;
+}
+
+/* no results */
+autocompleteresult.noresults {
   text-align: center;
   font-style: italic;
-  color: grey;
-  background-color: white;
   border-bottom: none;
 }
 
-.ac-result-type-bookmark {
-  list-style-image: url("chrome://browser/skin/images/star-30.png");
+autocompleteresult.noresults > .autocomplete-item-desc:first-line {
+  background-color: white;
+  color: grey;
 }
 
-.ac-result-type-tag {
-  list-style-image: url("chrome://browser/skin/images/tag-30.png");
+autocompleteresult.noresults > .autocomplete-item-image,
+autocompleteresult.noresults > .autocomplete-item-tags {
+  visibility: hidden;
 }
 
 /* Left sidebar (tabs)  ---------------------------------------------------- */

mobile/themes/hildon/jar.mn

@@ -20,6 +20,7 @@ classic.jar:
   images/stop-30.png                   (images/stop-30.png)
   images/reload-30.png                 (images/reload-30.png)
   images/go-30.png                     (images/go-30.png)
+  images/star-24.png                   (images/star-24.png)
   images/addons-default-64.png         (images/addons-default-64.png)
   images/addons-active-64.png          (images/addons-active-64.png)
   images/back-default-64.png           (images/back-default-64.png)
@@ -58,8 +59,6 @@ classic.jar:
   images/lock-40.png                   (images/lock-40.png)
   images/unlock-40.png                 (images/unlock-40.png)
   images/close-30.png                  (images/close-30.png)
-  images/tag-30.png                    (images/tag-30.png)
-  images/star-30.png                   (images/star-30.png)
   images/check-30.png                  (images/check-30.png)
   images/fullscreen-close-40.png       (images/fullscreen-close-40.png)
   images/fullscreen-up-40.png          (images/fullscreen-up-40.png)

mobile/themes/wince/browser-high.css

@@ -258,14 +258,6 @@
   list-style-image: url("chrome://browser/skin/images/navigation-magnifier-30.png");
 }
 
-.ac-result-type-bookmark {
-  list-style-image: url("chrome://browser/skin/images/star-30.png");
-}
-
-.ac-result-type-tag {
-  list-style-image: url("chrome://browser/skin/images/tag-30.png");
-}
-
 .documenttab-close {
   width: 28px;
   height: 30px;
@@ -321,4 +313,4 @@ findbar .findbar-closebutton {
   list-style-image: url("chrome://browser/skin/images/check-30.png");
 }
 
-}
+}

mobile/themes/wince/browser-low.css

@@ -257,14 +257,6 @@
   list-style-image: url("chrome://browser/skin/images/navigation-magnifier-16.png");
 }
 
-.ac-result-type-bookmark {
-  list-style-image: url("chrome://browser/skin/images/star-24.png");
-}
-
-.ac-result-type-tag {
-  list-style-image: url("chrome://browser/skin/images/tag-24.png");
-}
-
 /* Left sidebar (tabs)  ---------------------------------------------------- */
 .documenttab-close {
   width: 16px;
@@ -323,4 +315,4 @@ findbar .findbar-closebutton {
   list-style-image: url("chrome://browser/skin/images/check-24.png");
 }
 
-}
+}

mobile/themes/wince/browser.css

@@ -214,27 +214,73 @@ placeitem .button-text {
   background-color: white;
 }
 
-.autocomplete-item,
-.autocomplete-item-selected {
+autocompleteresult {
   padding: 0.25mm 0.1mm;
   border-bottom: 0.05mm solid rgb(207,207,207);
   min-height: 7.2mm; /* row size */
-  -moz-box-pack: center;
 }
 
-.autocomplete-item-selected {
+.autocompleteresult-selected {
   color: white;
   background-color: grey;
 }
 
-.autocomplete-item.noresults {
+.autocomplete-item-desc {
+  background-color: white;
+  color: blue;
+  white-space: pre;
+  font-size: 10pt !important;
+}
+
+.autocompleteresult-selected .autocomplete-item-desc {
+  background-color: grey;
+  color: blue;
+}
+
+.autocomplete-item-desc:first-line {
+  color: black;
+  font-size: 15.75pt !important;
+}
+
+.autocomplete-item-tags {
+  font-size: 11.75pt !important;
+  font-weight: lighter;
+}
+
+.autocomplete-item-tags[favorite=true]:after {
+  content: url(images/star-24.png);
+  margin: 1.6mm 2mm 0mm 1.5mm;
+}
+
+.autocompleteresult-selected .autocomplete-item-tags[favorite=true]:after {
+  background-color: grey;
+  color: yellow;
+}
+
+.autocomplete-item-image {
+  max-height: 16px;
+  max-width: 16px;
+  margin: 1.6mm 1.5mm 0mm 2mm;
+}
+
+/* no results */
+autocompleteresult.noresults {
   text-align: center;
   font-style: italic;
-  color: grey;
   background-color: white;
   border-bottom: none;
 }
 
+autocompleteresult.noresults > .autocomplete-item-desc:first-line {
+  background-color: white;
+  color: grey;
+}
+
+autocompleteresult.noresults > .autocomplete-item-image,
+autocompleteresult.noresults > .autocomplete-item-tags {
+  visibility: hidden;
+}
+
 /* Left sidebar (tabs)  ---------------------------------------------------- */
 #tabs-container {
   -moz-padding-start: 0.6mm; /* allow the thumbnails to get close to the edge */

mobile/themes/wince/jar.mn

@@ -60,8 +60,6 @@ classic.jar:
   images/lock-40.png                   (images/lock-40.png)
   images/unlock-40.png                 (images/unlock-40.png)
   images/close-30.png                  (images/close-30.png)
-  images/tag-30.png                    (images/tag-30.png)
-  images/star-30.png                   (images/star-30.png)
   images/check-30.png                  (images/check-30.png)
   images/fullscreen-close-40.png       (images/fullscreen-close-40.png)
   images/fullscreen-up-40.png          (images/fullscreen-up-40.png)
@@ -110,10 +108,9 @@ classic.jar:
   images/stop-16.png                   (images/stop-16.png)
   images/check-24.png                  (images/check-24.png)
   images/favicon-default-24.png        (images/favicon-default-24.png)
+  images/star-24.png                   (images/star-24.png)
   images/folder-24.png                 (images/folder-24.png)
   images/lock-24.png                   (images/lock-24.png)
-  images/star-24.png                   (images/star-24.png)
-  images/tag-24.png                    (images/tag-24.png)
   images/unlock-24.png                 (images/unlock-24.png)
   images/fullscreen-close-24.png       (images/fullscreen-close-24.png)
   images/fullscreen-up-24.png          (images/fullscreen-up-24.png)