MD WebUI: Reimplement cr-shared-menu using iron-dropdown.

ui/webui/resources/cr_elements/cr_shared_menu/cr_shared_menu.js

 // Copyright 2016 The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
 /** Same as paper-menu-button's custom easing cubic-bezier param. */
 var SLIDE_CUBIC_BEZIER = 'cubic-bezier(0.3, 0.95, 0.5, 1)';
-var FADE_CUBIC_BEZIER = 'cubic-bezier(0.4, 0, 0.2, 1)';
 
 Polymer({
   is: 'cr-shared-menu',
 
+  behaviors: [Polymer.IronA11yKeysBehavior],
+
   properties: {
     menuOpen: {
       type: Boolean,
+      observer: 'menuOpenChanged_',
       value: false,
     },
 
     /**
      * The contextual item that this menu was clicked for.
      *  e.g. the data used to render an item in an <iron-list> or <dom-repeat>
      * @type {?Object}
      */
     itemData: {
       type: Object,
       value: null,
     },
+

[Dan Beam, 2016/07/07 17:38:24]

do all of these need /** @override */?

[tsergeant, 2016/07/11 03:30:49]

keyEventTarget should have one, the others should not. Done.

+    keyEventTarget: {
+      type: Object,
+      value: function() {
+        return this.$.menu;
+      }
+    },
+
+    openAnimationConfig: {
+      type: Object,
+      value: function() {
+        return [{
+          name: 'fade-in-animation',
+          timing: {
+            delay: 50,
+            duration: 200
+          }
+        }, {
+          name: 'paper-menu-grow-width-animation',
+          timing: {
+            delay: 50,
+            duration: 150,
+            easing: SLIDE_CUBIC_BEZIER
+          }
+        }, {
+          name: 'paper-menu-grow-height-animation',
+          timing: {
+            delay: 100,
+            duration: 275,
+            easing: SLIDE_CUBIC_BEZIER
+          }
+        }];
+      }
+    },
+
+    closeAnimationConfig: {
+      type: Object,
+      value: function() {
+        return [{
+          name: 'fade-out-animation',
+          timing: {
+            duration: 150
+          }
+        }, {
+          name: 'paper-menu-shrink-width-animation',
+          timing: {
+            delay: 100,
+            duration: 50,
+            easing: SLIDE_CUBIC_BEZIER
+          }
+        }, {
+          name: 'paper-menu-shrink-height-animation',
+          timing: {
+            delay: 200,
+            easing: 'ease-in'
+          }
+        }];
+      }
+    }
   },
 
-  /**
-   * Current animation being played, or null if there is none.
-   * @type {?Animation}
-   * @private
-   */
-  animation_: null,
+  keyBindings: {
+    'tab': 'onTabPressed_',
+  },
 
   /**
    * The last anchor that was used to open a menu. It's necessary for toggling.
    * @type {?Element}
+   * @private
    */
   lastAnchor_: null,
 
   /**
-   * Adds listeners to the window in order to dismiss the menu on resize and
-   * when escape is pressed.
+   * The first focusable child in the menu's light DOM.
+   * @private
+   * @type {?Element}

[Dan Beam, 2016/07/07 17:38:24]

nit: @private {?Element}

[tsergeant, 2016/07/11 03:30:49]

Done.

    */
+  firstFocus_: null,
+
+  /**
+   * The last focusable child in the menu's light DOM.
+   * @private
+   * @type {?Element}
+   */
+  lastFocus_: null,
+
+  /** @override */
   attached: function() {
     window.addEventListener('resize', this.closeMenu.bind(this));
-    window.addEventListener('keydown', function(e) {
-      // Escape button on keyboard
-      if (e.keyCode == 27)
-        this.closeMenu();
-    }.bind(this));
+
+    var focusableChildren = Polymer.dom(this).querySelectorAll(

[Dan Beam, 2016/07/07 17:38:24]

why are you doing this only once on attached? what if the DOM changes? :(

+        '[tabindex],button');

[Dan Beam, 2016/07/07 17:38:24]

what if the thing is [disabled] or [hidden]?  this is gonna get real hairy real
fast

[tsergeant, 2016/07/11 03:30:49]

My hope was to keep this as simple as possible until iron-overlay-behavior
extracts out their focus trapping into a reusable behavior
(https://github.com/PolymerElements/iron-overlay-behavior/pull/178). This simple
version is enough to work with all current uses of cr-shared-menu.

I can still implement these fixes if you'd prefer, but like you say, it will get
hairy quickly.

+    if (focusableChildren.length > 0) {
+      this.$.dropdown.focusTarget = focusableChildren[0];
+      this.firstFocus_ = focusableChildren[0];
+      this.lastFocus_ = focusableChildren[focusableChildren.length - 1];
+    }
   },
 
   /** Closes the menu. */
   closeMenu: function() {
-    if (!this.menuOpen)
-      return;
-    // If there is a open menu animation going, cancel it and start closing.
-    this.cancelAnimation_();
     this.menuOpen = false;
-    this.itemData = null;
-    this.animation_ = this.animateClose_();
-    this.animation_.addEventListener('finish', function() {
-      this.style.display = 'none';
-      // Reset the animation for the next time the menu opens.
-      this.cancelAnimation_();
-    }.bind(this));
   },
 
   /**
+   * Close the menu without refocusing the menu button which opened it. Should
+   * be used when the menu action causes another element to be focused.

[Dan Beam, 2016/07/07 17:38:24]

can we combine both closeMenu*() and just restore focus if our sub-DOM is still
"active" (i.e. still has focus)?

[tsergeant, 2016/07/11 03:30:49]

Good idea, Done.

+   */
+  closeMenuNoRefocus: function() {
+    this.$.dropdown.restoreFocusOnClose = false;
+    this.closeMenu();
+    this.$.dropdown.restoreFocusOnClose = true;
+  },
+
+  /**
    * Opens the menu at the anchor location.
    * @param {!Element} anchor The location to display the menu.
    * @param {!Object} itemData The contextual item's data.
    */
   openMenu: function(anchor, itemData) {
-    this.menuOpen = true;
-    this.style.display = 'block';
     this.itemData = itemData;
     this.lastAnchor_ = anchor;
 
     // Move the menu to the anchor.
-    var anchorRect = anchor.getBoundingClientRect();
-    var parentRect = this.offsetParent.getBoundingClientRect();
-
-    var left = (isRTL() ? anchorRect.left : anchorRect.right) - parentRect.left;
-    var top = anchorRect.top - parentRect.top;
-
-    cr.ui.positionPopupAtPoint(left, top, this, cr.ui.AnchorType.BEFORE);
-
-    // Handle the bottom of the screen.
-    if (this.getBoundingClientRect().top != anchorRect.top) {
-      var bottom = anchorRect.bottom - parentRect.top;
-      cr.ui.positionPopupAtPoint(left, bottom, this, cr.ui.AnchorType.BEFORE);
-    }
-
-    this.$.menu.focus();
-
-    this.cancelAnimation_();
-    this.animation_ = this.animateOpen_();
+    this.$.dropdown.positionTarget = anchor;
+    this.menuOpen = true;
   },
 
   /**
    * Toggles the menu for the anchor that is passed in.
    * @param {!Element} anchor The location to display the menu.
    * @param {!Object} itemData The contextual item's data.
    */
   toggleMenu: function(anchor, itemData) {
-    // If there is an animation going (e.g. user clicks too fast), cancel it and
-    // start the new action.
-    this.cancelAnimation_();
     if (anchor == this.lastAnchor_ && this.menuOpen)
       this.closeMenu();
     else
       this.openMenu(anchor, itemData);
   },
 
-  /** @private */
-  cancelAnimation_: function() {
-    if (this.animation_) {
-      this.animation_.cancel();
-      this.animation_ = null;
+  /**
+   * Trap focus inside the menu. As a very basic heuristic, will wrap focus from
+   * the first element with a nonzero tabindex to the last such element.
+   * TODO(tsergeant): Use iron-focus-wrap-behavior once it is available
+   * (https://github.com/PolymerElements/iron-overlay-behavior/issues/179).
+   * @param {CustomEvent} e
+   */
+  onTabPressed_: function(e) {
+    var keyEvent = e.detail.keyboardEvent;

[Dan Beam, 2016/07/07 17:38:24]

declare vars as low as possible

[tsergeant, 2016/07/11 03:30:48]

Done.

+    if (this.firstFocus_ && this.lastFocus_) {

[Dan Beam, 2016/07/07 17:38:24]

arguable nit: just bail if either of these aren't set

[tsergeant, 2016/07/11 03:30:49]

Done.

+      if (keyEvent.shiftKey && keyEvent.target == this.firstFocus_) {
+        e.preventDefault();
+        this.lastFocus_.focus();

[Dan Beam, 2016/07/07 17:38:24]

make a variable |toFocus| (or something) and prevent the default and call
.focus() if it exists after this block

[tsergeant, 2016/07/11 03:30:49]

Done.

+      } else if (keyEvent.target == this.lastFocus_) {
+        e.preventDefault();
+        this.firstFocus_.focus();
+      }
     }

[Dan Beam, 2016/07/07 17:38:24]

tl;dr - my suggestions combined

if (!this.firstFocus_ || !this.lastFocus_)
  return;

var toFocus;
var keyEvent = e.detail.keyboardEvent;
if (keyEvent.shiftKey && keyEvent.target == this.firstFocus_)
  toFocus = this.lastFocus_;
else if (keyEvent.target == this.lastFocus_)
  toFocus = this.firstFocus_;

if (!toFocus)
  return;

e.preventDefault();
toFocus.focus();

[tsergeant, 2016/07/11 03:30:49]

Done.

   },
 
   /**
-   * @param {!Array<!KeyframeEffect>} effects
-   * @return {!Animation}
+   * Ensure the menu is reset properly when it is closed by the dropdown (eg,
+   * clicking outside).
+   * @private
    */
-  playEffects: function(effects) {
-    /** @type {function(new:Object, !Array<!KeyframeEffect>)} */
-    window.GroupEffect;
-
-    /** @type {{play: function(Object): !Animation}} */
-    document.timeline;
-
-    return document.timeline.play(new window.GroupEffect(effects));
-  },
-
-  /**
-   * Slide-in animation when opening the menu. The animation configuration is
-   * the same as paper-menu-button except for a shorter delay time.
-   * @private
-   * @return {!Animation}
-   */
-  animateOpen_: function() {
-    var rect = this.getBoundingClientRect();
-    var height = rect.height;
-    var width = rect.width;
-
-    var fadeIn = new KeyframeEffect(/** @type {Animatable} */(this), [{
-      'opacity': '0'
-    }, {
-      'opacity': '1'
-    }], /** @type {!KeyframeEffectOptions} */({
-      delay: 50,
-      duration: 200,
-      easing: FADE_CUBIC_BEZIER,
-      fill: 'both'
-    }));
-
-    var growHeight = new KeyframeEffect(/** @type {Animatable} */(this), [{
-      height: (height / 2) + 'px'
-    }, {
-      height: height + 'px'
-    }], /** @type {!KeyframeEffectOptions} */({
-      delay: 50,
-      duration: 275,
-      easing: SLIDE_CUBIC_BEZIER,
-      fill: 'both'
-    }));
-
-    var growWidth = new KeyframeEffect(/** @type {Animatable} */(this), [{
-      width: (width / 2) + 'px'
-    }, {
-      width: width + 'px'
-    }], /** @type {!KeyframeEffectOptions} */({
-      delay: 50,
-      duration: 150,
-      easing: SLIDE_CUBIC_BEZIER,
-      fill: 'both'
-    }));
-
-    return this.playEffects([fadeIn, growHeight, growWidth]);
-  },
-
-  /**
-   * Slide-out animation when closing the menu. The animation configuration is
-   * the same as paper-menu-button.
-   * @private
-   * @return {!Animation}
-   */
-  animateClose_: function() {
-    var rect = this.getBoundingClientRect();
-    var height = rect.height;
-    var width = rect.width;
-
-    var fadeOut = new KeyframeEffect(/** @type {Animatable} */(this), [{
-      'opacity': '1'
-    }, {
-      'opacity': '0'
-    }], /** @type {!KeyframeEffectOptions} */({
-      duration: 150,
-      easing: FADE_CUBIC_BEZIER,
-      fill: 'both'
-    }));
-
-    var shrinkHeight = new KeyframeEffect(/** @type {Animatable} */(this), [{
-      height: height + 'px',
-      transform: 'translateY(0)'
-    }, {
-      height: height / 2 + 'px',
-      transform: 'translateY(-20px)'
-    }], /** @type {!KeyframeEffectOptions} */({
-      duration: 200,
-      easing: 'ease-in',
-      fill: 'both'
-    }));
-
-    var shrinkWidth = new KeyframeEffect(/** @type {Animatable} */(this), [{
-      width: width + 'px'
-    }, {
-      width: width - (width / 20) + 'px'
-    }], /** @type {!KeyframeEffectOptions} */({
-      delay: 100,
-      duration: 50,
-      easing: SLIDE_CUBIC_BEZIER,
-      fill: 'both'
-    }));
-
-    return this.playEffects([fadeOut, shrinkHeight, shrinkWidth]);
+  menuOpenChanged_: function() {
+    if (!this.menuOpen) {
+      this.itemData = null;
+    }

[Dan Beam, 2016/07/07 17:38:24]

no curlies

[tsergeant, 2016/07/11 03:30:49]

Done.

   },
 });