[FileBrowser] Migrated ComboButton to menu as dropdown.

chrome/browser/resources/file_manager/js/combobutton.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 This implements a combobutton control.
  */
 
 cr.define('cr.ui', function() {
   /**
-   * Sets minWidth for the target, so it's visually as large as source.
-   * @param {HTMLElement} target Element which min-width to tune.
-   * @param {HTMLElement} source Element, which width to use.
-   */
-  function enlarge(target, source) {
-    var cs = target.ownerDocument.defaultView.getComputedStyle(target);
-    target.style.minWidth = (source.getBoundingClientRect().width -
-        parseFloat(cs.borderLeftWidth) -
-        parseFloat(cs.borderRightWidth)) + 'px';
-  }
-
-  /**
    * Creates a new combobutton element.
    * @param {Object=} opt_propertyBag Optional properties.
    * @constructor
    * @extends {HTMLUListElement}
    */
-  var ComboButton = cr.ui.define('div');
+  var ComboButton = cr.ui.define(cr.ui.MenuButton);
+
 
   ComboButton.prototype = {
-    __proto__: HTMLDivElement.prototype,
+    __proto__: cr.ui.MenuButton.prototype,
+
+    defaultItem_: null,
 
     /**
-     * The items list.
+     * Truncates drop-down list.
      */
-    items_: null,
-
     clear: function() {
-      if (this.items_.length > 0)
-        // Remove default combobox item if we have added it at addItem.
-        this.removeChild(this.firstChild);
-
-      this.items_ = [];
-      this.popup_.textContent = '';
+      this.menu.clear();
       this.multiple = false;
-      this.popup_.style.minWidth = '';
     },
 
     addItem: function(item) {

[dgozman, 2012/05/18 13:15:14]

This method does not add the initially shown item (as one can think), so
consider renaming to |addDropDownItem|.

[Dmitry Zvorygin, 2012/05/21 10:51:01]

Done.

-      this.items_.push(item);
-      if (this.items_.length == 1) {
-        // Set first added item as default on combobox.
-        // First item should be the first element to prepend drop-down arrow and
-        // popup layer.
-        this.insertBefore(item, this.firstChild);
-      } else {
-        this.multiple = true;
-        if (this.popup_.hasChildNodes())
-          this.popup_.insertBefore(item, this.popup_.firstChild);
-        else
-          this.popup_.appendChild(item);
-        if (this.visible)
-          this.setPopupSize_();
-      }
+      this.multiple = true;
+      this.menu.addMenuItem(item).data = item;
     },
 
-    setPopupSize_: function() {
-      this.popup_.style.bottom = (this.clientHeight + 1) + 'px';
-      enlarge(this.popup_, this);
+    /**
+     * Default item to fire on combobox click
+     */
+    get defaultItem() {
+      return this.defaultItem_;
+    },
+    set defaultItem(defaultItem) {
+      this.defaultItem_ = defaultItem;
+      if (defaultItem.label) {
+        this.labelNode_.textContent = defaultItem.label;
+      } else {
+        this.labelNode_.textContent = '';
+      }
+
+      if (defaultItem.iconUrl) {
+        this.iconNode_.src = defaultItem.iconUrl;
+      } else {
+        this.iconNode_.src = '';
+      }
     },
 
     /**
      * Initializes the element.
      */
     decorate: function() {
-      this.items_ = [];
+      cr.ui.MenuButton.prototype.decorate.call(this);
 
       this.classList.add('combobutton');
 
+      this.iconNode_ = this.ownerDocument.createElement('img');
+      this.appendChild(this.iconNode_);
+
+      this.labelNode_ = this.ownerDocument.createElement('span');
+      this.appendChild(this.labelNode_);
+
       var triggerIcon = this.ownerDocument.createElement('span');
       triggerIcon.className = 'disclosureindicator';
       this.trigger_ = this.ownerDocument.createElement('div');
       this.trigger_.appendChild(triggerIcon);
 
-      this.popup_ = this.ownerDocument.createElement('div');
-      this.popup_.className = 'popup';
+      this.appendChild(this.trigger_);
 
-      this.appendChild(this.trigger_);
-      this.appendChild(this.popup_);
+      this.addEventListener('click', this.handleButtonClick_.bind(this));
 
-      this.addEventListener('click',
-          this.handleButtonClick_.bind(this));
-      this.popup_.addEventListener('click',
-          this.handlePopupClick_.bind(this));
       this.trigger_.addEventListener('click',
           this.handleTriggerClicked_.bind(this));
-      this.addEventListener('mouseout', this.handleMouseOut_.bind(this));
 
-      this.visible = true;
+      this.menu.addEventListener('activate',
+          this.handleMenuActivate_.bind(this));
+
+      // Remove mousedown event listener created by MenuButton::decorate,

[dgozman, 2012/05/18 13:15:14]

I don't like this dependency on internals of MenuButton.
Why don't make trigger the menubutton itself instead?

[Dmitry Zvorygin, 2012/05/21 10:51:01]

I don't like this complex logic too, but if we make trigger the menubutton
instead, menu layouting mechanics would fail, or we'd have to dig deeper into
menubutton to fix menu layouting.

+      // and move it down to trigger_.
+      this.removeEventListener('mousedown', this);
+      this.trigger_.addEventListener('mousedown', this);
+    },
+
+    /**
+     * Handles the keydown event for the menu button.
+     */
+    handleKeyDown: function(e) {
+      switch (e.keyIdentifier) {
+        case 'Down':
+        case 'Up':
+          if (!this.isMenuShown())
+            this.showMenu();
+          e.preventDefault();
+          break;
+        case 'Esc':
+        case 'U+001B': // Maybe this is remote desktop playing a prank?
+          this.hideMenu();
+          break;
+      }
     },
 
     handleTriggerClicked_: function(event) {
-      this.open = !this.open;
       event.stopPropagation();
     },
 
-    handleMouseOut_: function(event) {
-      var x = event.x;
-      var y = event.y;
-
-      var children = this.childNodes;
-      for (var i = 0; i < children.length; i++)
-      {
-        var r = this.children[i].getBoundingClientRect();
-        if (x >= r.left && x <= r.right && y >= r.top && y <= r.bottom)
-          return;
-      }
-
-      this.open = false;
+    handleMenuActivate_: function(event) {
+      this.dispatchSelectEvent(event.target.data);
     },
 
-    handleButtonClick_: function(event) {
-      this.dispatchSelectEvent(this.items_[0]);
-    },
-
-    handlePopupClick_: function(event) {
-      var item = event.target;
-      while (item && item.parentNode != this.popup_)
-        item = item.parentNode;
-      if (!item)
-        return;
-
-      this.open = false;
-      this.dispatchSelectEvent(item);
-      event.stopPropagation();
+    handleButtonClick_: function() {
+      this.dispatchSelectEvent(this.defaultItem_);
     },
 
     dispatchSelectEvent: function(item) {
       var selectEvent = new Event('select');
       selectEvent.item = item;
       this.dispatchEvent(selectEvent);
-    },
-
-    get visible() {
-      return this.hasAttribute('visible');
-    },
-    set visible(value) {
-      if (value) {
-        this.setAttribute('visible', 'visible');
-        setTimeout(this.setPopupSize_.bind(this), 0);
-      } else {
-        this.removeAttribute('visible');
-      }
     }
   };
 
   cr.defineProperty(ComboButton, 'disabled', cr.PropertyKind.BOOL_ATTR);
-  cr.defineProperty(ComboButton, 'open', cr.PropertyKind.BOOL_ATTR);
   cr.defineProperty(ComboButton, 'multiple', cr.PropertyKind.BOOL_ATTR);
 
+  cr.defineProperty(ComboButton, 'label', cr.PropertyKind.ATTR);

[dgozman, 2012/05/18 13:15:14]

Why do you need this?

[Dmitry Zvorygin, 2012/05/21 10:51:01]

Removed.
Just some stuff from research has been left.

+  cr.defineProperty(ComboButton, 'iconUrl', cr.PropertyKind.ATTR);
+
   return {
     ComboButton: ComboButton
   };
 });