WebUI: Close cr-action-menu on popstate event.

ui/webui/resources/cr_elements/cr_action_menu/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 {?NodeList<!Element>}
    */
   options_: null,
 
   /**
    * The element which the action menu will be anchored to. Also the element
    * where focus will be returned after the menu is closed.
    * @private {?Element}
    */
   anchorElement_: null,
 
   /**
-   * Reference to the bound window's resize listener, such that it can be
-   * removed on detach.
+   * Bound reference to an event listener function such that it can be removed
+   * on detach.
    * @private {?Function}
    */
-  onWindowResize_: null,
+  boundClose_: null,
 
   hostAttributes: {
     tabindex: 0,
   },
 
   listeners: {
     'keydown': 'onKeyDown_',
     'tap': 'onTap_',
   },
 
   /** override */
   attached: function() {
     this.options_ = this.querySelectorAll('.dropdown-item');
   },
 
   /** override */
   detached: function() {
-    this.removeResizeListener_();
+    this.removeListeners_();
   },
 
   /** @private */
-  removeResizeListener_: function() {
-    window.removeEventListener('resize', this.onWindowResize_);
+  removeListeners_: function() {
+    window.removeEventListener('resize', this.boundClose_);
+    window.removeEventListener('popstate', this.boundClose_);
   },
 
   /**
    * @param {!Event} e
    * @private
    */
   onTap_: function(e) {
     if (e.target == this) {
       this.close();
       e.stopPropagation();
@@ skipping 43 matching lines @@
       if (nextOption.disabled || nextOption.hidden)
         nextOption = null;
       counter++;
     } while (!nextOption && counter < numOptions);
 
     return nextOption;
   },
 
   /** @override */
   close: function() {
-    // Removing 'resize' listener when dialog is closed.
-    this.removeResizeListener_();
+    // Removing 'resize' and 'popstate' listeners when dialog is closed.
+    this.removeListeners_();
     HTMLDialogElement.prototype.close.call(this);
     this.anchorElement_.focus();
     this.anchorElement_ = null;
   },
 
   /**
    * Shows the menu anchored to the given element.
    * @param {!Element} anchorElement
    */
   showAt: function(anchorElement) {
     this.anchorElement_ = anchorElement;
-    this.onWindowResize_ = this.onWindowResize_ || function() {
+    this.boundClose_ = this.boundClose_ || function() {
       if (this.open)
         this.close();
     }.bind(this);
-    window.addEventListener('resize', this.onWindowResize_);
+    window.addEventListener('resize', this.boundClose_);
+    window.addEventListener('popstate', this.boundClose_);
 
     // Reset position to prevent previous values from affecting layout.
     this.style.left = '';
     this.style.right = '';
     this.style.top = '';
 
     this.showModal();
 
     var rect = this.anchorElement_.getBoundingClientRect();
     if (getComputedStyle(this.anchorElement_).direction == 'rtl') {
       var right = window.innerWidth - rect.left - this.offsetWidth;
       this.style.right = right + 'px';
     } else {
       var left = rect.right - this.offsetWidth;
       this.style.left = left + 'px';
     }
 
     // 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';
   },
 });