Make pop-up menus more easily dismissable.

remoting/webapp/menu_button.js

 // Copyright (c) 2012 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.
 
 /**
  * @fileoverview
  * Class representing a menu button and its associated menu items.
  */
 
 'use strict';
@@ skipping 29 matching lines @@
    * @private
    */
   this.onShow_ = opt_onShow;
 
   /**
    * @type {undefined|function():void}
    * @private
    */
   this.onHide_ = opt_onHide;
 
+  /**
+   * @type {HTMLElement}
+   * @private
+   */
+  this.clickTrap_ = /** @type {HTMLElement} */ (document.createElement('div'));
+  this.clickTrap_.classList.add('menu-button-click-trap');

[Wez, 2014/09/23 16:36:49]

I think the clickTrap needs some documentation, e.g. to explain that it's behind
the menu but in front of everything else in the window, thereby ensuring that no
matter where the user clicks, the menu will be dismissed.

[Jamie, 2014/09/23 21:06:34]

Done.

+
   /** @type {remoting.MenuButton} */
   var that = this;
 
-  /**
-   * @type {function(Event):void}
-   * @private
-   */
-  var closeHandler = function(event) {
+  var closeHandler = function() {
     that.button_.classList.remove(remoting.MenuButton.BUTTON_ACTIVE_CLASS_);
-    document.body.removeEventListener('click', closeHandler, false);
+    container.removeChild(that.clickTrap_);
     if (that.onHide_) {
       that.onHide_();
     }
   };
 
-  /**
-   * @type {function(Event):void}
-   * @private
-   */
-  var onClick = function(event) {
+  var onClick = function() {
     if (that.onShow_) {
       that.onShow_();
     }
     that.button_.classList.add(remoting.MenuButton.BUTTON_ACTIVE_CLASS_);
-    document.body.addEventListener('click', closeHandler, false);
-    event.stopPropagation();
+    container.appendChild(that.clickTrap_);
   };
 
   this.button_.addEventListener('click', onClick, false);
+  this.clickTrap_.addEventListener('click', closeHandler, false);
+  this.menu_.addEventListener('click', closeHandler, false);
 };
 
 /**
  * @return {HTMLElement} The button that activates the menu.
  */
 remoting.MenuButton.prototype.button = function() {
   return this.button_;
 };
 
 /**
@@ skipping 12 matching lines @@
 remoting.MenuButton.select = function(item, selected) {
   if (selected) {
     /** @type {DOMTokenList} */(item.classList).add('selected');
   } else {
     /** @type {DOMTokenList} */(item.classList).remove('selected');
   }
 };
 
 /** @const @private */
 remoting.MenuButton.BUTTON_ACTIVE_CLASS_ = 'active';