MD Settings: Implementing modal popup/action menus.

chrome/browser/resources/settings/cr_action_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.
+
+Polymer({
+  is: 'cr-action-menu',
+  extends: 'dialog',
+
+  /**
+   * List of all options in this action menu.
+   * @private {?HTMLElement}
+   */
+  buttons_: null,
+
+  /**
+   * Index of the currently focused item.
+   * @private {number}
+   */
+  focusedIndex_: 0,
+
+  /**
+   * Reference to the bound window's resize listener, such that it can be
+   * removed on detach.
+   * @private {?Function}
+   */
+  onWindowResize_: null,

[Dan Beam, 2016/10/13 00:28:34]

nit: just do this after the ctor as like "boundResize_" imo

[dpapad, 2016/10/13 00:51:22]

By ctor do you mean "attached"?

+
+  /** override */
+  attached: function() {
+    this.setAttribute('tabindex', 0);
+    this.buttons_ = this.querySelectorAll('button');
+
+    this.onWindowResize_ = function() {
+      if (this.open)
+        this.close();
+    }.bind(this);
+
+    window.addEventListener('resize', this.onWindowResize_);
+  },
+
+  /** override */
+  detached: function() {
+    window.removeEventListener('resize', this.onWindowResize_);
+  },
+
+  /** @override */
+  ready: function() {
+    this.addEventListener('click', function(e) {
+      if (e.target == this) {
+        this.close();
+        e.stopPropagation();
+      }
+    }.bind(this));
+
+    this.addEventListener('keydown', function(e) {
+      if (e.key == 'Tab') {
+        this.close();
+        return;
+      }
+
+      if (e.key !== 'ArrowDown' && e.key !== 'ArrowUp' &&
+          e.key !== 'ArrowLeft' && e.key !== 'ArrowRight') {

[Dan Beam, 2016/10/13 00:28:34]

nit: just drop 'ArrowLeft' and 'ArrowRight' for now, IMO

[dpapad, 2016/10/13 00:51:22]

Done.

+        return;
+      }
+
+      var nextButton = this.getNextButton_(
+          e.key == 'ArrowDown' || e.key == 'ArrowRight' ? 1 : - 1);
+      if (nextButton !== null)

[Dan Beam, 2016/10/13 00:28:33]

if (nextButton)

[dpapad, 2016/10/13 00:51:22]

Done.

+        nextButton.focus();
+
+      e.preventDefault();
+    }.bind(this));
+  },
+
+  /**
+   * @param {number} step -1 for getting previous button (up), 1 for getting
+   *     next button (down).
+   * @return {?HTMLElement} The next option to be focused, taking into account
+   *     disabled options, or null if all options are disabled.
+   * @private
+   */
+  getNextButton_: function(step) {
+    // Storing the focused index before searching, to avoid infinite loop if all
+    // buttons are disabled.
+    var previousFocusedIndex = this.focusedIndex_;
+
+    var getNextButtonRec_ = function() {
+      // Advanced index.
+      this.focusedIndex_ = (this.focusedIndex_ + step) % this.buttons_.length;
+      if (this.focusedIndex_ == -1)
+        this.focusedIndex_ = this.buttons_.length - 1;
+
+      // Adjust index in case item is disabled.
+      if (this.buttons_[this.focusedIndex_].disabled) {
+        return this.focusedIndex_ != previousFocusedIndex ?
+            getNextButtonRec_() : null;
+      } else {
+        return this.buttons_[this.focusedIndex_];
+      }
+    }.bind(this);
+
+    return getNextButtonRec_();
+  },
+
+  /**
+   * Shows the menu anchored to the given rectangle.
+   * @param {!ClientRect} rect
+   */
+  showAtLocation: function(rect) {
+    this.showModal();

[Dan Beam, 2016/10/13 00:28:34]

why does showModal() happen before positioning?

[dpapad, 2016/10/13 00:51:22]

Because this.offsetWidth, this.offsetHeight are not set before calling
setModal(). BTW, you are reviewing an older patch. This is not latest version.

+    this.focusedIndex_ = 0;
+
+    var left = rect.right - this.offsetWidth;
+
+    // Attempt to show the menu starting from the top of the rectangle and
+    // extending downwards. If that does not fit within the window, fallback to
+    // starting from the bottom and extending upwards.
+   var top = rect.top + this.offsetHeight <= window.innerHeight ?
+       rect.top :
+       rect.bottom - this.offsetHeight - Math.max(
+           rect.bottom - window.innerHeight, 0);
+
+    this.style.top = top + 'px';
+    this.style.left = left + 'px';
+  },
+});