WebUI Tab Strip: Remove placeholder tab on dragleave

Fixed: 1056293
Change-Id: I988cd0d273bd8d5a2e771181f3da7f186b013acf
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2075545
Commit-Queue: John Lee <johntlee@chromium.org>
Reviewed-by: Demetrios Papadopoulos <dpapad@chromium.org>
Cr-Commit-Position: refs/heads/master@{#744904}

chrome/browser/resources/tab_strip/drag_manager.js

@@ -182,8 +182,7 @@ class DragSession {
   }
 
   cancel() {
-    if (isTabElement(this.element_) &&
-        this.element_.tab.id === PLACEHOLDER_TAB_ID) {
+    if (this.isDraggingPlaceholder()) {
       this.element_.remove();
       return;
     }
@@ -200,10 +199,15 @@ class DragSession {
     this.element_.setDragging(false);
   }
 
+  /** @return {boolean} */
+  isDraggingPlaceholder() {
+    return isTabElement(this.element_) &&
+        this.element_.tab.id == PLACEHOLDER_TAB_ID;
+  }
+
   /** @param {!DragEvent} event */
   finish(event) {
-    if (isTabElement(this.element_) &&
-        this.element_.tab.id === PLACEHOLDER_TAB_ID) {
+    if (this.isDraggingPlaceholder()) {
       const id = Number(event.dataTransfer.getData(getTabIdDataType()));
       this.element_.tab = Object.assign({}, this.element_.tab, {id});
     }
@@ -351,6 +355,11 @@ export class DragManager {
 
   /** @private */
   onDragLeave_() {
+    if (this.dragSession_ && this.dragSession_.isDraggingPlaceholder()) {
+      this.dragSession_.cancel();
+      this.dragSession_ = null;
+    }
+
     // TODO(johntlee): Handle drag and drop groups from other windows with
     // DragSession.
     this.dropPlaceholder_.remove();

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

@@ -421,4 +421,27 @@ suite('DragManager', () => {
     draggedTab.dispatchEvent(new DragEvent('dragend', {bubbles: true}));
     assertEquals(draggedTab, delegate.children[draggedIndex]);
   });
+
+  test('DragLeaveRemovesExternalTab', () => {
+    const externalTabId = 1000;
+    const mockDataTransfer = new MockDataTransfer();
+    mockDataTransfer.setData(strings.tabIdDataType, `${externalTabId}`);
+    const dragEnterEvent = new DragEvent('dragenter', {
+      bubbles: true,
+      composed: true,
+      dataTransfer: mockDataTransfer,
+    });
+    delegate.dispatchEvent(dragEnterEvent);
+    assertTrue(
+        !!delegate.querySelector(`[data-tab-id="${PLACEHOLDER_TAB_ID}"]`));
+
+    const dragLeaveEvent = new DragEvent('dragleave', {
+      bubbles: true,
+      composed: true,
+      dataTransfer: mockDataTransfer,
+    });
+    delegate.dispatchEvent(dragLeaveEvent);
+    assertFalse(
+        !!delegate.querySelector(`[data-tab-id="${PLACEHOLDER_TAB_ID}"]`));
+  });
 });