WebUI Tab Strip: Update drag image logic

This CL aims to make the drag image while dragging tabs and tab groups
more consistent and more inline to each element's dimensions and DOM
structure by:

1) Initially basing offsets on the draggable target (the element with
the draggable attribute) instead of the element. TabGroupElements'
drag targets are their chips, which will result in different
calculations than if using the entire TabGroupElement's dimensions
since tab groups can have many tabs within them.

2) Using percentages instead of exact pixel values as the dimensions
of the drag image can change before and after dragstart.

3) Taking into consideration any margin or padding that a drag image
may have by using the dimensions of a drag image's "center" element.

Change-Id: I83c22a220023e6686ebea053a70c61f16c6239f0
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2300988
Commit-Queue: John Lee <johntlee@chromium.org>
Reviewed-by: dpapad <dpapad@chromium.org>
Cr-Commit-Position: refs/heads/master@{#790028}

chrome/browser/resources/tab_strip/drag_manager.js

@@ -297,7 +297,7 @@ class DragSession {
   /** @param {!DragEvent} event */
   start(event) {
     event.dataTransfer.effectAllowed = 'move';
-    const draggedItemRect = this.element_.getBoundingClientRect();
+    const draggedItemRect = event.composedPath()[0].getBoundingClientRect();
     this.element_.setDragging(true);
 
     const dragImage = this.element_.getDragImage();
@@ -313,14 +313,26 @@ class DragSession {
     verticalOffset = 25;
     // </if>
 
-    const xDiffFromCenter =
-        event.clientX - draggedItemRect.left - (draggedItemRect.width / 2);
-    const yDiffFromCenter = event.clientY - draggedItemRect.top -
-        verticalOffset - (draggedItemRect.height / 2);
-
-    event.dataTransfer.setDragImage(
-        dragImage, (dragImageRect.width / 2 + xDiffFromCenter / scaleFactor),
-        (dragImageRect.height / 2 + yDiffFromCenter / scaleFactor));
+    const eventXPercentage =
+        (event.clientX - draggedItemRect.left) / draggedItemRect.width;
+    const eventYPercentage =
+        (event.clientY - draggedItemRect.top) / draggedItemRect.height;
+
+    // First, align the top-left corner of the drag image's center element
+    // to the event's coordinates.
+    const dragImageCenterRect =
+        this.element_.getDragImageCenter().getBoundingClientRect();
+    let xOffset = (dragImageCenterRect.left - dragImageRect.left) * scaleFactor;
+    let yOffset = (dragImageCenterRect.top - dragImageRect.top) * scaleFactor;
+
+    // Then, offset the drag image again by using the event's coordinates
+    // within the dragged item itself so that the drag image appears positioned
+    // as closely as its state before dragging.
+    xOffset += dragImageCenterRect.width * eventXPercentage;
+    yOffset += dragImageCenterRect.height * eventYPercentage;
+    yOffset -= verticalOffset;
+
+    event.dataTransfer.setDragImage(dragImage, xOffset, yOffset);
 
     if (isTabElement(this.element_)) {
       event.dataTransfer.setData(

chrome/browser/resources/tab_strip/tab.html

@@ -295,15 +295,8 @@
   :host([dragging_]) #dragImage {
     /* Enough padding to not crop the box shadow set on #tab below. */
     --drag-image-padding: 25px;
-    align-items: center;
-    display: flex;
     height: 100%;
-    justify-content: center;
-    padding-block-end: var(--drag-image-padding);
-    padding-block-start: var(--drag-image-padding);
-    padding-inline-end: calc(
-        var(--tabstrip-tab-spacing) + var(--drag-image-padding));
-    padding-inline-start: var(--drag-image-padding);
+    padding: var(--drag-image-padding);
     position: absolute;
     top: 100vh;
     width: 100%;

chrome/browser/resources/tab_strip/tab.js

@@ -200,6 +200,13 @@ export class TabElement extends CustomElement {
     return this.dragImageEl_;
   }
 
+  /** @return {!HTMLElement} */
+  getDragImageCenter() {
+    // dragImageEl_ has padding, so the drag image should be centered relative
+    // to tabEl_, the element within the padding.
+    return this.tabEl_;
+  }
+
   /**
    * @param {string} imgData
    */

chrome/browser/resources/tab_strip/tab_group.js

@@ -48,6 +48,13 @@ export class TabGroupElement extends CustomElement {
     return /** @type {!HTMLElement} */ (this.$('#dragImage'));
   }
 
+  /** @return {!HTMLElement} */
+  getDragImageCenter() {
+    // Since the drag handle is #chip, the drag image should be centered
+    // relatively to it.
+    return /** @type {!HTMLElement} */ (this.$('#chip'));
+  }
+
   /** @private */
   onClickChip_() {
     if (!this.dataset.groupId) {

chrome/test/data/webui/tab_strip/drag_manager_test.js

@@ -150,12 +150,15 @@ suite('DragManager', () => {
   test('DragStartSetsDragImage', () => {
     const draggedElement = delegate.children[0];
     const dragImage = draggedElement.getDragImage();
+    const dragImageCenter = draggedElement.getDragImageCenter();
 
     // Mock the dimensions and position of the element and the drag image.
     const draggedElementRect = {top: 20, left: 30, width: 200, height: 150};
     draggedElement.getBoundingClientRect = () => draggedElementRect;
     const dragImageRect = {top: 20, left: 30, width: 200, height: 150};
     dragImage.getBoundingClientRect = () => dragImageRect;
+    const dragImageCenterRect = {top: 25, left: 25, width: 100, height: 120};
+    dragImageCenter.getBoundingClientRect = () => dragImageCenterRect;
 
     const eventClientX = 100;
     const eventClientY = 50;
@@ -172,26 +175,40 @@ suite('DragManager', () => {
     assertEquals(
         mockDataTransfer.dragImageData.image, draggedElement.getDragImage());
 
-    const xDiffFromCenter =
-        eventClientX - draggedElementRect.left - draggedElementRect.width / 2;
-    const yDiffFromCenter =
-        eventClientY - draggedElementRect.top - draggedElementRect.height / 2;
+    const eventXPercentage =
+        (eventClientX - draggedElementRect.left) / draggedElementRect.width;
+    const eventYPercentage =
+        (eventClientY - draggedElementRect.top) / draggedElementRect.height;
 
+    // Offset should account for any margins or padding between the
+    // dragImageCenter and the dragImage.
+    let dragImageCenterLeftMargin =
+        dragImageCenterRect.left - dragImageRect.left;
+    let dragImageCenterTopMargin = dragImageCenterRect.top - dragImageRect.top;
     if (isChromeOS) {
-      assertEquals(
-          dragImageRect.width / 2 + xDiffFromCenter / 1.2,
-          mockDataTransfer.dragImageData.offsetX);
-      assertEquals(
-          dragImageRect.height / 2 + (yDiffFromCenter - 25) / 1.2,
-          mockDataTransfer.dragImageData.offsetY);
-    } else {
-      assertEquals(
-          dragImageRect.width / 2 + xDiffFromCenter,
-          mockDataTransfer.dragImageData.offsetX);
-      assertEquals(
-          dragImageRect.height / 2 + yDiffFromCenter,
-          mockDataTransfer.dragImageData.offsetY);
+      // Dimensions are scaled on ChromeOS so the margins and paddings are also
+      // scaled.
+      dragImageCenterLeftMargin *= 1.2;
+      dragImageCenterTopMargin *= 1.2;
     }
+
+    // Offset should map event's coordinates to within the dimensions of the
+    // dragImageCenter.
+    const eventXWithinDragImageCenter =
+        eventXPercentage * dragImageCenterRect.width;
+    const eventYWithinDragImageCenter =
+        eventYPercentage * dragImageCenterRect.height;
+
+    let expectedOffsetX =
+        dragImageCenterLeftMargin + eventXWithinDragImageCenter;
+    let expectedOffsetY =
+        dragImageCenterTopMargin + eventYWithinDragImageCenter;
+    if (isChromeOS) {
+      expectedOffsetY -= 25;
+    }
+
+    assertEquals(expectedOffsetX, mockDataTransfer.dragImageData.offsetX);
+    assertEquals(expectedOffsetY, mockDataTransfer.dragImageData.offsetY);
   });
 
   test('DragOverMovesTabs', async () => {