Bug 800996 - Add clear-selection action for start tiles, button transitions. r=mbrubeck

browser/metro/base/content/TopSites.js

@@ -136,13 +136,8 @@ function TopSitesView(aGrid, aMaxSites, aUseThumbnails) {
   this._set.controller = this;
   this._topSitesMax = aMaxSites;
   this._useThumbs = aUseThumbnails;
-
-  // handle selectionchange DOM events from the grid/tile group
-  this._set.addEventListener("context-action", this, false);
-
   // clean up state when the appbar closes
   window.addEventListener('MozAppbarDismissing', this, false);
-
   let history = Cc["@mozilla.org/browser/nav-history-service;1"].
                 getService(Ci.nsINavHistoryService);
   history.addObserver(this, false);
@@ -230,13 +225,8 @@ TopSitesView.prototype = {
       },0);
     }
   },
-
   handleEvent: function(aEvent) {
     switch (aEvent.type){
-      case "context-action":
-        this.doActionOnSelectedTiles(aEvent.action, aEvent);
-        aEvent.stopPropagation(); // event is handled, no need to let it bubble further
-        break;
       case "MozAppbarDismissing":
         // clean up when the context appbar is dismissed - we don't remember selections
         this._lastSelectedSites = null;

browser/metro/base/content/Util.js

@@ -134,10 +134,37 @@ let Util = {
     aElement.style.border = "2px solid red";
   },
 
+  transitionElementVisibility: function(aNodes, aVisible) {
+    // accept single node or a collection of nodes
+    aNodes = aNodes.length ? aNodes : [aNodes];
+    let defd = Promise.defer();
+    let pending = 0;
+    Array.forEach(aNodes, function(aNode) {
+      if (aVisible) {
+        aNode.hidden = false;
+        aNode.removeAttribute("fade"); // trigger transition to full opacity
+      } else {
+        aNode.setAttribute("fade", true); // trigger transition to 0 opacity
+      }
+      aNode.addEventListener("transitionend", function onTransitionEnd(aEvent){
+        aNode.removeEventListener("transitionend", onTransitionEnd);
+        if (!aVisible) {
+          aNode.hidden = true;
+        }
+        pending--;
+        if (!pending){
+          defd.resolve(true);
+        }
+      }, false);
+      pending++;
+    });
+    return defd.promise;
+  },
+
   getHrefForElement: function getHrefForElement(target) {
     let link = null;
     while (target) {
-      if (target instanceof Ci.nsIDOMHTMLAnchorElement || 
+      if (target instanceof Ci.nsIDOMHTMLAnchorElement ||
           target instanceof Ci.nsIDOMHTMLAreaElement ||
           target instanceof Ci.nsIDOMHTMLLinkElement) {
           if (target.hasAttribute("href"))
@@ -441,7 +468,7 @@ Util.Timeout.prototype = {
     return this;
   },
 
-  // Return true if we are waiting for a callback. 
+  // Return true if we are waiting for a callback.
   isPending: function isPending() {
     return this._type !== null;
   }

browser/metro/base/content/appbar.js

@@ -159,42 +159,39 @@ var Appbar = {
       }
     }
   },
-
   showContextualActions: function(aVerbs){
     let doc = document;
-
     // button element id to action verb lookup
     let buttonsMap = new Map();
     for (let verb of aVerbs) {
       let id = verb + "-selected-button";
-      let buttonNode = doc.getElementById(id);
-      if (buttonNode) {
-        buttonsMap.set(id, verb);
-      } else {
-        Util.dumpLn("Appbar.showContextualActions: no button for " + verb);
+      if (!doc.getElementById(id)) {
+        throw new Error("Appbar.showContextualActions: no button for " + verb);
       }
+      buttonsMap.set(id, verb);
     }
 
-    // hide/show buttons as appropriate
-    let buttons = doc.querySelectorAll("#contextualactions-tray > toolbarbutton");
-
-    for (let btnNode of buttons) {
-      if (buttonsMap.has(btnNode.id)){
-        btnNode.hidden = false;
-      } else {
-        btnNode.hidden = true;
+    // sort buttons into 2 buckets - needing showing and needing hiding
+    let toHide = [],
+        toShow = [];
+    for (let btnNode of this.appbar.querySelectorAll("#contextualactions-tray > toolbarbutton")) {
+      // correct the hidden state for each button;
+      // .. buttons present in the map should be visible, otherwise not
+      if (buttonsMap.has(btnNode.id)) {
+        if (btnNode.hidden) toShow.push(btnNode);
+      } else if (!btnNode.hidden) {
+        toHide.push(btnNode);
       }
-    };
-
-    if (buttonsMap.size) {
-      // there are buttons to show
-      // TODO: show the contextual actions tray?
-    } else {
-      // 0 actions to show;
-      // TODO: hide the contextual actions tray entirely?
     }
+    return Task.spawn(function() {
+      if (toHide.length) {
+        yield Util.transitionElementVisibility(toHide, false);
+      }
+      if (toShow.length) {
+        yield Util.transitionElementVisibility(toShow, true);
+      }
+    });
   },
-
   _onTileSelectionChanged: function _onTileSelectionChanged(aEvent){
     let activeTileset = aEvent.target;
 

browser/metro/base/content/bindings/grid.xml

@@ -137,6 +137,10 @@
                 }
               }
             }
+            // add the clear-selection button if more than one tiles are selected
+            if (tileNodes.length > 1) {
+              verbSet.add('clear');
+            }
             // returns Set
             return verbSet;
           ]]>
@@ -475,10 +479,25 @@
           ]]>
         </body>
       </method>
-
     </implementation>
+    <handlers>
+      <handler event="context-action">
+        <![CDATA[
+          // context-action is an event fired by the appbar typically
+          // which directs us to do something to the selected tiles
+          switch (event.action) {
+            case "clear":
+              this.clearSelection();
+              break;
+            default:
+              if (this.controller && this.controller.doActionOnSelectedTiles) {
+                this.controller.doActionOnSelectedTiles(event.action, event);
+              }
+          }
+        ]]>
+      </handler>
+    </handlers>
   </binding>
-
   <binding id="richgrid-item">
     <content>
       <xul:vbox anonid="anon-richgrid-item" class="richgrid-item-content" xbl:inherits="customImage">

browser/metro/base/content/browser.xul

@@ -314,11 +314,12 @@
     <!-- Windows 8 Appbar -->
     <appbar id="appbar" mousethrough="never" observes="bcast_windowState">
       <!-- contextual actions temporarily hidden, pending #800996 -->
-      <hbox id="contextualactions-tray" flex="1" hidden="true">
-        <toolbarbutton id="delete-selected-button" hidden="true" oncommand="Appbar.dispatchContextualAction('delete')"/>
-        <toolbarbutton id="restore-selected-button" hidden="true" oncommand="Appbar.dispatchContextualAction('restore')"/>
-        <toolbarbutton id="pin-selected-button" hidden="true" oncommand="Appbar.dispatchContextualAction('pin')"/>
-        <toolbarbutton id="unpin-selected-button" hidden="true" oncommand="Appbar.dispatchContextualAction('unpin')"/>
+      <hbox id="contextualactions-tray" flex="1">
+        <toolbarbutton id="delete-selected-button" hidden="true" fade="true" oncommand="Appbar.dispatchContextualAction('delete')"/>
+        <toolbarbutton id="restore-selected-button" hidden="true" fade="true" oncommand="Appbar.dispatchContextualAction('restore')"/>
+        <toolbarbutton id="pin-selected-button" hidden="true" fade="true" oncommand="Appbar.dispatchContextualAction('pin')"/>
+        <toolbarbutton id="unpin-selected-button" hidden="true" fade="true" oncommand="Appbar.dispatchContextualAction('unpin')"/>
+        <toolbarbutton id="clear-selected-button" hidden="true" fade="true" oncommand="Appbar.dispatchContextualAction('clear')"/>
       </hbox>
       <hbox flex="1">
         <toolbarbutton id="download-button" oncommand="Appbar.onDownloadButton()"/>

browser/metro/theme/browser.css

@@ -643,7 +643,21 @@ appbar toolbarbutton[disabled] {
 #star-button[checked] {
   -moz-image-region: rect(80px, 360px, 120px, 320px) !important;
 }
+
 /* Tile-selection-Specific */
+#contextualactions-tray > toolbarbutton {
+  opacity: 1;
+}
+#contextualactions-tray > toolbarbutton[fade] {
+  opacity: 0;
+}
+#contextualactions-tray > toolbarbutton:not([immediate]) {
+  transition-property: opacity;
+  transition-duration: .3s;
+  transition-timing-function: ease-in;
+  transition-delay: 80ms;
+}
+
 #pin-selected-button {
   -moz-image-region: rect(0px, 240px, 40px, 200px) !important;
 }
