Index: ui/webui/resources/js/cr/ui/menu_button.js |
diff --git a/ui/webui/resources/js/cr/ui/menu_button.js b/ui/webui/resources/js/cr/ui/menu_button.js |
index 96d2847e98009c9cb0cf5b437efd68b35bd273ed..90ee502b0c3e5b1253c17582de6d04118b0be38b 100644 |
--- a/ui/webui/resources/js/cr/ui/menu_button.js |
+++ b/ui/webui/resources/js/cr/ui/menu_button.js |
@@ -4,28 +4,34 @@ |
// <include src="../../assert.js"> |
+cr.exportPath('cr.ui'); |
+ |
+/** |
+ * Enum for type of hide. Delayed is used when called by clicking on a |
+ * checkable menu item. |
+ * @enum {number} |
+ */ |
+cr.ui.HideType = { |
+ INSTANT: 0, |
+ DELAYED: 1 |
+}; |
+ |
cr.define('cr.ui', function() { |
/** @const */ |
var Menu = cr.ui.Menu; |
/** @const */ |
- var positionPopupAroundElement = cr.ui.positionPopupAroundElement; |
+ var HideType = cr.ui.HideType; |
- /** |
- * Enum for type of hide. Delayed is used when called by clicking on a |
- * checkable menu item. |
- * @enum {number} |
- */ |
- var HideType = { |
- INSTANT: 0, |
- DELAYED: 1 |
- }; |
+ /** @const */ |
+ var positionPopupAroundElement = cr.ui.positionPopupAroundElement; |
/** |
* Creates a new menu button element. |
* @param {Object=} opt_propertyBag Optional properties. |
* @constructor |
* @extends {HTMLButtonElement} |
+ * @implements {EventListener} |
*/ |
var MenuButton = cr.ui.define('button'); |
@@ -92,10 +98,12 @@ cr.define('cr.ui', function() { |
switch (e.type) { |
case 'mousedown': |
if (e.currentTarget == this.ownerDocument) { |
- if (!this.contains(e.target) && !this.menu.contains(e.target)) |
+ if (e.target instanceof Element && !this.contains(e.target) && |
+ !this.menu.contains(e.target)) { |
this.hideMenu(); |
- else |
+ } else { |
e.preventDefault(); |
+ } |
} else { |
if (this.isMenuShown()) { |
this.hideMenu(); |
@@ -125,7 +133,8 @@ cr.define('cr.ui', function() { |
this.classList.remove('using-mouse'); |
break; |
case 'focus': |
- if (!this.contains(e.target) && !this.menu.contains(e.target)) { |
+ if (e.target instanceof Element && !this.contains(e.target) && |
+ !this.menu.contains(e.target)) { |
this.hideMenu(); |
// Show the focus ring on focus - if it's come from a mouse event, |
// the focus ring will be hidden in the mousedown event handler, |
@@ -188,8 +197,8 @@ cr.define('cr.ui', function() { |
/** |
* Hides the menu. If your menu can go out of scope, make sure to call this |
* first. |
- * @param {HideType=} opt_hideType Type of hide. |
- * default: HideType.INSTANT. |
+ * @param {cr.ui.HideType=} opt_hideType Type of hide. |
+ * default: cr.ui.HideType.INSTANT. |
*/ |
hideMenu: function(opt_hideType) { |
if (!this.isMenuShown()) |
@@ -275,27 +284,26 @@ cr.define('cr.ui', function() { |
* Create the images used to style drop-down-style MenuButtons. |
* This should be called before creating any MenuButtons that will have the |
* CSS class 'drop-down'. If no colors are specified, defaults will be used. |
- * @param {=string} normalColor CSS color for the default button state. |
- * @param {=string} hoverColor CSS color for the hover button state. |
- * @param {=string} activeColor CSS color for the active button state. |
+ * @param {string=} opt_normalColor CSS color for the default button state. |
+ * @param {string=} opt_hoverColor CSS color for the hover button state. |
+ * @param {string=} opt_activeColor CSS color for the active button state. |
*/ |
MenuButton.createDropDownArrows = function( |
- normalColor, hoverColor, activeColor) { |
- normalColor = normalColor || 'rgb(192, 195, 198)'; |
- hoverColor = hoverColor || 'rgb(48, 57, 66)'; |
- activeColor = activeColor || 'white'; |
+ opt_normalColor, opt_hoverColor, opt_activeColor) { |
+ opt_normalColor = opt_normalColor || 'rgb(192, 195, 198)'; |
+ opt_hoverColor = opt_hoverColor || 'rgb(48, 57, 66)'; |
+ opt_activeColor = opt_activeColor || 'white'; |
createDropDownArrowCanvas( |
- 'drop-down-arrow', ARROW_WIDTH, ARROW_HEIGHT, normalColor); |
+ 'drop-down-arrow', ARROW_WIDTH, ARROW_HEIGHT, opt_normalColor); |
createDropDownArrowCanvas( |
- 'drop-down-arrow-hover', ARROW_WIDTH, ARROW_HEIGHT, hoverColor); |
+ 'drop-down-arrow-hover', ARROW_WIDTH, ARROW_HEIGHT, opt_hoverColor); |
createDropDownArrowCanvas( |
- 'drop-down-arrow-active', ARROW_WIDTH, ARROW_HEIGHT, activeColor); |
+ 'drop-down-arrow-active', ARROW_WIDTH, ARROW_HEIGHT, opt_activeColor); |
}; |
// Export |
return { |
MenuButton: MenuButton, |
- HideType: HideType |
}; |
}); |