Bug 1147444 - Add a transition when deleting an item from the Reading List. ui-r=mmaslaney, r=Unfocused, a=sledru
authorBlake Winton <bwinton@latte.ca>
Mon, 30 Mar 2015 14:07:36 -0400
changeset 258289 b42a539dcc29
parent 258288 05f716c8608d
child 258290 088cbfb10079
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
bugs1147444
milestone38.0
Bug 1147444 - Add a transition when deleting an item from the Reading List. ui-r=mmaslaney, r=Unfocused, a=sledru
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
@@ -108,23 +108,30 @@ let RLSidebar = {
   /**
    * 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();
+    itemNode.addEventListener('transitionend', (event) => {
+      if (event.propertyName == "max-height") {
+        this.itemNodesById.delete(item.id);
+        this.itemsById.delete(item.id);
+        itemNode.remove();
 
-    this.emptyListInfo.hidden = (this.numItems > 0);
+        // TODO: ensureListItems doesn't yet cope with needing to add one item.
+        //this.ensureListItems();
+
+        this.emptyListInfo.hidden = (this.numItems > 0);
+      }
+    }, false);
+
+    itemNode.classList.remove('visible');
   },
 
   /**
    * 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}`);
--- 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" role="option" tabindex="-1">
+      <div class="item visible" 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>
--- a/browser/themes/shared/readinglist/sidebar.inc.css
+++ b/browser/themes/shared/readinglist/sidebar.inc.css
@@ -26,16 +26,19 @@ body {
   overflow-x: auto;
 }
 
 .item {
   display: flex;
   flex-flow: row;
   cursor: pointer;
   padding: 6px;
+  opacity: 0;
+  max-height: 0;
+  transition: opacity 150ms ease-in-out, max-height 150ms ease-in-out 150ms;
 }
 
 .item.active {
   background: #FEFEFE;
 }
 
 .item.selected {
   background: #FDFDFD;
@@ -100,8 +103,13 @@ body {
   padding: 0;
   width: 16px;
   height: 16px;
   background-size: contain;
   background-color: transparent;
   border-width: 0;
 }
 
+.item.visible {
+  opacity: 1;
+  max-height: 80px;
+  transition: max-height 250ms ease-in-out, opacity 250ms ease-in-out 250ms;
+}