Bug 424286 - Style the places organizer, bookmarks sidebar, and bookmarks menu with icons. r=dietrich.

browser/components/places/content/treeView.js

@@ -918,6 +918,10 @@ PlacesTreeView.prototype = {
       }
       else if (nodeType == Ci.nsINavHistoryResultNode.RESULT_TYPE_SEPARATOR)
         properties.push(this._getAtomFor("separator"));
+      else if (itemId != -1) { // bookmark nodes
+        if (PlacesUtils.nodeIsLivemarkContainer(node.parent))
+          properties.push(this._getAtomFor("livemarkItem"));
+      }
 
       this._visibleElements[aRow].properties = properties;
     }
@@ -1114,18 +1118,10 @@ PlacesTreeView.prototype = {
       return "";
 
     var node = this._visibleElements[aRow].node;
-
-    // Containers may or may not have favicons. If not, we will return
-    // nothing as the image, and the style rule should pick up the
-    // default. Separator rows never have icons.
-    if (PlacesUtils.nodeIsSeparator(node) ||
-        (PlacesUtils.nodeIsContainer(node) && !node.icon))
-      return "";
-
-    // For consistency, we always return a favicon for non-containers,
-    // even if it is just the default one.
-    var icon = node.icon || PlacesUtils.favicons.defaultFavicon;
-    return icon ? icon.spec : "";
+    var icon = node.icon;
+    if (icon)
+      return icon.spec;
+    return "";
   },
 
   getProgressMode: function(aRow, aColumn) { },

browser/themes/gnomestripe/browser/browser.css

@@ -423,6 +423,10 @@ menuitem[command="Browser:ShowAllBookmarks"] {
   -moz-image-region: rect(0px 48px 16px 32px);
 }
 
+#bookmarksToolbarFolderMenu {
+  list-style-image: url("chrome://browser/skin/places/bookmarksToolbar.png");  
+}
+
 #menu_openDownloads {
   list-style-image: url("chrome://browser/skin/Toolbar-small.png");
   -moz-image-region: rect(0px 16px 16px 0px);

browser/themes/gnomestripe/browser/places/organizer.css

@@ -55,21 +55,6 @@
   height: 12px;
 }
 
-/* organize button */
-#organizeButton {
-  list-style-image: url("moz-icon://stock/gtk-properties?size=button");
-}
-
-/* view button */
-#viewMenu {
-  list-style-image: url("moz-icon://stock/gtk-sort-ascending?size=button");
-}
-
-/* maintenance button */
-#maintenanceButton {
-  list-style-image: url("moz-icon://stock/gtk-revert-to-saved?size=button");
-}
-
 /* Root View */
 #placesView {
   background-color: Window;

browser/themes/gnomestripe/browser/places/places.css

@@ -23,9 +23,15 @@ treechildren::-moz-tree-image(title) {
   margin: 0px 2px;
   width: 16px;
   height: 16px;
+  list-style-image: url("chrome://mozapps/skin/places/defaultFavicon.png");
+}
+
+treechildren::-moz-tree-image(title, livemarkItem) {
+  list-style-image: url("chrome://browser/skin/places/livemark-item.png");
 }
 
 treechildren::-moz-tree-image(title, separator) {
+  list-style-image: none;
   width: 0;
   height: 0;
 }
@@ -44,12 +50,32 @@ treechildren::-moz-tree-image(title, container, tagContainer) {
   -moz-image-region: auto;
 }
 
+treechildren::-moz-tree-image(container, OrganizerQuery_AllBookmarks) {
+  list-style-image: url("chrome://browser/skin/Toolbar-small.png");
+  -moz-image-region: rect(0px 48px 16px 32px);
+}
+
+treechildren::-moz-tree-image(container, OrganizerQuery_BookmarksToolbar) {
+  list-style-image: url("chrome://browser/skin/places/bookmarksToolbar.png");
+  -moz-image-region: auto;
+}
+
+treechildren::-moz-tree-image(container, OrganizerQuery_BookmarksMenu) {
+  list-style-image: url("chrome://browser/skin/places/bookmarksMenu.png");
+  -moz-image-region: auto;
+}
+
 /* query-nodes should be styled even if they're not expandable */
 treechildren::-moz-tree-image(title, query) {
   list-style-image: url("chrome://browser/skin/places/query.png");
   -moz-image-region: auto;
 }
 
+treechildren::-moz-tree-image(title, query, OrganizerQuery_History) {
+  list-style-image: url("chrome://browser/skin/Toolbar-small.png");
+  -moz-image-region: rect(0px 32px 16px 16px);
+}
+
 /* We want some queries to look like ordinary folders. This must come
    after the (title, query) selector, or it would get overridden. */
 treechildren::-moz-tree-image(title, query, folder) {

browser/themes/pinstripe/browser/browser.css

@@ -247,6 +247,10 @@ toolbarpaletteitem[place="toolbar"] .places-toolbar-items {
   height: 16px;
 }
 
+#bookmarksToolbarFolderMenu {
+  list-style-image: url("chrome://browser/skin/places/bookmarksToolbar.png");  
+}
+
 /* ----- PRIMARY TOOLBAR BUTTONS ----- */	
 
 .toolbarbutton-1,

browser/themes/pinstripe/browser/places/places.css

