Bug 559978 - Vertically center icons in places lists (bookmarks, awesomebar) [r=mfinkle]
--- 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;
}