refactor(material-experimental/mdc-snack-bar): remove MDC adapter usage

Reworks the MDC snack bar so that it reuses the logic from our existing implementation instead of going through the MDC adapter.

**Note:** these changes mimic MDC's logic rather than reuse our existing container with MDC's styling, despite the latter being cleaner and easier to maintain. We do it this way, because reusing our container ends up breaking tests using harnesses, because the harness ends up waiting for the container to be dismissed before resuming execution.

This is the alternate approach for future reference: crisbeto@9a373d2

Author: crisbeto

src/material-experimental/mdc-snack-bar/BUILD.bazel

@@ -25,7 +25,6 @@ ng_module(
         "//src/material-experimental/mdc-core",
         "//src/material/snack-bar",
         "@npm//@angular/core",
-        "@npm//@material/snackbar",
     ],
 )
 

src/material-experimental/mdc-snack-bar/snack-bar-container.html

@@ -1,4 +1,4 @@
-<div class="mdc-snackbar__surface" #surface>
+<div class="mdc-snackbar__surface">
   <!--
     This outer label wrapper will have the class `mdc-snackbar__label` applied if
     the attached template/component does not contain it.

src/material-experimental/mdc-snack-bar/snack-bar-container.ts

@@ -28,15 +28,20 @@ import {
 } from '@angular/core';
 import {MatSnackBarConfig, _SnackBarContainer} from '@angular/material/snack-bar';
 import {ANIMATION_MODULE_TYPE} from '@angular/platform-browser/animations';
-import {MDCSnackbarAdapter, MDCSnackbarFoundation, cssClasses} from '@material/snackbar';
 import {Platform} from '@angular/cdk/platform';
 import {Observable, Subject} from 'rxjs';
 
-/**
- * The MDC label class that should wrap the label content of the snack bar.
- * @docs-private
- */
-const MDC_SNACKBAR_LABEL_CLASS = 'mdc-snackbar__label';
+/** The MDC label class that should wrap the label content of the snack bar. */
+const LABEL_CLASS = 'mdc-snackbar__label';
+
+/** Class added after the snack bar is done opening. */
+const OPEN_CLASS = 'mdc-snackbar--open';
+
+/** Class added while the snack bar is opening. */
+const OPENING_CLASS = 'mdc-snackbar--opening';
+
+/** Class added while the snack bar is closing. */
+const CLOSING_CLASS = 'mdc-snackbar--closing';
 
 /**
  * Internal component that wraps user-provided snack bar content.
@@ -72,6 +77,15 @@ export class MatSnackBarContainer
   /** The timeout for announcing the snack bar's content. */
   private _announceTimeoutId: number;
 
+  /** ID of the timeout for the opening/closing animation. */
+  private _animationTimeoutId: number;
+
+  /** ID of the animation frame that is used to delay the opening sequence. */
+  private _animationFrameId: number;
+
+  /** Whether the component is in the process of being opened. */
+  private _isOpening = false;
+
   /** Subject for notifying that the snack bar has announced to screen readers. */
   readonly _onAnnounce: Subject<void> = new Subject();
 
@@ -93,24 +107,9 @@ export class MatSnackBarContainer
    */
   _role?: 'status' | 'alert';
 
-  private _mdcAdapter: MDCSnackbarAdapter = {
-    addClass: (className: string) => this._setClass(className, true),
-    removeClass: (className: string) => this._setClass(className, false),
-    announce: () => {},
-    notifyClosed: () => this._finishExit(),
-    notifyClosing: () => {},
-    notifyOpened: () => this._onEnter.next(),
-    notifyOpening: () => {},
-  };
-
-  _mdcFoundation = new MDCSnackbarFoundation(this._mdcAdapter);
-
   /** The portal outlet inside of this container into which the snack bar content will be loaded. */
   @ViewChild(CdkPortalOutlet, {static: true}) _portalOutlet: CdkPortalOutlet;
 
