| 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
|
| };
|
| });
|
|
|