[MD Bookmarks] Add a message to empty bookmark lists.

chrome/browser/resources/md_bookmarks/list.html

Index: chrome/browser/resources/md_bookmarks/list.html
diff --git a/chrome/browser/resources/md_bookmarks/list.html b/chrome/browser/resources/md_bookmarks/list.html
index 9098d7cb553719e6f22c8bcddbe3a98f8ed1fd26..f5fc8e29972240baa9289b84d6ada5b557047c75 100644
--- a/chrome/browser/resources/md_bookmarks/list.html
+++ b/chrome/browser/resources/md_bookmarks/list.html
@@ -20,6 +20,16 @@
         min-width: var(--card-min-width);
         padding: 8px 0;
       }
+
+      .centered-message {
+        align-items: center;
+        color: #b4b4b4;

[tsergeant, 2017/01/05 06:10:33]

Use #6e6e6e instead (this is what History uses now, it's much easier to read).

[angelayang, 2017/01/09 00:23:17]

Done.

+        display: flex;
+        font-size: 14px;
+        font-weight: 500;
+        height: 100%;
+        justify-content: center;
+      }
     </style>
     <dialog is="cr-action-menu" id="dropdown">
       <button class="dropdown-item" on-tap="onEditTap_">
@@ -32,12 +42,16 @@
          $i18n{menuDelete}
       </button>
     </dialog>
-    <div id="bookmarks-card">
-      <!-- TODO(angelayang): handle empty folders -->
+    <div id="bookmarks-card"
+        hidden$="[[isListEmpty_(selectedNode.children.length)]]">
       <template is="dom-repeat" items="[[selectedNode.children]]" as="item">
         <bookmarks-item item="[[item]]"></bookmarks-item>
       </template>
     </div>
+    <div class="centered-message"
+        hidden$="[[!isListEmpty_(selectedNode.children.length)]]">
+      $i18n{emptyList}
+    </div>
   </template>
   <script src="chrome://bookmarks/list.js"></script>
 </dom-module>