Bug 514462: page titles are styled as URLs in location bar autocomplete (awesomebar styling is broken), r=gavin
authorVivien Nicolas <21@vingtetun.org>
Mon, 21 Sep 2009 17:09:47 -0400
changeset 65585 672a86922fac2a2c583f6388a1ac365b230a21b0
parent 65584 6ca9357850929e6f9f5ee9a37e29c42fcbbd2b51
child 65586 6bba496c872480e2049f9db2af37febe7e7954b5
push id1
push userroot
push dateTue, 26 Apr 2011 22:38:44 +0000
treeherdermozilla-beta@bfdb6e623a36 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersgavin
bugs514462
Bug 514462: page titles are styled as URLs in location bar autocomplete (awesomebar styling is broken), r=gavin
mobile/chrome/content/bindings.xml
mobile/themes/hildon/browser.css
mobile/themes/wince/browser.css
--- a/mobile/chrome/content/bindings.xml
+++ b/mobile/chrome/content/bindings.xml
@@ -35,20 +35,22 @@
             CommandUpdater.doCommand("cmd_bookmarks");
           }
         ]]>
       </handler>
     </handlers>
   </binding>
 
   <binding id="popup_autocomplete_result">
-    <content align="center">
-      <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 orient="vertical">
+      <xul:hbox class="autocomplete-item-label" align="center" xbl:inherits="tags, favorite" mousethrough="always">
+        <xul:image xbl:inherits="src"/>
+        <xul:label flex="1" crop="center" xbl:inherits="value"/>
+      </xul:hbox>
+      <xul:label class="autocomplete-item-url" xbl:inherits="value=url" crop="center" mousethrough="always"/>
     </content>
   </binding>
 
   <binding id="popup_autocomplete">
     <content>
       <xul:vbox class="autocomplete-box" flex="1">
         <!-- 12 child items, to match browser.urlbar.maxRichResults -->
         <xul:scrollbox orient="vertical"
@@ -216,33 +218,35 @@
             }
 
             item._index = i;
 
             // Check whether there's an entry to fill
             if (i > matchCount - 1) {
               // Just clear out the old item
               item.setAttribute("value", "");
+              item.removeAttribute("favorite");
               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);
-            item.setAttribute("value", this._truncate((title || url)) + '\n' +  this._truncate(url));
+            item.setAttribute("value", title || url);
+            item.setAttribute("url", url);
 
             let isBookmark = ((type == "bookmark") || (type == "tag"));
             item.setAttribute("favorite", isBookmark);
             item.setAttribute("src", controller.getImageAt(i));
           }
 
           // Show the "no results" or "all bookmarks" entries as needed
           this._updateNoResultsItem(matchCount);
@@ -267,30 +271,16 @@
         ]]></body>
       </method>
 
       <field name="_allBookmarksItem">document.getAnonymousElementByAttribute(this, "anonid", "allbookmarks");</field>
       
       <property name="allBookmarksItemSelected" readonly="true"
                 onget="return this._selectedItem == this._allBookmarksItem;"/>
 
-      <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>
-
       <method name="selectBy">
         <parameter name="aReverse"/>
         <parameter name="aPage"/>
         <body><![CDATA[
           let newIndex;
           let lastIndex = this._matchCount - 1;
 
           if (this._selectedIndex == -1)
@@ -347,29 +337,25 @@
         ]]></body>
       </method>
     </implementation>
 
     <handlers>
       <handler event="click" button="0">
         <![CDATA[
           let target = event.originalTarget;
-          if (target.localName != "autocompleteresult")
-            target = target.parentNode;
-          if (target.localName != "autocompleteresult")
-            return;
-
           if (target == this._allBookmarksItem) {
             // XXX bug 516575
             // select the item, since closing the popup can be slow...
             // we should stop doing this when that isn't the case
             this.selectedIndex = 0;
             this.close();
             CommandUpdater.doCommand("cmd_bookmarks");
-          } else if (!target._empty) {
+          }
+          else if (target.localName == "autocompleteresult" && !target._empty) {
             let offset = this._allBookmarksItem._hidden ? 0 : 1;
             // XXX bug 516575
             // same as above - we can just set _selectedIndex directly to avoid
             // styling the selected item when closing the popup is fast enough
             this.selectedIndex = target._index + offset;
             this.input.controller.handleEnter(true);
           }
         ]]>
