Merge branch 'optimize-everything' into optimize-list-base

Author: ngwattcos

.github/CODEOWNERS

@@ -236,6 +236,7 @@
 /src/e2e-app/mdc-radio/**                          @mmalerba
 /src/e2e-app/mdc-slide-toggle/**                   @crisbeto
 /src/e2e-app/mdc-tabs/**                           @crisbeto
+/src/e2e-app/mdc-table/**                          @andrewseguin
 /src/e2e-app/menu/**                               @crisbeto
 /src/e2e-app/progress-bar/**                       @jelbourn @crisbeto
 /src/e2e-app/progress-spinner/**                   @jelbourn @crisbeto

goldens/size-test.yaml

@@ -1,5 +1,5 @@
-cdk/drag-drop/all-directives: 153594
-cdk/drag-drop/basic: 151498
+cdk/drag-drop/all-directives: 154096
+cdk/drag-drop/basic: 151353
 material-experimental/mdc-chips/basic: 147607
 material-experimental/mdc-form-field/advanced: 220897
 material-experimental/mdc-form-field/basic: 220060

goldens/ts-circular-deps.json

@@ -3,10 +3,6 @@
     "src/cdk-experimental/dialog/dialog-config.ts",
     "src/cdk-experimental/dialog/dialog-container.ts"
   ],
-  [
-    "src/cdk-experimental/popover-edit/edit-event-dispatcher.ts",
-    "src/cdk-experimental/popover-edit/edit-ref.ts"
-  ],
   [
     "src/cdk/drag-drop/directives/drag.ts",
     "src/cdk/drag-drop/directives/drop-list.ts"
@@ -28,10 +24,6 @@
     "src/cdk/scrolling/scroll-dispatcher.ts",
     "src/cdk/scrolling/scrollable.ts"
   ],
-  [
-    "src/cdk/scrolling/virtual-for-of.ts",
-    "src/cdk/scrolling/virtual-scroll-viewport.ts"
-  ],
   [
     "src/cdk/scrolling/virtual-scroll-strategy.ts",
     "src/cdk/scrolling/virtual-scroll-viewport.ts"

package.json

@@ -59,7 +59,7 @@
     "@types/youtube": "^0.0.38",
     "@webcomponents/custom-elements": "^1.1.0",
     "core-js": "^2.6.9",
-    "material-components-web": "7.0.0-canary.7461aad68.0",
+    "material-components-web": "8.0.0-canary.d850de590.0",
     "rxjs": "^6.5.3",
     "rxjs-tslint-rules": "^4.33.1",
     "systemjs": "0.19.43",

src/cdk-experimental/popover-edit/edit-event-dispatcher.ts

@@ -22,7 +22,6 @@ import {
 
 import {CELL_SELECTOR, ROW_SELECTOR} from './constants';
 import {closest} from './polyfill';
-import {EditRef} from './edit-ref';
 
 /** The delay applied to mouse events before hiding or showing hover content. */
 const MOUSE_EVENT_DELAY_MS = 40;
@@ -42,11 +41,15 @@ export const enum HoverContentState {
   ON,
 }
 
+// Note: this class is generic, rather than referencing EditRef directly, in order to avoid
+// circular imports. If we were to reference it here, importing the registry into the
+// class that is registering itself will introduce a circular import.
+
 /**
  * Service for sharing delegated events and state for triggering table edits.
  */
 @Injectable()
