fix(fabSpeedDial): fix many visual issues

 * maintain state when focusing/bluring/tabbing through actions

   speed dial would previously show a very short and erroneous animation
   when tabbing, or rapidly blurring/focusing, through child items

 * add demo showing tooltip usage

 * fix $digest in-progress error when opening a dialog

   cebor reported a $digest in progress bug when trying to open a dialog
   from within the speed dial; haven't figured out how to create a test
   that demonstrates it, but I added a demo which shows failure

 * animations fail on Safari

   update webkitTransform styles and set height to initial instead of 100%

closes #3213, closes #3338, closes #3277, closes #3236, closes #3375

src/components/fabSpeedDial/demoBasicUsage/index.html

@@ -21,7 +21,7 @@
           <md-button aria-label="facebook" class="md-fab md-raised md-mini">
             <md-icon md-svg-src="img/icons/facebook.svg"></md-icon>
           </md-button>
-          <md-button aria-label="Google hangout" class="md-fab md-raised md-mini">
+          <md-button aria-label="Google Hangout" class="md-fab md-raised md-mini">
             <md-icon md-svg-src="img/icons/hangout.svg"></md-icon>
           </md-button>
         </md-fab-actions>

src/components/fabSpeedDial/demoModal/index.html

@@ -0,0 +1,42 @@
+<div ng-controller="AppCtrl" layout="column">
+  <md-content class="md-padding" layout="column">
+    <p>
+      You can also use the buttons to open a dialog.
+    </p>
+
+    <div class="lock-size" layout="row" layout-align="center center">
+      <md-fab-speed-dial md-direction="down" class="md-fling">
+        <md-fab-trigger>
+          <md-button aria-label="Menu" class="md-fab md-warn">
+            <md-tooltip md-direction="top">Menu</md-tooltip>
+            <md-icon md-svg-src="img/icons/menu.svg"></md-icon>
+          </md-button>
+        </md-fab-trigger>
+
+        <md-fab-actions>
+          <md-button aria-label="Open dialog" class="md-fab md-raised md-mini"
+                     ng-click="demo.openDialog($event)">
+            <md-tooltip md-direction="left">Open dialog</md-tooltip>
+            <md-icon md-svg-src="img/icons/launch.svg"></md-icon>
+          </md-button>
+        </md-fab-actions>
+      </md-fab-speed-dial>
+    </div>
+  </md-content>
+
+  <script type="text/ng-template" id="dialog.html">
+    <md-dialog>
+      <md-dialog-content>Hello User!!!</md-dialog-content>
+
+      <div class="md-actions">
+        <md-button aria-label="Close dialog" ng-click="dialog.close()" class="md-primary">
+          Close Greeting
+        </md-button>
+
+        <md-button aria-label="Submit dialog" ng-click="dialog.submit()" class="md-primary">
+          Submit
+        </md-button>
+      </div>
+    </md-dialog>
+  </script>
+</div>

src/components/fabSpeedDial/demoModal/script.js

@@ -0,0 +1,25 @@
+(function() {
+  'use strict';
+
+  angular.module('fabSpeedDialModalDemo', ['ngMaterial'])
+    .controller('AppCtrl', function($scope, $mdDialog) {
+      $scope.demo = {
+        openDialog: function($event) {
+          $mdDialog.show({
+            clickOutsideToClose: true,
+            controller: function($mdDialog) {
+              this.close = function() {
+                $mdDialog.cancel();
+              };
+              this.submit = function() {
+                $mdDialog.hide();
+              };
+            },
+            controllerAs: 'dialog',
+            templateUrl: 'dialog.html',
+            targetEvent: $event
+          });
+        }
+      };
+    });
+})();

src/components/fabSpeedDial/demoModal/style.scss

