Ignore mouseup shortly after showing cr.ui.Menu

ui/webui/resources/js/cr/ui/menu.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.
 
 cr.define('cr.ui', function() {
 
   /** @const */ var MenuItem = cr.ui.MenuItem;
 
   /**
    * Creates a new menu element. Menu dispatches all commands on the element it
@@ skipping 14 matching lines @@
      * Element for which menu is being shown.
      */
     contextElement: null,
 
     /**
      * Initializes the menu element.
      */
     decorate: function() {
       this.addEventListener('mouseover', this.handleMouseOver_);
       this.addEventListener('mouseout', this.handleMouseOut_);
+      this.addEventListener('mouseup', this.handleMouseUp_, true);
 
       this.classList.add('decorated');
       this.setAttribute('role', 'menu');
       this.hidden = true;  // Hide the menu by default.
 
       // Decorate the children as menu items.
       var menuItems = this.menuItems;
       for (var i = 0, menuItem; menuItem = menuItems[i]; i++) {
         cr.ui.decorate(menuItem, MenuItem);
       }
@@ skipping 61 matching lines @@
 
     /**
      * Handles mouseout events and deselects any selected item.
      * @param {Event} e The mouseout event.
      * @private
      */
     handleMouseOut_: function(e) {
       this.selectedItem = null;
     },
 
+    /**
+     * If there's a mouseup that happens quickly in about the same position,
+     * stop it from propagating to items. This is to prevent accidentally
+     * selecting a menu item that's created under the mouse cursor.
+     * @param {Event} e A mouseup event on the menu (in capturing phase).
+     * @private
+     */
+    handleMouseUp_: function(e) {
+      assert(this.contains(/** @type {Element} */(e.target)));
+
+      if (!this.trustEvent_(e) || Date.now() - this.shown_.time > 200)
+        return;
+
+      var pos = this.shown_.mouseDownPos;
+      if (!pos || Math.abs(pos.x - e.screenX) + Math.abs(pos.y - e.screenY) > 4)
+        return;
+
+      e.preventDefault();
+      e.stopPropagation();
+    },
+
+    /**
+     * @param {!Event} e
+     * @return {boolean} Whether |e| can be trusted.
+     * @private
+     * @suppress {checkTypes}
+     */
+    trustEvent_: function(e) {
+      return e.isTrusted || e.isTrustedForTesting;
+    },
+
     get menuItems() {
       return this.querySelectorAll(this.menuItemSelector || '*');
     },
 
     /**
      * The selected menu item or null if none.
      * @type {cr.ui.MenuItem}
      */
     get selectedItem() {
       return this.menuItems[this.selectedIndex];
@@ skipping 105 matching lines @@
               if (item.command)
                 item.command.execute(contextElement);
             }
           }
           return true;
       }
 
       return false;
     },
 
+    hide: function() {
+      this.hidden = true;
+      delete this.shown_;
+    },
+
+    /** @param {{x: number, y: number}=} opt_mouseDownPos */
+    show: function(opt_mouseDownPos) {
+      this.shown_ = {mouseDownPos: opt_mouseDownPos, time: Date.now()};
+      this.hidden = false;
+    },
+
     /**
      * Updates menu items command according to context.
      * @param {Node=} node Node for which to actuate commands state.
      */
     updateCommands: function(node) {
       var menuItems = this.menuItems;
 
       for (var i = 0, menuItem; menuItem = menuItems[i]; i++) {
         if (!menuItem.isSeparator())
           menuItem.updateCommand(node);
@@ skipping 22 matching lines @@
   /**
    * Selector for children which are menu items.
    */
   cr.defineProperty(Menu, 'menuItemSelector', cr.PropertyKind.ATTR);
 
   // Export
   return {
     Menu: Menu
   };
 });