[MD Bookmarks] Right click on bookmark items open context menu.

This CL makes the context menu for bookmark items appear when an item is
clicked.

BUG=692837
CQ_INCLUDE_TRYBOTS=master.tryserver.chromium.linux:closure_compilation

Review-Url: https://codereview.chromium.org/2814023004
Cr-Commit-Position: refs/heads/master@{#469281}

chrome/browser/resources/md_bookmarks/item.js

@@ -38,6 +38,7 @@ Polymer({
   listeners: {
     'click': 'onClick_',
     'dblclick': 'onDblClick_',
+    'contextmenu': 'onContextMenu_',
   },
 
   /** @override */
@@ -57,6 +58,23 @@ Polymer({
     return this;
   },
 
+  /**
+   * @param {Event} e
+   * @private
+   */
+  onContextMenu_: function(e) {
+    e.preventDefault();
+    if (!this.isSelectedItem_) {
+      this.dispatch(bookmarks.actions.selectItem(
+          this.itemId, false, false, this.getState()));
+    }
+    this.fire('open-item-menu', {
+      x: e.clientX,
+      y: e.clientY,
+      item: this.item_,
+    });
+  },
+
   /**
    * @param {Event} e
    * @private
@@ -66,7 +84,7 @@ Polymer({
     this.dispatch(bookmarks.actions.selectItem(
         this.itemId, false, false, this.getState()));
     this.fire('open-item-menu', {
-      target: e.target,
+      targetElement: e.target,
       item: this.item_,
     });
   },

chrome/browser/resources/md_bookmarks/list.html

@@ -36,7 +36,7 @@
         justify-content: center;
       }
     </style>
-    <dialog is="cr-action-menu" id="dropdown">
+    <dialog is="cr-action-menu" id="dropdown" on-mousedown="onMenuMousedown_">
       <button class="dropdown-item" on-tap="onEditTap_">
         [[getEditActionLabel_(menuItem_)]]
       </button>

chrome/browser/resources/md_bookmarks/list.js

@@ -54,7 +54,14 @@ Polymer({
     this.menuItem_ = e.detail.item;
     var menu = /** @type {!CrActionMenuElement} */ (
         this.$.dropdown);
-    menu.showAt(/** @type {!Element} */ (e.detail.target));
+    if (e.detail.targetElement) {
+      menu.showAt(/** @type {!Element} */ (e.detail.targetElement));
+    } else {
+      menu.showAtPosition({
+        top: e.detail.y,
+        left: e.detail.x,
+      });
+    }
   },
 
   /** @private */
@@ -87,6 +94,20 @@ Polymer({
     this.closeDropdownMenu_();
   },
 
+  /**
+   * Close the menu on mousedown so clicks can propagate to the underlying UI.
+   * This allows the user to right click the list while a context menu is
+   * showing and get another context menu.
+   * @param {Event} e
+   * @private
+   */
+  onMenuMousedown_: function(e) {
+    if (e.path[0] != this.$.dropdown)
+      return;
+
+    this.closeDropdownMenu_();
+  },
+
   /** @private */
   closeDropdownMenu_: function() {
     var menu = /** @type {!CrActionMenuElement} */ (

chrome/test/data/webui/md_bookmarks/item_test.js

@@ -48,4 +48,16 @@ suite('<bookmarks-item>', function() {
         bookmarks.actions.selectItem('2', false, false, store.data),
         store.lastAction);
   });
+
+  test('context menu selects item if unselected', function() {
+    item.isSelectedItem_ = true;
+    item.dispatchEvent(new MouseEvent('contextmenu'));
+    assertEquals(null, store.lastAction);
+
+    item.isSelectedItem_ = false;
+    item.dispatchEvent(new MouseEvent('contextmenu'));
+    assertDeepEquals(
+        bookmarks.actions.selectItem('2', false, false, store.data),
+        store.lastAction);
+  });
 });