@@ -0,0 +1,16 @@
+.md-fab.md-mini {
+  background-color: #aaa !important;
+}
+
+.md-fab:hover, .md-fab.md-focused {
+  background-color: #333 !important;
+}
+
+.lock-size {
+  min-width: 300px;
+  min-height: 300px;
+  width: 300px;
+  height: 300px;
+  margin-left: auto;
+  margin-right: auto;
+}

src/components/fabSpeedDial/demoTooltips/index.html

@@ -0,0 +1,35 @@
+<div ng-controller="AppCtrl" layout="column">
+  <md-content class="md-padding" layout="column">
+    <p>
+      You may add tooltips to both the trigger and actions.
+    </p>
+
+    <div class="lock-size" layout="row" layout-align="center center">
+      <md-fab-speed-dial md-direction="down" class="md-fling">
+        <md-fab-trigger>
+          <md-button aria-label="menu" class="md-fab md-warn">
+            <md-tooltip md-direction="top">Menu</md-tooltip>
+            <md-icon md-svg-src="img/icons/menu.svg"></md-icon>
+          </md-button>
+        </md-fab-trigger>
+
+        <md-fab-actions>
+          <md-button aria-label="twitter" class="md-fab md-raised md-mini">
+            <md-tooltip md-direction="left">Twitter</md-tooltip>
+            <md-icon md-svg-src="img/icons/twitter.svg"></md-icon>
+          </md-button>
+
+          <md-button aria-label="facebook" class="md-fab md-raised md-mini">
+            <md-tooltip md-direction="right">Facebook</md-tooltip>
+            <md-icon md-svg-src="img/icons/facebook.svg"></md-icon>
+          </md-button>
+
+          <md-button aria-label="Google Hangout" class="md-fab md-raised md-mini">
+            <md-tooltip md-direction="left">Google Hangout</md-tooltip>
+            <md-icon md-svg-src="img/icons/hangout.svg"></md-icon>
+          </md-button>
+        </md-fab-actions>
+      </md-fab-speed-dial>
+    </div>
+  </md-content>
+</div>

src/components/fabSpeedDial/demoTooltips/script.js

@@ -0,0 +1,9 @@
+(function() {
+  'use strict';
+
+  angular.module('fabSpeedDialTooltipDemo', ['ngMaterial'])
+    .controller('AppCtrl', function($scope) {
+      $scope.demo = {
+      };
+    });
+})();

src/components/fabSpeedDial/demoTooltips/style.scss

@@ -0,0 +1,20 @@
+.text-capitalize {
+  text-transform: capitalize;
+}
+
+.md-fab:hover, .md-fab.md-focused {
+  background-color: #000 !important;
+}
+
+p.note {
+  font-size: 1.2rem;
+}
+
+.lock-size {
+  min-width: 300px;
+  min-height: 300px;
+  width: 300px;
+  height: 300px;
+  margin-left: auto;
+  margin-right: auto;
+}

src/components/fabSpeedDial/fabSpeedDial.js

@@ -73,17 +73,34 @@
       element.prepend('<div class="md-css-variables"></div>');
     }
 
