[MD Bookmarks] Add UI for multi-item drag and drop chip.

chrome/browser/resources/md_bookmarks/dnd_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.
 
 cr.define('bookmarks', function() {
   /**
    * @param {BookmarkElement} element
    * @return {boolean}
    */
   function isBookmarkItem(element) {
@@ skipping 277 matching lines @@
      * Used to instantly clearDragData in tests.
      * @private {bookmarks.TimerProxy}
      */
     this.timerProxy_ = new bookmarks.TimerProxy();
 
     /**
      * The bookmark drag and drop indicator chip.
      * @private {BookmarksDndChipElement}
      */
     this.chip_ = null;
+
+    /**
+     * The element that initiated a drag.
+     * @private {BookmarkElement}
+     */
+    this.dragElement_ = null;
   }
 
   DNDManager.prototype = {
     init: function() {
       this.dragInfo_ = new DragInfo();
       this.dropIndicator_ = new DropIndicator();
       this.autoExpander_ = new AutoExpander();
 
       this.documentListeners_ = {
         'dragstart': this.onDragStart_.bind(this),
@@ skipping 79 matching lines @@
 
       return {
         index: index,
         parentId: parentId,
       };
     },
 
     /** @private */
     clearDragData_: function() {
       this.dndChip.hide();
+      this.dragElement_ = null;
 
       // Defer the clearing of the data so that the bookmark manager API's drop
       // event doesn't clear the drop data before the web drop event has a
       // chance to execute (on Mac).
       this.timerProxy_.setTimeout(function() {
         this.dragInfo_.clearDragData();
         this.dropDestination_ = null;
         this.dropIndicator_.finish();
       }.bind(this), 0);
     },
 
     /**
      * @private
      * @param {Event} e
      */
     onDragStart_: function(e) {
       var dragElement = getBookmarkElement(e.path);
       if (!dragElement)
         return;
 
       var store = bookmarks.Store.getInstance();
       var dragId = dragElement.itemId;
+      this.dragElement_ = dragElement;
 
       // Determine the selected bookmarks.
       var state = store.data;
       var draggedNodes = Array.from(state.selection.items);
 
       // Change selection to the dragged node if the node is not part of the
       // existing selection.
       if (isBookmarkFolderNode(dragElement) ||
           draggedNodes.indexOf(dragId) == -1) {
         store.dispatch(bookmarks.actions.deselectItems());
@@ skipping 53 matching lines @@
       if (e.path[0].tagName == 'INPUT')
         return;
 
       // The default operation is to allow dropping links etc to do
       // navigation. We never want to do that for the bookmark manager.
       e.preventDefault();
 
       if (!this.dragInfo_.isDragValid())
         return;
 
+      var state = bookmarks.Store.getInstance().data;
+      var items = this.dragInfo_.dragData.elements.map(function(x) {
+        return bookmarks.util.normalizeNode(x);
+      });
       this.dndChip.showForItems(
-          e.clientX, e.clientY,
-          this.dragInfo_.dragData.elements.map(function(x) {
-            return bookmarks.util.normalizeNode(x);
-          }));
+          e.clientX, e.clientY, items,
+          this.dragElement_ ? state.nodes[this.dragElement_.itemId] : items[0]);
 
       var overElement = getBookmarkElement(e.path);
       this.autoExpander_.update(e, overElement);
       if (!overElement)
         return;
 
       // Now we know that we can drop. Determine if we will drop above, on or
       // below based on mouse position etc.
       this.dropDestination_ =
           this.calculateDropDestination_(e.clientY, overElement);
@@ skipping 167 matching lines @@
       return this.chip_;
     },
   };
 
   return {
     DNDManager: DNDManager,
     DragInfo: DragInfo,
     DropIndicator: DropIndicator,
   };
 });