Bug 559978 - Vertically center icons in places lists (bookmarks, awesomebar) [r=mfinkle]
authorMatt Brubeck <mbrubeck@mozilla.com>
Tue, 20 Apr 2010 00:01:40 -0400
changeset 66158 c7a5f361e695516ab819480477218cc1d82fd13f
parent 66157 5418203d86043830d431192b0859205bf85e0218
child 66159 a0d404a7b5250b7464c8f178eafde6d945c82274
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)
reviewersmfinkle
bugs559978
Bug 559978 - Vertically center icons in places lists (bookmarks, awesomebar) [r=mfinkle]
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
@@ -42,21 +42,23 @@
           this.popup.scrollToTop();
         ]]>
       </handler>
     </handlers>
   </binding>
 
   <binding id="popup_autocomplete_result">
     <content orient="vertical">
-      <xul:hbox class="autocomplete-item-label" align="center" xbl:inherits="tags, favorite" mousethrough="always">
+      <xul:hbox class="autocomplete-item-label" align="top" xbl:inherits="tags, favorite" mousethrough="always">
         <xul:image xbl:inherits="src"/>
-        <xul:label flex="1" crop="center" xbl:inherits="value"/>
+        <xul:vbox flex="1">
+          <xul:label crop="center" xbl:inherits="value"/>
+          <xul:label class="autocomplete-item-url" xbl:inherits="value=url" crop="center" mousethrough="always"/>
+        </xul:vbox>
       </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">
         <!-- 24 child items, to match browser.urlbar.maxRichResults -->
         <xul:scrollbox orient="vertical"
@@ -595,21 +597,23 @@
           ]]>
         </body>
       </method>
     </implementation>
   </binding>
 
   <binding id="place-item" extends="chrome://browser/content/bindings.xml#place-base">
     <content orient="vertical">
-      <xul:hbox anonid="bookmark-item" class="bookmark-item-label" align="center" flex="1" xbl:inherits="tags" mousethrough="always">
+      <xul:hbox anonid="bookmark-item" class="bookmark-item-label" align="top" flex="1" xbl:inherits="tags" mousethrough="always">
         <xul:image xbl:inherits="src"/>
-        <xul:label flex="1" crop="center" xbl:inherits="value=title"/>
+        <xul:vbox flex="1">
+          <xul:label crop="center" xbl:inherits="value=title"/>
+          <xul:label anonid="bookmark-url" class="bookmark-item-url" xbl:inherits="value=uri" crop="center" mousethrough="always"/>
+        </xul:vbox>
       </xul:hbox>
-      <xul:label anonid="bookmark-url" class="bookmark-item-url" xbl:inherits="value=uri" crop="center" mousethrough="always"/>
 
       <xul:hbox anonid="bookmark-manage" class="bookmark-manage" hidden="true" flex="1">
         <xul:image xbl:inherits="src"/>
         <xul:vbox flex="1">
           <xul:vbox flex="1">
             <xul:textbox anonid="name" xbl:inherits="value=title"/>
             <xul:textbox anonid="uri" xbl:inherits="value=uri"/>
             <xul:textbox anonid="tags" xbl:inherits="value=tags" emptytext="&editBookmarkTags.label;"/>
--- a/mobile/themes/hildon/browser.css
+++ b/mobile/themes/hildon/browser.css
@@ -503,16 +503,17 @@ placeitem[type="folder"] {
 
 placelist[ui="manage"] placeitem[type="folder"] {
   background-image: none;
 }
 
 placeitem[type="folder"] > .bookmark-item-label > image,
 placeitem[type="folder"] > .bookmark-manage > image {
   list-style-image: url(images/folder-32.png);
+  margin-top: 0;
 }
 
 placeitem[type="folder"] .bookmark-item-url {
   display: none;
 }
 
 /* bookmark manage controls */
 placeitem > .bookmark-manage .bookmark-controls {
@@ -604,50 +605,49 @@ placelist placeitem:active:not([selected
 }
 
 .autocomplete-item-label > image,
 .bookmark-item-label > image,
 placeitem > .bookmark-manage > image {
   width: 32px;
   height: 32px;
   max-height: 32px;
-  margin: 0 16px 0 8px;
+  /* margin-top = (1 - title's line-height) * title's font-size */
+  margin: 5px 16px 0 8px;
 }
 
 placeitem[src=""] .bookmark-item-label > image {
   list-style-image: url(chrome://mozapps/skin/places/defaultFavicon.png);
 }
 
-.autocomplete-item-label > label,
-.bookmark-item-label > label {
+.autocomplete-item-label > vbox > label,
+.bookmark-item-label > vbox > label {
   -moz-margin-start: 1px;
 }
 
 .autocomplete-item-label[favorite="true"] {
   padding-right: 30px;
-  background: url(images/star-24.png) no-repeat 100%;
+  background: url(images/star-24.png) no-repeat 100% 2px;
 }
 
 .autocomplete-item-label:not([tags=""]):after,
 .bookmark-item-label:not([tags=""]):after {
   float: right;
   content: attr(tags);
   font-size: 18px !important;
   font-weight: lighter;
   padding-top: 4px;
   margin-left: 8px;
 }
 
 .autocomplete-item-url,
 .bookmark-item-url {
   color: blue;
   font-size: 18px !important;
-  margin-left: 24px;
   margin-right: 24px;
-  padding-left: 34px;
 }
 
 /* special "no results" and "all bookmarks" items */
 autocompleteresult.noresults {
   font-style: italic;
   border-bottom: none;
 }
 
--- a/mobile/themes/wince/browser.css
+++ b/mobile/themes/wince/browser.css
@@ -355,27 +355,32 @@ placelist placeitem:active:not([selected
   padding: 0;
   font-size: 9pt !important;
   font-weight: normal;
   margin-right: 2mm;
 }
 
 .autocomplete-item-label > image,
 .bookmark-item-label > image {
-  margin: 0mm 2.5mm 0mm 2mm;
+  /* margin-top = (1 - title's line-height) * title's font-size */
+  margin: 0.4mm 2.5mm 0mm 2mm;
 }
 
-.autocomplete-item-label > label,
-.bookmark-item-label > label {
+placeitem[type="folder"] > .bookmark-item-label > image {
+  margin-top: 0;
+}
+
+.autocomplete-item-label > vbox > label,
+.bookmark-item-label > vbox > label {
   -moz-margin-start: 1px;
 }
 
 .autocomplete-item-label[favorite="true"] {
   padding-right: 30px;
-  background: url(images/star-24.png) no-repeat 100%;
+  background: url(images/star-24.png) no-repeat 100% 0.2mm;
 }
 
 .autocomplete-item-label:not([tags=""]):after,
 .bookmark-item-label:not([tags=""]):after {
   float: right;
   content: attr(tags);
   font-size: 8pt !important;
   font-weight: lighter;
@@ -384,19 +389,17 @@ placelist placeitem:active:not([selected
 }
 
 .autocomplete-item-url,
 .bookmark-item-url {
   margin: 0;
   padding: 0;
   color: blue;
   font-size: 8pt !important;
-  margin-right: 2mm;
   margin-left: inherit;
-  padding-left: 4.5mm; /* left padding is equal to left+right margin of the autocomplete-item-label > image */
 }
 
 /* special "no results" and "all bookmarks" items */
 autocompleteresult.noresults {
   font-style: italic;
   border-bottom: none;
 }