use FocusOriginMonitor for md-button focus styles

Author: mmalerba

src/lib/button/_button-base.scss

@@ -55,7 +55,7 @@ $mat-mini-fab-padding: 8px !default;
     cursor: default;
   }
 
-  &.mat-button-focus {
+  &.cdk-keyboard-focused {
     .mat-button-focus-overlay {
       opacity: 1;
     }

src/lib/button/_button-theme.scss

@@ -54,7 +54,7 @@
   $foreground: map-get($theme, foreground);
 
   .mat-button, .mat-icon-button, .mat-raised-button, .mat-fab, .mat-mini-fab {
-    &.mat-button-focus {
+    &.cdk-keyboard-focused {
       @include _mat-button-focus-color($theme);
     }
   }

src/lib/button/button.ts

@@ -7,13 +7,13 @@ import {
   ElementRef,
   Renderer,
   NgModule,
-  ModuleWithProviders, Directive,
+  ModuleWithProviders, Directive, OnDestroy,
 } from '@angular/core';
 import {CommonModule} from '@angular/common';
 import {MdRippleModule, coerceBooleanProperty, CompatibilityModule} from '../core';
+import {FocusOriginMonitor} from '../core/style/focus-origin-monitor';
 
 
-// TODO(jelbourn): Make the `isMouseDown` stuff done with one global listener.
 // TODO(kara): Convert attribute selectors to classes when attr maps become available
 
 
@@ -87,25 +87,15 @@ export class MdMiniFabCssMatStyler {}
             'button[mat-fab], button[mat-mini-fab]',
   host: {
     '[disabled]': 'disabled',
-    '[class.mat-button-focus]': '_isKeyboardFocused',
-    '(mousedown)': '_setMousedown()',
-    '(focus)': '_setKeyboardFocus()',
-    '(blur)': '_removeKeyboardFocus()',
   },
   templateUrl: 'button.html',
   styleUrls: ['button.css'],
   encapsulation: ViewEncapsulation.None,
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class MdButton {
+export class MdButton implements OnDestroy {
   private _color: string;
 
-  /** Whether the button has focus from the keyboard (not the mouse). Used for class binding. */
-  _isKeyboardFocused: boolean = false;
-
-  /** Whether a mousedown has occurred on this element in the last 100ms. */
-  _isMouseDown: boolean = false;
-
   /** Whether the button is round. */
   _isRoundButton: boolean = ['icon-button', 'fab', 'mini-fab'].some(suffix => {
     let el = this._getHostElement();
@@ -126,22 +116,20 @@ export class MdButton {
   get disabled() { return this._disabled; }
   set disabled(value: boolean) { this._disabled = coerceBooleanProperty(value) ? true : null; }
 
-  constructor(private _elementRef: ElementRef, private _renderer: Renderer) { }
+  constructor(private _elementRef: ElementRef, private _renderer: Renderer,
+              private _focusOriginMonitor: FocusOriginMonitor) {
+    this._focusOriginMonitor.monitor(this._elementRef.nativeElement, this._renderer, true);
+  }
+
+  ngOnDestroy() {
+    this._focusOriginMonitor.unmonitor(this._elementRef.nativeElement);
+  }
 
   /** The color of the button. Can be `primary`, `accent`, or `warn`. */
   @Input()
   get color(): string { return this._color; }
   set color(value: string) { this._updateColor(value); }
 
-  _setMousedown() {
-    // We only *show* the focus style when focus has come to the button via the keyboard.
-    // The Material Design spec is silent on this topic, and without doing this, the
-    // button continues to look :active after clicking.
-    // @see http://marcysutton.com/button-focus-hell/
-    this._isMouseDown = true;
-    setTimeout(() => { this._isMouseDown = false; }, 100);
-  }
-
   _updateColor(newColor: string) {
     this._setElementColor(this._color, false);
     this._setElementColor(newColor, true);
@@ -154,14 +142,6 @@ export class MdButton {
     }
   }
 
-  _setKeyboardFocus() {
-    this._isKeyboardFocused = !this._isMouseDown;
-  }
-
-  _removeKeyboardFocus() {
-    this._isKeyboardFocused = false;
-  }
-
   /** Focuses the button. */
   focus(): void {
     this._renderer.invokeElementMethod(this._getHostElement(), 'focus');
@@ -186,19 +166,15 @@ export class MdButton {
   host: {
     '[attr.disabled]': 'disabled',
     '[attr.aria-disabled]': '_isAriaDisabled',
-    '[class.mat-button-focus]': '_isKeyboardFocused',
-    '(mousedown)': '_setMousedown()',
-    '(focus)': '_setKeyboardFocus()',
-    '(blur)': '_removeKeyboardFocus()',
     '(click)': '_haltDisabledEvents($event)',
   },
   templateUrl: 'button.html',
   styleUrls: ['button.css'],
   encapsulation: ViewEncapsulation.None
 })
 export class MdAnchor extends MdButton {
-  constructor(elementRef: ElementRef, renderer: Renderer) {
-    super(elementRef, renderer);
+  constructor(elementRef: ElementRef, renderer: Renderer, focusOriginMonitor: FocusOriginMonitor) {
+    super(elementRef, renderer, focusOriginMonitor);
   }
 
   /** @docs-private */
@@ -215,7 +191,6 @@ export class MdAnchor extends MdButton {
     // A disabled button shouldn't apply any actions
     if (this.disabled) {
       event.preventDefault();
-      event.stopImmediatePropagation();
     }
   }
 }