refactor(cdk/overlay): enable popover by default

Enables popovers for all overlays by default.

Author: crisbeto

src/cdk/overlay/_index.scss

@@ -195,7 +195,7 @@ $backdrop-animation-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1) !default;
     position: fixed;
     pointer-events: none;
     white-space: normal;
-    line-height: normal;
+    color: inherit;
     text-decoration: none;
 
     // These are important so the overlay can be measured before it's fully inserted.
@@ -206,13 +206,18 @@ $backdrop-animation-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1) !default;
     // with `align-self` can break the positioning (see #29809).
     inset: auto;
 
+    // Some older versions of Chrome won't render the popover properly without these.
+    top: 0;
+    left: 0;
+
     // For the time being we're using our `.cdk-overlay-backdrop` element instead of the native one.
     &::backdrop {
       display: none;
     }
 
     .cdk-overlay-backdrop {
       position: fixed;
+      z-index: auto;
     }
   }
 }

src/cdk/overlay/overlay-config.ts

@@ -65,7 +65,7 @@ export class OverlayConfig {
    * Whether the overlay should be rendered as a native popover element,
    * rather than placing it inside of the overlay container.
    */
-  usePopover?: boolean = false;
+  usePopover?: boolean;
 
   constructor(config?: OverlayConfig) {
     if (config) {

src/cdk/overlay/overlay-directives.ts

@@ -253,7 +253,7 @@ export class CdkConnectedOverlay implements OnDestroy, OnChanges {
 
   /** Whether the connected overlay should be rendered inside a popover element or the overlay container. */
   @Input({alias: 'cdkConnectedOverlayUsePopover'})
-  usePopover: FlexibleOverlayPopoverLocation | null = null;
+  usePopover: FlexibleOverlayPopoverLocation | null = 'global';
 
   /** Whether the overlay should match the trigger's width. */
   @Input({alias: 'cdkConnectedOverlayMatchWidth', transform: booleanAttribute})

src/cdk/overlay/overlay-ref.ts

@@ -417,7 +417,12 @@ export class OverlayRef implements PortalOutlet {
     }
 
     if (this._config.usePopover) {
-      this._host.showPopover();
+      // We need the try/catch because the browser will throw if the
+      // host or any of the parents are outside the DOM. Also note
+      // the string access which is there for compatibility with Closure.
+      try {
+        this._host['showPopover']();
+      } catch {}
     }
   }
 

src/cdk/overlay/overlay.spec.ts

@@ -141,9 +141,9 @@ describe('Overlay', () => {
     expect(overlayContainerElement.textContent).toBe('');
   });
 
-  it('should ensure that the most-recently-attached overlay is on top', () => {
-    let pizzaOverlayRef = createOverlayRef(injector);
-    let cakeOverlayRef = createOverlayRef(injector);
+  it('should ensure that the most-recently-attached overlay is on top when popovers are disabled', () => {
+    let pizzaOverlayRef = createOverlayRef(injector, {usePopover: false});
+    let cakeOverlayRef = createOverlayRef(injector, {usePopover: false});
 
     pizzaOverlayRef.attach(componentPortal);
     cakeOverlayRef.attach(templatePortal);
@@ -850,7 +850,7 @@ describe('Overlay', () => {
     });
 
     it('should insert the backdrop before the overlay host in the DOM order', () => {
-      const overlayRef = createOverlayRef(injector, config);
+      const overlayRef = createOverlayRef(injector, {...config, usePopover: false});
 
       overlayRef.attach(componentPortal);
       viewContainerFixture.detectChanges();

src/cdk/overlay/overlay.ts

@@ -52,9 +52,13 @@ export function createOverlayRef(injector: Injector, config?: OverlayConfig): Ov
     injector.get(RendererFactory2).createRenderer(null, null);
 
   const overlayConfig = new OverlayConfig(config);
-
   overlayConfig.direction = overlayConfig.direction || directionality.value;
-  overlayConfig.usePopover = !!overlayConfig?.usePopover && 'showPopover' in doc.body;
+
+  if (!('showPopover' in doc.body)) {
+    overlayConfig.usePopover = false;
+  } else {
+    overlayConfig.usePopover = config?.usePopover ?? true;
+  }
 
   const pane = doc.createElement('div');
   const host = doc.createElement('div');

src/cdk/overlay/position/flexible-connected-position-strategy.spec.ts

@@ -140,6 +140,7 @@ describe('FlexibleConnectedPositionStrategy', () => {
     overlayContainer.getContainerElement().style.top = '-100px';
 
     attachOverlay({
+      usePopover: false,
       positionStrategy: createFlexibleConnectedPositionStrategy(injector, originElement)
         .withFlexibleDimensions(false)
         .withPush(false)