-    function FabSpeedDialController($scope, $element, $animate) {
+    function FabSpeedDialController($scope, $element, $animate, $timeout) {
       var vm = this;
 
       // Define our open/close functions
       // Note: Used by fabTrigger and fabActions directives
       vm.open = function() {
-        $scope.$apply('vm.isOpen = true');
+        // Run in a timeout to avoid conflicts with existing digest loops
+        $timeout(function() {
+          vm.isOpen = true;
+        });
       };
 
       vm.close = function() {
-        $scope.$apply('vm.isOpen = false');
+        // Run in a timeout to avoid conflicts with existing digest loops
+        $timeout(function() {
+          // Only close if we do not currently have mouse focus (since child elements can call this)
+          !vm.moused && (vm.isOpen = false);
+        });
+      };
+
+      vm.mouseenter = function() {
+        vm.moused = true;
+        vm.open();
+      };
+
+      vm.mouseleave = function() {
+        vm.moused = false;
+        vm.close();
       };
 
       setupDefaults();
@@ -101,8 +118,8 @@
 
       // Setup our event listeners
       function setupListeners() {
-        $element.on('mouseenter', vm.open);
-        $element.on('mouseleave', vm.close);
+        $element.on('mouseenter', vm.mouseenter);
+        $element.on('mouseleave', vm.mouseleave);
       }
 
       // Setup our watchers
@@ -142,18 +159,19 @@
       angular.forEach(items, function(item, index) {
         var styles = item.style;
 
-        styles.transform = '';
+        styles.transform = styles.webkitTransform = '';
         styles.transitionDelay = '';
         styles.opacity = 1;
 
         // Make the items closest to the trigger have the highest z-index
-        item.style.zIndex = (items.length - index) + startZIndex;
+        styles.zIndex = (items.length - index) + startZIndex;
       });
 
       // If the control is closed, hide the items behind the trigger
       if (!ctrl.isOpen) {
         angular.forEach(items, function(item, index) {
           var newPosition, axis;
+          var styles = item.style;
 
           switch (ctrl.direction) {
             case 'up':
@@ -174,7 +192,9 @@
               break;
           }
 
-          item.style.transform = 'translate' + axis + '(' + newPosition + 'px)';
+          var newTranslate = 'translate' + axis + '(' + newPosition + 'px)';
+
+          styles.transform = styles.webkitTransform = newTranslate;
         });
       }
     }
@@ -205,7 +225,7 @@
           offsetDelay = index * delay;
 
         styles.opacity = ctrl.isOpen ? 1 : 0;
-        styles.transform = ctrl.isOpen ? 'scale(1)' : 'scale(0)';
+        styles.transform = styles.webkitTransform = ctrl.isOpen ? 'scale(1)' : 'scale(0)';
         styles.transitionDelay = (ctrl.isOpen ?  offsetDelay : (items.length - offsetDelay)) + 'ms';
       });
     }

src/components/fabSpeedDial/fabSpeedDial.scss

@@ -17,7 +17,7 @@ md-fab-speed-dial {
     display: flex;
 
     // Set the height so that the z-index in the JS animation works
-    height: 100%;
+    height: initial;
 
     .md-fab-action-item {
       visibility: hidden;

src/components/fabSpeedDial/fabSpeedDial.spec.js

@@ -32,33 +32,37 @@ describe('<md-fab-speed-dial> directive', function() {
     expect(element.hasClass('md-right')).toBe(true);
   }));
 
-  it('opens when the trigger element is focused', inject(function() {
+  it('opens when the trigger element is focused', inject(function($timeout) {
     compileAndLink(
       '<md-fab-speed-dial><md-fab-trigger><button></button></md-fab-trigger></md-fab-speed-dial>'
     );
 
     element.find('button').triggerHandler('focus');
+    $timeout.flush();
     expect(controller.isOpen).toBe(true);
   }));
 
-  it('opens when the speed dial elements are focused', inject(function() {
+  it('opens when the speed dial elements are focused', inject(function($timeout) {
     compileAndLink(
       '<md-fab-speed-dial><md-fab-actions><button></button></md-fab-actions></md-fab-speed-dial>'
     );
 
     element.find('button').triggerHandler('focus');
+    $timeout.flush();
     expect(controller.isOpen).toBe(true);
   }));
 
-  it('closes when the speed dial elements are blurred', inject(function() {
+  it('closes when the speed dial elements are blurred', inject(function($timeout) {
     compileAndLink(
       '<md-fab-speed-dial><md-fab-actions><button></button></md-fab-actions></md-fab-speed-dial>'
     );
 
     element.find('button').triggerHandler('focus');
+    $timeout.flush();
     expect(controller.isOpen).toBe(true);
 
     element.find('button').triggerHandler('blur');
+    $timeout.flush();
     expect(controller.isOpen).toBe(false);
   }));