[MD Bookmarks] Add a drag and drop indicator to bookmarks.

chrome/test/data/webui/md_bookmarks/dnd_manager_test.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.
+
+suite('drag and drop', function() {
+  var app;
+  var list;
+  var sidebar;
+  var store;
+  var dnd_manager;

[tsergeant, 2017/03/23 00:28:23]

underscoresArentReallyTheStyle

[calamity, 2017/03/23 06:12:34]

but_im_a_hacker_

+  var draggedIds;
+
+  var DRAG_STYLE = {
+    NONE: 0,
+    ON: 1,
+    ABOVE: 2,
+    BELOW: 3,
+  };
+
+  function getFolderNode(id) {
+    var nodes = [sidebar];
+    var node;
+    while (nodes.length) {
+      node = nodes.pop();
+      if (node.itemId == id)
+        return node;
+
+      node.root.querySelectorAll('bookmarks-folder-node')
+          .forEach((x) => {nodes.unshift(x)});
+    }
+  }
+
+  function getListItem(id) {
+    var items = list.root.querySelectorAll('bookmarks-item');
+    for (var i = 0; i < items.length; i++) {
+      if (items[i].itemId == id)
+        return items[i];
+    }
+  }
+
+  function dispatchDragEvent(type, node, xy) {
+    xy = xy || MockInteractions.middleOfNode(node);
+    var props = {
+      bubbles: true,
+      cancelable: true,
+      clientX: xy.x,
+      clientY: xy.y,
+      // Make this a primary input.
+      buttons: 1,
+    };
+    var e = new DragEvent(type, props);
+    node.dispatchEvent(e);
+  }
+
+  function assertDragStyle(bookmarkElement, style) {
+    var dragStyles = {};
+    dragStyles[DRAG_STYLE.ON] = 'drag-on';
+    dragStyles[DRAG_STYLE.ABOVE] = 'drag-above';
+    dragStyles[DRAG_STYLE.BELOW] = 'drag-below';
+
+    var classList = bookmarkElement.getDropTarget().classList;
+    Object.keys(dragStyles)
+        .forEach(
+            dragStyle => assertEquals(

[tsergeant, 2017/03/23 00:28:23]

This is pretty hard to read. Maybe add {} to the function so that it splits up
onto its own block.

[calamity, 2017/03/23 06:12:34]

Done.

+                dragStyle == style, classList.contains(dragStyles[dragStyle]),
+                dragStyles[dragStyle] +
+                    (dragStyle == style ? ' missing' : ' found') +
+                    ' in classList ' + classList));
+  }
+
+  function createDragData(ids, sameProfile) {

[tsergeant, 2017/03/23 00:28:23]

You don't test sameProfile anywhere: seems like it would be good to test, since
it's entwined in all the logic.

[calamity, 2017/03/23 06:12:34]

Done.

+    return {
+      elements: ids.map(id => store.data.nodes[id]),
+          sameProfile: sameProfile == undefined ? true : sameProfile,
+    }
+  }
+
+  setup(function() {
+    store = new bookmarks.TestStore({
+      nodes: testTree(
+          createFolder(
+              '1',
+              [
+                createFolder(
+                    '11',
+                    [
+                      createFolder('111', []),
+                      createFolder('112', []),
+                    ]),
+                createItem('12'),
+                createItem('13'),
+                createFolder('14', []),
+                createFolder('15', []),
+              ]),
+          createFolder('2', [])),
+      selectedFolder: '1',
+    });
+    bookmarks.Store.instance_ = store;
+
+    chrome.bookmarkManagerPrivate.startDrag = function(nodes, isTouch) {
+      draggedIds = nodes
+    };
+
+    app = document.createElement('bookmarks-app');
+    replaceBody(app);
+    list = app.$$('bookmarks-list');
+    sidebar = app.$$('bookmarks-sidebar');
+    dnd_manager = app.dnd_manager_;
+    dnd_manager.dropIndicator_.synchronous_ = true;
+    Polymer.dom.flush();
+  });
+
+  test('dragInfo isDraggingFolderToDescendant', function() {
+    var dragInfo = new bookmarks.DragInfo();
+    var nodes = store.data.nodes;
+    dragInfo.handleChromeDragEnter(createDragData(['11']));
+    assertTrue(dragInfo.isDraggingFolderToDescendant('111', nodes));
+    assertFalse(dragInfo.isDraggingFolderToDescendant('1', nodes));
+    assertFalse(dragInfo.isDraggingFolderToDescendant('2', nodes));
+
+    dragInfo.handleChromeDragEnter(createDragData(['1']));
+    assertTrue(dragInfo.isDraggingFolderToDescendant('14', nodes));
+    assertTrue(dragInfo.isDraggingFolderToDescendant('111', nodes));
+    assertFalse(dragInfo.isDraggingFolderToDescendant('2', nodes));
+  });
+
+  test('drag in list', function() {
+    var dragElement = getListItem('13');
+    var dragTarget = getListItem('12');
+
+    dispatchDragEvent('dragstart', dragElement);
+    assertDeepEquals(['13'], draggedIds);
+    dnd_manager.dragInfo_.handleChromeDragEnter(createDragData(draggedIds));
+
+    // Bookmark items cannot be dragged onto other items.
+    dispatchDragEvent(
+        'dragover', dragTarget, MockInteractions.topLeftOfNode(dragTarget));
+    assertEquals(
+        DropPosition.ABOVE,
+        dnd_manager.calculateValidDropPositions_(dragTarget));
+    assertDragStyle(dragTarget, DRAG_STYLE.ABOVE);
+
+    dispatchDragEvent('dragleave', dragTarget);
+    assertDragStyle(dragTarget, DRAG_STYLE.NONE);
+
+    // Bookmark items can be dragged onto folders.
+    dragTarget = getListItem('11');
+    dispatchDragEvent('dragover', dragTarget);
+    assertEquals(
+        DropPosition.ON | DropPosition.ABOVE | DropPosition.BELOW,
+        dnd_manager.calculateValidDropPositions_(dragTarget));
+    assertDragStyle(dragTarget, DRAG_STYLE.ON);
+
+    // There are no valid drop locations for dragging an item onto itself.
+    assertEquals(
+        DropPosition.NONE,
+        dnd_manager.calculateValidDropPositions_(dragElement));
+    dispatchDragEvent('dragleave', dragTarget);
+    dispatchDragEvent('dragover', dragElement);
+
+    assertDragStyle(dragTarget, DRAG_STYLE.NONE);
+    assertDragStyle(dragElement, DRAG_STYLE.NONE);
+  });
+
+  test('reorder folder nodes', function() {
+    var dragElement = getFolderNode('112');
+    var dragTarget = getFolderNode('111');
+    dispatchDragEvent('dragstart', dragElement);
+    dnd_manager.dragInfo_.handleChromeDragEnter(createDragData(draggedIds));
+
+    assertEquals(
+        DropPosition.ON | DropPosition.ABOVE,
+        dnd_manager.calculateValidDropPositions_(dragTarget));
+
+    dispatchDragEvent(
+        'dragover', dragTarget, MockInteractions.topLeftOfNode(dragTarget));
+    assertDragStyle(dragTarget, DRAG_STYLE.ABOVE);
+  });
+
+  test('drag an item into a sidebar folder', function() {
+    var dragElement = getListItem('13');
+    var dragTarget = getFolderNode('2');
+    dispatchDragEvent('dragstart', dragElement);
+    dnd_manager.dragInfo_.handleChromeDragEnter(createDragData(draggedIds));
+
+    dispatchDragEvent('dragover', dragTarget);
+    assertDragStyle(dragTarget, DRAG_STYLE.ON);

[tsergeant, 2017/03/23 00:28:23]

Should assert that it's not possible to drag above or below, since there's only
an item.

[calamity, 2017/03/23 06:12:34]

Done.

+
+    // Items cannot be dragged onto their parent folders.
+    dragTarget = getFolderNode('1');
+    dispatchDragEvent('dragover', dragTarget);
+    assertDragStyle(dragTarget, DRAG_STYLE.NONE);
+  });
+
+  test('drag a folder into a descendant', function() {
+    var dragElement = getFolderNode('11');
+    var dragTarget = getFolderNode('112');
+
+    // Folders cannot be dragged into their descendants.
+    dispatchDragEvent('dragstart', dragElement);
+    dnd_manager.dragInfo_.handleChromeDragEnter(createDragData(draggedIds));
+    assertEquals(
+        DropPosition.NONE,
+        dnd_manager.calculateValidDropPositions_(dragTarget));
+
+    dispatchDragEvent('dragover', dragTarget);
+
+    assertDragStyle(dragTarget, DRAG_STYLE.NONE);
+  });
+
+  test('drag item into sidebar folder with descendants', function() {
+    var dragElement = getFolderNode('15');
+    var dragTarget = getFolderNode('11');
+    dispatchDragEvent('dragstart', dragElement);
+    dnd_manager.dragInfo_.handleChromeDragEnter(createDragData(draggedIds));
+
+    // Drags below an open folder are not allowed.
+    assertEquals(
+        DropPosition.ON | DropPosition.ABOVE,
+        dnd_manager.calculateValidDropPositions_(dragTarget));
+
+    dispatchDragEvent('dragover', dragTarget);
+
+    assertDragStyle(dragTarget, DRAG_STYLE.ON);
+
+    dispatchDragEvent('dragend', dragElement);
+    assertDragStyle(dragTarget, DRAG_STYLE.NONE);
+
+    store.data.closedFolders['11'] = true;
+
+    dispatchDragEvent('dragstart', dragElement);
+    dnd_manager.dragInfo_.handleChromeDragEnter(createDragData(draggedIds));
+
+    // Drags below a closed folder are allowed.
+    assertEquals(
+        DropPosition.ON | DropPosition.ABOVE | DropPosition.BELOW,
+        dnd_manager.calculateValidDropPositions_(dragTarget));
+  });
+
+  test('drag multiple list items', function() {
+    // Dragging multiple items.
+    store.data.selection.items = {'13': true, '15': true};
+    dispatchDragEvent('dragstart', getListItem('13'));
+    assertDeepEquals(['13', '15'], draggedIds);
+    dnd_manager.dragInfo_.handleChromeDragEnter(createDragData(draggedIds));
+
+    // The dragged items should not be allowed to be dragged around any selected
+    // item.
+    assertEquals(
+        DropPosition.NONE,
+        dnd_manager.calculateValidDropPositions_(getListItem('13')));
+    assertEquals(
+        DropPosition.ON,
+        dnd_manager.calculateValidDropPositions_(getListItem('14')));
+    assertEquals(
+        DropPosition.NONE,
+        dnd_manager.calculateValidDropPositions_(getListItem('15')));
+
+    // Dragging an unselected item should only drag the unselected item.
+    dispatchDragEvent('dragstart', getListItem('14'));
+    assertDeepEquals(['14'], draggedIds);
+
+    // Dragging a folder node should only drag the node.
+    dispatchDragEvent('dragstart', getListItem('11'));
+    assertDeepEquals(['11'], draggedIds);
+  });

[tsergeant, 2017/03/23 00:28:23]

Maybe should have a test for dragging from the sidebar to the list?

Can drag a sidebar folder to the list, but not onto itself or any of its
descendants.

+});