Bug 1133662 - [ReadingList] Show something useful in the sidebar when the Reading List is empty. r=florian
authorJustin Dolske <dolske@mozilla.com>
Wed, 18 Mar 2015 19:23:22 -0700
changeset 234353 bb305274f26238e667a18333449126b80292d1be
parent 234352 e2116c4bcba640e3b5877bd9e5291a26502eb128
child 234354 f9617ec35258ca8fcb57f8c6f1bb3872ef0d1c63
child 234415 cbd0efcd976c6fa677637d565d948296684441de
push id11840
push userjdolske@mozilla.com
push dateThu, 19 Mar 2015 02:23:29 +0000
treeherderfx-team@bb305274f262 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersflorian
bugs1133662
milestone39.0a1
Bug 1133662 - [ReadingList] Show something useful in the sidebar when the Reading List is empty. r=florian
browser/components/readinglist/sidebar.js
browser/components/readinglist/sidebar.xhtml
browser/themes/shared/readinglist/sidebar.inc.css
--- a/browser/components/readinglist/sidebar.js
+++ b/browser/components/readinglist/sidebar.js
@@ -49,16 +49,17 @@ let RLSidebar = {
    * Initialize the sidebar UI.
    */
   init() {
     log.debug("Initializing");
 
     addEventListener("unload", () => this.uninit());
 
     this.list = document.getElementById("list");
+    this.emptyListInfo = document.getElementById("emptyListInfo");
     this.itemTemplate = document.getElementById("item-template");
 
     this.list.addEventListener("click", event => this.onListClick(event));
     this.list.addEventListener("mousemove", event => this.onListMouseMove(event));
     this.list.addEventListener("keydown", event => this.onListKeyDown(event), true);
 
     this.listPromise = this.ensureListItems();
     ReadingList.addListener(this);
@@ -86,31 +87,35 @@ let RLSidebar = {
   onItemAdded(item) {
     log.trace(`onItemAdded: ${item}`);
 
     let itemNode = document.importNode(this.itemTemplate.content, true).firstElementChild;
     this.updateItem(item, itemNode);
     this.list.appendChild(itemNode);
     this.itemNodesById.set(item.id, itemNode);
     this.itemsById.set(item.id, item);
+
+    this.emptyListInfo.hidden = true;
   },
 
   /**
    * Handle an item being deleted from the ReadingList.
    * @param {ReadingListItem} item - Item that was deleted.
    */
   onItemDeleted(item) {
     log.trace(`onItemDeleted: ${item}`);
 
     let itemNode = this.itemNodesById.get(item.id);
     itemNode.remove();
     this.itemNodesById.delete(item.id);
     this.itemsById.delete(item.id);
     // TODO: ensureListItems doesn't yet cope with needing to add one item.
     //this.ensureListItems();
+
+    this.emptyListInfo.hidden = (this.numItems > 0);
   },
 
   /**
    * Handle an item in the ReadingList having any of its properties changed.
    * @param {ReadingListItem} item - Item that was updated.
    */
   onItemUpdated(item) {
     log.trace(`onItemUpdated: ${item}`);
@@ -143,16 +148,17 @@ let RLSidebar = {
     yield ReadingList.forEachItem(item => {
       // TODO: Should be batch inserting via DocumentFragment
       try {
         this.onItemAdded(item);
       } catch (e) {
         log.warn("Error adding item", e);
       }
     });
+    this.emptyListInfo.hidden = (this.numItems > 0);
   }),
 
   /**
    * Get the number of items currently displayed in the list.
    * @type {number}
    */
   get numItems() {
     return this.list.childElementCount;
--- a/browser/components/readinglist/sidebar.xhtml
+++ b/browser/components/readinglist/sidebar.xhtml
@@ -23,11 +23,12 @@
             <p class="item-title"/>
             <button class="remove-button" title="&readingList.sidebar.delete.tooltip;"/>
           </div>
           <div class="item-domain"></div>
         </div>
       </div>
     </template>
 
+    <div id="emptyListInfo" hidden="true">&readingList.sidebar.emptyText;</div>
     <div id="list" role="listbox" tabindex="1"></div>
   </body>
 </html>
--- a/browser/themes/shared/readinglist/sidebar.inc.css
+++ b/browser/themes/shared/readinglist/sidebar.inc.css
@@ -11,16 +11,22 @@ body {
   margin: 0;
   font: message-box;
   background: #F8F7F8;
   color: #333333;
   -moz-user-select: none;
   overflow: hidden;
 }
 
+#emptyListInfo {
+  cursor: default;
+  padding: 3em 1em;
+  text-align: center;
+}
+
 #list {
   height: 100%;
   overflow-x: auto;
 }
 
 .item {
   display: flex;
   flex-flow: row;