Roll Polymer elements

third_party/polymer/v1_0/components-chromium/iron-overlay-behavior/iron-overlay-behavior-extracted.js

 (function() {
 'use strict';
 
 /**
 Use `Polymer.IronOverlayBehavior` to implement an element that can be hidden or shown, and displays
 on top of other content. It includes an optional backdrop, and can be used to implement a variety
 of UI controls including dialogs and drop downs. Multiple overlays may be displayed at once.
 
 ### Closing and canceling
 
@@ skipping 282 matching lines @@
         this.removeAttribute('aria-hidden');
       } else {
         this.setAttribute('aria-hidden', 'true');
       }
 
       // wait to call after ready only if we're initially open
       if (!this._overlaySetup) {
         return;
       }
 
-      this._manager.addOrRemoveOverlay(this);
-
       if (this.__openChangedAsync) {
         window.cancelAnimationFrame(this.__openChangedAsync);
       }
 
+      // Synchronously remove the overlay.
+      // The adding is done asynchronously to go out of the scope of the event
+      // which might have generated the opening.
+      if (!this.opened) {
+        this._manager.removeOverlay(this);
+      }
+
       // Defer any animation-related code on attached
       // (_openedChanged gets called again on attached).
       if (!this.isAttached) {
         return;
       }
 
       this.__isAnimating = true;
 
       // requestAnimationFrame for non-blocking rendering
       this.__openChangedAsync = window.requestAnimationFrame(function() {
         this.__openChangedAsync = null;
         if (this.opened) {
+          this._manager.addOverlay(this);
           this._prepareRenderOpened();
           this._renderOpened();
         } else {
           this._renderClosed();
         }
       }.bind(this));
     },
 
     _canceledChanged: function() {
       this.closingReason = this.closingReason || {};
       this.closingReason.canceled = this.canceled;
     },
 
     _withBackdropChanged: function() {
       // If tabindex is already set, no need to override it.
       if (this.withBackdrop && !this.hasAttribute('tabindex')) {
         this.setAttribute('tabindex', '-1');
         this.__shouldRemoveTabIndex = true;
       } else if (this.__shouldRemoveTabIndex) {
         this.removeAttribute('tabindex');
         this.__shouldRemoveTabIndex = false;
       }
-      if (this.opened) {
+      if (this.opened && this.isAttached) {
         this._manager.trackBackdrop();
       }
     },
 
     /**
      * tasks which must occur before opening; e.g. making the element visible.
      * @protected
      */
     _prepareRenderOpened: function() {
 
@@ skipping 29 matching lines @@
     /**
      * Tasks to be performed at the end of open action. Will fire `iron-overlay-opened`.
      * @protected
      */
     _finishRenderOpened: function() {
       // Focus the child node with [autofocus]
       this._applyFocus();
 
       this.notifyResize();
       this.__isAnimating = false;
+
+      // Store it so we don't query too much.
+      var focusableNodes = this._focusableNodes;
+      this.__firstFocusableNode = focusableNodes[0];
+      this.__lastFocusableNode = focusableNodes[focusableNodes.length - 1];
+
       this.fire('iron-overlay-opened');
     },
 
     /**
      * Tasks to be performed at the end of close action. Will fire `iron-overlay-closed`.
      * @protected
      */
     _finishRenderClosed: function() {
       // Hide the overlay and remove the backdrop.
       this.style.display = 'none';
@@ skipping 84 matching lines @@
       }
     },
 
     /**
      * Handles TAB key events to track focus changes.
      * Will wrap focus for overlays withBackdrop.
      * @param {!Event} event
      * @protected
      */
     _onCaptureTab: function(event) {
+      if (!this.withBackdrop) {
+        return;
+      }
       // TAB wraps from last to first focusable.
       // Shift + TAB wraps from first to last focusable.
       var shift = event.shiftKey;
       var nodeToCheck = shift ? this.__firstFocusableNode : this.__lastFocusableNode;
       var nodeToSet = shift ? this.__lastFocusableNode : this.__firstFocusableNode;
-      if (this.withBackdrop && this._focusedChild === nodeToCheck) {
+      var shouldWrap = false;
+      if (nodeToCheck === nodeToSet) {
+        // If nodeToCheck is the same as nodeToSet, it means we have an overlay
+        // with 0 or 1 focusables; in either case we still need to trap the
+        // focus within the overlay.
+        shouldWrap = true;
+      } else {
+        // In dom=shadow, the manager will receive focus changes on the main
+        // root but not the ones within other shadow roots, so we can't rely on
+        // _focusedChild, but we should check the deepest active element.
+        var focusedNode = this._manager.deepActiveElement;
+        // If the active element is not the nodeToCheck but the overlay itself,
+        // it means the focus is about to go outside the overlay, hence we
+        // should prevent that (e.g. user opens the overlay and hit Shift+TAB).
+        shouldWrap = (focusedNode === nodeToCheck || focusedNode === this);
+      }
+
+      if (shouldWrap) {
         // When the overlay contains the last focusable element of the document
         // and it's already focused, pressing TAB would move the focus outside
         // the document (e.g. to the browser search bar). Similarly, when the
         // overlay contains the first focusable element of the document and it's
         // already focused, pressing Shift+TAB would move the focus outside the
         // document (e.g. to the browser search bar).
         // In both cases, we would not receive a focus event, but only a blur.
         // In order to achieve focus wrapping, we prevent this TAB event and
         // force the focus. This will also prevent the focus to temporarily move
         // outside the overlay, which might cause scrolling.
@@ skipping 22 matching lines @@
 
     /**
      * Will call notifyResize if overlay is opened.
      * Can be overridden in order to avoid multiple observers on the same node.
      * @protected
      */
     _onNodesChange: function() {
       if (this.opened && !this.__isAnimating) {
         this.notifyResize();
       }
-      // Store it so we don't query too much.
-      var focusableNodes = this._focusableNodes;
-      this.__firstFocusableNode = focusableNodes[0];
-      this.__lastFocusableNode = focusableNodes[focusableNodes.length - 1];
     }
   };
 
   /** @polymerBehavior */
   Polymer.IronOverlayBehavior = [Polymer.IronFitBehavior, Polymer.IronResizableBehavior, Polymer.IronOverlayBehaviorImpl];
 
   /**
    * Fired after the overlay opens.
    * @event iron-overlay-opened
    */
 
   /**
    * Fired when the overlay is canceled, but before it is closed.
    * @event iron-overlay-canceled
    * @param {Event} event The closing of the overlay can be prevented
    * by calling `event.preventDefault()`. The `event.detail` is the original event that
    * originated the canceling (e.g. ESC keyboard event or click event outside the overlay).
    */
 
   /**
    * Fired after the overlay closes.
    * @event iron-overlay-closed
    * @param {Event} event The `event.detail` is the `closingReason` property
    * (contains `canceled`, whether the overlay was canceled).
    */
 
 })();