@@ -99,12 +99,17 @@ page > hbox {
 /* Trees */
 
 treechildren::-moz-tree-image(title) {
+  list-style-image: url("chrome://mozapps/skin/places/defaultFavicon.png");
   padding-right: 2px;
   margin: 0px 2px;
   width: 16px;
   height: 16px;
 }
 
+treechildren::-moz-tree-image(title, livemarkItem) {
+  list-style-image: url("chrome://browser/skin/places/livemarkItem.png");
+}
+
 treechildren::-moz-tree-image(title, container),
 treechildren::-moz-tree-image(title, open) {
   list-style-image: url("chrome://global/skin/tree/folder.png");
@@ -130,11 +135,23 @@ treechildren::-moz-tree-image(container, tagContainer) {
   list-style-image: url("chrome://mozapps/skin/places/tagContainerIcon.png");
 }
 
+treechildren::-moz-tree-image(container, OrganizerQuery_BookmarksToolbar) {
+  list-style-image: url("chrome://browser/skin/places/bookmarksToolbar.png");
+}
+
+treechildren::-moz-tree-image(container, OrganizerQuery_BookmarksMenu) {
+  list-style-image: url("chrome://browser/skin/places/bookmarksMenu.png");
+}
+
 /* query-nodes should be styled even if they're not expandable */
 treechildren::-moz-tree-image(query) {
   list-style-image: url("chrome://browser/skin/places/query.png");
 }
 
+treechildren::-moz-tree-image(query, OrganizerQuery_History) {
+  list-style-image: url("chrome://browser/skin/places/history.png");
+}
+
 /* We want some queries to look like ordinary folders. This must come
    after the (title, query) selector, or it would get overridden. */
 treechildren::-moz-tree-image(title, query, folder),

browser/themes/winstripe/browser/browser.css

@@ -1888,3 +1888,8 @@ toolbarbutton.bookmark-item[dragover="true"][open="true"] {
   list-style-image: url("chrome://browser/skin/Toolbar-small.png");
   -moz-image-region: rect(0px 96px 16px 80px);
 }
+
+/* Bookmarks Toolbar menu-item */
+#bookmarksToolbarFolderMenu {
+  list-style-image: url("chrome://browser/skin/places/bookmarksToolbar.png");  
+}

browser/themes/winstripe/browser/jar.mn

@@ -56,6 +56,7 @@ classic.jar:
         skin/classic/browser/places/collapse.png                     (places/collapse.png)
         skin/classic/browser/places/expand.png                       (places/expand.png)
         skin/classic/browser/places/history.png                      (places/history.png)
+        skin/classic/browser/places/allBookmarks.png                 (places/allBookmarks.png)
         skin/classic/browser/places/importAndBackup.png              (places/importAndBackup.png)
         skin/classic/browser/places/minus.png                        (places/minus.png)
         skin/classic/browser/places/plus.png                         (places/plus.png)
@@ -139,6 +140,7 @@ classic.jar:
         skin/classic/aero/browser/places/collapse.png                (places/collapse-aero.png)
         skin/classic/aero/browser/places/expand.png                  (places/expand-aero.png)
         skin/classic/aero/browser/places/history.png                 (places/history-aero.png)
+        skin/classic/aero/browser/places/allBookmarks.png            (places/allBookmarks-aero.png)
         skin/classic/aero/browser/places/importAndBackup.png         (places/importAndBackup-aero.png)
         skin/classic/aero/browser/places/minus.png                   (places/minus-aero.png)
         skin/classic/aero/browser/places/plus.png                    (places/plus-aero.png)

browser/themes/winstripe/browser/places/organizer.css

@@ -50,17 +50,17 @@
 
 /* organize button */
 #organizeButton {
-  list-style-image: url("chrome://browser/skin/wrench.png");
+  list-style-image: url("chrome://browser/skin/places/organize.png");
 }
 
 /* view button */
 #viewMenu {
-  list-style-image: url("chrome://browser/skin/wrench.png");
+  list-style-image: url("chrome://browser/skin/places/view.png");
 }
 
 /* maintenance button */
 #maintenanceButton {
-  list-style-image: url("chrome://browser/skin/wrench.png");
+  list-style-image: url("chrome://browser/skin/places/importAndBackup.png");
 }
 
 /* Root View */

browser/themes/winstripe/browser/places/places.css

@@ -22,13 +22,19 @@
 
 /* Trees */
 treechildren::-moz-tree-image(title) {
+  list-style-image: url("chrome://mozapps/skin/places/defaultFavicon.png");
   padding-right: 2px;
   margin: 0px 2px;
   width: 16px;
   height: 16px;
 }
 
+treechildren::-moz-tree-image(title, livemarkItem) {
+  list-style-image: url("chrome://browser/skin/livemark-item.png");
+}
+
 treechildren::-moz-tree-image(title, separator) {
+  list-style-image: none;
   width: 0;
   height: 0;
 }
@@ -52,12 +58,31 @@ treechildren::-moz-tree-image(title, container, tagContainer) {
   -moz-image-region: auto;
 }
 
+treechildren::-moz-tree-image(container, OrganizerQuery_AllBookmarks) {
+  list-style-image: url("chrome://browser/skin/places/allBookmarks.png");
+  -moz-image-region: auto;
+}
+
+treechildren::-moz-tree-image(container, OrganizerQuery_BookmarksToolbar) {
+  list-style-image: url("chrome://browser/skin/places/bookmarksToolbar.png");
+  -moz-image-region: auto;
+}
+
+treechildren::-moz-tree-image(container, OrganizerQuery_BookmarksMenu) {
+  list-style-image: url("chrome://browser/skin/places/bookmarksMenu.png");
+  -moz-image-region: auto;
+}
+
 /* query-nodes should be styled even if they're not expandable */
 treechildren::-moz-tree-image(title, query) {
   list-style-image: url("chrome://browser/skin/places/query.png");
   -moz-image-region: auto;
 }
 
+treechildren::-moz-tree-image(title, query, OrganizerQuery_History) {
+  list-style-image: url("chrome://browser/skin/places/history.png");
+}
+
 /* We want some queries to look like ordinary folders. This must come
    after the (title, query) selector, or it would get overridden. */
 treechildren::-moz-tree-image(title, query, folder) {