@@ -653,17 +667,15 @@ appbar toolbarbutton[disabled] {
 #pin-selected-button:active {
   -moz-image-region: rect(80px, 240px, 120px, 200px) !important;
 }
-
 #unpin-selected-button {
-  -moz-image-region: rect(80px, 240px, 120px, 200px) !important;
+  -moz-image-region: rect(0px, 280px, 40px, 240px) !important;
 }
 #unpin-selected-button:hover {
-  -moz-image-region: rect(40px, 240px, 80px, 200px) !important;
+  -moz-image-region: rect(40px, 280px, 80px, 240px) !important;
 }
 #unpin-selected-button:active {
-  -moz-image-region: rect(0px, 240px, 40px, 200px) !important;
+  -moz-image-region: rect(80px, 280px, 120px, 240px) !important;
 }
-
 #delete-selected-button {
   -moz-image-region: rect(0px, 480px, 40px, 440px) !important;
 }
@@ -673,6 +685,25 @@ appbar toolbarbutton[disabled] {
 #delete-selected-button:active {
   -moz-image-region: rect(80px, 480px, 120px, 440px) !important;
 }
+#clear-selected-button {
+  -moz-image-region: rect(0px, 520px, 40px, 480px) !important;
+}
+#clear-selected-button:hover {
+  -moz-image-region: rect(40px, 520px, 80px, 480px) !important;
+}
+#clear-selected-button:active {
+  -moz-image-region: rect(80px, 520px, 120px, 480px) !important;
+}
+
+#restore-selected-button {
+  -moz-image-region: rect(0px, 560px, 40px, 520px) !important;
+}
+#restore-selected-button:hover {
+  -moz-image-region: rect(40px, 560px, 80px, 520px) !important;
+}
+#restore-selected-button:active {
+  -moz-image-region: rect(80px, 560px, 120px, 520px) !important;
+}
 
 /* Flyouts ---------------------------------------------------------------- */
 /* don't add a margin to the very top settings entry in flyouts */