Bug 1133662 - [ReadingList] Show something useful in the sidebar when the Reading List is empty. r=florian a=readinglist
authorJustin Dolske <dolske@mozilla.com>
Wed, 18 Mar 2015 19:23:22 -0700
changeset 248437 e967dc8f6f3e96f27e38d5e7980783ac92d36dcf
parent 248436 57a7834350dd4d46c62fbf85d7ebdde70115d788
child 248438 4510e7024404394e75fcbe4074245bca73dc859e
push id7837
push userjwein@mozilla.com
push dateFri, 27 Mar 2015 00:27:16 +0000
treeherdermozilla-aurora@cb0db44ce60e [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersflorian, readinglist
bugs1133662
milestone38.0a2
Bug 1133662 - [ReadingList] Show something useful in the sidebar when the Reading List is empty. r=florian a=readinglist
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;