[NTP] Prevents Most Visited tiles from being dragged and dropped

The order in which MV tiles appear cannot be changed and thus the MV
tiles should not draggable.

Fixed: 1139032
Change-Id: I0d2c1a157f09fa60fa269a2eace7d7db25d2ab19
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2477282
Commit-Queue: Moe Ahmadi <mahmadi@chromium.org>
Commit-Queue: Esmael Elmoslimany <aee@chromium.org>
Auto-Submit: Moe Ahmadi <mahmadi@chromium.org>
Reviewed-by: Esmael Elmoslimany <aee@chromium.org>
Cr-Commit-Position: refs/heads/master@{#817716}

chrome/browser/resources/new_tab_page/most_visited.html

@@ -197,9 +197,9 @@
     <template>
       <!-- TOOD(crbug.com/1138578): replace the query-tile attr binding to
       something that checks whether the tile is a repeatable query tile. -->
-      <a class="tile" draggable="true" href$="[[item.url.url]]"
-          title$="[[item.title]]" on-dragstart="onDragStart_"
-          on-touchstart="onTouchStart_"
+      <a class="tile" draggable$="[[booleanToString_(customLinksEnabled_)]]"
+          href$="[[item.url.url]]" title$="[[item.title]]"
+          on-dragstart="onDragStart_" on-touchstart="onTouchStart_"
           hidden$="[[isHidden_(index, columnCount_)]]"
           on-click="onTileClick_" on-keydown="onTileKeyDown_"
           query-tile$="[[isHidden_(index, columnCount_)]]">

chrome/browser/resources/new_tab_page/most_visited.js

@@ -346,6 +346,10 @@ class MostVisitedElement extends PolymerElement {
    * @private
    */
   dragEnd_(x, y) {
+    if (!this.customLinksEnabled_) {
+      this.reordering_ = false;
+      return;
+    }
     this.dragOffset_ = null;
     const dragElement = this.shadowRoot.querySelector('.tile.dragging');
     if (!dragElement) {
@@ -812,6 +816,15 @@ class MostVisitedElement extends PolymerElement {
     this.pageHandler_.onMostVisitedTilesRendered(
         this.tiles_, BrowserProxy.getInstance().now());
   }
+
+  /**
+   * @param {boolean} value
+   * @return {string} String representing the given boolean.
+   * @private
+   */
+  booleanToString_(value) {
+    return Boolean(value).toString();
+  }
 }
 
 customElements.define(MostVisitedElement.is, MostVisitedElement);

chrome/test/data/webui/new_tab_page/most_visited_test.js

@@ -644,6 +644,10 @@ suite('NewTabPageMostVisitedTest', () => {
   test('drag first tile to second position', async () => {
     await addTiles(2);
     const [first, second] = queryTiles();
+    assertEquals('https://a/', first.href);
+    assertTrue(first.draggable);
+    assertEquals('https://b/', second.href);
+    assertTrue(second.draggable);
     const firstRect = first.getBoundingClientRect();
     const secondRect = second.getBoundingClientRect();
     first.dispatchEvent(new DragEvent('dragstart', {
@@ -668,6 +672,10 @@ suite('NewTabPageMostVisitedTest', () => {
   test('drag second tile to first position', async () => {
     await addTiles(2);
     const [first, second] = queryTiles();
+    assertEquals('https://a/', first.href);
+    assertTrue(first.draggable);
+    assertEquals('https://b/', second.href);
+    assertTrue(second.draggable);
     const firstRect = first.getBoundingClientRect();
     const secondRect = second.getBoundingClientRect();
     second.dispatchEvent(new DragEvent('dragstart', {
@@ -689,6 +697,31 @@ suite('NewTabPageMostVisitedTest', () => {
     assertEquals('https://a/', newSecond.href);
   });
 
+  test('most visited tiles are not draggable', async () => {
+    await addTiles(2, /* customLinksEnabled= */ false);
+    const [first, second] = queryTiles();
+    assertEquals('https://a/', first.href);
+    assertFalse(first.draggable);
+    assertEquals('https://b/', second.href);
+    assertFalse(second.draggable);
+
+    const firstRect = first.getBoundingClientRect();
+    const secondRect = second.getBoundingClientRect();
+    first.dispatchEvent(new DragEvent('dragstart', {
+      clientX: firstRect.x + firstRect.width / 2,
+      clientY: firstRect.y + firstRect.height / 2,
+    }));
+    document.dispatchEvent(new DragEvent('dragend', {
+      clientX: secondRect.x + 1,
+      clientY: secondRect.y + 1,
+    }));
+    await flushTasks();
+    assertEquals(0, testProxy.handler.getCallCount('reorderMostVisitedTile'));
+    const [newFirst, newSecond] = queryTiles();
+    assertEquals('https://a/', newFirst.href);
+    assertEquals('https://b/', newSecond.href);
+  });
+
   test('RIGHT_TO_LEFT tile title text direction', async () => {
     const tilesRendered = eventToPromise('dom-change', mostVisited.$.tiles);
     testProxy.callbackRouterRemote.setMostVisitedInfo({