perf(ripple): avoid triggering change detection (#3066)

* perf(ripple): avoid triggering change detection

Prevents the ripple event handlers from triggering change detection.

Related to #2985.

* chore: rename test

src/lib/core/ripple/ripple-renderer.ts

@@ -132,7 +132,9 @@ export class RippleRenderer {
 
     if (element) {
       // If the element is not null, register all event listeners on the trigger element.
-      this._triggerEvents.forEach((fn, type) => element.addEventListener(type, fn));
+      this._ngZone.runOutsideAngular(() => {
+        this._triggerEvents.forEach((fn, type) => element.addEventListener(type, fn));
+      });
     }
 
     this._triggerElement = element;
@@ -140,12 +142,10 @@ export class RippleRenderer {
 
   /** Listener being called on mousedown event. */
   private onMousedown(event: MouseEvent) {
-    if (this.rippleDisabled) {
-      return;
+    if (!this.rippleDisabled) {
+      this._isMousedown = true;
+      this.fadeInRipple(event.pageX, event.pageY, this.rippleConfig);
     }
-
-    this._isMousedown = true;
-    this.fadeInRipple(event.pageX, event.pageY, this.rippleConfig);
   }
 
   /** Listener being called on mouseup event. */

src/lib/core/ripple/ripple.spec.ts

@@ -167,6 +167,17 @@ describe('MdRipple', () => {
       expect(rippleTarget.querySelectorAll('.mat-ripple-element').length).toBe(0);
     });
 
+    it('does not run events inside the NgZone', () => {
+      const spy = jasmine.createSpy('zone unstable callback');
+      const subscription = fixture.ngZone.onUnstable.subscribe(spy);
+
+      dispatchMouseEvent('mousedown');
+      dispatchMouseEvent('mouseup');
+
+      expect(spy).not.toHaveBeenCalled();
+      subscription.unsubscribe();
+    });
+
     describe('when page is scrolled', () => {
       const startingWindowWidth = window.innerWidth;
       const startingWindowHeight = window.innerHeight;
@@ -374,7 +385,7 @@ describe('MdRipple', () => {
 
 @Component({
   template: `
-    <div id="container" mat-ripple [mdRippleSpeedFactor]="0" 
+    <div id="container" mat-ripple [mdRippleSpeedFactor]="0"
          style="position: relative; width:300px; height:200px;">
     </div>
   `,
@@ -387,7 +398,7 @@ class BasicRippleContainer {
   template: `
     <div id="container" style="position: relative; width:300px; height:200px;"
       mat-ripple
-      [mdRippleSpeedFactor]="0"   
+      [mdRippleSpeedFactor]="0"
       [mdRippleTrigger]="trigger"
       [mdRippleCentered]="centered"
       [mdRippleRadius]="radius"
@@ -406,7 +417,7 @@ class RippleContainerWithInputBindings {
   @ViewChild(MdRipple) ripple: MdRipple;
 }
 
-@Component({ template: `<div id="container" mat-ripple [mdRippleSpeedFactor]="0" 
+@Component({ template: `<div id="container" mat-ripple [mdRippleSpeedFactor]="0"
                              *ngIf="!isDestroyed"></div>` })
 class RippleContainerWithNgIf {
   @ViewChild(MdRipple) ripple: MdRipple;