--- a/mobile/themes/hildon/browser.css
+++ b/mobile/themes/hildon/browser.css
@@ -570,96 +570,103 @@ placeitem .button-text {
   display: none;
 }
 
 .autocomplete-items {
   background-color: white;
 }
 
 autocompleteresult {
-  padding: 0.5mm 0.2mm;
+  color: black;
+  background-color: white;
+  padding: 1.5mm 1mm;
   border-bottom: 0.1mm solid rgb(207,207,207);
   min-height: 14.4mm; /* row size */
 }
 
 .autocompleteresult-selected {
   color: white;
   background-color: grey !important;
 }
 
-.autocomplete-item-desc {
-  color: blue;
-  white-space: pre;
-  font-size: 10pt !important;
+.autocomplete-item-label {
+  margin: 0;
+  padding: 0;
+  font-size: 15.75pt !important;
+  font-weight: normal;
+  margin-right: 2mm;
 }
 
-.autocomplete-item-desc:first-line {
-  color: black;
-  font-size: 15.75pt !important;
+.autocomplete-item-label > image {
+  width: 24px;
+  height: 24px;
+  margin: 0mm 5mm 0mm 2mm;
 }
 
-.autocomplete-item-tags {
-  color: black;
+.autocomplete-item-label > label {
+  -moz-margin-start: 1px;
+}
+
+.autocomplete-item-label[favorite="true"] {
+  padding-right: 30px;
+  background: url(images/star-24.png) no-repeat 100%;
+}
+
+.autocomplete-item-label[favorite="true"]:after {
+  float: right;
+  content: attr(tags);
   font-size: 11.75pt !important;
   font-weight: lighter;
+  padding-top: 1mm;
+  margin-left: 2mm;
 }
 
-.autocomplete-item-tags[favorite=true]:after {
-  float: right;
-  position: relative;
-  top: -3pt;
-  content: url(images/star-24.png);
-  margin: 0mm 2mm 0mm 1.5mm;
-}
-
-.autocomplete-item-image {
-  height: 24px;
-  width: 24px;
-  margin: 1.6mm 4mm 5mm 2mm;
+.autocomplete-item-url {
+  margin: 0;
+  padding: 0;
+  color: blue;
+  font-size: 10pt !important;
+  margin-left: 14mm;
+  margin-right: 2mm;
 }
 
 /* special "no results" and "all bookmarks" items */
-autocompleteresult.noresults > .autocomplete-item-desc {
-  text-align: center;
-}
-
-autocompleteresult.noresults > .autocomplete-item-desc:first-line {
-  color: grey;
-}
-
-autocompleteresult.noresults > .autocomplete-item-image,
-autocompleteresult.noresults > .autocomplete-item-tags {
-  visibility: hidden;
-}
-
 autocompleteresult.noresults {
   font-style: italic;
   border-bottom: none;
 }
 
-autocompleteresult.allbookmarks {
-  color: black;
-  background-color: #E9E9E9;
+autocompleteresult.noresults > .autocomplete-item-label {
+  text-align: center;
+  color: grey;
 }
 
-autocompleteresult.allbookmarks > .autocomplete-item-desc {
-  color: black;
+autocompleteresult.noresults > .autocomplete-item-label > image,
+autocompleteresult.noresults > .autocomplete-item-url {
+  visibility: hidden;
+}
+
+autocompleteresult.allbookmarks {
+  -moz-box-pack: center;
+  background: #E9E9E9 url("images/arrowright-16.png") no-repeat 98% 50%;
+}
+
+autocompleteresult.allbookmarks > .autocomplete-item-label {
   font-size: 15.75pt !important;
 }
 
-autocompleteresult.allbookmarks > .autocomplete-item-image {
+autocompleteresult.allbookmarks > .autocomplete-item-label > image {
   width: 44px;
   height: 30px;
   margin: 0 3mm;
   list-style-image: url(images/bookmarks-30.png);
 }
 
-autocompleteresult.allbookmarks > .autocomplete-item-tags:after {
-  content: url(images/arrowright-16.png);
-  -moz-margin-end: 4mm;
+autocompleteresult.allbookmarks > .autocomplete-item-url {
+  display: none;
 }
 
 /* Left sidebar (tabs)  ---------------------------------------------------- */
 #tabs-container {
   -moz-padding-start: 1.2mm; /* allow the thumbnails to get close to the edge */
   -moz-padding-end: 2.2mm; /* core spacing */
   padding-bottom: 2.2mm; /* core spacing */
   border-right: 3px solid #262629; /* keep pixels */
--- a/mobile/themes/wince/browser.css
+++ b/mobile/themes/wince/browser.css
@@ -337,94 +337,97 @@ placeitem .button-text {
   display: none;
 }
 
 .autocomplete-items {
   background-color: white;
 }
 
 autocompleteresult {
-  padding: 0.25mm 0.1mm;
+  color: black;
+  background-color: white;
+  padding: 1.25mm 0.5mm;
   border-bottom: 0.05mm solid rgb(207,207,207);
   min-height: 9.2mm; /* row size */
 }
 
 .autocompleteresult-selected {
   color: white;
   background-color: grey !important;
 }
 
-.autocomplete-item-desc {
-  color: blue;
-  white-space: pre;
-  font-size: 8pt !important;
+.autocomplete-item-label {
+  margin: 0;
+  padding: 0;
+  font-size: 9pt !important;
+  font-weight: normal;
+  margin-right: 2mm;
 }
 
-.autocomplete-item-desc:first-line {
-  color: black;
-  font-size: 9pt !important;
+.autocomplete-item-label > image {
+  width: 24px;
+  height: 24px;
+  margin: 0mm 2.5mm 0mm 2mm;
 }
 
-.autocomplete-item-tags {
-  color: black;
+.autocomplete-item-label > label {
+  -moz-margin-start: 1px;
+}
+
+.autocomplete-item-label[favorite="true"] {
+  padding-right: 30px;
+  background: url(images/star-24.png) no-repeat 100%;
+}
+
+.autocomplete-item-label[favorite="true"]:after {
+  float: right;
+  content: attr(tags);
   font-size: 8pt !important;
   font-weight: lighter;
+  padding-top: 1mm;
+  margin-left: 2mm;
 }
 
-.autocomplete-item-tags[favorite=true]:after {
-  float: right;
-  position: relative;
-  top: -6pt;
-  content: url(images/star-24.png);
-  margin: 0mm 2mm 0mm 1.5mm;
-}
-
-.autocomplete-item-image {
-  height: 24px;
-  width: 24px;
-  margin: 1.6mm 1.5mm 0mm 2mm;
+.autocomplete-item-url {
+  margin: 0;
+  padding: 0;
+  color: blue;
+  font-size: 8pt !important;
+  margin-left: 11.5mm;
+  margin-right: 2mm;
 }
 
 /* special "no results" and "all bookmarks" items */
-autocompleteresult.noresults > .autocomplete-item-desc {
-  text-align: center;
-}
-
-autocompleteresult.noresults > .autocomplete-item-desc:first-line {
-  color: grey;
-}
-
-autocompleteresult.noresults > .autocomplete-item-image,
-autocompleteresult.noresults > .autocomplete-item-tags {
-  visibility: hidden;
-}
-
 autocompleteresult.noresults {
   font-style: italic;
   border-bottom: none;
 }
 
-autocompleteresult.allbookmarks {
-  color: black;
-  background-color: #E9E9E9;
+autocompleteresult.noresults > .autocomplete-item-label {
+  text-align: center;
+  color: grey;
 }
 
-autocompleteresult.allbookmarks > .autocomplete-item-desc {
-  color: black;
-  font-size: 9pt !important;
+autocompleteresult.noresults > .autocomplete-item-label > image,
+autocompleteresult.noresults > .autocomplete-item-url {
+  visibility: hidden;
 }
 
-autocompleteresult.allbookmarks > .autocomplete-item-image {
+autocompleteresult.allbookmarks {
+  -moz-box-pack: center;
+  background: #E9E9E9 url("images/arrowright-16.png") no-repeat 98% 50%;
+}
+
+autocompleteresult.allbookmarks > .autocomplete-item-label {
+  font-size: 9pt !important;
   margin: 0 1.5mm;
 }
 
-autocompleteresult.allbookmarks > .autocomplete-item-tags:after {
-  /* this image works fine for both -high and -low */
-  content: url(images/arrowright-16.png);
-  -moz-margin-end: 1.1mm;
+autocompleteresult.allbookmarks > .autocomplete-item-url {
+  display: none;
 }
 
 /* Left sidebar (tabs)  ---------------------------------------------------- */
 #tabs-container {
   -moz-padding-start: 0.6mm; /* allow the thumbnails to get close to the edge */
   -moz-padding-end: 1.1mm; /* core spacing */
   padding-bottom: 1.1mm; /* core spacing */
   border-right: 3px solid #262629; /* keep pixels */