More lazily render the bookmarks list

Could still be improved.

css/converse.css

@@ -2175,7 +2175,7 @@
     color: #818479;
     margin-bottom: 0.5em; }
   #conversejs #controlbox .bookmarks-list .bookmarks li {
-    padding: 0.3em 1em; }
+    padding: 0.1em 1em; }
     #conversejs #controlbox .bookmarks-list .bookmarks li .open-room {
       display: inline-block;
       overflow: hidden;

sass/_bookmarks.scss

 #conversejs {
     #controlbox {
         .bookmarks-list {
-            margin-top: 2em;
             .bookmarks-toggle {
                 display: block;
                 font-weight: bold;
@@ -10,7 +9,7 @@
             }
             .bookmarks {
                 li {
-                    padding: 0.3em 1em;
+                    padding: 0.1em 1em;
                     .open-room {
                         display: inline-block;
                         overflow: hidden;

sass/_controlbox.scss

@@ -108,6 +108,8 @@
         }
 
         #chatrooms {
+            padding-top: 2em;
+
             form.add-chatroom {
                 input[type=button],
                 input[type=submit],

spec/bookmarks.js

@@ -385,6 +385,8 @@
         describe("The rooms panel", function () {
             beforeEach(function () {
                 test_utils.openRoomsPanel();
+                converse.bookmarks.reset();
+                converse.chatboxviews.get('controlbox').$('#chatrooms ul.bookmarks').html('');
             });
 
             it("shows a list of bookmarks", function () {

src/converse-bookmarks.js

@@ -312,12 +312,6 @@
                         'label_bookmarks': __('Bookmarked Rooms')
                     }));
                     this.$bookmarks = this.$('.bookmarks');
-                    var controlboxview = converse.chatboxviews.get('controlbox');
-                    if (_.isUndefined(controlboxview)) {
-                        return this.$el;
-                    }
-                    controlboxview.$('#chatrooms .bookmarks-list').remove();
-                    this.$el.prependTo(controlboxview.$('#chatrooms'));
                     return this.$el;
                 },
 
@@ -332,18 +326,20 @@
                 },
 
                 onBookmarkAdded: function (item) {
-                    if (_.isUndefined(this.$bookmarks)) {
-                        this.render();
-                    }
-                    this.$bookmarks.append($(
-                        converse.templates.bookmark({
+                    // TODO: Try to come up with a way to avoid DOM reflows.
+                    var $bookmark = $(converse.templates.bookmark({
                             'name': item.get('name'),
                             'jid': item.get('jid'),
                             'open_title': __('Click to open this room'),
                             'info_title': __('Show more information on this room'),
                             'info_remove': __('Remove this bookmark')
-                        })
-                    ));
+                        }));
+                    if (_.isUndefined(this.$bookmarks)) {
+                        this.render();
+                        var controlboxview = converse.chatboxviews.get('controlbox');
+                        this.$el.prependTo(controlboxview.$('#chatrooms'));
+                    }
+                    this.$bookmarks.append($bookmark);
                 },
 
                 toggleBookmarksList: function (ev) {
@@ -365,9 +361,6 @@
                     {'model': converse.bookmarks}
                 );
                 converse.bookmarks.fetchBookmarks();
-                // TODO: think of performance here... we probably only want to
-                // show the bookmarks after they have been fetched
-                converse.bookmarksview.render();
             };
             converse.on('connected', converse.initBookmarks);
             converse.on('reconnected', converse.initBookmarks);