fix(toolbar): fix the toolbar not shrinking on load

The function that updates the toolbar height was firing too early,
which caused the shrinking functionality not to work until 5sec after
the last scroll event. This commit fixes it by waiting until the first
digest before initializing the toolbar height.

Fixes #8258, #8221.

Closes #8543

Author: crisbeto

src/components/toolbar/toolbar.js

@@ -193,14 +193,14 @@ function mdToolbarDirective($$rAF, $mdConstant, $mdUtil, $mdTheming, $animate) {
           contentElement.on('scroll', debouncedContentScroll);
           contentElement.attr('scroll-shrink', 'true');
 
-          $$rAF(updateToolbarHeight);
+          $mdUtil.nextTick(updateToolbarHeight, false);
 
           return function disableScrollShrink() {
             contentElement.off('scroll', debouncedContentScroll);
             contentElement.attr('scroll-shrink', 'false');
 
-            $$rAF(updateToolbarHeight);
-          }
+            updateToolbarHeight();
+          };
         }
 
         /**

src/components/toolbar/toolbar.spec.js

@@ -13,7 +13,7 @@ describe('<md-toolbar>', function() {
     $timeout = _$timeout_;
   }));
 
-  it('with scrollShrink, it should shrink scrollbar when going to bottom', inject(function($compile, $rootScope, $mdConstant, mdToolbarDirective, $$rAF) {
+  it('with scrollShrink, it should shrink scrollbar when going to bottom', inject(function($compile, $rootScope, $mdConstant, mdToolbarDirective) {
 
     var parent = angular.element('<div>');
     var toolbar = angular.element('<md-toolbar>');
@@ -55,7 +55,7 @@ describe('<md-toolbar>', function() {
 
     $rootScope.$apply();
     $rootScope.$broadcast('$mdContentLoaded', contentEl);
-    $$rAF.flush();
+    $timeout.flush();
 
 
     //Expect everything to be in its proper initial state.
@@ -69,7 +69,6 @@ describe('<md-toolbar>', function() {
       type: 'scroll',
       target: {scrollTop: 500}
     });
-    $$rAF.flush();
 
     expect(toolbarCss[$mdConstant.CSS.TRANSFORM]).toEqual('translate3d(0,-100px,0)');
     expect(contentCss[$mdConstant.CSS.TRANSFORM]).toEqual('translate3d(0,0px,0)');
@@ -79,7 +78,6 @@ describe('<md-toolbar>', function() {
       type: 'scroll',
       target: {scrollTop: 0}
     });
-    $$rAF.flush();
 
     expect(toolbarCss[$mdConstant.CSS.TRANSFORM]).toEqual('translate3d(0,0px,0)');
     expect(contentCss[$mdConstant.CSS.TRANSFORM]).toEqual('translate3d(0,100px,0)');
@@ -118,7 +116,7 @@ describe('<md-toolbar>', function() {
     expect(element.find('md-toolbar').length).toBe(0);
   }));
 
-  it('works with ng-show', inject(function($$rAF, $timeout) {
+  it('works with ng-show', inject(function($timeout) {
     var template =
       '<div layout="column" style="height: 600px;">' +
       '  <md-toolbar md-scroll-shrink="true" ng-show="shouldShowToolbar">test</md-toolbar>' +
@@ -129,9 +127,6 @@ describe('<md-toolbar>', function() {
     build(template);
     document.body.appendChild(element[0]);
 
-    // Flushing to get the actual height of toolbar
-    $$rAF.flush();
-
     //
     // Initial tests
     //
@@ -171,7 +166,7 @@ describe('<md-toolbar>', function() {
     document.body.removeChild(element[0]);
   }));
 
-  it('works with ng-hide', inject(function($$rAF, $timeout) {
+  it('works with ng-hide', inject(function($timeout) {
     var template =
       '<div layout="column" style="height: 600px;">' +
       '  <md-toolbar md-scroll-shrink="true" ng-hide="shouldNotShowToolbar">test</md-toolbar>' +
@@ -183,7 +178,7 @@ describe('<md-toolbar>', function() {
     document.body.appendChild(element[0]);
 
     // Flushing to get the actual height of toolbar
-    $$rAF.flush();
+    $timeout.flush();
 
     //
     // Initial tests