WebUI Tab Strip: Keep dragged out tabs hidden when moved to a window

This CL forces the dropEffect on a drag event's dataTransfer object to
have a value of 'move' when a tab is moved into another window. The
front-end will then use this value to determine if a tab that was
dragged out should be reshown or kept hidden.

This CL does not fix the case for dragging a tab into a new window
by itself.

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

chrome/browser/resources/tab_strip/drag_manager.js

@@ -240,6 +240,15 @@ class DragSession {
           this.element_.tab.pinned, this.srcGroup);
     }
 
+    if (this.element_.isDraggedOut() &&
+        event.dataTransfer.dropEffect === 'move') {
+      // The element was dragged out of the current tab strip and was dropped
+      // into a new window. In this case, do not mark the element as no longer
+      // being dragged out. The element needs to be kept hidden, and will be
+      // automatically removed from the DOM with the next tab-removed event.
+      return;
+    }
+
     this.element_.setDragging(false);
     this.element_.setDraggedOut(false);
 

chrome/browser/resources/tab_strip/tab.js

@@ -292,6 +292,11 @@ export class TabElement extends CustomElement {
     this.toggleAttribute('dragged-out_', isDraggedOut);
   }
 
+  /** @return {boolean} */
+  isDraggedOut() {
+    return this.hasAttribute('dragged-out_');
+  }
+
   /**
    * @return {!Promise}
    */

chrome/browser/resources/tab_strip/tab_group.js

@@ -97,6 +97,11 @@ export class TabGroupElement extends CustomElement {
     this.toggleAttribute('dragged-out_', isDraggedOut);
   }
 
+  /** @return {boolean} */
+  isDraggedOut() {
+    return this.hasAttribute('dragged-out_');
+  }
+
   /**
    * @param {!TabGroupVisualData} visualData
    */

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

@@ -689,4 +689,40 @@ suite('DragManager', () => {
     assertEquals(
         0, testTabStripEmbedderProxy.getCallCount('showTabContextMenu'));
   });
+
+  test('DragEndWithDropEffectMoveDoesNotRemoveDraggedOutAttribute', () => {
+    const draggedTab = delegate.children[0];
+    const dataTransfer = new MockDataTransfer();
+    draggedTab.dispatchEvent(new DragEvent('dragstart', {
+      bubbles: true,
+      composed: true,
+      clientX: 100,
+      clientY: 150,
+      dataTransfer,
+    }));
+    delegate.dispatchEvent(new DragEvent('dragleave', {dataTransfer}));
+    assertTrue(draggedTab.isDraggedOut());
+
+    dataTransfer.dropEffect = 'move';
+    delegate.dispatchEvent(new DragEvent('dragend', {dataTransfer}));
+    assertTrue(draggedTab.isDraggedOut());
+  });
+
+  test('DragEndWithDropEffectNoneRemovesDraggedOutAttribute', () => {
+    const draggedTab = delegate.children[0];
+    const dataTransfer = new MockDataTransfer();
+    draggedTab.dispatchEvent(new DragEvent('dragstart', {
+      bubbles: true,
+      composed: true,
+      clientX: 100,
+      clientY: 150,
+      dataTransfer,
+    }));
+    delegate.dispatchEvent(new DragEvent('dragleave', {dataTransfer}));
+    assertTrue(draggedTab.isDraggedOut());
+
+    dataTransfer.dropEffect = 'none';
+    delegate.dispatchEvent(new DragEvent('dragend', {dataTransfer}));
+    assertFalse(draggedTab.isDraggedOut());
+  });
 });