-export class EditEventDispatcher {
+export class EditEventDispatcher<R> {
   /** A subject that indicates which table cell is currently editing (unless it is disabled). */
   readonly editing = new Subject<Element|null>();
 
@@ -70,10 +73,10 @@ export class EditEventDispatcher {
   readonly disabledCells = new WeakMap<Element, boolean>();
 
   /** The EditRef for the currently active edit lens (if any). */
-  get editRef(): EditRef<any>|null {
+  get editRef(): R|null {
     return this._editRef;
   }
-  private _editRef: EditRef<any>|null = null;
+  private _editRef: R|null = null;
 
   // Optimization: Precompute common pipeable operators used per row/cell.
   private readonly _distinctUntilChanged =
@@ -181,12 +184,12 @@ export class EditEventDispatcher {
   }
 
   /** Sets the currently active EditRef. */
-  setActiveEditRef(ref: EditRef<any>) {
+  setActiveEditRef(ref: R) {
     this._editRef = ref;
   }
 
   /** Unsets the currently active EditRef, if the specified editRef is active. */
-  unsetActiveEditRef(ref: EditRef<any>) {
+  unsetActiveEditRef(ref: R) {
     if (this._editRef !== ref) {
       return;
     }

src/cdk-experimental/popover-edit/edit-ref.ts

@@ -32,7 +32,7 @@ export class EditRef<FormValue> implements OnDestroy {
 
   constructor(
       @Self() private readonly _form: ControlContainer,
-      private readonly _editEventDispatcher: EditEventDispatcher,
+      private readonly _editEventDispatcher: EditEventDispatcher<EditRef<FormValue>>,
       private readonly _ngZone: NgZone) {
     this._editEventDispatcher.setActiveEditRef(this);
   }

src/cdk-experimental/popover-edit/edit-services.ts

@@ -15,6 +15,7 @@ import {ScrollDispatcher, ViewportRuler} from '@angular/cdk/scrolling';
 import {EditEventDispatcher} from './edit-event-dispatcher';
 import {FocusDispatcher} from './focus-dispatcher';
 import {PopoverEditPositionStrategyFactory} from './popover-edit-position-strategy-factory';
+import {EditRef} from './edit-ref';
 
 /**
  * Optimization
@@ -26,7 +27,8 @@ import {PopoverEditPositionStrategyFactory} from './popover-edit-position-strate
 export class EditServices {
   constructor(
       readonly directionality: Directionality,
-      readonly editEventDispatcher: EditEventDispatcher, readonly focusDispatcher: FocusDispatcher,
+      readonly editEventDispatcher: EditEventDispatcher<EditRef<unknown>>,
+      readonly focusDispatcher: FocusDispatcher,
       readonly focusTrapFactory: FocusTrapFactory, readonly ngZone: NgZone,
       readonly overlay: Overlay, readonly positionFactory: PopoverEditPositionStrategyFactory,
       readonly scrollDispatcher: ScrollDispatcher, readonly viewportRuler: ViewportRuler) {}

src/cdk-experimental/popover-edit/table-directives.ts

@@ -41,6 +41,7 @@ import {
   FocusEscapeNotifierFactory
 } from './focus-escape-notifier';
 import {closest} from './polyfill';
+import {EditRef} from './edit-ref';
 
 /**
  * Describes the number of columns before and after the originating cell that the
@@ -69,7 +70,7 @@ export class CdkEditable implements AfterViewInit, OnDestroy {
 
   constructor(
       protected readonly elementRef: ElementRef,
-      protected readonly editEventDispatcher: EditEventDispatcher,
+      protected readonly editEventDispatcher: EditEventDispatcher<EditRef<unknown>>,
       protected readonly focusDispatcher: FocusDispatcher, protected readonly ngZone: NgZone) {}
 
   ngAfterViewInit(): void {
@@ -487,7 +488,7 @@ export class CdkRowHoverContent implements AfterViewInit, OnDestroy {
 export class CdkEditOpen {
   constructor(
       protected readonly elementRef: ElementRef<HTMLElement>,
-      protected readonly editEventDispatcher: EditEventDispatcher) {
+      protected readonly editEventDispatcher: EditEventDispatcher<EditRef<unknown>>) {
 
     const nativeElement = elementRef.nativeElement;
 

src/cdk/a11y/key-manager/list-key-manager.spec.ts

@@ -1,4 +1,4 @@
-import {DOWN_ARROW, LEFT_ARROW, RIGHT_ARROW, TAB, UP_ARROW} from '@angular/cdk/keycodes';
+import {DOWN_ARROW, END, HOME, LEFT_ARROW, RIGHT_ARROW, TAB, UP_ARROW} from '@angular/cdk/keycodes';
 import {createKeyboardEvent} from '@angular/cdk/testing/private';
 import {QueryList} from '@angular/core';
 import {fakeAsync, tick} from '@angular/core/testing';
@@ -51,6 +51,8 @@ describe('Key managers', () => {
     leftArrow: KeyboardEvent,
     rightArrow: KeyboardEvent,
     tab: KeyboardEvent,
+    home: KeyboardEvent,
+    end: KeyboardEvent,
     unsupported: KeyboardEvent
   };
 
@@ -62,6 +64,8 @@ describe('Key managers', () => {
       leftArrow: createKeyboardEvent('keydown', LEFT_ARROW),
       rightArrow: createKeyboardEvent('keydown', RIGHT_ARROW),
       tab: createKeyboardEvent('keydown', TAB),
+      home: createKeyboardEvent('keydown', HOME),
+      end: createKeyboardEvent('keydown', END),
       unsupported: createKeyboardEvent('keydown', 192) // corresponds to the tilde character (~)
     };
   });
@@ -207,6 +211,30 @@ describe('Key managers', () => {
         expect(fakeKeyEvents.downArrow.defaultPrevented).toBe(false);
       });
 
+      describe('withHomeAndEnd', () => {
+        beforeEach(() => {
+          keyManager.withHomeAndEnd();
+        });
+
+        it('should focus the first item when Home is pressed', () => {
+          keyManager.setActiveItem(1);
+          expect(keyManager.activeItemIndex).toBe(1);
+
+          keyManager.onKeydown(fakeKeyEvents.home);
+
+          expect(keyManager.activeItemIndex).toBe(0);
+        });
+
+        it('should focus the last item when End is pressed', () => {
+          keyManager.setActiveItem(0);
+          expect(keyManager.activeItemIndex).toBe(0);
+
+          keyManager.onKeydown(fakeKeyEvents.end);
+
+          expect(keyManager.activeItemIndex).toBe(itemList.items.length - 1);
+        });
+      });
+
       describe('with `vertical` direction', function(this: KeyEventTestContext) {
         beforeEach(() => {
           keyManager.withVerticalOrientation();

src/cdk/a11y/key-manager/list-key-manager.ts

@@ -19,6 +19,8 @@ import {
   ZERO,
   NINE,
   hasModifierKey,
+  HOME,
+  END,
 } from '@angular/cdk/keycodes';
 import {debounceTime, filter, map, tap} from 'rxjs/operators';
 
@@ -47,6 +49,7 @@ export class ListKeyManager<T extends ListKeyManagerOption> {
   private _vertical = true;
   private _horizontal: 'ltr' | 'rtl' | null;
   private _allowedModifierKeys: ListKeyManagerModifierKey[] = [];
+  private _homeAndEnd = false;
 
   /**
    * Predicate function that can be used to check whether an item should be skipped
@@ -174,6 +177,15 @@ export class ListKeyManager<T extends ListKeyManagerOption> {
     return this;
   }
 
+  /**
+   * Configures the key manager to focus the first and last items
+   * respectively when the Home key and End Key are pressed.
+   */
+  withHomeAndEnd(): this {
+    this._homeAndEnd = true;
+    return this;
+  }
+
   /**
    * Sets the active item to the item at the index specified.
    * @param index The index of the item to be set as active.
@@ -244,6 +256,22 @@ export class ListKeyManager<T extends ListKeyManagerOption> {
           return;
         }
 
+      case HOME:
+        if (this._homeAndEnd && isModifierAllowed) {
+          this.setFirstItemActive();
+          break;
+        } else {
+          return;
+        }
+
+      case END:
+        if (this._homeAndEnd && isModifierAllowed) {
+          this.setLastItemActive();
+          break;
+        } else {
+          return;
+        }
+
       default:
       if (isModifierAllowed || hasModifierKey(event, 'shiftKey')) {
           // Attempt to use the `event.key` which also maps it to the user's keyboard language,

src/cdk/drag-drop/directives/drag.ts

@@ -191,7 +191,7 @@ export class CdkDrag<T = any> implements AfterViewInit, OnChanges, OnDestroy {
       @Optional() @Inject(CDK_DRAG_CONFIG) config: DragDropConfig,
       @Optional() private _dir: Directionality, dragDrop: DragDrop,
       private _changeDetectorRef: ChangeDetectorRef,
-      @Optional() @Self() private _selfHandle?: CdkDragHandle) {
+      @Optional() @Self() @Inject(CDK_DRAG_HANDLE) private _selfHandle?: CdkDragHandle) {
     this._dragRef = dragDrop.createDrag(element, {
       dragStartThreshold: config && config.dragStartThreshold != null ?
           config.dragStartThreshold : 5,

src/cdk/overlay/dispatchers/overlay-outside-click-dispatcher.ts

@@ -67,6 +67,8 @@ export class OverlayOutsideClickDispatcher extends BaseOverlayDispatcher {
 
   /** Click event listener that will be attached to the body propagate phase. */
   private _clickListener = (event: MouseEvent) => {
+    // Get the target through the `composedPath` if possible to account for shadow DOM.
+    const target = event.composedPath ? event.composedPath()[0] : event.target;
     const overlays = this._attachedOverlays;
 
     // Dispatch the mouse event to the top overlay which has subscribers to its mouse events.
@@ -81,7 +83,7 @@ export class OverlayOutsideClickDispatcher extends BaseOverlayDispatcher {
 
       const config = overlayRef.getConfig();
       const excludeElements = [...config.excludeFromOutsideClick!, overlayRef.overlayElement];
-      const isInsideClick: boolean = excludeElements.some(e => e.contains(event.target as Node));
+      const isInsideClick: boolean = excludeElements.some(e => e.contains(target));
 
       // If it is inside click just break - we should do nothing
       // If it is outside click dispatch the mouse event, and proceed with the next overlay

src/cdk/platform/features/scrolling.ts

@@ -48,7 +48,6 @@ export function getRtlScrollAxisType(): RtlScrollAxisType {
     const scrollContainer = document.createElement('div');
     const containerStyle = scrollContainer.style;
     scrollContainer.dir = 'rtl';
-    containerStyle.height = '1px';
     containerStyle.width = '1px';
     containerStyle.overflow = 'auto';
     containerStyle.visibility = 'hidden';

src/cdk/schematics/ng-update/devkit-file-system.ts

@@ -6,37 +6,26 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {normalize, Path, relative} from '@angular-devkit/core';
+import {normalize, Path, PathIsDirectoryException} from '@angular-devkit/core';
 import {Tree, UpdateRecorder} from '@angular-devkit/schematics';
+import {DirectoryEntry, FileSystem} from '../update-tool/file-system';
 import * as path from 'path';
-import {FileSystem} from '../update-tool/file-system';
 
 /**
  * File system that leverages the virtual tree from the CLI devkit. This file
  * system is commonly used by `ng update` migrations that run as part of the
  * Angular CLI.
  */
-export class DevkitFileSystem extends FileSystem<Path> {
+export class DevkitFileSystem extends FileSystem {
   private _updateRecorderCache = new Map<string, UpdateRecorder>();
-  private _workspaceFsPath: Path;
 
-  constructor(private _tree: Tree, workspaceFsPath: string) {
+  constructor(private _tree: Tree) {
     super();
-    this._workspaceFsPath = normalize(workspaceFsPath);
   }
 
   resolve(...segments: string[]): Path {
     // Note: We use `posix.resolve` as the devkit paths are using posix separators.
-    const resolvedPath = normalize(path.posix.resolve(...segments.map(normalize)));
-    // If the resolved path points to the workspace root, then this is an absolute disk
-    // path and we need to compute a devkit tree relative path.
-    if (resolvedPath.startsWith(this._workspaceFsPath)) {
-      return relative(this._workspaceFsPath, resolvedPath);
-    }
-    // Otherwise we know that the path is absolute (due to the resolve), and that it
-    // refers to an absolute devkit tree path (like `/angular.json`). We keep those
-    // unmodified as they are already resolved workspace paths.
-    return resolvedPath;
+    return normalize(path.posix.resolve('/', ...segments.map(normalize)));
   }
 
   edit(filePath: Path) {
@@ -53,8 +42,18 @@ export class DevkitFileSystem extends FileSystem<Path> {
     this._updateRecorderCache.clear();
   }
 
-  exists(filePath: Path) {
-    return this._tree.exists(filePath);
+  exists(fileOrDirPath: Path) {
+    // The devkit tree does not expose an API for checking whether a given
+    // directory exists. It throws a specific error though if a directory
+    // is being read as a file. We use that to check if a directory exists.
+    try {
+      return this._tree.get(fileOrDirPath) !== null;
+    } catch (e) {
+      if (e instanceof PathIsDirectoryException) {
+        return true;
+      }
+    }
+    return false;
   }
 
   overwrite(filePath: Path, content: string) {
@@ -73,4 +72,9 @@ export class DevkitFileSystem extends FileSystem<Path> {
     const buffer = this._tree.read(filePath);
     return buffer !== null ? buffer.toString() : null;
   }
+
+  readDirectory(dirPath: Path): DirectoryEntry {
+    const {subdirs: directories, subfiles: files} = this._tree.getDir(dirPath);
+    return {directories, files};
+  }
 }