WebUI NTP: shortcuts, disabled most-visited drag for touch and fixes

When custom links are disabled, the shortcut tiles shouldn't be
draggable. For touch, the drag start is initiated by a 'touchstart'
event. This CL disables the drag for this situation.

When using touch, 'touchmove' scrolls the page content. This is not
desired for draggable elements like the custom shortcuts. For this
reason 'touch-action' is set to 'none'.

The location of the dragging tile when using touch is not correct. The
code was using |pageX| and |pageY| which takes into account the scroll
position. When there is a non-zero scroll offset, the location of the
dragging element is incorrect. |clientX| and |clientY| should be used
instead.

Bug: 1161486
Change-Id: Ie0ae9c08fb396fe2d19b4c294a4698cf57184b3d
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2630007
Commit-Queue: Esmael Elmoslimany <aee@chromium.org>
Commit-Queue: Moe Ahmadi <mahmadi@chromium.org>
Reviewed-by: Moe Ahmadi <mahmadi@chromium.org>
Auto-Submit: Esmael Elmoslimany <aee@chromium.org>
Cr-Commit-Position: refs/heads/master@{#843798}

chrome/browser/resources/new_tab_page/most_visited.html

@@ -58,8 +58,7 @@
     display: flex;
     flex-direction: column;
     height: var(--tile-size);
-    margin-bottom: 13px;
-    margin-top: 3px;
+    margin-bottom: 16px;
     opacity: 1;
     outline: none;
     padding-bottom: 4px;
@@ -73,6 +72,10 @@
     width: var(--tile-size);
   }
 
+  .tile {
+    touch-action: none;
+  }
+
   :host-context(.focus-outline-visible) .tile:focus,
   :host-context(.focus-outline-visible) #addShortcut:focus {
     box-shadow: var(--ntp-focus-shadow);

chrome/browser/resources/new_tab_page/most_visited.js

@@ -828,7 +828,7 @@ class MostVisitedElement extends PolymerElement {
    * @private
    */
   onTouchStart_(e) {
-    if (this.reordering_) {
+    if (this.reordering_ || !this.customLinksEnabled_) {
       return;
     }
     const tileElement = /** @type {HTMLElement} */ (e.composedPath().find(
@@ -836,18 +836,18 @@ class MostVisitedElement extends PolymerElement {
     if (!tileElement) {
       return;
     }
-    const {pageX, pageY} = e.changedTouches[0];
-    this.dragStart_(tileElement, pageX, pageY);
+    const {clientX, clientY} = e.changedTouches[0];
+    this.dragStart_(tileElement, clientX, clientY);
     const touchMove = e => {
-      const {pageX, pageY} = e.changedTouches[0];
-      this.dragOver_(pageX, pageY);
+      const {clientX, clientY} = e.changedTouches[0];
+      this.dragOver_(clientX, clientY);
     };
     const touchEnd = e => {
       this.ownerDocument.removeEventListener('touchmove', touchMove);
       tileElement.removeEventListener('touchend', touchEnd);
       tileElement.removeEventListener('touchcancel', touchEnd);
-      const {pageX, pageY} = e.changedTouches[0];
-      this.dragEnd_(pageX, pageY);
+      const {clientX, clientY} = e.changedTouches[0];
+      this.dragEnd_(clientX, clientY);
       this.reordering_ = false;
     };
     this.ownerDocument.addEventListener('touchmove', touchMove);