Bug 517411: Improve bookmark folder row appearance [r=mark.finkle]

This commit is contained in:
Vivien Nicolas 2009-10-09 14:06:51 -04:00
Родитель ba6f9f7adb
Коммит f17d818db0
5 изменённых файлов: 129 добавлений и 203 удалений

Просмотреть файл

@ -457,8 +457,7 @@
if (this.hasAttribute("uri") && this.type != "folder") {
this._uri = this._ioService.newURI(this.getAttribute("uri"), null, null);
let icon = document.getAnonymousElementByAttribute(this, "anonid", "favicon");
icon.src = this._faviconService.getFaviconImageForPage(this._uri).spec;
this.setAttribute("src", this._faviconService.getFaviconImageForPage(this._uri).spec);
}
]]>
</body>
@ -592,28 +591,25 @@
</binding>
<binding id="place-item" extends="chrome://browser/content/bindings.xml#place-base">
<content align="center">
<xul:hbox flex="1">
<xul:image anonid="favicon" class="bookmark-item-image"/>
<content orient="vertical">
<xul:hbox anonid="bookmark-item" class="bookmark-item-label" align="center" flex="1" xbl:inherits="tags" mousethrough="always">
<xul:image xbl:inherits="src"/>
<xul:label flex="1" crop="center" xbl:inherits="value=title"/>
</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:hbox anonid="description-box" flex="1" align="center">
<xul:vbox flex="1">
<xul:label class="bookmark-item-name" xbl:inherits="value=title"/>
<xul:label class="bookmark-item-uri" xbl:inherits="value=uri" crop="center"/>
</xul:vbox>
<xul:label class="bookmark-item-tags" xbl:inherits="value=tags"/>
</xul:hbox>
<xul:vbox flex="1" anonid="bookmark-edit-textboxes" class="bookmark-edit-textboxes" hidden="true">
<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;"/>
</xul:vbox>
<xul:hbox anonid="bookmark-manage-controls" align="center" class="bookmark-manage-controls" hidden="true">
<xul:button anonid="close-button" class="bookmark-close-button"
label="&editBookmarkRemove.label;" oncommand="document.getBindingParent(this).remove()"/>
<xul:hbox class="bookmark-controls" align="center">
<xul:button anonid="close-button" label="&editBookmarkRemove.label;"
oncommand="document.getBindingParent(this).remove()"/>
<xul:spacer flex="1"/>
<xul:button anonid="done-button" label="&editBookmarkDone.label;"
oncommand="document.getBindingParent(this).stopEditing(true)"/>
@ -626,10 +622,10 @@
<method name="updateFields">
<body>
<![CDATA[
document.getAnonymousElementByAttribute(this, "anonid", "description-box").hidden = this._isEditing;
document.getAnonymousElementByAttribute(this, "anonid", "bookmark-item").hidden = this._isEditing;
document.getAnonymousElementByAttribute(this, "anonid", "bookmark-url").hidden = this._isEditing;
document.getAnonymousElementByAttribute(this, "anonid", "bookmark-edit-textboxes").hidden = !this._isEditing;
document.getAnonymousElementByAttribute(this, "anonid", "bookmark-manage-controls").hidden = !this._isEditing;
document.getAnonymousElementByAttribute(this, "anonid", "bookmark-manage").hidden = !this._isEditing;
]]>
</body>
</method>
@ -641,12 +637,13 @@
<method name="updateFields">
<body>
<![CDATA[
document.getAnonymousElementByAttribute(this, "anonid", "description-box").hidden = this._isEditing;
document.getAnonymousElementByAttribute(this, "anonid", "bookmark-item").hidden = this._isEditing;
document.getAnonymousElementByAttribute(this, "anonid", "bookmark-url").hidden = this._isEditing;
this._uriField.hidden = true;
this._tagsField.hidden = true;
document.getAnonymousElementByAttribute(this, "anonid", "bookmark-edit-textboxes").hidden = !this._isEditing;
document.getAnonymousElementByAttribute(this, "anonid", "bookmark-manage-controls").hidden = !this._isEditing;
document.getAnonymousElementByAttribute(this, "anonid", "bookmark-manage").hidden = !this._isEditing;
]]>
</body>
</method>

Просмотреть файл

