Make pop-up menus more easily dismissable.

remoting/webapp/menu_button.js

Index: remoting/webapp/menu_button.js
diff --git a/remoting/webapp/menu_button.js b/remoting/webapp/menu_button.js
index 73c7642d1e12995b339dc54294ea9219f16a66a0..f2dac45b8086c45bf37b5f97d2252f5a087e1253 100644
--- a/remoting/webapp/menu_button.js
+++ b/remoting/webapp/menu_button.js
@@ -47,35 +47,35 @@ remoting.MenuButton = function(container, opt_onShow, opt_onHide) {
    */
   this.onHide_ = opt_onHide;
 
-  /** @type {remoting.MenuButton} */
-  var that = this;
-
   /**
-   * @type {function(Event):void}
+   * @type {HTMLElement}
    * @private
    */
-  var closeHandler = function(event) {
+  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;
+
+  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);
 };
 
 /**