MD Bookmarks: Pull context menu into separate element

chrome/browser/resources/md_bookmarks/command_manager.js

Index: chrome/browser/resources/md_bookmarks/command_manager.js
diff --git a/chrome/browser/resources/md_bookmarks/command_manager.js b/chrome/browser/resources/md_bookmarks/command_manager.js
new file mode 100644
index 0000000000000000000000000000000000000000..adb457fa40cd7f0364f1044779738366134257dd
--- /dev/null
+++ b/chrome/browser/resources/md_bookmarks/command_manager.js
@@ -0,0 +1,179 @@
+// Copyright 2017 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.
+
+Polymer({
+  is: 'bookmarks-command-manager',
+
+  behaviors: [
+    bookmarks.StoreClient,
+  ],
+
+  properties: {
+    /** @type {Set<string>} */
+    menuIds_: Object,
+  },
+
+  attached: function() {
+    /** @private {function(!Event)} */
+    this.boundOnOpenItemMenu_ = this.onOpenItemMenu_.bind(this);
+    document.addEventListener('open-item-menu', this.boundOnOpenItemMenu_);
+
+    // TODO(tsergeant): Expand this to include keyboard shortcuts.
+    this.commands_ = {
+      'edit': this.handleEdit.bind(this),
+      'copy': this.handleCopy.bind(this),
+      'delete': this.handleDelete.bind(this),
+    };
+  },
+
+  detached: function() {
+    document.removeEventListener('open-item-menu', this.boundOnOpenItemMenu_);
+  },
+
+  /**
+   * Display the command context menu at the given |x|, |y| window

[calamity, 2017/04/24 05:20:35]

nit: at (|x|, |y|) in window co-ordinates.

[tsergeant, 2017/04/24 07:28:23]

Done.

+   * co-ordinates. Commands will execute on the currently selected items.
+   * @param {number} x
+   * @param {number} y
+   */
+  openCommandMenuAtPosition: function(x, y) {
+    this.menuIds_ = this.getState().selection.items;
+    /** @type {!CrActionMenuElement} */ (this.$.dropdown)
+        .showAtPosition({top: y, left: x});
+  },
+
+  /**
+   * Display the command context menu positioned to cover the |target|
+   * element. Commands will execute on the currently selected items.
+   * @param {!Element} target
+   */
+  openCommandMenuAtElement: function(target) {
+    this.menuIds_ = this.getState().selection.items;
+    /** @type {!CrActionMenuElement} */ (this.$.dropdown).showAt(target);
+  },
+
+  closeCommandMenu: function() {
+    /** @type {!CrActionMenuElement} */ (this.$.dropdown).close();
+  },
+
+  ////////////////////////////////////////////////////////////////////////////
+  // Command handlers:
+
+  /**
+   * @param {!Set<string>} itemIds
+   * @return {boolean}
+   */
+  canEdit: function(itemIds) {
+    return itemIds.size == 1;
+  },
+
+  /** @param {!Set<string>} itemIds */
+  handleEdit: function(itemIds) {
+    var id = Array.from(itemIds)[0];
+    /** @type {!BookmarksEditDialogElement} */ (this.$.editDialog.get())
+        .showEditDialog(this.getState().nodes[id]);
+  },
+
+  /**
+   * @param {!Set<string>} itemIds
+   * @return {boolean}
+   */
+  canCopy: function(itemIds) {
+    return itemIds.size == 1 &&
+        this.containsMatchingNode_(itemIds, function(node) {
+          return !!node.url;
+        });
+  },
+
+  /** @param {!Set<string>} itemIds */
+  handleCopy: function(itemIds) {
+    var idList = Array.from(itemIds);
+    chrome.bookmarkManagerPrivate.copy(idList, function() {
+      // TODO(jiaxi): Add toast later.
+    });
+  },
+
+  /**
+   * @param {!Set<string>} itemIds
+   * @return {boolean}
+   */
+  canDelete: function(itemIds) {
+    return true;
+  },
+
+  /** @param {!Set<string>} itemIds */
+  handleDelete: function(itemIds) {
+    // TODO(tsergeant): Filter IDs so we don't try to delete children of
+    // something else already being deleted.
+    chrome.bookmarkManagerPrivate.removeTrees(Array.from(itemIds), function() {
+      // TODO(jiaxi): Add toast later.
+    });
+  },
+
+  ////////////////////////////////////////////////////////////////////////////
+  // Private functions:
+
+  /**
+   * @param {!Set<string>} itemIds
+   * @param {function(BookmarkNode):boolean} predicate
+   * @return {boolean} True if any node in |itemIds| returns true for
+   *     |predicate|.
+   */
+  containsMatchingNode_: function(itemIds, predicate) {
+    var matches = false;
+    var nodes = this.getState().nodes;
+    itemIds.forEach(function(id) {
+      if (predicate(nodes[id]))
+        matches = true;
+    });

[calamity, 2017/04/24 05:20:35]

There's a lot of depressing options here.

How do you feel about:

Array.from(itemIds).some(function() { return predicate(nodes[id]); })

[tsergeant, 2017/04/24 07:28:23]

Done. Set is a really barebones type -- I wish it had some of those helper
functions on it.

[calamity, 2017/04/26 03:43:44]

Yeah =(

+    return matches;
+  },
+
+  /**
+   * @param {Event} e
+   * @private
+   */
+  onOpenItemMenu_: function(e) {
+    if (e.detail.targetElement) {
+      this.openCommandMenuAtElement(e.detail.targetElement);
+    } else {
+      this.openCommandMenuAtPosition(e.detail.x, e.detail.y);
+    }
+  },
+
+  /**
+   * @param {Event} e
+   * @private
+   */
+  onCommandClick_: function(e) {
+    this.closeCommandMenu();
+    var command = this.commands_[e.target.getAttribute('command')];
+    command(this.menuIds_);
+  },
+
+  /**
+   * 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.$.dropdown.close();
+  },
+
+  /** @private */
+  getEditActionLabel_: function() {
+    if (this.menuIds_.size > 1)
+      return;
+
+    var id = Array.from(this.menuIds_)[0];
+    var itemUrl = this.getState().nodes[id].url;
+    var label = itemUrl ? 'menuEdit' : 'menuRename';
+    return loadTimeData.getString(label);
+  },
+});