perf(cdk/a11y): avoid triggering change detection if there are no sub…

…scribers to stream

Currently we have an `NgZone.run` call on each `focus` and `blur` event of a monitored
event in order to bring its subscribers into the `NgZone`, however this means that we're
also triggering change detection to any consumers that aren't subscribed to changes
(e.g. `mat-button` only cares about the classes being applied). These changes move
around some logic so that the `NgZone.run` is only hit if somebody has subscribed
to the observable.

src/cdk/a11y/focus-monitor/focus-monitor.ts

@@ -20,7 +20,7 @@ import {
   Output,
   AfterViewInit,
 } from '@angular/core';
-import {Observable, of as observableOf, Subject, Subscription} from 'rxjs';
+import {Observable, of as observableOf, Subject, Subscription, Observer} from 'rxjs';
 import {coerceElement} from '@angular/cdk/coercion';
 import {DOCUMENT} from '@angular/common';
 import {isFakeMousedownFromScreenReader} from '../fake-mousedown';
@@ -70,6 +70,7 @@ type MonitoredElementInfo = {
   checkChildren: boolean,
   subject: Subject<FocusOrigin>,
   rootNode: HTMLElement|Document
+  observable: Observable<FocusOrigin>
 };
 
 /**
@@ -251,15 +252,28 @@ export class FocusMonitor implements OnDestroy {
     }
 
     // Create monitored element info.
+    const subject = new Subject<FocusOrigin>();
     const info: MonitoredElementInfo = {
       checkChildren: checkChildren,
-      subject: new Subject<FocusOrigin>(),
-      rootNode
+      subject,
+      rootNode,
+      // Note that we want the observable to emit inside the NgZone, however we don't want to
+      // trigger change detection if nobody has subscribed to it. We do so by creating the
+      // observable manually.
+      observable: new Observable((observer: Observer<FocusOrigin>) => {
+        const subscription = subject.subscribe(origin => {
+          this._ngZone.run(() => observer.next(origin));
+        });
+
+        return () => {
+          subscription.unsubscribe();
+        };
+      })
     };
     this._elementInfo.set(nativeElement, info);
     this._registerGlobalListeners(info);
 
-    return info.subject;
+    return info.observable;
   }
 
   /**
@@ -464,11 +478,7 @@ export class FocusMonitor implements OnDestroy {
     }
 
     this._setClasses(element);
-    this._emitOrigin(elementInfo.subject, null);
-  }
-
-  private _emitOrigin(subject: Subject<FocusOrigin>, origin: FocusOrigin) {
-    this._ngZone.run(() => subject.next(origin));
+    elementInfo.subject.next(null);
   }
 
   private _registerGlobalListeners(elementInfo: MonitoredElementInfo) {
@@ -550,7 +560,7 @@ export class FocusMonitor implements OnDestroy {
   private _originChanged(element: HTMLElement, origin: FocusOrigin,
                          elementInfo: MonitoredElementInfo) {
     this._setClasses(element, origin);
-    this._emitOrigin(elementInfo.subject, origin);
+    elementInfo.subject.next(origin);
     this._lastFocusOrigin = origin;
   }
 }