MD Bookmarks: Add full support for cut/copy/paste keyboard shortcuts

chrome/browser/resources/md_bookmarks/command_manager.js

 // 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.
 
 /**
  * @fileoverview Element which shows context menus and handles keyboard
  * shortcuts.
  */
 cr.define('bookmarks', function() {
 
   var CommandManager = Polymer({
     is: 'bookmarks-command-manager',
 
     behaviors: [
       bookmarks.StoreClient,
     ],
 
     properties: {
       /** @private {!Array<Command>} */
       menuCommands_: {
         type: Array,
         value: function() {
           return [
             Command.EDIT,
-            Command.COPY,
+            Command.COPY_URL,
             Command.DELETE,
             // <hr>
             Command.OPEN_NEW_TAB,
             Command.OPEN_NEW_WINDOW,
             Command.OPEN_INCOGNITO,
           ];
         },
       },
 
       /** @private {Set<string>} */
@@ skipping 35 matching lines @@
       document.addEventListener('command-undo', this.boundOnCommandUndo_);
 
       /** @private {function(!Event)} */
       this.boundOnKeydown_ = this.onKeydown_.bind(this);
       document.addEventListener('keydown', this.boundOnKeydown_);
 
       /** @private {Object<Command, cr.ui.KeyboardShortcutList>} */
       this.shortcuts_ = {};
 
       this.addShortcut_(Command.EDIT, 'F2', 'Enter');
-      this.addShortcut_(Command.COPY, 'Ctrl|c', 'Meta|c');
       this.addShortcut_(Command.DELETE, 'Delete', 'Delete Backspace');
 
       this.addShortcut_(Command.OPEN, 'Enter', 'Meta|ArrowDown Meta|o');
       this.addShortcut_(Command.OPEN_NEW_TAB, 'Ctrl|Enter', 'Meta|Enter');
       this.addShortcut_(Command.OPEN_NEW_WINDOW, 'Shift|Enter');
 
       this.addShortcut_(Command.UNDO, 'Ctrl|z', 'Meta|z');
       this.addShortcut_(Command.REDO, 'Ctrl|y Ctrl|Shift|Z', 'Meta|Shift|Z');
 
       this.addShortcut_(Command.SELECT_ALL, 'Ctrl|a', 'Meta|a');
       this.addShortcut_(Command.DESELECT_ALL, 'Escape');
+
+      this.addShortcut_(Command.CUT, 'Ctrl|x', 'Meta|x');
+      this.addShortcut_(Command.COPY, 'Ctrl|c', 'Meta|c');
+      this.addShortcut_(Command.PASTE, 'Ctrl|v', 'Meta|v');
     },
 
     detached: function() {
       CommandManager.instance_ = null;
       document.removeEventListener('open-item-menu', this.boundOnOpenItemMenu_);
       document.removeEventListener('command-undo', this.boundOnCommandUndo_);
       document.removeEventListener('keydown', this.boundOnKeydown_);
     },
 
     /**
@@ skipping 37 matching lines @@
 
     /**
      * Determine if the |command| can be executed with the given |itemIds|.
      * Commands which appear in the context menu should be implemented
      * separately using `isCommandVisible_` and `isCommandEnabled_`.
      * @param {Command} command
      * @param {!Set<string>} itemIds
      * @return {boolean}
      */
     canExecute: function(command, itemIds) {
+      var state = this.getState();
       switch (command) {
         case Command.OPEN:
           return itemIds.size > 0;
         case Command.UNDO:
         case Command.REDO:
           return this.globalCanEdit_;
         case Command.SELECT_ALL:
         case Command.DESELECT_ALL:
           return true;
+        case Command.COPY:
+          return itemIds.size > 0;
+        case Command.CUT:
+          return itemIds.size > 0 &&
+              !this.containsMatchingNode_(itemIds, function(node) {
+                return !bookmarks.util.canEditNode(state, node.id);
+              });
+        case Command.PASTE:
+          return state.search.term == '' &&
+              bookmarks.util.canReorderChildren(state, state.selectedFolder);
         default:
           return this.isCommandVisible_(command, itemIds) &&
               this.isCommandEnabled_(command, itemIds);
       }
     },
 
     /**
      * @param {Command} command
      * @param {!Set<string>} itemIds
      * @return {boolean} True if the command should be visible in the context
      *     menu.
      */
     isCommandVisible_: function(command, itemIds) {
       switch (command) {
         case Command.EDIT:
           return itemIds.size == 1 && this.globalCanEdit_;
-        case Command.COPY:
+        case Command.COPY_URL:
           return this.isSingleBookmark_(itemIds);
         case Command.DELETE:
           return itemIds.size > 0 && this.globalCanEdit_;
         case Command.OPEN_NEW_TAB:
         case Command.OPEN_NEW_WINDOW:
         case Command.OPEN_INCOGNITO:
           return itemIds.size > 0;
         default:
           return false;
       }
@@ skipping 30 matching lines @@
      * @param {!Set<string>} itemIds
      */
     handle: function(command, itemIds) {
       var state = this.getState();
       switch (command) {
         case Command.EDIT:
           var id = Array.from(itemIds)[0];
           /** @type {!BookmarksEditDialogElement} */ (this.$.editDialog.get())
               .showEditDialog(state.nodes[id]);
           break;
+        case Command.COPY_URL:
         case Command.COPY:
           var idList = Array.from(itemIds);
           chrome.bookmarkManagerPrivate.copy(idList, function() {
-            bookmarks.ToastManager.getInstance().show(
-                loadTimeData.getString('toastUrlCopied'), false);
-          });
+            var labelPromise;
+            if (command == Command.COPY_URL) {
+              labelPromise =
+                  Promise.resolve(loadTimeData.getString('toastUrlCopied'));
+            } else {
+              labelPromise = cr.sendWithPromise(
+                  'getPluralString', 'toastItemsCopied', idList.length);
+            }
+
+            this.showTitleToast_(
+                labelPromise, state.nodes[idList[0]].title, false);
+          }.bind(this));
           break;
         case Command.DELETE:
           var idList = Array.from(this.minimizeDeletionSet_(itemIds));
           var title = state.nodes[idList[0]].title;
           var labelPromise = cr.sendWithPromise(
               'getPluralString', 'toastItemsDeleted', idList.length);
           chrome.bookmarkManagerPrivate.removeTrees(idList, function() {
-            labelPromise.then(function(label) {
-              var pieces = loadTimeData.getSubstitutedStringPieces(label, title)
-                               .map(function(p) {
-                                 // Make the bookmark name collapsible.
-                                 p.collapsible = !!p.arg;
-                                 return p;
-                               });
-              bookmarks.ToastManager.getInstance().showForStringPieces(
-                  pieces, true);
-            }.bind(this));
+            this.showTitleToast_(labelPromise, title, true);
           }.bind(this));
           break;
         case Command.UNDO:
           chrome.bookmarkManagerPrivate.undo();
           bookmarks.ToastManager.getInstance().hide();
           break;
         case Command.REDO:
           chrome.bookmarkManagerPrivate.redo();
           break;
         case Command.OPEN_NEW_TAB:
@@ skipping 14 matching lines @@
             this.openUrls_(this.expandUrls_(itemIds), command);
           }
           break;
         case Command.SELECT_ALL:
           var displayedIds = bookmarks.util.getDisplayedList(state);
           this.dispatch(bookmarks.actions.selectAll(displayedIds, state));
           break;
         case Command.DESELECT_ALL:
           this.dispatch(bookmarks.actions.deselectItems());
           break;
+        case Command.CUT:
+          var idList = Array.from(itemIds);
+          chrome.bookmarkManagerPrivate.cut(idList);

[calamity, 2017/07/03 03:40:05]

nit: inline var.

[tsergeant, 2017/07/03 05:28:29]

Done.

+          break;
+        case Command.PASTE:
+          var selectedFolder = state.selectedFolder;
+          var selectedItems = state.selection.items;
+          chrome.bookmarkManagerPrivate.paste(
+              selectedFolder, Array.from(selectedItems));

[calamity, 2017/07/03 03:40:05]

We should scroll to the pasted node here.

[tsergeant, 2017/07/03 05:28:29]

This little comment reveals a slightly unkempt yak.

We actually have the same problem when adding a new item -- it can be created
offscreen without any indication of success.

The old BMM has a nifty system (the relevant function is
"selectItemsAfterUserAction") for selecting and scrolling after anything which
can add new items to the list (paste, create, drop).

Do you mind if I file a bug and follow-up separately on implementing something
like that for MD Bookmarks? Solving this problem well might be a reasonably
sized task by itself.

[tsergeant, 2017/07/04 01:32:11]

Filed https://crbug.com/738958

+          break;
         default:
           assert(false);
       }
     },
 
     /**
      * @param {!Event} e
      * @param {!Set<string>} itemIds
      * @return {boolean} True if the event was handled, triggering a keyboard
      *     shortcut.
@@ skipping 143 matching lines @@
      *     node.
      */
     isSingleBookmark_: function(itemIds) {
       return itemIds.size == 1 &&
           this.containsMatchingNode_(itemIds, function(node) {
             return !!node.url;
           });
     },
 
     /**
-     * @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.handle(
-          e.currentTarget.getAttribute('command'), assert(this.menuIds_));
-      this.closeCommandMenu();
-    },
-
-    /**
-     * @param {!Event} e
-     * @private
-     */
-    onKeydown_: function(e) {
-      var selection = this.getState().selection.items;
-      if (e.target == document.body)
-        this.handleKeyEvent(e, selection);
-    },
-
-    /**
-     * 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.getIfExists())
-        return;
-
-      this.closeCommandMenu();
-    },
-
-    /** @private */
-    onOpenCancelTap_: function() {
-      this.$.openDialog.get().cancel();
-    },
-
-    /** @private */
-    onOpenConfirmTap_: function() {
-      this.confirmOpenCallback_();
-      this.$.openDialog.get().close();
-    },
-
-    /**
      * @param {Command} command
      * @return {string}
      * @private
      */
     getCommandLabel_: function(command) {
       var multipleNodes = this.menuIds_.size > 1 ||
           this.containsMatchingNode_(this.menuIds_, function(node) {
             return !node.url;
           });
       var label;
       switch (command) {
         case Command.EDIT:
           if (this.menuIds_.size != 1)
             return '';
 
           var id = Array.from(this.menuIds_)[0];
           var itemUrl = this.getState().nodes[id].url;
           label = itemUrl ? 'menuEdit' : 'menuRename';
           break;
-        case Command.COPY:
+        case Command.COPY_URL:
           label = 'menuCopyURL';
           break;
         case Command.DELETE:
           label = 'menuDelete';
           break;
         case Command.OPEN_NEW_TAB:
           label = multipleNodes ? 'menuOpenAllNewTab' : 'menuOpenNewTab';
           break;
         case Command.OPEN_NEW_WINDOW:
           label = multipleNodes ? 'menuOpenAllNewWindow' : 'menuOpenNewWindow';
@@ skipping 37 matching lines @@
 
     /**
      * @param {Command} command
      * @return {boolean}
      * @private
      */
     showDividerAfter_: function(command, itemIds) {
       return command == Command.DELETE &&
           (this.globalCanEdit_ || this.isSingleBookmark_(itemIds));
     },
+
+    /**
+     * Show a toast with a bookmark |title| inserted into a label, with the
+     * title ellipsised if necessary.
+     * @param {!Promise<string>} labelPromise Promise which resolves with the
+     *    label for the toast.
+     * @param {string} title Bookmark title to insert.
+     * @param {boolean} canUndo If true, shows an undo button in the toast.
+     * @private
+     */
+    showTitleToast_: function(labelPromise, title, canUndo) {
+      labelPromise.then(function(label) {
+        var pieces = loadTimeData.getSubstitutedStringPieces(label, title)
+                         .map(function(p) {
+                           // Make the bookmark name collapsible.
+                           p.collapsible = !!p.arg;
+                           return p;
+                         });
+
+        bookmarks.ToastManager.getInstance().showForStringPieces(
+            pieces, canUndo);
+      });
+    },
+
+    ////////////////////////////////////////////////////////////////////////////
+    // Event handlers:
+
+    /**
+     * @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.handle(
+          e.currentTarget.getAttribute('command'), assert(this.menuIds_));
+      this.closeCommandMenu();
+    },
+
+    /**
+     * @param {!Event} e
+     * @private
+     */
+    onKeydown_: function(e) {
+      var selection = this.getState().selection.items;
+      if (e.target == document.body)
+        this.handleKeyEvent(e, selection);
+    },
+
+    /**
+     * 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.getIfExists())
+        return;
+
+      this.closeCommandMenu();
+    },
+
+    /** @private */
+    onOpenCancelTap_: function() {
+      this.$.openDialog.get().cancel();
+    },
+
+    /** @private */
+    onOpenConfirmTap_: function() {
+      this.confirmOpenCallback_();
+      this.$.openDialog.get().close();
+    },
   });
 
   /** @private {bookmarks.CommandManager} */
   CommandManager.instance_ = null;
 
   /** @return {!bookmarks.CommandManager} */
   CommandManager.getInstance = function() {
     return assert(CommandManager.instance_);
   };
 
   return {
     CommandManager: CommandManager,
   };
 });