perf(focus-monitor): avoid triggering unnecessary change detections

src/cdk/a11y/a11y.md

@@ -133,13 +133,6 @@ to the element when focused. It will add `.cdk-focused` if the element is focuse
 add `.cdk-${origin}-focused` (with `${origin}` being `mouse`, `keyboard`, `touch`, or `program`) to
 indicate how the element was focused.
 
-Note: currently the `FocusMonitor` emits on the observable _outside_ of the Angular zone. Therefore
-if you `markForCheck` in the subscription you must put yourself back in the Angular zone.
-
-```ts
-focusMonitor.monitor(el).subscribe(origin => this.ngZone.run(() => /* ... */ ));
-```
-
 Any element that is monitored by calling `monitor` should eventually be unmonitored by calling
 `stopMonitoring` with the same element.
 

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

@@ -468,7 +468,10 @@ export class FocusMonitor implements OnDestroy {
   }
 
   private _emitOrigin(subject: Subject<FocusOrigin>, origin: FocusOrigin) {
-    this._ngZone.run(() => subject.next(origin));
+    // Do not trigger a change detection if there are no observers.
+    if (subject.observers.length) {
+      this._ngZone.run(() => subject.next(origin));
+    }
   }
 
   private _registerGlobalListeners(elementInfo: MonitoredElementInfo) {

src/components-examples/cdk/a11y/focus-monitor-directives/focus-monitor-directives-example.html

@@ -1,13 +1,13 @@
 <div class="example-focus-monitor">
   <button cdkMonitorSubtreeFocus
-          (cdkFocusChange)="elementOrigin = formatOrigin($event); markForCheck()">
+          (cdkFocusChange)="elementOrigin = formatOrigin($event)">
     Focus Monitored Element ({{elementOrigin}})
   </button>
 </div>
 
 <div class="example-focus-monitor">
   <div cdkMonitorSubtreeFocus
-       (cdkFocusChange)="subtreeOrigin = formatOrigin($event); markForCheck()">
+       (cdkFocusChange)="subtreeOrigin = formatOrigin($event)">
     <p>Focus Monitored Subtree ({{subtreeOrigin}})</p>
     <button>Child Button 1</button>
     <button>Child Button 2</button>

src/components-examples/cdk/a11y/focus-monitor-directives/focus-monitor-directives-example.ts

@@ -1,5 +1,5 @@
 import {FocusOrigin} from '@angular/cdk/a11y';
-import {ChangeDetectorRef, Component, NgZone} from '@angular/core';
+import {Component} from '@angular/core';
 
 /** @title Monitoring focus with FocusMonitor */
 @Component({
@@ -11,15 +11,7 @@ export class FocusMonitorDirectivesExample {
   elementOrigin = this.formatOrigin(null);
   subtreeOrigin = this.formatOrigin(null);
 
-  constructor(private _ngZone: NgZone, private _cdr: ChangeDetectorRef) {}
-
-
   formatOrigin(origin: FocusOrigin): string {
     return origin ? origin + ' focused' : 'blurred';
   }
-
-  // Workaround for the fact that (cdkFocusChange) emits outside NgZone.
-  markForCheck() {
-    this._ngZone.run(() => this._cdr.markForCheck());
-  }
 }

src/components-examples/cdk/a11y/focus-monitor-focus-via/focus-monitor-focus-via-example.ts

@@ -1,10 +1,8 @@
 import {FocusMonitor, FocusOrigin} from '@angular/cdk/a11y';
 import {
   AfterViewInit,
-  ChangeDetectorRef,
   Component,
   ElementRef,
-  NgZone,
   OnDestroy,
   ViewChild
 } from '@angular/core';
@@ -20,16 +18,13 @@ export class FocusMonitorFocusViaExample implements OnDestroy, AfterViewInit {
 
   origin = this.formatOrigin(null);
 
-  constructor(public focusMonitor: FocusMonitor,
-              private _cdr: ChangeDetectorRef,
-              private _ngZone: NgZone) {}
+  constructor(public focusMonitor: FocusMonitor) {}
 
   ngAfterViewInit() {
     this.focusMonitor.monitor(this.monitoredEl)
-        .subscribe(origin => this._ngZone.run(() => {
+        .subscribe(origin => {
           this.origin = this.formatOrigin(origin);
-          this._cdr.markForCheck();
-        }));
+        });
   }
 
   ngOnDestroy() {

src/components-examples/cdk/a11y/focus-monitor-overview/focus-monitor-overview-example.ts

@@ -1,10 +1,8 @@
 import {FocusMonitor, FocusOrigin} from '@angular/cdk/a11y';
 import {
   AfterViewInit,
-  ChangeDetectorRef,
   Component,
   ElementRef,
-  NgZone,
   OnDestroy,
   ViewChild
 } from '@angular/core';
@@ -22,21 +20,17 @@ export class FocusMonitorOverviewExample implements OnDestroy, AfterViewInit {
   elementOrigin = this.formatOrigin(null);
   subtreeOrigin = this.formatOrigin(null);
 
-  constructor(private _focusMonitor: FocusMonitor,
-              private _cdr: ChangeDetectorRef,
-              private _ngZone: NgZone) {}
+  constructor(private _focusMonitor: FocusMonitor) {}
 
   ngAfterViewInit() {
     this._focusMonitor.monitor(this.element)
-        .subscribe(origin => this._ngZone.run(() => {
+        .subscribe(origin => {
           this.elementOrigin = this.formatOrigin(origin);
-          this._cdr.markForCheck();
-        }));
+        });
     this._focusMonitor.monitor(this.subtree, true)
-        .subscribe(origin => this._ngZone.run(() => {
+        .subscribe(origin => {
           this.subtreeOrigin = this.formatOrigin(origin);
-          this._cdr.markForCheck();
-        }));
+        });
   }
 
   ngOnDestroy() {

src/material/tooltip/tooltip.ts

@@ -300,11 +300,10 @@ export class MatTooltip implements OnDestroy, AfterViewInit {
     this._focusMonitor.monitor(this._elementRef)
       .pipe(takeUntil(this._destroyed))
       .subscribe(origin => {
-        // Note that the focus monitor runs outside the Angular zone.
         if (!origin) {
-          this._ngZone.run(() => this.hide(0));
+          this.hide(0);
         } else if (origin === 'keyboard') {
-          this._ngZone.run(() => this.show());
+          this.show();
         }
     });
   }