@ -428,7 +428,7 @@ toolbarbutton.page-button {
}
}
/* URL List and autocomplete navigation popup ------------------------------ */
/* bookmarks navigation popup ------------------------------ */
#tool-bookmarks-close {
list-style-image: url("chrome://browser/skin/images/task-back-40.png");
}
@ -438,21 +438,16 @@ toolbarbutton.page-button {
}
#bookmarklist-header {
color: rgb(255,255,255);
-moz-box-align: center;
padding: 0.5mm 1mm; /* half core spacing & core spacing */
}
#bookmark-items {
-moz-appearance: none !important;
background-color: rgb(255,255,255);
padding: 0;
}
.place-list-parents {
background-color: rgb(207,207,207);
}
/* folders navigation row */
.place-list-parents placelabel {
visibility: collapse;
}
@ -461,97 +456,57 @@ toolbarbutton.page-button {
visibility: visible;
}
.place-list-children {
-moz-appearance: none;
border: none !important;
margin: 0.25mm;
padding: 0;
}
.bookmark-folder, .bookmark-item {
padding: 0.2mm 0.5mm;
border-bottom: 0.1mm solid rgb(207,207,207);
/* be consistent with the size of placeitem */
placelabel {
-moz-box-align: center;
padding-right: 8mm;
background: rgb(207,207,207) url(images/arrowup-16.png) no-repeat 98% 50%;
color: #000;
min-height: 6mm; /* row size */
}
.bookmark-manage-controls {
padding-top: 0.5mm;
padding-bottom: 0.5mm;
}
.bookmark-edit-textboxes {
padding-top: 0.5mm;
}
.bookmark-item-image {
height: 24px;
width: 24px;
max-height: 24px;
max-width: 24px;
margin: 0.8mm 2mm 2.5mm 1mm;
}
placeitem[selected] .bookmark-item-image {
margin-top: 2mm;
}
.bookmark-item-name {
font-size: 2.4mm !important;
}
.bookmark-item-uri {
font-size: 1.8mm !important;
color: blue;
}
.bookmark-item-tags {
color: black;
margin-right: 1.1mm;
font-size: 1.8mm !important;
font-weight: lighter;
}
placelabel.bookmark-folder {
border-bottom: 0.1mm solid rgb(255,255,255);
background: url(chrome://browser/skin/images/arrowup-16.png) no-repeat 98% 50%;
}
/* folders have a fixed image */
placeitem[type="folder"] .bookmark-item-image {
list-style-image: url("chrome://browser/skin/images/folder-30.png");
}
/* folder bookmarks row */
placeitem[type="folder"] {
background: url(chrome://browser/skin/images/arrowright-16.png) no-repeat 98% 50%;
-moz-box-pack: center;
padding-right: 4mm;
background: url(images/arrowright-16.png) no-repeat 98% 50%;
}
/* hide the unuseful fields for folder */
placeitem[type="folder"] .bookmark-item-uri,
placeitem[type="folder"] .bookmark-item-tags {
visibility: hidden;
}
/* control the manage controls */
placelist[ui="manage"] placeitem[type="folder"] {
background-image: none;
}
placeitem[ui="manage"] .bookmark-close-button,
placeitem[ui="manage"] .bookmark-item-image {
placeitem[type="folder"] > .bookmark-item-label > image,
placeitem[type="folder"] > .bookmark-manage > image {
list-style-image: url(images/folder-30.png);
}
placeitem[type="folder"] .bookmark-item-url {
display: none;
}
/* bookmark manage controls */
placeitem > .bookmark-manage > image {
width: 24px;
height: 24px;
max-width: 24px;
max-height: 24px;
margin: 0.5mm 2.5mm 0mm 1mm;
}
placeitem > .bookmark-manage .bookmark-controls {
padding-top: 1.1mm;
}
/* bookmark popup for star button */
placeitem[ui="manage"] {
border-bottom: 0;
}
placeitem[ui="manage"] > .bookmark-manage > image {
visibility: collapse;
}
/* be consistent with the size of placeitem */
placelabel {
min-height: 6mm; /* row size */
-moz-box-align: center;
}
/* use a smaller font size for the manage buttons */
placeitem .button-text {
font-size: 2.4mm !important;
}
.close-button {
-moz-appearance: none;
border: none;
@ -588,7 +543,8 @@ placeitem .button-text {
background-color: white;
}
autocompleteresult {
autocompleteresult,
placeitem {
color: black;
background-color: white;
padding: 0.2mm 0.5mm;
@ -601,7 +557,8 @@ autocompleteresult {
background-color: grey !important;
}
.autocomplete-item-label {
.autocomplete-item-label,
.bookmark-item-label {
margin: 0;
padding: 0;
font-size: 2.4mm !important;
@ -609,13 +566,15 @@ autocompleteresult {
margin-right: 1mm;
}
.autocomplete-item-label > image {
.autocomplete-item-label > image,
.bookmark-item-label > image {
width: 24px;
height: 24px;
margin: 0mm 2.5mm 0mm 1mm;
}
.autocomplete-item-label > label {
.autocomplete-item-label > label,
.bookmark-item-label > label {
-moz-margin-start: 1px;
}
@ -624,7 +583,8 @@ autocompleteresult {
background: url(images/star-24.png) no-repeat 100%;
}
.autocomplete-item-label[favorite="true"]:after {
.autocomplete-item-label:not([tags=""]):after,
.bookmark-item-label:not([tags=""]):after {
float: right;
content: attr(tags);
font-size: 1.8mm !important;
@ -633,7 +593,8 @@ autocompleteresult {
margin-left: 1mm;
}
.autocomplete-item-url {
.autocomplete-item-url,
.bookmark-item-url {
margin: 0;
padding: 0;
color: blue;

Просмотреть файл

@ -44,7 +44,7 @@
min-height: 0 !important;
min-width: 0 !important;
margin-top: -40px; /* keep pixels */
list-style-image: url("chrome://browser/skin/images/fullscreen-close-40.png");
list-style-image: url(images/fullscreen-close-40.png);
}
#toolbar-main[fullscreen="true"] #tool-app-close {
@ -241,12 +241,13 @@
min-height: 0 !important;
min-width: 0 !important;
margin-top: -40px; /* keep pixels */
list-style-image: url("chrome://browser/skin/images/fullscreen-up-40.png");
list-style-image: url(images/fullscreen-up-40.png);
}
/* folders have a fixed image */
placeitem[type="folder"] .bookmark-item-image {
list-style-image: url("chrome://browser/skin/images/folder-30.png");
placeitem[type="folder"] .bookmark-item-label > image,
placeitem[type="folder"] > .bookmark-manage > image {
list-style-image: url(images/folder-30.png);
}
.close-button {

Просмотреть файл

@ -44,7 +44,7 @@
min-height: 0 !important;
min-width: 0 !important;
margin-top: -18px; /* keep pixels */
list-style-image: url("chrome://browser/skin/images/fullscreen-close-24.png");
list-style-image: url(images/fullscreen-close-24.png);
}
#toolbar-main[fullscreen="true"] #tool-app-close {
@ -240,12 +240,13 @@
min-height: 0 !important;
min-width: 0 !important;
margin-top: -18px; /* keep pixels */
list-style-image: url("chrome://browser/skin/images/fullscreen-up-24.png");
list-style-image: url(images/fullscreen-up-24.png);
}
/* folders have a fixed image */
placeitem[type="folder"] .bookmark-item-image {
list-style-image: url("chrome://browser/skin/images/folder-24.png");
placeitem[type="folder"] .bookmark-item-label > image,
placeitem[type="folder"] > .bookmark-manage > image {
list-style-image: url(images/folder-24.png);
}
.close-button {

Просмотреть файл

@ -218,21 +218,16 @@ toolbarbutton.page-button {
}
#bookmarklist-header {
color: rgb(255,255,255);
-moz-box-align: center;
padding: 1.1mm; /* core spacing */
}
#bookmark-items {
-moz-appearance: none !important;
background-color: rgb(255,255,255);
padding: 0;
}
.place-list-parents {
background-color: rgb(207,207,207);
}
/* folders navigation row */
.place-list-parents placelabel {
visibility: collapse;
}
@ -241,92 +236,57 @@ toolbarbutton.page-button {
visibility: visible;
}
.place-list-children {
-moz-appearance: none;
border: none !important;
margin: 0.25mm;
padding: 0;
}
.bookmark-folder, .bookmark-item {
padding: 0.25mm 0.55mm;
border-bottom: 0.05mm solid rgb(207,207,207);
/* be consistent with the size of placeitem */
placelabel {
-moz-box-align: center;
padding-right: 6mm;
background: rgb(207,207,207) url(images/arrowup-16.png) no-repeat 98% 50%;
color: #000;
min-height: 7.2mm; /* row size */
}
.bookmark-manage-controls {
padding-top: 0.55mm;
padding-bottom: 0.55mm;
}
.bookmark-edit-textboxes {
padding-top: 0.55mm;
}
.bookmark-item-image {
height: 24px;
width: 24px;
max-height: 24px;
max-width: 24px;
margin: 1.6mm 1.5mm 0mm 2mm;
}
placeitem[selected] .bookmark-item-image {
margin-top: 3mm;
}
.bookmark-item-name {
font-size: 9pt !important;
}
.bookmark-item-uri {
font-size: 8pt !important;
color: blue;
}
.bookmark-item-tags {
color: black;
margin-right: 1.1mm;
font-size: 8pt !important;
font-weight: lighter;
}
placelabel.bookmark-folder {
border-bottom: 0.05mm solid rgb(255,255,255);
background: url(chrome://browser/skin/images/arrowup-16.png) no-repeat 98% 50%;
}
/* folder bookmarks row */
placeitem[type="folder"] {
background: url(chrome://browser/skin/images/arrowright-16.png) no-repeat 98% 50%;
-moz-box-pack: center;
padding-right: 4mm;
background: url("images/arrowright-16.png") no-repeat 98% 50%;
}
/* hide the unuseful fields for folder */
placeitem[type="folder"] .bookmark-item-uri,
placeitem[type="folder"] .bookmark-item-tags {
visibility: hidden;
}
/* control the manage controls */
placelist[ui="manage"] placeitem[type="folder"] {
background-image: none;
}
placeitem[ui="manage"] .bookmark-close-button,
placeitem[ui="manage"] .bookmark-item-image {
visibility: collapse;
placeitem[type="folder"] .bookmark-item-url {
display: none;
}
/* be consistent with the size of placeitem */
placelabel {
min-height: 7.2mm; /* row size */
-moz-box-align: center;
/* bookmark manage controls */
placeitem > .bookmark-manage > image {
width: 24px;
height: 24px;
max-width: 24px;
max-height: 24px;
margin: 1.5mm 2.5mm 0mm 2mm;
}
/* use a smaller font size for the manage buttons */
placeitem .button-text {
+placeitem > .bookmark-manage .button-text {
font-size: 9pt !important;
}
placeitem > .bookmark-manage .bookmark-controls {
padding-top: 0.55mm;
}
/* bookmark popup for star button */
placeitem[ui="manage"] {
border-bottom: 0;
}
placeitem[ui="manage"] > .bookmark-manage > image {
visibility: collapse;
}
.searchengine {
-moz-box-orient: horizontal;
min-width: 7.2mm;
@ -346,7 +306,8 @@ placeitem .button-text {
background-color: white;
}
autocompleteresult {
autocompleteresult,
placeitem {
color: black;
background-color: white;
padding: 1.25mm 0.5mm;
@ -359,7 +320,8 @@ autocompleteresult {
background-color: grey !important;
}
.autocomplete-item-label {
.autocomplete-item-label,
.bookmark-item-label {
margin: 0;
padding: 0;
font-size: 9pt !important;
@ -367,13 +329,15 @@ autocompleteresult {
margin-right: 2mm;
}
.autocomplete-item-label > image {
.autocomplete-item-label > image,
.bookmark-item-label > image {
width: 24px;
height: 24px;
margin: 0mm 2.5mm 0mm 2mm;
}
.autocomplete-item-label > label {
.autocomplete-item-label > label,
.bookmark-item-label > label {
-moz-margin-start: 1px;
}
@ -382,7 +346,8 @@ autocompleteresult {
background: url(images/star-24.png) no-repeat 100%;
}
.autocomplete-item-label[favorite="true"]:after {
.autocomplete-item-label:not([tags=""]):after,
.bookmark-item-label:not([tags=""]):after {
float: right;
content: attr(tags);
font-size: 8pt !important;
@ -391,7 +356,8 @@ autocompleteresult {
margin-left: 2mm;
}
.autocomplete-item-url {
.autocomplete-item-url,
.bookmark-item-url {
margin: 0;
padding: 0;
color: blue;