Bug 1147479 - Add a transition for adding items to the reading list. ui-r=mmaslaney, r=Unfocused, a=sledru
authorBlake Winton <bwinton@latte.ca>
Mon, 30 Mar 2015 14:16:05 -0400
changeset 258290 088cbfb10079
parent 258289 b42a539dcc29
child 258291 2bc3aac3094b
push id4637
push userryanvm@gmail.com
push date2015-04-06 19:04 +0000
treeherdermozilla-beta@882dd82e8af0 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersmmaslaney, Unfocused, sledru
bugs1147479
milestone38.0
Bug 1147479 - Add a transition for adding items to the reading list. ui-r=mmaslaney, r=Unfocused, a=sledru
browser/components/readinglist/sidebar.js
browser/components/readinglist/sidebar.xhtml
--- a/browser/components/readinglist/sidebar.js
+++ b/browser/components/readinglist/sidebar.js
@@ -98,16 +98,21 @@ let RLSidebar = {
     if (append)
       this.list.appendChild(itemNode);
     else
       this.list.insertBefore(itemNode, this.list.firstChild);
     this.itemNodesById.set(item.id, itemNode);
     this.itemsById.set(item.id, item);
 
     this.emptyListInfo.hidden = true;
+    window.requestAnimationFrame(() => {
+      window.requestAnimationFrame(() => {
+        itemNode.classList.add('visible');
+      });
+    });
   },
 
   /**
    * Handle an item being deleted from the ReadingList.
    * @param {ReadingListItem} item - Item that was deleted.
    */
   onItemDeleted(item) {
     log.trace(`onItemDeleted: ${item}`);
--- a/browser/components/readinglist/sidebar.xhtml
+++ b/browser/components/readinglist/sidebar.xhtml
@@ -11,17 +11,17 @@
   <head>
     <script src="chrome://browser/content/readinglist/sidebar.js" type="application/javascript;version=1.8"></script>
     <link rel="stylesheet" type="text/css" media="all" href="chrome://browser/skin/readinglist/sidebar.css"/>
     <title>&readingList.label;</title>
   </head>
 
   <body role="application">
     <template id="item-template">
-      <div class="item visible" role="option" tabindex="-1">
+      <div class="item" role="option" tabindex="-1">
         <div class="item-thumb-container"></div>
         <div class="item-summary-container">
           <div class="item-title-lines">
             <p class="item-title"/>
             <button class="remove-button" title="&readingList.sidebar.delete.tooltip;"/>
           </div>
           <div class="item-domain"></div>
         </div>