-  /** Element that acts as the MDC surface container which should contain the label and actions. */
-  @ViewChild('surface', {static: true}) _surface: ElementRef;
-
   /**
    * Element that will have the `mdc-snackbar__label` class applied if the attached component
    * or template does not have it. This ensures that the appropriate structure, typography, and
@@ -147,50 +146,66 @@ export class MatSnackBarContainer
         this._role = 'alert';
       }
     }
-
-    // `MatSnackBar` will use the config's timeout to determine when the snack bar should be closed.
-    // Set this to `-1` to mark it as indefinitely open so that MDC does not close itself.
-    this._mdcFoundation.setTimeoutMs(-1);
-  }
-
-  /** Makes sure the exit callbacks have been invoked when the element is destroyed. */
-  ngOnDestroy() {
-    this._mdcFoundation.close();
   }
 
   enter() {
-    // MDC uses some browser APIs that will throw during server-side rendering.
-    if (this._platform.isBrowser) {
-      this._ngZone.run(() => {
-        this._mdcFoundation.open();
-        this._screenReaderAnnounce();
-      });
+    if (typeof requestAnimationFrame !== 'function') {
+      return;
     }
+
+    this._isOpening = true;
+    clearTimeout(this._animationTimeoutId);
+    cancelAnimationFrame(this._animationFrameId);
+    this._setClass(CLOSING_CLASS, false);
+    this._setClass(OPENING_CLASS, true);
+    this._screenReaderAnnounce();
+
+    // Wait a frame once display is no longer "none", to establish basis for animation
+    this._animationFrameId = requestAnimationFrame(() => {
+      this._setClass(OPEN_CLASS, true);
+
+      this._animationTimeoutId = setTimeout(() => {
+        this._setClass(OPENING_CLASS, false);
+        this._ngZone.run(() => this._onEnter.next());
+        this._isOpening = false;
+      }, 150);
+    });
   }
 
   exit(): Observable<void> {
-    const classList = this._elementRef.nativeElement.classList;
+    // If the snack bar hasn't been announced by the time it exits it wouldn't have been open
+    // long enough to visually read it either, so clear the timeout for announcing.
+    clearTimeout(this._announceTimeoutId);
+    clearTimeout(this._animationTimeoutId);
 
-    // MDC won't complete the closing sequence if it starts while opening hasn't finished.
-    // If that's the case, destroy immediately to ensure that our stream emits as expected.
-    if (classList.contains(cssClasses.OPENING) || !classList.contains(cssClasses.OPEN)) {
+    if (typeof cancelAnimationFrame === 'function') {
+      cancelAnimationFrame(this._animationFrameId);
+    }
+
+    // If the opening sequence is still in progress, close immediately.
+    if (this._isOpening) {
       this._finishExit();
     } else {
       // It's common for snack bars to be opened by random outside calls like HTTP requests or
       // errors. Run inside the NgZone to ensure that it functions correctly.
       this._ngZone.run(() => {
         this._exiting = true;
-        this._mdcFoundation.close();
+        this._setClass(CLOSING_CLASS, true);
+        this._setClass(OPEN_CLASS, false);
+        this._setClass(OPENING_CLASS, false);
+        this._animationTimeoutId = setTimeout(() => this._finishExit(), 75);
       });
     }
 
-    // If the snack bar hasn't been announced by the time it exits it wouldn't have been open
-    // long enough to visually read it either, so clear the timeout for announcing.
-    clearTimeout(this._announceTimeoutId);
-
     return this._onExit;
   }
 
+  ngOnDestroy() {
+    if (!this._exiting) {
+      this.exit();
+    }
+  }
+
   /** Attach a component portal as content to this snack bar container. */
   attachComponentPortal<T>(portal: ComponentPortal<T>): ComponentRef<T> {
     this._assertNotAttached();
@@ -235,12 +250,9 @@ export class MatSnackBarContainer
 
   /** Finishes the exit sequence of the container. */
   private _finishExit() {
+    clearTimeout(this._animationTimeoutId);
     this._onExit.next();
     this._onExit.complete();
-
-    if (this._platform.isBrowser) {
-      this._mdcFoundation.destroy();
-    }
   }
 
   /**
@@ -284,10 +296,10 @@ export class MatSnackBarContainer
     // component's label container, which will apply MDC's label styles to the attached view.
     const label = this._label.nativeElement;
 
-    if (!label.querySelector(`.${MDC_SNACKBAR_LABEL_CLASS}`)) {
-      label.classList.add(MDC_SNACKBAR_LABEL_CLASS);
+    if (!label.querySelector(`.${LABEL_CLASS}`)) {
+      label.classList.add(LABEL_CLASS);
     } else {
-      label.classList.remove(MDC_SNACKBAR_LABEL_CLASS);
+      label.classList.remove(LABEL_CLASS);
     }
   }
 }

src/material-experimental/mdc-snack-bar/snack-bar.spec.ts

@@ -17,7 +17,6 @@ import {
   SimpleSnackBar,
   MatSnackBar,
   MatSnackBarConfig,
-  MatSnackBarContainer,
   MatSnackBarModule,
   MatSnackBarRef,
 } from './index';
@@ -568,18 +567,15 @@ describe('MatSnackBar', () => {
   }));
 
   it('should dismiss the open snack bar on destroy', fakeAsync(() => {
-    const snackBarRef = snackBar.open(simpleMessage);
+    snackBar.open(simpleMessage);
     viewContainerFixture.detectChanges();
     expect(overlayContainerElement.childElementCount).toBeGreaterThan(0);
 
-    const foundation = (snackBarRef.containerInstance as MatSnackBarContainer)._mdcFoundation;
-    spyOn(foundation, 'destroy').and.callThrough();
-
     snackBar.ngOnDestroy();
+    viewContainerFixture.detectChanges();
     flush();
 
     expect(overlayContainerElement.childElementCount).toBe(0);
-    expect(foundation.destroy).toHaveBeenCalled();
   }));
 
   it('should cap the timeout to the maximum accepted delay in setTimeout', fakeAsync(() => {