mirror of
https://github.com/mozilla/gecko-dev.git
synced 2025-03-09 04:25:38 +00:00
Bug 517411: Improve bookmark folder row appearance [r=mark.finkle]
This commit is contained in:
Vivien Nicolas
parent
ba6f9f7adb
commit
f17d818db0
@ -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;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user